From 96cc42f3f9f719bebee05505e4935d11b277803d Mon Sep 17 00:00:00 2001
From: Johanna Szepanski <johanna.szepanski@softhouse.se>
Date: Tue, 18 Jun 2024 15:49:39 +0200
Subject: [PATCH] separate only warning messages from error with triangle icon
---
src/components/IOC/IOCIcons/IOCIcons.js | 23 +++++------
src/components/IOC/IOCIcons/IOCStatusBadge.js | 40 +++++++++++++++++++
src/components/IOC/IOCIcons/StatusIcon.js | 2 +-
src/components/IOC/IOCIcons/iocStatusData.js | 19 +++++++--
4 files changed, 66 insertions(+), 18 deletions(-)
create mode 100644 src/components/IOC/IOCIcons/IOCStatusBadge.js
diff --git a/src/components/IOC/IOCIcons/IOCIcons.js b/src/components/IOC/IOCIcons/IOCIcons.js
index 0546740f..5e0d2105 100644
--- a/src/components/IOC/IOCIcons/IOCIcons.js
+++ b/src/components/IOC/IOCIcons/IOCIcons.js
@@ -2,15 +2,20 @@ import React from "react";
import LabeledIcon from "../../common/LabeledIcon/LabeledIcon";
import Popover from "../../common/Popover";
import { STATUS, statusConfig, getIocStatus } from "./iocStatusData";
-import { useTheme, Badge } from "@mui/material";
+import { useTheme } from "@mui/material";
import { PlayCircleFilled, PauseCircleFilled } from "@mui/icons-material";
import { StatusIcon } from "./StatusIcon";
import { IOCStatusPopoverContent } from "./IOCStatusPopoverContent";
+import { IOCStatusBadge } from "./IOCStatusBadge";
export function IOCStatusIcon({ ioc }) {
const theme = useTheme();
let { alerts = [], id } = ioc;
const iocStatus = getIocStatus(ioc);
+ const displayBadge =
+ iocStatus === STATUS.alert ||
+ iocStatus === STATUS.warning ||
+ iocStatus === STATUS.inactiveAlert;
return (
<Popover
@@ -28,23 +33,13 @@ export function IOCStatusIcon({ ioc }) {
onMouseLeave={handlePopoverClose}
style={{ color: theme.palette.status.icons }}
>
- {iocStatus === STATUS.alert || iocStatus === STATUS.inactiveAlert ? (
- <Badge
- badgeContent={"!"}
- color="error"
- sx={{
- "& .MuiBadge-badge": {
- minWidth: "17px",
- height: "17px",
- fontSize: "0.7rem"
- }
- }}
- >
+ {displayBadge ? (
+ <IOCStatusBadge status={iocStatus}>
<StatusIcon
ioc={ioc}
status={iocStatus}
/>
- </Badge>
+ </IOCStatusBadge>
) : (
<StatusIcon
ioc={ioc}
diff --git a/src/components/IOC/IOCIcons/IOCStatusBadge.js b/src/components/IOC/IOCIcons/IOCStatusBadge.js
new file mode 100644
index 00000000..9d999887
--- /dev/null
+++ b/src/components/IOC/IOCIcons/IOCStatusBadge.js
@@ -0,0 +1,40 @@
+import React from "react";
+import { string, object, arrayOf, oneOfType, node } from "prop-types";
+import { STATUS } from "./iocStatusData";
+import { Stack } from "@mui/material";
+import WarningAmberIcon from "@mui/icons-material/WarningAmber";
+import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
+
+const propTypes = {
+ status: string,
+ theme: object,
+ children: oneOfType([arrayOf(node), node])
+};
+
+const commonStyles = {
+ position: "absolute",
+ top: "-10px",
+ left: "14px",
+ fontSize: "20px"
+};
+
+export const IOCStatusBadge = ({ status, theme, children }) => (
+ <Stack sx={{ position: "relative" }}>
+ {children}
+ {status === STATUS.warning ? (
+ <WarningAmberIcon
+ sx={{ fill: theme.palette.warning.main, ...commonStyles }}
+ />
+ ) : (
+ <>
+ {status === STATUS.alert || status === STATUS.inactiveAlert ? (
+ <ErrorOutlineIcon
+ sx={{ fill: theme.palette.error.main, ...commonStyles }}
+ />
+ ) : null}
+ </>
+ )}
+ </Stack>
+);
+
+IOCStatusBadge.propTypes = propTypes;
diff --git a/src/components/IOC/IOCIcons/StatusIcon.js b/src/components/IOC/IOCIcons/StatusIcon.js
index 8b746151..aed88304 100644
--- a/src/components/IOC/IOCIcons/StatusIcon.js
+++ b/src/components/IOC/IOCIcons/StatusIcon.js
@@ -20,7 +20,7 @@ const getLabel = (alerts, status) => {
const hasErrors = Boolean(errors.length);
return `${statusConfig[status].title} ${
hasWarnings ? warnings.length + " warnings" : ""
- }${hasErrors ? errors.length + " errors" : ""}`;
+ }${hasErrors ? errors.length + " errors" : ""} !`;
}
return statusConfig[status].title;
};
diff --git a/src/components/IOC/IOCIcons/iocStatusData.js b/src/components/IOC/IOCIcons/iocStatusData.js
index b690fd77..9878337b 100644
--- a/src/components/IOC/IOCIcons/iocStatusData.js
+++ b/src/components/IOC/IOCIcons/iocStatusData.js
@@ -15,7 +15,9 @@ export const STATUS = {
};
export const SEVERITY = {
- info: "info"
+ info: "info",
+ alert: "error",
+ warning: "warning"
};
export const statusConfig = {
@@ -31,6 +33,10 @@ export const statusConfig = {
title: "Alert",
icon: Brightness1
},
+ [STATUS.warning]: {
+ title: "Warning",
+ icon: Brightness1
+ },
[STATUS.inactive]: {
title: "Inactive",
icon: RadioButtonUnchecked
@@ -64,10 +70,17 @@ export const getIocStatus = (ioc) => {
} else if (
active !== undefined &&
alertSeverity !== undefined &&
- alertSeverity !== SEVERITY.info
+ alertSeverity === SEVERITY.alert
) {
- // warning/error
+ // 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)
--
GitLab