From d33a223e38608b66d00274d7205f61bbd35dbb92 Mon Sep 17 00:00:00 2001
From: Richard Cox <18697775+richard-cox@users.noreply.github.com>
Date: Thu, 4 Jul 2024 07:02:16 +0100
Subject: [PATCH] Merge pull request #11351 from
 richard-cox/fixes-following-grafana-bump

Fix two monitoring issues after chart bump
---
 shell/components/AlertTable.vue       | 24 +++++++++++++++++-------
 shell/components/GrafanaDashboard.vue | 10 ++++++----
 2 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/shell/components/AlertTable.vue b/shell/components/AlertTable.vue
index 7b395b4b7cd..4308c8f7b0f 100644
--- a/shell/components/AlertTable.vue
+++ b/shell/components/AlertTable.vue
@@ -49,6 +49,7 @@ export default {
     ];
 
     return {
+      inStore:            this.$store.getters['currentProduct'].inStore,
       alertManagerPoller: new Poller(
         this.loadAlertManagerEvents,
         ALERTMANAGER_POLL_RATE_MS,
@@ -69,15 +70,24 @@ export default {
   },
 
   methods: {
-    async loadAlertManagerEvents() {
-      const inStore = this.$store.getters['currentProduct'].inStore;
-      const alertsEvents = await this.$store.dispatch(
-        `${ inStore }/request`,
-        { url: `/k8s/clusters/${ this.currentCluster.id }/api/v1/namespaces/${ this.monitoringNamespace }/services/http:${ this.alertServiceEndpoint }:9093/proxy/api/v1/alerts` }
+    async fetchAlertManagerEvents(version) {
+      return await this.$store.dispatch(
+        `${ this.inStore }/request`,
+        { url: `/k8s/clusters/${ this.currentCluster.id }/api/v1/namespaces/${ this.monitoringNamespace }/services/http:${ this.alertServiceEndpoint }:9093/proxy/api/${ version }/alerts` }
       );
+    },
+
+    async loadAlertManagerEvents() {
+      let alertEvents;
+
+      try {
+        alertEvents = await this.fetchAlertManagerEvents('v2');
+      } catch (err) {
+        alertEvents = await this.fetchAlertManagerEvents('v1').then((res) => res?.data);
+      }
 
-      if (alertsEvents.data) {
-        this.allAlerts = alertsEvents.data;
+      if (alertEvents) {
+        this.allAlerts = alertEvents;
       }
     },
 
diff --git a/shell/components/GrafanaDashboard.vue b/shell/components/GrafanaDashboard.vue
index c3ac0b6113e..40857f1a620 100644
--- a/shell/components/GrafanaDashboard.vue
+++ b/shell/components/GrafanaDashboard.vue
@@ -114,10 +114,12 @@ export default {
       this.interval = setInterval(() => {
         try {
           const graphWindow = this.$refs.frame?.contentWindow;
-          const errorElements = graphWindow.document.getElementsByClassName('alert-error');
-          const errorCornerElements = graphWindow.document.getElementsByClassName('panel-info-corner--error');
-          const panelInFullScreenElements = graphWindow.document.getElementsByClassName('panel-in-fullscreen');
-          const panelContainerElements = graphWindow.document.getElementsByClassName('panel-container');
+
+          // Note. getElementsByClassName won't work, following a grafana bump class names are now unique - for example css-2qng6u-panel-container
+          const errorElements = graphWindow.document.querySelectorAll('[class$="alert-error');
+          const errorCornerElements = graphWindow.document.querySelectorAll('[class$="panel-info-corner--error');
+          const panelInFullScreenElements = graphWindow.document.querySelectorAll('[class$="panel-in-fullscreen');
+          const panelContainerElements = graphWindow.document.querySelectorAll('[class$="panel-container');
           const error = errorElements.length > 0 || errorCornerElements.length > 0;
           const loaded = panelInFullScreenElements.length > 0 || panelContainerElements.length > 0;
           const errorMessageElms = graphWindow.document.getElementsByTagName('pre');