From 85b8cf5a1d45266da148f0c183154a282f66072e Mon Sep 17 00:00:00 2001
From: Johanna Szepanski <johanna.szepanski@softhouse.se>
Date: Wed, 14 Aug 2024 09:37:51 +0200
Subject: [PATCH] generalised ioc icon components and data and moved files to
common/status
---
src/components/IOC/IOCBadge/IOCBadge.js | 18 ------
src/components/IOC/IOCBadge/index.js | 4 --
src/components/IOC/IOCIcons/IOCStatusData.js | 50 ---------------
src/components/IOC/IOCIcons/index.js | 3 -
.../IOCIcons.js => common/Status/Status.js} | 62 +++++++++++--------
src/components/common/Status/StatusData.js | 53 ++++++++++++++++
src/components/common/Status/index.js | 8 ++-
7 files changed, 94 insertions(+), 104 deletions(-)
delete mode 100644 src/components/IOC/IOCBadge/IOCBadge.js
delete mode 100644 src/components/IOC/IOCBadge/index.js
delete mode 100644 src/components/IOC/IOCIcons/IOCStatusData.js
delete mode 100644 src/components/IOC/IOCIcons/index.js
rename src/components/{IOC/IOCIcons/IOCIcons.js => common/Status/Status.js} (64%)
diff --git a/src/components/IOC/IOCBadge/IOCBadge.js b/src/components/IOC/IOCBadge/IOCBadge.js
deleted file mode 100644
index f62f95ac..00000000
--- a/src/components/IOC/IOCBadge/IOCBadge.js
+++ /dev/null
@@ -1,18 +0,0 @@
-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}
- />
- );
-}
diff --git a/src/components/IOC/IOCBadge/index.js b/src/components/IOC/IOCBadge/index.js
deleted file mode 100644
index 712570a3..00000000
--- a/src/components/IOC/IOCBadge/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import { IOCBadge } from "./IOCBadge";
-
-export { IOCBadge };
-export default IOCBadge;
diff --git a/src/components/IOC/IOCIcons/IOCStatusData.js b/src/components/IOC/IOCIcons/IOCStatusData.js
deleted file mode 100644
index d11d4d5b..00000000
--- a/src/components/IOC/IOCIcons/IOCStatusData.js
+++ /dev/null
@@ -1,50 +0,0 @@
-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;
- }
-};
diff --git a/src/components/IOC/IOCIcons/index.js b/src/components/IOC/IOCIcons/index.js
deleted file mode 100644
index 913ed4cc..00000000
--- a/src/components/IOC/IOCIcons/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { IOCStatusIcon, CommandTypeIcon } from "./IOCIcons";
-
-export { IOCStatusIcon, CommandTypeIcon };
diff --git a/src/components/IOC/IOCIcons/IOCIcons.js b/src/components/common/Status/Status.js
similarity index 64%
rename from src/components/IOC/IOCIcons/IOCIcons.js
rename to src/components/common/Status/Status.js
index 8dfb935e..da7bc53b 100644
--- a/src/components/IOC/IOCIcons/IOCIcons.js
+++ b/src/components/common/Status/Status.js
@@ -1,30 +1,38 @@
+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,
diff --git a/src/components/common/Status/StatusData.js b/src/components/common/Status/StatusData.js
index 4c3fce63..0219be02 100644
--- a/src/components/common/Status/StatusData.js
+++ b/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;
+ }
+};
diff --git a/src/components/common/Status/index.js b/src/components/common/Status/index.js
index d5ab35f0..7d5d12af 100644
--- a/src/components/common/Status/index.js
+++ b/src/components/common/Status/index.js
@@ -1,13 +1,17 @@
+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
};
--
GitLab