MK8S-197 - Display the alert status in Alert page

Author: ChengYanJin

ui/src/containers/AlertPage.tsx

@@ -94,8 +94,8 @@ const getAlertStatus = (numbersOfCritical, numbersOfWarning) =>
   numbersOfCritical > 0
     ? STATUS_CRITICAL
     : numbersOfWarning > 0
-    ? STATUS_WARNING
-    : STATUS_HEALTH;
+      ? STATUS_WARNING
+      : STATUS_HEALTH;
 
 function AlertPageHeader({
   activeAlerts,
@@ -118,7 +118,7 @@ function AlertPageHeader({
         <Title>
           <AlertStatusIcon>
             <StatusWrapper status={alertStatus}>
-              <StatusIcon status={alertStatus} name="Alert" entity='Alerts' />
+              <StatusIcon status={alertStatus} name="Alert" entity="Alerts" />
             </StatusWrapper>
           </AlertStatusIcon>
           <>
@@ -165,7 +165,7 @@ function AlertPageHeader({
 
 const ActiveAlertTab = React.memo(
   // @ts-expect-error - FIXME when you are working on it
-  ({ columns, data }) => {
+  ({ columns, data, status }) => {
     const sortTypes = React.useMemo(() => {
       return {
         severity: (row1, row2) => {
@@ -197,6 +197,7 @@ const ActiveAlertTab = React.memo(
         data={data}
         defaultSortingKey={DEFAULT_SORTING_KEY}
         sortTypes={sortTypes}
+        status={status}
         entityName={{
           en: {
             singular: 'active alert',
@@ -222,7 +223,7 @@ const ActiveAlertTab = React.memo(
   (a, b) => {
     // compare the alert only on id and severity
     // @ts-expect-error - FIXME when you are working on it
-    return isEqual(a.columns, b.columns) && isEqualAlert(a.data, b.data);
+    return isEqual(a.columns, b.columns) && isEqualAlert(a.data, b.data) && a.status === b.status;
   },
 );
 export default function AlertPage() {
@@ -295,8 +296,12 @@ export default function AlertPage() {
         />
       </AppContainer.OverallSummary>
       <AppContainer.MainContent>
-        {/* @ts-expect-error - FIXME when you are working on it */}
-        <ActiveAlertTab data={leafAlerts} columns={columns} />
+        <ActiveAlertTab
+          /* @ts-expect-error - FIXME when you are working on it */
+          data={leafAlerts}
+          columns={columns}
+          status={alerts.status}
+        />
       </AppContainer.MainContent>
     </AppContainer>
   );