From 5bacb4d6c67fd1bf96d552a63888884e47e74c20 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

Resolves: rhbz#2056478
Fixes: https://tracker.ceph.com/issues/54206
Signed-off-by: Ngwa Sedrick Meh <nsedrick101@gmail.com>
(cherry picked from commit a4b66efb2a2139bd88a6a088af9bd5e079e46105)
(cherry picked from commit 30fa3dbe654471072352a5027a5b363143e3f8f7)
---
 .../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 755b57c7045ff..8ad98b27f47e7 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 a687959b747f8..2815160abde2c 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