mgr/dashboard: Dashboard should display some helpful (error) message when the iframe...

This commit adds checks for successful grafana panel loads before displaying dashboards and informs the user if the request is blocked by the browser
Fixes: https://tracker.ceph.com/issues/54206
Signed-off-by: Ngwa Sedrick Meh <nsedrick101@gmail.com>
(cherry picked from commit a4b66efb2a2139bd88a6a088af9bd5e079e46105)

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
index 755b57c7045fffe03118879a408db0c54de67abb..8ad98b27f47e7bf11b0e394503dfd7ddf7109efc 100644 (file)
--- 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
@@ -36,10 +36,31 @@
                 (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">

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.ts
index a687959b747f8532a7b03a69e8a642000a21655e..2815160abde2c9663a66d15401aded8cc7115b7b 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.ts
@@ -23,6 +23,7 @@ export class GrafanaComponent implements OnInit, OnChanges {
   loading = true;
   styles: Record<string, string> = {};
   dashboardExist = true;
+  showMessage = false;
   time: string;
   grafanaTimes: any;
   icons = Icons;