conditinally render breached stauts box

client/src/Components/v2/monitors/HeaderMonitorsSummary.tsx

@@ -12,9 +12,13 @@ import { useTheme } from "@mui/material";
 
 interface MonitorsSummaryProps {
 	summary: MonitorsSummary | null;
+	showBreached?: boolean;
 }
 
-export const HeaderMonitorsSummary = ({ summary }: MonitorsSummaryProps) => {
+export const HeaderMonitorsSummary = ({
+	summary,
+	showBreached = false,
+}: MonitorsSummaryProps) => {
 	const theme = useTheme();
 	return (
 		<Stack
@@ -23,7 +27,7 @@ export const HeaderMonitorsSummary = ({ summary }: MonitorsSummaryProps) => {
 		>
 			<UpStatusBox n={summary?.upMonitors || 0} />
 			<DownStatusBox n={summary?.downMonitors || 0} />
-			<BreachedStatusBox n={summary?.breachedMonitors || 0} />
+			{showBreached && <BreachedStatusBox n={summary?.breachedMonitors || 0} />}
 			<PausedStatusBox n={summary?.pausedMonitors || 0} />
 			<InitializingStatusBox n={summary?.initializingMonitors || 0} />
 		</Stack>

client/src/Pages/Infrastructure/Monitors/index.tsx

@@ -133,7 +133,10 @@ const InfrastructureMonitors = () => {
 				isLoading={isLoading}
 				isAdmin={isAdmin}
 			/>
-			<HeaderMonitorsSummary summary={summary} />
+			<HeaderMonitorsSummary
+				summary={summary}
+				showBreached={true}
+			/>
 			<Stack
 				direction={isSmall ? "column" : "row"}
 				justifyContent={isSmall ? "flex-start" : "space-between"}