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,34 @@
+import { Loader } from '@scality/core-ui';
+import { ReactNode, useEffect, useState } from 'react';
+import { useAuth } from './PrivateRoute';
+import { useTypedSelector } from '../hooks';
+import { setHeaders } from '../services/prometheus/api';
+import { fetchPrometheusOidcEnabled } from '../services/prometheus/fetchOidcEnabled';
+
+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');

ui/src/services/prometheus/fetchOidcEnabled.test.ts

@@ -0,0 +1,112 @@
+import { fetchPrometheusOidcEnabled } from './fetchOidcEnabled';
+
+const mockFetch = jest.fn();
+window.fetch = mockFetch;
+
+const mockConfigMapResponse = (enableOidc: boolean) => ({
+  data: {
+    'config.yaml': `
+apiVersion: addons.metalk8s.scality.com
+kind: PrometheusConfig
+spec:
+  config:
+    enable_oidc_authentication: ${enableOidc}
+`,
+  },
+});
+
+describe('fetchPrometheusOidcEnabled', () => {
+  afterEach(() => {
+    mockFetch.mockReset();
+  });
+
+  it('returns true when OIDC authentication is enabled', async () => {
+    mockFetch.mockResolvedValue({
+      status: 200,
+      json: () => Promise.resolve(mockConfigMapResponse(true)),
+    });
+
+    const result = await fetchPrometheusOidcEnabled(
+      'https://k8s-api.test',
+      'test-token',
+    );
+    expect(result).toBe(true);
+  });
+
+  it('returns false when OIDC authentication is disabled', async () => {
+    mockFetch.mockResolvedValue({
+      status: 200,
+      json: () => Promise.resolve(mockConfigMapResponse(false)),
+    });
+
+    const result = await fetchPrometheusOidcEnabled(
+      'https://k8s-api.test',
+      'test-token',
+    );
+    expect(result).toBe(false);
+  });
+
+  it('returns false when the API returns a non-200 status', async () => {
+    mockFetch.mockResolvedValue({
+      status: 500,
+      json: () => Promise.resolve({}),
+    });
+
+    const result = await fetchPrometheusOidcEnabled(
+      'https://k8s-api.test',
+      'test-token',
+    );
+    expect(result).toBe(false);
+  });
+
+  it('returns false and logs error when fetch throws', async () => {
+    const consoleSpy = jest
+      .spyOn(console, 'error')
+      .mockImplementation(() => {});
+    mockFetch.mockRejectedValue(new Error('Network error'));
+
+    const result = await fetchPrometheusOidcEnabled(
+      'https://k8s-api.test',
+      'test-token',
+    );
+    expect(result).toBe(false);
+    expect(consoleSpy).toHaveBeenCalledWith(
+      'Failed to fetch Prometheus OIDC config:',
+      expect.any(Error),
+    );
+    consoleSpy.mockRestore();
+  });
+
+  it('returns false when config.yaml is missing', async () => {
+    mockFetch.mockResolvedValue({
+      status: 200,
+      json: () => Promise.resolve({ data: {} }),
+    });
+
+    const result = await fetchPrometheusOidcEnabled(
+      'https://k8s-api.test',
+      'test-token',
+    );
+    expect(result).toBe(false);
+  });
+
+  it('calls the correct URL with correct headers', async () => {
+    mockFetch.mockResolvedValue({
+      status: 200,
+      json: () => Promise.resolve(mockConfigMapResponse(false)),
+    });
+
+    await fetchPrometheusOidcEnabled('https://k8s-api.test', 'my-token');
+
+    expect(mockFetch).toHaveBeenCalledWith(
+      'https://k8s-api.test/api/v1/namespaces/metalk8s-monitoring/configmaps/metalk8s-prometheus-config',
+      {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: 'Bearer my-token',
+        },
+      },
+    );
+  });
+});

ui/src/services/prometheus/fetchOidcEnabled.ts

@@ -0,0 +1,41 @@
+import YAML from 'yaml';
+
+type PrometheusConfig = {
+  apiVersion: string;
+  kind: string;
+  spec: {
+    config?: {
+      enable_oidc_authentication?: boolean;
+    };
+  };
+};
+
+export 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;
+  }
+}