From e26489cdc06244acb891bbb9402b44a637649bf6 Mon Sep 17 00:00:00 2001
From: Johanna Szepanski <johanna.szepanski@softhouse.se>
Date: Tue, 18 Jun 2024 16:10:48 +0200
Subject: [PATCH] conditionally hide badge and alert
show alerts and warnings on ioc list view hide them on ioc details view
---
src/components/IOC/IOCBadge/IOCBadge.js | 7 +++++-
src/components/IOC/IOCIcons/IOCIcons.js | 26 +++++++++++++++++------
src/components/IOC/IOCIcons/StatusIcon.js | 2 +-
3 files changed, 26 insertions(+), 9 deletions(-)
diff --git a/src/components/IOC/IOCBadge/IOCBadge.js b/src/components/IOC/IOCBadge/IOCBadge.js
index 5a4511ef..9f3fd6b3 100644
--- a/src/components/IOC/IOCBadge/IOCBadge.js
+++ b/src/components/IOC/IOCBadge/IOCBadge.js
@@ -5,7 +5,12 @@ import { IOCStatusIcon } from "../IOCIcons";
export function IOCBadge({ ioc, ...rest }) {
return (
<IconBadge
- icon={<IOCStatusIcon ioc={ioc} />}
+ icon={
+ <IOCStatusIcon
+ ioc={ioc}
+ hideAlerts
+ />
+ }
title={ioc.namingName ?? ioc.name}
subtitle={ioc.activeDeployment?.host?.fqdn || "---"}
{...rest}
diff --git a/src/components/IOC/IOCIcons/IOCIcons.js b/src/components/IOC/IOCIcons/IOCIcons.js
index 5e0d2105..4308ed39 100644
--- a/src/components/IOC/IOCIcons/IOCIcons.js
+++ b/src/components/IOC/IOCIcons/IOCIcons.js
@@ -1,21 +1,28 @@
import React from "react";
-import LabeledIcon from "../../common/LabeledIcon/LabeledIcon";
+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";
-export function IOCStatusIcon({ ioc }) {
+const propsTypes = {
+ ioc: object,
+ hideAlerts: bool
+};
+
+export function IOCStatusIcon({ ioc, hideAlerts = false }) {
const theme = useTheme();
let { alerts = [], id } = ioc;
const iocStatus = getIocStatus(ioc);
const displayBadge =
- iocStatus === STATUS.alert ||
- iocStatus === STATUS.warning ||
- iocStatus === STATUS.inactiveAlert;
+ !hideAlerts &&
+ (iocStatus === STATUS.alert ||
+ iocStatus === STATUS.warning ||
+ iocStatus === STATUS.inactiveAlert);
return (
<Popover
@@ -34,7 +41,10 @@ export function IOCStatusIcon({ ioc }) {
style={{ color: theme.palette.status.icons }}
>
{displayBadge ? (
- <IOCStatusBadge status={iocStatus}>
+ <IOCStatusBadge
+ status={iocStatus}
+ theme={theme}
+ >
<StatusIcon
ioc={ioc}
status={iocStatus}
@@ -51,7 +61,7 @@ export function IOCStatusIcon({ ioc }) {
popoverContents={
<IOCStatusPopoverContent
title={statusConfig[iocStatus].title}
- alerts={alerts}
+ alerts={hideAlerts ? [] : alerts}
/>
}
anchorOrigin={{
@@ -62,6 +72,8 @@ export function IOCStatusIcon({ ioc }) {
);
}
+IOCStatusIcon.propsTypes = propsTypes;
+
export function CommandTypeIcon({
type,
colorStyle = "colors",
diff --git a/src/components/IOC/IOCIcons/StatusIcon.js b/src/components/IOC/IOCIcons/StatusIcon.js
index aed88304..46f700d2 100644
--- a/src/components/IOC/IOCIcons/StatusIcon.js
+++ b/src/components/IOC/IOCIcons/StatusIcon.js
@@ -1,7 +1,7 @@
import React from "react";
import { object, string } from "prop-types";
import { STATUS, statusConfig } from "./iocStatusData";
-import LabeledIcon from "../../common/LabeledIcon/LabeledIcon";
+import { LabeledIcon } from "@ess-ics/ce-ui-common";
const propTypes = {
ioc: object,
--
GitLab