updated host status listview to use separated status endpoints

src/components/host/HostStatus/HostStatus.js

-import { useContext, useMemo } from "react";
-import { Grid, Skeleton } from "@mui/material";
+import { useContext, useMemo, useEffect } from "react";
 import { apiContext } from "../../../api/DeployApi";
 import { useAPIMethod } from "@ess-ics/ce-ui-common";
-import { HostStatusIcon } from "./HostStatusIcon";
+import { getHostStatus } from "./HostStatusData";
+import { Status } from "../../common/Status";
 
 function createRequest(hostId) {
   return {
@@ -10,36 +10,41 @@ function createRequest(hostId) {
   };
 }
 
-export const HostStatus = ({ hostId }) => {
+export const HostStatus = ({ hostId, hideAlerts }) => {
   const client = useContext(apiContext);
-
   const params = useMemo(() => createRequest(hostId), [hostId]);
 
   const {
-    value: hostStatus,
-    loading,
-    dataReady
+    wrapper: callFetchHostAlerts,
+    value: hostAlert,
+    abort: abortCallFetchHostAlerts
   } = useAPIMethod({
+    fcn: client.apis.Hosts.findHostAlerts,
+    params,
+    call: false
+  });
+
+  const { value: hostStateStatus } = useAPIMethod({
     fcn: client.apis.Hosts.findHostStatus,
     params
   });
 
+  useEffect(() => {
+    if (!hideAlerts) {
+      callFetchHostAlerts();
+    }
+
+    return () => {
+      abortCallFetchHostAlerts();
+    };
+  }, [hostStateStatus, hideAlerts]);
+
   return (
-    <Grid
-      container
-      direction="column"
-      justifyContent="center"
-      alignItems="center"
-    >
-      {loading || !dataReady ? (
-        <Skeleton
-          variant="circular"
-          height={20}
-          width={20}
-        />
-      ) : (
-        <HostStatusIcon hostStatus={hostStatus} />
-      )}
-    </Grid>
+    <Status
+      state={hostStateStatus}
+      alert={hostAlert}
+      hideAlerts={hideAlerts}
+      getStatusFcn={getHostStatus}
+    />
   );
 };

src/components/host/HostStatus/HostStatusIcon.js

@@ -7,13 +7,13 @@ import {
   StatusPopoverContent,
   statusConfig
 } from "../../common/Status";
-import { getHostStatusInfo } from "./HostStatusData";
+import { getHostStatus } from "./HostStatusData";
 
 export function HostStatusIcon({ hostStatus, hideAlerts = false }) {
   const theme = useTheme();
 
   let { alerts } = hostStatus;
-  let hostStatusStatus = getHostStatusInfo(hostStatus);
+  let hostStatusStatus = getHostStatus(hostStatus);
 
   const displayBadge =
     !hideAlerts &&