From c9cac59e38ca358e6d9de63f54edb91aec74f72f Mon Sep 17 00:00:00 2001
From: Peter Carl Pardo <peterpardo123@gmail.com>
Date: Fri, 6 Dec 2024 14:41:25 +0800
Subject: [PATCH 01/18] feat: add configure button in infrastructure monitor
 details page

---
 .../Pages/Infrastructure/Details/index.jsx    | 107 ++++++++++++++----
 1 file changed, 86 insertions(+), 21 deletions(-)

diff --git a/Client/src/Pages/Infrastructure/Details/index.jsx b/Client/src/Pages/Infrastructure/Details/index.jsx
index 06fb1296a..6a3860b35 100644
--- a/Client/src/Pages/Infrastructure/Details/index.jsx
+++ b/Client/src/Pages/Infrastructure/Details/index.jsx
@@ -1,7 +1,7 @@
 import { useParams } from "react-router-dom";
 import { useEffect, useState } from "react";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
-import { Stack, Box, Typography } from "@mui/material";
+import { Stack, Box, Typography, Tooltip, Button } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import CustomGauge from "../../../Components/Charts/CustomGauge";
 import AreaChart from "../../../Components/Charts/AreaChart";
@@ -12,7 +12,7 @@ import useUtils from "../../Monitors/utils";
 import { useNavigate } from "react-router-dom";
 import Empty from "./empty";
 import { logger } from "../../../Utils/Logger";
