refactor create infraestructure monitor page

client/src/Pages/Infrastructure/Create/Components/CustomAlertsSection.jsx

@@ -0,0 +1,87 @@
+import ConfigBox from "../../../../Components/ConfigBox";
+import { Box, Stack, Typography } from "@mui/material";
+import { CustomThreshold } from "../Components/CustomThreshold";
+import { capitalizeFirstLetter } from "../../../../Utils/stringUtils";
+import { useTheme } from "@emotion/react";
+import { useTranslation } from "react-i18next";
+import PropTypes from "prop-types";
+const CustomAlertsSection = ({
+	errors,
+	onChange,
+	infrastructureMonitor,
+	handleCheckboxChange,
+}) => {
+	const theme = useTheme();
+	const { t } = useTranslation();
+
+	const METRICS = ["cpu", "memory", "disk", "temperature"];
+	const METRIC_PREFIX = "usage_";
+	const hasAlertError = (errors) => {
+		return Object.keys(errors).filter((k) => k.startsWith(METRIC_PREFIX)).length > 0;
+	};
+	const getAlertError = (errors) => {
+		const errorKey = Object.keys(errors).find((key) => key.startsWith(METRIC_PREFIX));
+		return errorKey ? errors[errorKey] : null;
+	};
+	return (
+		<ConfigBox>
+			<Box>
+				<Typography
+					component="h2"
+					variant="h2"
+				>
+					{t("infrastructureCustomizeAlerts")}
+				</Typography>
+				<Typography component="p">
+					{t("infrastructureAlertNotificationDescription")}
+				</Typography>
+			</Box>
+			<Stack gap={theme.spacing(6)}>
+				{METRICS.map((metric) => {
+					return (
+						<CustomThreshold
+							key={metric}
+							infrastructureMonitor={infrastructureMonitor}
+							errors={errors}
+							checkboxId={metric}
+							checkboxName={metric}
+							checkboxLabel={
+								metric !== "cpu" ? capitalizeFirstLetter(metric) : metric.toUpperCase()
+							}
+							onCheckboxChange={handleCheckboxChange}
+							isChecked={infrastructureMonitor[metric]}
+							fieldId={METRIC_PREFIX + metric}
+							fieldName={METRIC_PREFIX + metric}
+							fieldValue={String(infrastructureMonitor[METRIC_PREFIX + metric])}
+							onFieldChange={onChange}
+							alertUnit={metric == "temperature" ? "°C" : "%"}
+						/>
+					);
+				})}
+
+				{hasAlertError(errors) && (
+					<Typography
+						component="span"
+						className="input-error"
+						color={theme.palette.error.main}
+						mt={theme.spacing(2)}
+						sx={{
+							opacity: 0.8,
+						}}
+					>
+						{getAlertError(errors)}
+					</Typography>
+				)}
+			</Stack>
+		</ConfigBox>
+	);
+};
+
+CustomAlertsSection.propTypes = {
+	errors: PropTypes.object.isRequired,
+	onChange: PropTypes.func.isRequired,
+	infrastructureMonitor: PropTypes.object.isRequired,
+	handleCheckboxChange: PropTypes.func.isRequired,
+};
+
+export default CustomAlertsSection;

client/src/Pages/Infrastructure/Create/Components/MonitorActionButtons.jsx

