Mini Project Done

client/src/Hooks/useMonitorForm.ts

@@ -12,6 +12,8 @@ const getBaseDefaults = (data?: Monitor | null) => ({
 	description: data?.description || "",
 	interval: data?.interval || 60000,
 	notifications: data?.notifications || [],
+	escalationAfterMinutes: data?.escalationAfterMinutes ?? 0,
+	escalationNotifications: data?.escalationNotifications || [],
 	statusWindowSize: data?.statusWindowSize || 5,
 	statusWindowThreshold: data?.statusWindowThreshold || 60,
 	geoCheckEnabled: data?.geoCheckEnabled ?? false,

client/src/Hooks/useNotificationForm.ts

@@ -16,7 +16,7 @@ export const useNotificationForm = ({ data = null }: UseNotificationFormOptions
 						homeserverUrl: data.homeserverUrl || "",
 						roomId: data.roomId || "",
 						accessToken: data.accessToken || "",
-					}
+				  }
 				: {
 						type: (data?.type || "email") as Exclude<Notification["type"], "matrix">,
 						notificationName: data?.notificationName || "",

client/src/Pages/CreateMonitor/index.tsx

@@ -705,7 +705,6 @@ const CreateMonitorPage = () => {
 						name="notifications"
 						control={control}
 						render={({ field }) => {
-							// Map notifications to have 'name' property for Autocomplete
 							const notificationOptions = (notifications ?? []).map((n) => ({
 								...n,
 								name: n.notificationName,
@@ -724,7 +723,7 @@ const CreateMonitorPage = () => {
 											field.onChange(newValue.map((n) => n.id));
 										}}
 										isOptionEqualToValue={(option, value) => option.id === value.id}
-									/>
+					/>
 									{selectedNotifications.length > 0 && (
 										<Stack
 											flex={1}
@@ -765,6 +764,94 @@ const CreateMonitorPage = () => {
 				}
 			/>
 
+			<ConfigBox
+				title={t("pages.createMonitor.form.escalationRules.title")}
+				subtitle={t("pages.createMonitor.form.escalationRules.description")}
+				rightContent={
+					<Stack spacing={theme.spacing(LAYOUT.MD)}>
+						<Controller
+							name="escalationAfterMinutes"
+							control={control}
+							render={({ field, fieldState }) => (
+								<TextField
+									{...field}
+									value={field.value ?? 0}
+									onChange={(event) => field.onChange(Number(event.target.value || 0))}
+									type="number"
+									fieldLabel={t("pages.createMonitor.form.escalationRules.option.afterMinutes.label")}
+									placeholder={t("pages.createMonitor.form.escalationRules.option.afterMinutes.placeholder")}
+									fullWidth
+									error={!!fieldState.error}
+									helperText={fieldState.error?.message ?? ""}
+								/>
+							)}
+						/>
+						<Controller
+							name="escalationNotifications"
+							control={control}
+							render={({ field }) => {
+								const notificationOptions = (notifications ?? []).map((n) => ({
+									...n,
+									name: n.notificationName,
+								}));
+								const selectedEscalationNotifications = notificationOptions.filter((n) =>
+									(field.value ?? []).includes(n.id)
+								);
+
+								return (
+									<Stack spacing={theme.spacing(LAYOUT.MD)}>
+										<Autocomplete
+											multiple
+											fieldLabel={t("pages.createMonitor.form.escalationRules.option.channels.label")}
+											options={notificationOptions}
+											value={selectedEscalationNotifications}
+											getOptionLabel={(option) => option.name}
+											onChange={(_: unknown, newValue: typeof notificationOptions) => {
+												field.onChange(newValue.map((n) => n.id));
+											}}
+											isOptionEqualToValue={(option, value) => option.id === value.id}
+										/>
+										{selectedEscalationNotifications.length > 0 && (
+											<Stack
+												flex={1}
+												width="100%"
+											>
+												{selectedEscalationNotifications.map((notification, index) => (
+													<Stack
+														direction="row"
+														alignItems="center"
+														key={notification.id}
+														width="100%"
+													>
+														<Typography flexGrow={1}>
+															{notification.notificationName}
+														</Typography>
+														<IconButton
+															size="small"
+															onClick={() => {
+																field.onChange(
+																	(field.value ?? []).filter(
+																		(id: string) => id !== notification.id
+																	)
+																);
+															}}
+															aria-label="Remove escalation notification"
+														>
+															<Trash2 size={16} />
+														</IconButton>
+														{index < selectedEscalationNotifications.length - 1 && <Divider />}
+													</Stack>
+												))}
+											</Stack>
+										)}
+									</Stack>
+								);
+							}}
+						/>
+					</Stack>
+				}
+			/>
+
 			{(watchedType === "http" ||
 				watchedType === "grpc" ||
 				watchedType === "websocket") && (

client/src/Pages/Notifications/create/index.tsx

@@ -46,6 +46,10 @@ const NotificationsCreatePage = () => {
 	}, [defaults, reset]);
 
 	const watchedType = watch("type");
+	const addressDefault = "address" in defaults ? defaults.address : "";
+	const homeserverUrlDefault = "homeserverUrl" in defaults ? defaults.homeserverUrl : "";
+	const roomIdDefault = "roomId" in defaults ? defaults.roomId : "";
+	const accessTokenDefault = "accessToken" in defaults ? defaults.accessToken : "";
 
 	useEffect(() => {
 		clearErrors();
@@ -155,7 +159,7 @@ const NotificationsCreatePage = () => {
 						<Controller
 							name="address"
 							control={control}
-							defaultValue={defaults.address}
+							defaultValue={addressDefault}
 							render={({ field, fieldState }) => (
 								<TextField
 									{...field}
@@ -180,7 +184,7 @@ const NotificationsCreatePage = () => {
 							<Controller
 								name="homeserverUrl"
 								control={control}
-								defaultValue={defaults.homeserverUrl}
+								defaultValue={homeserverUrlDefault}
 								render={({ field, fieldState }) => (
 									<TextField
 										{...field}
@@ -196,7 +200,7 @@ const NotificationsCreatePage = () => {
 							<Controller
 								name="roomId"
 								control={control}
-								defaultValue={defaults.roomId}
+								defaultValue={roomIdDefault}
 								render={({ field, fieldState }) => (
 									<TextField
 										{...field}
@@ -212,7 +216,7 @@ const NotificationsCreatePage = () => {
 							<Controller
 								name="accessToken"
 								control={control}
-								defaultValue={defaults.accessToken}
+								defaultValue={accessTokenDefault}
 								render={({ field, fieldState }) => (
 									<TextField
 										{...field}

client/src/Types/Monitor.ts

@@ -60,6 +60,8 @@ export interface Monitor {
 	interval: number;
 	uptimePercentage?: number;
 	notifications: string[];
+	escalationAfterMinutes?: number;
+	escalationNotifications?: string[];
 	secret?: string;
 	cpuAlertThreshold: number;
 	cpuAlertCounter: number;

client/src/Validation/monitor.ts

@@ -13,6 +13,8 @@ const baseSchema = z.object({
 	description: z.string().optional(),
 	interval: z.number().min(15000, "Interval must be at least 15 seconds"),
 	notifications: z.array(z.string()),
+	escalationAfterMinutes: z.number().int().min(0, "Escalation time cannot be negative").default(0),
+	escalationNotifications: z.array(z.string()).default([]),
 	statusWindowSize: z
 		.number({ message: "Status window size is required" })
 		.min(1, "Status window size must be at least 1")
@@ -135,7 +137,7 @@ export const monitorSchema = z.discriminatedUnion("type", [
 	websocketSchema,
 ]);
 
-export type MonitorFormData = z.infer<typeof monitorSchema>;
+export type MonitorFormData = z.input<typeof monitorSchema>;
 
 // Type-specific schemas exported for individual use
 export {

client/src/Validation/notifications.ts

@@ -60,4 +60,4 @@ export const notificationSchema = z.discriminatedUnion("type", [
 	teamsSchema,
 ]);
 
-export type NotificationFormData = z.infer<typeof notificationSchema>;
+export type NotificationFormData = z.input<typeof notificationSchema>;

client/src/locales/en.json

@@ -543,6 +543,19 @@
 					"description": "Select the notification channels you want to use",
 					"title": "Notifications"
 				},
+				"escalationRules": {
+					"title": "Escalation Rules",
+					"description": "If the monitor stays down for the specified time, notify additional channels.",
+					"option": {
+						"afterMinutes": {
+							"label": "Escalate after (minutes)",
+							"placeholder": "5"
+						},
+						"channels": {
+							"label": "Escalation notification channels"
+						}
+					}
+				},
 				"type": {
 					"description": "Select the type of check to perform",
 					"optionDockerDescription": "Use Docker to monitor if a container is running.",