DRAFT: STAC-23444: use oidcclients to set observability url

pkg/observability/components/Dashboard/ConfigurationView.vue

@@ -2,13 +2,16 @@
 import { LabeledInput } from "@components/Form/LabeledInput";
 import AsyncButton from "@shell/components/AsyncButton";
 import { Banner } from "@components/Banner";
+import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
 import {
   checkConnection,
   ConnectionStatus,
 } from "../../modules/suseObservability";
 import {
   findNodeDrivers,
+  findOIDCClients,
   loadSuseObservabilitySettings,
+  OIDC_POSTFIX,
   saveSuseObservabilitySettings,
 } from "../../modules/rancher";
 import { SUSEOBSERVABILITYMACHINES_CRD } from "../../types/types";
@@ -18,6 +21,7 @@
 export default {
   components: {
     LabeledInput,
+    LabeledSelect,
     AsyncButton,
     Banner,
   },
@@ -31,6 +35,13 @@
         `ERROR: Unable to determine presence of SUSE Observability NodeDrivers ${e}`,
       );
     }
+    try {
+      this.oidcClients = await findOIDCClients(this.$store);
+    } catch (e) {
+      logger.log(
+        `ERROR: Unable to determine presence of SUSE Observability OIDC Client ${e}`,
+      );
+    }
   },
   data: () => ({
     suseObservabilityURL: "",
@@ -40,6 +51,8 @@
     urlError: false,
     nodeDrivers: [],
     migratedSettings: false,
+    oidcClients: undefined,
+    validOidcClient: true,
   }),
   watch: {
     suseObservabilityURL(neu) {
@@ -52,7 +65,19 @@
       } else {
         this.urlError = false;
       }
+      if (this.oidcClients === undefined || this.oidcClients.indexOf(neu) >= 0) {
+        this.validOidcClient = true;
+      } else {
+        this.validOidcClient = false;
+      }
     },
+    oidcClients(clients) {
+      if (clients.indexOf(this.suseObservabilityURL) >= 0) {
+        this.validOidcClient = true;
+      } else {
+        this.validOidcClient = false;
+      }
+    }
   },
   computed: {
     isCreateMode() {
@@ -221,6 +246,16 @@
             class="url-input"
             :class="{ error: urlError }"
             required
+            v-if="!oidcClients"
+          />
+          <LabeledSelect
+            v-model:value="suseObservabilityURL"
+            :label="t('observability.configuration.url')"
+            class="url-input"
+            :class="{ error: urlError }"
+            required
+            :options="oidcClients"
+            v-if="oidcClients"
           />
           <div class="pt-10 pb-10">
             <p v-show="urlError" class="url-error mb-10">
@@ -273,6 +308,21 @@
             </div>
           </div>
         </Banner>
+
+        <Banner
+          v-if="suseObservabilityURL && !validOidcClient"
+          class="connected-banner mt-50"
+          color="warning"
+        >
+          <div class="banner-info row">
+            <div class="col span-9 mr-10">
+              <p>{{ t("observability.dashboard.invalidoidc") }}</p>
+              <a :href="`${suseObservabilityURL}${OIDC_POSTFIX}`">{{
+                 `${suseObservabilityURL}${OIDC_POSTFIX}`
+              }}</a>
+            </div>
+         </div>
+        </Banner>
       </div>
     </div>
   </div>

pkg/observability/formatters/ComponentLinkedHealthState.vue

@@ -51,14 +51,13 @@ export default {
 
   async fetch() {
     if (!isCrdLoaded(this.$store)) {
+      this.isLoading = false;
       return;
     }
 
     const componentIdentifier = this.componentIdentifier;
-
     if (!componentIdentifier) {
       this.isLoading = false;
-
       return;
     }
 

pkg/observability/l10n/en-us.yaml

@@ -52,6 +52,7 @@ observability:
     install: Install
     saveSuccess: Configuration saved successfully!
     upgrade: Remnants of an older installation were found.
+    invalidoidc: "To use Rancher OIDC, create an OIDCClient with redirect URI:"
   clusterCard:
     clusterIs: Cluster is
     notObservedPrepend: "Cluster is not observed by SUSE Observability. Please "

pkg/observability/modules/rancher.ts

@@ -14,6 +14,8 @@
   return isSuseObservabilityName(settings.metadata.name);
 }
 
+export const OIDC_POSTFIX = "/loginCallback?client_name=StsOidcClient";
+
 export async function loadSuseObservabilitySettings(
   store: any,
 ): Promise<undefined | ObservabilitySettings> {
@@ -167,3 +169,17 @@
     (driver: any) => driver.name === "suse-observability",
   );
 }
+
+export async function findOIDCClients(
+  store: any,
+): Promise<boolean> {
+  const clients = await store.dispatch("management/request", {
+    url: "/v1/management.cattle.io.oidcclients",
+  });
+
+  return clients?.data?.flatMap((client: any) => {
+    return client.spec?.redirectURIs?.
+      filter((uri: string) => uri.endsWith(OIDC_POSTFIX)).
+      map((uri: string) => uri.substring(0, uri.length - OIDC_POSTFIX.length));
+  }) ?? [];
+}