add breached status to summary header

client/src/Components/v2/design-elements/StatusBox.tsx

@@ -139,6 +139,17 @@ export const InitializingStatusBox = ({ n }: { n: number }) => {
 		/>
 	);
 };
+export const BreachedStatusBox = ({ n }: { n: number }) => {
+	const theme = useTheme();
+	const { t } = useTranslation();
+	return (
+		<StatusBox
+			label={t("pages.common.monitors.status.breached")}
+			n={n}
+			color={theme.palette.warning.main}
+		/>
+	);
+};
 
 export const TotalChecksBox = ({ n }: { n: number }) => {
 	const theme = useTheme();

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

@@ -3,6 +3,7 @@ import {
 	DownStatusBox,
 	PausedStatusBox,
 	InitializingStatusBox,
+	BreachedStatusBox,
 } from "@/Components/v2/design-elements";
 import Stack from "@mui/material/Stack";
 
@@ -22,6 +23,7 @@ export const HeaderMonitorsSummary = ({ summary }: MonitorsSummaryProps) => {
 		>
 			<UpStatusBox n={summary?.upMonitors || 0} />
 			<DownStatusBox n={summary?.downMonitors || 0} />
+			<BreachedStatusBox n={summary?.breachedMonitors || 0} />
 			<PausedStatusBox n={summary?.pausedMonitors || 0} />
 			<InitializingStatusBox n={summary?.initializingMonitors || 0} />
 		</Stack>

client/src/Types/Monitor.ts

@@ -72,6 +72,7 @@ export interface MonitorsSummary {
 	pausedMonitors: number;
 	initializingMonitors: number;
 	maintenanceMonitors: number;
+	breachedMonitors: number;
 }
 
 export interface MonitorsWithChecksResponse {

server/src/repositories/monitors/MongoMonitorsRepository.ts

@@ -252,13 +252,28 @@ class MongoMonitorsRepository implements IMonitorsRepository {
 							$cond: [{ $eq: ["$status", "maintenance"] }, 1, 0],
 						},
 					},
+					breachedMonitors: {
+						$sum: {
+							$cond: [{ $eq: ["$status", "breached"] }, 1, 0],
+						},
+					},
 				},
 			},
 			{ $project: { _id: 0 } },
 		];
 
 		const [summary] = await MonitorModel.aggregate(pipeline);
-		return summary ?? { totalMonitors: 0, upMonitors: 0, downMonitors: 0, pausedMonitors: 0, initializingMonitors: 0, maintenanceMonitors: 0 };
+		return (
+			summary ?? {
+				totalMonitors: 0,
+				upMonitors: 0,
+				downMonitors: 0,
+				pausedMonitors: 0,
+				initializingMonitors: 0,
+				maintenanceMonitors: 0,
+				breachedMonitors: 0,
+			}
+		);
 	};
 
 	findGroupsByTeamId = async (teamId: string): Promise<string[]> => {

server/src/types/monitor.ts

@@ -55,6 +55,7 @@ export interface MonitorsSummary {
 	pausedMonitors: number;
 	initializingMonitors: number;
 	maintenanceMonitors: number;
+	breachedMonitors: number;
 }
 
 export interface MonitorsWithChecksByTeamIdResult {