MaintenanceWindow table

client/src/Pages/Maintenance/MaintenanceWindowTable.tsx

@@ -0,0 +1,213 @@
+import Typography from "@mui/material/Typography";
+import { Table, ValueLabel } from "@/Components/v2/design-elements";
+import { Pagination } from "@/Components/v2/design-elements/Table";
+import { ActionsMenu } from "@/Components/v2/actions-menu";
+import { DialogInput } from "@/Components/v2/inputs/Dialog";
+
+import { useTheme } from "@mui/material";
+import type { Header } from "@/Components/v2/design-elements/Table";
+import type { ActionMenuItem } from "@/Components/v2/actions-menu";
+import type { MaintenanceWindow } from "@/Types/MaintenanceWindow";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import { useSelector, useDispatch } from "react-redux";
+import type { RootState } from "@/Types/state";
+import Box from "@mui/material/Box";
+import { setRowsPerPage } from "@/Features/UI/uiSlice";
+import { formatDurationRounded } from "@/Utils/timeUtilsLegacy";
+import dayjs from "dayjs";
+import { useState } from "react";
+import { useDelete, usePatch } from "@/Hooks/UseApi";
+
+interface MaintenanceWindowTableProps {
+	maintenanceWindows: MaintenanceWindow[];
+	maintenanceWindowCount: number;
+	page: number;
+	setPage: (page: number) => void;
+	updateCallback: () => void;
+}
+
+const getTimeToNextWindow = (
+	startTime: string,
+	endTime: string,
+	repeat: number
+): string => {
+	const now = dayjs();
+	let start = dayjs(startTime);
+	let end = dayjs(endTime);
+	if (repeat > 0) {
+		while (start.isBefore(now) && end.isBefore(now)) {
+			start = start.add(repeat, "milliseconds");
+			end = end.add(repeat, "milliseconds");
+		}
+	}
+
+	if (now.isAfter(start) && now.isBefore(end)) {
+		return "In maintenance window";
+	}
+
+	if (start.isAfter(now)) {
+		const diffInMinutes = start.diff(now, "minutes");
+		const diffInHours = start.diff(now, "hours");
+		const diffInDays = start.diff(now, "days");
+
+		if (diffInMinutes < 60) {
+			return diffInMinutes + " minutes";
+		} else if (diffInHours < 24) {
+			return diffInHours + " hours";
+		} else {
+			return diffInDays + " days";
+		}
+	}
+
+	return "N/A";
+};
+
+export const MaintenanceWindowTable = ({
+	maintenanceWindows,
+	maintenanceWindowCount,
+	page,
+	setPage,
+	updateCallback,
+}: MaintenanceWindowTableProps) => {
+	const theme = useTheme();
+	const { t } = useTranslation();
+	const navigate = useNavigate();
+	const dispatch = useDispatch();
+	const rowsPerPage = useSelector(
+		(state: RootState) => state?.ui?.maintenance?.rowsPerPage ?? 5
+	);
+
+	const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+	const [selectedWindow, setSelectedWindow] = useState<MaintenanceWindow | null>(null);
+
+	const { deleteFn, loading: deleteLoading } = useDelete();
+	const { patch } = usePatch();
+
+	const handleDelete = async () => {
+		if (!selectedWindow) return;
+		const result = await deleteFn(`/maintenance-window/${selectedWindow.id}`);
+		if (result) {
+			updateCallback();
+			setDeleteDialogOpen(false);
+			setSelectedWindow(null);
+		}
+	};
+
+	const handlePause = async (maintenanceWindow: MaintenanceWindow) => {
+		const result = await patch(`/maintenance-window/${maintenanceWindow.id}`, {
+			active: !maintenanceWindow.active,
+		});
+		if (result) {
+			updateCallback();
+		}
+	};
+
+	const getActions = (maintenanceWindow: MaintenanceWindow): ActionMenuItem[] => [
+		{
+			id: "edit",
+			label: t("pages.common.monitors.actions.configure"),
+			action: () => navigate(`/maintenance/create/${maintenanceWindow.id}`),
+			closeMenu: true,
+		},
+		{
+			id: "pause",
+			label: maintenanceWindow.active
+				? t("pages.common.monitors.actions.pause")
+				: t("pages.common.monitors.actions.resume"),
+			action: () => handlePause(maintenanceWindow),
+			closeMenu: true,
+		},
+		{
+			id: "remove",
+			label: (
+				<Typography color={theme.palette.error.main}>
+					{t("pages.common.monitors.actions.delete")}
+				</Typography>
+			),
+			action: () => {
+				setSelectedWindow(maintenanceWindow);
+				setDeleteDialogOpen(true);
+			},
+			closeMenu: true,
+		},
+	];
+
+	const getHeaders = (): Header<MaintenanceWindow>[] => [
+		{
+			id: "name",
+			content: t("common.table.headers.name"),
+			render: (row) => row.name,
+		},
+		{
+			id: "status",
+			content: t("common.table.headers.status"),
+			render: (row) => (
+				<ValueLabel
+					value={row.active ? "positive" : "neutral"}
+					text={row.active ? t("common.labels.active") : t("common.labels.paused")}
+				/>
+			),
+		},
+		{
+			id: "nextWindow",
+			content: t("pages.maintenanceWindow.table.headers.nextWindow"),
+			render: (row) => getTimeToNextWindow(row.start, row.end, row.repeat),
+		},
+		{
+			id: "repeat",
+			content: t("pages.maintenanceWindow.table.headers.repeat"),
+			render: (row) =>
+				row.repeat === 0 ? t("common.labels.na") : formatDurationRounded(row.repeat),
+		},
+		{
+			id: "actions",
+			content: t("common.table.headers.actions"),
+			render: (row) => <ActionsMenu items={getActions(row)} />,
+		},
+	];
+
+	const handlePageChange = (
+		_e: React.MouseEvent<HTMLButtonElement> | null,
+		newPage: number
+	) => {
+		setPage(newPage);
+	};
+
+	const handleRowsPerPageChange = (
+		e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
+	) => {
+		dispatch(setRowsPerPage({ value: Number(e.target.value), table: "maintenance" }));
+		setPage(0);
+	};
+
+	return (
+		<Box>
+			<Table
+				headers={getHeaders()}
+				data={maintenanceWindows}
+				onRowClick={(row) => navigate(`/maintenance/create/${row.id}`)}
+				emptyViewText={t("common.table.empty")}
+			/>
+			<Pagination
+				component="div"
+				count={maintenanceWindowCount}
+				page={page}
+				rowsPerPage={rowsPerPage}
+				onPageChange={handlePageChange}
+				onRowsPerPageChange={handleRowsPerPageChange}
+			/>
+			<DialogInput
+				open={deleteDialogOpen}
+				title={t("maintenanceTableActionMenuDialogTitle")}
+				onCancel={() => {
+					setDeleteDialogOpen(false);
+					setSelectedWindow(null);
+				}}
+				onConfirm={handleDelete}
+				confirmText={t("delete")}
+				loading={deleteLoading}
+			/>
+		</Box>
+	);
+};

