diff --git a/src/components/IOC/IOCTable/IOCStatus.js b/src/components/IOC/IOCTable/IOCStatus.js index 41cb6561e984ef2d3b486ce7007ac05e982a057f..dfaed1246f01b221ae712fcd252277c8c69859e2 100644 --- a/src/components/IOC/IOCTable/IOCStatus.js +++ b/src/components/IOC/IOCTable/IOCStatus.js @@ -1,6 +1,6 @@ -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> );