-import { formatDurationRounded, formatDurationSplit } from "../../../Utils/timeUtils";
+import { formatDurationRounded } from "../../../Utils/timeUtils";
 import {
 	TzTick,
 	PercentTick,
@@ -20,6 +20,7 @@ import {
 	TemperatureTooltip,
 } from "../../../Components/Charts/Utils/chartUtils";
 import PropTypes from "prop-types";
+import SettingsIcon from "../../../assets/icons/settings-bold.svg?react";
 
 const BASE_BOX_PADDING_VERTICAL = 4;
 const BASE_BOX_PADDING_HORIZONTAL = 8;
@@ -182,7 +183,7 @@ GaugeBox.propTypes = {
  * Renders the infrastructure details page
  * @returns {React.ReactElement} Infrastructure details page component
  */
-const InfrastructureDetails = () => {
+const InfrastructureDetails = ({ isAdmin }) => {
 	const navigate = useNavigate();
 	const theme = useTheme();
 	const { monitorId } = useParams();
@@ -193,7 +194,7 @@ const InfrastructureDetails = () => {
 	const [monitor, setMonitor] = useState(null);
 	const { authToken } = useSelector((state) => state.auth);
 	const [dateRange, setDateRange] = useState("all");
-	const { statusColor, determineState } = useUtils();
+	const { statusColor, statusMsg, determineState } = useUtils();
 	// These calculations are needed because ResponsiveContainer
 	// doesn't take padding of parent/siblings into account
 	// when calculating height.
@@ -482,26 +483,90 @@ const InfrastructureDetails = () => {
 					<Stack
 						direction="row"
 						gap={theme.spacing(8)}
+						justifyContent="space-between"
+						alignItems="flex-start"
 					>
 						<Box>
-							<PulseDot color={statusColor[determineState(monitor)]} />
+							<Typography
+								component="h1"
+								variant="h1"
+							>
+								{monitor.name}
+							</Typography>
+							<Stack
+								direction="row"
+								alignItems="center"
+								height="fit-content"
+								gap={theme.spacing(2)}
+							>
+								<Tooltip
+									title={statusMsg[determineState(monitor)]}
+									disableInteractive
+									slotProps={{
+										popper: {
+											modifiers: [
+												{
+													name: "offset",
+													options: {
+														offset: [0, -8],
+													},
+												},
+											],
+										},
+									}}
+								>
+									<Box>
+										<PulseDot color={statusColor[determineState(monitor)]} />
+									</Box>
+								</Tooltip>
+								<Typography
+									component="h2"
+									variant="h2"
+								>
+									{monitor.url?.replace(/^https?:\/\//, "") || "..."}
+								</Typography>
+								<Typography
+									position="relative"
+									variant="body2"
+									mt={theme.spacing(1)}
+									ml={theme.spacing(6)}
+									sx={{
+										"&:before": {
+											position: "absolute",
+											content: `""`,
+											width: 4,
+											height: 4,
+											borderRadius: "50%",
+											backgroundColor: theme.palette.text.tertiary,
+											opacity: 0.8,
+											left: -9,
+											top: "50%",
+											transform: "translateY(-50%)",
+										},
+									}}
+								>
+									Checking every {formatDurationRounded(monitor?.interval)}.
+								</Typography>
+							</Stack>
 						</Box>
-						<Typography
-							alignSelf="end"
-							component="h1"
-							variant="h1"
-						>
-							{monitor.name}
-						</Typography>
-						<Typography alignSelf="end">{monitor.url || "..."}</Typography>
-						<Box sx={{ flexGrow: 1 }} />
-						<Typography alignSelf="end">
-							Checking every {formatDurationRounded(monitor?.interval)}
-						</Typography>
-						<Typography alignSelf="end">
-							Last checked {formatDurationSplit(monitor?.lastChecked).time}{" "}
-							{formatDurationSplit(monitor?.lastChecked).format} ago
-						</Typography>
+						{isAdmin && (
+							<Button
+								variant="contained"
+								color="secondary"
+								onClick={() => navigate(`/monitors`)}
+								sx={{
+									px: theme.spacing(5),
+									"& svg": {
+										mr: theme.spacing(3),
+										"& path": {
+											stroke: theme.palette.text.tertiary,
+										},
+									},
+								}}
+							>
+								<SettingsIcon /> Configure
+							</Button>
+						)}
 					</Stack>
 					<Stack
 						direction="row"

From 837594913ac41068f48d6fb808818e9bedaa40d9 Mon Sep 17 00:00:00 2001
From: Peter Carl Pardo <peterpardo123@gmail.com>
Date: Fri, 6 Dec 2024 14:45:43 +0800
Subject: [PATCH 02/18] feat: add configure insfrastructure monitor route and
 component

---
 Client/src/App.jsx                                  | 6 ++++++
 Client/src/Pages/Infrastructure/Configure/index.jsx | 7 +++++++
 2 files changed, 13 insertions(+)
 create mode 100644 Client/src/Pages/Infrastructure/Configure/index.jsx

diff --git a/Client/src/App.jsx b/Client/src/App.jsx
index 82c8203a8..245d8f153 100644
--- a/Client/src/App.jsx
+++ b/Client/src/App.jsx
@@ -41,6 +41,8 @@ import { logger } from "./Utils/Logger"; // Import the logger
 import { networkService } from "./main";
 import { Infrastructure } from "./Pages/Infrastructure";
 import InfrastructureDetails from "./Pages/Infrastructure/Details";
+import ConfigureInfrastructureMonitor from "./Pages/Infrastructure/Configure";
+
 function App() {
 	const AdminCheckedRegister = withAdminCheck(Register);
 	const MonitorsWithAdminProp = withAdminProp(Monitors);
@@ -138,6 +140,10 @@ function App() {
 						path="infrastructure/:monitorId"
 						element={<ProtectedRoute Component={InfrastructureDetailsWithAdminProp} />}
 					/>
+					<Route
+						path="infrastructure/configure/:monitorId"
+						element={<ProtectedRoute Component={ConfigureInfrastructureMonitor} />}
+					/>
 
 					<Route
 						path="incidents/:monitorId?"
diff --git a/Client/src/Pages/Infrastructure/Configure/index.jsx b/Client/src/Pages/Infrastructure/Configure/index.jsx
new file mode 100644
index 000000000..1151331d3
--- /dev/null
+++ b/Client/src/Pages/Infrastructure/Configure/index.jsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const ConfigureInfrastructureMonitor = () => {
+	return <div>Configure Infrastructure Monitor Page</div>;
+};
+
+export default ConfigureInfrastructureMonitor;

From 98ea47bca2e8d03bfddaa30d3eb9c6e7c69aa431 Mon Sep 17 00:00:00 2001
From: Peter Carl Pardo <peterpardo123@gmail.com>
Date: Fri, 6 Dec 2024 15:23:27 +0800
Subject: [PATCH 03/18] feat: update configure button link

---
 Client/src/Pages/Infrastructure/Details/index.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Client/src/Pages/Infrastructure/Details/index.jsx b/Client/src/Pages/Infrastructure/Details/index.jsx
index 6a3860b35..a0069a900 100644
--- a/Client/src/Pages/Infrastructure/Details/index.jsx
+++ b/Client/src/Pages/Infrastructure/Details/index.jsx
@@ -553,7 +553,7 @@ const InfrastructureDetails = ({ isAdmin }) => {
 							<Button
 								variant="contained"
 								color="secondary"
-								onClick={() => navigate(`/monitors`)}
+								onClick={() => navigate(`/infrastructure/configure/${monitorId}`)}
 								sx={{
 									px: theme.spacing(5),
 									"& svg": {

From 519c49fed864b7f7492bbd65a24ce4761d992c2b Mon Sep 17 00:00:00 2001
From: Peter Carl Pardo <peterpardo123@gmail.com>
Date: Fri, 6 Dec 2024 15:23:57 +0800
Subject: [PATCH 04/18] feat: add seletedInfraMonitor state

---
 .../InfrastructureMonitors/infrastructureMonitorsSlice.js      | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/Client/src/Features/InfrastructureMonitors/infrastructureMonitorsSlice.js b/Client/src/Features/InfrastructureMonitors/infrastructureMonitorsSlice.js
index f0282b28b..e472dbea5 100644
--- a/Client/src/Features/InfrastructureMonitors/infrastructureMonitorsSlice.js
+++ b/Client/src/Features/InfrastructureMonitors/infrastructureMonitorsSlice.js
@@ -6,6 +6,7 @@ const initialState = {
 	monitorsSummary: [],
 	success: null,
 	msg: null,
+	selectedInfraMonitor: null,
 };
 
 export const createInfrastructureMonitor = createAsyncThunk(
@@ -304,7 +305,7 @@ const infrastructureMonitorsSlice = createSlice({
 			.addCase(getInfrastructureMonitorById.fulfilled, (state, action) => {
 				state.isLoading = false;
 				state.success = action.payload.success;
-				state.msg = action.payload.msg;
+				state.selectedInfraMonitor = action.payload.data;
 			})
 			.addCase(getInfrastructureMonitorById.rejected, (state, action) => {
 				state.isLoading = false;

From d289d4b613a1df467d3a4c82ed348c74df76a422 Mon Sep 17 00:00:00 2001
From: Peter Carl Pardo <peterpardo123@gmail.com>
Date: Fri, 6 Dec 2024 15:24:40 +0800
Subject: [PATCH 05/18] feat: setup Infrastructure monitor configure page

---
 .../Pages/Infrastructure/Configure/index.jsx  | 412 +++++++++++++++++-
 1 file changed, 410 insertions(+), 2 deletions(-)

diff --git a/Client/src/Pages/Infrastructure/Configure/index.jsx b/Client/src/Pages/Infrastructure/Configure/index.jsx
index 1151331d3..96fe26b2b 100644
--- a/Client/src/Pages/Infrastructure/Configure/index.jsx
+++ b/Client/src/Pages/Infrastructure/Configure/index.jsx
@@ -1,7 +1,415 @@
-import React from "react";
+import { useEffect, useState } from "react";
+import { Box, Stack, Typography } from "@mui/material";
+import LoadingButton from "@mui/lab/LoadingButton";
+import { useSelector, useDispatch } from "react-redux";
+import { infrastructureMonitorValidation } from "../../../Validation/validation";
+import { parseDomainName } from "../../../Utils/monitorUtils";
+import {
+	createInfrastructureMonitor,
+	checkInfrastructureEndpointResolution,
+	getInfrastructureMonitorById,
+} from "../../../Features/InfrastructureMonitors/infrastructureMonitorsSlice";
+import { useNavigate, useParams } from "react-router-dom";
+import { useTheme } from "@emotion/react";
+import { createToast } from "../../../Utils/toastUtils";
+import Link from "../../../Components/Link";
+import { ConfigBox } from "../../Monitors/styled";
+import TextInput from "../../../Components/Inputs/TextInput";
+import Select from "../../../Components/Inputs/Select";
+import Checkbox from "../../../Components/Inputs/Checkbox";
+import Breadcrumbs from "../../../Components/Breadcrumbs";
+import { buildErrors, hasValidationErrors } from "../../../Validation/error";
+import { capitalizeFirstLetter } from "../../../Utils/stringUtils";
+import { CustomThreshold } from "../CreateMonitor/CustomThreshold";
 
 const ConfigureInfrastructureMonitor = () => {
-	return <div>Configure Infrastructure Monitor Page</div>;
+	const [infrastructureMonitor, setInfrastructureMonitor] = useState({
+		url: "",
+		name: "",
+		notifications: [],
+		interval: 0.25,
+		cpu: false,
+		usage_cpu: "",
+		memory: false,
+		usage_memory: "",
+		disk: false,
+		usage_disk: "",
+		temperature: false,
+		usage_temperature: "",
+		secret: "",
+	});
+
+	const MS_PER_MINUTE = 60000;
+	const THRESHOLD_FIELD_PREFIX = "usage_";
+	const HARDWARE_MONITOR_TYPES = ["cpu", "memory", "disk", "temperature"];
+	const { user, authToken } = useSelector((state) => state.auth);
+	const { monitorId } = useParams();
+	const { isLoading, selectedInfraMonitor, msg } = useSelector(
+		(state) => state.infrastructureMonitors
+	);
+	const dispatch = useDispatch();
+	const navigate = useNavigate();
+	const theme = useTheme();
+
+	const idMap = {
+		"notify-email-default": "notification-email",
+	};
+
+	const [errors, setErrors] = useState({});
+
+	const alertErrKeyLen = Object.keys(errors).filter((k) =>
+		k.startsWith(THRESHOLD_FIELD_PREFIX)
+	).length;
+
+	useEffect(() => {
+		dispatch(getInfrastructureMonitorById({ authToken, monitorId }));
+	}, [monitorId, authToken]);
+
+	useEffect(() => {
+		if (msg) navigate("/not-found", { replace: true });
+	}, [msg, navigate]);
+
+	const handleCustomAlertCheckChange = (event) => {
+		const { value, id } = event.target;
+		setInfrastructureMonitor((prev) => {
+			const newState = {
+				[id]: prev[id] == undefined && value == "on" ? true : !prev[id],
+			};
+			return {
+				...prev,
+				...newState,
+				[THRESHOLD_FIELD_PREFIX + id]: newState[id]
+					? prev[THRESHOLD_FIELD_PREFIX + id]
+					: "",
+			};
+		});
+		// Remove the error if unchecked
+		setErrors((prev) => {
+			return buildErrors(prev, [THRESHOLD_FIELD_PREFIX + id]);
+		});
+	};
+
+	const handleBlur = (event, appendID) => {
+		event.preventDefault();
+		const { value, id } = event.target;
+
+		let name = idMap[id] ?? id;
+		if (name === "url" && infrastructureMonitor.name === "") {
+			setInfrastructureMonitor((prev) => ({
+				...prev,
+				name: parseDomainName(value),
+			}));
+		}
+
+		if (id?.startsWith("notify-email-")) return;
+		const { error } = infrastructureMonitorValidation.validate(
+			{ [id ?? appendID]: value },
+			{
+				abortEarly: false,
+			}
+		);
+		setErrors((prev) => {
+			return buildErrors(prev, id ?? appendID, error);
+		});
+	};
+
+	const handleChange = (event, appendedId) => {
+		event.preventDefault();
+		const { value, id } = event.target;
+		let name = appendedId ?? idMap[id] ?? id;
+		if (name.includes("notification-")) {
+			name = name.replace("notification-", "");
+			let hasNotif = infrastructureMonitor.notifications.some(
+				(notification) => notification.type === name
+			);
+			setInfrastructureMonitor((prev) => {
+				const notifs = [...prev.notifications];
+				if (hasNotif) {
+					return {
+						...prev,
+						notifications: notifs.filter((notif) => notif.type !== name),
+					};
+				} else {
+					return {
+						...prev,
+						notifications: [
+							...notifs,
+							name === "email"
+								? { type: name, address: value }
+								: // TODO - phone number
+									{ type: name, phone: value },
+						],
+					};
+				}
+			});
+		} else {
+			setInfrastructureMonitor((prev) => ({
+				...prev,
+				[name]: value,
+			}));
+		}
+	};
+
+	const generatePayload = (form) => {
+		let thresholds = {};
+		Object.keys(form)
+			.filter((k) => k.startsWith(THRESHOLD_FIELD_PREFIX))
+			.map((k) => {
+				if (form[k]) thresholds[k] = form[k] / 100;
+				delete form[k];
+				delete form[k.substring(THRESHOLD_FIELD_PREFIX.length)];
+			});
+
+		form = {
+			...form,
+			description: form.name,
+			teamId: user.teamId,
+			userId: user._id,
+			type: "hardware",
+			notifications: infrastructureMonitor.notifications,
+			thresholds,
+		};
+		return form;
+	};
+	const handleCreateInfrastructureMonitor = async (event) => {
+		event.preventDefault();
+		let form = {
+			...infrastructureMonitor,
+			name:
+				infrastructureMonitor.name === ""
+					? infrastructureMonitor.url
+					: infrastructureMonitor.name,
+			interval: infrastructureMonitor.interval * MS_PER_MINUTE,
+		};
+
+		delete form.notifications;
+		if (hasValidationErrors(form, infrastructureMonitorValidation, setErrors)) {
+			return;
+		} else {
+			const checkEndpointAction = await dispatch(
+				checkInfrastructureEndpointResolution({ authToken, monitorURL: form.url })
+			);
+			if (checkEndpointAction.meta.requestStatus === "rejected") {
+				createToast({
+					body: "The endpoint you entered doesn't resolve. Check the URL again.",
+				});
+				setErrors({ url: "The entered URL is not reachable." });
+				return;
+			}
+			const action = await dispatch(
+				createInfrastructureMonitor({ authToken, monitor: generatePayload(form) })
+			);
+			if (action.meta.requestStatus === "fulfilled") {
+				createToast({ body: "Infrastructure monitor created successfully!" });
+				navigate("/infrastructure");
+			} else {
+				createToast({ body: "Failed to create monitor." });
+			}
+		}
+	};
+
+	//select values
+	const frequencies = [
+		{ _id: 0.25, name: "15 seconds" },
+		{ _id: 0.5, name: "30 seconds" },
+		{ _id: 1, name: "1 minute" },
+		{ _id: 2, name: "2 minutes" },
+		{ _id: 5, name: "5 minutes" },
+		{ _id: 10, name: "10 minutes" },
+	];
+
+	return (
+		<Box className="create-infrastructure-monitor">
+			<Breadcrumbs
+				list={[
+					{ name: "Infrastructure monitors", path: "/infrastructure" },
+					{ name: "details", path: `/infrastructure/${monitorId}` },
+					{ name: "configure", path: `/infrastructure/configure/${monitorId}` },
+				]}
+			/>
+			<Stack
+				component="form"
+				className="create-infrastructure-monitor-form"
+				onSubmit={handleCreateInfrastructureMonitor}
+				noValidate
+				spellCheck="false"
+				gap={theme.spacing(12)}
+				mt={theme.spacing(6)}
+			>
+				<Typography
+					component="h1"
+					variant="h1"
+				>
+					<Typography
+						component="span"
+						fontSize="inherit"
+					>
+						Create your{" "}
+					</Typography>
+					<Typography
+						component="span"
+						variant="h2"
+						fontSize="inherit"
+						fontWeight="inherit"
+					>
+						infrastructure monitor
+					</Typography>
+				</Typography>
+				<ConfigBox>
+					<Box>
+						<Stack gap={theme.spacing(6)}>
+							<Typography component="h2">General settings</Typography>
+							<Typography component="p">
+								Here you can select the URL of the host, together with the friendly name
+								and authorization secret to connect to the server agent.
+							</Typography>
+							<Typography component="p">
+								The server you are monitoring must be running the{" "}
+								<Link
+									level="primary"
+									url="https://github.com/bluewave-labs/checkmate-agent"
+									label="Checkmate Monitoring Agent"
+								/>
+							</Typography>
+						</Stack>
+					</Box>
+					<Stack gap={theme.spacing(15)}>
+						<TextInput
+							type="text"
+							id="url"
+							label="Server URL"
+							placeholder="https://"
+							value={infrastructureMonitor.url}
+							onBlur={handleBlur}
+							onChange={handleChange}
+							error={errors["url"] ? true : false}
+							helperText={errors["url"]}
+						/>
+						<TextInput
+							type="text"
+							id="name"
+							label="Display name"
+							placeholder="Google"
+							isOptional={true}
+							value={infrastructureMonitor.name}
+							onBlur={handleBlur}
+							onChange={handleChange}
+							error={errors["name"]}
+						/>
+						<TextInput
+							type="text"
+							id="secret"
+							label="Authorization secret"
+							value={infrastructureMonitor.secret}
+							onBlur={handleBlur}
+							onChange={handleChange}
+							error={errors["secret"] ? true : false}
+							helperText={errors["secret"]}
+						/>
+					</Stack>
+				</ConfigBox>
+				<ConfigBox>
+					<Box>
+						<Typography component="h2">Incident notifications</Typography>
+						<Typography component="p">
+							When there is an incident, notify users.
+						</Typography>
+					</Box>
+					<Stack gap={theme.spacing(6)}>
+						<Typography component="p">When there is a new incident,</Typography>
+						<Checkbox
+							id="notify-email-default"
+							label={`Notify via email (to ${user.email})`}
+							isChecked={infrastructureMonitor.notifications.some(
+								(notification) => notification.type === "email"
+							)}
+							value={user?.email}
+							onChange={(e) => handleChange(e)}
+							onBlur={handleBlur}
+						/>
+					</Stack>
+				</ConfigBox>
+
+				<ConfigBox>
+					<Box>
+						<Typography component="h2">Customize alerts</Typography>
+						<Typography component="p">
+							Send a notification to user(s) when thresholds exceed a specified
+							percentage.
+						</Typography>
+					</Box>
+					<Stack gap={theme.spacing(6)}>
+						{HARDWARE_MONITOR_TYPES.map((type, idx) => (
+							<CustomThreshold
+								key={idx}
+								checkboxId={type}
+								checkboxLabel={
+									type !== "cpu" ? capitalizeFirstLetter(type) : type.toUpperCase()
+								}
+								onCheckboxChange={handleCustomAlertCheckChange}
+								fieldId={THRESHOLD_FIELD_PREFIX + type}
+								fieldValue={infrastructureMonitor[THRESHOLD_FIELD_PREFIX + type] ?? ""}
+								onFieldChange={handleChange}
+								onFieldBlur={handleBlur}
+								// TODO: need BE, maybe in another PR
+								alertUnit={type == "temperature" ? "°C" : "%"}
+								infrastructureMonitor={infrastructureMonitor}
+								errors={errors}
+							/>
+						))}
+						{alertErrKeyLen > 0 && (
+							<Typography
+								component="span"
+								className="input-error"
+								color={theme.palette.error.main}
+								mt={theme.spacing(2)}
+								sx={{
+									opacity: 0.8,
+								}}
+							>
+								{
+									errors[
+										THRESHOLD_FIELD_PREFIX +
+											HARDWARE_MONITOR_TYPES.filter(
+												(type) => errors[THRESHOLD_FIELD_PREFIX + type]
+											)[0]
+									]
+								}
+							</Typography>
+						)}
+					</Stack>
+				</ConfigBox>
+				<ConfigBox>
+					<Box>
+						<Typography component="h2">Advanced settings</Typography>
+					</Box>
+					<Stack gap={theme.spacing(12)}>
+						<Select
+							id="interval"
+							label="Check frequency"
+							value={infrastructureMonitor.interval || 15}
+							onChange={(e) => handleChange(e, "interval")}
+							onBlur={(e) => handleBlur(e, "interval")}
+							items={frequencies}
+						/>
+					</Stack>
+				</ConfigBox>
+				<Stack
+					direction="row"
+					justifyContent="flex-end"
+				>
+					<LoadingButton
+						variant="contained"
+						color="primary"
+						onClick={handleCreateInfrastructureMonitor}
+						loading={isLoading}
+					>
+						Create infrastructure monitor
+					</LoadingButton>
+				</Stack>
+			</Stack>
+		</Box>
+	);
 };
 
 export default ConfigureInfrastructureMonitor;

From a8d0f78f24ff28ba03ef7ffab1e8620625e5c43b Mon Sep 17 00:00:00 2001
From: Peter Carl Pardo <peterpardo123@gmail.com>
Date: Fri, 6 Dec 2024 15:42:04 +0800
Subject: [PATCH 06/18] feat: autopopulate fields

---
 .../Pages/Infrastructure/Configure/index.jsx  | 386 +++++++++---------
 1 file changed, 188 insertions(+), 198 deletions(-)

diff --git a/Client/src/Pages/Infrastructure/Configure/index.jsx b/Client/src/Pages/Infrastructure/Configure/index.jsx
index 96fe26b2b..4ed81cb07 100644
--- a/Client/src/Pages/Infrastructure/Configure/index.jsx
+++ b/Client/src/Pages/Infrastructure/Configure/index.jsx
@@ -23,22 +23,6 @@ import { capitalizeFirstLetter } from "../../../Utils/stringUtils";
 import { CustomThreshold } from "../CreateMonitor/CustomThreshold";
 
 const ConfigureInfrastructureMonitor = () => {
-	const [infrastructureMonitor, setInfrastructureMonitor] = useState({
-		url: "",
-		name: "",
-		notifications: [],
-		interval: 0.25,
-		cpu: false,
-		usage_cpu: "",
-		memory: false,
-		usage_memory: "",
-		disk: false,
-		usage_disk: "",
-		temperature: false,
-		usage_temperature: "",
-		secret: "",
-	});
-
 	const MS_PER_MINUTE = 60000;
 	const THRESHOLD_FIELD_PREFIX = "usage_";
 	const HARDWARE_MONITOR_TYPES = ["cpu", "memory", "disk", "temperature"];
@@ -47,16 +31,15 @@ const ConfigureInfrastructureMonitor = () => {
 	const { isLoading, selectedInfraMonitor, msg } = useSelector(
 		(state) => state.infrastructureMonitors
 	);
+	const [infrastructureMonitor, setInfrastructureMonitor] = useState(null);
+	const [errors, setErrors] = useState({});
 	const dispatch = useDispatch();
 	const navigate = useNavigate();
 	const theme = useTheme();
-
 	const idMap = {
 		"notify-email-default": "notification-email",
 	};
 
-	const [errors, setErrors] = useState({});
-
 	const alertErrKeyLen = Object.keys(errors).filter((k) =>
 		k.startsWith(THRESHOLD_FIELD_PREFIX)
 	).length;
@@ -69,6 +52,10 @@ const ConfigureInfrastructureMonitor = () => {
 		if (msg) navigate("/not-found", { replace: true });
 	}, [msg, navigate]);
 
+	useEffect(() => {
+		setInfrastructureMonitor(selectedInfraMonitor);
+	}, [selectedInfraMonitor]);
+
 	const handleCustomAlertCheckChange = (event) => {
 		const { value, id } = event.target;
 		setInfrastructureMonitor((prev) => {
@@ -94,7 +81,7 @@ const ConfigureInfrastructureMonitor = () => {
 		const { value, id } = event.target;
 
 		let name = idMap[id] ?? id;
-		if (name === "url" && infrastructureMonitor.name === "") {
+		if (name === "url" && infrastructureMonitor?.name === "") {
 			setInfrastructureMonitor((prev) => ({
 				...prev,
 				name: parseDomainName(value),
@@ -219,196 +206,199 @@ const ConfigureInfrastructureMonitor = () => {
 	];
 
 	return (
-		<Box className="create-infrastructure-monitor">
-			<Breadcrumbs
-				list={[
-					{ name: "Infrastructure monitors", path: "/infrastructure" },
-					{ name: "details", path: `/infrastructure/${monitorId}` },
-					{ name: "configure", path: `/infrastructure/configure/${monitorId}` },
-				]}
-			/>
-			<Stack
-				component="form"
-				className="create-infrastructure-monitor-form"
-				onSubmit={handleCreateInfrastructureMonitor}
-				noValidate
-				spellCheck="false"
-				gap={theme.spacing(12)}
-				mt={theme.spacing(6)}
-			>
-				<Typography
-					component="h1"
-					variant="h1"
+		infrastructureMonitor && (
+			<Box className="create-infrastructure-monitor">
+				<Breadcrumbs
+					list={[
+						{ name: "Infrastructure monitors", path: "/infrastructure" },
+						{ name: "details", path: `/infrastructure/${monitorId}` },
+						{ name: "configure", path: `/infrastructure/configure/${monitorId}` },
+					]}
+				/>
+				<Stack
+					component="form"
+					className="create-infrastructure-monitor-form"
+					onSubmit={handleCreateInfrastructureMonitor}
+					noValidate
+					spellCheck="false"
+					gap={theme.spacing(12)}
+					mt={theme.spacing(6)}
 				>
 					<Typography
-						component="span"
-						fontSize="inherit"
-					>
-						Create your{" "}
-					</Typography>
-					<Typography
-						component="span"
-						variant="h2"
-						fontSize="inherit"
-						fontWeight="inherit"
+						component="h1"
+						variant="h1"
 					>
-						infrastructure monitor
+						<Typography
+							component="span"
+							fontSize="inherit"
+						>
+							Create your{" "}
+						</Typography>
+						<Typography
+							component="span"
+							variant="h2"
+							fontSize="inherit"
+							fontWeight="inherit"
+						>
+							infrastructure monitor
+						</Typography>
 					</Typography>
-				</Typography>
-				<ConfigBox>
-					<Box>
-						<Stack gap={theme.spacing(6)}>
-							<Typography component="h2">General settings</Typography>
+					<ConfigBox>
+						<Box>
+							<Stack gap={theme.spacing(6)}>
+								<Typography component="h2">General settings</Typography>
+								<Typography component="p">
+									Here you can select the URL of the host, together with the friendly name
+									and authorization secret to connect to the server agent.
+								</Typography>
+								<Typography component="p">
+									The server you are monitoring must be running the{" "}
+									<Link
+										level="primary"
+										url="https://github.com/bluewave-labs/checkmate-agent"
+										label="Checkmate Monitoring Agent"
+									/>
+								</Typography>
+							</Stack>
+						</Box>
+						<Stack gap={theme.spacing(15)}>
+							<TextInput
+								type="text"
+								id="url"
+								label="Server URL"
+								placeholder="https://"
+								value={infrastructureMonitor.url}
+								onBlur={handleBlur}
+								onChange={handleChange}
+								error={errors["url"] ? true : false}
+								helperText={errors["url"]}
+								disabled={true}
+							/>
+							<TextInput
+								type="text"
+								id="name"
+								label="Display name"
+								placeholder="Google"
+								isOptional={true}
+								value={infrastructureMonitor.name}
+								onBlur={handleBlur}
+								onChange={handleChange}
+								error={errors["name"]}
+							/>
+							<TextInput
+								type="text"
+								id="secret"
+								label="Authorization secret"
+								value={infrastructureMonitor.secret}
+								onBlur={handleBlur}
+								onChange={handleChange}
+								error={errors["secret"] ? true : false}
+								helperText={errors["secret"]}
+							/>
+						</Stack>
+					</ConfigBox>
+					<ConfigBox>
+						<Box>
+							<Typography component="h2">Incident notifications</Typography>
 							<Typography component="p">
-								Here you can select the URL of the host, together with the friendly name
-								and authorization secret to connect to the server agent.
+								When there is an incident, notify users.
 							</Typography>
+						</Box>
+						<Stack gap={theme.spacing(6)}>
+							<Typography component="p">When there is a new incident,</Typography>
+							<Checkbox
+								id="notify-email-default"
+								label={`Notify via email (to ${user.email})`}
+								isChecked={infrastructureMonitor.notifications.some(
+									(notification) => notification.type === "email"
+								)}
+								value={user?.email}
+								onChange={(e) => handleChange(e)}
+								onBlur={handleBlur}
+							/>
+						</Stack>
+					</ConfigBox>
+
+					<ConfigBox>
+						<Box>
+							<Typography component="h2">Customize alerts</Typography>
 							<Typography component="p">
-								The server you are monitoring must be running the{" "}
-								<Link
-									level="primary"
-									url="https://github.com/bluewave-labs/checkmate-agent"
-									label="Checkmate Monitoring Agent"
-								/>
+								Send a notification to user(s) when thresholds exceed a specified
+								percentage.
 							</Typography>
-						</Stack>
-					</Box>
-					<Stack gap={theme.spacing(15)}>
-						<TextInput
-							type="text"
-							id="url"
-							label="Server URL"
-							placeholder="https://"
-							value={infrastructureMonitor.url}
-							onBlur={handleBlur}
-							onChange={handleChange}
-							error={errors["url"] ? true : false}
-							helperText={errors["url"]}
-						/>
-						<TextInput
-							type="text"
-							id="name"
-							label="Display name"
-							placeholder="Google"
-							isOptional={true}
-							value={infrastructureMonitor.name}
-							onBlur={handleBlur}
-							onChange={handleChange}
-							error={errors["name"]}
-						/>
-						<TextInput
-							type="text"
-							id="secret"
-							label="Authorization secret"
-							value={infrastructureMonitor.secret}
-							onBlur={handleBlur}
-							onChange={handleChange}
-							error={errors["secret"] ? true : false}
-							helperText={errors["secret"]}
-						/>
-					</Stack>
-				</ConfigBox>
-				<ConfigBox>
-					<Box>
-						<Typography component="h2">Incident notifications</Typography>
-						<Typography component="p">
-							When there is an incident, notify users.
-						</Typography>
-					</Box>
-					<Stack gap={theme.spacing(6)}>
-						<Typography component="p">When there is a new incident,</Typography>
-						<Checkbox
-							id="notify-email-default"
-							label={`Notify via email (to ${user.email})`}
-							isChecked={infrastructureMonitor.notifications.some(
-								(notification) => notification.type === "email"
+						</Box>
+						<Stack gap={theme.spacing(6)}>
+							{HARDWARE_MONITOR_TYPES.map((type, idx) => (
+								<CustomThreshold
+									key={idx}
+									checkboxId={type}
+									checkboxLabel={
+										type !== "cpu" ? capitalizeFirstLetter(type) : type.toUpperCase()
+									}
+									onCheckboxChange={handleCustomAlertCheckChange}
+									fieldId={THRESHOLD_FIELD_PREFIX + type}
+									fieldValue={infrastructureMonitor[THRESHOLD_FIELD_PREFIX + type] ?? ""}
+									onFieldChange={handleChange}
+									onFieldBlur={handleBlur}
+									// TODO: need BE, maybe in another PR
+									alertUnit={type == "temperature" ? "°C" : "%"}
+									infrastructureMonitor={infrastructureMonitor}
+									errors={errors}
+								/>
+							))}
+							{alertErrKeyLen > 0 && (
+								<Typography
+									component="span"
+									className="input-error"
+									color={theme.palette.error.main}
+									mt={theme.spacing(2)}
+									sx={{
+										opacity: 0.8,
+									}}
+								>
+									{
+										errors[
+											THRESHOLD_FIELD_PREFIX +
+												HARDWARE_MONITOR_TYPES.filter(
+													(type) => errors[THRESHOLD_FIELD_PREFIX + type]
+												)[0]
+										]
+									}
+								</Typography>
 							)}
-							value={user?.email}
-							onChange={(e) => handleChange(e)}
-							onBlur={handleBlur}
-						/>
-					</Stack>
-				</ConfigBox>
-
-				<ConfigBox>
-					<Box>
-						<Typography component="h2">Customize alerts</Typography>
-						<Typography component="p">
-							Send a notification to user(s) when thresholds exceed a specified
-							percentage.
-						</Typography>
-					</Box>
-					<Stack gap={theme.spacing(6)}>
-						{HARDWARE_MONITOR_TYPES.map((type, idx) => (
-							<CustomThreshold
-								key={idx}
-								checkboxId={type}
-								checkboxLabel={
-									type !== "cpu" ? capitalizeFirstLetter(type) : type.toUpperCase()
-								}
-								onCheckboxChange={handleCustomAlertCheckChange}
-								fieldId={THRESHOLD_FIELD_PREFIX + type}
-								fieldValue={infrastructureMonitor[THRESHOLD_FIELD_PREFIX + type] ?? ""}
-								onFieldChange={handleChange}
-								onFieldBlur={handleBlur}
-								// TODO: need BE, maybe in another PR
-								alertUnit={type == "temperature" ? "°C" : "%"}
-								infrastructureMonitor={infrastructureMonitor}
-								errors={errors}
+						</Stack>
+					</ConfigBox>
+					<ConfigBox>
+						<Box>
+							<Typography component="h2">Advanced settings</Typography>
+						</Box>
+						<Stack gap={theme.spacing(12)}>
+							<Select
+								id="interval"
+								label="Check frequency"
+								value={infrastructureMonitor.interval || 15}
+								onChange={(e) => handleChange(e, "interval")}
+								onBlur={(e) => handleBlur(e, "interval")}
+								items={frequencies}
 							/>
-						))}
-						{alertErrKeyLen > 0 && (
-							<Typography
-								component="span"
-								className="input-error"
-								color={theme.palette.error.main}
-								mt={theme.spacing(2)}
-								sx={{
-									opacity: 0.8,
-								}}
-							>
-								{
-									errors[
-										THRESHOLD_FIELD_PREFIX +
-											HARDWARE_MONITOR_TYPES.filter(
-												(type) => errors[THRESHOLD_FIELD_PREFIX + type]
-											)[0]
-									]
-								}
-							</Typography>
-						)}
-					</Stack>
-				</ConfigBox>
-				<ConfigBox>
-					<Box>
-						<Typography component="h2">Advanced settings</Typography>
-					</Box>
-					<Stack gap={theme.spacing(12)}>
-						<Select
-							id="interval"
-							label="Check frequency"
-							value={infrastructureMonitor.interval || 15}
-							onChange={(e) => handleChange(e, "interval")}
-							onBlur={(e) => handleBlur(e, "interval")}
-							items={frequencies}
-						/>
-					</Stack>
-				</ConfigBox>
-				<Stack
-					direction="row"
-					justifyContent="flex-end"
-				>
-					<LoadingButton
-						variant="contained"
-						color="primary"
-						onClick={handleCreateInfrastructureMonitor}
-						loading={isLoading}
+						</Stack>
+					</ConfigBox>
+					<Stack
+						direction="row"
+						justifyContent="flex-end"
 					>
-						Create infrastructure monitor
-					</LoadingButton>
+						<LoadingButton
+							variant="contained"
+							color="primary"
+							onClick={handleCreateInfrastructureMonitor}
+							loading={isLoading}
+						>
+							Create infrastructure monitor
+						</LoadingButton>
+					</Stack>
 				</Stack>
-			</Stack>
-		</Box>
+			</Box>
+		)
 	);
 };
 

From 88fe82f24e055968de13ce8cece75a24949cc264 Mon Sep 17 00:00:00 2001
From: Peter Carl Pardo <peterpardo123@gmail.com>
Date: Fri, 6 Dec 2024 15:58:37 +0800
Subject: [PATCH 07/18] feat: update page header

---
 .../Pages/Infrastructure/Configure/index.jsx  | 141 +++++++++++++++---
 1 file changed, 122 insertions(+), 19 deletions(-)

diff --git a/Client/src/Pages/Infrastructure/Configure/index.jsx b/Client/src/Pages/Infrastructure/Configure/index.jsx
index 4ed81cb07..5dc44d22e 100644
--- a/Client/src/Pages/Infrastructure/Configure/index.jsx
+++ b/Client/src/Pages/Infrastructure/Configure/index.jsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { Box, Stack, Typography } from "@mui/material";
+import { Box, Stack, Tooltip, Typography } from "@mui/material";
 import LoadingButton from "@mui/lab/LoadingButton";
 import { useSelector, useDispatch } from "react-redux";
 import { infrastructureMonitorValidation } from "../../../Validation/validation";
@@ -21,6 +21,10 @@ import Breadcrumbs from "../../../Components/Breadcrumbs";
 import { buildErrors, hasValidationErrors } from "../../../Validation/error";
 import { capitalizeFirstLetter } from "../../../Utils/stringUtils";
 import { CustomThreshold } from "../CreateMonitor/CustomThreshold";
+import useUtils from "../../Monitors/utils";
+import PulseDot from "../../../Components/Animated/PulseDot";
+import PauseIcon from "../../../assets/icons/pause-icon.svg?react";
+import ResumeIcon from "../../../assets/icons/resume-icon.svg?react";
 
 const ConfigureInfrastructureMonitor = () => {
 	const MS_PER_MINUTE = 60000;
@@ -32,6 +36,7 @@ const ConfigureInfrastructureMonitor = () => {
 		(state) => state.infrastructureMonitors
 	);
 	const [infrastructureMonitor, setInfrastructureMonitor] = useState(null);
+	const { statusColor, statusMsg, determineState } = useUtils();
 	const [errors, setErrors] = useState({});
 	const dispatch = useDispatch();
 	const navigate = useNavigate();
@@ -217,32 +222,130 @@ const ConfigureInfrastructureMonitor = () => {
 				/>
 				<Stack
 					component="form"
-					className="create-infrastructure-monitor-form"
 					onSubmit={handleCreateInfrastructureMonitor}
 					noValidate
 					spellCheck="false"
 					gap={theme.spacing(12)}
 					mt={theme.spacing(6)}
 				>
-					<Typography
-						component="h1"
-						variant="h1"
+					<Stack
+						direction="row"
+						gap={theme.spacing(2)}
 					>
-						<Typography
-							component="span"
-							fontSize="inherit"
-						>
-							Create your{" "}
-						</Typography>
-						<Typography
-							component="span"
-							variant="h2"
-							fontSize="inherit"
-							fontWeight="inherit"
+						<Box>
+							<Typography
+								component="h1"
+								variant="h1"
+							>
+								{infrastructureMonitor.name}
+							</Typography>
+							<Stack
+								direction="row"
+								alignItems="center"
+								height="fit-content"
+								gap={theme.spacing(2)}
+							>
+								<Tooltip
+									title={statusMsg[determineState(infrastructureMonitor)]}
+									disableInteractive
+									slotProps={{
+										popper: {
+											modifiers: [
+												{
+													name: "offset",
+													options: {
+														offset: [0, -8],
+													},
+												},
+											],
+										},
+									}}
+								>
+									<Box>
+										<PulseDot
+											color={statusColor[determineState(infrastructureMonitor)]}
+										/>
+									</Box>
+								</Tooltip>
+								<Typography
+									component="h2"
+									variant="h2"
+								>
+									{infrastructureMonitor.url?.replace(/^https?:\/\//, "") || "..."}
+								</Typography>
+								<Typography
+									position="relative"
+									variant="body2"
+									ml={theme.spacing(6)}
+									mt={theme.spacing(1)}
+									sx={{
+										"&:before": {
+											position: "absolute",
+											content: `""`,
+											width: 4,
+											height: 4,
+											borderRadius: "50%",
+											backgroundColor: theme.palette.text.tertiary,
+											opacity: 0.8,
+											left: -10,
+											top: "50%",
+											transform: "translateY(-50%)",
+										},
+									}}
+								>
+									Editting...
+								</Typography>
+							</Stack>
+						</Box>
+						<Box
+							sx={{
+								alignSelf: "flex-end",
+								ml: "auto",
+							}}
 						>
-							infrastructure monitor
-						</Typography>
-					</Typography>
+							<LoadingButton
+								variant="contained"
+								color="secondary"
+								loading={isLoading}
+								sx={{
+									pl: theme.spacing(4),
+									pr: theme.spacing(6),
+									mr: theme.spacing(6),
+									"& svg": {
+										mr: theme.spacing(2),
+										width: 22,
+										height: 22,
+										"& path": {
+											stroke: theme.palette.text.tertiary,
+											strokeWidth: 1.7,
+										},
+									},
+								}}
+								onClick={() => console.log("handle pause")}
+							>
+								{infrastructureMonitor?.isActive ? (
+									<>
+										<PauseIcon />
+										Pause
+									</>
+								) : (
+									<>
+										<ResumeIcon />
+										Resume
+									</>
+								)}
+							</LoadingButton>
+							<LoadingButton
+								loading={isLoading}
+								variant="contained"
+								color="error"
+								sx={{ px: theme.spacing(8) }}
+								onClick={() => setIsOpen(true)}
+							>
+								Remove
+							</LoadingButton>
+						</Box>
+					</Stack>
 					<ConfigBox>
 						<Box>
 							<Stack gap={theme.spacing(6)}>

From d69ed3dc6e372eb79d24a1719c01f1545640ee81 Mon Sep 17 00:00:00 2001
From: Peter Carl Pardo <peterpardo123@gmail.com>
Date: Fri, 6 Dec 2024 16:02:57 +0800
Subject: [PATCH 08/18] feat: check if infra monitor is successfully fetched

---
 .../InfrastructureMonitors/infrastructureMonitorsSlice.js   | 1 +
 Client/src/Pages/Infrastructure/Configure/index.jsx         | 6 +++---
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/Client/src/Features/InfrastructureMonitors/infrastructureMonitorsSlice.js b/Client/src/Features/InfrastructureMonitors/infrastructureMonitorsSlice.js
index e472dbea5..d5d7a3614 100644
--- a/Client/src/Features/InfrastructureMonitors/infrastructureMonitorsSlice.js
+++ b/Client/src/Features/InfrastructureMonitors/infrastructureMonitorsSlice.js
@@ -305,6 +305,7 @@ const infrastructureMonitorsSlice = createSlice({
 			.addCase(getInfrastructureMonitorById.fulfilled, (state, action) => {
 				state.isLoading = false;
 				state.success = action.payload.success;
+				state.msg = action.payload.msg;
 				state.selectedInfraMonitor = action.payload.data;
 			})
 			.addCase(getInfrastructureMonitorById.rejected, (state, action) => {
diff --git a/Client/src/Pages/Infrastructure/Configure/index.jsx b/Client/src/Pages/Infrastructure/Configure/index.jsx
index 5dc44d22e..94a4e463d 100644
--- a/Client/src/Pages/Infrastructure/Configure/index.jsx
+++ b/Client/src/Pages/Infrastructure/Configure/index.jsx
@@ -32,7 +32,7 @@ const ConfigureInfrastructureMonitor = () => {
 	const HARDWARE_MONITOR_TYPES = ["cpu", "memory", "disk", "temperature"];
 	const { user, authToken } = useSelector((state) => state.auth);
 	const { monitorId } = useParams();
-	const { isLoading, selectedInfraMonitor, msg } = useSelector(
+	const { isLoading, selectedInfraMonitor, success } = useSelector(
 		(state) => state.infrastructureMonitors
 	);
 	const [infrastructureMonitor, setInfrastructureMonitor] = useState(null);
@@ -54,8 +54,8 @@ const ConfigureInfrastructureMonitor = () => {
 	}, [monitorId, authToken]);
 
 	useEffect(() => {
-		if (msg) navigate("/not-found", { replace: true });
-	}, [msg, navigate]);
+		if (!success) navigate("/not-found", { replace: true });
+	}, [success, navigate]);
 
 	useEffect(() => {
 		setInfrastructureMonitor(selectedInfraMonitor);

From 3de91f53b60d8a18d8de2b84feb0d8c491ad8a29 Mon Sep 17 00:00:00 2001
From: Peter Carl Pardo <peterpardo123@gmail.com>
Date: Fri, 6 Dec 2024 23:18:34 +0800
Subject: [PATCH 09/18] feat: set pending state of success to false

---
 .../infrastructureMonitorsSlice.js                       | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/Client/src/Features/InfrastructureMonitors/infrastructureMonitorsSlice.js b/Client/src/Features/InfrastructureMonitors/infrastructureMonitorsSlice.js
index d5d7a3614..1314d6568 100644
--- a/Client/src/Features/InfrastructureMonitors/infrastructureMonitorsSlice.js
+++ b/Client/src/Features/InfrastructureMonitors/infrastructureMonitorsSlice.js
@@ -246,6 +246,7 @@ const infrastructureMonitorsSlice = createSlice({
 
 			.addCase(getInfrastructureMonitorsByTeamId.pending, (state) => {
 				state.isLoading = true;
+				state.success = false;
 			})
 			.addCase(getInfrastructureMonitorsByTeamId.fulfilled, (state, action) => {
 				state.isLoading = false;
@@ -265,6 +266,7 @@ const infrastructureMonitorsSlice = createSlice({
 			// *****************************************************
 			.addCase(createInfrastructureMonitor.pending, (state) => {
 				state.isLoading = true;
+				state.success = false;
 			})
 			.addCase(createInfrastructureMonitor.fulfilled, (state, action) => {
 				state.isLoading = false;
@@ -283,6 +285,7 @@ const infrastructureMonitorsSlice = createSlice({
 			// *****************************************************
 			.addCase(checkInfrastructureEndpointResolution.pending, (state) => {
 				state.isLoading = true;
+				state.success = false;
 			})
 			.addCase(checkInfrastructureEndpointResolution.fulfilled, (state, action) => {
 				state.isLoading = false;
@@ -301,6 +304,7 @@ const infrastructureMonitorsSlice = createSlice({
 			// *****************************************************
 			.addCase(getInfrastructureMonitorById.pending, (state) => {
 				state.isLoading = true;
+				state.success = false;
 			})
 			.addCase(getInfrastructureMonitorById.fulfilled, (state, action) => {
 				state.isLoading = false;
@@ -320,6 +324,7 @@ const infrastructureMonitorsSlice = createSlice({
 			// *****************************************************
 			.addCase(updateInfrastructureMonitor.pending, (state) => {
 				state.isLoading = true;
+				state.success = false;
 			})
 			.addCase(updateInfrastructureMonitor.fulfilled, (state, action) => {
 				state.isLoading = false;
@@ -339,6 +344,7 @@ const infrastructureMonitorsSlice = createSlice({
 			// *****************************************************
 			.addCase(deleteInfrastructureMonitor.pending, (state) => {
 				state.isLoading = true;
+				state.success = false;
 			})
 			.addCase(deleteInfrastructureMonitor.fulfilled, (state, action) => {
 				state.isLoading = false;
@@ -357,6 +363,7 @@ const infrastructureMonitorsSlice = createSlice({
 			// *****************************************************
 			.addCase(deleteInfrastructureMonitorChecksByTeamId.pending, (state) => {
 				state.isLoading = true;
+				state.success = false;
 			})
 			.addCase(deleteInfrastructureMonitorChecksByTeamId.fulfilled, (state, action) => {
 				state.isLoading = false;
@@ -375,6 +382,7 @@ const infrastructureMonitorsSlice = createSlice({
 			// *****************************************************
 			.addCase(pauseInfrastructureMonitor.pending, (state) => {
 				state.isLoading = true;
+				state.success = false;
 			})
 			.addCase(pauseInfrastructureMonitor.fulfilled, (state, action) => {
 				state.isLoading = false;
@@ -393,6 +401,7 @@ const infrastructureMonitorsSlice = createSlice({
 			// *****************************************************
 			.addCase(deleteAllInfrastructureMonitors.pending, (state) => {
 				state.isLoading = true;
+				state.success = false;
 			})
 			.addCase(deleteAllInfrastructureMonitors.fulfilled, (state, action) => {
 				state.isLoading = false;

From eb0014137fa2a51e54d17f398b0e131eb948c17a Mon Sep 17 00:00:00 2001
From: Peter Carl Pardo <peterpardo123@gmail.com>
Date: Fri, 6 Dec 2024 23:18:57 +0800
Subject: [PATCH 10/18] feat: update logic for fetching infra monitor

---
 Client/src/Pages/Infrastructure/Configure/index.jsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/Client/src/Pages/Infrastructure/Configure/index.jsx b/Client/src/Pages/Infrastructure/Configure/index.jsx
index 94a4e463d..b18216b43 100644
--- a/Client/src/Pages/Infrastructure/Configure/index.jsx
+++ b/Client/src/Pages/Infrastructure/Configure/index.jsx
@@ -50,12 +50,14 @@ const ConfigureInfrastructureMonitor = () => {
 	).length;
 
 	useEffect(() => {
-		dispatch(getInfrastructureMonitorById({ authToken, monitorId }));
+		if (!infrastructureMonitor) {
+			dispatch(getInfrastructureMonitorById({ authToken, monitorId }));
+		}
 	}, [monitorId, authToken]);
 
 	useEffect(() => {
-		if (!success) navigate("/not-found", { replace: true });
-	}, [success, navigate]);
+		if (!isLoading && success === false) navigate("/not-found", { replace: true });
+	}, [success, isLoading, navigate]);
 
 	useEffect(() => {
 		setInfrastructureMonitor(selectedInfraMonitor);
@@ -479,7 +481,7 @@ const ConfigureInfrastructureMonitor = () => {
 							<Select
 								id="interval"
 								label="Check frequency"
-								value={infrastructureMonitor.interval || 15}
+								value={infrastructureMonitor.interval / MS_PER_MINUTE || 0.25}
 								onChange={(e) => handleChange(e, "interval")}
 								onBlur={(e) => handleBlur(e, "interval")}
 								items={frequencies}

From 3683b62e5299896fd3b58de97e1e66fbe4601c13 Mon Sep 17 00:00:00 2001
From: Peter Carl Pardo <peterpardo123@gmail.com>
Date: Fri, 6 Dec 2024 23:27:40 +0800
Subject: [PATCH 11/18] feat: add pause/resume infra monitor functionality

---
 .../InfrastructureMonitors/infrastructureMonitorsSlice.js | 1 +
 Client/src/Pages/Infrastructure/Configure/index.jsx       | 8 +++++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/Client/src/Features/InfrastructureMonitors/infrastructureMonitorsSlice.js b/Client/src/Features/InfrastructureMonitors/infrastructureMonitorsSlice.js
index 1314d6568..c328f58ea 100644
--- a/Client/src/Features/InfrastructureMonitors/infrastructureMonitorsSlice.js
+++ b/Client/src/Features/InfrastructureMonitors/infrastructureMonitorsSlice.js
@@ -388,6 +388,7 @@ const infrastructureMonitorsSlice = createSlice({
 				state.isLoading = false;
 				state.success = action.payload.success;
 				state.msg = action.payload.msg;
+				state.selectedInfraMonitor = action.payload.data;
 			})
 			.addCase(pauseInfrastructureMonitor.rejected, (state, action) => {
 				state.isLoading = false;
diff --git a/Client/src/Pages/Infrastructure/Configure/index.jsx b/Client/src/Pages/Infrastructure/Configure/index.jsx
index b18216b43..dceef01b3 100644
--- a/Client/src/Pages/Infrastructure/Configure/index.jsx
+++ b/Client/src/Pages/Infrastructure/Configure/index.jsx
@@ -8,6 +8,7 @@ import {
 	createInfrastructureMonitor,
 	checkInfrastructureEndpointResolution,
 	getInfrastructureMonitorById,
+	pauseInfrastructureMonitor,
 } from "../../../Features/InfrastructureMonitors/infrastructureMonitorsSlice";
 import { useNavigate, useParams } from "react-router-dom";
 import { useTheme } from "@emotion/react";
@@ -63,6 +64,10 @@ const ConfigureInfrastructureMonitor = () => {
 		setInfrastructureMonitor(selectedInfraMonitor);
 	}, [selectedInfraMonitor]);
 
+	const handlePause = () => {
+		dispatch(pauseInfrastructureMonitor({ authToken, monitorId }));
+	};
+
 	const handleCustomAlertCheckChange = (event) => {
 		const { value, id } = event.target;
 		setInfrastructureMonitor((prev) => {
@@ -165,6 +170,7 @@ const ConfigureInfrastructureMonitor = () => {
 		};
 		return form;
 	};
+
 	const handleCreateInfrastructureMonitor = async (event) => {
 		event.preventDefault();
 		let form = {
@@ -323,7 +329,7 @@ const ConfigureInfrastructureMonitor = () => {
 										},
 									},
 								}}
-								onClick={() => console.log("handle pause")}
+								onClick={handlePause}
 							>
 								{infrastructureMonitor?.isActive ? (
 									<>

From 73726535d3ca70785021c168421ff02600c1c65b Mon Sep 17 00:00:00 2001
From: Peter Carl Pardo <peterpardo123@gmail.com>
Date: Fri, 6 Dec 2024 23:29:03 +0800
Subject: [PATCH 12/18] feat: update button label

---
 Client/src/Pages/Infrastructure/Configure/index.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Client/src/Pages/Infrastructure/Configure/index.jsx b/Client/src/Pages/Infrastructure/Configure/index.jsx
index dceef01b3..fc07e476c 100644
--- a/Client/src/Pages/Infrastructure/Configure/index.jsx
+++ b/Client/src/Pages/Infrastructure/Configure/index.jsx
@@ -504,7 +504,7 @@ const ConfigureInfrastructureMonitor = () => {
 							onClick={handleCreateInfrastructureMonitor}
 							loading={isLoading}
 						>
-							Create infrastructure monitor
+							Save
 						</LoadingButton>
 					</Stack>
 				</Stack>

From cad3d2a5b1b6c8111885735ed17f296e815fd79b Mon Sep 17 00:00:00 2001
From: Peter Carl Pardo <peterpardo123@gmail.com>
Date: Sat, 7 Dec 2024 00:09:49 +0800
Subject: [PATCH 13/18] feat: create CurrentAction constant for
 infrastructureMonitorSlice

---
 .../infrastructureMonitorsSlice.js                    | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/Client/src/Features/InfrastructureMonitors/infrastructureMonitorsSlice.js b/Client/src/Features/InfrastructureMonitors/infrastructureMonitorsSlice.js
index c328f58ea..ebbe3655d 100644
--- a/Client/src/Features/InfrastructureMonitors/infrastructureMonitorsSlice.js
+++ b/Client/src/Features/InfrastructureMonitors/infrastructureMonitorsSlice.js
@@ -1,12 +1,21 @@
 import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
 import { jwtDecode } from "jwt-decode";
 import { networkService } from "../../main";
+
+export const CurrentAction = Object.freeze({
+	NONE: "none",
+	DELETE: "delete",
+	UPDATE: "update",
+	GET: "get",
+});
+
 const initialState = {
 	isLoading: false,
 	monitorsSummary: [],
 	success: null,
 	msg: null,
 	selectedInfraMonitor: null,
+	currentAction: CurrentAction.NONE,
 };
 
 export const createInfrastructureMonitor = createAsyncThunk(
@@ -303,6 +312,7 @@ const infrastructureMonitorsSlice = createSlice({
 			// Get Monitor By Id
 			// *****************************************************
 			.addCase(getInfrastructureMonitorById.pending, (state) => {
+				state.currentAction = CurrentAction.GET;
 				state.isLoading = true;
 				state.success = false;
 			})
@@ -343,6 +353,7 @@ const infrastructureMonitorsSlice = createSlice({
 			// Delete Monitor
 			// *****************************************************
 			.addCase(deleteInfrastructureMonitor.pending, (state) => {
+				state.currentAction = CurrentAction.DELETE;
 				state.isLoading = true;
 				state.success = false;
 			})

From 326a18b5e52c03457f3d52e8bc5f696e7ba24b34 Mon Sep 17 00:00:00 2001
From: Peter Carl Pardo <peterpardo123@gmail.com>
Date: Sat, 7 Dec 2024 00:10:19 +0800
Subject: [PATCH 14/18] feat: update deleteInfrastructureMonitor thunk param

---
 .../InfrastructureMonitors/infrastructureMonitorsSlice.js     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/Client/src/Features/InfrastructureMonitors/infrastructureMonitorsSlice.js b/Client/src/Features/InfrastructureMonitors/infrastructureMonitorsSlice.js
index ebbe3655d..7bc66c6c7 100644
--- a/Client/src/Features/InfrastructureMonitors/infrastructureMonitorsSlice.js
+++ b/Client/src/Features/InfrastructureMonitors/infrastructureMonitorsSlice.js
@@ -149,10 +149,10 @@ export const deleteInfrastructureMonitor = createAsyncThunk(
 	"infrastructureMonitors/deleteMonitor",
 	async (data, thunkApi) => {
 		try {
-			const { authToken, monitor } = data;
+			const { authToken, monitorId } = data;
 			const res = await networkService.deleteMonitorById({
 				authToken: authToken,
-				monitorId: monitor._id,
+				monitorId: monitorId,
 			});
 			return res.data;
 		} catch (error) {

From 7c47bceccf1ee6efb184ec120c96c96de2616865 Mon Sep 17 00:00:00 2001
From: Peter Carl Pardo <peterpardo123@gmail.com>
Date: Sat, 7 Dec 2024 00:10:46 +0800
Subject: [PATCH 15/18] feat: add remove/delete infra monitor functionality

---
 .../Pages/Infrastructure/Configure/index.jsx  | 36 +++++++++++++++++--
 1 file changed, 33 insertions(+), 3 deletions(-)

diff --git a/Client/src/Pages/Infrastructure/Configure/index.jsx b/Client/src/Pages/Infrastructure/Configure/index.jsx
index fc07e476c..b9cd540dd 100644
--- a/Client/src/Pages/Infrastructure/Configure/index.jsx
+++ b/Client/src/Pages/Infrastructure/Configure/index.jsx
@@ -9,6 +9,8 @@ import {
 	checkInfrastructureEndpointResolution,
 	getInfrastructureMonitorById,
 	pauseInfrastructureMonitor,
+	deleteInfrastructureMonitor,
+	CurrentAction,
 } from "../../../Features/InfrastructureMonitors/infrastructureMonitorsSlice";
 import { useNavigate, useParams } from "react-router-dom";
 import { useTheme } from "@emotion/react";
@@ -26,6 +28,7 @@ import useUtils from "../../Monitors/utils";
 import PulseDot from "../../../Components/Animated/PulseDot";
 import PauseIcon from "../../../assets/icons/pause-icon.svg?react";
 import ResumeIcon from "../../../assets/icons/resume-icon.svg?react";
+import Dialog from "../../../Components/Dialog";
 
 const ConfigureInfrastructureMonitor = () => {
 	const MS_PER_MINUTE = 60000;
@@ -33,10 +36,11 @@ const ConfigureInfrastructureMonitor = () => {
 	const HARDWARE_MONITOR_TYPES = ["cpu", "memory", "disk", "temperature"];
 	const { user, authToken } = useSelector((state) => state.auth);
 	const { monitorId } = useParams();
-	const { isLoading, selectedInfraMonitor, success } = useSelector(
+	const { isLoading, selectedInfraMonitor, success, currentAction } = useSelector(
 		(state) => state.infrastructureMonitors
 	);
 	const [infrastructureMonitor, setInfrastructureMonitor] = useState(null);
+	const [isOpen, setIsOpen] = useState(false);
 	const { statusColor, statusMsg, determineState } = useUtils();
 	const [errors, setErrors] = useState({});
 	const dispatch = useDispatch();
@@ -54,20 +58,35 @@ const ConfigureInfrastructureMonitor = () => {
 		if (!infrastructureMonitor) {
 			dispatch(getInfrastructureMonitorById({ authToken, monitorId }));
 		}
-	}, [monitorId, authToken]);
+	}, [monitorId, authToken, dispatch]);
 
 	useEffect(() => {
-		if (!isLoading && success === false) navigate("/not-found", { replace: true });
+		if (currentAction === CurrentAction.GET && !isLoading && success === false)
+			navigate("/not-found", { replace: true });
 	}, [success, isLoading, navigate]);
 
 	useEffect(() => {
 		setInfrastructureMonitor(selectedInfraMonitor);
 	}, [selectedInfraMonitor]);
 
+	useEffect(() => {
+		if (currentAction === CurrentAction.DELETE && !isLoading) {
+			if (success) {
+				navigate("/infrastructure");
+			} else {
+				createToast({ body: "Failed to delete monitor." });
+			}
+		}
+	}, [currentAction, isLoading, success, navigate]);
+
 	const handlePause = () => {
 		dispatch(pauseInfrastructureMonitor({ authToken, monitorId }));
 	};
 
+	const handleRemove = () => {
+		dispatch(deleteInfrastructureMonitor({ authToken, monitorId }));
+	};
+
 	const handleCustomAlertCheckChange = (event) => {
 		const { value, id } = event.target;
 		setInfrastructureMonitor((prev) => {
@@ -508,6 +527,17 @@ const ConfigureInfrastructureMonitor = () => {
 						</LoadingButton>
 					</Stack>
 				</Stack>
+
+				<Dialog
+					open={isOpen}
+					theme={theme}
+					title={"Do you really want to delete this infrastructure monitor?"}
+					description={"Once deleted, this monitor cannot be retrieved."}
+					onCancel={() => setIsOpen(false)}
+					confirmationButtonLabel={"Delete"}
+					onConfirm={handleRemove}
+					isLoading={isLoading}
+				/>
 			</Box>
 		)
 	);

From f29eb490a3373cc85b9014d7c42e1f7421a114ef Mon Sep 17 00:00:00 2001
From: Peter Carl Pardo <peterpardo123@gmail.com>
Date: Sat, 7 Dec 2024 01:14:38 +0800
Subject: [PATCH 16/18] feat: create constants for Infrastructure page

---
 Client/src/Pages/Infrastructure/constants.js | 2 ++
 1 file changed, 2 insertions(+)
 create mode 100644 Client/src/Pages/Infrastructure/constants.js

diff --git a/Client/src/Pages/Infrastructure/constants.js b/Client/src/Pages/Infrastructure/constants.js
new file mode 100644
index 000000000..43020289e
--- /dev/null
+++ b/Client/src/Pages/Infrastructure/constants.js
@@ -0,0 +1,2 @@
+export const THRESHOLD_FIELD_PREFIX = "usage_";
+export const HARDWARE_MONITOR_TYPES = ["cpu", "memory", "disk", "temperature"];

From 01a9d0a2a5a60b5016d712f5178dc74077c22fda Mon Sep 17 00:00:00 2001
From: Peter Carl Pardo <peterpardo123@gmail.com>
Date: Sat, 7 Dec 2024 01:15:00 +0800
Subject: [PATCH 17/18] cleanup

---
 .../Pages/Infrastructure/Configure/index.jsx  | 72 ++-----------------
 1 file changed, 7 insertions(+), 65 deletions(-)

diff --git a/Client/src/Pages/Infrastructure/Configure/index.jsx b/Client/src/Pages/Infrastructure/Configure/index.jsx
index b9cd540dd..0262818c6 100644
--- a/Client/src/Pages/Infrastructure/Configure/index.jsx
+++ b/Client/src/Pages/Infrastructure/Configure/index.jsx
@@ -5,8 +5,6 @@ import { useSelector, useDispatch } from "react-redux";
 import { infrastructureMonitorValidation } from "../../../Validation/validation";
 import { parseDomainName } from "../../../Utils/monitorUtils";
 import {
-	createInfrastructureMonitor,
-	checkInfrastructureEndpointResolution,
 	getInfrastructureMonitorById,
 	pauseInfrastructureMonitor,
 	deleteInfrastructureMonitor,
@@ -21,7 +19,7 @@ import TextInput from "../../../Components/Inputs/TextInput";
 import Select from "../../../Components/Inputs/Select";
 import Checkbox from "../../../Components/Inputs/Checkbox";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
-import { buildErrors, hasValidationErrors } from "../../../Validation/error";
+import { buildErrors } from "../../../Validation/error";
 import { capitalizeFirstLetter } from "../../../Utils/stringUtils";
 import { CustomThreshold } from "../CreateMonitor/CustomThreshold";
 import useUtils from "../../Monitors/utils";
@@ -29,11 +27,10 @@ import PulseDot from "../../../Components/Animated/PulseDot";
 import PauseIcon from "../../../assets/icons/pause-icon.svg?react";
 import ResumeIcon from "../../../assets/icons/resume-icon.svg?react";
 import Dialog from "../../../Components/Dialog";
+import { MS_PER_MINUTE } from "../../../Utils/timeUtils";
+import { HARDWARE_MONITOR_TYPES, THRESHOLD_FIELD_PREFIX } from "../constants";
 
 const ConfigureInfrastructureMonitor = () => {
-	const MS_PER_MINUTE = 60000;
-	const THRESHOLD_FIELD_PREFIX = "usage_";
-	const HARDWARE_MONITOR_TYPES = ["cpu", "memory", "disk", "temperature"];
 	const { user, authToken } = useSelector((state) => state.auth);
 	const { monitorId } = useParams();
 	const { isLoading, selectedInfraMonitor, success, currentAction } = useSelector(
@@ -168,63 +165,9 @@ const ConfigureInfrastructureMonitor = () => {
 		}
 	};
 
-	const generatePayload = (form) => {
-		let thresholds = {};
-		Object.keys(form)
-			.filter((k) => k.startsWith(THRESHOLD_FIELD_PREFIX))
-			.map((k) => {
-				if (form[k]) thresholds[k] = form[k] / 100;
-				delete form[k];
-				delete form[k.substring(THRESHOLD_FIELD_PREFIX.length)];
-			});
-
-		form = {
-			...form,
-			description: form.name,
-			teamId: user.teamId,
-			userId: user._id,
-			type: "hardware",
-			notifications: infrastructureMonitor.notifications,
-			thresholds,
-		};
-		return form;
-	};
-
-	const handleCreateInfrastructureMonitor = async (event) => {
-		event.preventDefault();
-		let form = {
-			...infrastructureMonitor,
-			name:
-				infrastructureMonitor.name === ""
-					? infrastructureMonitor.url
-					: infrastructureMonitor.name,
-			interval: infrastructureMonitor.interval * MS_PER_MINUTE,
-		};
-
-		delete form.notifications;
-		if (hasValidationErrors(form, infrastructureMonitorValidation, setErrors)) {
-			return;
-		} else {
-			const checkEndpointAction = await dispatch(
-				checkInfrastructureEndpointResolution({ authToken, monitorURL: form.url })
-			);
-			if (checkEndpointAction.meta.requestStatus === "rejected") {
-				createToast({
-					body: "The endpoint you entered doesn't resolve. Check the URL again.",
-				});
-				setErrors({ url: "The entered URL is not reachable." });
-				return;
-			}
-			const action = await dispatch(
-				createInfrastructureMonitor({ authToken, monitor: generatePayload(form) })
-			);
-			if (action.meta.requestStatus === "fulfilled") {
-				createToast({ body: "Infrastructure monitor created successfully!" });
-				navigate("/infrastructure");
-			} else {
-				createToast({ body: "Failed to create monitor." });
-			}
-		}
+	// TODO: add update infrastructure monitor functionalityf
+	const handleUpdateInfrastructureMonitor = () => {
+		console.log("Update infrastructure monitor...");
 	};
 
 	//select values
@@ -249,7 +192,6 @@ const ConfigureInfrastructureMonitor = () => {
 				/>
 				<Stack
 					component="form"
-					onSubmit={handleCreateInfrastructureMonitor}
 					noValidate
 					spellCheck="false"
 					gap={theme.spacing(12)}
@@ -520,7 +462,7 @@ const ConfigureInfrastructureMonitor = () => {
 						<LoadingButton
 							variant="contained"
 							color="primary"
-							onClick={handleCreateInfrastructureMonitor}
+							onClick={handleUpdateInfrastructureMonitor}
 							loading={isLoading}
 						>
 							Save

From 7a3f278ca5a9deb87cbf0eacb2556f8aea7cc409 Mon Sep 17 00:00:00 2001
From: Peter Carl Pardo <peterpardo123@gmail.com>
Date: Sat, 7 Dec 2024 01:48:56 +0800
Subject: [PATCH 18/18] feat: rename CurrentAction constant to FormAction

---
 .../infrastructureMonitorsSlice.js               | 13 ++++++++-----
 .../src/Pages/Infrastructure/Configure/index.jsx | 16 +++++++++-------
 Client/src/Pages/Infrastructure/index.jsx        |  8 +++++++-
 3 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/Client/src/Features/InfrastructureMonitors/infrastructureMonitorsSlice.js b/Client/src/Features/InfrastructureMonitors/infrastructureMonitorsSlice.js
index 7bc66c6c7..a53795c06 100644
--- a/Client/src/Features/InfrastructureMonitors/infrastructureMonitorsSlice.js
+++ b/Client/src/Features/InfrastructureMonitors/infrastructureMonitorsSlice.js
@@ -2,7 +2,7 @@ import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
 import { jwtDecode } from "jwt-decode";
 import { networkService } from "../../main";
 
-export const CurrentAction = Object.freeze({
+export const FormAction = Object.freeze({
 	NONE: "none",
 	DELETE: "delete",
 	UPDATE: "update",
@@ -15,7 +15,7 @@ const initialState = {
 	success: null,
 	msg: null,
 	selectedInfraMonitor: null,
-	currentAction: CurrentAction.NONE,
+	formAction: FormAction.NONE,
 };
 
 export const createInfrastructureMonitor = createAsyncThunk(
@@ -246,6 +246,9 @@ const infrastructureMonitorsSlice = createSlice({
 			state.success = null;
 			state.msg = null;
 		},
+		resetInfrastructureMonitorFormAction: (state) => {
+			state.formAction = initialState.formAction;
+		},
 	},
 	extraReducers: (builder) => {
 		builder
@@ -312,7 +315,7 @@ const infrastructureMonitorsSlice = createSlice({
 			// Get Monitor By Id
 			// *****************************************************
 			.addCase(getInfrastructureMonitorById.pending, (state) => {
-				state.currentAction = CurrentAction.GET;
+				state.formAction = FormAction.GET;
 				state.isLoading = true;
 				state.success = false;
 			})
@@ -353,7 +356,7 @@ const infrastructureMonitorsSlice = createSlice({
 			// Delete Monitor
 			// *****************************************************
 			.addCase(deleteInfrastructureMonitor.pending, (state) => {
-				state.currentAction = CurrentAction.DELETE;
+				state.formAction = FormAction.DELETE;
 				state.isLoading = true;
 				state.success = false;
 			})
@@ -428,7 +431,7 @@ const infrastructureMonitorsSlice = createSlice({
 	},
 });
 
-export const { setInfrastructureMonitors, clearInfrastructureMonitorState } =
+export const { clearInfrastructureMonitorState, resetInfrastructureMonitorFormAction } =
 	infrastructureMonitorsSlice.actions;
 
 export default infrastructureMonitorsSlice.reducer;
diff --git a/Client/src/Pages/Infrastructure/Configure/index.jsx b/Client/src/Pages/Infrastructure/Configure/index.jsx
index 0262818c6..6dfa07988 100644
--- a/Client/src/Pages/Infrastructure/Configure/index.jsx
+++ b/Client/src/Pages/Infrastructure/Configure/index.jsx
@@ -8,7 +8,7 @@ import {
 	getInfrastructureMonitorById,
 	pauseInfrastructureMonitor,
 	deleteInfrastructureMonitor,
-	CurrentAction,
+	FormAction,
 } from "../../../Features/InfrastructureMonitors/infrastructureMonitorsSlice";
 import { useNavigate, useParams } from "react-router-dom";
 import { useTheme } from "@emotion/react";
@@ -33,7 +33,7 @@ import { HARDWARE_MONITOR_TYPES, THRESHOLD_FIELD_PREFIX } from "../constants";
 const ConfigureInfrastructureMonitor = () => {
 	const { user, authToken } = useSelector((state) => state.auth);
 	const { monitorId } = useParams();
-	const { isLoading, selectedInfraMonitor, success, currentAction } = useSelector(
+	const { isLoading, selectedInfraMonitor, success, formAction } = useSelector(
 		(state) => state.infrastructureMonitors
 	);
 	const [infrastructureMonitor, setInfrastructureMonitor] = useState(null);
@@ -58,23 +58,25 @@ const ConfigureInfrastructureMonitor = () => {
 	}, [monitorId, authToken, dispatch]);
 
 	useEffect(() => {
-		if (currentAction === CurrentAction.GET && !isLoading && success === false)
+		if (formAction === FormAction.GET && !isLoading && success === false)
 			navigate("/not-found", { replace: true });
 	}, [success, isLoading, navigate]);
 
 	useEffect(() => {
-		setInfrastructureMonitor(selectedInfraMonitor);
+		if (selectedInfraMonitor) {
+			setInfrastructureMonitor(selectedInfraMonitor);
+		}
 	}, [selectedInfraMonitor]);
 
 	useEffect(() => {
-		if (currentAction === CurrentAction.DELETE && !isLoading) {
+		if (formAction === FormAction.DELETE && !isLoading) {
 			if (success) {
-				navigate("/infrastructure");
+				navigate("/infrastructure", { replace: true });
 			} else {
 				createToast({ body: "Failed to delete monitor." });
 			}
 		}
-	}, [currentAction, isLoading, success, navigate]);
+	}, [formAction, isLoading, success, navigate]);
 
 	const handlePause = () => {
 		dispatch(pauseInfrastructureMonitor({ authToken, monitorId }));
diff --git a/Client/src/Pages/Infrastructure/index.jsx b/Client/src/Pages/Infrastructure/index.jsx
index 46cf636d2..6e05044e3 100644
--- a/Client/src/Pages/Infrastructure/index.jsx
+++ b/Client/src/Pages/Infrastructure/index.jsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { /* useDispatch, */ useSelector } from "react-redux";
+import { /* useDispatch, */ useDispatch, useSelector } from "react-redux";
 import { useTheme } from "@emotion/react";
 import useUtils from "../Monitors/utils";
 import { jwtDecode } from "jwt-decode";
@@ -31,6 +31,7 @@ import CustomGauge from "../../Components/Charts/CustomGauge/index.jsx";
 import Host from "../Monitors/Home/host.jsx";
 import { useIsAdmin } from "../../Hooks/useIsAdmin.js";
 import { InfrastructureMenu } from "./components/Menu";
+import { resetInfrastructureMonitorFormAction } from "../../Features/InfrastructureMonitors/infrastructureMonitorsSlice.js";
 
 const columns = [
 	{ label: "Host" },
@@ -81,6 +82,7 @@ function Infrastructure() {
 	const theme = useTheme();
 	const [isLoading, setIsLoading] = useState(true);
 
+	const dispatch = useDispatch();
 	const navigate = useNavigate();
 	const navigateToCreate = () => navigate("/infrastructure/create");
 
@@ -129,6 +131,10 @@ function Infrastructure() {
 		fetchMonitors();
 	}, [page, rowsPerPage]);
 
+	useEffect(() => {
+		dispatch(resetInfrastructureMonitorFormAction());
+	}, []);
+
 	const { determineState } = useUtils();
 	const { monitors, total: totalMonitors } = monitorState;
 	// do it here