summary

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

@@ -1,15 +1,16 @@
 import {
 	MonitorBasePageWithStates,
-	// UpStatusBox,
-	// DownStatusBox,
-	// PausedStatusBox,
+	UpStatusBox,
+	DownStatusBox,
+	PausedStatusBox,
 } from "@/Components/v2/design-elements";
 import { Dialog } from "@/Components/v2/inputs";
 import { HeaderCreate } from "@/Components/v2/common";
-// import Stack from "@mui/material/Stack";
+import Stack from "@mui/material/Stack";
 import { PageSpeedMonitorsTable } from "@/Pages/PageSpeed/Monitors/Components/PageSpeedMonitorsTable";
 import type { Monitor } from "@/Types/Monitor";
 
+import { useTheme } from "@mui/material";
 import { useTranslation } from "react-i18next";
 import { useState } from "react";
 import { useIsAdmin } from "@/Hooks/useIsAdmin";
@@ -19,6 +20,7 @@ import type { AppSettingsResponse } from "@/Types/Settings";
 
 const PageSpeedMonitorsPage = () => {
 	const { t } = useTranslation();
+	const theme = useTheme();
 	const isAdmin = useIsAdmin();
 	const { deleteFn, loading: isDeleting } = useDelete();
 
@@ -46,7 +48,7 @@ const PageSpeedMonitorsPage = () => {
 
 	const monitors = monitorsData?.monitors;
 	const monitorsCount = monitorsData?.count;
-	// const summary = monitorsData?.summary;
+	const summary = monitorsData?.summary;
 
 	const isLoading = monitorsIsLoading || settingsIsLoading;
 
@@ -74,14 +76,14 @@ const PageSpeedMonitorsPage = () => {
 				isLoading={isLoading}
 				isAdmin={isAdmin}
 			/>
-			{/* <Stack
+			<Stack
 				direction={{ xs: "column", md: "row" }}
 				gap={theme.spacing(8)}
 			>
 				<UpStatusBox n={summary?.upMonitors || 0} />
 				<DownStatusBox n={summary?.downMonitors || 0} />
 				<PausedStatusBox n={summary?.pausedMonitors || 0} />
-			</Stack> */}
+			</Stack>
 			<PageSpeedMonitorsTable
 				monitors={monitors || []}
 				refetch={refetch}

client/src/Pages/Uptime/Monitors/Components/UptimeMonitorsTable.tsx

@@ -24,6 +24,7 @@ import type { RootState } from "@/Types/state";
 export const MonitorTable = ({
 	monitors,
 	refetch,
+	setSelectedMonitor,
 	sortField,
 	setSortField,
 	sortOrder,
@@ -36,6 +37,7 @@ export const MonitorTable = ({
 }: {
 	monitors: Monitor[];
 	refetch: Function;
+	setSelectedMonitor: (monitor: Monitor | null) => void;
 	sortField: string;
 	setSortField: (field: string) => void;
 	sortOrder: "asc" | "desc";
@@ -126,9 +128,7 @@ export const MonitorTable = ({
 						{t("pages.common.monitors.actions.delete")}
 					</Typography>
 				),
-				action: () => {
-					// setSelectedMonitor(monitor);
-				},
+				action: () => setSelectedMonitor(monitor),
 				closeMenu: true,
 			},
 		];

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

@@ -5,14 +5,14 @@ import {
 	DownStatusBox,
 	PausedStatusBox,
 } from "@/Components/v2/design-elements";
-import { TextField } from "@/Components/v2/inputs";
+import { TextField, Dialog } from "@/Components/v2/inputs";
 import Stack from "@mui/material/Stack";
 import { MonitorTable } from "@/Pages/Uptime/Monitors/Components/UptimeMonitorsTable";
 import { HeaderCreate } from "@/Components/v2/common";
 
 import { useTranslation } from "react-i18next";
 import useMediaQuery from "@mui/material/useMediaQuery";
-import { useGet } from "@/Hooks/UseApi";
+import { useGet, useDelete } from "@/Hooks/UseApi";
 import type { Monitor, MonitorType, MonitorsWithChecksResponse } from "@/Types/Monitor";
 import { useState, useMemo, useCallback } from "react";
 import { useSelector, useDispatch } from "react-redux";
@@ -40,6 +40,8 @@ const UptimeMonitorsPage = () => {
 	const [search, setSearch] = useState<string>("");
 	const [sortField, setSortField] = useState<string>("");
 	const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc");
+	const [selectedMonitor, setSelectedMonitor] = useState<Monitor | null>(null);
+	const isDialogOpen = Boolean(selectedMonitor);
 
 	// Convert filter selections to API filter values
 	// Status: "up" -> true, "down" -> false
@@ -88,6 +90,7 @@ const UptimeMonitorsPage = () => {
 		data: monitors,
 		isLoading: monitorsLoading,
 		error,
+		refetch: refetchMonitorsAndSummary,
 	} = useGet<Monitor[]>(
 		"/monitors/team?type=http&type=ping&type=port&type=docker",
 		{},
@@ -107,6 +110,9 @@ const UptimeMonitorsPage = () => {
 
 	const { monitors: monitorsWithChecks, summary, count } = monitorsWithChecksData ?? {};
 
+	// Delete hook
+	const { deleteFn, loading: isDeleting } = useDelete();
+
 	// Handlers
 	const handleClearFilters = useCallback(() => {
 		setSelectedTypes([]);
@@ -115,6 +121,18 @@ const UptimeMonitorsPage = () => {
 		setSearch("");
 	}, []);
 
+	const handleConfirm = async () => {
+		if (!selectedMonitor) return;
+		await deleteFn(`/monitors/${selectedMonitor.id}`);
+		setSelectedMonitor(null);
+		refetch();
+		refetchMonitorsAndSummary();
+	};
+
+	const handleCancel = () => {
+		setSelectedMonitor(null);
+	};
+
 	const isLoading = monitorsLoading || monitorsWithChecksLoading;
 
 	return (
@@ -164,6 +182,7 @@ const UptimeMonitorsPage = () => {
 			<MonitorTable
 				monitors={monitorsWithChecks || []}
 				refetch={refetch}
+				setSelectedMonitor={setSelectedMonitor}
 				count={count || 0}
 				page={page}
 				setPage={setPage}
@@ -182,6 +201,14 @@ const UptimeMonitorsPage = () => {
 					setPage(0);
 				}}
 			/>
+			<Dialog
+				open={isDialogOpen}
+				title={t("common.dialogs.delete.title")}
+				content={t("common.dialogs.delete.description")}
+				onConfirm={handleConfirm}
+				onCancel={handleCancel}
+				loading={isDeleting}
+			/>
 		</MonitorBasePageWithStates>
 	);
 };