STAC-23604: Reflect in the health status badge connection or lack of …

.changeset/silly-plants-kick.md

@@ -0,0 +1,5 @@
+---
+"observability": patch
+---
+
+Fix bug where health state badges show UNKNOWN health state when the extension is not fully configured

pkg/observability/components/ComponentHealth.vue

@@ -1,6 +1,6 @@
 <script>
 import { mapGetters } from "vuex";
-import { loadComponent } from "../modules/suseObservability";
+import {ConnectionStatus, FetchError, loadComponent} from "../modules/suseObservability";
 import { isCrdLoaded, loadSuseObservabilitySettings } from "../modules/rancher";
 import { buildUrn } from "../modules/urn";
 import { HEALTH_STATE_TYPES } from "../types/types";
@@ -17,7 +17,7 @@ export default {
   },
   data() {
     return {
-      health: HEALTH_STATE_TYPES.UNKNOWN,
+      health: HEALTH_STATE_TYPES.UNCONFIGURED,
       urn: "",
     };
   },
@@ -46,8 +46,19 @@ export default {
       return;
     }
 
-    const component = await loadComponent(settings, this.urn);
-    this.health = component.state.healthState;
+    try {
+      const component = await loadComponent(settings, this.urn);
+      this.health = component.state.healthState;
+    } catch (error) {
+      if (error instanceof FetchError) {
+        if (error.status === ConnectionStatus.Unconfigured) {
+          this.health = HEALTH_STATE_TYPES.UNCONFIGURED;
+          return;
+        }
+      }
+
+      this.health = HEALTH_STATE_TYPES.CONNECTION_ERROR;
+    }
   },
 };
 </script>

pkg/observability/components/Health/HealthDisc.vue

@@ -3,7 +3,7 @@ import { HEALTH_STATE_TYPES } from "../../types/types";
 
 export default {
   name: "HealthDisc",
-  props: { health: { type: String, default: HEALTH_STATE_TYPES.UNKNOWN } },
+  props: { health: { type: String, default: HEALTH_STATE_TYPES.UNCONFIGURED } },
 };
 </script>
 <template>

pkg/observability/components/Health/HealthState.vue

@@ -22,7 +22,7 @@ export default {
         case HEALTH_STATE_TYPES.CRITICAL:
           return "red";
         case HEALTH_STATE_TYPES.UNKNOWN:
-        case HEALTH_STATE_TYPES.NOT_MONITORED:
+        case HEALTH_STATE_TYPES.UNCONFIGURED:
           return "grey";
         default:
           return "skeleton";

pkg/observability/components/MonitorTab.vue

@@ -97,18 +97,17 @@ export default {
 
     this.urn = this.componentIdentifier;
 
-    const component = await loadComponent(settings, this.urn);
-    if (!component) {
+    try {
+      const component = await loadComponent(settings, this.urn);
+      this.monitors = component.syncedCheckStates;
+
+      this.url = settings.url;
+    } catch (e) {
       this.observationStatus = await loadObservationStatus(
-        this.clusterId,
-        settings,
+          this.clusterId,
+          settings,
       );
-      return;
     }
-
-    this.monitors = component.syncedCheckStates;
-
-    this.url = settings.url;
   },
 };
 </script>

pkg/observability/formatters/ComponentLinkedHealthState.vue

@@ -1,7 +1,11 @@
 <script>
 import { mapGetters } from "vuex";
 import HealthState from "../components/Health/HealthState";
-import { loadComponent } from "../modules/suseObservability";
+import {
+  ConnectionStatus,
+  FetchError,
+  loadComponent,
+} from "../modules/suseObservability";
 import { loadSuseObservabilitySettings, isCrdLoaded } from "../modules/rancher";
 import { buildUrn } from "../modules/urn";
 import { HEALTH_STATE_TYPES } from "../types/types";
@@ -75,6 +79,19 @@ export default {
       };
     } catch (error) {
       this.error = error;
+
+      if (error instanceof FetchError) {
+        if (error.status === ConnectionStatus.Unconfigured) {
+          this.data = {
+            health: HEALTH_STATE_TYPES.UNCONFIGURED
+          }
+          return;
+        }
+      }
+
+      this.data = {
+        health: HEALTH_STATE_TYPES.CONNECTION_ERROR
+      }
     } finally {
       this.isLoading = false;
     }
@@ -94,5 +111,5 @@ export default {
     <HealthState :health="data.health" :color="color" />
   </a>
 
-  <HealthState v-else :health="HEALTH_STATE_TYPES.UNKNOWN" :color="color" />
+  <HealthState v-else :health="HEALTH_STATE_TYPES.UNCONFIGURED" :color="color" />
 </template>

pkg/observability/l10n/en-us.yaml

@@ -62,7 +62,7 @@ observability:
     noDataPostpend: "the Stackpack or align the agent configuration."
     accessDenied: Unable to test if SUSE Observability is installed
     connecting: "Connecting to SUSE Observability Plane..."
-    notConnectedPrepend: "SUSE Observability has not been configured, please go to the"
+    notConnectedPrepend: "SUSE Observability has not been configured or has a connection error, please go to the"
     notConnectedObservability: "SUSE Observability Configuration."
     clusterHealth: "Cluster health:"
     componentsHealth: "Components health:"

pkg/observability/modules/suseObservability.ts

@@ -1,7 +1,7 @@
 import { ConnectionInfo } from "types/component";
 import { ObservabilitySettings } from "./settings";
 
-class FetchError extends Error {
+export class FetchError extends Error {
   status: number;
 
   constructor(message: string, status: number) {
@@ -20,6 +20,7 @@ export enum ConnectionStatus {
   Connected = 0,
   InvalidToken,
   CrossOriginError,
+  Unconfigured,
 }
 
 export async function checkConnection(
@@ -124,6 +125,9 @@ export async function loadComponent(
   spec: ObservabilitySettings,
   identifier: string,
 ) {
+  if (!spec) {
+    throw new FetchError("Extension not configured", ConnectionStatus.Unconfigured);
+  }
   const creds = token(spec.serviceToken);
   const resp = await fetch(
     `${spec.url}/api/components?identifier=${encodeURIComponent(identifier)}`,

pkg/observability/types/headers.ts

@@ -3,7 +3,7 @@ import { TableColumn } from "@rancher/shell/core/types";
 export const ObservabilityHealth: TableColumn = {
   labelKey: "observability.health",
   getValue: (row: any) => {
-    return "UNKNOWN";
+    return "UNCONFIGURED";
   },
   formatter: "ComponentLinkedHealthState",
   width: 100,

pkg/observability/types/types.ts

@@ -109,5 +109,6 @@ export const HEALTH_STATE_TYPES = {
   CLEAR: "CLEAR",
   DEVIATING: "DEVIATING",
   CRITICAL: "CRITICAL",
-  NOT_MONITORED: "NOT MONITORED",
+  CONNECTION_ERROR: "CONNECTION_ERROR",
+  UNCONFIGURED: "UNCONFIGURED",
 };