checks table

client/src/App.jsx

@@ -37,7 +37,14 @@ function App() {
 			<AppLayout>
 				<Routes />
 			</AppLayout>
-			<ToastContainer />
+			<ToastContainer
+				newestOnTop={true}
+				theme={mode}
+				style={{
+					"--toastify-color-progress-light": "#7C8BA1",
+					"--toastify-color-progress-dark": "#7C8BA1",
+				}}
+			/>
 		</ThemeProvider>
 	);
 }

client/src/Components/v2/common/controls/HeaderMonitorControls.tsx

@@ -6,6 +6,7 @@ import { Settings, Pause, Play, Mail, Bug } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import { useTheme } from "@mui/material/styles";
+import { usePost } from "@/Hooks/UseApi";
 
 import type { Monitor } from "@/Types/Monitor.js";
 
@@ -13,16 +14,23 @@ interface HeaderMonitorControlsProps {
 	path: string;
 	monitor?: Monitor;
 	isAdmin: boolean;
+	refetch: Function;
 }
 
 export const HeaderMonitorControls = ({
 	path,
 	monitor,
 	isAdmin,
+	refetch,
 }: HeaderMonitorControlsProps) => {
 	const { t } = useTranslation();
 	const navigate = useNavigate();
 	const theme = useTheme();
+	const {
+		post,
+		loading: isPosting,
+		// error: postError,
+	} = usePost<any, Monitor>();
 
 	if (!monitor) {
 		return null;
@@ -43,11 +51,10 @@ export const HeaderMonitorControls = ({
 				<Button
 					variant="contained"
 					color="secondary"
-					// loading={isSending}
+					loading={isPosting}
 					startIcon={<Icon icon={Mail} />}
-					// disabled={isTestNotificationsDisabled}
-					onClick={() => {
-						// testAllNotifications({ monitorId: monitor?.id });
+					onClick={async () => {
+						await post(`/notifications/test/all`, { monitorId: monitor.id });
 					}}
 					sx={{
 						whiteSpace: "nowrap",
@@ -69,13 +76,11 @@ export const HeaderMonitorControls = ({
 					<Button
 						variant="contained"
 						color="secondary"
-						// loading={isPausing}
+						loading={isPosting}
 						startIcon={monitor?.isActive ? <Icon icon={Pause} /> : <Icon icon={Play} />}
-						onClick={() => {
-							// pauseMonitor({
-							// 	monitorId: monitor?.id,
-							// 	triggerUpdate,
-							// });
+						onClick={async () => {
+							await post(`/monitors/pause/${monitor.id}`, {});
+							await refetch();
 						}}
 					>
 						{monitor?.isActive ? t("pause") : t("resume")}

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

@@ -17,14 +17,17 @@ export const StatusLabel = ({
 	sx,
 }: {
 	status: MonitorStatus;
-	isActive: boolean;
+	isActive?: boolean;
 	sx?: SxProps;
 }) => {
 	const { t } = useTranslation();
 	const theme = useTheme();
 	const palette = getStatusPalette(status);
 
-	const determineStatus = (isActive: boolean, status: MonitorStatus): string => {
+	const determineStatus = (
+		isActive: boolean | undefined,
+		status: MonitorStatus
+	): string => {
 		if (isActive === false) {
 			return t("pages.common.monitors.status.paused");
 		}

client/src/Pages/Uptime/Details/Components/ChecksTable.tsx

@@ -0,0 +1,100 @@
+import { Table, Pagination, StatusLabel } from "@/Components/v2/design-elements";
+import Box from "@mui/material/Box";
+import type { Header } from "@/Components/v2/design-elements/";
+import type { Check } from "@/Types/Check";
+
+import { useNavigate } from "react-router";
+import { useTranslation } from "react-i18next";
+import { formatDateWithTz } from "@/Utils/TimeUtils";
+import type { RootState } from "@/Types/state";
+import { useSelector } from "react-redux";
+
+const getHeaders = (t: Function, uiTimezone: string) => {
+	const headers: Header<Check>[] = [
+		{
+			id: "status",
+			content: t("common.table.headers.status"),
+			render: (row) => {
+				return <StatusLabel status={row.status} />;
+			},
+		},
+		{
+			id: "date",
+			content: t("checks.table.headers.dateTime"),
+			render: (row) => {
+				return formatDateWithTz(row.createdAt, "ddd, MMMM D, YYYY, HH:mm A", uiTimezone);
+			},
+		},
+		{
+			id: "message",
+			content: t("common.table.headers.message"),
+			render: (row) => {
+				return row.message || "N/A";
+			},
+		},
+		{
+			id: "statusCode",
+			content: t("checks.table.headers.statusCode"),
+			render: (row) => {
+				return row.statusCode || "N/A";
+			},
+		},
+	];
+	return headers;
+};
+
+export const ChecksTable = ({
+	checks,
+	count,
+	page,
+	setPage,
+	rowsPerPage,
+	setRowsPerPage,
+}: {
+	checks: Check[];
+	count: number;
+	page: number;
+	setPage: (page: number) => void;
+	rowsPerPage: number;
+	setRowsPerPage: (rowsPerPage: number) => void;
+}) => {
+	const navigate = useNavigate();
+	const { t } = useTranslation();
+	const uiTimezone = useSelector((state: RootState) => state.ui.timezone);
+	const headers = getHeaders(t, uiTimezone);
+
+	const handlePageChange = (
+		_e: React.MouseEvent<HTMLButtonElement> | null,
+		newPage: number
+	) => {
+		setPage(newPage);
+	};
+
+	const handleRowsPerPageChange = (
+		e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
+	) => {
+		const value = Number(e.target.value);
+		setPage(0);
+		setRowsPerPage(value);
+	};
+
+	return (
+		<Box>
+			<Table
+				headers={headers}
+				data={checks}
+				onRowClick={(row) => {
+					navigate(`/checks/${row.id}`);
+				}}
+			/>
+			<Pagination
+				component="div"
+				count={count}
+				page={page}
+				rowsPerPage={rowsPerPage}
+				onPageChange={handlePageChange}
+				onRowsPerPageChange={handleRowsPerPageChange}
+			/>
+		</Box>
+	);
+};

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

@@ -7,6 +7,7 @@ import {
 	HistogramDetails,
 } from "@/Components/v2/monitors";
 import { TrendingUp, AlertTriangle } from "lucide-react";
+import { ChecksTable } from "@/Pages/Uptime/Details/Components/ChecksTable";
 
 import { useTheme } from "@mui/material/styles";
 import { useIsAdmin } from "@/Hooks/useIsAdmin";
@@ -98,7 +99,7 @@ const UptimeDetailsPage = () => {
 		data: checksData,
 		isLoading: checksIsLoading,
 		error: checksError,
-	} = useGet<ChecksResponse>(checksUrl);
+	} = useGet<ChecksResponse>(checksUrl, {}, { keepPreviousData: true });
 
 	const checks = checksData?.checks ?? [];
 	const checksCount = checksData?.checksCount ?? 0;
@@ -109,6 +110,7 @@ const UptimeDetailsPage = () => {
 				path="uptime"
 				monitor={monitor}
 				isAdmin={isAdmin}
+				refetch={refetchMonitor}
 			/>
 			<MonitorStatBoxes
 				monitor={monitor}
@@ -148,6 +150,14 @@ const UptimeDetailsPage = () => {
 				checks={monitorData?.groupedChecks || []}
 				range={dateRange}
 			/>
+			<ChecksTable
+				checks={checks}
+				count={checksCount}
+				page={page}
+				setPage={setPage}
+				rowsPerPage={rowsPerPage}
+				setRowsPerPage={setRowsPerPage}
+			/>
 		</BasePage>
 	);
 };