CE-3061: Update ioc alerts and status separately

Deployed to both DEMO and TEST. You can also check all scenarios running storybook for IOC List view and IOC Details view if running it locally

This is where the changes occur:

IOC List view, status column, where status (active/inactive) and alerts (badge with error or warning symbol) is fetched in separate calls.

IOC details view, alerts are displayed as banners and status is displayed only as active/inactive/disabled without alert badge

Possible UI states:

active

inactive

disabled

active with severity error

active with severity warning

inactive with severity error

inactive with severity warning

disabled with severity error

disabled with severity warning

Status response:

deployed:
{
  "iocId": 21,
  "alertSeverity": null,
  "alerts": [],
  "active": true
}started:
{
  "iocId": 21,
  "alertSeverity": null,
  "alerts": [],
  "active": true
}stopped:
{
  "iocId": 21,
  "alertSeverity": null,
  "alerts": [],
  "active": null
}undeployed:
{
  "iocId": 21,
  "alertSeverity": "INFO",
  "alerts": [
    {
      "type": "INFO",
      "message": "IOC is not deployed",
      "link": null
    }
  ],
  "active": false
}

src/components/IOC/IOCTable/IOCStatus.js

-import { useContext, useMemo } from "react";
+import { useContext, useMemo, useEffect } from "react";
 import { Grid, Skeleton } from "@mui/material";
-import { IOCStatusIcon } from "../IOCIcons";
+import { Status } from "../../common/Status";
 import { apiContext } from "../../../api/DeployApi";
 import { useAPIMethod } from "@ess-ics/ce-ui-common";
 
@@ -16,14 +16,32 @@ export const IOCStatus = ({ id }) => {
   const params = useMemo(() => createRequest(id), [id]);
 
   const {
-    value: ioc,
-    loading,
-    dataReady
+    wrapper: callFetchIocAlerts,
+    value: iocAlert,
+    abort: abortCallFetchIocAlerts
+  } = useAPIMethod({
+    fcn: client.apis.IOCs.fetchIocAlerts,
+    params,
+    call: false
+  });
+
+  const {
+    value: iocStateStatus,
+    loading: fetchIocStatusLoading,
+    dataReady: iocStatusReady
   } = useAPIMethod({
     fcn: client.apis.IOCs.fetchIocStatus,
     params
   });
 
+  useEffect(() => {
+    callFetchIocAlerts();
+
+    return () => {
+      abortCallFetchIocAlerts();
+    };
+  }, [iocStateStatus]);
+
   return (
     <Grid
       container
@@ -31,14 +49,17 @@ export const IOCStatus = ({ id }) => {
       justifyContent="center"
       alignItems="center"
     >
-      {loading || !dataReady ? (
+      {fetchIocStatusLoading || !iocStatusReady ? (
         <Skeleton
           variant="circular"
           height={20}
           width={20}
         />
       ) : (
-        <IOCStatusIcon ioc={ioc} />
+        <Status
+          state={iocStateStatus}
+          alert={iocAlert}
+        />
       )}
     </Grid>
   );