From: Ngwa Sedrick Meh <nsedrick101@gmail.com>
Date: Mon, 14 Feb 2022 05:17:47 +0000 (+0100)
Subject: mgr/dashboard: Dashboard should display some helpful (error) message when the iframe... 
X-Git-Tag: v18.0.0~656^2
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=a4b66efb2a2139bd88a6a088af9bd5e079e46105;p=ceph.git

mgr/dashboard: Dashboard should display some helpful (error) message when the iframe-embedded Grafana dashboard failed to load

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>
---

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 755b57c7045f..8ad98b27f47e 100644
--- 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 a5c32e6867a2..e7f3f5dc990b 100644
--- 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;