Refactor Status out of IOC

src/components/IOC/IOCIcons/IOCIcons.js

 import { LabeledIcon } from "@ess-ics/ce-ui-common";
 import Popover from "../../common/Popover";
-import { STATUS, statusConfig, getIocStatus } from "./iocStatusData";
 import { object, bool } from "prop-types";
 import { useTheme } from "@mui/material";
 import { PlayCircleFilled, PauseCircleFilled } from "@mui/icons-material";
-import { StatusIcon } from "./StatusIcon";
-import { IOCStatusPopoverContent } from "./IOCStatusPopoverContent";
-import { IOCStatusBadge } from "./IOCStatusBadge";
-
+import {
+  StatusPopoverContent,
+  StatusBadge,
+  StatusIcon,
+  STATUS,
+  statusConfig
+} from "../../common/Status";
+import { getIocStatus } from "./IOCStatusData";
 const propsTypes = {
   ioc: object,
   hideAlerts: bool
@@ -40,25 +43,25 @@ export function IOCStatusIcon({ ioc, hideAlerts = false }) {
           style={{ color: theme.palette.status.icons }}
         >
           {displayBadge ? (
-            <IOCStatusBadge
+            <StatusBadge
               status={iocStatus}
               theme={theme}
             >
               <StatusIcon
-                ioc={ioc}
+                alerts={alerts}
                 status={iocStatus}
               />
-            </IOCStatusBadge>
+            </StatusBadge>
           ) : (
             <StatusIcon
-              ioc={ioc}
+              alerts={alerts}
               status={iocStatus}
             />
           )}
         </div>
       )}
       popoverContents={
-        <IOCStatusPopoverContent
+        <StatusPopoverContent
           title={statusConfig[iocStatus].title}
           alerts={hideAlerts ? [] : alerts}
         />
@@ -108,14 +111,14 @@ export function CommandTypeIcon({
 
   const iconStyle = { fill: colorConfig[colorStyle][type.toLowerCase()] };
   const iconTitle = commandTypeIcons[type.toLowerCase()].title;
-  const StatusIcon = commandTypeIcons[type.toLowerCase()].icon;
+  const statusIcon = commandTypeIcons[type.toLowerCase()].icon;
 
   return (
     <LabeledIcon
       label={iconTitle}
       LabelProps={{ noWrap: true }}
       labelPosition={labelPosition}
-      Icon={StatusIcon}
+      Icon={statusIcon}
       IconProps={{ style: { iconStyle } }}
     />
   );

src/components/IOC/IOCIcons/iocStatusData.js → src/components/IOC/IOCIcons/IOCStatusData.js

-import {
-  Brightness1,
-  StopCircle,
-  RadioButtonUnchecked,
-  HelpOutline
-} from "@mui/icons-material";
-
-export const STATUS = {
-  active: "active",
-  disabled: "disabled",
-  alert: "alert",
-  warning: "warning",
-  inactive: "inactive",
-  inactiveAlert: "inactive alert"
-};
-
-export const SEVERITY = {
-  info: "info",
-  alert: "error",
-  warning: "warning"
-};
-
-export const statusConfig = {
-  [STATUS.active]: {
-    title: "Active",
-    icon: Brightness1
-  },
-  [STATUS.disabled]: {
-    title: "Disabled",
-    icon: StopCircle
-  },
-  [STATUS.alert]: {
-    title: "Alert",
-    icon: Brightness1
-  },
-  [STATUS.warning]: {
-    title: "Warning",
-    icon: Brightness1
-  },
-  [STATUS.inactive]: {
-    title: "Inactive",
-    icon: RadioButtonUnchecked
-  },
-  [STATUS.inactiveAlert]: {
-    title: "Alert",
-    icon: RadioButtonUnchecked
-  },
-  null: {
-    title: "Unknown",
-    icon: HelpOutline
-  }
-};
+import { SEVERITY, STATUS } from "../../common/Status";
 
 export const getIocStatus = (ioc) => {
   let { active, activeDeployment } = ioc;

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

 import { string, object, arrayOf, oneOfType, node } from "prop-types";
-import { STATUS } from "./iocStatusData";
+import { STATUS } from "./StatusData";
 import { Stack } from "@mui/material";
 import WarningAmberIcon from "@mui/icons-material/WarningAmber";
 import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
@@ -17,7 +17,7 @@ const commonStyles = {
   fontSize: "20px"
 };
 
-export const IOCStatusBadge = ({ status, theme, children }) => (
+export const StatusBadge = ({ status, theme, children }) => (
   <Stack sx={{ position: "relative" }}>
     {children}
     {status === STATUS.warning ? (
@@ -36,4 +36,4 @@ export const IOCStatusBadge = ({ status, theme, children }) => (
   </Stack>
 );
 
-IOCStatusBadge.propTypes = propTypes;
+StatusBadge.propTypes = propTypes;

src/components/common/Status/StatusData.js

+import {
+  Brightness1,
+  StopCircle,
+  RadioButtonUnchecked,
+  HelpOutline
+} from "@mui/icons-material";
+
+export const STATUS = {
+  active: "active",
+  disabled: "disabled",
+  alert: "alert",
+  warning: "warning",
+  inactive: "inactive",
+  inactiveAlert: "inactive alert"
+};
+
+export const SEVERITY = {
+  info: "info",
+  alert: "error",
+  warning: "warning"
+};
+
+export const statusConfig = {
+  [STATUS.active]: {
+    title: "Active",
+    icon: Brightness1
+  },
+  [STATUS.disabled]: {
+    title: "Disabled",
+    icon: StopCircle
+  },
+  [STATUS.alert]: {
+    title: "Alert",
+    icon: Brightness1
+  },
+  [STATUS.warning]: {
+    title: "Warning",
+    icon: Brightness1
+  },
+  [STATUS.inactive]: {
+    title: "Inactive",
+    icon: RadioButtonUnchecked
+  },
+  [STATUS.inactiveAlert]: {
+    title: "Alert",
+    icon: RadioButtonUnchecked
+  },
+  null: {
+    title: "Unknown",
+    icon: HelpOutline
+  }
+};

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

 import { object, string } from "prop-types";
-import { STATUS, statusConfig } from "./iocStatusData";
+import { STATUS, statusConfig } from "./StatusData";
 import { LabeledIcon } from "@ess-ics/ce-ui-common";
 
 const propTypes = {
-  ioc: object,
+  alerts: object,
   status: string
 };
 
@@ -24,9 +24,7 @@ const getLabel = (alerts, status) => {
   return statusConfig[status].title;
 };
 
-export const StatusIcon = ({ ioc, status }) => {
-  const { alerts = [] } = ioc;
-
+export const StatusIcon = ({ alerts, status }) => {
   return (
     <LabeledIcon
       label={getLabel(alerts, status)}

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

 import { string, arrayOf, object } from "prop-types";
-import { SEVERITY } from "./iocStatusData";
+import { SEVERITY } from "./StatusData";
 import { Typography, Stack } from "@mui/material";
 import { AlertBanner } from "@ess-ics/ce-ui-common";
 
@@ -8,7 +8,7 @@ const propsTypes = {
   alerts: arrayOf(object),
   object
 };
-export const IOCStatusPopoverContent = ({ title, alerts }) => {
+export const StatusPopoverContent = ({ title, alerts }) => {
   // Filter out INFO level alerts
   // And for now filter out links on alerts due to issues with
   // focus behavior of popovers
@@ -45,4 +45,4 @@ export const IOCStatusPopoverContent = ({ title, alerts }) => {
   );
 };
 
-IOCStatusPopoverContent.propsTypes = propsTypes;
+StatusPopoverContent.propsTypes = propsTypes;

src/components/common/Status/index.js

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