client/src/Pages/Maintenance/index.tsx

@@ -0,0 +1,60 @@
+import { BasePageWithStates } from "@/Components/v2/design-elements";
+import { useTranslation } from "react-i18next";
+import { useGet } from "@/Hooks/UseApi";
+import { MaintenanceWindowTable } from "./MaintenanceWindowTable";
+import { useState, useCallback } from "react";
+import { useSelector } from "react-redux";
+import type { RootState } from "@/Types/state";
+import type { MaintenanceWindow } from "@/Types/MaintenanceWindow";
+
+interface MaintenanceWindowsResponse {
+	maintenanceWindows: MaintenanceWindow[];
+	maintenanceWindowCount: number;
+}
+
+const MaintenanceWindowPage = () => {
+	const { t } = useTranslation();
+	const [page, setPage] = useState(0);
+	const rowsPerPage = useSelector(
+		(state: RootState) => state?.ui?.maintenance?.rowsPerPage ?? 5
+	);
+
+	const { data, isLoading, error, refetch } = useGet<MaintenanceWindowsResponse>(
+		`/maintenance-window/team?page=${page}&rowsPerPage=${rowsPerPage}`
+	);
+
+	const handleUpdate = useCallback(() => {
+		refetch();
+	}, [refetch]);
+
+	const handlePageChange = useCallback((newPage: number) => {
+		setPage(newPage);
+	}, []);
+
+	const maintenanceWindows = data?.maintenanceWindows ?? [];
+	const maintenanceWindowCount = data?.maintenanceWindowCount ?? 0;
+
+	return (
+		<BasePageWithStates
+			page={t("pages.maintenanceWindow.fallback.title")}
+			bullets={
+				t("pages.maintenanceWindow.fallback.checks", { returnObjects: true }) as string[]
+			}
+			loading={isLoading}
+			error={!!error}
+			items={maintenanceWindows}
+			actionButtonText={t("pages.maintenanceWindow.fallback.actionButton")}
+			actionLink="/maintenance/create"
+		>
+			<MaintenanceWindowTable
+				maintenanceWindows={maintenanceWindows}
+				maintenanceWindowCount={maintenanceWindowCount}
+				page={page}
+				setPage={handlePageChange}
+				updateCallback={handleUpdate}
+			/>
+		</BasePageWithStates>
+	);
+};
+
+export default MaintenanceWindowPage;

