diff --git a/src/components/IOC/IOCBadge/IOCBadge.js b/src/components/IOC/IOCBadge/IOCBadge.js index 5a4511ef38f949b5c2fbea0271235bac448261c4..9f3fd6b3cb0e047c9ef75908b9a5edadce66272d 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 5e0d210534001e62b8f2c55d32dd611b4467a79f..4308ed3929ef01ab55269bdf7ca96c69a52d48d3 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 aed88304114fedc5bab6dd4e86696cde4c1ab713..46f700d267a016025017627edfc6f9386469224a 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,