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,19 @@
+import { ReactNode, useEffect } from 'react';
+import { useAuth } from './PrivateRoute';
+import { setHeaders } from '../services/prometheus/api';
+
+export default function PrometheusAuthProvider({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  const { userData } = useAuth();
+
+  useEffect(() => {
+    if (userData?.token) {
+      setHeaders({ Authorization: `Bearer ${userData.token}` });
+    }
+  }, [userData?.token]);
+
+  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');