client/src/Routes/index.jsx

@@ -48,11 +48,11 @@ import Account from "../Pages/Account/index.jsx";
 import EditUser from "../Pages/Account/EditUser/index.jsx";
 import Settings from "../Pages/Settings";
 
-import Maintenance from "../Pages/Maintenance/index.jsx";
+import Maintenance from "../Pages/Maintenance";
+import CreateNewMaintenanceWindow from "../Pages/Maintenance/CreateMaintenance/index.jsx";
 
 import ProtectedRoute from "../Components/v1/ProtectedRoute";
 import RoleProtectedRoute from "../Components/v1/RoleProtectedRoute";
-import CreateNewMaintenanceWindow from "../Pages/Maintenance/CreateMaintenance/index.jsx";
 import withAdminCheck from "@/Components/v1/HOC/withAdminCheck";
 import BulkImport from "../Pages/Uptime/BulkImport/index.jsx";
 import Logs from "../Pages/Logs/index.jsx";
@@ -303,7 +303,13 @@ const Routes = () => {
 
 				<Route
 					path="maintenance"
-					element={<Maintenance />}
+					element={
+						<>
+							<ThemeProvider theme={v2theme}>
+								<Maintenance />
+							</ThemeProvider>
+						</>
+					}
 				/>
 				<Route
 					path="/maintenance/create/:maintenanceWindowId?"

client/src/Types/MaintenanceWindow.ts

@@ -0,0 +1,12 @@
+export interface MaintenanceWindow {
+	id: string;
+	monitorId: string;
+	teamId: string;
+	active: boolean;
+	name: string;
+	repeat: number;
+	start: string;
+	end: string;
+	createdAt: string;
+	updatedAt: string;
+}

client/src/locales/en.json

@@ -218,6 +218,7 @@
 		},
 		"labels": {
 			"active": "Active",
+			"paused": "paused",
 			"na": "N/A",
 			"resolved": "Resolved",
 			"responseTime": "Response time"
@@ -776,6 +777,23 @@
 				"title": "An infrastructure monitor is used to:"
 			}
 		},
+		"maintenanceWindow": {
+			"fallback": {
+				"actionButton": "Let's create your first maintenance window!",
+				"checks": [
+					"Mark your maintenance periods",
+					"Eliminate any misunderstandings",
+					"Stop sending alerts in maintenance windows"
+				],
+				"title": "A maintenance window is used to:"
+			},
+			"table": {
+				"headers": {
+					"nextWindow": "Next window",
+					"repeat": "Repeat"
+				}
+			}
+		},
 		"notifications": {
 			"fallback": {
 				"actionButton": "Create a channel",