add incidents config box

client/src/Pages/CreateMonitor/index.tsx

@@ -359,6 +359,54 @@ const CreateMonitorPage = () => {
 				}
 			/>
 
+			{/* Incidents ConfigBox */}
+			<ConfigBox
+				title={t("pages.createMonitor.form.incidents.title")}
+				subtitle={t("pages.createMonitor.form.incidents.description")}
+				rightContent={
+					<Stack spacing={theme.spacing(8)}>
+						<Controller
+							name="statusWindowSize"
+							control={control}
+							render={({ field, fieldState }) => (
+								<TextField
+									value={field.value ?? ""}
+									onChange={(e) => {
+										const val = e.target.value;
+										field.onChange(val === "" ? undefined : Number(val));
+									}}
+									onBlur={field.onBlur}
+									type="number"
+									fieldLabel={t("pages.createMonitor.form.incidents.option.checks.label")}
+									fullWidth
+									error={!!fieldState.error}
+									helperText={fieldState.error?.message ?? ""}
+								/>
+							)}
+						/>
+						<Controller
+							name="statusWindowThreshold"
+							control={control}
+							render={({ field, fieldState }) => (
+								<TextField
+									value={field.value ?? ""}
+									onChange={(e) => {
+										const val = e.target.value;
+										field.onChange(val === "" ? undefined : Number(val));
+									}}
+									onBlur={field.onBlur}
+									type="number"
+									fieldLabel={t("pages.createMonitor.form.incidents.option.percentage.label")}
+									fullWidth
+									error={!!fieldState.error}
+									helperText={fieldState.error?.message ?? ""}
+								/>
+							)}
+						/>
+					</Stack>
+				}
+			/>
+
 			{/* Notifications ConfigBox */}
 			<ConfigBox
 				title={t("pages.createMonitor.form.notifications.title")}

client/src/Validation/monitor.ts

@@ -9,11 +9,11 @@ const baseSchema = z.object({
 	interval: z.number().min(15000, "Interval must be at least 15 seconds"),
 	notifications: z.array(z.string()),
 	statusWindowSize: z
-		.number()
+		.number({ message: "Status window size is required" })
 		.min(1, "Status window size must be at least 1")
-		.max(20, "Status window size must be at most 20"),
+		.max(25, "Status window size must be at most 25"),
 	statusWindowThreshold: z
-		.number()
+		.number({ message: "Threshold percentage is required" })
 		.min(1, "Incident percentage must be at least 1")
 		.max(100, "Incident percentage must be at most 100"),
 });

client/src/locales/en.json

@@ -284,6 +284,18 @@
 						}
 					}
 				},
+				"incidents": {
+					"title": "Incidents",
+					"description": "A sliding window is used to determine when a monitor goes down. The status of a monitor will only change when the percentage of checks in the sliding window meet the specified value.",
+					"option": {
+						"checks": {
+							"label": "Number of checks in sliding window"
+						},
+						"percentage": {
+							"label": "What percentage of checks in the sliding window fail/succeed before monitor status changes?"
+						}
+					}
+				},
 				"notifications": {
 					"title": "Notifications",
 					"description": "Select the notification channels you want to use"