various improvements (#118)

fvlankvelt · web-flow · commit 79384fc266db · 2026-06-24T17:30:02.000+02:00
* STAC-24201: infer STS_CLUSTER_NAME from agent deployments

* STAC-25034: strip trailing slashes from url before saving

* STAC-24238: render correct urls for pv, pvcs

* STAC-24259: show UNOBSERVED when agent is not installed in a cluster

* STAC-24632: validate service token when saving configuration

* STAC-25130: include role, rolebinding for users to read extension configuration (secret)

* STAC-23610: open links to observability in new tab

* STAC-23606: link to observability from health state of cluster

* STAC-0: explain goal of regexp
diff --git a/.changeset/metal-maps-obey.md b/.changeset/metal-maps-obey.md
@@ -0,0 +1,5 @@
+---
+"observability": patch
+---
+
+various bugs
diff --git a/manifests/role-suse-observability-extension-user.yaml b/manifests/role-suse-observability-extension-user.yaml
@@ -0,0 +1,13 @@
+apiVersion: rbac.authorization.k8s.io/v1
+kind: Role
+metadata:
+  name: suse-observability-extension-user
+  namespace: suse-observability-extension
+rules:
+  - apiGroups:
+      - ""
+    resources:
+      - secrets
+    verbs:
+      - get
+      - list
diff --git a/manifests/rolebinding-suse-observability-extension-user.yaml b/manifests/rolebinding-suse-observability-extension-user.yaml
@@ -0,0 +1,13 @@
+apiVersion: rbac.authorization.k8s.io/v1
+kind: RoleBinding
+metadata:
+  name: suse-observability-extension-user
+  namespace: suse-observability-extension
+roleRef:
+  apiGroup: rbac.authorization.k8s.io
+  kind: Role
+  name: suse-observability-extension-user
+subjects:
+  - apiGroup: rbac.authorization.k8s.io
+    kind: Group
+    name: system:authenticated
diff --git a/pkg/observability/components/ComponentHealth.vue b/pkg/observability/components/ComponentHealth.vue
@@ -1,6 +1,10 @@
 <script>
 import { mapGetters } from "vuex";
-import { loadSuseObservabilitySettings } from "../modules/rancher";
+import {
+  loadSuseObservabilitySettings,
+  loadAgentStatus,
+  AgentStatus,
+} from "../modules/rancher";
 import {
   ConnectionStatus,
   FetchError,
@@ -31,17 +35,21 @@ export default {
     clusterId() {
       return this.currentCluster?.id;
     },
-
-    componentIdentifier() {
-      const cluster = this.currentCluster?.spec.displayName;
-
-      return buildUrn(this.resource, cluster);
-    },
   },
   async fetch() {
-    const settings = await loadSuseObservabilitySettings(this.$store);
+    const agentStatus = await loadAgentStatus(
+      this.$store,
+      this.currentCluster?.id,
+    );
+    if (agentStatus.status === AgentStatus.NotInstalled) {
+      this.health = HEALTH_STATE_TYPES.UNOBSERVED;
+      return;
+    }
+    const clusterName =
+      agentStatus.clusterName ?? this.currentCluster.spec.displayName;
 
-    this.urn = this.componentIdentifier;
+    const settings = await loadSuseObservabilitySettings(this.$store);
+    this.urn = buildUrn(this.resource, clusterName);
     if (!this.urn || !settings) {
       return;
     }
diff --git a/pkg/observability/components/Dashboard/ConfigurationView.vue b/pkg/observability/components/Dashboard/ConfigurationView.vue
@@ -81,6 +81,8 @@ export default {
     },
 
     async save(btnCb) {
+      // strip all trailing slashes
+      this.suseObservabilityURL = this.suseObservabilityURL.replace(/\/+$/, "");
       const conn = await checkConnection({
         apiURL: this.suseObservabilityURL,
         serviceToken: this.suseObservabilityServiceToken,
@@ -194,7 +196,7 @@ export default {
           <div class="banner-info">
             <p>{{ t("observability.dashboard.connected") }}</p>
             <!-- reserve a line when the url is an empty string so UI won't jump on change -->
-            <a :href="`${suseObservabilityURL}/`">{{
+            <a :href="`${suseObservabilityURL}/`" target="_blank">{{
               suseObservabilityURL || "&nbsp;"
             }}</a>
           </div>
diff --git a/pkg/observability/components/MonitorTab.vue b/pkg/observability/components/MonitorTab.vue
@@ -3,7 +3,11 @@ import LiveDate from "@shell/components/formatter/LiveDate.vue";
 import SortableTable from "@shell/components/SortableTable";
 import { mapGetters } from "vuex";
 
-import { loadSuseObservabilitySettings } from "../modules/rancher";
+import {
+  AgentStatus,
+  loadAgentStatus,
+  loadSuseObservabilitySettings,
+} from "../modules/rancher";
 import {
   loadComponent,
   loadObservationStatus,
@@ -48,30 +52,6 @@ export default {
     hasMonitors() {
       return this.monitors?.length > 0;
     },
-
-    componentIdentifier() {
-      const cluster = this.currentCluster?.spec.displayName;
-
-      if (!cluster) {
-        return "";
-      }
-
-      let identifier = `urn:kubernetes:/${cluster}`;
-
-      const resourceData = this.resource?.metadata
-        ? this.resource
-        : this.currResourceData;
-
-      if (resourceData?.metadata?.namespace) {
-        identifier += `:${resourceData.metadata.namespace}`;
-      }
-
-      identifier += `:${mapKind(resourceData?.type?.toLowerCase())}/${
-        resourceData?.metadata?.name
-      }`;
-
-      return identifier;
-    },
   },
   async fetch() {
     if (!this.resource?.metadata) {
@@ -89,11 +69,35 @@ export default {
       });
     }
 
-    const settings = await loadSuseObservabilitySettings(this.$store);
+    const agentStatus = await loadAgentStatus(
+      this.$store,
+      this.currentCluster?.id,
+    );
+    if (agentStatus.status === AgentStatus.NotInstalled) {
+      this.observationStatus = ObservationStatus.NotDeployed;
+      return;
+    }
+    const clusterName =
+      agentStatus.clusterName ?? this.currentCluster?.spec.displayName;
+
+    let identifier = `urn:kubernetes:/${clusterName}`;
+
+    const resourceData = this.resource?.metadata
+      ? this.resource
+      : this.currResourceData;
+
+    if (resourceData?.metadata?.namespace) {
+      identifier += `:${resourceData.metadata.namespace}`;
+    }
+
+    identifier += `:${mapKind(resourceData?.type?.toLowerCase())}/${
+      resourceData?.metadata?.name
+    }`;
 
-    this.urn = this.componentIdentifier;
+    this.urn = identifier;
 
     try {
+      const settings = await loadSuseObservabilitySettings(this.$store);
       const component = await loadComponent(settings, this.urn);
       this.monitors = component.syncedCheckStates;
 
diff --git a/pkg/observability/components/ObservabilityClusterCard.vue b/pkg/observability/components/ObservabilityClusterCard.vue
@@ -39,12 +39,15 @@ export default {
   data() {
     return {
       observationStatus: ObservationStatus.Observed,
-      agentStatus: AgentStatus.Installed,
+      agentStatus: {
+        status: AgentStatus.Installed,
+      },
       snapshot: undefined,
       deviating: 0,
       critical: 0,
       isConfigured: true,
       installUrl: undefined,
+      componentUrl: undefined,
       HEALTH_STATE_TYPES,
       ObservationStatus,
       AgentStatus,
@@ -62,17 +65,24 @@ export default {
     }
     this.installUrl = `${settings.url}/#/stackpacks/kubernetes-v2`;
 
-    this.observationStatus = await loadObservationStatus(
-      this.resource.spec.displayName,
-      settings,
-    );
-    if (this.observationStatus === ObservationStatus.NotDeployed) {
-      this.agentStatus = await loadAgentStatus(this.$store, this.resource.id);
+    this.agentStatus = await loadAgentStatus(this.$store, this.resource.id);
+    if (this.agentStatus.status === AgentStatus.NotInstalled) {
+      this.observationStatus = ObservationStatus.NotDeployed;
+      return;
     }
+    const clusterName =
+      this.agentStatus.clusterName ?? this.resource.spec.displayName;
+
+    const componentIdentifier = `urn:cluster:/kubernetes:${clusterName}`;
+    this.componentUrl = `${settings.url}/#/components/${encodeURIComponent(
+      componentIdentifier,
+    )}`;
+
+    this.observationStatus = await loadObservationStatus(clusterName, settings);
 
     try {
       this.snapshot = await getSnapshot(
-        `not healthstate in ("CLEAR", "UNKNOWN") AND label = "cluster-name:${this.resource.spec.displayName}"`,
+        `not healthstate in ("CLEAR", "UNKNOWN") AND label = "cluster-name:${clusterName}"`,
         settings,
       );
       for (const component of this.snapshot.viewSnapshotResponse.components) {
@@ -121,10 +131,13 @@ export default {
           {{ t("observability.clusterCard.clusterIs") }}
           <HealthState class="state-badge" health="unobserved" color="grey" />
         </p>
-        <div v-if="agentStatus !== AgentStatus.Installed" class="flex-text">
+        <div
+          v-if="agentStatus.status !== AgentStatus.Installed"
+          class="flex-text"
+        >
           <p>
             {{ t("observability.clusterCard.notObservedPrepend") }}
-            <a :href="installUrl">{{
+            <a :href="installUrl" target="_blank">{{
               t("observability.clusterCard.notObservedInstall")
             }}</a>
             {{ t("observability.clusterCard.notObservedPostpend") }}
@@ -133,7 +146,7 @@ export default {
         <div v-else>
           <p>
             {{ t("observability.clusterCard.noDataPrepend") }}
-            <a :href="installUrl">{{
+            <a :href="installUrl" target="_blank">{{
               t("observability.clusterCard.noDataInstall")
             }}</a>
             {{ t("observability.clusterCard.noDataPostpend") }}
@@ -143,7 +156,13 @@ export default {
       <div v-else>
         <p class="mb-20">
           {{ t("observability.clusterCard.clusterHealth") }}
-          <HealthState health="observed" color="green" />
+          <a
+            :href="componentUrl"
+            target="_blank"
+            rel="nofollow noopener noreferrer"
+          >
+            <HealthState health="observed" color="green" />
+          </a>
         </p>
         <div>
           <p>{{ t("observability.clusterCard.componentsHealth") }}</p>
diff --git a/pkg/observability/formatters/ComponentLinkedHealthState.vue b/pkg/observability/formatters/ComponentLinkedHealthState.vue
@@ -1,7 +1,11 @@
 <script>
 import { mapGetters } from "vuex";
 import HealthState from "../components/Health/HealthState";
-import { loadSuseObservabilitySettings } from "../modules/rancher";
+import {
+  loadSuseObservabilitySettings,
+  loadAgentStatus,
+  AgentStatus,
+} from "../modules/rancher";
 import {
   ConnectionStatus,
   FetchError,
@@ -27,12 +31,6 @@ export default {
   computed: {
     ...mapGetters(["currentCluster"]),
 
-    componentIdentifier() {
-      const cluster = this.currentCluster?.spec.displayName;
-
-      return buildUrn(this.row, cluster);
-    },
-
     color() {
       switch (this.value) {
         case "active":
@@ -54,11 +52,23 @@ export default {
   },
 
   async fetch() {
-    const componentIdentifier = this.componentIdentifier;
+    const agentStatus = await loadAgentStatus(
+      this.$store,
+      this.currentCluster?.id,
+    );
+    if (agentStatus.status === AgentStatus.NotInstalled) {
+      this.data = {
+        health: HEALTH_STATE_TYPES.UNOBSERVED,
+      };
+      this.isLoading = false;
+      return;
+    }
 
+    const clusterName =
+      agentStatus.clusterName ?? this.currentCluster.spec.displayName;
+    const componentIdentifier = buildUrn(this.row, clusterName);
     if (!componentIdentifier) {
       this.isLoading = false;
-
       return;
     }
 
diff --git a/pkg/observability/modules/rancher.ts b/pkg/observability/modules/rancher.ts
@@ -125,10 +125,15 @@ export enum AgentStatus {
   ConnectionError,
 }
 
+export interface ObservabilityAgent {
+  status: AgentStatus;
+  clusterName?: string;
+}
+
 export async function loadAgentStatus(
   store: any,
   clusterId: string,
-): Promise<AgentStatus> {
+): Promise<ObservabilityAgent> {
   try {
     const response = await store.dispatch(`cluster/request`, {
       url: `/k8s/clusters/${clusterId}/v1/apps.deployments`,
@@ -143,11 +148,23 @@ export async function loadAgentStatus(
             "stackstate-k8s-agent"),
     );
 
-    return deployments.length > 0
-      ? AgentStatus.Installed
-      : AgentStatus.NotInstalled;
+    if (deployments.length == 0) {
+      return {
+        status: AgentStatus.NotInstalled,
+      };
+    }
+    const env = deployments[0].spec?.template.spec.containers[0].env;
+    const clusterNames = env
+      ?.filter((envVar: any) => envVar.name === "STS_CLUSTER_NAME")
+      .map((envVar: any) => envVar.value);
+    return {
+      status: AgentStatus.Installed,
+      clusterName: clusterNames?.[0],
+    };
   } catch (e) {
-    return AgentStatus.ConnectionError;
+    return {
+      status: AgentStatus.ConnectionError,
+    };
   }
 }
 
diff --git a/pkg/observability/modules/suseObservability.ts b/pkg/observability/modules/suseObservability.ts
@@ -29,14 +29,17 @@ export async function checkConnection(
   const creds = token(credentials.serviceToken);
 
   try {
-    const resp = await fetch(`${credentials.apiURL}/api/server/info`, {
-      credentials: "omit",
-      mode: "cors",
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: creds,
+    const resp = await fetch(
+      `${credentials.apiURL}/api/user/authorization/for?permission=get-topology`,
+      {
+        credentials: "omit",
+        mode: "cors",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: creds,
+        },
       },
-    });
+    );
     if (resp.ok) {
       return ConnectionStatus.Connected;
     } else {
diff --git a/pkg/observability/modules/urn.ts b/pkg/observability/modules/urn.ts
diff --git a/pkg/observability/types/types.ts b/pkg/observability/types/types.ts

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"observability": patch
 +---
++
 +various bugs