generalised ioc icon components and data and moved files to common/status

src/components/IOC/IOCBadge/IOCBadge.js

-import { IconBadge } from "@ess-ics/ce-ui-common";
-import { IOCStatusIcon } from "../IOCIcons";
-
-export function IOCBadge({ ioc, ...rest }) {
-  return (
-    <IconBadge
-      icon={
-        <IOCStatusIcon
-          ioc={ioc}
-          hideAlerts
-        />
-      }
-      title={ioc.namingName ?? ioc.name}
-      subtitle={ioc.activeDeployment?.host?.fqdn || "---"}
-      {...rest}
-    />
-  );
-}

src/components/IOC/IOCBadge/index.js

-import { IOCBadge } from "./IOCBadge";
-
-export { IOCBadge };
-export default IOCBadge;

src/components/IOC/IOCIcons/IOCStatusData.js

-import { SEVERITY, STATUS } from "../../common/Status";
-
-export const getIocStatus = (ioc) => {
-  let { active, activeDeployment } = ioc;
-  const alertSeverity = ioc?.alertSeverity?.toLowerCase();
-
-  if (
-    active &&
-    (alertSeverity === undefined || alertSeverity === SEVERITY.info)
-  ) {
-    // Active status / running
-    return STATUS.active;
-  } else if (
-    active === false &&
-    (alertSeverity === undefined || alertSeverity === SEVERITY.info)
-  ) {
-    // stopped/paused
-    return STATUS.disabled;
-  } else if (
-    active !== undefined &&
-    alertSeverity !== undefined &&
-    alertSeverity === SEVERITY.alert
-  ) {
-    // error
-    return STATUS.alert;
-  } else if (
-    active !== undefined &&
-    alertSeverity !== undefined &&
-    alertSeverity === SEVERITY.warning
-  ) {
-    // warning
-    return STATUS.warning;
-  } else if (
-    (!active || activeDeployment === null) &&
-    (alertSeverity === undefined || alertSeverity === SEVERITY.info)
-  ) {
-    // Inactive status
-    return STATUS.inactive;
-  } else if (
-    (!active || activeDeployment === null) &&
-    alertSeverity !== undefined &&
-    alertSeverity !== SEVERITY.info
-  ) {
-    // inactive with warning/error
-    return STATUS.inactiveAlert;
-  } else {
-    // unknown fallback state
-    return null;
-  }
-};

src/components/IOC/IOCIcons/index.js

-import { IOCStatusIcon, CommandTypeIcon } from "./IOCIcons";
-
-export { IOCStatusIcon, CommandTypeIcon };

src/components/IOC/IOCIcons/IOCIcons.js → src/components/common/Status/Status.js

+import { useState, useEffect } from "react";
 import { LabeledIcon } from "@ess-ics/ce-ui-common";
 import Popover from "../../common/Popover";
-import { object, bool } from "prop-types";
+import { object, bool, array } from "prop-types";
 import { useTheme } from "@mui/material";
 import { PlayCircleFilled, PauseCircleFilled } from "@mui/icons-material";
-import {
-  StatusPopoverContent,
-  StatusBadge,
-  StatusIcon,
-  STATUS,
-  statusConfig
-} from "../../common/Status";
-import { getIocStatus } from "./IOCStatusData";
+import { StatusPopoverContent } from "./StatusPopoverContent";
+import { StatusBadge } from "./StatusBadge";
+import { StatusIcon } from "./StatusIcon";
+import { STATUS, statusConfig, getStatus } from "./StatusData";
+
 const propsTypes = {
-  ioc: object,
+  state: object,
+  alert: array,
   hideAlerts: bool
 };
 
