MK8S-197 - Pass access token to getAlerts in Shell-UI

Author: ChengYanJin

shell-ui/src/alerts/AlertProvider.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { useQuery } from 'react-query';
 import { Loader } from '@scality/core-ui/dist/components/loader/Loader.component';
+import { useAuth } from '../auth/AuthProvider';
 import { getAlerts } from './services/alertManager';
 import { AlertContext } from './alertContext';
 /**
@@ -18,13 +19,18 @@ export default function AlertProvider({
   alertManagerUrl: string;
   children: React.ReactNode;
 }) {
-  const query = useQuery('activeAlerts', () => getAlerts(alertManagerUrl), {
-    // refetch the alerts every 10 seconds
-    refetchInterval: 30000,
-    // TODO manage this refresh interval globally
-    // avoid stucking at the hard loading state before alertmanager is ready
-    initialData: [],
-  });
+  const { userData } = useAuth();
+  const query = useQuery(
+    'activeAlerts',
+    () => getAlerts(alertManagerUrl, userData?.token),
+    {
+      // 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
+      initialData: [],
+    },
+  );
   return (
     <AlertContext.Provider value={{ ...query }}>
       {query.status === 'loading' && (

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

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