refactor

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

@@ -98,6 +98,28 @@ export const PausedStatusBox = ({ n }: { n: number }) => {
 		/>
 	);
 };
+export const TotalChecksBox = ({ n }: { n: number }) => {
+	const theme = useTheme();
+	const { t } = useTranslation();
+	return (
+		<StatusBox
+			label={t("pages.common.monitors.status.total")}
+			n={n}
+			color={theme.palette.primary.light}
+		/>
+	);
+};
+export const DownChecksBox = ({ n }: { n: number }) => {
+	const theme = useTheme();
+	const { t } = useTranslation();
+	return (
+		<StatusBox
+			label={t("pages.common.monitors.status.down")}
+			n={n}
+			color={theme.palette.error.light}
+		/>
+	);
+};
 
 export const InitializingStatusBox = ({ n }: { n: number }) => {
 	const theme = useTheme();

client/src/Pages/Checks/index.tsx

@@ -1,19 +1,13 @@
-import { BasePage, Breadcrumb } from "@/Components/v2/design-elements";
+import Stack from "@mui/material/Stack";
+import { BasePage, TotalChecksBox, DownChecksBox } from "@/Components/v2/design-elements";
+
 import { useTheme } from "@mui/material";
 import { useTranslation } from "react-i18next";
 import { useState, useEffect, useMemo } from "react";
 import { useParams } from "react-router-dom";
 import { useGet } from "@/Hooks/UseApi";
-
-interface MonitorLookupItem {
-	id: string;
-	name: string;
-	type: string;
-}
-
-interface MonitorLookup {
-	[key: string]: MonitorLookupItem;
-}
+import type { Monitor } from "@/Types/Monitor";
+import type { ChecksSummary } from "@/Types/Check";
 
 const Checks = () => {
 	const { t } = useTranslation();
@@ -45,7 +39,13 @@ const Checks = () => {
 
 	return (
 		<BasePage>
-			<Breadcrumb />
+			<Stack
+				direction={{ xs: "column", md: "row" }}
+				gap={4}
+			>
+				<TotalChecksBox n={summaryResponse?.totalChecks || 0} />
+				<DownChecksBox n={summaryResponse?.downChecks || 0} />
+			</Stack>
 		</BasePage>
 	);
 };

client/src/Routes/index.jsx

@@ -163,7 +163,13 @@ const Routes = () => {
 				/>
 				<Route
 					path="checks/:monitorId?"
-					element={<Checks />}
+					element={
+						<>
+							<ThemeProvider theme={v2theme}>
+								<Checks />
+							</ThemeProvider>
+						</>
+					}
 				/>
 				<Route
 					path="incidents/:monitorId?"

client/src/Types/Check.ts

@@ -222,9 +222,7 @@ export interface UptimeChecksResult {
 
 export interface ChecksSummary {
 	totalChecks: number;
-	resolvedChecks: number;
 	downChecks: number;
-	cannotResolveChecks: number;
 }
 
 export type CheckSnapshot = Omit<

server/src/repositories/checks/MongoChecksRepistory.ts

@@ -381,14 +381,12 @@ class MongoChecksRepository implements IChecksRepository {
 				$group: {
 					_id: null,
 					totalChecks: { $sum: 1 },
-					resolvedChecks: { $sum: { $cond: [{ $eq: ["$ack", true] }, 1, 0] } },
 					downChecks: { $sum: { $cond: [{ $eq: ["$ack", false] }, 1, 0] } },
-					cannotResolveChecks: { $sum: { $cond: [{ $eq: ["$statusCode", 5000] }, 1, 0] } },
 				},
 			},
 			{ $project: { _id: 0 } },
 		]);
-		return checks[0] ?? { totalChecks: 0, resolvedChecks: 0, downChecks: 0, cannotResolveChecks: 0 };
+		return checks[0] ?? { totalChecks: 0, downChecks: 0 };
 	};
 
 	deleteByMonitorId = async (monitorId: string): Promise<number> => {

server/src/types/check.ts

@@ -172,9 +172,7 @@ export interface UptimeChecksResult {
 
 export interface ChecksSummary {
 	totalChecks: number;
-	resolvedChecks: number;
 	downChecks: number;
-	cannotResolveChecks: number;
 }
 
 export interface HasResponseTime {