From 492c77b6a073e45e27f44687a52e8feb26c8ba6a Mon Sep 17 00:00:00 2001
From: Johanna Szepanski <johanna.szepanski@softhouse.se>
Date: Thu, 15 Aug 2024 08:13:40 +0200
Subject: [PATCH] updated host status listview to use separated status
endpoints
---
src/components/host/HostStatus/HostStatus.js | 53 ++++++++++---------
.../host/HostStatus/HostStatusIcon.js | 4 +-
2 files changed, 31 insertions(+), 26 deletions(-)
diff --git a/src/components/host/HostStatus/HostStatus.js b/src/components/host/HostStatus/HostStatus.js
index 7948cadd..f4f88185 100644
--- a/src/components/host/HostStatus/HostStatus.js
+++ b/src/components/host/HostStatus/HostStatus.js
@@ -1,8 +1,8 @@
-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}
+ />
);
};
diff --git a/src/components/host/HostStatus/HostStatusIcon.js b/src/components/host/HostStatus/HostStatusIcon.js
index 6cd41fd9..9fdee3d9 100644
--- a/src/components/host/HostStatus/HostStatusIcon.js
+++ b/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 &&
--
GitLab