import ceph quincy 17.2.6

[ceph.git] / ceph / src / pybind / mgr / dashboard / frontend / src / app / shared / components / grafana / grafana.component.html

diff --git a/ceph/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.html b/ceph/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.html
index 61fccbc616162b4c8301682b7c782d6389d26c49..6191bac3bcfe289ca6f55365c0d594be890b9fc7 100644 (file)
--- a/ceph/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.html
+++ b/ceph/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.html
@@ -2,52 +2,80 @@
 <cd-loading-panel *ngIf="loading && grafanaExist"
                   i18n>Loading panel data...</cd-loading-panel>
 
-<cd-info-panel *ngIf="!grafanaExist"
-               i18n>Please consult the
-  <a href="{{ docsUrl }}" target="_blank">documentation</a> on how to
-  configure and enable the monitoring functionality.</cd-info-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-info-panel *ngIf="!dashboardExist"
-               i18n>Grafana Dashboard doesn't exist. Please refer to
-  <a href="{{ docsUrl }}" target="_blank">documentation</a> on how to
-  add dashboards to Grafana.</cd-info-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>
 
-<div class="row"
-     *ngIf="grafanaExist && dashboardExist">
-  <div class="col-md-12 timepicker">
-    <label class="control-label col-sm-1"
-           for="timepicker-control">
-      <ng-container i18n>Grafana Time Picker</ng-container>
-    </label>
-    <div class="col-sm-9">
-      <select id="timepicker"
-              name="timepicker-control"
-              class="form-control "
-              [(ngModel)]="time"
-              (ngModelChange)="onTimepickerChange($event)">
-        <option *ngFor="let key of grafanaTimes"
-                [ngValue]="key.value">{{ key.name }}
-        </option>
-      </select>
+<ng-container *ngIf="grafanaExist && dashboardExist">
+  <div class="row mb-3">
+    <div class="col-lg-4 d-flex">
+      <div class="col-md-3 timepicker">
+        <label for="timepicker"
+               class="mt-2"
+               i18n>Grafana Time Picker</label></div>
+        <div class="col-md-4">
+        <select id="timepicker"
+                name="timepicker"
+                class="form-select"
+                [(ngModel)]="time"
+                (ngModelChange)="onTimepickerChange($event)">
+          <option *ngFor="let key of grafanaTimes"
+                  [ngValue]="key.value">{{ key.name }}
+          </option>
+        </select></div>
+        <div class="col-md-3">
+
+        <button class="btn btn-light ms-3"
+                i18n-title
+                title="Reset Settings"
+                (click)="reset()">
+          <i [ngClass]="[icons.undo]"></i>
+        </button>
+        <button class="btn btn-light ms-3"
+                i18n-title
+                title="Show hidden information"
+                (click)="showMessage = !showMessage">
+          <i [ngClass]="[icons.infoCircle, icons.large]"></i>
+        </button>
+      </div>
     </div>
-    <button class="btn btn-sm"
-            i18n-title
-            title="Reset Settings"
-            (click)="reset()">
-      <i class="fa fa-undo"></i>
-    </button>
-    <br>
   </div>
-  <div class="col-md-12">
-    <div class="grafana-container">
-      <iframe #iframe
-              id="iframe"
-              [src]="grafanaSrc"
-              class="grafana"
-              [ngClass]="panelStyle"
-              frameborder="0"
-              scrolling="no">
-      </iframe>
+
+  <div class="row">
+    <div class="col my-2"
+         *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"
+                [title]="title"
+                i18n-title>
+        </iframe>
+      </div>
     </div>
   </div>
-</div>
+</ng-container>