@@ -0,0 +1,78 @@
+import { useState } from "react";
+import { Box, Button } from "@mui/material";
+import { useTheme } from "@emotion/react";
+import { useTranslation } from "react-i18next";
+import PauseCircleOutlineIcon from "@mui/icons-material/PauseCircleOutline";
+import PlayCircleOutlineRoundedIcon from "@mui/icons-material/PlayCircleOutlineRounded";
+import Dialog from "../../../../Components/Dialog";
+import PropTypes from "prop-types";
+
+const MonitorActionButtons = ({ monitor, isBusy, handlePause, handleRemove }) => {
+	const theme = useTheme();
+	const { t } = useTranslation();
+	const [isOpen, setIsOpen] = useState(false);
+
+	return (
+		<Box
+			alignSelf="flex-end"
+			ml="auto"
+		>
+			<Button
+				onClick={handlePause}
+				loading={isBusy}
+				variant="contained"
+				color="secondary"
+				sx={{
+					pl: theme.spacing(4),
+					pr: theme.spacing(6),
+					"& svg": {
+						mr: theme.spacing(2),
+						"& path": {
+							stroke: theme.palette.primary.contrastTextTertiary,
+							strokeWidth: 0.1,
+						},
+					},
+				}}
+			>
+				{monitor?.isActive ? (
+					<>
+						<PauseCircleOutlineIcon />
+						{t("pause")}
+					</>
+				) : (
+					<>
+						<PlayCircleOutlineRoundedIcon />
+						{t("resume")}
+					</>
+				)}
+			</Button>
+			<Button
+				loading={isBusy}
+				variant="contained"
+				color="error"
+				onClick={() => setIsOpen(true)}
+				sx={{ ml: theme.spacing(6) }}
+			>
+				{t("remove")}
+			</Button>
+			<Dialog
+				open={isOpen}
+				theme={theme}
+				title={t("deleteDialogTitle")}
+				description={t("deleteDialogDescription")}
+				onCancel={() => setIsOpen(false)}
+				confirmationButtonLabel={t("delete")}
+				onConfirm={handleRemove}
+			/>
+		</Box>
+	);
+};
+
+MonitorActionButtons.propTypes = {
+	monitor: PropTypes.object.isRequired,
+	isBusy: PropTypes.bool.isRequired,
+	handlePause: PropTypes.func.isRequired,
+	handleRemove: PropTypes.func.isRequired,
+};
+
+export default MonitorActionButtons;

client/src/Pages/Infrastructure/Create/Components/MonitorStatusHeader.jsx

