1 files changed, 78 insertions, 0 deletions
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.html
new file mode 100644
index 000000000..8ad98b27f
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.html
@@ -0,0 +1,78 @@
+<!-- Embed dashboard -->
+<cd-loading-panel *ngIf="loading && grafanaExist"
+                  i18n>Loading panel data...</cd-loading-panel>
+
+<cd-alert-panel type="info"
+                *ngIf="!grafanaExist"
+                i18n>Please consult the <cd-doc section="grafana"></cd-doc> on
+  how to configure and enable the monitoring functionality.</cd-alert-panel>
+
+<cd-alert-panel type="info"
+                *ngIf="!dashboardExist"
+                i18n>Grafana Dashboard doesn't exist. Please refer to
+  <cd-doc section="grafana"></cd-doc> on how to add dashboards to Grafana.</cd-alert-panel>
+
+<ng-container *ngIf="grafanaExist && dashboardExist">
+  <div class="row">
+    <div class="col">
+      <div class="form-inline timepicker">
+        <label for="timepicker"
+               class="ml-1 my-1"
+               i18n>Grafana Time Picker</label>
+
+        <select id="timepicker"
+                name="timepicker"
+                class="custom-select my-1 mx-3"
+                [(ngModel)]="time"
+                (ngModelChange)="onTimepickerChange($event)">
+          <option *ngFor="let key of grafanaTimes"
+                  [ngValue]="key.value">{{ key.name }}
+          </option>
+        </select>
+
+        <button class="btn btn-light my-1"
+                i18n-title
+                title="Reset Settings"
+                (click)="reset()">
+          <i [ngClass]="[icons.undo]"></i>
+        </button>
+        <button class="btn btn-light my-1 ml-3"
+                i18n-title
+                title="Show hidden information"
+                (click)="showMessage = !showMessage">
+          <i [ngClass]="[icons.infoCircle, icons.large]"></i>
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="col my-3"
+         *ngIf="showMessage">
+      <cd-alert-panel type="info"
+                      class="mb-3"
+                      *ngIf="showMessage"
+                      dismissible="true"
+                      (dismissed)="showMessage = false"
+                      i18n>If no embedded Grafana Dashboard appeared below, please follow <a [href]="grafanaSrc"
+                      target="_blank"
+                      noopener
+                      noreferrer>this link </a> to check if Grafana is reachable and there are no HTTPS certificate issues. You may need to reload this page after accepting any Browser certificate exceptions</cd-alert-panel>
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="col">
+      <div class="grafana-container">
+        <iframe #iframe
+                id="iframe"
+                [src]="grafanaSrc"
+                class="grafana"
+                [ngClass]="panelStyle"
+                frameborder="0"
+                scrolling="no">
+        </iframe>
+      </div>
+    </div>
+  </div>
+</ng-container>