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 a5a29bfbee8509f47be002b3cc48f5a0cf731f20..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
@@ -13,35 +13,57 @@
   <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-12">
-      <div class="form-inline timepicker">
+  <div class="row mb-3">
+    <div class="col-lg-4 d-flex">
+      <div class="col-md-3 timepicker">
         <label for="timepicker"
-               class="ml-1 my-1 col-form-label"
-               i18n>Grafana Time Picker</label>
-
+               class="mt-2"
+               i18n>Grafana Time Picker</label></div>
+        <div class="col-md-4">
         <select id="timepicker"
                 name="timepicker"
-                class="custom-select my-1 mx-3"
+                class="form-select"
                 [(ngModel)]="time"
                 (ngModelChange)="onTimepickerChange($event)">
           <option *ngFor="let key of grafanaTimes"
                   [ngValue]="key.value">{{ key.name }}
           </option>
-        </select>
+        </select></div>
+        <div class="col-md-3">
 
-        <button class="btn btn-light my-1"
+        <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>
   </div>
 
   <div class="row">
-    <div class="col-12">
+    <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"
@@ -49,7 +71,9 @@
                 class="grafana"
                 [ngClass]="panelStyle"
                 frameborder="0"
-                scrolling="no">
+                scrolling="no"
+                [title]="title"
+                i18n-title>
         </iframe>
       </div>
     </div>