@@ -0,0 +1,73 @@
+import { Box, Stack, Tooltip, Typography } from "@mui/material";
+import { useMonitorUtils } from "../../../../Hooks/useMonitorUtils";
+import { useTheme } from "@emotion/react";
+import { useTranslation } from "react-i18next";
+import PulseDot from "../../../../Components/Animated/PulseDot";
+import PropTypes from "prop-types";
+const MonitorStatusHeader = ({ monitor, infrastructureMonitor }) => {
+	const theme = useTheme();
+	const { t } = useTranslation();
+	const { statusColor, pagespeedStatusMsg, determineState } = useMonitorUtils();
+	return (
+		<Stack
+			direction="row"
+			alignItems="center"
+			height="fit-content"
+			gap={theme.spacing(2)}
+		>
+			<Tooltip
+				title={pagespeedStatusMsg[determineState(monitor)]}
+				disableInteractive
+				slotProps={{
+					popper: {
+						modifiers: [
+							{
+								name: "offset",
+								options: { offset: [0, -8] },
+							},
+						],
+					},
+				}}
+			>
+				<Box>
+					<PulseDot color={statusColor[determineState(monitor)]} />
+				</Box>
+			</Tooltip>
+			<Typography
+				component="h2"
+				variant="monitorUrl"
+			>
+				{infrastructureMonitor.url?.replace(/^https?:\/\//, "") || "..."}
+			</Typography>
+			<Typography
+				position="relative"
+				variant="body2"
+				ml={theme.spacing(6)}
+				mt={theme.spacing(1)}
+				sx={{
+					"&:before": {
+						position: "absolute",
+						content: `""`,
+						width: theme.spacing(2),
+						height: theme.spacing(2),
+						borderRadius: "50%",
+						backgroundColor: theme.palette.primary.contrastTextTertiary,
+						opacity: 0.8,
+						left: theme.spacing(-5),
+						top: "50%",
+						transform: "translateY(-50%)",
+					},
+				}}
+			>
+				{t("editing")}
+			</Typography>
+		</Stack>
+	);
+};
+
+MonitorStatusHeader.propTypes = {
+	monitor: PropTypes.object.isRequired,
+	infrastructureMonitor: PropTypes.object.isRequired,
+};
+
+export default MonitorStatusHeader;

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

@@ -0,0 +1,90 @@
+import { useState } from "react";
+const useInfrastructureMonitorForm = () => {
+	const [infrastructureMonitor, setInfrastructureMonitor] = useState({
+		url: "",
+		name: "",
+		notifications: [],
+		notify_email: false,
+		interval: 0.25,
+		cpu: false,
+		usage_cpu: "",
+		memory: false,
+		usage_memory: "",
+		disk: false,
+		usage_disk: "",
+		temperature: false,
+		usage_temperature: "",
+		secret: "",
+	});
+
+	const onChangeForm = (name, value) => {
+		setInfrastructureMonitor({
+			...infrastructureMonitor,
+			[name]: value,
+		});
+	};
+	const handleCheckboxChange = (event) => {
+		setInfrastructureMonitor({
+			...infrastructureMonitor,
+			[event.target.name]: event.target.checked,
+		});
+	};
+	const initializeInfrastructureMonitorForCreate = (globalSettings) => {
+		const gt = globalSettings?.data?.settings?.globalThresholds || {};
+		setInfrastructureMonitor({
+			url: "",
+			name: "",
+			notifications: [],
+			interval: 0.25,
+			cpu: gt.cpu !== undefined,
+			usage_cpu: gt.cpu !== undefined ? gt.cpu.toString() : "",
+			memory: gt.memory !== undefined,
+			usage_memory: gt.memory !== undefined ? gt.memory.toString() : "",
+			disk: gt.disk !== undefined,
+			usage_disk: gt.disk !== undefined ? gt.disk.toString() : "",
+			temperature: gt.temperature !== undefined,
+			usage_temperature: gt.temperature !== undefined ? gt.temperature.toString() : "",
+			secret: "",
+		});
+	};
+
+	const initializeInfrastructureMonitorForUpdate = (monitor) => {
+		const MS_PER_MINUTE = 60000;
+		const { thresholds = {} } = monitor;
+		setInfrastructureMonitor({
+			url: monitor.url.replace(/^https?:\/\//, ""),
+			name: monitor.name || "",
+			notifications: monitor.notifications || [],
+			interval: monitor.interval / MS_PER_MINUTE,
+			cpu: thresholds.usage_cpu !== undefined,
+			usage_cpu:
+				thresholds.usage_cpu !== undefined ? (thresholds.usage_cpu * 100).toString() : "",
+			memory: thresholds.usage_memory !== undefined,
+			usage_memory:
+				thresholds.usage_memory !== undefined
+					? (thresholds.usage_memory * 100).toString()
+					: "",
+			disk: thresholds.usage_disk !== undefined,
+			usage_disk:
+				thresholds.usage_disk !== undefined
+					? (thresholds.usage_disk * 100).toString()
+					: "",
+			temperature: thresholds.usage_temperature !== undefined,
+			usage_temperature:
+				thresholds.usage_temperature !== undefined
+					? (thresholds.usage_temperature * 100).toString()
+					: "",
+			secret: monitor.secret || "",
+		});
+	};
+	return {
+		infrastructureMonitor,
+		setInfrastructureMonitor,
+		onChangeForm,
+		handleCheckboxChange,
+		initializeInfrastructureMonitorForCreate,
+		initializeInfrastructureMonitorForUpdate,
+	};
+};
+
+export default useInfrastructureMonitorForm;

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

@@ -0,0 +1,80 @@
+import { useCreateMonitor, useUpdateMonitor } from "../../../../Hooks/monitorHooks";
+const useInfrastructureSubmit = () => {
+	const [createMonitor, isCreating] = useCreateMonitor();
+	const [updateMonitor, isUpdating] = useUpdateMonitor();
+	const buildForm = (infrastructureMonitor, https) => {
+		const MS_PER_MINUTE = 60000;
+
+		let form = {
+			url: `http${https ? "s" : ""}://` + infrastructureMonitor.url,
+			name:
+				infrastructureMonitor.name === ""
+					? infrastructureMonitor.url
+					: infrastructureMonitor.name,
+			interval: infrastructureMonitor.interval * MS_PER_MINUTE,
+			cpu: infrastructureMonitor.cpu,
+			...(infrastructureMonitor.cpu
+				? { usage_cpu: infrastructureMonitor.usage_cpu }
+				: {}),
+			memory: infrastructureMonitor.memory,
+			...(infrastructureMonitor.memory
+				? { usage_memory: infrastructureMonitor.usage_memory }
+				: {}),
+			disk: infrastructureMonitor.disk,
+			...(infrastructureMonitor.disk
+				? { usage_disk: infrastructureMonitor.usage_disk }
+				: {}),
+			temperature: infrastructureMonitor.temperature,
+			...(infrastructureMonitor.temperature
+				? { usage_temperature: infrastructureMonitor.usage_temperature }
+				: {}),
+			secret: infrastructureMonitor.secret,
+		};
+		return form;
+	};
+	const submitInfrastructureForm = async (
+		infrastructureMonitor,
+		form,
+		isCreate,
+		monitorId
+	) => {
+		const {
+			cpu,
+			usage_cpu,
+			memory,
+			usage_memory,
+			disk,
+			usage_disk,
+			temperature,
+			usage_temperature,
+			...rest
+		} = form;
+
+		const thresholds = {
+			...(cpu ? { usage_cpu: usage_cpu / 100 } : {}),
+			...(memory ? { usage_memory: usage_memory / 100 } : {}),
+			...(disk ? { usage_disk: usage_disk / 100 } : {}),
+			...(temperature ? { usage_temperature: usage_temperature / 100 } : {}),
+		};
+
+		const finalForm = {
+			...(isCreate ? {} : { _id: monitorId }),
+			...rest,
+			description: form.name,
+			type: "hardware",
+			notifications: infrastructureMonitor.notifications,
+			thresholds,
+		};
+		// Handle create or update
+		isCreate
+			? await createMonitor({ monitor: finalForm, redirect: "/infrastructure" })
+			: await updateMonitor({ monitor: finalForm, redirect: "/infrastructure" });
+	};
+	return {
+		buildForm,
+		submitInfrastructureForm,
+		isCreating,
+		isUpdating,
+	};
+};
+export default useInfrastructureSubmit;

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

@@ -0,0 +1,37 @@
+import { useState } from "react";
+import { infrastructureMonitorValidation } from "../../../../Validation/validation";
+import { createToast } from "../../../../Utils/toastUtils";
+const useValidateInfrastructureForm = () => {
+	const [errors, setErrors] = useState({});
+
+	const validateField = (name, value) => {
+		const { error } = infrastructureMonitorValidation.validate(
+			{ [name]: value },
+			{ abortEarly: false }
+		);
+		setErrors((prev) => ({
+			...prev,
+			...(error ? { [name]: error.details[0].message } : { [name]: undefined }),
+		}));
+	};
+
+	const validateForm = (form) => {
+		const { error } = infrastructureMonitorValidation.validate(form, {
+			abortEarly: false,
+		});
+
+		if (error) {
+			const newErrors = {};
+			error.details.forEach((err) => {
+				newErrors[err.path[0]] = err.message;
+			});
+			console.log(newErrors);
+			setErrors(newErrors);
+			createToast({ body: "Please check the form for errors." });
+			return error;
+		}
+		return null;
+	};
+	return { errors, validateField, validateForm };
+};
+export default useValidateInfrastructureForm;

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

@@ -1,40 +1,33 @@
 //Components
 import Breadcrumbs from "../../../Components/Breadcrumbs";
 import ConfigBox from "../../../Components/ConfigBox";
-import Dialog from "../../../Components/Dialog";
 import FieldWrapper from "../../../Components/Inputs/FieldWrapper";
 import Link from "../../../Components/Link";
-import PauseCircleOutlineIcon from "@mui/icons-material/PauseCircleOutline";
-import PlayCircleOutlineRoundedIcon from "@mui/icons-material/PlayCircleOutlineRounded";
-import PulseDot from "../../../Components/Animated/PulseDot";
 import Select from "../../../Components/Inputs/Select";
 import TextInput from "../../../Components/Inputs/TextInput";
-import { Box, Stack, Tooltip, Typography, Button, ButtonGroup } from "@mui/material";
-import { CustomThreshold } from "./Components/CustomThreshold";
+import { Box, Stack, Typography, Button, ButtonGroup } from "@mui/material";
 import { HttpAdornment } from "../../../Components/Inputs/TextInput/Adornments";
-import { createToast } from "../../../Utils/toastUtils";
+import MonitorStatusHeader from "./Components/MonitorStatusHeader";
+import MonitorActionButtons from "./Components/MonitorActionButtons";
+import CustomAlertsSection from "./Components/CustomAlertsSection";
 // Utils
 import NotificationsConfig from "../../../Components/NotificationConfig";
-import { capitalizeFirstLetter } from "../../../Utils/stringUtils";
-import { infrastructureMonitorValidation } from "../../../Validation/validation";
 import { useGetNotificationsByTeamId } from "../../../Hooks/useNotifications";
-import { useMonitorUtils } from "../../../Hooks/useMonitorUtils";
 import { useParams } from "react-router-dom";
-import { useSelector } from "react-redux";
 import { useState, useEffect } from "react";
 import { useTheme } from "@emotion/react";
 import { useTranslation } from "react-i18next";
 import {
-	useCreateMonitor,
 	useDeleteMonitor,
 	useFetchGlobalSettings,
 	useFetchHardwareMonitorById,
 	usePauseMonitor,
-	useUpdateMonitor,
 } from "../../../Hooks/monitorHooks";
+import useInfrastructureMonitorForm from "./hooks/useInfrastructureMonitorForm";
+import useValidateInfrastructureForm from "./hooks/useValidateInfrastructureForm";
+import useInfrastructureSubmit from "./hooks/useInfrastructureSubmit";
 
 const CreateInfrastructureMonitor = () => {
-	const { user } = useSelector((state) => state.auth);
 	const { monitorId } = useParams();
 	const isCreate = typeof monitorId === "undefined";
 
@@ -42,39 +35,29 @@ const CreateInfrastructureMonitor = () => {
 	const { t } = useTranslation();
 
 	// State
-	const [errors, setErrors] = useState({});
 	const [https, setHttps] = useState(false);
-	const [isOpen, setIsOpen] = useState(false);
 	const [updateTrigger, setUpdateTrigger] = useState(false);
-	const [infrastructureMonitor, setInfrastructureMonitor] = useState({
-		url: "",
-		name: "",
-		notifications: [],
-		notify_email: false,
-		interval: 0.25,
-		cpu: false,
-		usage_cpu: "",
-		memory: false,
-		usage_memory: "",
-		disk: false,
-		usage_disk: "",
-		temperature: false,
-		usage_temperature: "",
-		secret: "",
-	});
 
 	// Fetch monitor details if editing
-	const { statusColor, pagespeedStatusMsg, determineState } = useMonitorUtils();
 	const [monitor, isLoading] = useFetchHardwareMonitorById({
 		monitorId,
 		updateTrigger,
 	});
-	const [createMonitor, isCreating] = useCreateMonitor();
 	const [deleteMonitor, isDeleting] = useDeleteMonitor();
 	const [globalSettings, globalSettingsLoading] = useFetchGlobalSettings();
 	const [notifications, notificationsAreLoading] = useGetNotificationsByTeamId();
 	const [pauseMonitor, isPausing] = usePauseMonitor();
-	const [updateMonitor, isUpdating] = useUpdateMonitor();
+	const {
+		infrastructureMonitor,
+		setInfrastructureMonitor,
+		onChangeForm,
+		handleCheckboxChange,
+		initializeInfrastructureMonitorForCreate,
+		initializeInfrastructureMonitorForUpdate,
+	} = useInfrastructureMonitorForm();
+	const { errors, validateField, validateForm } = useValidateInfrastructureForm();
+	const { buildForm, submitInfrastructureForm, isCreating, isUpdating } =
+		useInfrastructureSubmit();
 
 	const FREQUENCIES = [
 		{ _id: 0.25, name: t("time.fifteenSeconds") },
@@ -93,157 +76,27 @@ const CreateInfrastructureMonitor = () => {
 					{ name: "Configure", path: `/infrastructure/configure/${monitorId}` },
 				]),
 	];
-	const METRICS = ["cpu", "memory", "disk", "temperature"];
-	const METRIC_PREFIX = "usage_";
-	const MS_PER_MINUTE = 60000;
-
-	const hasAlertError = (errors) => {
-		return Object.keys(errors).filter((k) => k.startsWith(METRIC_PREFIX)).length > 0;
-	};
-
-	const getAlertError = (errors) => {
-		const errorKey = Object.keys(errors).find((key) => key.startsWith(METRIC_PREFIX));
-		return errorKey ? errors[errorKey] : null;
-	};
-
 	// Populate form fields if editing
 	useEffect(() => {
 		if (isCreate) {
 			if (globalSettingsLoading) return;
-
-			const gt = globalSettings?.data?.settings?.globalThresholds || {};
-
 			setHttps(false);
-
-			setInfrastructureMonitor({
-				url: "",
-				name: "",
-				notifications: [],
-				interval: 0.25,
-				cpu: gt.cpu !== undefined,
-				usage_cpu: gt.cpu !== undefined ? gt.cpu.toString() : "",
-				memory: gt.memory !== undefined,
-				usage_memory: gt.memory !== undefined ? gt.memory.toString() : "",
-				disk: gt.disk !== undefined,
-				usage_disk: gt.disk !== undefined ? gt.disk.toString() : "",
-				temperature: gt.temperature !== undefined,
-				usage_temperature: gt.temperature !== undefined ? gt.temperature.toString() : "",
-				secret: "",
-			});
+			initializeInfrastructureMonitorForCreate(globalSettings);
 		} else if (monitor) {
-			const { thresholds = {} } = monitor;
-
 			setHttps(monitor.url.startsWith("https"));
-
-			setInfrastructureMonitor({
-				url: monitor.url.replace(/^https?:\/\//, ""),
-				name: monitor.name || "",
-				notifications: monitor.notifications || [],
-				interval: monitor.interval / MS_PER_MINUTE,
-				cpu: thresholds.usage_cpu !== undefined,
-				usage_cpu:
-					thresholds.usage_cpu !== undefined
-						? (thresholds.usage_cpu * 100).toString()
-						: "",
-				memory: thresholds.usage_memory !== undefined,
-				usage_memory:
-					thresholds.usage_memory !== undefined
-						? (thresholds.usage_memory * 100).toString()
-						: "",
-				disk: thresholds.usage_disk !== undefined,
-				usage_disk:
-					thresholds.usage_disk !== undefined
-						? (thresholds.usage_disk * 100).toString()
-						: "",
-				temperature: thresholds.usage_temperature !== undefined,
-				usage_temperature:
-					thresholds.usage_temperature !== undefined
-						? (thresholds.usage_temperature * 100).toString()
-						: "",
-				secret: monitor.secret || "",
-			});
+			initializeInfrastructureMonitorForUpdate(monitor);
 		}
 	}, [isCreate, monitor, globalSettings, globalSettingsLoading]);
 
 	// Handlers
 	const onSubmit = async (event) => {
 		event.preventDefault();
-
-		// Build the form
-		let form = {
-			url: `http${https ? "s" : ""}://` + infrastructureMonitor.url,
-			name:
-				infrastructureMonitor.name === ""
-					? infrastructureMonitor.url
-					: infrastructureMonitor.name,
-			interval: infrastructureMonitor.interval * MS_PER_MINUTE,
-			cpu: infrastructureMonitor.cpu,
-			...(infrastructureMonitor.cpu
-				? { usage_cpu: infrastructureMonitor.usage_cpu }
-				: {}),
-			memory: infrastructureMonitor.memory,
-			...(infrastructureMonitor.memory
-				? { usage_memory: infrastructureMonitor.usage_memory }
-				: {}),
-			disk: infrastructureMonitor.disk,
-			...(infrastructureMonitor.disk
-				? { usage_disk: infrastructureMonitor.usage_disk }
-				: {}),
-			temperature: infrastructureMonitor.temperature,
-			...(infrastructureMonitor.temperature
-				? { usage_temperature: infrastructureMonitor.usage_temperature }
-				: {}),
-			secret: infrastructureMonitor.secret,
-		};
-
-		const { error } = infrastructureMonitorValidation.validate(form, {
-			abortEarly: false,
-		});
-
+		const form = buildForm(infrastructureMonitor, https);
+		const error = validateForm(form);
 		if (error) {
-			const newErrors = {};
-			error.details.forEach((err) => {
-				newErrors[err.path[0]] = err.message;
-			});
-			console.log(newErrors);
-			setErrors(newErrors);
-			createToast({ body: "Please check the form for errors." });
 			return;
 		}
-
-		// Build the thresholds for the form
-		const {
-			cpu,
-			usage_cpu,
-			memory,
-			usage_memory,
-			disk,
-			usage_disk,
-			temperature,
-			usage_temperature,
-			...rest
-		} = form;
-
-		const thresholds = {
-			...(cpu ? { usage_cpu: usage_cpu / 100 } : {}),
-			...(memory ? { usage_memory: usage_memory / 100 } : {}),
-			...(disk ? { usage_disk: usage_disk / 100 } : {}),
-			...(temperature ? { usage_temperature: usage_temperature / 100 } : {}),
-		};
-
-		form = {
-			...(isCreate ? {} : { _id: monitorId }),
-			...rest,
-			description: form.name,
-			type: "hardware",
-			notifications: infrastructureMonitor.notifications,
-			thresholds,
-		};
-
-		// Handle create or update
-		isCreate
-			? await createMonitor({ monitor: form, redirect: "/infrastructure" })
-			: await updateMonitor({ monitor: form, redirect: "/infrastructure" });
+		submitInfrastructureForm(infrastructureMonitor, form, isCreate, monitorId);
 	};
 
 	const triggerUpdate = () => {
@@ -252,28 +105,8 @@ const CreateInfrastructureMonitor = () => {
 
 	const onChange = (event) => {
 		const { value, name } = event.target;
-		setInfrastructureMonitor({
-			...infrastructureMonitor,
-			[name]: value,
-		});
-
-		const { error } = infrastructureMonitorValidation.validate(
-			{ [name]: value },
-			{ abortEarly: false }
-		);
-		setErrors((prev) => ({
-			...prev,
-			...(error ? { [name]: error.details[0].message } : { [name]: undefined }),
-		}));
-	};
-
-	const handleCheckboxChange = (event) => {
-		const { name } = event.target;
-		const { checked } = event.target;
-		setInfrastructureMonitor({
-			...infrastructureMonitor,
-			[name]: checked,
-		});
+		onChangeForm(name, value);
+		validateField(name, value);
 	};
 
 	const handlePause = async () => {
@@ -336,105 +169,19 @@ const CreateInfrastructureMonitor = () => {
 							)}
 						</Typography>
 						{!isCreate && (
-							<Stack
-								direction="row"
-								alignItems="center"
-								height="fit-content"
-								gap={theme.spacing(2)}
-							>
-								<Tooltip
-									title={pagespeedStatusMsg[determineState(monitor)]}
-									disableInteractive
-									slotProps={{
-										popper: {
-											modifiers: [
-												{
-													name: "offset",
-													options: { offset: [0, -8] },
-												},
-											],
-										},
-									}}
-								>
-									<Box>
-										<PulseDot color={statusColor[determineState(monitor)]} />
-									</Box>
-								</Tooltip>
-								<Typography
-									component="h2"
-									variant="monitorUrl"
-								>
-									{infrastructureMonitor.url?.replace(/^https?:\/\//, "") || "..."}
-								</Typography>
-								<Typography
-									position="relative"
-									variant="body2"
-									ml={theme.spacing(6)}
-									mt={theme.spacing(1)}
-									sx={{
-										"&:before": {
-											position: "absolute",
-											content: `""`,
-											width: theme.spacing(2),
-											height: theme.spacing(2),
-											borderRadius: "50%",
-											backgroundColor: theme.palette.primary.contrastTextTertiary,
-											opacity: 0.8,
-											left: theme.spacing(-5),
-											top: "50%",
-											transform: "translateY(-50%)",
-										},
-									}}
-								>
-									{t("editing")}
-								</Typography>
-							</Stack>
+							<MonitorStatusHeader
+								monitor={monitor}
+								infrastructureMonitor={infrastructureMonitor}
+							/>
 						)}
 					</Box>
 					{!isCreate && (
-						<Box
-							alignSelf="flex-end"
-							ml="auto"
-						>
-							<Button
-								onClick={handlePause}
-								loading={isBusy}
-								variant="contained"
-								color="secondary"
-								sx={{
-									pl: theme.spacing(4),
-									pr: theme.spacing(6),
-									"& svg": {
-										mr: theme.spacing(2),
-										"& path": {
-											stroke: theme.palette.primary.contrastTextTertiary,
-											strokeWidth: 0.1,
-										},
-									},
-								}}
-							>
-								{monitor?.isActive ? (
-									<>
-										<PauseCircleOutlineIcon />
-										{t("pause")}
-									</>
-								) : (
-									<>
-										<PlayCircleOutlineRoundedIcon />
-										{t("resume")}
-									</>
-								)}
-							</Button>
-							<Button
-								loading={isBusy}
-								variant="contained"
-								color="error"
-								onClick={() => setIsOpen(true)}
-								sx={{ ml: theme.spacing(6) }}
-							>
-								{t("remove")}
-							</Button>
-						</Box>
+						<MonitorActionButtons
+							monitor={monitor}
+							isBusy={isBusy}
+							handlePause={handlePause}
+							handleRemove={handleRemove}
+						/>
 					)}
 				</Stack>
 				<ConfigBox>
@@ -534,58 +281,12 @@ const CreateInfrastructureMonitor = () => {
 						setNotifications={infrastructureMonitor.notifications}
 					/>
 				</ConfigBox>
-				<ConfigBox>
-					<Box>
-						<Typography
-							component="h2"
-							variant="h2"
-						>
-							{t("infrastructureCustomizeAlerts")}
-						</Typography>
-						<Typography component="p">
-							{t("infrastructureAlertNotificationDescription")}
-						</Typography>
-					</Box>
-					<Stack gap={theme.spacing(6)}>
-						{METRICS.map((metric) => {
-							return (
-								<CustomThreshold
-									key={metric}
-									infrastructureMonitor={infrastructureMonitor}
-									errors={errors}
-									checkboxId={metric}
-									checkboxName={metric}
-									checkboxLabel={
-										metric !== "cpu"
-											? capitalizeFirstLetter(metric)
-											: metric.toUpperCase()
-									}
-									onCheckboxChange={handleCheckboxChange}
-									isChecked={infrastructureMonitor[metric]}
-									fieldId={METRIC_PREFIX + metric}
-									fieldName={METRIC_PREFIX + metric}
-									fieldValue={String(infrastructureMonitor[METRIC_PREFIX + metric])}
-									onFieldChange={onChange}
-									alertUnit={metric == "temperature" ? "°C" : "%"}
-								/>
-							);
-						})}
-						{/* Error text */}
-						{hasAlertError(errors) && (
-							<Typography
-								component="span"
-								className="input-error"
-								color={theme.palette.error.main}
-								mt={theme.spacing(2)}
-								sx={{
-									opacity: 0.8,
-								}}
-							>
-								{getAlertError(errors)}
-							</Typography>
-						)}
-					</Stack>
-				</ConfigBox>
+				<CustomAlertsSection
+					errors={errors}
+					onChange={onChange}
+					infrastructureMonitor={infrastructureMonitor}
+					handleCheckboxChange={handleCheckboxChange}
+				/>
 				<ConfigBox>
 					<Box>
 						<Typography
@@ -620,17 +321,6 @@ const CreateInfrastructureMonitor = () => {
 					</Button>
 				</Stack>
 			</Stack>
-			{!isCreate && (
-				<Dialog
-					open={isOpen}
-					theme={theme}
-					title={t("deleteDialogTitle")}
-					description={t("deleteDialogDescription")}
-					onCancel={() => setIsOpen(false)}
-					confirmationButtonLabel={t("delete")}
-					onConfirm={handleRemove}
-				/>
-			)}
 		</Box>
 	);
 };