From a4b66efb2a2139bd88a6a088af9bd5e079e46105 Mon Sep 17 00:00:00 2001
From: Ngwa Sedrick Meh <nsedrick101@gmail.com>
Date: Mon, 14 Feb 2022 06:17:47 +0100
Subject: [PATCH] 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>
---
 .../components/grafana/grafana.component.html | 21 +++++++++++++++++++
 .../components/grafana/grafana.component.ts   |  1 +
 2 files changed, 22 insertions(+)

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 755b57c7045..8ad98b27f47 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 a5c32e6867a..e7f3f5dc990 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;
-- 
2.39.5