MK8S-197 - Always pass token to alertmanager

Author: ChengYanJin

shell-ui/src/alerts/AlertProvider.tsx

@@ -19,12 +19,11 @@ export default function AlertProvider({
   alertManagerUrl: string;
   children: React.ReactNode;
 }) {
-  const { userData } = useAuth();
+  const { getToken } = useAuth();
   const query = useQuery(
-    ['activeAlerts', userData?.token],
-    () => getAlerts(alertManagerUrl, userData?.token),
+    ['activeAlerts'],
+    async () => getAlerts(alertManagerUrl, await getToken()),
     {
-      // refetch the alerts every 30 seconds
       refetchInterval: 30000,
       // TODO manage this refresh interval globally
       // avoid stucking at the hard loading state before alertmanager is ready

shell-ui/src/alerts/alertHooks.test.tsx

@@ -7,6 +7,16 @@ import AlertProvider from './AlertProvider';
 import { useHighestSeverityAlerts } from './alertHooks';
 import { afterAll, beforeAll, jest } from '@jest/globals';
 import { QueryClientProvider } from '../QueryClientProvider';
+
+jest.mock('../auth/AuthProvider', () => ({
+  useAuth: () => ({
+    userData: {
+      token: 'test-token',
+    },
+    getToken: () => Promise.resolve('test-token'),
+  }),
+}));
+
 const testService = 'http://10.0.0.1/api/alertmanager';
 
 const VOLUME_DEGRADED_ALERT = {

shell-ui/src/alerts/services/alertManager.ts

@@ -29,9 +29,9 @@ export type AlertLabels = {
   selectors?: string[];
   [labelName: string]: string;
 };
-export function getAlerts(alertManagerUrl: string, token?: string) {
+export function getAlerts(alertManagerUrl: string, token: string) {
   return fetch(alertManagerUrl + '/api/v2/alerts', {
-    headers: token ? { Authorization: `Bearer ${token}` } : {},
+    headers: { Authorization: `Bearer ${token}` },
   })
     .then((r) => {
       if (r.ok) {

ui/src/components/DashboardAlerts.tsx

@@ -61,7 +61,7 @@ const DashboardAlerts = () => {
   const totalAlerts = criticalAlerts.length + warningAlerts.length;
   return (
     <AlertsContainer>
-      <div style={{ display: 'flex', alignItems: 'center', gap: spacing.r8 }}>
+      <Box display="flex" alignItems="center" gap={spacing.r8}>
         <div>
           <Text isEmphazed>
             {intl.formatMessage({
@@ -98,7 +98,7 @@ const DashboardAlerts = () => {
             </Banner>
           </div>
         )}
-      </div>
+      </Box>
       {totalAlerts === 0 ? null : (
         <Box pr={24}>
           <BadgesContainer>

ui/src/containers/PrometheusAuthProvider.tsx

@@ -1,23 +1,23 @@
-import { ReactNode, useEffect, useState } from 'react';
+import { ReactNode } from 'react';
 import { useAuth } from './PrivateRoute';
 import { setHeaders } from '../services/prometheus/api';
 
+// Temporary solution: The Prometheus API client is initialized with the URL in the saga
+// (setApiConfig), but the auth token is not available at that point. Rather than modifying
+// the saga (which will be removed soon), this provider sets the auth header on the shared
+// Prometheus client once the token is available, and blocks rendering until it's ready.
+// TODO: Remove this provider once the saga is removed.
+
 export default function PrometheusAuthProvider({
   children,
 }: {
   children: ReactNode;
 }) {
   const { userData } = useAuth();
-  const [ready, setReady] = useState(false);
 
-  useEffect(() => {
-    if (userData?.token) {
-      setHeaders({ Authorization: `Bearer ${userData.token}` });
-      setReady(true);
-    }
-  }, [userData?.token]);
+  if (!userData?.token) return null;
 
-  if (!ready) return null;
+  setHeaders({ Authorization: `Bearer ${userData.token}` });
 
   return <>{children}</>;
 }