From 9500c1f177c56e445824216f6d6cf6c51160e2e4 Mon Sep 17 00:00:00 2001
From: skybrewer <sky.brewer@ess.eu>
Date: Thu, 25 Jul 2024 15:37:52 +0200
Subject: [PATCH] Refactor Status out of IOC
---
src/components/IOC/IOCIcons/IOCIcons.js | 27 +++++-----
.../{iocStatusData.js => IOCStatusData.js} | 53 +------------------
.../Status/StatusBadge.js} | 6 +--
src/components/common/Status/StatusData.js | 52 ++++++++++++++++++
.../IOCIcons => common/Status}/StatusIcon.js | 8 ++-
.../Status/StatusPopoverContent.js} | 6 +--
src/components/common/Status/index.js | 13 +++++
7 files changed, 90 insertions(+), 75 deletions(-)
rename src/components/IOC/IOCIcons/{iocStatusData.js => IOCStatusData.js} (57%)
rename src/components/{IOC/IOCIcons/IOCStatusBadge.js => common/Status/StatusBadge.js} (85%)
create mode 100644 src/components/common/Status/StatusData.js
rename src/components/{IOC/IOCIcons => common/Status}/StatusIcon.js (85%)
rename src/components/{IOC/IOCIcons/IOCStatusPopoverContent.js => common/Status/StatusPopoverContent.js} (87%)
create mode 100644 src/components/common/Status/index.js
diff --git a/src/components/IOC/IOCIcons/IOCIcons.js b/src/components/IOC/IOCIcons/IOCIcons.js
index 34a3002e..8dfb935e 100644
--- a/src/components/IOC/IOCIcons/IOCIcons.js
+++ b/src/components/IOC/IOCIcons/IOCIcons.js
@@ -1,13 +1,16 @@
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 } }}
/>
);
diff --git a/src/components/IOC/IOCIcons/iocStatusData.js b/src/components/IOC/IOCIcons/IOCStatusData.js
similarity index 57%
rename from src/components/IOC/IOCIcons/iocStatusData.js
rename to src/components/IOC/IOCIcons/IOCStatusData.js
index 9878337b..d11d4d5b 100644
--- a/src/components/IOC/IOCIcons/iocStatusData.js
+++ b/src/components/IOC/IOCIcons/IOCStatusData.js
@@ -1,55 +1,4 @@
-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;
diff --git a/src/components/IOC/IOCIcons/IOCStatusBadge.js b/src/components/common/Status/StatusBadge.js
similarity index 85%
rename from src/components/IOC/IOCIcons/IOCStatusBadge.js
rename to src/components/common/Status/StatusBadge.js
index 97caebd3..9207e420 100644
--- a/src/components/IOC/IOCIcons/IOCStatusBadge.js
+++ b/src/components/common/Status/StatusBadge.js
@@ -1,5 +1,5 @@
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;
diff --git a/src/components/common/Status/StatusData.js b/src/components/common/Status/StatusData.js
new file mode 100644
index 00000000..461f972a
--- /dev/null
+++ b/src/components/common/Status/StatusData.js
@@ -0,0 +1,52 @@
+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
+ }
+};
diff --git a/src/components/IOC/IOCIcons/StatusIcon.js b/src/components/common/Status/StatusIcon.js
similarity index 85%
rename from src/components/IOC/IOCIcons/StatusIcon.js
rename to src/components/common/Status/StatusIcon.js
index ddbdd5d3..481d5a57 100644
--- a/src/components/IOC/IOCIcons/StatusIcon.js
+++ b/src/components/common/Status/StatusIcon.js
@@ -1,9 +1,9 @@
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)}
diff --git a/src/components/IOC/IOCIcons/IOCStatusPopoverContent.js b/src/components/common/Status/StatusPopoverContent.js
similarity index 87%
rename from src/components/IOC/IOCIcons/IOCStatusPopoverContent.js
rename to src/components/common/Status/StatusPopoverContent.js
index 1c03e03e..6dadd92a 100644
--- a/src/components/IOC/IOCIcons/IOCStatusPopoverContent.js
+++ b/src/components/common/Status/StatusPopoverContent.js
@@ -1,5 +1,5 @@
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;
diff --git a/src/components/common/Status/index.js b/src/components/common/Status/index.js
new file mode 100644
index 00000000..d5ab35f0
--- /dev/null
+++ b/src/components/common/Status/index.js
@@ -0,0 +1,13 @@
+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
+};
--
GitLab