-export function IOCStatusIcon({ ioc, hideAlerts = false }) {
-  const theme = useTheme();
-  let { alerts = [], id } = ioc;
-  const iocStatus = getIocStatus(ioc);
-  const displayBadge =
+const checkDisplayBadge = (status, hideAlerts) => {
+  return (
     !hideAlerts &&
-    (iocStatus === STATUS.alert ||
-      iocStatus === STATUS.warning ||
-      iocStatus === STATUS.inactiveAlert);
+    (status === STATUS.alert ||
+      status === STATUS.warning ||
+      status === STATUS.inactiveAlert ||
+      status === STATUS.inactiveWarning)
+  );
+};
+
+export function Status({ state, alert, hideAlerts = false }) {
+  const [status, setStatus] = useState(null);
+  const theme = useTheme();
+  let { id } = state;
+
+  useEffect(() => {
+    setStatus(getStatus(state, alert));
+  }, [state, alert]);
 
   return (
     <Popover
@@ -42,28 +50,28 @@ export function IOCStatusIcon({ ioc, hideAlerts = false }) {
           onMouseLeave={handlePopoverClose}
           style={{ color: theme.palette.status.icons }}
         >
-          {displayBadge ? (
+          {checkDisplayBadge(status, hideAlerts) ? (
             <StatusBadge
-              status={iocStatus}
+              status={status}
               theme={theme}
             >
               <StatusIcon
-                alerts={alerts}
-                status={iocStatus}
+                alerts={alert?.alerts ? alert.alerts : []}
+                status={status}
               />
             </StatusBadge>
           ) : (
             <StatusIcon
-              alerts={alerts}
-              status={iocStatus}
+              alerts={alert?.alerts ? alert.alerts : []}
+              status={status}
             />
           )}
         </div>
       )}
       popoverContents={
         <StatusPopoverContent
-          title={statusConfig[iocStatus].title}
-          alerts={hideAlerts ? [] : alerts}
+          title={statusConfig[status].title}
+          alerts={hideAlerts ? [] : alert?.alerts ? alert.alerts : []}
         />
       }
       anchorOrigin={{
@@ -74,7 +82,7 @@ export function IOCStatusIcon({ ioc, hideAlerts = false }) {
   );
 }
 
-IOCStatusIcon.propsTypes = propsTypes;
+Status.propsTypes = propsTypes;
 
 export function CommandTypeIcon({
   type,

src/components/common/Status/StatusData.js

@@ -55,3 +55,56 @@ export const statusConfig = {
     icon: HelpOutline
   }
 };
+
+export const getStatus = (state, alert) => {
+  let { isActive } = state;
+  const alertSeverity = alert?.alertSeverity?.toLowerCase();
+
+  if (
+    isActive &&
+    (alertSeverity === undefined || alertSeverity === SEVERITY.info)
+  ) {
+    // Active status / running
+    return STATUS.active;
+  } else if (
+    isActive === false &&
+    (alertSeverity === undefined || alertSeverity === SEVERITY.info)
+  ) {
+    // stopped/paused
+    return STATUS.disabled;
+  } else if (
+    isActive &&
+    alertSeverity !== undefined &&
+    alertSeverity === SEVERITY.alert
+  ) {
+    // error
+    return STATUS.alert;
+  } else if (
+    isActive &&
+    alertSeverity !== undefined &&
+    alertSeverity === SEVERITY.warning
+  ) {
+    // warning
+    return STATUS.warning;
+  } else if (
+    (!isActive || isActive === null) &&
+    (alertSeverity === undefined || alertSeverity === SEVERITY.info)
+  ) {
+    // Inactive status
+    return STATUS.inactive;
+  } else if (
+    (!isActive || isActive === null) &&
+    alertSeverity === SEVERITY.alert
+  ) {
+    // inactive with warning/error
+    return STATUS.inactiveAlert;
+  } else if (
+    (!isActive || isActive === null) &&
+    alertSeverity === SEVERITY.warning
+  ) {
+    return STATUS.inactiveWarning;
+  } else {
+    // unknown fallback state
+    return null;
+  }
+};

src/components/common/Status/index.js

+import { Status, CommandTypeIcon } from "./Status";
 import { StatusBadge } from "./StatusBadge";
 import { StatusIcon } from "./StatusIcon";
 import { StatusPopoverContent } from "./StatusPopoverContent";
-import { statusConfig, STATUS, SEVERITY } from "./StatusData";
+import { statusConfig, STATUS, SEVERITY, getStatus } from "./StatusData";
 
 export {
+  Status,
+  CommandTypeIcon,
   StatusPopoverContent,
   StatusBadge,
   StatusIcon,
   STATUS,
   SEVERITY,
-  statusConfig
+  statusConfig,
+  getStatus
 };