add incident config

client/src/Hooks/monitorHooks.js

@@ -369,6 +369,8 @@ const useUpdateMonitor = () => {
 			setIsLoading(true);
 			const updatedFields = {
 				name: monitor.name,
+				statusWindowSize: monitor.statusWindowSize,
+				statusWindowThreshold: monitor.statusWindowThreshold,
 				description: monitor.description,
 				interval: monitor.interval,
 				notifications: monitor.notifications,

client/src/Pages/Uptime/Create/index.jsx

@@ -55,6 +55,8 @@ const UptimeCreate = ({ isClone = false }) => {
 	// States
 	const [monitor, setMonitor] = useState({
 		type: "http",
+		statusWindowSize: 5,
+		statusWindowThreshold: 60,
 		matchMethod: "equal",
 		expectedValue: "",
 		jsonPath: "",
@@ -177,7 +179,10 @@ const UptimeCreate = ({ isClone = false }) => {
 						? `http${https ? "s" : ""}://` + monitor.url
 						: monitor.url,
 				name: monitor.name || monitor.url.substring(0, 50),
+				statusWindowSize: monitor.statusWindowSize,
+				statusWindowThreshold: monitor.statusWindowThreshold,
 				type: monitor.type,
+
 				port:
 					monitor.type === "port" || monitor.type === "game" ? monitor.port : undefined,
 				interval: monitor.interval,
@@ -192,6 +197,8 @@ const UptimeCreate = ({ isClone = false }) => {
 				_id: monitor._id,
 				url: monitor.url,
 				name: monitor.name || monitor.url.substring(0, 50),
+				statusWindowSize: monitor.statusWindowSize,
+				statusWindowThreshold: monitor.statusWindowThreshold,
 				type: monitor.type,
 				matchMethod: monitor.matchMethod,
 				expectedValue: monitor.expectedValue,
@@ -602,6 +609,43 @@ const UptimeCreate = ({ isClone = false }) => {
 						/>
 					</Stack>
 				</ConfigBox>
+				<ConfigBox>
+					<Box>
+						<Typography
+							component="h2"
+							variant="h2"
+						>
+							Incidents
+						</Typography>
+						<Typography component="p">
+							{
+								"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."
+							}
+						</Typography>
+					</Box>
+					<Stack gap={theme.spacing(20)}>
+						<TextInput
+							name="statusWindowSize"
+							label={"How many checks should be in the sliding window?"}
+							type="number"
+							value={monitor.statusWindowSize}
+							onChange={onChange}
+							error={errors["statusWindowSize"] ? true : false}
+							helperText={errors["statusWindowSize"]}
+						/>
+						<TextInput
+							name="statusWindowThreshold"
+							label={
+								"What percentage of checks in the sliding window fail/succeed before monitor status changes?"
+							}
+							type="number"
+							value={monitor.statusWindowThreshold}
+							onChange={onChange}
+							error={errors["statusWindowThreshold"] ? true : false}
+							helperText={errors["statusWindowThreshold"]}
+						/>
+					</Stack>
+				</ConfigBox>
 				<ConfigBox>
 					<Box>
 						<Typography

client/src/Validation/validation.js

@@ -115,6 +115,16 @@ const monitorValidation = joi.object({
 	_id: joi.string(),
 	userId: joi.string(),
 	teamId: joi.string(),
+	statusWindowSize: joi.number().min(1).max(20).default(5).messages({
+		"number.base": "Status window size must be a number.",
+		"number.min": "Status window size must be at least 1.",
+		"number.max": "Status window size must be at most 20.",
+	}),
+	statusWindowThreshold: joi.number().min(1).max(100).default(60).messages({
+		"number.base": "Incident percentage must be a number.",
+		"number.min": "Incident percentage must be at least 1.",
+		"number.max": "Incident percentage must be at most 100.",
+	}),
 	url: joi.when("type", {
 		is: "docker",
 		then: joi