MK8S-197 - Add banner in case of failed to retrieve alerts

Author: ChengYanJin

ui/src/components/DashboardAlerts.test.tsx

@@ -99,6 +99,24 @@ describe('the dashboard alerts sub-panel', () => {
     expect(queryByTestId('critical-alert-badge')).not.toBeInTheDocument();
     expect(queryByTestId('view-all-link')).not.toBeInTheDocument();
   });
+  test('should display a warning banner when alerts fail to fetch', () => {
+    (useAlertLibrary as any).mockImplementation(() => ({
+      getPlatformAlertSelectors: () => ({
+        alertname: ['ClusterAtRisk', 'ClusterDegraded'],
+      }),
+    }));
+    (useAlerts as any).mockImplementation(() => ({
+      alerts: [],
+      error: new Error('Alert manager responded with 401'),
+    }));
+    const { getByText } = render(<DashboardAlerts />);
+    expect(
+      getByText('Monitoring information unavailable'),
+    ).toBeInTheDocument();
+    expect(
+      getByText('Some data can not be well retrieved'),
+    ).toBeInTheDocument();
+  });
   test('should redirect to alert page with View All link', () => {
     (useAlerts as any).mockImplementation(() => ({
       alerts: alerts,

ui/src/components/DashboardAlerts.tsx

@@ -1,4 +1,4 @@
-import { spacing, Text, TextBadge } from '@scality/core-ui';
+import { Banner, Icon, spacing, Text, TextBadge } from '@scality/core-ui';
 import { Box } from '@scality/core-ui/dist/next';
 import { useMemo } from 'react';
 import { useIntl } from 'react-intl';
@@ -61,25 +61,45 @@ const DashboardAlerts = () => {
   const totalAlerts = criticalAlerts.length + warningAlerts.length;
   return (
     <AlertsContainer>
-      <div>
-        <Text isEmphazed>
-          {intl.formatMessage({
-            id: 'platform_active_alerts',
-          })}
-        </Text>
-        <TextBadge
-          variant="infoPrimary"
-          data-testid="all-alert-badge"
-          text={totalAlerts}
-        />
+      <div style={{ display: 'flex', alignItems: 'center', gap: spacing.r8 }}>
+        <div>
+          <Text isEmphazed>
+            {intl.formatMessage({
+              id: 'platform_active_alerts',
+            })}
+          </Text>
+          <TextBadge
+            variant="infoPrimary"
+            data-testid="all-alert-badge"
+            text={totalAlerts}
+          />
+          {totalAlerts === 0 && (
+            <div>
+              <Text variant="Smaller" color="textSecondary">
+                {intl.formatMessage({
+                  id: 'no_active_alerts',
+                })}
+              </Text>
+            </div>
+          )}
+        </div>
+        {alerts.error && (
+          <div style={{ flex: 1 }}>
+            <Banner
+              variant="warning"
+              icon={<Icon name="Exclamation-circle" />}
+              title={intl.formatMessage({
+                id: 'monitoring_information_unavailable',
+              })}
+            >
+              {intl.formatMessage({
+                id: 'some_data_not_retrieved',
+              })}
+            </Banner>
+          </div>
+        )}
       </div>
-      {totalAlerts === 0 ? (
-        <Text variant="Smaller" color="textSecondary">
-          {intl.formatMessage({
-            id: 'no_active_alerts',
-          })}
-        </Text>
-      ) : (
+      {totalAlerts === 0 ? null : (
         <Box pr={24}>
           <BadgesContainer>
             <div>