Addition of incident tab in creation and config page which is same.

client/src/Pages/Infrastructure/Create/hooks/useInfrastructureMonitorForm.jsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useCallback } from "react";
 const useInfrastructureMonitorForm = () => {
 	const [infrastructureMonitor, setInfrastructureMonitor] = useState({
 		url: "",
@@ -6,6 +6,8 @@ const useInfrastructureMonitorForm = () => {
 		notifications: [],
 		notify_email: false,
 		interval: 0.25,
+		statusWindowSize: 5,
+		statusWindowThreshold: 60,
 		cpu: false,
 		usage_cpu: "",
 		memory: false,
@@ -29,9 +31,10 @@ const useInfrastructureMonitorForm = () => {
 			[event.target.name]: event.target.checked,
 		});
 	};
-	const initializeInfrastructureMonitorForCreate = (globalSettings) => {
+	const initializeInfrastructureMonitorForCreate = useCallback((globalSettings) => {
 		const gt = globalSettings?.data?.settings?.globalThresholds || {};
-		setInfrastructureMonitor({
+		setInfrastructureMonitor((prev) => ({
+			...prev,
 			url: "",
 			name: "",
 			notifications: [],
@@ -45,17 +48,20 @@ const useInfrastructureMonitorForm = () => {
 			temperature: gt.temperature !== undefined,
 			usage_temperature: gt.temperature !== undefined ? gt.temperature.toString() : "",
 			secret: "",
-		});
-	};
+		}));
+	}, []);
 
-	const initializeInfrastructureMonitorForUpdate = (monitor) => {
+	const initializeInfrastructureMonitorForUpdate = useCallback((monitor) => {
 		const MS_PER_MINUTE = 60000;
 		const { thresholds = {} } = monitor;
-		setInfrastructureMonitor({
+		setInfrastructureMonitor((prev) => ({
+			...prev,
 			url: monitor.url.replace(/^https?:\/\//, ""),
 			name: monitor.name || "",
 			notifications: monitor.notifications || [],
 			interval: monitor.interval / MS_PER_MINUTE,
+			statusWindowSize: monitor.statusWindowSize,
+			statusWindowThreshold: monitor.statusWindowThreshold,
 			cpu: thresholds.usage_cpu !== undefined,
 			usage_cpu:
 				thresholds.usage_cpu !== undefined ? (thresholds.usage_cpu * 100).toString() : "",
@@ -75,8 +81,8 @@ const useInfrastructureMonitorForm = () => {
 					? (thresholds.usage_temperature * 100).toString()
 					: "",
 			secret: monitor.secret || "",
-		});
-	};
+		}));
+	}, []);
 	return {
 		infrastructureMonitor,
 		setInfrastructureMonitor,

client/src/Pages/Infrastructure/Create/hooks/useInfrastructureSubmit.jsx

@@ -12,6 +12,8 @@ const useInfrastructureSubmit = () => {
 					? infrastructureMonitor.url
 					: infrastructureMonitor.name,
 			interval: infrastructureMonitor.interval * MS_PER_MINUTE,
+			statusWindowSize: infrastructureMonitor.statusWindowSize,
+			statusWindowThreshold: infrastructureMonitor.statusWindowThreshold,
 			cpu: infrastructureMonitor.cpu,
 			...(infrastructureMonitor.cpu
 				? { usage_cpu: infrastructureMonitor.usage_cpu }

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

@@ -86,7 +86,7 @@ const CreateInfrastructureMonitor = () => {
 			setHttps(monitor.url.startsWith("https"));
 			initializeInfrastructureMonitorForUpdate(monitor);
 		}
-	}, [isCreate, monitor, globalSettings, globalSettingsLoading]);
+	}, [isCreate, monitor, globalSettings, globalSettingsLoading, initializeInfrastructureMonitorForCreate, initializeInfrastructureMonitorForUpdate]);
 
 	// Handlers
 	const onSubmit = async (event) => {
@@ -281,6 +281,39 @@ const CreateInfrastructureMonitor = () => {
 						setNotifications={infrastructureMonitor.notifications}
 					/>
 				</ConfigBox>
+				<ConfigBox>
+					<Box>
+						<Typography
+							component="h2"
+							variant="h2"
+						>
+							{t("createMonitorPage.incidentConfigTitle")}
+						</Typography>
+						<Typography component="p">
+							{t("createMonitorPage.incidentConfigDescription")}
+						</Typography>
+					</Box>
+					<Stack gap={theme.spacing(20)}>
+						<TextInput
+							name="statusWindowSize"
+							label={t("createMonitorPage.incidentConfigStatusWindowLabel")}
+							type="number"
+							value={infrastructureMonitor.statusWindowSize}
+							onChange={onChange}
+							error={errors["statusWindowSize"] ? true : false}
+							helperText={errors["statusWindowSize"]}
+						/>
+						<TextInput
+							name="statusWindowThreshold"
+							label={t("createMonitorPage.incidentConfigStatusWindowThresholdLabel")}
+							type="number"
+							value={infrastructureMonitor.statusWindowThreshold}
+							onChange={onChange}
+							error={errors["statusWindowThreshold"] ? true : false}
+							helperText={errors["statusWindowThreshold"]}
+						/>
+					</Stack>
+				</ConfigBox>
 				<CustomAlertsSection
 					errors={errors}
 					onChange={onChange}

client/src/Validation/validation.js

@@ -437,6 +437,16 @@ const infrastructureMonitorValidation = joi.object({
 		"number.base": "Frequency must be a number.",
 		"any.required": "Frequency is required.",
 	}),
+	statusWindowSize: joi.number().min(1).max(20).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 cannot exceed 20.",
+	}),
+	statusWindowThreshold: joi.number().min(1).max(100).messages({
+		"number.base": "Status window threshold must be a number.",
+		"number.min": "Status window threshold must be at least 1%.",
+		"number.max": "Status window threshold cannot exceed 100%.",
+	}),
 	notifications: joi.array().items(joi.string()),
 });