MK8S-197 - Add PrometheusAuthProvider

Author: ChengYanJin

ui/src/FederableApp.tsx

@@ -6,6 +6,7 @@ import { applyMiddleware, compose, createStore, Store } from 'redux';
 import createSagaMiddleware from 'redux-saga';
 import 'regenerator-runtime/runtime';
 import App from './containers/App';
+import PrometheusAuthProvider from './containers/PrometheusAuthProvider';
 import { authErrorAction } from './ducks/app/authError';
 import { setApiConfigAction } from './ducks/config';
 import { setHistory as setReduxHistory } from './ducks/history';
@@ -125,11 +126,13 @@ export default function FederableApp(props: FederatedAppProps) {
     >
       <Provider store={store}>
         <AppConfigProvider>
-          <ToastProvider>
-            <RouterWithBaseName>
-              <App />
-            </RouterWithBaseName>
-          </ToastProvider>
+          <PrometheusAuthProvider>
+            <ToastProvider>
+              <RouterWithBaseName>
+                <App />
+              </RouterWithBaseName>
+            </ToastProvider>
+          </PrometheusAuthProvider>
         </AppConfigProvider>
       </Provider>
     </ShellHooksProvider>

ui/src/containers/PrometheusAuthProvider.tsx

@@ -0,0 +1,74 @@
+import { Loader } from '@scality/core-ui';
+import { ReactNode, useEffect, useState } from 'react';
+import YAML from 'yaml';
+import { useAuth } from './PrivateRoute';
+import { useTypedSelector } from '../hooks';
+import { setHeaders } from '../services/prometheus/api';
+
+type PrometheusConfig = {
+  apiVersion: string;
+  kind: string;
+  spec: {
+    config?: {
+      enable_oidc_authentication?: boolean;
+    };
+  };
+};
+
+async function fetchPrometheusOidcEnabled(
+  k8sApiUrl: string,
+  token: string,
+): Promise<boolean> {
+  try {
+    const response = await fetch(
+      `${k8sApiUrl}/api/v1/namespaces/metalk8s-monitoring/configmaps/metalk8s-prometheus-config`,
+      {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${token}`,
+        },
+      },
+    );
+
+    if (response.status !== 200) {
+      return false;
+    }
+
+    const configMap = await response.json();
+    const rawConfig = configMap.data?.['config.yaml'] || '';
+    const config: PrometheusConfig = YAML.parse(rawConfig);
+    return config.spec?.config?.enable_oidc_authentication === true;
+  } catch (error) {
+    console.error('Failed to fetch Prometheus OIDC config:', error);
+    return false;
+  }
+}
+
+export default function PrometheusAuthProvider({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  const { userData } = useAuth();
+  const api = useTypedSelector((state) => state.config.api);
+  const [oidcEnabled, setOidcEnabled] = useState<boolean | null>(null);
+
+  // Fetch the OIDC config and set headers before rendering children
+  useEffect(() => {
+    if (api?.url && userData?.token) {
+      fetchPrometheusOidcEnabled(api.url, userData.token).then((enabled) => {
+        if (enabled) {
+          setHeaders({ Authorization: `Bearer ${userData.token}` });
+        }
+        setOidcEnabled(enabled);
+      });
+    }
+  }, [api?.url, userData?.token]);
+
+  if (oidcEnabled === null) {
+    return <Loader size="massive" centered={true} aria-label="loading" />;
+  }
+
+  return <>{children}</>;
+}

ui/src/services/ApiClient.ts

@@ -12,7 +12,7 @@ class ApiClient {
 
   setHeaders = (headers) => {
     // @ts-expect-error - FIXME when you are working on it
-    this.headers = headers;
+    this.headers = { ...this.headers, ...headers };
   };
 
   async get(endpoint, params = {}, opts = {}) {

ui/src/services/prometheus/api.ts

@@ -51,6 +51,12 @@ export function initialize(apiUrl: string) {
   prometheusApiClient = new ApiClient({ apiUrl });
 }
 
+export function setHeaders(headers: Record<string, string>) {
+  if (prometheusApiClient) {
+    prometheusApiClient.setHeaders(headers);
+  }
+}
+
 export function getAlerts() {
   if (prometheusApiClient) {
     return prometheusApiClient.get('/api/v1/alerts');