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/IOCDetails/IOCDetails.js

-import { Grid, Box } from "@mui/material";
-import { KeyValueTable } from "@ess-ics/ce-ui-common";
-import { IOCBadge } from "../IOCBadge";
+import { useMemo, useContext } from "react";
+import { apiContext } from "../../../api/DeployApi";
+import { Grid, Box, Stack, Typography } from "@mui/material";
+import {
+  KeyValueTable,
+  useAPIMethod,
+  AlertBannerList
+} from "@ess-ics/ce-ui-common";
+import { IOCStatus } from "../IOCTable/IOCStatus";
 import AccessControl from "../../auth/AccessControl";
 
 export function diff(o1, o2) {
@@ -26,9 +32,22 @@ const defaultSubset = ({
   version
 }) => ({ name, description, host, active, status, git, version });
 
-export function IOCDetails({ ioc, getSubset = defaultSubset, alert, buttons }) {
+export function IOCDetails({ ioc, getSubset = defaultSubset, buttons }) {
   ioc = { ...ioc };
   const subset = getSubset(ioc);
+  const client = useContext(apiContext);
+
+  const alertParams = useMemo(
+    () => ({
+      ioc_id: ioc.id
+    }),
+    [ioc.id]
+  );
+
+  const { value: alert } = useAPIMethod({
+    fcn: client.apis.IOCs.fetchIocAlerts,
+    params: alertParams
+  });
 
   return (
     <>
@@ -36,14 +55,11 @@ export function IOCDetails({ ioc, getSubset = defaultSubset, alert, buttons }) {
         container
         spacing={1}
       >
-        {alert && (
-          <Grid
-            item
-            xs={12}
-          >
-            {alert}
-          </Grid>
-        )}
+        {alert && alert.alerts.length > 0 ? (
+          <Box sx={{ mt: (theme) => theme.spacing(2), width: "100%" }}>
+            <AlertBannerList alerts={alert.alerts} />
+          </Box>
+        ) : null}
         {buttons && (
           <Grid
             item
@@ -71,10 +87,41 @@ export function IOCDetails({ ioc, getSubset = defaultSubset, alert, buttons }) {
           item
           xs={12}
         >
-          <IOCBadge
-            ioc={ioc}
-            sx={{ mt: 2.5 }}
-          />
+          <Stack
+            flexDirection="row"
+            alignItems="center"
+            justifyContent="flex-start"
+          >
+            <Box
+              sx={{
+                marginRight: (theme) => theme.spacing(4),
+                marginLeft: (theme) => theme.spacing(6)
+              }}
+            >
+              <IOCStatus
+                id={ioc.id}
+                hideAlerts
+              />
+            </Box>
+            <Box sx={{ flex: 1 }}>
+              <Typography
+                noWrap
+                variant="subtitle1"
+                component="p"
+                color="textPrimary"
+              >
+                {ioc.namingName ?? ioc.name}
+              </Typography>
+              <Typography
+                noWrap
+                component="p"
+                variant="subtitle2"
+              >
+                {ioc.activeDeployment?.host?.fqdn || "---"}
+              </Typography>
+            </Box>
+          </Stack>
+
           <KeyValueTable
             obj={subset}
             variant="overline"