From 42ae1af98700b5b3c1778517acbc8ff34ad2b53e Mon Sep 17 00:00:00 2001
From: Shemy Gan <jennifergan26@gmail.com>
Date: Thu, 31 Oct 2024 10:36:09 -0400
Subject: [PATCH 001/142] - Add infrastructure monitor slice

---
 .../infrastructureMonitorsSlice.js            | 405 ++++++++++++++++++
 Client/src/store.js                           |   2 +
 2 files changed, 407 insertions(+)
 create mode 100644 Client/src/Features/InfrastructureMonitors /infrastructureMonitorsSlice.js

diff --git a/Client/src/Features/InfrastructureMonitors /infrastructureMonitorsSlice.js b/Client/src/Features/InfrastructureMonitors /infrastructureMonitorsSlice.js
new file mode 100644
index 000000000..abcb31adf
--- /dev/null
+++ b/Client/src/Features/InfrastructureMonitors /infrastructureMonitorsSlice.js	
@@ -0,0 +1,405 @@
+import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
+import { jwtDecode } from "jwt-decode";
+import { networkService } from "../../main";
+const initialState = {
+	isLoading: false,
+	monitorsSummary: [],
+	success: null,
+	msg: null,
+};
+
+export const createInfrastructureMonitor = createAsyncThunk(
+	"infrastructureMonitors/createMonitor",
+	async (data, thunkApi) => {
+		try {
+			const { authToken, monitor } = data;
+			const res = await networkService.createMonitor({
+				authToken: authToken,
+				monitor: monitor,
+			});
+			return res.data;
+		} catch (error) {
+			if (error.response && error.response.data) {
+				return thunkApi.rejectWithValue(error.response.data);
+			}
+			const payload = {
+				status: false,
+				msg: error.message ? error.message : "Unknown error",
+			};
+			return thunkApi.rejectWithValue(payload);
+		}
+	}
+);
+
+export const checkInfrastructureEndpointResolution = createAsyncThunk(
+	"infrastructureMonitors/CheckEndpoint",
+	async (data, thunkApi) => {
+		try {
+			const { authToken, monitorURL } = data;
+
+			const res = await networkService.checkEndpointResolution({
+				authToken: authToken,
+				monitorURL: monitorURL,
+			})
+			return res.data;
+		} catch (error) {
+			if (error.response && error.response.data) {
+				return thunkApi.rejectWithValue(error.response.data);
+			}
+			const payload = {
+				status: false,
+				msg: error.message ? error.message : "Unknown error",
+			};
+			return thunkApi.rejectWithValue(payload);
+		}
+	}
+)
+
+export const getInfrastructureMonitorById = createAsyncThunk(
+	"infrastructureMonitors/getMonitorById",
+	async (data, thunkApi) => {
+		try {
+			const { authToken, monitorId } = data;
+			const res = await networkService.getMonitorById({
+				authToken: authToken,
+				monitorId: monitorId,
+			});
+			return res.data;
+		} catch (error) {
+			if (error.response && error.response.data) {
+				return thunkApi.rejectWithValue(error.response.data);
+			}
+			const payload = {
+				status: false,
+				msg: error.message ? error.message : "Unknown error",
+			};
+			return thunkApi.rejectWithValue(payload);
+		}
+	}
+);
+
+export const getInfrastructureMonitorsByTeamId = createAsyncThunk(
+	"infrastructureMonitors/getMonitorsByTeamId",
+	async (token, thunkApi) => {
+		const user = jwtDecode(token);
+		try {
+			const res = await networkService.getMonitorsAndSummaryByTeamId({
+				authToken: token,
+				teamId: user.teamId,
+				types: ["http", "ping"],
+			});
+			return res.data;
+		} catch (error) {
+			if (error.response && error.response.data) {
+				return thunkApi.rejectWithValue(error.response.data);
+			}
+			const payload = {
+				status: false,
+				msg: error.message ? error.message : "Unknown error",
+			};
+			return thunkApi.rejectWithValue(payload);
+		}
+	}
+);
+
+export const updateInfrastructureMonitor = createAsyncThunk(
+	"infrastructureMonitors/updateMonitor",
+	async (data, thunkApi) => {
+		try {
+			const { authToken, monitor } = data;
+			const updatedFields = {
+				name: monitor.name,
+				description: monitor.description,
+				interval: monitor.interval,
+				notifications: monitor.notifications,
+			};
+			const res = await networkService.updateMonitor({
+				authToken: authToken,
+				monitorId: monitor._id,
+				updatedFields: updatedFields,
+			});
+			return res.data;
+		} catch (error) {
+			if (error.response && error.response.data) {
+				return thunkApi.rejectWithValue(error.response.data);
+			}
+			const payload = {
+				status: false,
+				msg: error.message ? error.message : "Unknown error",
+			};
+			return thunkApi.rejectWithValue(payload);
+		}
+	}
+);
+
+export const deleteInfrastructureMonitor = createAsyncThunk(
+	"infrastructureMonitors/deleteMonitor",
+	async (data, thunkApi) => {
+		try {
+			const { authToken, monitor } = data;
+			const res = await networkService.deleteMonitorById({
+				authToken: authToken,
+				monitorId: monitor._id,
+			});
+			return res.data;
+		} catch (error) {
+			if (error.response && error.response.data) {
+				return thunkApi.rejectWithValue(error.response.data);
+			}
+			const payload = {
+				status: false,
+				msg: error.message ? error.message : "Unknown error",
+			};
+			return thunkApi.rejectWithValue(payload);
+		}
+	}
+);
+
+export const pauseInfrastructureMonitor = createAsyncThunk(
+	"infrastructureMonitors/pauseMonitor",
+	async (data, thunkApi) => {
+		try {
+			const { authToken, monitorId } = data;
+			const res = await networkService.pauseMonitorById({
+				authToken: authToken,
+				monitorId: monitorId,
+			});
+			return res.data;
+		} catch (error) {
+			if (error.response && error.response.data) {
+				return thunkApi.rejectWithValue(error.response.data);
+			}
+			const payload = {
+				status: false,
+				msg: error.message ? error.message : "Unknown error",
+			};
+			return thunkApi.rejectWithValue(payload);
+		}
+	}
+);
+
+export const deleteInfrastructureMonitorChecksByTeamId = createAsyncThunk(
+	"infrastructureMonitors/deleteChecksByTeamId",
+	async (data, thunkApi) => {
+		try {
+			const { authToken, teamId } = data;
+			const res = await networkService.deleteChecksByTeamId({
+				authToken: authToken,
+				teamId: teamId,
+			});
+			return res.data;
+		} catch (error) {
+			if (error.response && error.response.data) {
+				return thunkApi.rejectWithValue(error.response.data);
+			}
+			const payload = {
+				status: false,
+				msg: error.message ? error.message : "Unknown error",
+			};
+			return thunkApi.rejectWithValue(payload);
+		}
+	}
+);
+
+export const deleteAllInfrastructureMonitors = createAsyncThunk(
+	"infrastructureMonitors/deleteAllMonitors",
+	async (data, thunkApi) => {
+		try {
+			const { authToken } = data;
+			const res = await networkService.deleteAllMonitors({
+				authToken: authToken,
+			});
+			return res.data;
+		} catch (error) {
+			if (error.response && error.response.data) {
+				return thunkApi.rejectWithValue(error.response.data);
+			}
+			const payload = {
+				status: false,
+				msg: error.message ? error.message : "Unknown error",
+			};
+			return thunkApi.rejectWithValue(payload);
+		}
+	}
+);
+
+const infrastructureMonitorsSlice = createSlice({
+	name: "infrastructureMonitors",
+	initialState,
+	reducers: {
+		clearInfrastructureMonitorState: (state) => {
+			state.isLoading = false;
+			state.monitorsSummary = [];
+			state.success = null;
+			state.msg = null;
+		},
+	},
+	extraReducers: (builder) => {
+		builder
+			// *****************************************************
+			// Monitors by teamId
+			// *****************************************************
+
+			.addCase(getInfrastructureMonitorsByTeamId.pending, (state) => {
+				state.isLoading = true;
+			})
+			.addCase(getInfrastructureMonitorsByTeamId.fulfilled, (state, action) => {
+				state.isLoading = false;
+				state.success = action.payload.msg;
+				state.monitorsSummary = action.payload.data;
+			})
+			.addCase(getInfrastructureMonitorsByTeamId.rejected, (state, action) => {
+				state.isLoading = false;
+				state.success = false;
+				state.msg = action.payload
+					? action.payload.msg
+					: "Getting infrastructure monitors failed";
+			})
+
+			// *****************************************************
+			// Create Monitor
+			// *****************************************************
+			.addCase(createInfrastructureMonitor.pending, (state) => {
+				state.isLoading = true;
+			})
+			.addCase(createInfrastructureMonitor.fulfilled, (state, action) => {
+				state.isLoading = false;
+				state.success = action.payload.success;
+				state.msg = action.payload.msg;
+			})
+			.addCase(createInfrastructureMonitor.rejected, (state, action) => {
+				state.isLoading = false;
+				state.success = false;
+				state.msg = action.payload
+					? action.payload.msg
+					: "Failed to create infrastructure monitor";
+			})
+			// *****************************************************
+			// Resolve Endpoint
+			// *****************************************************
+			.addCase(checkEndpointResolution.pending, (state) => {
+				state.isLoading = true;
+			})
+			.addCase(checkEndpointResolution.fulfilled, (state, action) => {
+				state.isLoading = false;
+				state.success = action.payload.success;
+				state.msg = action.payload.msg;
+			})
+			.addCase(checkEndpointResolution.rejected, (state, action) => {
+				state.isLoading = false;
+				state.success = false;
+				state.msg = action.payload
+					? action.payload.msg
+					: "Failed to check endpoint resolution";
+			})
+			// *****************************************************
+			// Get Monitor By Id
+			// *****************************************************
+			.addCase(getInfrastructureMonitorById.pending, (state) => {
+				state.isLoading = true;
+			})
+			.addCase(getInfrastructureMonitorById.fulfilled, (state, action) => {
+				state.isLoading = false;
+				state.success = action.payload.success;
+				state.msg = action.payload.msg;
+			})
+			.addCase(getInfrastructureMonitorById.rejected, (state, action) => {
+				state.isLoading = false;
+				state.success = false;
+				state.msg = action.payload ? action.payload.msg : "Failed to get infrastructure monitor";
+			})
+			// *****************************************************
+			// update Monitor
+			// *****************************************************
+			.addCase(updateInfrastructureMonitor.pending, (state) => {
+				state.isLoading = true;
+			})
+			.addCase(updateInfrastructureMonitor.fulfilled, (state, action) => {
+				state.isLoading = false;
+				state.success = action.payload.success;
+				state.msg = action.payload.msg;
+			})
+			.addCase(updateInfrastructureMonitor.rejected, (state, action) => {
+				state.isLoading = false;
+				state.success = false;
+				state.msg = action.payload
+					? action.payload.msg
+					: "Failed to update infrastructure monitor";
+			})
+
+			// *****************************************************
+			// Delete Monitor
+			// *****************************************************
+			.addCase(deleteInfrastructureMonitor.pending, (state) => {
+				state.isLoading = true;
+			})
+			.addCase(deleteInfrastructureMonitor.fulfilled, (state, action) => {
+				state.isLoading = false;
+				state.success = action.payload.success;
+				state.msg = action.payload.msg;
+			})
+			.addCase(deleteInfrastructureMonitor.rejected, (state, action) => {
+				state.isLoading = false;
+				state.success = false;
+				state.msg = action.payload
+					? action.payload.msg
+					: "Failed to delete infrastructure monitor";
+			})
+			// *****************************************************
+			// Delete Monitor checks by Team ID
+			// *****************************************************
+			.addCase(deleteMonitorChecksByTeamId.pending, (state) => {
+				state.isLoading = true;
+			})
+			.addCase(deleteMonitorChecksByTeamId.fulfilled, (state, action) => {
+				state.isLoading = false;
+				state.success = action.payload.success;
+				state.msg = action.payload.msg;
+			})
+			.addCase(deleteMonitorChecksByTeamId.rejected, (state, action) => {
+				state.isLoading = false;
+				state.success = false;
+				state.msg = action.payload
+					? action.payload.msg
+					: "Failed to delete monitor checks";
+			})
+			// *****************************************************
+			// Pause Monitor
+			// *****************************************************
+			.addCase(pauseInfrastructureMonitor.pending, (state) => {
+				state.isLoading = true;
+			})
+			.addCase(pauseInfrastructureMonitor.fulfilled, (state, action) => {
+				state.isLoading = false;
+				state.success = action.payload.success;
+				state.msg = action.payload.msg;
+			})
+			.addCase(pauseInfrastructureMonitor.rejected, (state, action) => {
+				state.isLoading = false;
+				state.success = false;
+				state.msg = action.payload
+					? action.payload.msg
+					: "Failed to pause infrastructure monitor";
+			})
+			// *****************************************************
+			// Delete all Monitors
+			// *****************************************************
+			.addCase(deleteAllInfrastructureMonitors.pending, (state) => {
+				state.isLoading = true;
+			})
+			.addCase(deleteAllInfrastructureMonitors.fulfilled, (state, action) => {
+				state.isLoading = false;
+				state.success = action.payload.success;
+				state.msg = action.payload.msg;
+			})
+			.addCase(deleteAllInfrastructureMonitors.rejected, (state, action) => {
+				state.isLoading = false;
+				state.success = false;
+				state.msg = action.payload ? action.payload.msg : "Failed to delete all monitors";
+			});
+	},
+});
+
+export const { setInfrastructureMonitors, clearInfrastructureMonitorState } = infrastructureMonitorsSlice.actions;
+
+export default infrastructureMonitorsSlice.reducer;
diff --git a/Client/src/store.js b/Client/src/store.js
index 0b4c46ce8..92ddfad00 100644
--- a/Client/src/store.js
+++ b/Client/src/store.js
@@ -1,6 +1,7 @@
 import { configureStore, combineReducers } from "@reduxjs/toolkit";
 
 import uptimeMonitorsReducer from "./Features/UptimeMonitors/uptimeMonitorsSlice";
+import infrastructureMonitorsReducer from "./Features/InfrastructureMonitors/infrastructureMonitorsSlice";
 import pageSpeedMonitorReducer from "./Features/PageSpeedMonitor/pageSpeedMonitorSlice";
 import authReducer from "./Features/Auth/authSlice";
 import uiReducer from "./Features/UI/uiSlice";
@@ -28,6 +29,7 @@ const persistConfig = {
 
 const rootReducer = combineReducers({
 	uptimeMonitors: uptimeMonitorsReducer,
+	infrastructureMonitors: infrastructureMonitorsReducer,
 	auth: authReducer,
 	pageSpeedMonitors: pageSpeedMonitorReducer,
 	ui: uiReducer,

From ffeb4d79914993b0ec6a7c71cf09ad09ec3aaf24 Mon Sep 17 00:00:00 2001
From: Shemy Gan <jennifergan26@gmail.com>
Date: Thu, 31 Oct 2024 15:19:57 -0400
Subject: [PATCH 002/142] - Add initial create infrastructure page

---
 .../infrastructureMonitorsSlice.js            |  12 +-
 .../CreateMonitor/index.jsx                   | 378 ++++++++++++++++++
 2 files changed, 384 insertions(+), 6 deletions(-)
 rename Client/src/Features/{InfrastructureMonitors  => InfrastructureMonitors}/infrastructureMonitorsSlice.js (96%)
 create mode 100644 Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx

diff --git a/Client/src/Features/InfrastructureMonitors /infrastructureMonitorsSlice.js b/Client/src/Features/InfrastructureMonitors/infrastructureMonitorsSlice.js
similarity index 96%
rename from Client/src/Features/InfrastructureMonitors /infrastructureMonitorsSlice.js
rename to Client/src/Features/InfrastructureMonitors/infrastructureMonitorsSlice.js
index abcb31adf..24b3500ac 100644
--- a/Client/src/Features/InfrastructureMonitors /infrastructureMonitorsSlice.js	
+++ b/Client/src/Features/InfrastructureMonitors/infrastructureMonitorsSlice.js
@@ -277,15 +277,15 @@ const infrastructureMonitorsSlice = createSlice({
 			// *****************************************************
 			// Resolve Endpoint
 			// *****************************************************
-			.addCase(checkEndpointResolution.pending, (state) => {
+			.addCase(checkInfrastructureEndpointResolution.pending, (state) => {
 				state.isLoading = true;
 			})
-			.addCase(checkEndpointResolution.fulfilled, (state, action) => {
+			.addCase(checkInfrastructureEndpointResolution.fulfilled, (state, action) => {
 				state.isLoading = false;
 				state.success = action.payload.success;
 				state.msg = action.payload.msg;
 			})
-			.addCase(checkEndpointResolution.rejected, (state, action) => {
+			.addCase(checkInfrastructureEndpointResolution.rejected, (state, action) => {
 				state.isLoading = false;
 				state.success = false;
 				state.msg = action.payload
@@ -348,15 +348,15 @@ const infrastructureMonitorsSlice = createSlice({
 			// *****************************************************
 			// Delete Monitor checks by Team ID
 			// *****************************************************
-			.addCase(deleteMonitorChecksByTeamId.pending, (state) => {
+			.addCase(deleteInfrastructureMonitorChecksByTeamId.pending, (state) => {
 				state.isLoading = true;
 			})
-			.addCase(deleteMonitorChecksByTeamId.fulfilled, (state, action) => {
+			.addCase(deleteInfrastructureMonitorChecksByTeamId.fulfilled, (state, action) => {
 				state.isLoading = false;
 				state.success = action.payload.success;
 				state.msg = action.payload.msg;
 			})
-			.addCase(deleteMonitorChecksByTeamId.rejected, (state, action) => {
+			.addCase(deleteInfrastructureMonitorChecksByTeamId.rejected, (state, action) => {
 				state.isLoading = false;
 				state.success = false;
 				state.msg = action.payload
diff --git a/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx b/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx
new file mode 100644
index 000000000..87c4c537c
--- /dev/null
+++ b/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx
@@ -0,0 +1,378 @@
+import { useState } from "react";
+import { Box, Button, ButtonGroup, Stack, Typography } from "@mui/material";
+import LoadingButton from "@mui/lab/LoadingButton";
+import { useSelector, useDispatch } from "react-redux";
+import { monitorValidation } from "../../../Validation/validation";
+import { createUptimeMonitor } from "../../../Features/UptimeMonitors/uptimeMonitorsSlice";
+import { checkEndpointResolution } from "../../../Features/UptimeMonitors/uptimeMonitorsSlice";
+import { useNavigate } from "react-router-dom";
+import { useTheme } from "@emotion/react";
+import { createToast } from "../../../Utils/toastUtils";
+import { logger } from "../../../Utils/Logger";
+import { ConfigBox } from "../../Monitors/styled";
+import Radio from "../../../Components/Inputs/Radio";
+import Field from "../../../Components/Inputs/Field";
+import Select from "../../../Components/Inputs/Select";
+import Checkbox from "../../../Components/Inputs/Checkbox";
+import Breadcrumbs from "../../../Components/Breadcrumbs";
+
+const CreateInfrastructureMonitor = () => {
+	const MS_PER_MINUTE = 60000;
+	const { user, authToken } = useSelector((state) => state.auth);
+	const monitorState = useSelector((state) => state.infrastructureMonitor);
+	const dispatch = useDispatch();
+	const navigate = useNavigate();
+	const theme = useTheme();
+
+	const idMap = {
+		"monitor-url": "url",
+		"monitor-name": "name",
+		"monitor-checks-http": "type",
+		"monitor-checks-ping": "type",
+		"notify-email-default": "notification-email",
+	};
+
+	const [infrastructureMonitor, setInfrastructureMonitor] = useState({
+		url: "",
+		name: "",
+		type: "http",
+		notifications: [],
+		interval: 1,
+	});
+	const [https, setHttps] = useState(true);
+	const [errors, setErrors] = useState({});
+
+	const handleChange = (event, name) => {
+		const { value, id } = event.target;
+		if (!name) name = idMap[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 { error } = monitorValidation.validate(
+				{ [name]: value },
+				{ abortEarly: false }
+			);
+			console.log(error);
+			setErrors((prev) => {
+				const updatedErrors = { ...prev };
+				if (error) updatedErrors[name] = error.details[0].message;
+				else delete updatedErrors[name];
+				return updatedErrors;
+			});
+		}
+	};
+
+	const handleCreateInfrastructureMonitor = async (event) => {
+		event.preventDefault();
+		//obj to submit
+		let form = {
+			url:
+				//preprending protocol for url
+				infrastructureMonitor.type === "http"
+					? `http${https ? "s" : ""}://` + infrastructureMonitor.url
+					: infrastructureMonitor.url,
+			name:
+				infrastructureMonitor.name === ""
+					? infrastructureMonitor.url
+					: infrastructureMonitor.name,
+			type: infrastructureMonitor.type,
+			interval: infrastructureMonitor.interval * MS_PER_MINUTE,
+		};
+
+		const { error } = monitorValidation.validate(form, {
+			abortEarly: false,
+		});
+
+		if (error) {
+			const newErrors = {};
+			error.details.forEach((err) => {
+				newErrors[err.path[0]] = err.message;
+			});
+			setErrors(newErrors);
+			createToast({ body: "Error validation data." });
+		} else {
+			if (infrastructureMonitor.type === "http") {
+				const checkEndpointAction = await dispatch(
+					checkEndpointResolution({ 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;
+				}
+			}
+
+			form = {
+				...form,
+				description: form.name,
+				teamId: user.teamId,
+				userId: user._id,
+				notifications: infrastructureMonitor.notifications,
+			};
+			const action = await dispatch(createUptimeMonitor({ authToken, monitor: form }));
+			if (action.meta.requestStatus === "fulfilled") {
+				createToast({ body: "Monitor created successfully!" });
+				navigate("/monitors");
+			} else {
+				createToast({ body: "Failed to create monitor." });
+			}
+		}
+	};
+
+	//select values
+	const frequencies = [
+		{ _id: 1, name: "1 minute" },
+		{ _id: 2, name: "2 minutes" },
+		{ _id: 3, name: "3 minutes" },
+		{ _id: 4, name: "4 minutes" },
+		{ _id: 5, name: "5 minutes" },
+	];
+
+	return (
+		<Box className="create-infrastructure-monitor">
+			<Breadcrumbs
+				list={[
+					{ name: "Infrastructure monitors", path: "/infrastructure-monitors/create" },
+					{ name: "create", path: `/infrastructure-monitors/create` },
+				]}
+			/>
+			<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>
+						<Typography component="h2">General settings</Typography>
+						<Typography component="p">
+							Here you can select the URL of the host, together with the type of monitor.
+						</Typography>
+					</Box>
+					<Stack gap={theme.spacing(15)}>
+						<Field
+							type={infrastructureMonitor.type === "http" ? "url" : "text"}
+							id="monitor-url"
+							label="URL to monitor"
+							https={https}
+							placeholder="google.com"
+							value={infrastructureMonitor.url}
+							onChange={handleChange}
+							error={errors["url"]}
+						/>
+						<Field
+							type="text"
+							id="monitor-name"
+							label="Display name"
+							isOptional={true}
+							placeholder="Google"
+							value={infrastructureMonitor.name}
+							onChange={handleChange}
+							error={errors["name"]}
+						/>
+					</Stack>
+				</ConfigBox>
+				<ConfigBox>
+					<Box>
+						<Typography component="h2">Checks to perform</Typography>
+						<Typography component="p">
+							You can always add or remove checks after adding your site.
+						</Typography>
+					</Box>
+					<Stack gap={theme.spacing(12)}>
+						<Stack gap={theme.spacing(6)}>
+							<Radio
+								id="monitor-checks-http"
+								title="Website monitoring"
+								desc="Use HTTP(s) to monitor your website or API endpoint."
+								size="small"
+								value="http"
+								checked={infrastructureMonitor.type === "http"}
+								onChange={(event) => handleChange(event)}
+							/>
+							{infrastructureMonitor.type === "http" ? (
+								<ButtonGroup sx={{ ml: theme.spacing(16) }}>
+									<Button
+										variant="group"
+										filled={https.toString()}
+										onClick={() => setHttps(true)}
+									>
+										HTTPS
+									</Button>
+									<Button
+										variant="group"
+										filled={(!https).toString()}
+										onClick={() => setHttps(false)}
+									>
+										HTTP
+									</Button>
+								</ButtonGroup>
+							) : (
+								""
+							)}
+						</Stack>
+						<Radio
+							id="monitor-checks-ping"
+							title="Ping monitoring"
+							desc="Check whether your server is available or not."
+							size="small"
+							value="ping"
+							checked={infrastructureMonitor.type === "ping"}
+							onChange={(event) => handleChange(event)}
+						/>
+						{errors["type"] ? (
+							<Box className="error-container">
+								<Typography
+									component="p"
+									className="input-error"
+									color={theme.palette.error.text}
+								>
+									{errors["type"]}
+								</Typography>
+							</Box>
+						) : (
+							""
+						)}
+					</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-sms"
+							label="Notify via SMS (coming soon)"
+							isChecked={false}
+							value=""
+							onChange={() => logger.warn("disabled")}
+							isDisabled={true}
+						/>
+						<Checkbox
+							id="notify-email-default"
+							label={`Notify via email (to ${user.email})`}
+							isChecked={infrastructureMonitor.notifications.some(
+								(notification) => notification.type === "email"
+							)}
+							value={user?.email}
+							onChange={(event) => handleChange(event)}
+						/>
+						<Checkbox
+							id="notify-email"
+							label="Also notify via email to multiple addresses (coming soon)"
+							isChecked={false}
+							value=""
+							onChange={() => logger.warn("disabled")}
+							isDisabled={true}
+						/>
+						{infrastructureMonitor.notifications.some(
+							(notification) => notification.type === "emails"
+						) ? (
+							<Box mx={theme.spacing(16)}>
+								<Field
+									id="notify-email-list"
+									type="text"
+									placeholder="name@gmail.com"
+									value=""
+									onChange={() => logger.warn("disabled")}
+								/>
+								<Typography mt={theme.spacing(4)}>
+									You can separate multiple emails with a comma
+								</Typography>
+							</Box>
+						) : (
+							""
+						)}
+					</Stack>
+				</ConfigBox>
+				<ConfigBox>
+					<Box>
+						<Typography component="h2">Advanced settings</Typography>
+					</Box>
+					<Stack gap={theme.spacing(12)}>
+						<Select
+							id="monitor-interval"
+							label="Check frequency"
+							value={infrastructureMonitor.interval || 1}
+							onChange={(event) => handleChange(event, "interval")}
+							items={frequencies}
+						/>
+					</Stack>
+				</ConfigBox>
+				<Stack
+					direction="row"
+					justifyContent="flex-end"
+				>
+					<LoadingButton
+						variant="contained"
+						color="primary"
+						onClick={handleCreateInfrastructureMonitor}
+						disabled={Object.keys(errors).length !== 0 && true}
+						loading={monitorState?.isLoading}
+					>
+						Create infrastructure monitor
+					</LoadingButton>
+				</Stack>
+			</Stack>
+		</Box>
+	);
+};
+
+export default CreateInfrastructureMonitor;

From 74eaf14c7cccc9005f487cf49989ebda19ca5414 Mon Sep 17 00:00:00 2001
From: Shemy Gan <jennifergan26@gmail.com>
Date: Thu, 31 Oct 2024 15:44:12 -0400
Subject: [PATCH 003/142] - Update infrastructure page based on figma

---
 .../CreateMonitor/index.jsx                   | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx b/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx
index 87c4c537c..252455b89 100644
--- a/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx
+++ b/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx
@@ -3,8 +3,7 @@ import { Box, Button, ButtonGroup, Stack, Typography } from "@mui/material";
 import LoadingButton from "@mui/lab/LoadingButton";
 import { useSelector, useDispatch } from "react-redux";
 import { monitorValidation } from "../../../Validation/validation";
-import { createUptimeMonitor } from "../../../Features/UptimeMonitors/uptimeMonitorsSlice";
-import { checkEndpointResolution } from "../../../Features/UptimeMonitors/uptimeMonitorsSlice";
+import { createInfrastructureMonitor, checkInfrastructureEndpointResolution } from "../../../Features/InfrastructureMonitors/infrastructureMonitorsSlice"
 import { useNavigate } from "react-router-dom";
 import { useTheme } from "@emotion/react";
 import { createToast } from "../../../Utils/toastUtils";
@@ -122,7 +121,7 @@ const CreateInfrastructureMonitor = () => {
 		} else {
 			if (infrastructureMonitor.type === "http") {
 				const checkEndpointAction = await dispatch(
-					checkEndpointResolution({ authToken, monitorURL: form.url })
+					checkInfrastructureEndpointResolution({ authToken, monitorURL: form.url })
 				);
 				if (checkEndpointAction.meta.requestStatus === "rejected") {
 					createToast({
@@ -140,10 +139,10 @@ const CreateInfrastructureMonitor = () => {
 				userId: user._id,
 				notifications: infrastructureMonitor.notifications,
 			};
-			const action = await dispatch(createUptimeMonitor({ authToken, monitor: form }));
+			const action = await dispatch(createInfrastructureMonitor({ authToken, monitor: form }));
 			if (action.meta.requestStatus === "fulfilled") {
-				createToast({ body: "Monitor created successfully!" });
-				navigate("/monitors");
+				createToast({ body: "Infrastructure monitor created successfully!" });
+				navigate("/infrastructure-monitors");
 			} else {
 				createToast({ body: "Failed to create monitor." });
 			}
@@ -152,11 +151,12 @@ const CreateInfrastructureMonitor = () => {
 
 	//select values
 	const frequencies = [
-		{ _id: 1, name: "1 minute" },
-		{ _id: 2, name: "2 minutes" },
-		{ _id: 3, name: "3 minutes" },
-		{ _id: 4, name: "4 minutes" },
+		{ _id: 1, name: "15 seconds" },
+		{ _id: 2, name: "30 seconds" },
+		{ _id: 3, name: "1 minute" },
+		{ _id: 4, name: "2 minutes" },
 		{ _id: 5, name: "5 minutes" },
+		{ _id: 6, name: "10 minutes" },
 	];
 
 	return (

From ba9bb505ed220564f9f3129942496a719d036097 Mon Sep 17 00:00:00 2001
From: Shemy Gan <jennifergan26@gmail.com>
Date: Mon, 4 Nov 2024 10:06:00 -0500
Subject: [PATCH 004/142] - update UI based on figma

---
 .../CreateMonitor/index.jsx                   | 21 ++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx b/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx
index 252455b89..91d1f351f 100644
--- a/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx
+++ b/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx
@@ -26,6 +26,7 @@ const CreateInfrastructureMonitor = () => {
 	const idMap = {
 		"monitor-url": "url",
 		"monitor-name": "name",
+		"monitor-secret": "secret",
 		"monitor-checks-http": "type",
 		"monitor-checks-ping": "type",
 		"notify-email-default": "notification-email",
@@ -142,7 +143,7 @@ const CreateInfrastructureMonitor = () => {
 			const action = await dispatch(createInfrastructureMonitor({ authToken, monitor: form }));
 			if (action.meta.requestStatus === "fulfilled") {
 				createToast({ body: "Infrastructure monitor created successfully!" });
-				navigate("/infrastructure-monitors");
+				navigate("/infrastructure-monitors/create");
 			} else {
 				createToast({ body: "Failed to create monitor." });
 			}
@@ -204,11 +205,10 @@ const CreateInfrastructureMonitor = () => {
 					</Box>
 					<Stack gap={theme.spacing(15)}>
 						<Field
-							type={infrastructureMonitor.type === "http" ? "url" : "text"}
+							type={"text"}
 							id="monitor-url"
-							label="URL to monitor"
-							https={https}
-							placeholder="google.com"
+							label="Server URL"
+							placeholder="https://"
 							value={infrastructureMonitor.url}
 							onChange={handleChange}
 							error={errors["url"]}
@@ -216,13 +216,20 @@ const CreateInfrastructureMonitor = () => {
 						<Field
 							type="text"
 							id="monitor-name"
-							label="Display name"
+							label="Friendly name(optional)"
 							isOptional={true}
-							placeholder="Google"
 							value={infrastructureMonitor.name}
 							onChange={handleChange}
 							error={errors["name"]}
 						/>
+						<Field
+							type="text"
+							id="monitor-secret"
+							label="Authorization secret"
+							value={infrastructureMonitor.secret}
+							onChange={handleChange}
+							error={errors["secret"]}
+						/>						
 					</Stack>
 				</ConfigBox>
 				<ConfigBox>

From bb8cfa798582f1df64c20aca812d2e70a58d8ef6 Mon Sep 17 00:00:00 2001
From: Shemy Gan <jennifergan26@gmail.com>
Date: Mon, 4 Nov 2024 21:02:28 -0500
Subject: [PATCH 005/142] - WIP

---
 .../CreateMonitor/index.jsx                   | 230 +++++++++++-------
 1 file changed, 141 insertions(+), 89 deletions(-)

diff --git a/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx b/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx
index 91d1f351f..1209225ba 100644
--- a/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx
+++ b/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx
@@ -229,70 +229,7 @@ const CreateInfrastructureMonitor = () => {
 							value={infrastructureMonitor.secret}
 							onChange={handleChange}
 							error={errors["secret"]}
-						/>						
-					</Stack>
-				</ConfigBox>
-				<ConfigBox>
-					<Box>
-						<Typography component="h2">Checks to perform</Typography>
-						<Typography component="p">
-							You can always add or remove checks after adding your site.
-						</Typography>
-					</Box>
-					<Stack gap={theme.spacing(12)}>
-						<Stack gap={theme.spacing(6)}>
-							<Radio
-								id="monitor-checks-http"
-								title="Website monitoring"
-								desc="Use HTTP(s) to monitor your website or API endpoint."
-								size="small"
-								value="http"
-								checked={infrastructureMonitor.type === "http"}
-								onChange={(event) => handleChange(event)}
-							/>
-							{infrastructureMonitor.type === "http" ? (
-								<ButtonGroup sx={{ ml: theme.spacing(16) }}>
-									<Button
-										variant="group"
-										filled={https.toString()}
-										onClick={() => setHttps(true)}
-									>
-										HTTPS
-									</Button>
-									<Button
-										variant="group"
-										filled={(!https).toString()}
-										onClick={() => setHttps(false)}
-									>
-										HTTP
-									</Button>
-								</ButtonGroup>
-							) : (
-								""
-							)}
-						</Stack>
-						<Radio
-							id="monitor-checks-ping"
-							title="Ping monitoring"
-							desc="Check whether your server is available or not."
-							size="small"
-							value="ping"
-							checked={infrastructureMonitor.type === "ping"}
-							onChange={(event) => handleChange(event)}
 						/>
-						{errors["type"] ? (
-							<Box className="error-container">
-								<Typography
-									component="p"
-									className="input-error"
-									color={theme.palette.error.text}
-								>
-									{errors["type"]}
-								</Typography>
-							</Box>
-						) : (
-							""
-						)}
 					</Stack>
 				</ConfigBox>
 				<ConfigBox>
@@ -304,14 +241,6 @@ const CreateInfrastructureMonitor = () => {
 					</Box>
 					<Stack gap={theme.spacing(6)}>
 						<Typography component="p">When there is a new incident,</Typography>
-						<Checkbox
-							id="notify-sms"
-							label="Notify via SMS (coming soon)"
-							isChecked={false}
-							value=""
-							onChange={() => logger.warn("disabled")}
-							isDisabled={true}
-						/>
 						<Checkbox
 							id="notify-email-default"
 							label={`Notify via email (to ${user.email})`}
@@ -329,26 +258,149 @@ const CreateInfrastructureMonitor = () => {
 							onChange={() => logger.warn("disabled")}
 							isDisabled={true}
 						/>
-						{infrastructureMonitor.notifications.some(
-							(notification) => notification.type === "emails"
-						) ? (
-							<Box mx={theme.spacing(16)}>
-								<Field
-									id="notify-email-list"
-									type="text"
-									placeholder="name@gmail.com"
-									value=""
-									onChange={() => logger.warn("disabled")}
-								/>
-								<Typography mt={theme.spacing(4)}>
-									You can separate multiple emails with a comma
-								</Typography>
-							</Box>
-						) : (
-							""
-						)}
+						<Box mx={theme.spacing(16)}>
+							<Field
+								id="notify-email-list"
+								type="text"
+								placeholder="name@gmail.com"
+								value=""
+								onChange={() => logger.warn("disabled")}
+							/>
+							<Typography mt={theme.spacing(4)}>
+								You can separate multiple emails with a comma
+							</Typography>
+						</Box>
 					</Stack>
 				</ConfigBox>
+
+				<ConfigBox>
+					<Box>
+						<Typography component="h2">Customize alerts</Typography>
+						<Typography component="p">
+							Send a notification to user(s) When the theresholds exceed a certain number
+							or percentage.
+						</Typography>
+					</Box>
+					<Stack
+						gap={theme.spacing(6)}
+					>
+						<Stack direction={"row"}
+						 sx={{
+									justifyContent: "space-between",
+									
+								}}
+						>
+							<Box>
+								<Checkbox
+									id="customize-cpu"
+									label={`CPU`}
+									value={user?.email}
+									onChange={(event) => handleChange(event)}
+								/>
+							</Box>
+							<Stack
+							direction={"row"}
+								sx={{
+									justifyContent: "flex-end",
+									alignItems: "center",
+								}}
+							>
+								<Field type="text"></Field>
+								<Typography
+									component="p"
+									m={theme.spacing(3)}
+								>
+									%
+								</Typography>
+							</Stack>
+						</Stack>
+						<Stack direction={"row"} 
+						sx={{
+									justifyContent: "space-between",
+									
+								}}>
+						
+							<Box>
+								<Checkbox
+									id="customize-memory"
+									label={`Memory`}
+									value={user?.email}
+									onChange={(event) => handleChange(event)}
+								/>
+							</Box>
+							<Stack
+							direction={"row"}
+								sx={{
+									justifyContent: "flex-end",
+									
+								}}
+							>
+							<Field type="text" sx={{flexGrow:3}}></Field>
+							<Typography
+								component="p"
+								m={theme.spacing(3)}
+							>
+								%
+							</Typography>
+							</Stack>							
+						</Stack>
+						<Stack
+							direction={"row"}
+							flexGrow={1}
+						>
+							<Box flex={0.1}>
+								<Checkbox
+									id="customize-disk"
+									label={`Disk`}
+									value={user?.email}
+									onChange={(event) => handleChange(event)}
+								/>
+							</Box>
+							<Field type="text"></Field>
+							<Typography
+								component="p"
+								m={theme.spacing(3)}
+							>
+								%
+							</Typography>
+						</Stack>
+						<Stack direction={"row"}>
+							<Box flex={0.1}>
+								<Checkbox
+									id="customize-temparature"
+									label={`Temparature`}
+									value={user?.email}
+									onChange={(event) => handleChange(event)}
+								/>
+							</Box>
+							<Field type="text"></Field>
+							<Typography
+								component="p"
+								m={theme.spacing(3)}
+							>
+								°C
+							</Typography>
+						</Stack>
+						<Stack direction={"row"}>
+							<Box flex={0.1}>
+								<Checkbox
+									id="customize-systemload"
+									label={`System load`}
+									value={user?.email}
+									onChange={(event) => handleChange(event)}
+								/>
+							</Box>
+							<Field type="text"></Field>
+							<Typography
+								component="p"
+								m={theme.spacing(3)}
+							>
+								%
+							</Typography>
+						</Stack>
+					</Stack>
+				</ConfigBox>
+
 				<ConfigBox>
 					<Box>
 						<Typography component="h2">Advanced settings</Typography>

From 4452cb90e64d1554b015a537740a99fbb063f526 Mon Sep 17 00:00:00 2001
From: Shemy Gan <jennifergan26@gmail.com>
Date: Tue, 5 Nov 2024 14:20:17 -0500
Subject: [PATCH 006/142] - WIP

---
 .../CreateMonitor/index.jsx                   | 180 +++++++++++-------
 1 file changed, 113 insertions(+), 67 deletions(-)

diff --git a/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx b/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx
index 1209225ba..cb6a33555 100644
--- a/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx
+++ b/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx
@@ -3,7 +3,10 @@ import { Box, Button, ButtonGroup, Stack, Typography } from "@mui/material";
 import LoadingButton from "@mui/lab/LoadingButton";
 import { useSelector, useDispatch } from "react-redux";
 import { monitorValidation } from "../../../Validation/validation";
-import { createInfrastructureMonitor, checkInfrastructureEndpointResolution } from "../../../Features/InfrastructureMonitors/infrastructureMonitorsSlice"
+import {
+	createInfrastructureMonitor,
+	checkInfrastructureEndpointResolution,
+} from "../../../Features/InfrastructureMonitors/infrastructureMonitorsSlice";
 import { useNavigate } from "react-router-dom";
 import { useTheme } from "@emotion/react";
 import { createToast } from "../../../Utils/toastUtils";
@@ -140,7 +143,9 @@ const CreateInfrastructureMonitor = () => {
 				userId: user._id,
 				notifications: infrastructureMonitor.notifications,
 			};
-			const action = await dispatch(createInfrastructureMonitor({ authToken, monitor: form }));
+			const action = await dispatch(
+				createInfrastructureMonitor({ authToken, monitor: form })
+			);
 			if (action.meta.requestStatus === "fulfilled") {
 				createToast({ body: "Infrastructure monitor created successfully!" });
 				navigate("/infrastructure-monitors/create");
@@ -281,28 +286,60 @@ const CreateInfrastructureMonitor = () => {
 							or percentage.
 						</Typography>
 					</Box>
-					<Stack
-						gap={theme.spacing(6)}
-					>
-						<Stack direction={"row"}
-						 sx={{
-									justifyContent: "space-between",
-									
-								}}
+					<Stack gap={theme.spacing(6)}>
+						<Stack
+							direction={"row"}
+							sx={{
+								justifyContent: "space-between",
+								width: "75%",
+							}}
 						>
 							<Box>
 								<Checkbox
 									id="customize-cpu"
 									label={`CPU`}
-									value={user?.email}
+									value={true}
 									onChange={(event) => handleChange(event)}
 								/>
 							</Box>
 							<Stack
-							direction={"row"}
+								direction={"row"}
+								sx={{
+									justifyContent: "flex-end",
+								}}
+							>
+								<Box>
+									<Field type="text"></Field>
+								</Box>
+								<Box>
+									<Typography
+										component="p"
+										m={theme.spacing(3)}
+									>
+										%
+									</Typography>
+								</Box>
+							</Stack>
+						</Stack>
+						<Stack
+							direction={"row"}
+							sx={{
+								width: "75%",
+								justifyContent: "space-between",
+							}}
+						>
+							<Box>
+								<Checkbox
+									id="customize-memory"
+									label={`Memory`}
+									value={true}
+									onChange={(event) => handleChange(event)}
+								/>
+							</Box>
+							<Stack
+								direction={"row"}
 								sx={{
 									justifyContent: "flex-end",
-									alignItems: "center",
 								}}
 							>
 								<Field type="text"></Field>
@@ -314,41 +351,15 @@ const CreateInfrastructureMonitor = () => {
 								</Typography>
 							</Stack>
 						</Stack>
-						<Stack direction={"row"} 
-						sx={{
-									justifyContent: "space-between",
-									
-								}}>
-						
-							<Box>
-								<Checkbox
-									id="customize-memory"
-									label={`Memory`}
-									value={user?.email}
-									onChange={(event) => handleChange(event)}
-								/>
-							</Box>
-							<Stack
-							direction={"row"}
-								sx={{
-									justifyContent: "flex-end",
-									
-								}}
-							>
-							<Field type="text" sx={{flexGrow:3}}></Field>
-							<Typography
-								component="p"
-								m={theme.spacing(3)}
-							>
-								%
-							</Typography>
-							</Stack>							
-						</Stack>
+
 						<Stack
 							direction={"row"}
-							flexGrow={1}
+							sx={{
+								width: "75%",
+								justifyContent: "space-between",
+							}}
 						>
-							<Box flex={0.1}>
+							<Box>
 								<Checkbox
 									id="customize-disk"
 									label={`Disk`}
@@ -356,16 +367,30 @@ const CreateInfrastructureMonitor = () => {
 									onChange={(event) => handleChange(event)}
 								/>
 							</Box>
-							<Field type="text"></Field>
-							<Typography
-								component="p"
-								m={theme.spacing(3)}
+							<Stack
+								direction={"row"}
+								sx={{
+									justifyContent: "flex-end",
+								}}
 							>
-								%
-							</Typography>
+								<Field type="text"></Field>
+								<Typography
+									component="p"
+									m={theme.spacing(3)}
+								>
+									%
+								</Typography>
+							</Stack>
 						</Stack>
-						<Stack direction={"row"}>
-							<Box flex={0.1}>
+
+						<Stack
+							direction={"row"}
+							sx={{
+								width: "75%",
+								justifyContent: "space-between",
+							}}
+						>
+							<Box>
 								<Checkbox
 									id="customize-temparature"
 									label={`Temparature`}
@@ -373,16 +398,30 @@ const CreateInfrastructureMonitor = () => {
 									onChange={(event) => handleChange(event)}
 								/>
 							</Box>
-							<Field type="text"></Field>
-							<Typography
-								component="p"
-								m={theme.spacing(3)}
+							<Stack
+								direction={"row"}
+								sx={{
+									justifyContent: "flex-end",
+								}}
 							>
-								°C
-							</Typography>
+								<Field type="text"></Field>
+								<Typography
+									component="p"
+									m={theme.spacing(3)}
+								>
+									°C
+								</Typography>
+							</Stack>
 						</Stack>
-						<Stack direction={"row"}>
-							<Box flex={0.1}>
+
+						<Stack
+							direction={"row"}
+							sx={{
+								width: "75%",
+								justifyContent: "space-between",
+							}}
+						>
+							<Box>
 								<Checkbox
 									id="customize-systemload"
 									label={`System load`}
@@ -390,13 +429,20 @@ const CreateInfrastructureMonitor = () => {
 									onChange={(event) => handleChange(event)}
 								/>
 							</Box>
-							<Field type="text"></Field>
-							<Typography
-								component="p"
-								m={theme.spacing(3)}
+							<Stack
+								direction={"row"}
+								sx={{
+									justifyContent: "flex-end",
+								}}
 							>
-								%
-							</Typography>
+								<Field type="text"></Field>
+								<Typography
+									component="p"
+									m={theme.spacing(3)}
+								>
+									%
+								</Typography>
+							</Stack>
 						</Stack>
 					</Stack>
 				</ConfigBox>

From 63cb4e7f1d8c0a4451d6ab6d4ae38fc6d1770995 Mon Sep 17 00:00:00 2001
From: Shemy Gan <jennifergan26@gmail.com>
Date: Wed, 6 Nov 2024 11:13:02 -0500
Subject: [PATCH 007/142] - Add basic joi validation to match what's available
 in BE - Extract/ refactor the custom alert section to its own function - WIP
 UI added custom alert section, retain log section and maxreties in advaced
 setting section - Extend Field component to accomodate for custom alert
 narrower text field

---
 Client/src/Components/Inputs/Field/index.css  |   9 +
 Client/src/Components/Inputs/Field/index.jsx  |   4 +-
 .../infrastructureMonitorsSlice.js            |   3 +-
 .../CreateMonitor/index.jsx                   | 305 ++++++++----------
 Client/src/Validation/validation.js           |  24 ++
 5 files changed, 170 insertions(+), 175 deletions(-)

diff --git a/Client/src/Components/Inputs/Field/index.css b/Client/src/Components/Inputs/Field/index.css
index 2d251e4bf..3dfaf6142 100644
--- a/Client/src/Components/Inputs/Field/index.css
+++ b/Client/src/Components/Inputs/Field/index.css
@@ -1,6 +1,15 @@
 .field {
 	min-width: 250px;
 }
+
+.field-infrastructure-alert {
+	max-width: 100px;
+}
+
+.field-infrastructure-alert .MuiInputBase-root:has(input) {
+	height: 34px;
+}
+
 .field h3.MuiTypography-root,
 .field h5.MuiTypography-root,
 .field input,
diff --git a/Client/src/Components/Inputs/Field/index.jsx b/Client/src/Components/Inputs/Field/index.jsx
index 4ead8a705..0e52dda2d 100644
--- a/Client/src/Components/Inputs/Field/index.jsx
+++ b/Client/src/Components/Inputs/Field/index.jsx
@@ -46,6 +46,7 @@ const Field = forwardRef(
 			error,
 			disabled,
 			hidden,
+			className
 		},
 		ref
 	) => {
@@ -56,7 +57,7 @@ const Field = forwardRef(
 		return (
 			<Stack
 				gap={theme.spacing(2)}
-				className={`field field-${type}`}
+				className={`${className ?? `field field-${type}`}`}
 				sx={{
 					"& fieldset": {
 						borderColor: theme.palette.border.dark,
@@ -223,6 +224,7 @@ Field.propTypes = {
 	error: PropTypes.string,
 	disabled: PropTypes.bool,
 	hidden: PropTypes.bool,
+	className: PropTypes.string
 };
 
 export default Field;
diff --git a/Client/src/Features/InfrastructureMonitors/infrastructureMonitorsSlice.js b/Client/src/Features/InfrastructureMonitors/infrastructureMonitorsSlice.js
index 24b3500ac..b593edff3 100644
--- a/Client/src/Features/InfrastructureMonitors/infrastructureMonitorsSlice.js
+++ b/Client/src/Features/InfrastructureMonitors/infrastructureMonitorsSlice.js
@@ -86,7 +86,7 @@ export const getInfrastructureMonitorsByTeamId = createAsyncThunk(
 			const res = await networkService.getMonitorsAndSummaryByTeamId({
 				authToken: token,
 				teamId: user.teamId,
-				types: ["http", "ping"],
+				types: ["hardware"],
 			});
 			return res.data;
 		} catch (error) {
@@ -112,6 +112,7 @@ export const updateInfrastructureMonitor = createAsyncThunk(
 				description: monitor.description,
 				interval: monitor.interval,
 				notifications: monitor.notifications,
+				threshold: monitor.threshold
 			};
 			const res = await networkService.updateMonitor({
 				authToken: authToken,
diff --git a/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx b/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx
index cb6a33555..02f4ae853 100644
--- a/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx
+++ b/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx
@@ -1,8 +1,8 @@
 import { useState } from "react";
-import { Box, Button, ButtonGroup, Stack, Typography } from "@mui/material";
+import { Box, Stack, Typography } from "@mui/material";
 import LoadingButton from "@mui/lab/LoadingButton";
 import { useSelector, useDispatch } from "react-redux";
-import { monitorValidation } from "../../../Validation/validation";
+import { infrastractureMonitorValidation } from "../../../Validation/validation";
 import {
 	createInfrastructureMonitor,
 	checkInfrastructureEndpointResolution,
@@ -12,13 +12,63 @@ import { useTheme } from "@emotion/react";
 import { createToast } from "../../../Utils/toastUtils";
 import { logger } from "../../../Utils/Logger";
 import { ConfigBox } from "../../Monitors/styled";
-import Radio from "../../../Components/Inputs/Radio";
 import Field from "../../../Components/Inputs/Field";
 import Select from "../../../Components/Inputs/Select";
 import Checkbox from "../../../Components/Inputs/Checkbox";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
 
 const CreateInfrastructureMonitor = () => {
+	const CustomAlertStack = ({
+		checkboxId,
+		checkboxLabel,
+		checkboxValue,		
+		isChecked,
+		onChange,
+		fieldId,
+		fieldValue,
+		alertUnit,
+	}) => {
+		console.log("fieldValue")
+		console.log(fieldValue)
+		return (
+		<Stack
+			direction={"row"}
+			sx={{
+				width: "50%",
+				justifyContent: "space-between",
+			}}
+		>
+			<Box>
+				<Checkbox
+					id={checkboxId}
+					label={checkboxLabel}
+					value={checkboxValue??""}
+					isChecked= {isChecked??false}
+					onChange={onChange}
+				/>
+			</Box>
+			<Stack
+				direction={"row"}
+				sx={{
+					justifyContent: "flex-end",
+				}}
+			>
+				<Field
+					type="number"
+					className="field-infrastructure-alert"
+					id={fieldId}
+					value={fieldValue}
+				></Field>
+				<Typography
+					component="p"
+					m={theme.spacing(3)}
+				>
+					{alertUnit}
+				</Typography>
+			</Stack>
+		</Stack>
+	);}
+
 	const MS_PER_MINUTE = 60000;
 	const { user, authToken } = useSelector((state) => state.auth);
 	const monitorState = useSelector((state) => state.infrastructureMonitor);
@@ -30,19 +80,16 @@ const CreateInfrastructureMonitor = () => {
 		"monitor-url": "url",
 		"monitor-name": "name",
 		"monitor-secret": "secret",
-		"monitor-checks-http": "type",
-		"monitor-checks-ping": "type",
 		"notify-email-default": "notification-email",
 	};
 
 	const [infrastructureMonitor, setInfrastructureMonitor] = useState({
 		url: "",
 		name: "",
-		type: "http",
 		notifications: [],
 		interval: 1,
+		threshold: {cpu: "", disk: "", memory: ""}
 	});
-	const [https, setHttps] = useState(true);
 	const [errors, setErrors] = useState({});
 
 	const handleChange = (event, name) => {
@@ -80,7 +127,7 @@ const CreateInfrastructureMonitor = () => {
 				[name]: value,
 			}));
 
-			const { error } = monitorValidation.validate(
+			const { error } = infrastractureMonitorValidation.validate(
 				{ [name]: value },
 				{ abortEarly: false }
 			);
@@ -98,20 +145,15 @@ const CreateInfrastructureMonitor = () => {
 		event.preventDefault();
 		//obj to submit
 		let form = {
-			url:
-				//preprending protocol for url
-				infrastructureMonitor.type === "http"
-					? `http${https ? "s" : ""}://` + infrastructureMonitor.url
-					: infrastructureMonitor.url,
+			url:infrastructureMonitor.url,
 			name:
 				infrastructureMonitor.name === ""
 					? infrastructureMonitor.url
 					: infrastructureMonitor.name,
-			type: infrastructureMonitor.type,
 			interval: infrastructureMonitor.interval * MS_PER_MINUTE,
 		};
 
-		const { error } = monitorValidation.validate(form, {
+		const { error } =infrastractureMonitorValidation.validate(form, {
 			abortEarly: false,
 		});
 
@@ -287,166 +329,75 @@ const CreateInfrastructureMonitor = () => {
 						</Typography>
 					</Box>
 					<Stack gap={theme.spacing(6)}>
-						<Stack
-							direction={"row"}
-							sx={{
-								justifyContent: "space-between",
-								width: "75%",
-							}}
-						>
-							<Box>
-								<Checkbox
-									id="customize-cpu"
-									label={`CPU`}
-									value={true}
-									onChange={(event) => handleChange(event)}
-								/>
-							</Box>
-							<Stack
-								direction={"row"}
-								sx={{
-									justifyContent: "flex-end",
-								}}
-							>
-								<Box>
-									<Field type="text"></Field>
-								</Box>
-								<Box>
-									<Typography
-										component="p"
-										m={theme.spacing(3)}
-									>
-										%
-									</Typography>
-								</Box>
-							</Stack>
-						</Stack>
-						<Stack
-							direction={"row"}
-							sx={{
-								width: "75%",
-								justifyContent: "space-between",
-							}}
-						>
-							<Box>
-								<Checkbox
-									id="customize-memory"
-									label={`Memory`}
-									value={true}
-									onChange={(event) => handleChange(event)}
-								/>
-							</Box>
-							<Stack
-								direction={"row"}
-								sx={{
-									justifyContent: "flex-end",
-								}}
-							>
-								<Field type="text"></Field>
-								<Typography
-									component="p"
-									m={theme.spacing(3)}
-								>
-									%
-								</Typography>
-							</Stack>
-						</Stack>
-
-						<Stack
-							direction={"row"}
-							sx={{
-								width: "75%",
-								justifyContent: "space-between",
-							}}
-						>
-							<Box>
-								<Checkbox
-									id="customize-disk"
-									label={`Disk`}
-									value={user?.email}
-									onChange={(event) => handleChange(event)}
-								/>
-							</Box>
-							<Stack
-								direction={"row"}
-								sx={{
-									justifyContent: "flex-end",
-								}}
-							>
-								<Field type="text"></Field>
-								<Typography
-									component="p"
-									m={theme.spacing(3)}
-								>
-									%
-								</Typography>
-							</Stack>
-						</Stack>
-
-						<Stack
-							direction={"row"}
-							sx={{
-								width: "75%",
-								justifyContent: "space-between",
-							}}
-						>
-							<Box>
-								<Checkbox
-									id="customize-temparature"
-									label={`Temparature`}
-									value={user?.email}
-									onChange={(event) => handleChange(event)}
-								/>
-							</Box>
-							<Stack
-								direction={"row"}
-								sx={{
-									justifyContent: "flex-end",
-								}}
-							>
-								<Field type="text"></Field>
-								<Typography
-									component="p"
-									m={theme.spacing(3)}
-								>
-									°C
-								</Typography>
-							</Stack>
-						</Stack>
-
-						<Stack
-							direction={"row"}
-							sx={{
-								width: "75%",
-								justifyContent: "space-between",
-							}}
-						>
-							<Box>
-								<Checkbox
-									id="customize-systemload"
-									label={`System load`}
-									value={user?.email}
-									onChange={(event) => handleChange(event)}
-								/>
-							</Box>
-							<Stack
-								direction={"row"}
-								sx={{
-									justifyContent: "flex-end",
-								}}
-							>
-								<Field type="text"></Field>
-								<Typography
-									component="p"
-									m={theme.spacing(3)}
-								>
-									%
-								</Typography>
-							</Stack>
-						</Stack>
+						<CustomAlertStack
+							checkboxId="customize-cpu"
+							checkboxLabel="CPU"
+							checkboxValue={""}
+							fieldId={"usage_cpu"}
+							fieldValue={infrastructureMonitor.threshold['cpu']??""}
+							onChange={(event) => handleChange(event)}
+							alertUnit="%"
+						/>
+						<CustomAlertStack
+							checkboxId="customize-memory"
+							checkboxLabel="Memory"
+							checkboxValue={""}
+							fieldId={"usage_memory"}
+							fieldValue={infrastructureMonitor.threshold['memory']??""}
+							onChange={(event) => handleChange(event)}
+							alertUnit="%"
+						/>
+						<CustomAlertStack
+							checkboxId="customize-disk"
+							checkboxLabel="Disk"
+							checkboxValue={""}
+							fieldId={"usage_disk"}
+							fieldValue={infrastructureMonitor.threshold['disk']??""}
+							onChange={(event) => handleChange(event)}
+							alertUnit="%"
+						/>
+						{/* <CustomAlertStack
+							checkboxId="customize-temperature"
+							checkboxLabel="Temperature"
+							checkboxValue={true}
+							onChange={(event) => handleChange(event)}
+							alertUnit="°C"
+						/>
+						<CustomAlertStack
+							checkboxId="customize-systemload"
+							checkboxLabel="System load"
+							checkboxValue={true}
+							onChange={(event) => handleChange(event)}
+							alertUnit="%"
+						/>
+						<CustomAlertStack
+							checkboxId="customize-swap"
+							checkboxLabel="Swap used"
+							checkboxValue={""}
+							onChange={(event) => handleChange(event)}
+							alertUnit="%"
+						/> */}
 					</Stack>
 				</ConfigBox>
-
+				<ConfigBox>
+					<Box>
+						<Typography component="h2">Logging retention</Typography>
+						<Typography component="p">
+							Configure how logn logs are stored. After this period, the Uptime Manager
+							will start deleting oldest data.
+						</Typography>
+					</Box>
+					{/* <Stack gap={theme.spacing(6)}>
+						<CustomAlertStack
+							checkboxId="retain-log"
+							checkboxLabel="Retain data for"
+							checkboxValue={""}
+							fieldId={"retries_max"}
+							onChange={(event) => handleChange(event)}
+							alertUnit="days"
+						/>
+					</Stack> */}
+				</ConfigBox>
 				<ConfigBox>
 					<Box>
 						<Typography component="h2">Advanced settings</Typography>
@@ -459,6 +410,14 @@ const CreateInfrastructureMonitor = () => {
 							onChange={(event) => handleChange(event, "interval")}
 							items={frequencies}
 						/>
+						<Field
+							type={"text"}
+							id="monitor-retries"
+							label="Maximum retries before the service is marked as down"
+							value={infrastructureMonitor.url}
+							onChange={handleChange}
+							error={errors["url"]}
+						/>						
 					</Stack>
 				</ConfigBox>
 				<Stack
diff --git a/Client/src/Validation/validation.js b/Client/src/Validation/validation.js
index 7ac5ae40c..898ff862b 100644
--- a/Client/src/Validation/validation.js
+++ b/Client/src/Validation/validation.js
@@ -173,6 +173,29 @@ const advancedSettingsValidation = joi.object({
 	pagespeedApiKey: joi.string().allow(""),
 });
 
+const infrastractureMonitorValidation = joi.object({
+	url: joi.string().uri({ allowRelative: true }).trim().messages({
+		"string.empty": "This field is required.",
+		"string.uri": "The URL you provided is not valid.",
+	}),
+	name: joi.string().trim().max(50).allow("").messages({
+		"string.max": "This field should not exceed the 50 characters limit.",
+	}),
+	type: joi.string().trim().messages({ "string.empty": "This field is required." }),
+	usage_cpu: joi.number(),
+	usage_memory: joi.number(),
+	usage_disk: joi.number(),
+	// usage_temperature: joi.number().messages({
+	// 	"number.base": "Temperature must be a number.",
+	// }),
+	// usage_system: joi.number().messages({
+	// 	"number.base": "System load must be a number.",
+	// }),
+	// usage_swap: joi.number().messages({
+	// 	"number.base": "Swap used must be a number.",
+	// }),
+});
+
 export {
 	credentials,
 	imageValidation,
@@ -180,4 +203,5 @@ export {
 	settingsValidation,
 	maintenanceWindowValidation,
 	advancedSettingsValidation,
+	infrastractureMonitorValidation
 };

From a027b335bf9f90ba596f36fa9bc319d3f03d66ed Mon Sep 17 00:00:00 2001
From: Shemy Gan <jennifergan26@gmail.com>
Date: Wed, 6 Nov 2024 11:14:11 -0500
Subject: [PATCH 008/142] - Correct/comment out this line, this seems a mistake

---
 Client/src/Components/Inputs/Checkbox/index.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Client/src/Components/Inputs/Checkbox/index.jsx b/Client/src/Components/Inputs/Checkbox/index.jsx
index 7d9a31bd3..28643ce3a 100644
--- a/Client/src/Components/Inputs/Checkbox/index.jsx
+++ b/Client/src/Components/Inputs/Checkbox/index.jsx
@@ -65,7 +65,7 @@ const Checkbox = ({
 			sx={{
 				borderRadius: theme.shape.borderRadius,
 				p: theme.spacing(2.5),
-				m: theme.spacing(-2.5),
+				//m: theme.spacing(-2.5),
 				"& .MuiButtonBase-root": {
 					width: theme.spacing(10),
 					p: 0,

From 9237f46e7ca91f00c665d73941b376272650e474 Mon Sep 17 00:00:00 2001
From: Shemy Gan <jennifergan26@gmail.com>
Date: Thu, 7 Nov 2024 15:26:22 -0500
Subject: [PATCH 009/142] - handle Validation onBlur , special cases for usage
 numbers required on condition of checkbox checked - handle generate payload
 correspondant to BE format - comment out retain log period,retry max and 3
 other usage threshold currently not avalable yet in BE

---
 .../CreateMonitor/index.jsx                   | 267 ++++++++++--------
 Client/src/Validation/error.js                |   4 +
 Client/src/Validation/validation.js           |  16 +-
 3 files changed, 168 insertions(+), 119 deletions(-)

diff --git a/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx b/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx
index 02f4ae853..1997e3714 100644
--- a/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx
+++ b/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx
@@ -16,21 +16,40 @@ import Field from "../../../Components/Inputs/Field";
 import Select from "../../../Components/Inputs/Select";
 import Checkbox from "../../../Components/Inputs/Checkbox";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
+import { buildErrors, hasValidationErrors } from "../../../Validation/error";
 
 const CreateInfrastructureMonitor = () => {
+	const [infrastructureMonitor, setInfrastructureMonitor] = useState({
+		url: "",
+		name: "",
+		notifications: [],
+		interval: 1,
+		cpu: false,
+		usage_cpu: "",
+		secret: "",
+	});
+
+	const MS_PER_MINUTE = 60000;
+	const { user, authToken } = useSelector((state) => state.auth);
+	const monitorState = useSelector((state) => state.infrastructureMonitor);
+	const dispatch = useDispatch();
+	const navigate = useNavigate();
+	const theme = useTheme();
+
+	const idMap = {
+		"notify-email-default": "notification-email",
+	};
+
+	const [errors, setErrors] = useState({});
+
 	const CustomAlertStack = ({
 		checkboxId,
 		checkboxLabel,
-		checkboxValue,		
-		isChecked,
-		onChange,
 		fieldId,
-		fieldValue,
 		alertUnit,
-	}) => {
-		console.log("fieldValue")
-		console.log(fieldValue)
-		return (
+		onChange,
+		onBlur,
+	}) => (
 		<Stack
 			direction={"row"}
 			sx={{
@@ -42,9 +61,8 @@ const CreateInfrastructureMonitor = () => {
 				<Checkbox
 					id={checkboxId}
 					label={checkboxLabel}
-					value={checkboxValue??""}
-					isChecked= {isChecked??false}
-					onChange={onChange}
+					isChecked={infrastructureMonitor[checkboxId]}
+					onChange={handleCustomAlertCheckChange}
 				/>
 			</Box>
 			<Stack
@@ -57,7 +75,11 @@ const CreateInfrastructureMonitor = () => {
 					type="number"
 					className="field-infrastructure-alert"
 					id={fieldId}
-					value={fieldValue}
+					value={infrastructureMonitor[fieldId]}
+					onBlur={onBlur}
+					onChange={onChange}
+					error={errors[`${fieldId}`]}
+					disabled={!infrastructureMonitor[checkboxId]}
 				></Field>
 				<Typography
 					component="p"
@@ -67,34 +89,43 @@ const CreateInfrastructureMonitor = () => {
 				</Typography>
 			</Stack>
 		</Stack>
-	);}
+	);
 
-	const MS_PER_MINUTE = 60000;
-	const { user, authToken } = useSelector((state) => state.auth);
-	const monitorState = useSelector((state) => state.infrastructureMonitor);
-	const dispatch = useDispatch();
-	const navigate = useNavigate();
-	const theme = useTheme();
-
-	const idMap = {
-		"monitor-url": "url",
-		"monitor-name": "name",
-		"monitor-secret": "secret",
-		"notify-email-default": "notification-email",
+	const handleCustomAlertCheckChange = (event) => {
+		const { value, id } = event.target;
+		setInfrastructureMonitor((prev) => {
+			const newState = {
+				[id]: prev[id] == undefined && value == "on" ? true : !prev[id],
+			};
+			return {
+				...prev,
+				...newState,
+				[`usage_${id}`]: newState[id] ? prev[`usage_${id}`] : "",
+			};
+		});
+		// Remove the error if unchecked
+		setErrors((prev) => {
+			return buildErrors(prev, [`usage_${id}`]);
+		});
 	};
 
-	const [infrastructureMonitor, setInfrastructureMonitor] = useState({
-		url: "",
-		name: "",
-		notifications: [],
-		interval: 1,
-		threshold: {cpu: "", disk: "", memory: ""}
-	});
-	const [errors, setErrors] = useState({});
-
-	const handleChange = (event, name) => {
+	const handleBlur = (event) => {
 		const { value, id } = event.target;
-		if (!name) name = idMap[id];
+		const { error } = infrastractureMonitorValidation.validate(
+			{ [id]: value },
+			{
+				abortEarly: false,
+			}
+		);
+		setErrors((prev) => {
+			return buildErrors(prev, id, 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-", "");
@@ -126,67 +157,59 @@ const CreateInfrastructureMonitor = () => {
 				...prev,
 				[name]: value,
 			}));
-
-			const { error } = infrastractureMonitorValidation.validate(
-				{ [name]: value },
-				{ abortEarly: false }
-			);
-			console.log(error);
-			setErrors((prev) => {
-				const updatedErrors = { ...prev };
-				if (error) updatedErrors[name] = error.details[0].message;
-				else delete updatedErrors[name];
-				return updatedErrors;
-			});
 		}
 	};
 
+	const generatePayload = (form) => {
+		let thresholds = {};
+		thresholds.usage_cpu = form.usage_cpu;
+		thresholds.usage_memory = form.usage_memory;
+		thresholds.usage_disk = form.usage_disk;
+
+		delete form.cpu;
+		delete form.memory;
+		delete form.disk;
+
+		delete form.usage_cpu;
+		delete form.usage_memory;
+		delete form.usage_disk;
+		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();
-		//obj to submit
 		let form = {
-			url:infrastructureMonitor.url,
+			...infrastructureMonitor,
 			name:
 				infrastructureMonitor.name === ""
 					? infrastructureMonitor.url
 					: infrastructureMonitor.name,
 			interval: infrastructureMonitor.interval * MS_PER_MINUTE,
 		};
-
-		const { error } =infrastractureMonitorValidation.validate(form, {
-			abortEarly: false,
-		});
-
-		if (error) {
-			const newErrors = {};
-			error.details.forEach((err) => {
-				newErrors[err.path[0]] = err.message;
-			});
-			setErrors(newErrors);
-			createToast({ body: "Error validation data." });
+		delete form.notifications;
+		if (hasValidationErrors(form, infrastractureMonitorValidation, setErrors)) {
+			return;
 		} else {
-			if (infrastructureMonitor.type === "http") {
-				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 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;
 			}
-
-			form = {
-				...form,
-				description: form.name,
-				teamId: user.teamId,
-				userId: user._id,
-				notifications: infrastructureMonitor.notifications,
-			};
 			const action = await dispatch(
-				createInfrastructureMonitor({ authToken, monitor: form })
+				createInfrastructureMonitor({ authToken, monitor: generatePayload(form) })
 			);
 			if (action.meta.requestStatus === "fulfilled") {
 				createToast({ body: "Infrastructure monitor created successfully!" });
@@ -199,12 +222,12 @@ const CreateInfrastructureMonitor = () => {
 
 	//select values
 	const frequencies = [
-		{ _id: 1, name: "15 seconds" },
-		{ _id: 2, name: "30 seconds" },
-		{ _id: 3, name: "1 minute" },
-		{ _id: 4, name: "2 minutes" },
-		{ _id: 5, name: "5 minutes" },
-		{ _id: 6, name: "10 minutes" },
+		{ _id: 15, name: "15 seconds" },
+		{ _id: 30, name: "30 seconds" },
+		{ _id: 60, name: "1 minute" },
+		{ _id: 120, name: "2 minutes" },
+		{ _id: 300, name: "5 minutes" },
+		{ _id: 600, name: "10 minutes" },
 	];
 
 	return (
@@ -252,28 +275,31 @@ const CreateInfrastructureMonitor = () => {
 					</Box>
 					<Stack gap={theme.spacing(15)}>
 						<Field
-							type={"text"}
-							id="monitor-url"
+							type="text"
+							id="url"
 							label="Server URL"
 							placeholder="https://"
 							value={infrastructureMonitor.url}
+							onBlur={handleBlur}
 							onChange={handleChange}
 							error={errors["url"]}
 						/>
 						<Field
 							type="text"
-							id="monitor-name"
+							id="name"
 							label="Friendly name(optional)"
 							isOptional={true}
 							value={infrastructureMonitor.name}
+							onBlur={handleBlur}
 							onChange={handleChange}
 							error={errors["name"]}
 						/>
 						<Field
 							type="text"
-							id="monitor-secret"
+							id="secret"
 							label="Authorization secret"
 							value={infrastructureMonitor.secret}
+							onBlur={handleBlur}
 							onChange={handleChange}
 							error={errors["secret"]}
 						/>
@@ -295,7 +321,8 @@ const CreateInfrastructureMonitor = () => {
 								(notification) => notification.type === "email"
 							)}
 							value={user?.email}
-							onChange={(event) => handleChange(event)}
+							onChange={(e) => handleChange(e)}
+							onBlur={handleBlur}
 						/>
 						<Checkbox
 							id="notify-email"
@@ -303,6 +330,7 @@ const CreateInfrastructureMonitor = () => {
 							isChecked={false}
 							value=""
 							onChange={() => logger.warn("disabled")}
+							onBlur={handleBlur}
 							isDisabled={true}
 						/>
 						<Box mx={theme.spacing(16)}>
@@ -312,6 +340,7 @@ const CreateInfrastructureMonitor = () => {
 								placeholder="name@gmail.com"
 								value=""
 								onChange={() => logger.warn("disabled")}
+								onBlur={handleBlur}
 							/>
 							<Typography mt={theme.spacing(4)}>
 								You can separate multiple emails with a comma
@@ -330,51 +359,57 @@ const CreateInfrastructureMonitor = () => {
 					</Box>
 					<Stack gap={theme.spacing(6)}>
 						<CustomAlertStack
-							checkboxId="customize-cpu"
+							checkboxId="cpu"
 							checkboxLabel="CPU"
 							checkboxValue={""}
 							fieldId={"usage_cpu"}
-							fieldValue={infrastructureMonitor.threshold['cpu']??""}
-							onChange={(event) => handleChange(event)}
+							fieldValue={infrastructureMonitor.usage_cpu ?? ""}
+							onChange={handleChange}
+							onBlur={handleBlur}
 							alertUnit="%"
 						/>
-						<CustomAlertStack
-							checkboxId="customize-memory"
+						{/* <CustomAlertStack
+							checkboxId="memory"
 							checkboxLabel="Memory"
 							checkboxValue={""}
 							fieldId={"usage_memory"}
-							fieldValue={infrastructureMonitor.threshold['memory']??""}
-							onChange={(event) => handleChange(event)}
+							fieldValue={infrastructureMonitor.usage_memory??""}
+							onChange={handleChange}
+							onBlur={handleBlur}
 							alertUnit="%"
 						/>
 						<CustomAlertStack
-							checkboxId="customize-disk"
+							checkboxId="disk"
 							checkboxLabel="Disk"
 							checkboxValue={""}
 							fieldId={"usage_disk"}
-							fieldValue={infrastructureMonitor.threshold['disk']??""}
-							onChange={(event) => handleChange(event)}
+							fieldValue={infrastructureMonitor.usage_disk??""}
+							onChange={handleChange}
+							onBlur={handleBlur}
 							alertUnit="%"
-						/>
+						/> */}
 						{/* <CustomAlertStack
 							checkboxId="customize-temperature"
 							checkboxLabel="Temperature"
 							checkboxValue={true}
-							onChange={(event) => handleChange(event)}
+							onChange={handleChange}
+							onBlur={handleBlur}
 							alertUnit="°C"
 						/>
 						<CustomAlertStack
 							checkboxId="customize-systemload"
 							checkboxLabel="System load"
 							checkboxValue={true}
-							onChange={(event) => handleChange(event)}
+							onChange={handleChange}
+							onBlur={handleBlur}
 							alertUnit="%"
 						/>
 						<CustomAlertStack
 							checkboxId="customize-swap"
 							checkboxLabel="Swap used"
-							checkboxValue={""}
-							onChange={(event) => handleChange(event)}
+							checkboxValue={""}							
+							onChange={handleChange}
+							onBlur={handleBlur}
 							alertUnit="%"
 						/> */}
 					</Stack>
@@ -393,7 +428,8 @@ const CreateInfrastructureMonitor = () => {
 							checkboxLabel="Retain data for"
 							checkboxValue={""}
 							fieldId={"retries_max"}
-							onChange={(event) => handleChange(event)}
+							onChange={handleChange}
+							onBlur={handleBlur}
 							alertUnit="days"
 						/>
 					</Stack> */}
@@ -404,20 +440,22 @@ const CreateInfrastructureMonitor = () => {
 					</Box>
 					<Stack gap={theme.spacing(12)}>
 						<Select
-							id="monitor-interval"
+							id="interval"
 							label="Check frequency"
 							value={infrastructureMonitor.interval || 1}
-							onChange={(event) => handleChange(event, "interval")}
+							onChange={(e) => handleChange(e, "interval")}
+							onBlur={handleBlur}
 							items={frequencies}
 						/>
-						<Field
-							type={"text"}
+						{/* <Field
+							type={"number"}
 							id="monitor-retries"
 							label="Maximum retries before the service is marked as down"
 							value={infrastructureMonitor.url}
 							onChange={handleChange}
+							onBlur={handleBlur}
 							error={errors["url"]}
-						/>						
+						/>						 */}
 					</Stack>
 				</ConfigBox>
 				<Stack
@@ -428,7 +466,6 @@ const CreateInfrastructureMonitor = () => {
 						variant="contained"
 						color="primary"
 						onClick={handleCreateInfrastructureMonitor}
-						disabled={Object.keys(errors).length !== 0 && true}
 						loading={monitorState?.isLoading}
 					>
 						Create infrastructure monitor
diff --git a/Client/src/Validation/error.js b/Client/src/Validation/error.js
index a616e13f5..8bd35e48e 100644
--- a/Client/src/Validation/error.js
+++ b/Client/src/Validation/error.js
@@ -26,6 +26,10 @@ const hasValidationErrors = (form, validation, setErrors) => {
 			) {
 				newErrors[err.path[0]] = err.message ?? "Validation error";
 			}
+			// Handle conditionally usage number required cases
+			if (!form.cpu || (form.cpu && form.usage_cpu)) {
+				delete newErrors["usage_cpu"];
+			}
 		});
 		if (Object.keys(newErrors).length > 0) {
 			setErrors(newErrors);
diff --git a/Client/src/Validation/validation.js b/Client/src/Validation/validation.js
index 898ff862b..fb0a436c1 100644
--- a/Client/src/Validation/validation.js
+++ b/Client/src/Validation/validation.js
@@ -181,10 +181,14 @@ const infrastractureMonitorValidation = joi.object({
 	name: joi.string().trim().max(50).allow("").messages({
 		"string.max": "This field should not exceed the 50 characters limit.",
 	}),
-	type: joi.string().trim().messages({ "string.empty": "This field is required." }),
-	usage_cpu: joi.number(),
-	usage_memory: joi.number(),
-	usage_disk: joi.number(),
+	secret: joi.string().trim().messages({ "string.empty": "This field is required." }),		
+	usage_cpu: joi.number().messages({
+		"number.base": "CPU threshold must be a number.",
+		"any.required": "CPU threshold is required.",
+	}),		
+	cpu:joi.boolean(),
+	// usage_memory: joi.number(),
+	// usage_disk: joi.number(),
 	// usage_temperature: joi.number().messages({
 	// 	"number.base": "Temperature must be a number.",
 	// }),
@@ -194,6 +198,10 @@ const infrastractureMonitorValidation = joi.object({
 	// usage_swap: joi.number().messages({
 	// 	"number.base": "Swap used must be a number.",
 	// }),
+	interval: joi.number().messages({
+		"number.base": "Frequency must be a number.",
+		"any.required": "Frequency is required.",
+	}),		
 });
 
 export {

From 439dea44236838f24e2971d8ec1e04e5b3c0c628 Mon Sep 17 00:00:00 2001
From: Shemy Gan <jennifergan26@gmail.com>
Date: Thu, 7 Nov 2024 15:27:40 -0500
Subject: [PATCH 010/142] - fine toning payload and default item etc

---
 .../InfrastructureMonitors/CreateMonitor/index.jsx     | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx b/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx
index 1997e3714..fc82dbc68 100644
--- a/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx
+++ b/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx
@@ -23,7 +23,7 @@ const CreateInfrastructureMonitor = () => {
 		url: "",
 		name: "",
 		notifications: [],
-		interval: 1,
+		interval: 15,
 		cpu: false,
 		usage_cpu: "",
 		secret: "",
@@ -162,9 +162,9 @@ const CreateInfrastructureMonitor = () => {
 
 	const generatePayload = (form) => {
 		let thresholds = {};
-		thresholds.usage_cpu = form.usage_cpu;
-		thresholds.usage_memory = form.usage_memory;
-		thresholds.usage_disk = form.usage_disk;
+		if (form.usage_cpu) thresholds.usage_cpu = form.usage_cpu;
+		if (form.usage_memory) thresholds.usage_memory = form.usage_memory;
+		if (form.usage_disk) thresholds.usage_disk = form.usage_disk;
 
 		delete form.cpu;
 		delete form.memory;
@@ -442,7 +442,7 @@ const CreateInfrastructureMonitor = () => {
 						<Select
 							id="interval"
 							label="Check frequency"
-							value={infrastructureMonitor.interval || 1}
+							value={infrastructureMonitor.interval || 15}
 							onChange={(e) => handleChange(e, "interval")}
 							onBlur={handleBlur}
 							items={frequencies}

From 2aa792d820495d6112c6e1b5045a6f0717b3ee3b Mon Sep 17 00:00:00 2001
From: Shemy Gan <jennifergan26@gmail.com>
Date: Fri, 8 Nov 2024 15:23:33 -0500
Subject: [PATCH 011/142] - code refine

---
 .../CreateMonitor/index.jsx                   | 42 ++++++++++---------
 1 file changed, 23 insertions(+), 19 deletions(-)

diff --git a/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx b/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx
index fc82dbc68..199cb3b1f 100644
--- a/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx
+++ b/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx
@@ -26,10 +26,15 @@ const CreateInfrastructureMonitor = () => {
 		interval: 15,
 		cpu: false,
 		usage_cpu: "",
+		memory: false,
+		usage_memory: "",		
+		disk: false,
+		usage_disk: "",				
 		secret: "",
 	});
 
 	const MS_PER_MINUTE = 60000;
+	const THRESHOLD_FIELD_PREFIX = "usage_"
 	const { user, authToken } = useSelector((state) => state.auth);
 	const monitorState = useSelector((state) => state.infrastructureMonitor);
 	const dispatch = useDispatch();
@@ -100,12 +105,14 @@ const CreateInfrastructureMonitor = () => {
 			return {
 				...prev,
 				...newState,
-				[`usage_${id}`]: newState[id] ? prev[`usage_${id}`] : "",
+				[`${THRESHOLD_FIELD_PREFIX}${id}`]: newState[id]
+					? prev[`${THRESHOLD_FIELD_PREFIX}${id}`]
+					: "",
 			};
 		});
 		// Remove the error if unchecked
 		setErrors((prev) => {
-			return buildErrors(prev, [`usage_${id}`]);
+			return buildErrors(prev, [`${THRESHOLD_FIELD_PREFIX}${id}`]);
 		});
 	};
 
@@ -162,17 +169,14 @@ const CreateInfrastructureMonitor = () => {
 
 	const generatePayload = (form) => {
 		let thresholds = {};
-		if (form.usage_cpu) thresholds.usage_cpu = form.usage_cpu;
-		if (form.usage_memory) thresholds.usage_memory = form.usage_memory;
-		if (form.usage_disk) thresholds.usage_disk = form.usage_disk;
+		Object.keys(form)
+			.filter((k) => k.startsWith(`${THRESHOLD_FIELD_PREFIX}`))
+			.map((k) => {
+				if (form[k]) thresholds[k] = form[k];
+				delete form[k];
+				delete form[k.substring(`${THRESHOLD_FIELD_PREFIX}`.length)];
+			});	
 
-		delete form.cpu;
-		delete form.memory;
-		delete form.disk;
-
-		delete form.usage_cpu;
-		delete form.usage_memory;
-		delete form.usage_disk;
 		form = {
 			...form,
 			description: form.name,
@@ -362,8 +366,8 @@ const CreateInfrastructureMonitor = () => {
 							checkboxId="cpu"
 							checkboxLabel="CPU"
 							checkboxValue={""}
-							fieldId={"usage_cpu"}
-							fieldValue={infrastructureMonitor.usage_cpu ?? ""}
+							fieldId={`${THRESHOLD_FIELD_PREFIX}cpu`}
+							fieldValue={infrastructureMonitor[`${THRESHOLD_FIELD_PREFIX}cpu`] ?? ""}
 							onChange={handleChange}
 							onBlur={handleBlur}
 							alertUnit="%"
@@ -372,8 +376,8 @@ const CreateInfrastructureMonitor = () => {
 							checkboxId="memory"
 							checkboxLabel="Memory"
 							checkboxValue={""}
-							fieldId={"usage_memory"}
-							fieldValue={infrastructureMonitor.usage_memory??""}
+							fieldId={`${THRESHOLD_FIELD_PREFIX}memory`}
+							fieldValue={infrastructureMonitor[`${THRESHOLD_FIELD_PREFIX}memory`] ?? ""}
 							onChange={handleChange}
 							onBlur={handleBlur}
 							alertUnit="%"
@@ -382,8 +386,8 @@ const CreateInfrastructureMonitor = () => {
 							checkboxId="disk"
 							checkboxLabel="Disk"
 							checkboxValue={""}
-							fieldId={"usage_disk"}
-							fieldValue={infrastructureMonitor.usage_disk??""}
+							fieldId={`${THRESHOLD_FIELD_PREFIX}disk`}
+							fieldValue={infrastructureMonitor[`${THRESHOLD_FIELD_PREFIX}disk`]??""}
 							onChange={handleChange}
 							onBlur={handleBlur}
 							alertUnit="%"
@@ -418,7 +422,7 @@ const CreateInfrastructureMonitor = () => {
 					<Box>
 						<Typography component="h2">Logging retention</Typography>
 						<Typography component="p">
-							Configure how logn logs are stored. After this period, the Uptime Manager
+							Configure how logs are stored. After this period, the Uptime Manager
 							will start deleting oldest data.
 						</Typography>
 					</Box>

From 7bbd984fcfb8413bc472d219dbeabcd00af715eb Mon Sep 17 00:00:00 2001
From: Shemy Gan <jennifergan26@gmail.com>
Date: Mon, 11 Nov 2024 11:16:06 -0500
Subject: [PATCH 012/142] - WIP add memory and disk usage

---
 .../CreateMonitor/index.jsx                    | 18 ++++++++++--------
 Client/src/Validation/error.js                 | 10 +++++++++-
 Client/src/Validation/validation.js            | 12 ++++++++++--
 3 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx b/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx
index 199cb3b1f..515b3cbfb 100644
--- a/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx
+++ b/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx
@@ -116,16 +116,18 @@ const CreateInfrastructureMonitor = () => {
 		});
 	};
 
-	const handleBlur = (event) => {
+	const handleBlur = (event, appenedID) => {
+		event.preventDefault();
 		const { value, id } = event.target;
+		if (id?.startsWith("notify-email-")) return;
 		const { error } = infrastractureMonitorValidation.validate(
-			{ [id]: value },
+			{ [id ?? appenedID]: value },
 			{
 				abortEarly: false,
 			}
 		);
 		setErrors((prev) => {
-			return buildErrors(prev, id, error);
+			return buildErrors(prev, id ?? appenedID, error);
 		});
 	};
 
@@ -202,7 +204,7 @@ const CreateInfrastructureMonitor = () => {
 		if (hasValidationErrors(form, infrastractureMonitorValidation, setErrors)) {
 			return;
 		} else {
-			const checkEndpointAction = await dispatch(
+			const checkEndpointAction = dispatch(
 				checkInfrastructureEndpointResolution({ authToken, monitorURL: form.url })
 			);
 			if (checkEndpointAction.meta.requestStatus === "rejected") {
@@ -212,7 +214,7 @@ const CreateInfrastructureMonitor = () => {
 				setErrors({ url: "The entered URL is not reachable." });
 				return;
 			}
-			const action = await dispatch(
+			const action = dispatch(
 				createInfrastructureMonitor({ authToken, monitor: generatePayload(form) })
 			);
 			if (action.meta.requestStatus === "fulfilled") {
@@ -372,7 +374,7 @@ const CreateInfrastructureMonitor = () => {
 							onBlur={handleBlur}
 							alertUnit="%"
 						/>
-						{/* <CustomAlertStack
+						<CustomAlertStack
 							checkboxId="memory"
 							checkboxLabel="Memory"
 							checkboxValue={""}
@@ -391,7 +393,7 @@ const CreateInfrastructureMonitor = () => {
 							onChange={handleChange}
 							onBlur={handleBlur}
 							alertUnit="%"
-						/> */}
+						/>
 						{/* <CustomAlertStack
 							checkboxId="customize-temperature"
 							checkboxLabel="Temperature"
@@ -448,7 +450,7 @@ const CreateInfrastructureMonitor = () => {
 							label="Check frequency"
 							value={infrastructureMonitor.interval || 15}
 							onChange={(e) => handleChange(e, "interval")}
-							onBlur={handleBlur}
+							onBlur={(e) => handleBlur(e, "interval")}
 							items={frequencies}
 						/>
 						{/* <Field
diff --git a/Client/src/Validation/error.js b/Client/src/Validation/error.js
index 8bd35e48e..332037a67 100644
--- a/Client/src/Validation/error.js
+++ b/Client/src/Validation/error.js
@@ -22,14 +22,22 @@ const hasValidationErrors = (form, validation, setErrors) => {
 					"dbConnectionString",
 					"refreshTokenTTL",
 					"jwtTTL",
+					"notify-email-list",
 				].includes(err.path[0])
 			) {
 				newErrors[err.path[0]] = err.message ?? "Validation error";
 			}
+
 			// Handle conditionally usage number required cases
 			if (!form.cpu || (form.cpu && form.usage_cpu)) {
 				delete newErrors["usage_cpu"];
-			}
+			}			
+			if (!form.memory || (form.memory && form.usage_memory)) {
+				delete newErrors["usage_memory"];
+			}			
+			if (!form.disk || (form.disk && form.usage_disk)) {
+				delete newErrors["usage_disk"];
+			}						
 		});
 		if (Object.keys(newErrors).length > 0) {
 			setErrors(newErrors);
diff --git a/Client/src/Validation/validation.js b/Client/src/Validation/validation.js
index fb0a436c1..83e585bd9 100644
--- a/Client/src/Validation/validation.js
+++ b/Client/src/Validation/validation.js
@@ -187,8 +187,16 @@ const infrastractureMonitorValidation = joi.object({
 		"any.required": "CPU threshold is required.",
 	}),		
 	cpu:joi.boolean(),
-	// usage_memory: joi.number(),
-	// usage_disk: joi.number(),
+	memory:joi.boolean(),
+	disk:joi.boolean(),
+	usage_memory: joi.number().messages({
+		"number.base": "Memory threshold must be a number.",
+		"any.required": "Memory threshold is required.",
+	}),		
+	usage_disk: joi.number().messages({
+		"number.base": "Disk threshold must be a number.",
+		"any.required": "Disk threshold is required.",
+	}),		
 	// usage_temperature: joi.number().messages({
 	// 	"number.base": "Temperature must be a number.",
 	// }),

From 98fb77aa3d5fdb9dd86e8fdc6c17264a69e49c1f Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 12 Nov 2024 07:36:08 +0800
Subject: [PATCH 013/142] Update tests for JobQUeue and StatusService after
 chanages to hardware module and JobQueue

---
 Server/tests/services/jobQueue.test.js      | 8 ++++++++
 Server/tests/services/statusService.test.js | 2 +-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/Server/tests/services/jobQueue.test.js b/Server/tests/services/jobQueue.test.js
index bc798ff02..a78f9bdb9 100644
--- a/Server/tests/services/jobQueue.test.js
+++ b/Server/tests/services/jobQueue.test.js
@@ -30,6 +30,14 @@ class QueueStub {
 	async getJobs() {
 		return this.jobs;
 	}
+
+	async pause() {
+		return true;
+	}
+
+	async obliterate() {
+		return true;
+	}
 }
 
 class WorkerStub {
diff --git a/Server/tests/services/statusService.test.js b/Server/tests/services/statusService.test.js
index 432f8c20d..7330ab57f 100644
--- a/Server/tests/services/statusService.test.js
+++ b/Server/tests/services/statusService.test.js
@@ -182,7 +182,7 @@ describe("StatusService", () => {
 				responseTime: 100,
 				code: 200,
 				message: "Test message",
-				payload: { cpu: "cpu", memory: "memory", disk: "disk", host: "host" },
+				payload: { data: { cpu: "cpu", memory: "memory", disk: "disk", host: "host" } },
 			});
 			expect(check.monitorId).to.equal("test");
 			expect(check.status).to.be.true;

From 6761056368a88a3cdea7f469c210100074a23bdc Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 12 Nov 2024 07:55:08 +0800
Subject: [PATCH 014/142] Add tests for hardwareCheckModule

---
 Server/tests/db/hardwareCheckModule.test.js | 73 +++++++++++++++++++++
 1 file changed, 73 insertions(+)
 create mode 100644 Server/tests/db/hardwareCheckModule.test.js

diff --git a/Server/tests/db/hardwareCheckModule.test.js b/Server/tests/db/hardwareCheckModule.test.js
new file mode 100644
index 000000000..530f5f4f8
--- /dev/null
+++ b/Server/tests/db/hardwareCheckModule.test.js
@@ -0,0 +1,73 @@
+import sinon from "sinon";
+import HardwareCheck from "../../db/models/HardwareCheck.js";
+import { createHardwareCheck } from "../../db/mongo/modules/hardwareCheckModule.js";
+
+const mockHardwareCheck = {
+	data: {
+		cpu: {
+			physical_core: 4,
+			logical_core: 8,
+			frequency: 4800,
+			current_frequency: 1411,
+			temperature: [45, 50, 46, 47, 45, 50, 46, 47],
+			free_percent: 0.8552990910595134,
+			usage_percent: 0.14470090894048657,
+		},
+		memory: {
+			total_bytes: 16467628032,
+			available_bytes: 7895044096,
+			used_bytes: 6599561216,
+			usage_percent: 0.4008,
+		},
+		disk: [
+			{
+				read_speed_bytes: null,
+				write_speed_bytes: null,
+				total_bytes: 931258499072,
+				free_bytes: 737097256960,
+				usage_percent: 0.1661,
+			},
+		],
+		host: {
+			os: "linux",
+			platform: "ubuntu",
+			kernel_version: "6.8.0-48-generic",
+		},
+	},
+	errors: [
+		{
+			metric: ["cpu.temperature"],
+			err: "unable to read CPU temperature",
+		},
+	],
+};
+
+describe("HardwareCheckModule", () => {
+	let hardwareCheckSaveStub;
+	beforeEach(() => {
+		hardwareCheckSaveStub = sinon.stub(HardwareCheck.prototype, "save");
+	});
+
+	afterEach(() => {
+		sinon.restore();
+	});
+
+	describe("createHardwareCheck", () => {
+		it("should return a hardware check", async () => {
+			hardwareCheckSaveStub.resolves(mockHardwareCheck);
+			const hardwareCheck = await createHardwareCheck({});
+			expect(hardwareCheck).to.exist;
+			expect(hardwareCheck).to.deep.equal(mockHardwareCheck);
+		});
+		it("should handle an error", async () => {
+			const err = new Error("test error");
+			hardwareCheckSaveStub.rejects(err);
+			try {
+				await createHardwareCheck({});
+			} catch (error) {
+				expect(error).to.exist;
+				expect(error).to.deep.equal(err);
+			}
+		});
+	});
+});

From a22132621fbde4b49e0266e15c42ec51b8a75c16 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 12 Nov 2024 08:09:18 +0800
Subject: [PATCH 015/142] Remove unused DB method, add tests for
 pageSpeedCheckModule

---
 Server/db/mongo/MongoDB.js                    |  2 -
 .../db/mongo/modules/pageSpeedCheckModule.js  | 21 +-----
 Server/tests/db/pageSpeedCheckModule.test.js  | 65 +++++++++++++++++++
 3 files changed, 66 insertions(+), 22 deletions(-)
 create mode 100644 Server/tests/db/pageSpeedCheckModule.test.js

diff --git a/Server/db/mongo/MongoDB.js b/Server/db/mongo/MongoDB.js
index bab17c5ef..288aa83ad 100644
--- a/Server/db/mongo/MongoDB.js
+++ b/Server/db/mongo/MongoDB.js
@@ -118,7 +118,6 @@ import {
 
 import {
 	createPageSpeedCheck,
-	getPageSpeedChecks,
 	deletePageSpeedChecksByMonitorId,
 } from "./modules/pageSpeedCheckModule.js";
 
@@ -212,7 +211,6 @@ export default {
 	updateChecksTTL,
 	deleteMonitorsByUserId,
 	createPageSpeedCheck,
-	getPageSpeedChecks,
 	deletePageSpeedChecksByMonitorId,
 	createHardwareCheck,
 	createMaintenanceWindow,
diff --git a/Server/db/mongo/modules/pageSpeedCheckModule.js b/Server/db/mongo/modules/pageSpeedCheckModule.js
index 56dafa697..427893a96 100644
--- a/Server/db/mongo/modules/pageSpeedCheckModule.js
+++ b/Server/db/mongo/modules/pageSpeedCheckModule.js
@@ -25,25 +25,6 @@ const createPageSpeedCheck = async (pageSpeedCheckData) => {
 	}
 };
 
-/**
- * Get all PageSpeed checks for a monitor
- * @async
- * @param {string} monitorId
- * @returns {Promise<Array<PageSpeedCheck>>}
- * @throws {Error}
- */
-
-const getPageSpeedChecks = async (monitorId) => {
-	try {
-		const pageSpeedChecks = await PageSpeedCheck.find({ monitorId });
-		return pageSpeedChecks;
-	} catch (error) {
-		error.service = SERVICE_NAME;
-		error.method = "getPageSpeedChecks";
-		throw error;
-	}
-};
-
 /**
  * Delete all PageSpeed checks for a monitor
  * @async
@@ -63,4 +44,4 @@ const deletePageSpeedChecksByMonitorId = async (monitorId) => {
 	}
 };
 
-export { createPageSpeedCheck, getPageSpeedChecks, deletePageSpeedChecksByMonitorId };
+export { createPageSpeedCheck, deletePageSpeedChecksByMonitorId };
diff --git a/Server/tests/db/pageSpeedCheckModule.test.js b/Server/tests/db/pageSpeedCheckModule.test.js
new file mode 100644
index 000000000..ae6bf789c
--- /dev/null
+++ b/Server/tests/db/pageSpeedCheckModule.test.js
@@ -0,0 +1,65 @@
+import sinon from "sinon";
+import PageSpeedCheck from "../../db/models/PageSpeedCheck.js";
+import {
+	createPageSpeedCheck,
+	deletePageSpeedChecksByMonitorId,
+} from "../../db/mongo/modules/pageSpeedCheckModule.js";
+
+const mockPageSpeedCheck = {
+	monitorId: "monitorId",
+	bestPractices: 1,
+	seo: 1,
+	performance: 1,
+};
+
+const mockDeletedResult = { deletedCount: 1 };
+
+describe("pageSpeedCheckModule", () => {
+	let pageSpeedCheckSaveStub, pageSpeedCheckDeleteManyStub;
+	beforeEach(() => {
+		pageSpeedCheckSaveStub = sinon.stub(PageSpeedCheck.prototype, "save");
+		pageSpeedCheckDeleteManyStub = sinon.stub(PageSpeedCheck, "deleteMany");
+	});
+
+	afterEach(() => {
+		sinon.restore();
+	});
+
+	describe("createPageSpeedCheck", () => {
+		it("should return a page speed check", async () => {
+			pageSpeedCheckSaveStub.resolves(mockPageSpeedCheck);
+			const pageSpeedCheck = await createPageSpeedCheck(mockPageSpeedCheck);
+			expect(pageSpeedCheck).to.deep.equal(mockPageSpeedCheck);
+		});
+
+		it("should handle an error", async () => {
+			const err = new Error("test error");
+			pageSpeedCheckSaveStub.rejects(err);
+			try {
+				await expect(createPageSpeedCheck(mockPageSpeedCheck));
+			} catch (error) {
+				expect(error).to.exist;
+				expect(error).to.deep.equal(err);
+			}
+		});
+	});
+
+	describe("deletePageSpeedChecksByMonitorId", () => {
+		it("should return the number of deleted checks", async () => {
+			pageSpeedCheckDeleteManyStub.resolves(mockDeletedResult);
+			const result = await deletePageSpeedChecksByMonitorId("monitorId");
+			expect(result).to.deep.equal(mockDeletedResult.deletedCount);
+		});
+
+		it("should handle an error", async () => {
+			const err = new Error("test error");
+			pageSpeedCheckDeleteManyStub.rejects(err);
+			try {
+				await expect(deletePageSpeedChecksByMonitorId("monitorId"));
+			} catch (error) {
+				expect(error).to.exist;
+				expect(error).to.deep.equal(err);
+			}
+		});
+	});
+});

From 11d71060b2bccc58d9e4a8a31ab5936f89944082 Mon Sep 17 00:00:00 2001
From: Shemy Gan <jennifergan26@gmail.com>
Date: Mon, 11 Nov 2024 20:10:49 -0500
Subject: [PATCH 016/142] - All threshold  use same error msg - Display one
 common error msg at bottom for any field with error - Hide individual field
 error for threshold input

---
 Client/src/Components/Inputs/Field/index.jsx  |  3 +-
 .../CreateMonitor/index.jsx                   | 55 +++++++++++++++----
 Client/src/Validation/validation.js           | 33 ++++++-----
 3 files changed, 64 insertions(+), 27 deletions(-)

diff --git a/Client/src/Components/Inputs/Field/index.jsx b/Client/src/Components/Inputs/Field/index.jsx
index 0e52dda2d..6929b51b2 100644
--- a/Client/src/Components/Inputs/Field/index.jsx
+++ b/Client/src/Components/Inputs/Field/index.jsx
@@ -186,10 +186,11 @@ const Field = forwardRef(
 						),
 					}}
 				/>
-				{error && (
+				{ error && (
 					<Typography
 						component="span"
 						className="input-error"
+						hidden={className? true: false}						
 						color={theme.palette.error.text}
 						mt={theme.spacing(2)}
 						sx={{
diff --git a/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx b/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx
index 515b3cbfb..80f19f13f 100644
--- a/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx
+++ b/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx
@@ -35,6 +35,7 @@ const CreateInfrastructureMonitor = () => {
 
 	const MS_PER_MINUTE = 60000;
 	const THRESHOLD_FIELD_PREFIX = "usage_"
+	const HARDWARE_MONITOR_TYPES = ["cpu","memory","disk"]
 	const { user, authToken } = useSelector((state) => state.auth);
 	const monitorState = useSelector((state) => state.infrastructureMonitor);
 	const dispatch = useDispatch();
@@ -47,6 +48,11 @@ const CreateInfrastructureMonitor = () => {
 
 	const [errors, setErrors] = useState({});
 
+	const alertErrKeyLen = Object.keys(errors)
+							.filter(k => k.startsWith(THRESHOLD_FIELD_PREFIX)).length
+    console.log("alertErrKeyLen")
+	console.log(alertErrKeyLen)
+
 	const CustomAlertStack = ({
 		checkboxId,
 		checkboxLabel,
@@ -365,31 +371,43 @@ const CreateInfrastructureMonitor = () => {
 					</Box>
 					<Stack gap={theme.spacing(6)}>
 						<CustomAlertStack
-							checkboxId="cpu"
+							checkboxId={`${HARDWARE_MONITOR_TYPES[0]}`}
 							checkboxLabel="CPU"
 							checkboxValue={""}
-							fieldId={`${THRESHOLD_FIELD_PREFIX}cpu`}
-							fieldValue={infrastructureMonitor[`${THRESHOLD_FIELD_PREFIX}cpu`] ?? ""}
+							fieldId={`${THRESHOLD_FIELD_PREFIX}` + `${HARDWARE_MONITOR_TYPES[0]}`}
+							fieldValue={
+								infrastructureMonitor[
+									`${THRESHOLD_FIELD_PREFIX}` + `${HARDWARE_MONITOR_TYPES[0]}`
+								] ?? ""
+							}
 							onChange={handleChange}
 							onBlur={handleBlur}
 							alertUnit="%"
 						/>
 						<CustomAlertStack
-							checkboxId="memory"
+							checkboxId={`${HARDWARE_MONITOR_TYPES[1]}`}
 							checkboxLabel="Memory"
 							checkboxValue={""}
-							fieldId={`${THRESHOLD_FIELD_PREFIX}memory`}
-							fieldValue={infrastructureMonitor[`${THRESHOLD_FIELD_PREFIX}memory`] ?? ""}
+							fieldId={`${THRESHOLD_FIELD_PREFIX}` + `${HARDWARE_MONITOR_TYPES[1]}`}
+							fieldValue={
+								infrastructureMonitor[
+									`${THRESHOLD_FIELD_PREFIX}` + `${HARDWARE_MONITOR_TYPES[1]}`
+								] ?? ""
+							}
 							onChange={handleChange}
 							onBlur={handleBlur}
 							alertUnit="%"
 						/>
 						<CustomAlertStack
-							checkboxId="disk"
+							checkboxId={`${HARDWARE_MONITOR_TYPES[2]}`}
 							checkboxLabel="Disk"
 							checkboxValue={""}
-							fieldId={`${THRESHOLD_FIELD_PREFIX}disk`}
-							fieldValue={infrastructureMonitor[`${THRESHOLD_FIELD_PREFIX}disk`]??""}
+							fieldId={`${THRESHOLD_FIELD_PREFIX}` + `${HARDWARE_MONITOR_TYPES[2]}`}
+							fieldValue={
+								infrastructureMonitor[
+									`${THRESHOLD_FIELD_PREFIX}` + `${HARDWARE_MONITOR_TYPES[2]}`
+								] ?? ""
+							}
 							onChange={handleChange}
 							onBlur={handleBlur}
 							alertUnit="%"
@@ -418,14 +436,29 @@ const CreateInfrastructureMonitor = () => {
 							onBlur={handleBlur}
 							alertUnit="%"
 						/> */}
+						{alertErrKeyLen > 0 && (
+							<Typography
+								component="span"
+								className="input-error"
+								color={theme.palette.error.text}
+								mt={theme.spacing(2)}
+								sx={{
+									opacity: 0.8,
+								}}
+							>
+								{errors[`${THRESHOLD_FIELD_PREFIX}cpu`] ??
+									errors[`${THRESHOLD_FIELD_PREFIX}memory`] ??
+									errors[`${THRESHOLD_FIELD_PREFIX}disk`]}
+							</Typography>
+						)}
 					</Stack>
 				</ConfigBox>
 				<ConfigBox>
 					<Box>
 						<Typography component="h2">Logging retention</Typography>
 						<Typography component="p">
-							Configure how logs are stored. After this period, the Uptime Manager
-							will start deleting oldest data.
+							Configure how logs are stored. After this period, the Uptime Manager will
+							start deleting oldest data.
 						</Typography>
 					</Box>
 					{/* <Stack gap={theme.spacing(6)}>
diff --git a/Client/src/Validation/validation.js b/Client/src/Validation/validation.js
index 83e585bd9..d542c221e 100644
--- a/Client/src/Validation/validation.js
+++ b/Client/src/Validation/validation.js
@@ -1,6 +1,9 @@
 import joi from "joi";
 import dayjs from "dayjs";
 
+const THRESHOLD_COMMON_MSG = "Threshold is required.";
+const THRESHOLD_COMMON_BASE_MSG = "Threshold must be a number.";
+
 const nameSchema = joi
 	.string()
 	.max(50)
@@ -181,22 +184,22 @@ const infrastractureMonitorValidation = joi.object({
 	name: joi.string().trim().max(50).allow("").messages({
 		"string.max": "This field should not exceed the 50 characters limit.",
 	}),
-	secret: joi.string().trim().messages({ "string.empty": "This field is required." }),		
+	secret: joi.string().trim().messages({ "string.empty": "This field is required." }),
 	usage_cpu: joi.number().messages({
-		"number.base": "CPU threshold must be a number.",
-		"any.required": "CPU threshold is required.",
-	}),		
-	cpu:joi.boolean(),
-	memory:joi.boolean(),
-	disk:joi.boolean(),
+		"number.base": THRESHOLD_COMMON_BASE_MSG,
+		"any.required": THRESHOLD_COMMON_MSG,
+	}),
+	cpu: joi.boolean(),
+	memory: joi.boolean(),
+	disk: joi.boolean(),
 	usage_memory: joi.number().messages({
-		"number.base": "Memory threshold must be a number.",
-		"any.required": "Memory threshold is required.",
-	}),		
+		"number.base": THRESHOLD_COMMON_BASE_MSG,
+		"any.required": THRESHOLD_COMMON_MSG,
+	}),
 	usage_disk: joi.number().messages({
-		"number.base": "Disk threshold must be a number.",
-		"any.required": "Disk threshold is required.",
-	}),		
+		"number.base": THRESHOLD_COMMON_BASE_MSG,
+		"any.required": THRESHOLD_COMMON_MSG,
+	}),
 	// usage_temperature: joi.number().messages({
 	// 	"number.base": "Temperature must be a number.",
 	// }),
@@ -209,7 +212,7 @@ const infrastractureMonitorValidation = joi.object({
 	interval: joi.number().messages({
 		"number.base": "Frequency must be a number.",
 		"any.required": "Frequency is required.",
-	}),		
+	}),
 });
 
 export {
@@ -219,5 +222,5 @@ export {
 	settingsValidation,
 	maintenanceWindowValidation,
 	advancedSettingsValidation,
-	infrastractureMonitorValidation
+	infrastractureMonitorValidation,
 };

From 5d853c7f92a159753cd37c751c1db072a7cad63c Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 12 Nov 2024 15:42:28 +0800
Subject: [PATCH 017/142] Add tests for recovery module

---
 Server/tests/db/recoveryModule.test.js | 171 +++++++++++++++++++++++++
 1 file changed, 171 insertions(+)
 create mode 100644 Server/tests/db/recoveryModule.test.js

diff --git a/Server/tests/db/recoveryModule.test.js b/Server/tests/db/recoveryModule.test.js
new file mode 100644
index 000000000..53da938ba
--- /dev/null
+++ b/Server/tests/db/recoveryModule.test.js
@@ -0,0 +1,171 @@
+import sinon from "sinon";
+import RecoveryToken from "../../db/models/RecoveryToken.js";
+import User from "../../db/models/User.js";
+import {
+	requestRecoveryToken,
+	validateRecoveryToken,
+	resetPassword,
+} from "../../db/mongo/modules/recoveryModule.js";
+import { errorMessages } from "../../utils/messages.js";
+
+const mockRecoveryToken = {
+	email: "test@test.com",
+	token: "1234567890",
+};
+
+const mockUser = {
+	email: "test@test.com",
+	password: "oldPassword",
+};
+
+const mockUserWithoutPassword = {
+	email: "test@test.com",
+};
+
+// Create a query builder that logs
+const createQueryChain = (finalResult, comparePasswordResult = false) => ({
+	select: () => ({
+		select: async () => {
+			if (finalResult === mockUser) {
+				// Return a new object with all required methods
+				return {
+					email: "test@test.com",
+					password: "oldPassword",
+					comparePassword: sinon.stub().resolves(comparePasswordResult),
+					save: sinon.stub().resolves(),
+				};
+			}
+			return finalResult;
+		},
+	}),
+	// Add methods to the top level too
+	comparePassword: sinon.stub().resolves(comparePasswordResult),
+	save: sinon.stub().resolves(),
+});
+
+describe("recoveryModule", () => {
+	let deleteManyStub,
+		saveStub,
+		findOneStub,
+		userCompareStub,
+		userSaveStub,
+		userFindOneStub;
+	let req, res;
+	beforeEach(() => {
+		req = {
+			body: { email: "test@test.com" },
+		};
+		deleteManyStub = sinon.stub(RecoveryToken, "deleteMany");
+		saveStub = sinon.stub(RecoveryToken.prototype, "save");
+		findOneStub = sinon.stub(RecoveryToken, "findOne");
+		userCompareStub = sinon.stub(User.prototype, "comparePassword");
+		userSaveStub = sinon.stub(User.prototype, "save");
+		userFindOneStub = sinon.stub().resolves();
+	});
+
+	afterEach(() => {
+		sinon.restore();
+	});
+
+	describe("requestRecoveryToken", () => {
+		it("should return a recovery token", async () => {
+			deleteManyStub.resolves();
+			saveStub.resolves(mockRecoveryToken);
+			const result = await requestRecoveryToken(req, res);
+			expect(result.email).to.equal(mockRecoveryToken.email);
+		});
+		it("should handle an error", async () => {
+			const err = new Error("Test error");
+			deleteManyStub.rejects(err);
+			try {
+				await requestRecoveryToken(req, res);
+			} catch (error) {
+				expect(error).to.exist;
+				expect(error).to.deep.equal(err);
+			}
+		});
+	});
+	describe("validateRecoveryToken", () => {
+		it("should return a recovery token if found", async () => {
+			findOneStub.resolves(mockRecoveryToken);
+			const result = await validateRecoveryToken(req, res);
+			expect(result).to.deep.equal(mockRecoveryToken);
+		});
+		it("should thrown an error if a token is not found", async () => {
+			findOneStub.resolves(null);
+			try {
+				await validateRecoveryToken(req, res);
+			} catch (error) {
+				expect(error).to.exist;
+				expect(error.message).to.equal(errorMessages.DB_TOKEN_NOT_FOUND);
+			}
+		});
+		it("should handle DB errors", async () => {
+			const err = new Error("Test error");
+			findOneStub.rejects(err);
+			try {
+				await validateRecoveryToken(req, res);
+			} catch (error) {
+				expect(error).to.exist;
+				expect(error).to.deep.equal(err);
+			}
+		});
+	});
+
+	describe("resetPassword", () => {
+		beforeEach(() => {
+			req.body = {
+				password: "test",
+				newPassword: "test1",
+			};
+		});
+
+		afterEach(() => {
+			sinon.restore();
+		});
+
+		it("should thrown an error if a recovery token is not found", async () => {
+			findOneStub.resolves(null);
+			try {
+				await resetPassword(req, res);
+			} catch (error) {
+				expect(error).to.exist;
+				expect(error.message).to.equal(errorMessages.DB_TOKEN_NOT_FOUND);
+			}
+		});
+		it("should throw an error if a user is not found", async () => {
+			findOneStub.resolves(mockRecoveryToken);
+			userFindOneStub = sinon.stub(User, "findOne").resolves(null);
+			try {
+				await resetPassword(req, res);
+			} catch (error) {
+				expect(error).to.exist;
+				expect(error.message).to.equal(errorMessages.DB_USER_NOT_FOUND);
+			}
+		});
+		it("should throw an error if the passwords match", async () => {
+			findOneStub.resolves(mockRecoveryToken);
+			saveStub.resolves();
+			userFindOneStub = sinon
+				.stub(User, "findOne")
+				.returns(createQueryChain(mockUser, true));
+			try {
+				await resetPassword(req, res);
+			} catch (error) {
+				expect(error).to.exist;
+				expect(error.message).to.equal(errorMessages.DB_RESET_PASSWORD_BAD_MATCH);
+			}
+		});
+		it("should return a user without password if successful", async () => {
+			findOneStub.resolves(mockRecoveryToken);
+			saveStub.resolves();
+			userFindOneStub = sinon
+				.stub(User, "findOne")
+				.returns(createQueryChain(mockUser)) // First call will resolve to mockUser
+				.onSecondCall()
+				.returns(createQueryChain(mockUserWithoutPassword));
+			const result = await resetPassword(req, res);
+			expect(result).to.deep.equal(mockUserWithoutPassword);
+		});
+	});
+});

From 646de4f4aed1091edfa85e7ba6721e2628252ca2 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 12 Nov 2024 15:54:34 +0800
Subject: [PATCH 018/142] Add tests for settings module

---
 Server/tests/db/settingsModule.test.js | 54 ++++++++++++++++++++++++++
 1 file changed, 54 insertions(+)
 create mode 100644 Server/tests/db/settingsModule.test.js

diff --git a/Server/tests/db/settingsModule.test.js b/Server/tests/db/settingsModule.test.js
new file mode 100644
index 000000000..39bc8997d
--- /dev/null
+++ b/Server/tests/db/settingsModule.test.js
@@ -0,0 +1,54 @@
+import sinon from "sinon";
+import {
+	getAppSettings,
+	updateAppSettings,
+} from "../../db/mongo/modules/settingsModule.js";
+import AppSettings from "../../db/models/AppSettings.js";
+
+const mockAppSettings = {
+	appName: "Test App",
+};
+
+describe("SettingsModule", () => {
+	let appSettingsFindOneStub, appSettingsFindOneAndUpdateStub;
+	beforeEach(() => {
+		appSettingsFindOneStub = sinon.stub(AppSettings, "findOne");
+		appSettingsFindOneAndUpdateStub = sinon.stub(AppSettings, "findOneAndUpdate");
+	});
+	afterEach(() => {
+		sinon.restore();
+	});
+
+	describe("getAppSettings", () => {
+		it("should return app settings", async () => {
+			appSettingsFindOneStub.resolves(mockAppSettings);
+			const result = await getAppSettings();
+			expect(result).to.deep.equal(mockAppSettings);
+		});
+		it("should handle an error", async () => {
+			const err = new Error("Test error");
+			appSettingsFindOneStub.throws(err);
+			try {
+				await getAppSettings();
+			} catch (error) {
+				expect(error).to.deep.equal(err);
+			}
+		});
+	});
+	describe("updateAppSettings", () => {
+		it("should update app settings", async () => {
+			appSettingsFindOneAndUpdateStub.resolves(mockAppSettings);
+			const result = await updateAppSettings(mockAppSettings);
+			expect(result).to.deep.equal(mockAppSettings);
+		});
+		it("should handle an error", async () => {
+			const err = new Error("Test error");
+			appSettingsFindOneAndUpdateStub.throws(err);
+			try {
+				await updateAppSettings(mockAppSettings);
+			} catch (error) {
+				expect(error).to.deep.equal(err);
+			}
+		});
+	});
+});

From 57cad8d31a9183b4434d7b4c2ed771555107c978 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 12 Nov 2024 16:16:20 +0800
Subject: [PATCH 019/142] Inject generateAvatarImage into insertUser

---
 Server/db/mongo/modules/userModule.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Server/db/mongo/modules/userModule.js b/Server/db/mongo/modules/userModule.js
index 69aa52b60..7737d848e 100644
--- a/Server/db/mongo/modules/userModule.js
+++ b/Server/db/mongo/modules/userModule.js
@@ -15,7 +15,7 @@ const SERVICE_NAME = "userModule";
  * @returns {Promise<UserModel>}
  * @throws {Error}
  */
-const insertUser = async (userData, imageFile) => {
+const insertUser = async (userData, imageFile, GenerateAvatarImage) => {
 	try {
 		if (imageFile) {
 			// 1.  Save the full size image

From d9812a446b7daf94c444dcb47669592ab37987c9 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 12 Nov 2024 16:42:49 +0800
Subject: [PATCH 020/142] update function dependency injection

---
 Server/db/mongo/modules/userModule.js | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/Server/db/mongo/modules/userModule.js b/Server/db/mongo/modules/userModule.js
index 7737d848e..f86c6e28b 100644
--- a/Server/db/mongo/modules/userModule.js
+++ b/Server/db/mongo/modules/userModule.js
@@ -15,7 +15,11 @@ const SERVICE_NAME = "userModule";
  * @returns {Promise<UserModel>}
  * @throws {Error}
  */
-const insertUser = async (userData, imageFile, GenerateAvatarImage) => {
+const insertUser = async (
+	userData,
+	imageFile,
+	generateAvatarImage = GenerateAvatarImage
+) => {
 	try {
 		if (imageFile) {
 			// 1.  Save the full size image
@@ -25,7 +29,7 @@ const insertUser = async (userData, imageFile, GenerateAvatarImage) => {
 			};
 
 			// 2.  Get the avatar sized image
-			const avatar = await GenerateAvatarImage(imageFile);
+			const avatar = await generateAvatarImage(imageFile);
 			userData.avatarImage = avatar;
 		}
 
@@ -90,7 +94,12 @@ const getUserByEmail = async (email) => {
  * @throws {Error}
  */
 
-const updateUser = async (req, res) => {
+const updateUser = async (
+	req,
+	res,
+	parseBoolean = ParseBoolean,
+	generateAvatarImage = GenerateAvatarImage
+) => {
 	const candidateUserId = req.params.userId;
 	try {
 		const candidateUser = { ...req.body };
@@ -98,7 +107,7 @@ const updateUser = async (req, res) => {
 		// Handle profile image
 		// ******************************************
 
-		if (ParseBoolean(candidateUser.deleteProfileImage) === true) {
+		if (parseBoolean(candidateUser.deleteProfileImage) === true) {
 			candidateUser.profileImage = null;
 			candidateUser.avatarImage = null;
 		} else if (req.file) {
@@ -108,8 +117,8 @@ const updateUser = async (req, res) => {
 				contentType: req.file.mimetype,
 			};
 
-			// 2.  Get the avaatar sized image
-			const avatar = await GenerateAvatarImage(req.file);
+			// 2.  Get the avatar sized image
+			const avatar = await generateAvatarImage(req.file);
 			candidateUser.avatarImage = avatar;
 		}
 
@@ -164,6 +173,7 @@ const deleteUser = async (userId) => {
 const deleteTeam = async (teamId) => {
 	try {
 		await TeamModel.findByIdAndDelete(teamId);
+		return true;
 	} catch (error) {
 		error.service = SERVICE_NAME;
 		error.method = "deleteTeam";

From 4c7c4d35782be511a55a84b63d458b3a00ab33f2 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 12 Nov 2024 16:44:01 +0800
Subject: [PATCH 021/142] Add return type for deleteAllOtherUsers

---
 Server/db/mongo/modules/userModule.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/Server/db/mongo/modules/userModule.js b/Server/db/mongo/modules/userModule.js
index f86c6e28b..5b951ff64 100644
--- a/Server/db/mongo/modules/userModule.js
+++ b/Server/db/mongo/modules/userModule.js
@@ -184,6 +184,7 @@ const deleteTeam = async (teamId) => {
 const deleteAllOtherUsers = async () => {
 	try {
 		await UserModel.deleteMany({ role: { $ne: "superadmin" } });
+		return true;
 	} catch (error) {
 		error.service = SERVICE_NAME;
 		error.method = "deleteAllOtherUsers";

From 1733918f0871e1e4185df5ba8dd18881742c6921 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 12 Nov 2024 16:48:20 +0800
Subject: [PATCH 022/142] Add tests for user module

---
 Server/tests/db/userModule.test.js | 286 +++++++++++++++++++++++++++++
 1 file changed, 286 insertions(+)
 create mode 100644 Server/tests/db/userModule.test.js

diff --git a/Server/tests/db/userModule.test.js b/Server/tests/db/userModule.test.js
new file mode 100644
index 000000000..8f9fd4dc2
--- /dev/null
+++ b/Server/tests/db/userModule.test.js
@@ -0,0 +1,286 @@
+import sinon from "sinon";
+import UserModel from "../../db/models/User.js";
+import TeamModel from "../../db/models/Team.js";
+import {
+	insertUser,
+	getUserByEmail,
+	updateUser,
+	deleteUser,
+	deleteTeam,
+	deleteAllOtherUsers,
+	getAllUsers,
+	logoutUser,
+} from "../../db/mongo/modules/userModule.js";
+import { errorMessages } from "../../utils/messages.js";
+
+const mockUser = {
+	email: "test@test.com",
+	password: "password",
+	role: ["user"],
+};
+const mockSuperUser = {
+	email: "test@test.com",
+	password: "password",
+	role: ["superadmin"],
+};
+const imageFile = {
+	image: 1,
+};
+
+describe("userModule", () => {
+	let teamSaveStub,
+		teamFindByIdAndDeleteStub,
+		userSaveStub,
+		userFindStub,
+		userFindOneStub,
+		userFindByIdAndUpdateStub,
+		userFindByIdAndDeleteStub,
+		userDeleteManyStub,
+		userUpdateOneStub,
+		generateAvatarImageStub,
+		parseBooleanStub;
+	beforeEach(() => {
+		teamSaveStub = sinon.stub(TeamModel.prototype, "save");
+		teamFindByIdAndDeleteStub = sinon.stub(TeamModel, "findByIdAndDelete");
+		userSaveStub = sinon.stub(UserModel.prototype, "save");
+		userFindStub = sinon.stub(UserModel, "find");
+		userFindOneStub = sinon.stub(UserModel, "findOne");
+		userFindByIdAndUpdateStub = sinon.stub(UserModel, "findByIdAndUpdate");
+		userFindByIdAndDeleteStub = sinon.stub(UserModel, "findByIdAndDelete");
+		userDeleteManyStub = sinon.stub(UserModel, "deleteMany");
+		userUpdateOneStub = sinon.stub(UserModel, "updateOne");
+		generateAvatarImageStub = sinon.stub().resolves({ image: 2 });
+		parseBooleanStub = sinon.stub().returns(true);
+	});
+
+	afterEach(() => {
+		sinon.restore();
+	});
+
+	describe("insertUser", () => {
+		it("should insert a regular user", async () => {
+			userSaveStub.resolves(mockUser);
+			userFindOneStub.returns({
+				select: sinon.stub().returns({
+					select: sinon.stub().resolves(mockUser),
+				}),
+			});
+			const result = await insertUser(mockUser, imageFile, generateAvatarImageStub);
+			expect(result).to.deep.equal(mockUser);
+		});
+		it("should insert a superadmin user", async () => {
+			userSaveStub.resolves(mockSuperUser);
+			userFindOneStub.returns({
+				select: sinon.stub().returns({
+					select: sinon.stub().resolves(mockSuperUser),
+				}),
+			});
+			const result = await insertUser(mockSuperUser, imageFile, generateAvatarImageStub);
+			expect(result).to.deep.equal(mockSuperUser);
+		});
+		it("should handle an error", async () => {
+			const err = new Error("test error");
+			userSaveStub.rejects(err);
+			try {
+				await insertUser(mockUser, imageFile, generateAvatarImageStub);
+			} catch (error) {
+				expect(error).to.exist;
+				expect(error).to.deep.equal(err);
+			}
+		});
+		it("should handle a duplicate key error", async () => {
+			const err = new Error("test error");
+			err.code = 11000;
+			userSaveStub.rejects(err);
+			try {
+				await insertUser(mockUser, imageFile, generateAvatarImageStub);
+			} catch (error) {
+				expect(error).to.exist;
+				expect(error).to.deep.equal(err);
+			}
+		});
+	});
+	describe("getUserByEmail", () => {
+		it("should return a user", async () => {
+			userFindOneStub.returns({
+				select: sinon.stub().resolves(mockUser),
+			});
+			const result = await getUserByEmail(mockUser.email);
+			expect(result).to.deep.equal(mockUser);
+		});
+	});
+	describe("getUserByEmail", () => {
+		it("throw an error if a user is not found", async () => {
+			userFindOneStub.returns({
+				select: sinon.stub().resolves(null),
+			});
+			try {
+				await getUserByEmail(mockUser.email);
+			} catch (error) {
+				expect(error.message).to.equal(errorMessages.DB_USER_NOT_FOUND);
+			}
+		});
+	});
+	describe("updateUser", () => {
+		let req, res;
+		beforeEach(() => {
+			req = {
+				params: {
+					userId: "testId",
+				},
+				body: {
+					deleteProfileImage: "false",
+					email: "test@test.com",
+				},
+				file: {
+					buffer: "test",
+					mimetype: "test",
+				},
+			};
+			res = {};
+		});
+
+		afterEach(() => {});
+		it("should update a user", async () => {
+			parseBooleanStub.returns(false);
+			userFindByIdAndUpdateStub.returns({
+				select: sinon.stub().returns({
+					select: sinon.stub().resolves(mockUser),
+				}),
+			});
+			const result = await updateUser(
+				req,
+				res,
+				parseBooleanStub,
+				generateAvatarImageStub
+			);
+			expect(result).to.deep.equal(mockUser);
+		});
+		it("should delete a user profile image", async () => {
+			req.body.deleteProfileImage = "true";
+			userFindByIdAndUpdateStub.returns({
+				select: sinon.stub().returns({
+					select: sinon.stub().resolves(mockUser),
+				}),
+			});
+			const result = await updateUser(
+				req,
+				res,
+				parseBooleanStub,
+				generateAvatarImageStub
+			);
+			expect(result).to.deep.equal(mockUser);
+		});
+		it("should handle an error", async () => {
+			const err = new Error("test error");
+			userFindByIdAndUpdateStub.throws(err);
+			try {
+				await updateUser(req, res, parseBooleanStub, generateAvatarImageStub);
+			} catch (error) {
+				expect(error).to.exist;
+				expect(error).to.deep.equal(err);
+			}
+		});
+	});
+	describe("deleteUser", async () => {
+		it("should return a deleted user", async () => {
+			userFindByIdAndDeleteStub.resolves(mockUser);
+			const result = await deleteUser("testId");
+			expect(result).to.deep.equal(mockUser);
+		});
+		it("should throw an error if a user is not found", async () => {
+			try {
+				await deleteUser("testId");
+			} catch (error) {
+				expect(error).to.exist;
+				expect(error.message).to.equal(errorMessages.DB_USER_NOT_FOUND);
+			}
+		});
+		it("should handle an error", async () => {
+			const err = new Error("test error");
+			userFindByIdAndDeleteStub.throws(err);
+			try {
+				await deleteUser("testId");
+			} catch (error) {
+				expect(error).to.exist;
+				expect(error).to.deep.equal(err);
+			}
+		});
+	});
+
+	describe("deleteTeam", () => {
+		it("should return true if team deleted", async () => {
+			teamFindByIdAndDeleteStub.resolves();
+			const result = await deleteTeam("testId");
+			expect(result).to.equal(true);
+		});
+		it("should handle an error", async () => {
+			const err = new Error("test error");
+			teamFindByIdAndDeleteStub.throws(err);
+			try {
+				await deleteTeam("testId");
+			} catch (error) {
+				expect(error).to.exist;
+				expect(error).to.deep.equal(err);
+			}
+		});
+	});
+
+	describe("deleteAllOtherUsers", () => {
+		it("should return true if all other users deleted", async () => {
+			userDeleteManyStub.resolves(true);
+			const result = await deleteAllOtherUsers();
+			expect(result).to.equal(true);
+		});
+		it("should handle an error", async () => {
+			const err = new Error("test error");
+			userDeleteManyStub.throws(err);
+			try {
+				await deleteAllOtherUsers();
+			} catch (error) {
+				expect(error).to.exist;
+				expect(error).to.deep.equal(err);
+			}
+		});
+	});
+
+	describe("getAllUsers", () => {
+		it("should return all users", async () => {
+			userFindStub.returns({
+				select: sinon.stub().returns({
+					select: sinon.stub().resolves([mockUser]),
+				}),
+			});
+			const result = await getAllUsers();
+			expect(result).to.deep.equal([mockUser]);
+		});
+		it("should handle an error", async () => {
+			const err = new Error("test error");
+			userFindStub.throws(err);
+			try {
+				await getAllUsers();
+			} catch (error) {
+				expect(error).to.exist;
+				expect(error).to.deep.equal(err);
+			}
+		});
+	});
+
+	describe("logoutUser", async () => {
+		it("should return true if user logged out", async () => {
+			userUpdateOneStub.resolves(true);
+			const result = await logoutUser("testId");
+			expect(result).to.equal(true);
+		});
+		it("should handle an error", async () => {
+			const err = new Error("test error");
+			userUpdateOneStub.throws(err);
+			try {
+				await logoutUser("testId");
+			} catch (error) {
+				expect(error).to.exist;
+				expect(error).to.deep.equal(err);
+			}
+		});
+	});
+});

From d9fdd5bd30c1274321dc371cb2950a209a2f69c2 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 12 Nov 2024 17:04:06 +0800
Subject: [PATCH 023/142] Add missing logger test case

---
 Server/tests/utils/logger.test.js | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/Server/tests/utils/logger.test.js b/Server/tests/utils/logger.test.js
index 154e2e462..c71bce80a 100644
--- a/Server/tests/utils/logger.test.js
+++ b/Server/tests/utils/logger.test.js
@@ -46,6 +46,26 @@ describe("Logger", () => {
 			const logger = new Logger();
 			logger.logger.info(logMessage);
 		});
+		it("should convert details to JSON string if it is an object", function () {
+			const logDetails = { key: "value" };
+			const expectedDetails = JSON.stringify(logDetails, null, 2); // Removed .s
+
+			createLoggerStub.callsFake((config) => {
+				const consoleTransport = config.transports[0];
+				const logEntry = {
+					level: "info",
+					message: "", // Add empty message since it's required
+					details: logDetails,
+					timestamp: new Date().toISOString(),
+				};
+				const formattedMessage = consoleTransport.format.transform(logEntry);
+				expect(formattedMessage).to.include(expectedDetails);
+				return { info: sinon.spy() }; // Changed to return info method
+			});
+
+			const logger = new Logger();
+			logger.logger.info("", { details: logDetails }); // Updated to pass details properly
+		});
 	});
 
 	describe("info", () => {

From a9771d941dec66356c54fe17eb4bdf379e5aaad5 Mon Sep 17 00:00:00 2001
From: Shemy Gan <jennifergan26@gmail.com>
Date: Tue, 12 Nov 2024 09:12:12 -0500
Subject: [PATCH 024/142] - refine code

---
 .../CreateMonitor/index.jsx                   | 107 +++++-------------
 Client/src/Utils/stringUtils.js               |   3 +
 2 files changed, 33 insertions(+), 77 deletions(-)
 create mode 100644 Client/src/Utils/stringUtils.js

diff --git a/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx b/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx
index 80f19f13f..7ca49da52 100644
--- a/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx
+++ b/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx
@@ -17,6 +17,7 @@ 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";
 
 const CreateInfrastructureMonitor = () => {
 	const [infrastructureMonitor, setInfrastructureMonitor] = useState({
@@ -50,8 +51,6 @@ const CreateInfrastructureMonitor = () => {
 
 	const alertErrKeyLen = Object.keys(errors)
 							.filter(k => k.startsWith(THRESHOLD_FIELD_PREFIX)).length
-    console.log("alertErrKeyLen")
-	console.log(alertErrKeyLen)
 
 	const CustomAlertStack = ({
 		checkboxId,
@@ -89,7 +88,7 @@ const CreateInfrastructureMonitor = () => {
 					value={infrastructureMonitor[fieldId]}
 					onBlur={onBlur}
 					onChange={onChange}
-					error={errors[`${fieldId}`]}
+					error={errors[fieldId]}
 					disabled={!infrastructureMonitor[checkboxId]}
 				></Field>
 				<Typography
@@ -111,14 +110,14 @@ const CreateInfrastructureMonitor = () => {
 			return {
 				...prev,
 				...newState,
-				[`${THRESHOLD_FIELD_PREFIX}${id}`]: newState[id]
-					? prev[`${THRESHOLD_FIELD_PREFIX}${id}`]
+				[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}`]);
+			return buildErrors(prev, [THRESHOLD_FIELD_PREFIX+ id]);
 		});
 	};
 
@@ -178,11 +177,11 @@ const CreateInfrastructureMonitor = () => {
 	const generatePayload = (form) => {
 		let thresholds = {};
 		Object.keys(form)
-			.filter((k) => k.startsWith(`${THRESHOLD_FIELD_PREFIX}`))
+			.filter((k) => k.startsWith(THRESHOLD_FIELD_PREFIX))
 			.map((k) => {
 				if (form[k]) thresholds[k] = form[k];
 				delete form[k];
-				delete form[k.substring(`${THRESHOLD_FIELD_PREFIX}`.length)];
+				delete form[k.substring(THRESHOLD_FIELD_PREFIX.length)];
 			});	
 
 		form = {
@@ -370,72 +369,21 @@ const CreateInfrastructureMonitor = () => {
 						</Typography>
 					</Box>
 					<Stack gap={theme.spacing(6)}>
-						<CustomAlertStack
-							checkboxId={`${HARDWARE_MONITOR_TYPES[0]}`}
-							checkboxLabel="CPU"
-							checkboxValue={""}
-							fieldId={`${THRESHOLD_FIELD_PREFIX}` + `${HARDWARE_MONITOR_TYPES[0]}`}
-							fieldValue={
-								infrastructureMonitor[
-									`${THRESHOLD_FIELD_PREFIX}` + `${HARDWARE_MONITOR_TYPES[0]}`
-								] ?? ""
-							}
-							onChange={handleChange}
-							onBlur={handleBlur}
-							alertUnit="%"
-						/>
-						<CustomAlertStack
-							checkboxId={`${HARDWARE_MONITOR_TYPES[1]}`}
-							checkboxLabel="Memory"
-							checkboxValue={""}
-							fieldId={`${THRESHOLD_FIELD_PREFIX}` + `${HARDWARE_MONITOR_TYPES[1]}`}
-							fieldValue={
-								infrastructureMonitor[
-									`${THRESHOLD_FIELD_PREFIX}` + `${HARDWARE_MONITOR_TYPES[1]}`
-								] ?? ""
-							}
-							onChange={handleChange}
-							onBlur={handleBlur}
-							alertUnit="%"
-						/>
-						<CustomAlertStack
-							checkboxId={`${HARDWARE_MONITOR_TYPES[2]}`}
-							checkboxLabel="Disk"
-							checkboxValue={""}
-							fieldId={`${THRESHOLD_FIELD_PREFIX}` + `${HARDWARE_MONITOR_TYPES[2]}`}
-							fieldValue={
-								infrastructureMonitor[
-									`${THRESHOLD_FIELD_PREFIX}` + `${HARDWARE_MONITOR_TYPES[2]}`
-								] ?? ""
-							}
-							onChange={handleChange}
-							onBlur={handleBlur}
-							alertUnit="%"
-						/>
-						{/* <CustomAlertStack
-							checkboxId="customize-temperature"
-							checkboxLabel="Temperature"
-							checkboxValue={true}
-							onChange={handleChange}
-							onBlur={handleBlur}
-							alertUnit="°C"
-						/>
-						<CustomAlertStack
-							checkboxId="customize-systemload"
-							checkboxLabel="System load"
-							checkboxValue={true}
-							onChange={handleChange}
-							onBlur={handleBlur}
-							alertUnit="%"
-						/>
-						<CustomAlertStack
-							checkboxId="customize-swap"
-							checkboxLabel="Swap used"
-							checkboxValue={""}							
-							onChange={handleChange}
-							onBlur={handleBlur}
-							alertUnit="%"
-						/> */}
+						{HARDWARE_MONITOR_TYPES.map((type, idx) => (
+							<CustomAlertStack
+								key={idx}
+								checkboxId={type}
+								checkboxLabel={
+									type !== "cpu" ? capitalizeFirstLetter(type) : type.toUpperCase()
+								}
+								checkboxValue={""}
+								fieldId={THRESHOLD_FIELD_PREFIX + type}
+								fieldValue={infrastructureMonitor[THRESHOLD_FIELD_PREFIX + type] ?? ""}
+								onChange={handleChange}
+								onBlur={handleBlur}
+								alertUnit="%"
+							/>
+						))}
 						{alertErrKeyLen > 0 && (
 							<Typography
 								component="span"
@@ -446,9 +394,14 @@ const CreateInfrastructureMonitor = () => {
 									opacity: 0.8,
 								}}
 							>
-								{errors[`${THRESHOLD_FIELD_PREFIX}cpu`] ??
-									errors[`${THRESHOLD_FIELD_PREFIX}memory`] ??
-									errors[`${THRESHOLD_FIELD_PREFIX}disk`]}
+								{
+									errors[
+										THRESHOLD_FIELD_PREFIX +
+											HARDWARE_MONITOR_TYPES.filter(
+												(type) => errors[THRESHOLD_FIELD_PREFIX + type]
+											)[0]
+									]
+								}
 							</Typography>
 						)}
 					</Stack>
diff --git a/Client/src/Utils/stringUtils.js b/Client/src/Utils/stringUtils.js
new file mode 100644
index 000000000..6aeb53bad
--- /dev/null
+++ b/Client/src/Utils/stringUtils.js
@@ -0,0 +1,3 @@
+export const capitalizeFirstLetter = (str) =>{
+  return  str.charAt(0).toUpperCase() + str.slice(1);
+}

From 8737dbfd5b136de77817a8145c295979c6ed309f Mon Sep 17 00:00:00 2001
From: Shemy Gan <jennifergan26@gmail.com>
Date: Tue, 12 Nov 2024 10:19:03 -0500
Subject: [PATCH 025/142] - Extract CustomThreshold component - Refine Error
 setting in validation to remove any leftover errors - Add back the await as
 it is indeed needed even though syntax checker prompts to remove it

---
 .../src/Components/CustomThreshold/index.jsx  | 72 +++++++++++++++++++
 .../CreateMonitor/index.jsx                   | 64 +++--------------
 Client/src/Validation/error.js                | 14 ++--
 3 files changed, 89 insertions(+), 61 deletions(-)
 create mode 100644 Client/src/Components/CustomThreshold/index.jsx

diff --git a/Client/src/Components/CustomThreshold/index.jsx b/Client/src/Components/CustomThreshold/index.jsx
new file mode 100644
index 000000000..97dfe8bc3
--- /dev/null
+++ b/Client/src/Components/CustomThreshold/index.jsx
@@ -0,0 +1,72 @@
+import { Box, Stack, Typography } from "@mui/material";
+import Field from "../Inputs/Field";
+import Checkbox from "../Inputs/Checkbox";
+import { useTheme } from "@emotion/react";
+import PropTypes from "prop-types";
+
+export const CustomThreshold = ({
+    checkboxId,
+    checkboxLabel,
+    onCheckboxChange,
+    fieldId,		
+    onFieldChange,
+    onFieldBlur,
+    alertUnit,
+    infrastructureMonitor,
+    errors
+}) => 
+    {
+        const theme  = useTheme();
+        return (
+    <Stack
+        direction={"row"}
+        sx={{
+            width: "50%",
+            justifyContent: "space-between",
+        }}
+    >
+        <Box>
+            <Checkbox
+                id={checkboxId}
+                label={checkboxLabel}
+                isChecked={infrastructureMonitor[checkboxId]}
+                onChange={onCheckboxChange}
+            />
+        </Box>
+        <Stack
+            direction={"row"}
+            sx={{
+                justifyContent: "flex-end",
+            }}
+        >
+            <Field
+                type="number"
+                className="field-infrastructure-alert"
+                id={fieldId}
+                value={infrastructureMonitor[fieldId]}
+                onBlur={onFieldBlur}
+                onChange={onFieldChange}
+                error={errors[fieldId]}
+                disabled={!infrastructureMonitor[checkboxId]}
+            ></Field>
+            <Typography
+                component="p"
+                m={theme.spacing(3)}
+            >
+                {alertUnit}
+            </Typography>
+        </Stack>
+    </Stack>
+)}
+
+CustomThreshold.propTypes = {
+	checkboxId: PropTypes.string.isRequired,
+	checkboxLabel: PropTypes.string.isRequired,
+	onCheckboxChange: PropTypes.func.isRequired,
+	fieldId: PropTypes.string.isRequired,
+	onFieldChange: PropTypes.func.isRequired,
+	onFieldBlur: PropTypes.func.isRequired,
+	alertUnit: PropTypes.string.isRequired,
+	infrastructureMonitor: PropTypes.object.isRequired,
+	errors: PropTypes.object.isRequired,
+};
\ No newline at end of file
diff --git a/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx b/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx
index 7ca49da52..8210a7bee 100644
--- a/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx
+++ b/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx
@@ -18,6 +18,7 @@ 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 "../../../Components/CustomThreshold";
 
 const CreateInfrastructureMonitor = () => {
 	const [infrastructureMonitor, setInfrastructureMonitor] = useState({
@@ -52,55 +53,6 @@ const CreateInfrastructureMonitor = () => {
 	const alertErrKeyLen = Object.keys(errors)
 							.filter(k => k.startsWith(THRESHOLD_FIELD_PREFIX)).length
 
-	const CustomAlertStack = ({
-		checkboxId,
-		checkboxLabel,
-		fieldId,
-		alertUnit,
-		onChange,
-		onBlur,
-	}) => (
-		<Stack
-			direction={"row"}
-			sx={{
-				width: "50%",
-				justifyContent: "space-between",
-			}}
-		>
-			<Box>
-				<Checkbox
-					id={checkboxId}
-					label={checkboxLabel}
-					isChecked={infrastructureMonitor[checkboxId]}
-					onChange={handleCustomAlertCheckChange}
-				/>
-			</Box>
-			<Stack
-				direction={"row"}
-				sx={{
-					justifyContent: "flex-end",
-				}}
-			>
-				<Field
-					type="number"
-					className="field-infrastructure-alert"
-					id={fieldId}
-					value={infrastructureMonitor[fieldId]}
-					onBlur={onBlur}
-					onChange={onChange}
-					error={errors[fieldId]}
-					disabled={!infrastructureMonitor[checkboxId]}
-				></Field>
-				<Typography
-					component="p"
-					m={theme.spacing(3)}
-				>
-					{alertUnit}
-				</Typography>
-			</Stack>
-		</Stack>
-	);
-
 	const handleCustomAlertCheckChange = (event) => {
 		const { value, id } = event.target;
 		setInfrastructureMonitor((prev) => {
@@ -209,7 +161,7 @@ const CreateInfrastructureMonitor = () => {
 		if (hasValidationErrors(form, infrastractureMonitorValidation, setErrors)) {
 			return;
 		} else {
-			const checkEndpointAction = dispatch(
+			const checkEndpointAction = await dispatch(
 				checkInfrastructureEndpointResolution({ authToken, monitorURL: form.url })
 			);
 			if (checkEndpointAction.meta.requestStatus === "rejected") {
@@ -219,7 +171,7 @@ const CreateInfrastructureMonitor = () => {
 				setErrors({ url: "The entered URL is not reachable." });
 				return;
 			}
-			const action = dispatch(
+			const action = await dispatch(
 				createInfrastructureMonitor({ authToken, monitor: generatePayload(form) })
 			);
 			if (action.meta.requestStatus === "fulfilled") {
@@ -370,18 +322,20 @@ const CreateInfrastructureMonitor = () => {
 					</Box>
 					<Stack gap={theme.spacing(6)}>
 						{HARDWARE_MONITOR_TYPES.map((type, idx) => (
-							<CustomAlertStack
+							<CustomThreshold
 								key={idx}
 								checkboxId={type}
 								checkboxLabel={
 									type !== "cpu" ? capitalizeFirstLetter(type) : type.toUpperCase()
 								}
-								checkboxValue={""}
+								onCheckboxChange={handleCustomAlertCheckChange}
 								fieldId={THRESHOLD_FIELD_PREFIX + type}
 								fieldValue={infrastructureMonitor[THRESHOLD_FIELD_PREFIX + type] ?? ""}
-								onChange={handleChange}
-								onBlur={handleBlur}
+								onFieldChange={handleChange}
+								onFieldBlur={handleBlur}
 								alertUnit="%"
+								infrastructureMonitor={infrastructureMonitor}
+								errors={errors}
 							/>
 						))}
 						{alertErrKeyLen > 0 && (
diff --git a/Client/src/Validation/error.js b/Client/src/Validation/error.js
index 332037a67..e1278310b 100644
--- a/Client/src/Validation/error.js
+++ b/Client/src/Validation/error.js
@@ -1,7 +1,7 @@
 const buildErrors = (prev, id, error) => {
 	const updatedErrors = { ...prev };
 	if (error) {
-		updatedErrors[id] = error.details[0].message?? "Validation error";
+		updatedErrors[id] = error.details[0].message ?? "Validation error";
 	} else {
 		delete updatedErrors[id];
 	}
@@ -27,22 +27,24 @@ const hasValidationErrors = (form, validation, setErrors) => {
 			) {
 				newErrors[err.path[0]] = err.message ?? "Validation error";
 			}
-
 			// Handle conditionally usage number required cases
 			if (!form.cpu || (form.cpu && form.usage_cpu)) {
 				delete newErrors["usage_cpu"];
-			}			
+			}
 			if (!form.memory || (form.memory && form.usage_memory)) {
 				delete newErrors["usage_memory"];
-			}			
+			}
 			if (!form.disk || (form.disk && form.usage_disk)) {
 				delete newErrors["usage_disk"];
-			}						
+			}
 		});
 		if (Object.keys(newErrors).length > 0) {
 			setErrors(newErrors);
 			return true;
-		} else return false;
+		} else {
+			setErrors({});
+			return false;
+		}
 	}
 	return false;
 };

From 59cbd1178baa8173c144e50be653435016ee59ed Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 13 Nov 2024 10:17:00 +0800
Subject: [PATCH 026/142] Add docker type to monitor model

---
 Server/db/models/Monitor.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Server/db/models/Monitor.js b/Server/db/models/Monitor.js
index 111c48d03..d44566a97 100644
--- a/Server/db/models/Monitor.js
+++ b/Server/db/models/Monitor.js
@@ -28,7 +28,7 @@ const MonitorSchema = mongoose.Schema(
 		type: {
 			type: String,
 			required: true,
-			enum: ["http", "ping", "pagespeed", "hardware"],
+			enum: ["http", "ping", "pagespeed", "hardware", "docker"],
 		},
 		url: {
 			type: String,

From 41370c8d042a327bf95b55e16cd80d5d46a36c9b Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 13 Nov 2024 10:33:46 +0800
Subject: [PATCH 027/142] Add check to see if existing service/method exists to
 logger statement

---
 Server/service/jobQueue.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/Server/service/jobQueue.js b/Server/service/jobQueue.js
index aaab725e5..0eb265405 100644
--- a/Server/service/jobQueue.js
+++ b/Server/service/jobQueue.js
@@ -178,10 +178,11 @@ class JobQueue {
 					prevStatus,
 				});
 			} catch (error) {
+				console.log(error.service);
 				this.logger.error({
 					message: error.message,
-					service: SERVICE_NAME,
-					method: "createWorker",
+					service: error.service ?? SERVICE_NAME,
+					method: error.method ?? "createJobHandler",
 					details: `Error processing job ${job.id}: ${error.message}`,
 					stack: error.stack,
 				});

From 2f4189382ad66cd28421618a8792687725b82eb8 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 13 Nov 2024 10:34:05 +0800
Subject: [PATCH 028/142] Add hanlder for Docker types

---
 Server/service/networkService.js | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/Server/service/networkService.js b/Server/service/networkService.js
index fa665e1ea..b7d76e475 100644
--- a/Server/service/networkService.js
+++ b/Server/service/networkService.js
@@ -13,6 +13,7 @@ class NetworkService {
 		this.TYPE_HTTP = "http";
 		this.TYPE_PAGESPEED = "pagespeed";
 		this.TYPE_HARDWARE = "hardware";
+		this.TYPE_DOCKER = "docker";
 		this.SERVICE_NAME = "NetworkService";
 		this.NETWORK_ERROR = 5000;
 		this.PING_ERROR = 5001;
@@ -162,6 +163,11 @@ class NetworkService {
 		return this.requestHttp(job);
 	}
 
+	async requestDocker(job) {
+		console.log(job);
+		return {};
+	}
+
 	/**
 	 * Gets the status of a job based on its type and returns the appropriate response.
 	 *
@@ -181,13 +187,13 @@ class NetworkService {
 				return await this.requestPagespeed(job);
 			case this.TYPE_HARDWARE:
 				return await this.requestHardware(job);
+			case this.TYPE_DOCKER:
+				return await this.requestDocker(job);
 			default:
-				this.logger.error({
-					message: `Unsupported type: ${job.data.type}`,
-					service: this.SERVICE_NAME,
-					method: "getStatus",
-				});
-				return {};
+				const err = new Error(`Unsupported type: ${job.data.type}`);
+				err.service = this.SERVICE_NAME;
+				err.method = "getStatus";
+				throw err;
 		}
 	}
 }

From 61406be2a3f7dd1ff8d5b06855403494800cf57a Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 13 Nov 2024 10:34:40 +0800
Subject: [PATCH 029/142] Add dockerode

---
 Server/package-lock.json | 276 +++++++++++++++++++++++++++++++++++++++
 Server/package.json      |   1 +
 2 files changed, 277 insertions(+)

diff --git a/Server/package-lock.json b/Server/package-lock.json
index d03515453..22ffaa863 100644
--- a/Server/package-lock.json
+++ b/Server/package-lock.json
@@ -14,6 +14,7 @@
 				"bcrypt": "^5.1.1",
 				"bullmq": "5.25.6",
 				"cors": "^2.8.5",
+				"dockerode": "4.0.2",
 				"dotenv": "^16.4.5",
 				"express": "^4.19.2",
 				"handlebars": "^4.7.8",
@@ -89,6 +90,12 @@
 				"node": ">=6.9.0"
 			}
 		},
+		"node_modules/@balena/dockerignore": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/@balena/dockerignore/-/dockerignore-1.0.2.tgz",
+			"integrity": "sha512-wMue2Sy4GAVTk6Ic4tJVcnfdau+gx2EnG7S+uAEe+TWJFqE4YoWN4/H8MSLj4eYJKxGg26lZwboEniNiNwZQ6Q==",
+			"license": "Apache-2.0"
+		},
 		"node_modules/@bcoe/v8-coverage": {
 			"version": "0.2.3",
 			"resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz",
@@ -996,6 +1003,15 @@
 			"resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
 			"integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg=="
 		},
+		"node_modules/asn1": {
+			"version": "0.2.6",
+			"resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.6.tgz",
+			"integrity": "sha512-ix/FxPn0MDjeyJ7i/yoHGFt/EX6LyNbxSEhPPXODPL+KB0VPk86UYfL0lMdy+KCnv+fmvIzySwaK5COwqVbWTQ==",
+			"license": "MIT",
+			"dependencies": {
+				"safer-buffer": "~2.1.0"
+			}
+		},
 		"node_modules/assertion-error": {
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
@@ -1032,6 +1048,26 @@
 			"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
 			"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
 		},
+		"node_modules/base64-js": {
+			"version": "1.5.1",
+			"resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+			"integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/feross"
+				},
+				{
+					"type": "patreon",
+					"url": "https://www.patreon.com/feross"
+				},
+				{
+					"type": "consulting",
+					"url": "https://feross.org/support"
+				}
+			],
+			"license": "MIT"
+		},
 		"node_modules/bcrypt": {
 			"version": "5.1.1",
 			"resolved": "https://registry.npmjs.org/bcrypt/-/bcrypt-5.1.1.tgz",
@@ -1045,6 +1081,15 @@
 				"node": ">= 10.0.0"
 			}
 		},
+		"node_modules/bcrypt-pbkdf": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
+			"integrity": "sha512-qeFIXtP4MSoi6NLqO12WfqARWWuCKi2Rn/9hJLEmtB5yTNr9DqFWkJRCf2qShWzPeAMRnOgCrq0sg/KLv5ES9w==",
+			"license": "BSD-3-Clause",
+			"dependencies": {
+				"tweetnacl": "^0.14.3"
+			}
+		},
 		"node_modules/binary-extensions": {
 			"version": "2.3.0",
 			"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
@@ -1056,6 +1101,17 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/bl": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
+			"integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
+			"license": "MIT",
+			"dependencies": {
+				"buffer": "^5.5.0",
+				"inherits": "^2.0.4",
+				"readable-stream": "^3.4.0"
+			}
+		},
 		"node_modules/body-parser": {
 			"version": "1.20.3",
 			"resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz",
@@ -1152,6 +1208,30 @@
 				"node": ">=16.20.1"
 			}
 		},
+		"node_modules/buffer": {
+			"version": "5.7.1",
+			"resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+			"integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/feross"
+				},
+				{
+					"type": "patreon",
+					"url": "https://www.patreon.com/feross"
+				},
+				{
+					"type": "consulting",
+					"url": "https://feross.org/support"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"base64-js": "^1.3.1",
+				"ieee754": "^1.1.13"
+			}
+		},
 		"node_modules/buffer-equal-constant-time": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
@@ -1163,6 +1243,15 @@
 			"integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
 			"license": "MIT"
 		},
+		"node_modules/buildcheck": {
+			"version": "0.0.6",
+			"resolved": "https://registry.npmjs.org/buildcheck/-/buildcheck-0.0.6.tgz",
+			"integrity": "sha512-8f9ZJCUXyT1M35Jx7MkBgmBMo3oHTTBIPLiY9xyL0pl3T5RwcPEY8cUHr5LBNfu/fk6c2T4DJZuVM/8ZZT2D2A==",
+			"optional": true,
+			"engines": {
+				"node": ">=10.0.0"
+			}
+		},
 		"node_modules/bullmq": {
 			"version": "5.25.6",
 			"resolved": "https://registry.npmjs.org/bullmq/-/bullmq-5.25.6.tgz",
@@ -1708,6 +1797,20 @@
 				}
 			}
 		},
+		"node_modules/cpu-features": {
+			"version": "0.0.10",
+			"resolved": "https://registry.npmjs.org/cpu-features/-/cpu-features-0.0.10.tgz",
+			"integrity": "sha512-9IkYqtX3YHPCzoVg1Py+o9057a3i0fp7S530UWokCSaFVTc7CwXPRiOjRjBQQ18ZCNafx78YfnG+HALxtVmOGA==",
+			"hasInstallScript": true,
+			"optional": true,
+			"dependencies": {
+				"buildcheck": "~0.0.6",
+				"nan": "^2.19.0"
+			},
+			"engines": {
+				"node": ">=10.0.0"
+			}
+		},
 		"node_modules/cron-parser": {
 			"version": "4.9.0",
 			"resolved": "https://registry.npmjs.org/cron-parser/-/cron-parser-4.9.0.tgz",
@@ -2014,6 +2117,58 @@
 				"node": ">=0.3.1"
 			}
 		},
+		"node_modules/docker-modem": {
+			"version": "5.0.3",
+			"resolved": "https://registry.npmjs.org/docker-modem/-/docker-modem-5.0.3.tgz",
+			"integrity": "sha512-89zhop5YVhcPEt5FpUFGr3cDyceGhq/F9J+ZndQ4KfqNvfbJpPMfgeixFgUj5OjCYAboElqODxY5Z1EBsSa6sg==",
+			"license": "Apache-2.0",
+			"dependencies": {
+				"debug": "^4.1.1",
+				"readable-stream": "^3.5.0",
+				"split-ca": "^1.0.1",
+				"ssh2": "^1.15.0"
+			},
+			"engines": {
+				"node": ">= 8.0"
+			}
+		},
+		"node_modules/docker-modem/node_modules/debug": {
+			"version": "4.3.7",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+			"integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+			"license": "MIT",
+			"dependencies": {
+				"ms": "^2.1.3"
+			},
+			"engines": {
+				"node": ">=6.0"
+			},
+			"peerDependenciesMeta": {
+				"supports-color": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/docker-modem/node_modules/ms": {
+			"version": "2.1.3",
+			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+			"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+			"license": "MIT"
+		},
+		"node_modules/dockerode": {
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/dockerode/-/dockerode-4.0.2.tgz",
+			"integrity": "sha512-9wM1BVpVMFr2Pw3eJNXrYYt6DT9k0xMcsSCjtPvyQ+xa1iPg/Mo3T/gUcwI0B2cczqCeCYRPF8yFYDwtFXT0+w==",
+			"license": "Apache-2.0",
+			"dependencies": {
+				"@balena/dockerignore": "^1.0.2",
+				"docker-modem": "^5.0.3",
+				"tar-fs": "~2.0.1"
+			},
+			"engines": {
+				"node": ">= 8.0"
+			}
+		},
 		"node_modules/dom-serializer": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
@@ -2145,6 +2300,15 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/end-of-stream": {
+			"version": "1.4.4",
+			"resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
+			"integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
+			"license": "MIT",
+			"dependencies": {
+				"once": "^1.4.0"
+			}
+		},
 		"node_modules/entities": {
 			"version": "4.5.0",
 			"resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
@@ -2439,6 +2603,12 @@
 				"node": ">= 0.6"
 			}
 		},
+		"node_modules/fs-constants": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
+			"integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==",
+			"license": "MIT"
+		},
 		"node_modules/fs-minipass": {
 			"version": "2.1.0",
 			"resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
@@ -2822,6 +2992,26 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/ieee754": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+			"integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/feross"
+				},
+				{
+					"type": "patreon",
+					"url": "https://www.patreon.com/feross"
+				},
+				{
+					"type": "consulting",
+					"url": "https://feross.org/support"
+				}
+			],
+			"license": "BSD-3-Clause"
+		},
 		"node_modules/ignore-by-default": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/ignore-by-default/-/ignore-by-default-1.0.1.tgz",
@@ -4129,6 +4319,12 @@
 				"node": ">=10"
 			}
 		},
+		"node_modules/mkdirp-classic": {
+			"version": "0.5.3",
+			"resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz",
+			"integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==",
+			"license": "MIT"
+		},
 		"node_modules/mocha": {
 			"version": "10.8.2",
 			"resolved": "https://registry.npmjs.org/mocha/-/mocha-10.8.2.tgz",
@@ -4503,6 +4699,13 @@
 				"mkdirp": "bin/cmd.js"
 			}
 		},
+		"node_modules/nan": {
+			"version": "2.22.0",
+			"resolved": "https://registry.npmjs.org/nan/-/nan-2.22.0.tgz",
+			"integrity": "sha512-nbajikzWTMwsW+eSsNm3QwlOs7het9gGJU5dDZzRTQGk03vyBOauxgI4VakDzE0PtsGTmXPsXTbbjVhRwR5mpw==",
+			"license": "MIT",
+			"optional": true
+		},
 		"node_modules/nanoid": {
 			"version": "3.3.7",
 			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
@@ -5553,6 +5756,16 @@
 			"integrity": "sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==",
 			"dev": true
 		},
+		"node_modules/pump": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/pump/-/pump-3.0.2.tgz",
+			"integrity": "sha512-tUPXtzlGM8FE3P0ZL6DVs/3P58k9nk8/jZeQCurTJylQA8qFYzHFfhBJkuqyE0FifOsQ0uKWekiZ5g8wtr28cw==",
+			"license": "MIT",
+			"dependencies": {
+				"end-of-stream": "^1.1.0",
+				"once": "^1.3.1"
+			}
+		},
 		"node_modules/punycode": {
 			"version": "2.3.1",
 			"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -6046,6 +6259,29 @@
 				"memory-pager": "^1.0.2"
 			}
 		},
+		"node_modules/split-ca": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/split-ca/-/split-ca-1.0.1.tgz",
+			"integrity": "sha512-Q5thBSxp5t8WPTTJQS59LrGqOZqOsrhDGDVm8azCqIBjSBd7nd9o2PM+mDulQQkh8h//4U6hFZnc/mul8t5pWQ==",
+			"license": "ISC"
+		},
+		"node_modules/ssh2": {
+			"version": "1.16.0",
+			"resolved": "https://registry.npmjs.org/ssh2/-/ssh2-1.16.0.tgz",
+			"integrity": "sha512-r1X4KsBGedJqo7h8F5c4Ybpcr5RjyP+aWIG007uBPRjmdQWfEiVLzSK71Zji1B9sKxwaCvD8y8cwSkYrlLiRRg==",
+			"hasInstallScript": true,
+			"dependencies": {
+				"asn1": "^0.2.6",
+				"bcrypt-pbkdf": "^1.0.2"
+			},
+			"engines": {
+				"node": ">=10.16.0"
+			},
+			"optionalDependencies": {
+				"cpu-features": "~0.0.10",
+				"nan": "^2.20.0"
+			}
+		},
 		"node_modules/ssl-checker": {
 			"version": "2.0.10",
 			"resolved": "https://registry.npmjs.org/ssl-checker/-/ssl-checker-2.0.10.tgz",
@@ -6248,6 +6484,40 @@
 				"node": ">=10"
 			}
 		},
+		"node_modules/tar-fs": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.0.1.tgz",
+			"integrity": "sha512-6tzWDMeroL87uF/+lin46k+Q+46rAJ0SyPGz7OW7wTgblI273hsBqk2C1j0/xNadNLKDTUL9BukSjB7cwgmlPA==",
+			"license": "MIT",
+			"dependencies": {
+				"chownr": "^1.1.1",
+				"mkdirp-classic": "^0.5.2",
+				"pump": "^3.0.0",
+				"tar-stream": "^2.0.0"
+			}
+		},
+		"node_modules/tar-fs/node_modules/chownr": {
+			"version": "1.1.4",
+			"resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
+			"integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
+			"license": "ISC"
+		},
+		"node_modules/tar-stream": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
+			"integrity": "sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==",
+			"license": "MIT",
+			"dependencies": {
+				"bl": "^4.0.3",
+				"end-of-stream": "^1.4.1",
+				"fs-constants": "^1.0.0",
+				"inherits": "^2.0.3",
+				"readable-stream": "^3.1.1"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
 		"node_modules/text-hex": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/text-hex/-/text-hex-1.0.0.tgz",
@@ -6311,6 +6581,12 @@
 			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz",
 			"integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ=="
 		},
+		"node_modules/tweetnacl": {
+			"version": "0.14.5",
+			"resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
+			"integrity": "sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA==",
+			"license": "Unlicense"
+		},
 		"node_modules/type-detect": {
 			"version": "4.0.8",
 			"resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz",
diff --git a/Server/package.json b/Server/package.json
index 16e0e9d1c..ce34ee0f2 100644
--- a/Server/package.json
+++ b/Server/package.json
@@ -17,6 +17,7 @@
 		"bcrypt": "^5.1.1",
 		"bullmq": "5.25.6",
 		"cors": "^2.8.5",
+		"dockerode": "4.0.2",
 		"dotenv": "^16.4.5",
 		"express": "^4.19.2",
 		"handlebars": "^4.7.8",

From 2548742f31f8446040fe3a0432d8b9811cbcdeb7 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 13 Nov 2024 10:36:42 +0800
Subject: [PATCH 030/142] Inject dockerode, instantiate instance

---
 Server/index.js                  | 5 +++--
 Server/service/networkService.js | 6 ++++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/Server/index.js b/Server/index.js
index 11b5b2151..0e9811a43 100644
--- a/Server/index.js
+++ b/Server/index.js
@@ -28,6 +28,7 @@ import NetworkService from "./service/networkService.js";
 import axios from "axios";
 import ping from "ping";
 import http from "http";
+import Docker from "dockerode";
 
 // Email service and dependencies
 import EmailService from "./service/emailService.js";
@@ -45,7 +46,7 @@ import NotificationService from "./service/notificationService.js";
 
 import db from "./db/mongo/MongoDB.js";
 const SERVICE_NAME = "Server";
-const SHUTDOWN_TIMEOUT = 0;
+const SHUTDOWN_TIMEOUT = 1000;
 
 let isShuttingDown = false;
 const __filename = fileURLToPath(import.meta.url);
@@ -130,7 +131,7 @@ const startApp = async () => {
 		nodemailer,
 		logger
 	);
-	const networkService = new NetworkService(axios, ping, logger, http);
+	const networkService = new NetworkService(axios, ping, logger, http, Docker);
 	const statusService = new StatusService(db, logger);
 	const notificationService = new NotificationService(emailService, db, logger);
 	const jobQueue = await JobQueue.createJobQueue(
diff --git a/Server/service/networkService.js b/Server/service/networkService.js
index b7d76e475..74ee8105c 100644
--- a/Server/service/networkService.js
+++ b/Server/service/networkService.js
@@ -8,7 +8,7 @@ import { errorMessages, successMessages } from "../utils/messages.js";
  * @param {Object} http - The HTTP utility for network operations.
  */
 class NetworkService {
-	constructor(axios, ping, logger, http) {
+	constructor(axios, ping, logger, http, Docker) {
 		this.TYPE_PING = "ping";
 		this.TYPE_HTTP = "http";
 		this.TYPE_PAGESPEED = "pagespeed";
@@ -21,6 +21,7 @@ class NetworkService {
 		this.ping = ping;
 		this.logger = logger;
 		this.http = http;
+		this.Docker = Docker;
 	}
 
 	/**
@@ -164,7 +165,8 @@ class NetworkService {
 	}
 
 	async requestDocker(job) {
-		console.log(job);
+		var docker = new Docker({ socketPath: "/var/run/docker.sock" });
+
 		return {};
 	}
 

From b079327296923a863d13151c29ca04c394e9a3de Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 13 Nov 2024 10:59:40 +0800
Subject: [PATCH 031/142] remove console log

---
 Server/service/jobQueue.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/Server/service/jobQueue.js b/Server/service/jobQueue.js
index 0eb265405..eedeb1a5c 100644
--- a/Server/service/jobQueue.js
+++ b/Server/service/jobQueue.js
@@ -178,7 +178,6 @@ class JobQueue {
 					prevStatus,
 				});
 			} catch (error) {
-				console.log(error.service);
 				this.logger.error({
 					message: error.message,
 					service: error.service ?? SERVICE_NAME,

From 5285fd30a1e43c947a548bfb15cdfaebee425cbb Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 13 Nov 2024 10:59:53 +0800
Subject: [PATCH 032/142] Add docker messages

---
 Server/utils/messages.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/Server/utils/messages.js b/Server/utils/messages.js
index c75c617d2..1a994527a 100644
--- a/Server/utils/messages.js
+++ b/Server/utils/messages.js
@@ -55,6 +55,9 @@ const errorMessages = {
 	// Status Page Errors
 	STATUS_PAGE_NOT_FOUND: "Status page not found",
 	STATUS_PAGE_URL_NOT_UNIQUE: "Status page url must be unique",
+
+	// Docker
+	DOCKER_FAIL: "Failed to fetch Docker container information",
 };
 
 const successMessages = {
@@ -123,6 +126,9 @@ const successMessages = {
 	// Status Page
 	STATUS_PAGE_BY_URL: "Got status page by url successfully",
 	STATUS_PAGE_CREATE: "Status page created successfully",
+
+	// Docker
+	DOCKER_SUCCESS: "Docker container status fetched successfully",
 };
 
 export { errorMessages, successMessages };

From 922c4d38d6ed95d52aafafbd8e6a74c4313c20b8 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 13 Nov 2024 11:00:16 +0800
Subject: [PATCH 033/142] Build docker response

---
 Server/service/networkService.js | 27 +++++++++++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/Server/service/networkService.js b/Server/service/networkService.js
index 74ee8105c..153121503 100644
--- a/Server/service/networkService.js
+++ b/Server/service/networkService.js
@@ -165,9 +165,32 @@ class NetworkService {
 	}
 
 	async requestDocker(job) {
-		var docker = new Docker({ socketPath: "/var/run/docker.sock" });
+		const docker = new this.Docker({ socketPath: "/var/run/docker.sock" });
+		const container = docker.getContainer(job.data.url);
 
-		return {};
+		const { response, responseTime, error } = await this.timeRequest(() =>
+			container.inspect()
+		);
+
+		const containerState = response?.State ?? {};
+
+		const dockerResponse = {
+			monitorId: job.data._id,
+			type: job.data.type,
+			responseTime,
+		};
+
+		if (error) {
+			const code = error.statusCode || this.NETWORK_ERROR;
+			dockerResponse.code = code;
+			dockerResponse.status = false;
+			dockerResponse.message = error.reason || errorMessages.DOCKER_FAIL;
+			return dockerResponse;
+		}
+		dockerResponse.status = containerState.Status === "running" ? true : false;
+		dockerResponse.code = 200;
+		dockerResponse.message = successMessages.DOCKER_SUCCESS;
+		return dockerResponse;
 	}
 
 	/**

From 11b84610c5ebc3e317d02337dc635d13461f66d0 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 13 Nov 2024 11:07:03 +0800
Subject: [PATCH 034/142] safe object access

---
 Server/service/networkService.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/Server/service/networkService.js b/Server/service/networkService.js
index 153121503..a1ff64c20 100644
--- a/Server/service/networkService.js
+++ b/Server/service/networkService.js
@@ -172,8 +172,6 @@ class NetworkService {
 			container.inspect()
 		);
 
-		const containerState = response?.State ?? {};
-
 		const dockerResponse = {
 			monitorId: job.data._id,
 			type: job.data.type,
@@ -187,7 +185,7 @@ class NetworkService {
 			dockerResponse.message = error.reason || errorMessages.DOCKER_FAIL;
 			return dockerResponse;
 		}
-		dockerResponse.status = containerState.Status === "running" ? true : false;
+		dockerResponse.status = response?.State?.Status === "running" ? true : false;
 		dockerResponse.code = 200;
 		dockerResponse.message = successMessages.DOCKER_SUCCESS;
 		return dockerResponse;

From 34ae35ea219b81d65dc26265ed44f0dd1fd36e2e Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 13 Nov 2024 11:07:36 +0800
Subject: [PATCH 035/142] Add db operation type for Docker type checks to
 statusService

---
 Server/service/statusService.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/Server/service/statusService.js b/Server/service/statusService.js
index 22254d050..4f7c1a4ce 100644
--- a/Server/service/statusService.js
+++ b/Server/service/statusService.js
@@ -133,6 +133,7 @@ class StatusService {
 				ping: this.db.createCheck,
 				pagespeed: this.db.createPageSpeedCheck,
 				hardware: this.db.createHardwareCheck,
+				docker: this.db.createCheck,
 			};
 			const operation = operationMap[networkResponse.type];
 

From c17efe3d016a41b422e0684965930de55040efd9 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 13 Nov 2024 12:34:11 +0800
Subject: [PATCH 036/142] add tests

---
 Server/tests/services/networkService.test.js | 128 +++++++++++++++++--
 1 file changed, 114 insertions(+), 14 deletions(-)

diff --git a/Server/tests/services/networkService.test.js b/Server/tests/services/networkService.test.js
index 4e48524e2..9f4a30b20 100644
--- a/Server/tests/services/networkService.test.js
+++ b/Server/tests/services/networkService.test.js
@@ -3,7 +3,7 @@ import NetworkService from "../../service/networkService.js";
 import { expect } from "chai";
 import http from "http";
 describe("Network Service", () => {
-	let axios, ping, logger, networkService;
+	let axios, ping, Docker, logger, networkService;
 
 	beforeEach(() => {
 		axios = {
@@ -12,6 +12,11 @@ describe("Network Service", () => {
 				status: 200,
 			}),
 		};
+		Docker = class {
+			getContainer = sinon.stub().returns({
+				inspect: sinon.stub().resolves({ State: { Status: "running" } }),
+			});
+		};
 		ping = {
 			promise: {
 				probe: sinon
@@ -20,7 +25,7 @@ describe("Network Service", () => {
 			},
 		};
 		logger = { error: sinon.stub() };
-		networkService = new NetworkService(axios, ping, logger, http);
+		networkService = new NetworkService(axios, ping, logger, http, Docker);
 	});
 	describe("constructor", () => {
 		it("should create a new NetworkService instance", () => {
@@ -203,45 +208,140 @@ describe("Network Service", () => {
 		});
 	});
 
+	describe("requestDocker", () => {
+		it("should return a response object if docker successful", async () => {
+			const job = { data: { url: "http://test.com", _id: "123", type: "docker" } };
+			const dockerResult = await networkService.requestDocker(job);
+			expect(dockerResult.monitorId).to.equal("123");
+			expect(dockerResult.type).to.equal("docker");
+			expect(dockerResult.responseTime).to.be.a("number");
+			expect(dockerResult.status).to.be.true;
+		});
+
+		it("should return a response object with status false if container not running", async () => {
+			Docker = class {
+				getContainer = sinon.stub().returns({
+					inspect: sinon.stub().resolves({ State: { Status: "stopped" } }),
+				});
+			};
+			networkService = new NetworkService(axios, ping, logger, http, Docker);
+			const job = { data: { url: "http://test.com", _id: "123", type: "docker" } };
+			const dockerResult = await networkService.requestDocker(job);
+			expect(dockerResult.status).to.be.false;
+			expect(dockerResult.code).to.equal(200);
+		});
+
+		it("should handle an error when fetching the container", async () => {
+			Docker = class {
+				getContainer = sinon.stub().returns({
+					inspect: sinon.stub().throws(new Error("test error")),
+				});
+			};
+			networkService = new NetworkService(axios, ping, logger, http, Docker);
+			const job = { data: { url: "http://test.com", _id: "123", type: "docker" } };
+			const dockerResult = await networkService.requestDocker(job);
+			expect(dockerResult.status).to.be.false;
+			expect(dockerResult.code).to.equal(networkService.NETWORK_ERROR);
+		});
+
+		it("should throw an error if operations fail", async () => {
+			Docker = class {
+				getContainer = sinon.stub().throws(new Error("test error"));
+			};
+			networkService = new NetworkService(axios, ping, logger, http, Docker);
+			const job = { data: { url: "http://test.com", _id: "123", type: "docker" } };
+			try {
+				await networkService.requestDocker(job);
+			} catch (error) {
+				expect(error.message).to.equal("test error");
+			}
+		});
+	});
+
 	describe("getStatus", () => {
 		beforeEach(() => {
 			networkService.requestPing = sinon.stub();
 			networkService.requestHttp = sinon.stub();
 			networkService.requestPagespeed = sinon.stub();
 			networkService.requestHardware = sinon.stub();
+			networkService.requestDocker = sinon.stub();
 		});
 
 		afterEach(() => {
 			sinon.restore();
 		});
-		it("should call requestPing if type is ping", () => {
-			networkService.getStatus({ data: { type: "ping" } });
+		it("should call requestPing if type is ping", async () => {
+			await networkService.getStatus({ data: { type: "ping" } });
 			expect(networkService.requestPing.calledOnce).to.be.true;
+			expect(networkService.requestDocker.notCalled).to.be.true;
 			expect(networkService.requestHttp.notCalled).to.be.true;
 			expect(networkService.requestPagespeed.notCalled).to.be.true;
 		});
-		it("should call requestHttp if type is http", () => {
-			networkService.getStatus({ data: { type: "http" } });
+		it("should call requestHttp if type is http", async () => {
+			await networkService.getStatus({ data: { type: "http" } });
 			expect(networkService.requestPing.notCalled).to.be.true;
+			expect(networkService.requestDocker.notCalled).to.be.true;
 			expect(networkService.requestHttp.calledOnce).to.be.true;
 			expect(networkService.requestPagespeed.notCalled).to.be.true;
 		});
-		it("should call requestPagespeed if type is pagespeed", () => {
-			networkService.getStatus({ data: { type: "pagespeed" } });
+		it("should call requestPagespeed if type is pagespeed", async () => {
+			await networkService.getStatus({ data: { type: "pagespeed" } });
 			expect(networkService.requestPing.notCalled).to.be.true;
+			expect(networkService.requestDocker.notCalled).to.be.true;
 			expect(networkService.requestHttp.notCalled).to.be.true;
 			expect(networkService.requestPagespeed.calledOnce).to.be.true;
 		});
-		it("should call requestHardware if type is hardware", () => {
-			networkService.getStatus({ data: { type: "hardware" } });
+		it("should call requestHardware if type is hardware", async () => {
+			await networkService.getStatus({ data: { type: "hardware" } });
 			expect(networkService.requestHardware.calledOnce).to.be.true;
+			expect(networkService.requestDocker.notCalled).to.be.true;
 			expect(networkService.requestPing.notCalled).to.be.true;
 			expect(networkService.requestPagespeed.notCalled).to.be.true;
 		});
-		it("should log an error if an unknown type is provided", () => {
-			networkService.getStatus({ data: { type: "unknown" } });
-			expect(logger.error.calledOnce).to.be.true;
-			expect(logger.error.args[0][0].message).to.equal("Unsupported type: unknown");
+		it("should call requestDocker if type is Docker", async () => {
+			await networkService.getStatus({ data: { type: "docker" } });
+			expect(networkService.requestDocker.calledOnce).to.be.true;
+			expect(networkService.requestHardware.notCalled).to.be.true;
+			expect(networkService.requestPing.notCalled).to.be.true;
+			expect(networkService.requestPagespeed.notCalled).to.be.true;
+		});
+		it("should throw an error if an unknown type is provided", async () => {
+			try {
+				await networkService.getStatus({ data: { type: "unknown" } });
+			} catch (error) {
+				expect(error.service).to.equal("NetworkService");
+				expect(error.method).to.equal("getStatus");
+				expect(error.message).to.equal("Unsupported type: unknown");
+			}
+		});
+		it("should throw an error if job type is undefined", async () => {
+			try {
+				await networkService.getStatus({ data: { type: undefined } });
+			} catch (error) {
+				expect(error.service).to.equal("NetworkService");
+				expect(error.method).to.equal("getStatus");
+				expect(error.message).to.equal("Unsupported type: unknown");
+			}
+		});
+		it("should throw an error if job is empty", async () => {
+			try {
+				await networkService.getStatus({});
+			} catch (error) {
+				console.log(error);
+				expect(error.service).to.equal("NetworkService");
+				expect(error.method).to.equal("getStatus");
+				expect(error.message).to.equal("Unsupported type: unknown");
+			}
+		});
+		it("should throw an error if job is null", async () => {
+			try {
+				await networkService.getStatus(null);
+			} catch (error) {
+				console.log(error);
+				expect(error.service).to.equal("NetworkService");
+				expect(error.method).to.equal("getStatus");
+				expect(error.message).to.equal("Unsupported type: unknown");
+			}
 		});
 	});
 });

From 7639dd2e804be471a8a6836454ce6775ee921e8d Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 13 Nov 2024 12:34:53 +0800
Subject: [PATCH 037/142] Refactored switch statement, extracted error building

---
 Server/service/networkService.js | 57 ++++++++++++++++++++++++++++----
 1 file changed, 50 insertions(+), 7 deletions(-)

diff --git a/Server/service/networkService.js b/Server/service/networkService.js
index a1ff64c20..7b40e288b 100644
--- a/Server/service/networkService.js
+++ b/Server/service/networkService.js
@@ -160,10 +160,43 @@ class NetworkService {
 		return this.requestHttp(updatedJob);
 	}
 
+	/**
+	 * Sends an HTTP request to check hardware status and returns the response.
+	 *
+	 * @param {Object} job - The job object containing the data for the hardware request.
+	 * @param {Object} job.data - The data object within the job.
+	 * @param {string} job.data.url - The URL to send the hardware status request to.
+	 * @param {string} job.data._id - The monitor ID for the hardware request.
+	 * @param {string} job.data.type - The type of request, which is "hardware".
+	 * @returns {Promise<Object>} An object containing the hardware status response details.
+	 * @property {string} monitorId - The monitor ID for the hardware request.
+	 * @property {string} type - The type of request ("hardware").
+	 * @property {number} responseTime - The time taken for the request to complete, in milliseconds.
+	 * @property {Object} payload - The response payload from the hardware status request.
+	 * @property {boolean} status - The status of the request (true if successful, false otherwise).
+	 * @property {number} code - The response code (200 if successful, error code otherwise).
+	 * @property {string} message - The message indicating the result of the hardware status request.
+	 */
 	async requestHardware(job) {
 		return this.requestHttp(job);
 	}
 
+	/**
+	 * Sends a request to inspect a Docker container and returns its status.
+	 *
+	 * @param {Object} job - The job object containing the data for the Docker request.
+	 * @param {Object} job.data - The data object within the job.
+	 * @param {string} job.data.url - The container ID or name to inspect.
+	 * @param {string} job.data._id - The monitor ID for the Docker request.
+	 * @param {string} job.data.type - The type of request, which is "docker".
+	 * @returns {Promise<Object>} An object containing the Docker container status details.
+	 * @property {string} monitorId - The monitor ID for the Docker request.
+	 * @property {string} type - The type of request ("docker").
+	 * @property {number} responseTime - The time taken for the Docker inspection to complete, in milliseconds.
+	 * @property {boolean} status - The status of the container (true if running, false otherwise).
+	 * @property {number} code - The response code (200 if successful, error code otherwise).
+	 * @property {string} message - The message indicating the result of the Docker inspection.
+	 */
 	async requestDocker(job) {
 		const docker = new this.Docker({ socketPath: "/var/run/docker.sock" });
 		const container = docker.getContainer(job.data.url);
@@ -179,9 +212,8 @@ class NetworkService {
 		};
 
 		if (error) {
-			const code = error.statusCode || this.NETWORK_ERROR;
-			dockerResponse.code = code;
 			dockerResponse.status = false;
+			dockerResponse.code = error.statusCode || this.NETWORK_ERROR;
 			dockerResponse.message = error.reason || errorMessages.DOCKER_FAIL;
 			return dockerResponse;
 		}
@@ -191,6 +223,19 @@ class NetworkService {
 		return dockerResponse;
 	}
 
+	/**
+	 * Handles unsupported job types by throwing an error with details.
+	 *
+	 * @param {string} type - The unsupported job type that was provided
+	 * @throws {Error} An error with service name, method name and unsupported type message
+	 */
+	handleUnsupportedType(type) {
+		const err = new Error(`Unsupported type: ${type}`);
+		err.service = this.SERVICE_NAME;
+		err.method = "getStatus";
+		throw err;
+	}
+
 	/**
 	 * Gets the status of a job based on its type and returns the appropriate response.
 	 *
@@ -201,7 +246,8 @@ class NetworkService {
 	 * @throws {Error} Throws an error if the job type is unsupported.
 	 */
 	async getStatus(job) {
-		switch (job.data.type) {
+		const type = job.data?.type ?? "unknown";
+		switch (type) {
 			case this.TYPE_PING:
 				return await this.requestPing(job);
 			case this.TYPE_HTTP:
@@ -213,10 +259,7 @@ class NetworkService {
 			case this.TYPE_DOCKER:
 				return await this.requestDocker(job);
 			default:
-				const err = new Error(`Unsupported type: ${job.data.type}`);
-				err.service = this.SERVICE_NAME;
-				err.method = "getStatus";
-				throw err;
+				return this.handleUnsupportedType(type);
 		}
 	}
 }

From b2c43955f8ad87ac8566cc3b6fe824e5ab11904a Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 13 Nov 2024 14:56:15 +0800
Subject: [PATCH 038/142] Add more robust error handling to networkService

---
 Server/service/networkService.js | 171 +++++++++++++++++++------------
 1 file changed, 105 insertions(+), 66 deletions(-)

diff --git a/Server/service/networkService.js b/Server/service/networkService.js
index 7b40e288b..23b3a62b1 100644
--- a/Server/service/networkService.js
+++ b/Server/service/networkService.js
@@ -64,28 +64,34 @@ class NetworkService {
 	 * @property {string} message - The message indicating the result of the ping request.
 	 */
 	async requestPing(job) {
-		const url = job.data.url;
-		const { response, responseTime, error } = await this.timeRequest(() =>
-			this.ping.promise.probe(url)
-		);
+		try {
+			const url = job.data.url;
+			const { response, responseTime, error } = await this.timeRequest(() =>
+				this.ping.promise.probe(url)
+			);
 
-		const pingResponse = {
-			monitorId: job.data._id,
-			type: "ping",
-			responseTime,
-			payload: response,
-		};
-		if (error) {
-			pingResponse.status = false;
-			pingResponse.code = this.PING_ERROR;
-			pingResponse.message = errorMessages.PING_CANNOT_RESOLVE;
+			const pingResponse = {
+				monitorId: job.data._id,
+				type: "ping",
+				responseTime,
+				payload: response,
+			};
+			if (error) {
+				pingResponse.status = false;
+				pingResponse.code = this.PING_ERROR;
+				pingResponse.message = errorMessages.PING_CANNOT_RESOLVE;
+				return pingResponse;
+			}
+
+			pingResponse.code = 200;
+			pingResponse.status = response.alive;
+			pingResponse.message = successMessages.PING_SUCCESS;
 			return pingResponse;
+		} catch (error) {
+			error.service = this.SERVICE_NAME;
+			error.method = "requestPing";
+			throw error;
 		}
-
-		pingResponse.code = 200;
-		pingResponse.status = response.alive;
-		pingResponse.message = successMessages.PING_SUCCESS;
-		return pingResponse;
 	}
 
 	/**
@@ -106,34 +112,40 @@ class NetworkService {
 	 * @property {string} message - The message indicating the result of the HTTP request.
 	 */
 	async requestHttp(job) {
-		const url = job.data.url;
-		const config = {};
+		try {
+			const url = job.data.url;
+			const config = {};
 
-		job.data.secret !== undefined &&
-			(config.headers = { Authorization: `Bearer ${job.data.secret}` });
+			job.data.secret !== undefined &&
+				(config.headers = { Authorization: `Bearer ${job.data.secret}` });
 
-		const { response, responseTime, error } = await this.timeRequest(() =>
-			this.axios.get(url, config)
-		);
+			const { response, responseTime, error } = await this.timeRequest(() =>
+				this.axios.get(url, config)
+			);
 
-		const httpResponse = {
-			monitorId: job.data._id,
-			type: job.data.type,
-			responseTime,
-			payload: response?.data,
-		};
+			const httpResponse = {
+				monitorId: job.data._id,
+				type: job.data.type,
+				responseTime,
+				payload: response?.data,
+			};
 
-		if (error) {
-			const code = error.response?.status || this.NETWORK_ERROR;
-			httpResponse.code = code;
-			httpResponse.status = false;
-			httpResponse.message = this.http.STATUS_CODES[code] || "Network Error";
+			if (error) {
+				const code = error.response?.status || this.NETWORK_ERROR;
+				httpResponse.code = code;
+				httpResponse.status = false;
+				httpResponse.message = this.http.STATUS_CODES[code] || "Network Error";
+				return httpResponse;
+			}
+			httpResponse.status = true;
+			httpResponse.code = response.status;
+			httpResponse.message = this.http.STATUS_CODES[response.status];
 			return httpResponse;
+		} catch (error) {
+			error.service = this.SERVICE_NAME;
+			error.method = "requestHttp";
+			throw error;
 		}
-		httpResponse.status = true;
-		httpResponse.code = response.status;
-		httpResponse.message = this.http.STATUS_CODES[response.status];
-		return httpResponse;
 	}
 
 	/**
@@ -153,11 +165,17 @@ class NetworkService {
 	 * @property {string} message - The message indicating the result of the PageSpeed request.
 	 */
 	async requestPagespeed(job) {
-		const url = job.data.url;
-		const updatedJob = { ...job };
-		const pagespeedUrl = `https://pagespeedonline.googleapis.com/pagespeedonline/v5/runPagespeed?url=${url}&category=seo&category=accessibility&category=best-practices&category=performance`;
-		updatedJob.data.url = pagespeedUrl;
-		return this.requestHttp(updatedJob);
+		try {
+			const url = job.data.url;
+			const updatedJob = { ...job };
+			const pagespeedUrl = `https://pagespeedonline.googleapis.com/pagespeedonline/v5/runPagespeed?url=${url}&category=seo&category=accessibility&category=best-practices&category=performance`;
+			updatedJob.data.url = pagespeedUrl;
+			return await this.requestHttp(updatedJob);
+		} catch (error) {
+			error.service = this.SERVICE_NAME;
+			error.method = "requestPagespeed";
+			throw error;
+		}
 	}
 
 	/**
@@ -178,7 +196,13 @@ class NetworkService {
 	 * @property {string} message - The message indicating the result of the hardware status request.
 	 */
 	async requestHardware(job) {
-		return this.requestHttp(job);
+		try {
+			return await this.requestHttp(job);
+		} catch (error) {
+			error.service = this.SERVICE_NAME;
+			error.method = "requestHardware";
+			throw error;
+		}
 	}
 
 	/**
@@ -198,29 +222,44 @@ class NetworkService {
 	 * @property {string} message - The message indicating the result of the Docker inspection.
 	 */
 	async requestDocker(job) {
-		const docker = new this.Docker({ socketPath: "/var/run/docker.sock" });
-		const container = docker.getContainer(job.data.url);
+		try {
+			const docker = new this.Docker({
+				socketPath: "/var/run/docker.sock",
+				handleError: true, // Enable error handling
+			});
 
-		const { response, responseTime, error } = await this.timeRequest(() =>
-			container.inspect()
-		);
+			const containers = await docker.listContainers({ all: true });
+			const containerExists = containers.some((c) => c.Id === job.data.url);
+			if (!containerExists) {
+				throw new Error(errorMessages.DOCKER_NOT_FOUND);
+			}
+			const container = docker.getContainer(job.data.url);
 
-		const dockerResponse = {
-			monitorId: job.data._id,
-			type: job.data.type,
-			responseTime,
-		};
+			const { response, responseTime, error } = await this.timeRequest(() =>
+				container.inspect()
+			);
 
-		if (error) {
-			dockerResponse.status = false;
-			dockerResponse.code = error.statusCode || this.NETWORK_ERROR;
-			dockerResponse.message = error.reason || errorMessages.DOCKER_FAIL;
+			const dockerResponse = {
+				monitorId: job.data._id,
+				type: job.data.type,
+				responseTime,
+			};
+
+			if (error) {
+				dockerResponse.status = false;
+				dockerResponse.code = error.statusCode || this.NETWORK_ERROR;
+				dockerResponse.message = error.reason || errorMessages.DOCKER_FAIL;
+				return dockerResponse;
+			}
+			dockerResponse.status = response?.State?.Status === "running" ? true : false;
+			dockerResponse.code = 200;
+			dockerResponse.message = successMessages.DOCKER_SUCCESS;
 			return dockerResponse;
+		} catch (error) {
+			error.service = this.SERVICE_NAME;
+			error.method = "requestDocker";
+			throw error;
 		}
-		dockerResponse.status = response?.State?.Status === "running" ? true : false;
-		dockerResponse.code = 200;
-		dockerResponse.message = successMessages.DOCKER_SUCCESS;
-		return dockerResponse;
 	}
 
 	/**
@@ -246,7 +285,7 @@ class NetworkService {
 	 * @throws {Error} Throws an error if the job type is unsupported.
 	 */
 	async getStatus(job) {
-		const type = job.data?.type ?? "unknown";
+		const type = job?.data?.type ?? "unknown";
 		switch (type) {
 			case this.TYPE_PING:
 				return await this.requestPing(job);

From b8f99e3f1cfcde588a4591c7231265dc897765c5 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 13 Nov 2024 14:56:32 +0800
Subject: [PATCH 039/142] Update tests

---
 Server/tests/services/networkService.test.js | 95 ++++++++++++++++++--
 1 file changed, 89 insertions(+), 6 deletions(-)

diff --git a/Server/tests/services/networkService.test.js b/Server/tests/services/networkService.test.js
index 9f4a30b20..d5c177d6f 100644
--- a/Server/tests/services/networkService.test.js
+++ b/Server/tests/services/networkService.test.js
@@ -2,6 +2,7 @@ import sinon from "sinon";
 import NetworkService from "../../service/networkService.js";
 import { expect } from "chai";
 import http from "http";
+import { errorMessages } from "../../utils/messages.js";
 describe("Network Service", () => {
 	let axios, ping, Docker, logger, networkService;
 
@@ -13,6 +14,12 @@ describe("Network Service", () => {
 			}),
 		};
 		Docker = class {
+			listContainers = sinon.stub().resolves([
+				{
+					Names: ["http://test.com"],
+					Id: "http://test.com",
+				},
+			]);
 			getContainer = sinon.stub().returns({
 				inspect: sinon.stub().resolves({ State: { Status: "running" } }),
 			});
@@ -75,6 +82,18 @@ describe("Network Service", () => {
 			expect(pingResult.status).to.be.false;
 			expect(pingResult.code).to.equal(networkService.PING_ERROR);
 		});
+		it("should throw an error if ping cannot resolve", async () => {
+			const error = new Error("test error");
+			networkService.timeRequest = sinon.stub().throws(error);
+			try {
+				await networkService.requestPing({
+					data: { url: "http://test.com", _id: "123" },
+				});
+			} catch (error) {
+				expect(error).to.exist;
+				expect(error.method).to.equal("requestPing");
+			}
+		});
 	});
 	describe("requestHttp", () => {
 		it("should return a response object if http successful", async () => {
@@ -113,6 +132,18 @@ describe("Network Service", () => {
 			expect(httpResult.status).to.be.false;
 			expect(httpResult.code).to.equal(networkService.NETWORK_ERROR);
 		});
+		it("should throw an error if an error occurs", async () => {
+			const error = new Error("test error");
+			networkService.timeRequest = sinon.stub().throws(error);
+			try {
+				await networkService.requestHttp({
+					data: { url: "http://test.com", _id: "123" },
+				});
+			} catch (error) {
+				expect(error).to.exist;
+				expect(error.method).to.equal("requestHttp");
+			}
+		});
 	});
 
 	describe("requestPagespeed", () => {
@@ -152,6 +183,18 @@ describe("Network Service", () => {
 			expect(pagespeedResult.status).to.be.false;
 			expect(pagespeedResult.code).to.equal(networkService.NETWORK_ERROR);
 		});
+		it("should throw an error if pagespeed cannot resolve", async () => {
+			const error = new Error("test error");
+			networkService.timeRequest = sinon.stub().throws(error);
+			try {
+				await networkService.requestPagespeed({
+					data: { url: "http://test.com", _id: "123" },
+				});
+			} catch (error) {
+				expect(error).to.exist;
+				expect(error.method).to.equal("requestPagespeed");
+			}
+		});
 	});
 
 	describe("requestHardware", () => {
@@ -206,6 +249,18 @@ describe("Network Service", () => {
 			expect(httpResult.status).to.be.false;
 			expect(httpResult.code).to.equal(networkService.NETWORK_ERROR);
 		});
+		it("should throw an error if hardware cannot resolve", async () => {
+			const error = new Error("test error");
+			networkService.timeRequest = sinon.stub().throws(error);
+			try {
+				await networkService.requestHardware({
+					data: { url: "http://test.com", _id: "123" },
+				});
+			} catch (error) {
+				expect(error).to.exist;
+				expect(error.method).to.equal("requestHardware");
+			}
+		});
 	});
 
 	describe("requestDocker", () => {
@@ -220,12 +275,18 @@ describe("Network Service", () => {
 
 		it("should return a response object with status false if container not running", async () => {
 			Docker = class {
+				listContainers = sinon.stub().resolves([
+					{
+						Names: ["/my_container"],
+						Id: "abc123",
+					},
+				]);
 				getContainer = sinon.stub().returns({
 					inspect: sinon.stub().resolves({ State: { Status: "stopped" } }),
 				});
 			};
 			networkService = new NetworkService(axios, ping, logger, http, Docker);
-			const job = { data: { url: "http://test.com", _id: "123", type: "docker" } };
+			const job = { data: { url: "abc123", _id: "123", type: "docker" } };
 			const dockerResult = await networkService.requestDocker(job);
 			expect(dockerResult.status).to.be.false;
 			expect(dockerResult.code).to.equal(200);
@@ -233,12 +294,18 @@ describe("Network Service", () => {
 
 		it("should handle an error when fetching the container", async () => {
 			Docker = class {
+				listContainers = sinon.stub().resolves([
+					{
+						Names: ["/my_container"],
+						Id: "abc123",
+					},
+				]);
 				getContainer = sinon.stub().returns({
 					inspect: sinon.stub().throws(new Error("test error")),
 				});
 			};
 			networkService = new NetworkService(axios, ping, logger, http, Docker);
-			const job = { data: { url: "http://test.com", _id: "123", type: "docker" } };
+			const job = { data: { url: "abc123", _id: "123", type: "docker" } };
 			const dockerResult = await networkService.requestDocker(job);
 			expect(dockerResult.status).to.be.false;
 			expect(dockerResult.code).to.equal(networkService.NETWORK_ERROR);
@@ -246,16 +313,35 @@ describe("Network Service", () => {
 
 		it("should throw an error if operations fail", async () => {
 			Docker = class {
+				listContainers = sinon.stub().resolves([
+					{
+						Names: ["/my_container"],
+						Id: "abc123",
+					},
+				]);
 				getContainer = sinon.stub().throws(new Error("test error"));
 			};
 			networkService = new NetworkService(axios, ping, logger, http, Docker);
-			const job = { data: { url: "http://test.com", _id: "123", type: "docker" } };
+			const job = { data: { url: "abc123", _id: "123", type: "docker" } };
 			try {
 				await networkService.requestDocker(job);
 			} catch (error) {
 				expect(error.message).to.equal("test error");
 			}
 		});
+		it("should throw an error if no matching images found", async () => {
+			Docker = class {
+				listContainers = sinon.stub().resolves([]);
+				getContainer = sinon.stub().throws(new Error("test error"));
+			};
+			networkService = new NetworkService(axios, ping, logger, http, Docker);
+			const job = { data: { url: "abc123", _id: "123", type: "docker" } };
+			try {
+				await networkService.requestDocker(job);
+			} catch (error) {
+				expect(error.message).to.equal(errorMessages.DOCKER_NOT_FOUND);
+			}
+		});
 	});
 
 	describe("getStatus", () => {
@@ -327,8 +413,6 @@ describe("Network Service", () => {
 			try {
 				await networkService.getStatus({});
 			} catch (error) {
-				console.log(error);
-				expect(error.service).to.equal("NetworkService");
 				expect(error.method).to.equal("getStatus");
 				expect(error.message).to.equal("Unsupported type: unknown");
 			}
@@ -337,7 +421,6 @@ describe("Network Service", () => {
 			try {
 				await networkService.getStatus(null);
 			} catch (error) {
-				console.log(error);
 				expect(error.service).to.equal("NetworkService");
 				expect(error.method).to.equal("getStatus");
 				expect(error.message).to.equal("Unsupported type: unknown");

From b5f67a83dd40ea2e73ff038851d99fc36dfb92bf Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 13 Nov 2024 14:57:14 +0800
Subject: [PATCH 040/142] Add error message for docker container not found

---
 Server/utils/messages.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/Server/utils/messages.js b/Server/utils/messages.js
index 1a994527a..2db427bd8 100644
--- a/Server/utils/messages.js
+++ b/Server/utils/messages.js
@@ -58,6 +58,7 @@ const errorMessages = {
 
 	// Docker
 	DOCKER_FAIL: "Failed to fetch Docker container information",
+	DOCKER_NOT_FOUND: "Docker container not found",
 };
 
 const successMessages = {

From a14e88ef29cf889c678357d540d4101699806561 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 13 Nov 2024 15:16:31 +0800
Subject: [PATCH 041/142] Allow partial matches for docker IDs

---
 Server/service/networkService.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Server/service/networkService.js b/Server/service/networkService.js
index 23b3a62b1..60405df90 100644
--- a/Server/service/networkService.js
+++ b/Server/service/networkService.js
@@ -229,7 +229,7 @@ class NetworkService {
 			});
 
 			const containers = await docker.listContainers({ all: true });
-			const containerExists = containers.some((c) => c.Id === job.data.url);
+			const containerExists = containers.some((c) => c.Id.startsWith(job.data.url));
 			if (!containerExists) {
 				throw new Error(errorMessages.DOCKER_NOT_FOUND);
 			}

From 206d1f390935113910a561a483efca843fea7a51 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 13 Nov 2024 15:18:03 +0800
Subject: [PATCH 042/142] Add docker container to create monitor options.  Add
 map for labels and placeholders

---
 .../Pages/Monitors/CreateMonitor/index.jsx    | 93 ++++++++++++-------
 1 file changed, 61 insertions(+), 32 deletions(-)

diff --git a/Client/src/Pages/Monitors/CreateMonitor/index.jsx b/Client/src/Pages/Monitors/CreateMonitor/index.jsx
index bfa62c7fa..18c1df0b4 100644
--- a/Client/src/Pages/Monitors/CreateMonitor/index.jsx
+++ b/Client/src/Pages/Monitors/CreateMonitor/index.jsx
@@ -1,10 +1,10 @@
 import { useState, useEffect } from "react";
 import { Box, Button, ButtonGroup, Stack, Typography } from "@mui/material";
-import LoadingButton from '@mui/lab/LoadingButton';
+import LoadingButton from "@mui/lab/LoadingButton";
 import { useSelector, useDispatch } from "react-redux";
 import { monitorValidation } from "../../../Validation/validation";
 import { createUptimeMonitor } from "../../../Features/UptimeMonitors/uptimeMonitorsSlice";
-import { checkEndpointResolution } from "../../../Features/UptimeMonitors/uptimeMonitorsSlice"
+import { checkEndpointResolution } from "../../../Features/UptimeMonitors/uptimeMonitorsSlice";
 import { useNavigate, useParams } from "react-router-dom";
 import { useTheme } from "@emotion/react";
 import { createToast } from "../../../Utils/toastUtils";
@@ -19,21 +19,40 @@ import { getUptimeMonitorById } from "../../../Features/UptimeMonitors/uptimeMon
 import "./index.css";
 
 const CreateMonitor = () => {
-  const MS_PER_MINUTE = 60000;
-  const { user, authToken } = useSelector((state) => state.auth);
-  const { monitors, isLoading } = useSelector((state) => state.uptimeMonitors);
-  const dispatch = useDispatch();
-  const navigate = useNavigate();
-  const theme = useTheme();
+	const MS_PER_MINUTE = 60000;
+	const { user, authToken } = useSelector((state) => state.auth);
+	const { monitors, isLoading } = useSelector((state) => state.uptimeMonitors);
+	const dispatch = useDispatch();
+	const navigate = useNavigate();
+	const theme = useTheme();
 
 	const idMap = {
 		"monitor-url": "url",
 		"monitor-name": "name",
 		"monitor-checks-http": "type",
 		"monitor-checks-ping": "type",
+		"monitor-checks-docker": "type",
 		"notify-email-default": "notification-email",
 	};
 
+	const monitorTypeMaps = {
+		http: {
+			label: "URL to monitor",
+			placeholder: "google.com",
+			namePlaceholder: "Google",
+		},
+		ping: {
+			label: "IP address to monitor",
+			placeholder: "1.1.1.1",
+			namePlaceholder: "Google",
+		},
+		docker: {
+			label: "Container ID",
+			placeholder: "abc123",
+			namePlaceholder: "My Container",
+		},
+	};
+
 	const { monitorId } = useParams();
 	const [monitor, setMonitor] = useState({
 		url: "",
@@ -112,7 +131,6 @@ const CreateMonitor = () => {
 				{ [name]: value },
 				{ abortEarly: false }
 			);
-			console.log(error);
 			setErrors((prev) => {
 				const updatedErrors = { ...prev };
 				if (error) updatedErrors[name] = error.details[0].message;
@@ -148,16 +166,18 @@ const CreateMonitor = () => {
 			setErrors(newErrors);
 			createToast({ body: "Error validation data." });
 		} else {
-      if (monitor.type === "http") {
-        const checkEndpointAction = await dispatch(
-          checkEndpointResolution({ 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;
-        }
-      }
+			if (monitor.type === "http") {
+				const checkEndpointAction = await dispatch(
+					checkEndpointResolution({ 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;
+				}
+			}
 
 			form = {
 				...form,
@@ -232,9 +252,9 @@ const CreateMonitor = () => {
 						<Field
 							type={monitor.type === "http" ? "url" : "text"}
 							id="monitor-url"
-							label="URL to monitor"
+							label={monitorTypeMaps[monitor.type].label || "URL to monitor"}
 							https={https}
-							placeholder="google.com"
+							placeholder={monitorTypeMaps[monitor.type].placeholder || ""}
 							value={monitor.url}
 							onChange={handleChange}
 							error={errors["url"]}
@@ -244,7 +264,7 @@ const CreateMonitor = () => {
 							id="monitor-name"
 							label="Display name"
 							isOptional={true}
-							placeholder="Google"
+							placeholder={monitorTypeMaps[monitor.type].namePlaceholder || ""}
 							value={monitor.name}
 							onChange={handleChange}
 							error={errors["name"]}
@@ -299,6 +319,15 @@ const CreateMonitor = () => {
 							checked={monitor.type === "ping"}
 							onChange={(event) => handleChange(event)}
 						/>
+						<Radio
+							id="monitor-checks-docker"
+							title="Docker container monitoring"
+							desc="Check whether your container is running or not."
+							size="small"
+							value="docker"
+							checked={monitor.type === "docker"}
+							onChange={(event) => handleChange(event)}
+						/>
 						{errors["type"] ? (
 							<Box className="error-container">
 								<Typography
@@ -386,19 +415,19 @@ const CreateMonitor = () => {
 					direction="row"
 					justifyContent="flex-end"
 				>
-					<LoadingButton 
-            variant="contained"
-            color="primary"
-            onClick={handleCreateMonitor}
-            disabled={Object.keys(errors).length !== 0 && true}
-            loading={isLoading}
-          >
-            Create monitor
-          </LoadingButton>
+					<LoadingButton
+						variant="contained"
+						color="primary"
+						onClick={handleCreateMonitor}
+						disabled={Object.keys(errors).length !== 0 && true}
+						loading={isLoading}
+					>
+						Create monitor
+					</LoadingButton>
 				</Stack>
 			</Stack>
 		</Box>
 	);
 };
 
-export default CreateMonitor;
\ No newline at end of file
+export default CreateMonitor;

From 02b797244e76c4c71f75a5426c21a352de6e58d9 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 13 Nov 2024 15:33:18 +0800
Subject: [PATCH 043/142] Add docker type to uptime slice

---
 Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js b/Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js
index 601dc016a..d472a673a 100644
--- a/Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js
+++ b/Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js
@@ -40,7 +40,7 @@ export const checkEndpointResolution = createAsyncThunk(
 			const res = await networkService.checkEndpointResolution({
 				authToken: authToken,
 				monitorURL: monitorURL,
-			})
+			});
 			return res.data;
 		} catch (error) {
 			if (error.response && error.response.data) {
@@ -53,7 +53,7 @@ export const checkEndpointResolution = createAsyncThunk(
 			return thunkApi.rejectWithValue(payload);
 		}
 	}
-)
+);
 
 export const getUptimeMonitorById = createAsyncThunk(
 	"monitors/getMonitorById",
@@ -86,7 +86,7 @@ export const getUptimeMonitorsByTeamId = createAsyncThunk(
 			const res = await networkService.getMonitorsAndSummaryByTeamId({
 				authToken: token,
 				teamId: user.teamId,
-				types: ["http", "ping"],
+				types: ["http", "ping", "docker"],
 			});
 			return res.data;
 		} catch (error) {

From f05c46a8fe16d3b724966d902743313880abee77 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 13 Nov 2024 15:33:48 +0800
Subject: [PATCH 044/142] Add docker type to monitor table query

---
 Client/src/Pages/Monitors/Home/MonitorTable/index.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Client/src/Pages/Monitors/Home/MonitorTable/index.jsx b/Client/src/Pages/Monitors/Home/MonitorTable/index.jsx
index d9fbc34b2..5970a5c54 100644
--- a/Client/src/Pages/Monitors/Home/MonitorTable/index.jsx
+++ b/Client/src/Pages/Monitors/Home/MonitorTable/index.jsx
@@ -150,7 +150,7 @@ const MonitorTable = ({ isAdmin, filter, setIsSearching, isSearching }) => {
 				authToken,
 				teamId: user.teamId,
 				limit: 25,
-				types: ["http", "ping"],
+				types: ["http", "ping", "docker"],
 				status: null,
 				checkOrder: "desc",
 				normalize: true,

From 8a407f61feeebf6d63617ab8ae47639820e8d482 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 13 Nov 2024 15:34:10 +0800
Subject: [PATCH 045/142] Update validation for docker types

---
 Server/validation/joi.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/Server/validation/joi.js b/Server/validation/joi.js
index 07521c7e0..82a732686 100644
--- a/Server/validation/joi.js
+++ b/Server/validation/joi.js
@@ -144,8 +144,8 @@ const getMonitorsAndSummaryByTeamIdQueryValidation = joi.object({
 	type: joi
 		.alternatives()
 		.try(
-			joi.string().valid("http", "ping", "pagespeed"),
-			joi.array().items(joi.string().valid("http", "ping", "pagespeed"))
+			joi.string().valid("http", "ping", "pagespeed", "docker"),
+			joi.array().items(joi.string().valid("http", "ping", "pagespeed", "docker"))
 		),
 });
 
@@ -161,8 +161,8 @@ const getMonitorsByTeamIdQueryValidation = joi.object({
 	type: joi
 		.alternatives()
 		.try(
-			joi.string().valid("http", "ping", "pagespeed"),
-			joi.array().items(joi.string().valid("http", "ping", "pagespeed"))
+			joi.string().valid("http", "ping", "pagespeed", "docker"),
+			joi.array().items(joi.string().valid("http", "ping", "pagespeed", "docker"))
 		),
 	page: joi.number(),
 	rowsPerPage: joi.number(),

From 20d84e0a18d8de655bfe3bf2cb4df0f862e2d7ec Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 13 Nov 2024 15:34:31 +0800
Subject: [PATCH 046/142] Add docker to check map

---
 Server/db/mongo/modules/monitorModule.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/Server/db/mongo/modules/monitorModule.js b/Server/db/mongo/modules/monitorModule.js
index 28bf89d82..5f71dfba1 100644
--- a/Server/db/mongo/modules/monitorModule.js
+++ b/Server/db/mongo/modules/monitorModule.js
@@ -20,6 +20,7 @@ const SERVICE_NAME = "monitorModule";
 const CHECK_MODEL_LOOKUP = {
 	http: Check,
 	ping: Check,
+	docker: Check,
 	pagespeed: PageSpeedCheck,
 	hardware: HardwareCheck,
 };

From 9db3e0e6df40623e14ccbcef5f098f3c85398627 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 13 Nov 2024 15:37:40 +0800
Subject: [PATCH 047/142] Add docker type to getMonitorStatsById

---
 Server/db/mongo/modules/monitorModule.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Server/db/mongo/modules/monitorModule.js b/Server/db/mongo/modules/monitorModule.js
index 5f71dfba1..4d355141d 100644
--- a/Server/db/mongo/modules/monitorModule.js
+++ b/Server/db/mongo/modules/monitorModule.js
@@ -350,7 +350,7 @@ const getMonitorStatsById = async (req) => {
 			),
 		};
 
-		if (monitor.type === "http" || monitor.type === "ping") {
+		if (monitor.type === "http" || monitor.type === "ping" || monitor.type === "docker") {
 			// HTTP/PING Specific stats
 			monitorStats.periodAvgResponseTime = getAverageResponseTime(checksForDateRange);
 			monitorStats.periodUptime = getUptimePercentage(checksForDateRange);

From 407e5a871124e5ee7f087cbf30ef05c91c404902 Mon Sep 17 00:00:00 2001
From: Shemy Gan <jennifergan26@gmail.com>
Date: Wed, 13 Nov 2024 20:16:35 -0500
Subject: [PATCH 048/142] - Add JSDoc and use css varialble for pixels

---
 Client/src/Components/Inputs/Field/index.css | 8 ++++----
 Client/src/Utils/stringUtils.js              | 7 ++++++-
 Client/src/index.css                         | 2 ++
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/Client/src/Components/Inputs/Field/index.css b/Client/src/Components/Inputs/Field/index.css
index 3dfaf6142..33196b3b9 100644
--- a/Client/src/Components/Inputs/Field/index.css
+++ b/Client/src/Components/Inputs/Field/index.css
@@ -1,13 +1,13 @@
 .field {
-	min-width: 250px;
+	min-width: var(--env-var-width-3);
 }
 
 .field-infrastructure-alert {
-	max-width: 100px;
+	max-width: var(--env-var-width-4);
 }
 
 .field-infrastructure-alert .MuiInputBase-root:has(input) {
-	height: 34px;
+	height: var(--env-var-height-2);
 }
 
 .field h3.MuiTypography-root,
@@ -23,7 +23,7 @@
 	padding-right: var(--env-var-spacing-1-minus);
 }
 .field .MuiInputBase-root:has(input) {
-	height: 34px;
+	height: var(--env-var-height-2);
 }
 .field .MuiInputBase-root:has(.MuiInputAdornment-root) {
 	padding-right: var(--env-var-spacing-1-minus);
diff --git a/Client/src/Utils/stringUtils.js b/Client/src/Utils/stringUtils.js
index 6aeb53bad..693051f17 100644
--- a/Client/src/Utils/stringUtils.js
+++ b/Client/src/Utils/stringUtils.js
@@ -1,3 +1,8 @@
+/**
+ * Helper function to get first letter capitalized string
+ * @param {string} str String whose first letter is to be capitalized
+ * @returns A string with first letter capitalized
+ */
 export const capitalizeFirstLetter = (str) =>{
-  return  str.charAt(0).toUpperCase() + str.slice(1);
+  return  str?.charAt(0).toUpperCase() + str.slice(1);
 }
diff --git a/Client/src/index.css b/Client/src/index.css
index 369e5d16b..173551ba6 100644
--- a/Client/src/index.css
+++ b/Client/src/index.css
@@ -20,6 +20,8 @@ html {
 
 	--env-var-width-1: 100vw;
 	--env-var-width-2: 360px;
+	--env-var-width-3: 250px;
+	--env-var-width-4: 100px;
 
 	--env-var-height-1: 100vh;
 	--env-var-height-2: 34px;

From 45294bfc9d1239916ff27b5ce495b4529c882c51 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Thu, 14 Nov 2024 10:34:30 +0800
Subject: [PATCH 049/142] Remove sendgrid dependency from BE

---
 Server/package-lock.json | 44 ----------------------------------------
 Server/package.json      |  1 -
 2 files changed, 45 deletions(-)

diff --git a/Server/package-lock.json b/Server/package-lock.json
index 22ffaa863..1d90341b4 100644
--- a/Server/package-lock.json
+++ b/Server/package-lock.json
@@ -9,7 +9,6 @@
 			"version": "1.0.0",
 			"license": "ISC",
 			"dependencies": {
-				"@sendgrid/mail": "^8.1.3",
 				"axios": "^1.7.2",
 				"bcrypt": "^5.1.1",
 				"bullmq": "5.25.6",
@@ -745,41 +744,6 @@
 				"node": ">=14"
 			}
 		},
-		"node_modules/@sendgrid/client": {
-			"version": "8.1.3",
-			"resolved": "https://registry.npmjs.org/@sendgrid/client/-/client-8.1.3.tgz",
-			"integrity": "sha512-mRwTticRZIdUTsnyzvlK6dMu3jni9ci9J+dW/6fMMFpGRAJdCJlivFVYQvqk8kRS3RnFzS7sf6BSmhLl1ldDhA==",
-			"dependencies": {
-				"@sendgrid/helpers": "^8.0.0",
-				"axios": "^1.6.8"
-			},
-			"engines": {
-				"node": ">=12.*"
-			}
-		},
-		"node_modules/@sendgrid/helpers": {
-			"version": "8.0.0",
-			"resolved": "https://registry.npmjs.org/@sendgrid/helpers/-/helpers-8.0.0.tgz",
-			"integrity": "sha512-Ze7WuW2Xzy5GT5WRx+yEv89fsg/pgy3T1E3FS0QEx0/VvRmigMZ5qyVGhJz4SxomegDkzXv/i0aFPpHKN8qdAA==",
-			"dependencies": {
-				"deepmerge": "^4.2.2"
-			},
-			"engines": {
-				"node": ">= 12.0.0"
-			}
-		},
-		"node_modules/@sendgrid/mail": {
-			"version": "8.1.3",
-			"resolved": "https://registry.npmjs.org/@sendgrid/mail/-/mail-8.1.3.tgz",
-			"integrity": "sha512-Wg5iKSUOER83/cfY6rbPa+o3ChnYzWwv1OcsR8gCV8SKi+sUPIMroildimlnb72DBkQxcbylxng1W7f0RIX7MQ==",
-			"dependencies": {
-				"@sendgrid/client": "^8.1.3",
-				"@sendgrid/helpers": "^8.0.0"
-			},
-			"engines": {
-				"node": ">=12.*"
-			}
-		},
 		"node_modules/@sideway/address": {
 			"version": "4.1.5",
 			"resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.5.tgz",
@@ -2030,14 +1994,6 @@
 				"node": ">=6"
 			}
 		},
-		"node_modules/deepmerge": {
-			"version": "4.3.1",
-			"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
-			"integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
-			"engines": {
-				"node": ">=0.10.0"
-			}
-		},
 		"node_modules/define-data-property": {
 			"version": "1.1.4",
 			"resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
diff --git a/Server/package.json b/Server/package.json
index ce34ee0f2..ceecf5e41 100644
--- a/Server/package.json
+++ b/Server/package.json
@@ -12,7 +12,6 @@
 	"author": "",
 	"license": "ISC",
 	"dependencies": {
-		"@sendgrid/mail": "^8.1.3",
 		"axios": "^1.7.2",
 		"bcrypt": "^5.1.1",
 		"bullmq": "5.25.6",

From df36e4d1f667bcb64227e0caf4f5216791304380 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Thu, 14 Nov 2024 11:32:51 +0800
Subject: [PATCH 050/142] Update docs for docker monitors

---
 docs/guides/placeholder.md     |   0
 docs/quickstart.md             | 181 ---------------------------------
 docs/users-guide/quickstart.md | 181 ---------------------------------
 3 files changed, 362 deletions(-)
 delete mode 100644 docs/guides/placeholder.md
 delete mode 100644 docs/quickstart.md
 delete mode 100644 docs/users-guide/quickstart.md

diff --git a/docs/guides/placeholder.md b/docs/guides/placeholder.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/docs/quickstart.md b/docs/quickstart.md
deleted file mode 100644
index 6d2ec2242..000000000
--- a/docs/quickstart.md
+++ /dev/null
@@ -1,181 +0,0 @@
----
-icon: sign-posts-wrench
----
-
-# Installing Uptime Manager
-
-## Quickstart for users (quick method) <a href="#user-quickstart" id="user-quickstart"></a>
-
-1. Download our [Docker compose file](https://github.com/bluewave-labs/bluewave-uptime/blob/develop/Docker/dist/docker-compose.yaml)
-2. Run `docker compose up` to start the application
-3. Now the application is running at `http://localhost`
-
----
-
-## Quickstart for developers <a href="#dev-quickstart" id="dev-quickstart"></a>
-
-{% hint style="info" %}
-Make sure you change the directory to the specified directories, as paths in commands are relative.
-{% endhint %}
-
-### Cloning and initial setup
-
-1. Clone this repository.
-2. Checkout the `develop` branch `git checkout develop`
-
-### Setting up Docker images
-
-3. Change directory to the `Docker/dev` directory
-4. Build the docker images by running the `build_images.sh` script
-5. Run `docker run -d -p 6379:6379 -v $(pwd)/redis/data:/data --name uptime_redis uptime_redis`
-6. Run `docker run -d -p 27017:27017 -v $(pwd)/mongo/data:/data/db --name uptime_database_mongo uptime_database_mongo`
-
-### Server setup
-
-6. CD to `Server` directory, and run `npm install`
-7. While in `Server` directory, create a `.env` file with the [required environmental variables](#env-vars-server)
-8. While in the `Server` directory, run `npm run dev`
-
-### Client setup
-
-9. CD to `Client` directory `run npm install`
-10. While in the `Client` directory, create a `.env` file with the [required environmental variables](#env-vars-client)
-11. While in the `Client` directory run `npm run dev`
-
-### Access the application
-
-12. Client is now running at `localhost:5173`
-13. Server is now running at `localhost:5000`
-
----
-
-## Manual installation <a href="#manual-install" id="manual-install"></a>
-
-### Client installation <a href="#install-client" id="install-client"></a>
-
-1. Change directory to the `Client` directory
-2. Install all dependencies by running `npm install`
-3. Add a `.env` file to the `Client` directory with the following options:
-
-#### Environment variables <a href="#env-vars-client" id="env-vars-client"></a>
-
-| ENV Variable Name     | Required/Optional | Type      | Description        | Accepted Values                    |
-| --------------------- | ----------------- | --------- | ------------------ | ---------------------------------- |
-| VITE_APP_API_BASE_URL | Required          | `string`  | Base URL of server | {host}/api/v1                      |
-| VITE_APP_LOG_LEVEL    | Optional          | `string`  | Log level          | `"none"`\|`"error"` \| `"warn"` \| |
-| VITE_APP_DEMO         | Optional          | `boolean` | Demo server or not | `true`\|`false` \|                 |
-
-#### Starting the Client development server <a href="#start-client" id="start-client"></a>
-
-1. Run `npm run dev` to start the development server.
-
-### Server Installation <a href="#install-server" id="install-server"></a>
-
-1. Change the directory to the `Server` directory
-2. Install all dependencies by running `npm install`
-3. Add a `.env` file to the `Server` directory with the following options:
-
-#### Environment variables <a href="#env-vars-server" id="env-vars-server"></a>
-
-Configure the server with the following environmental variables:
-
-<table><thead><tr><th width="239">ENV Variable Name</th><th width="149">Required/Optional</th><th width="116">Type</th><th>Description</th><th>Accepted Values</th></tr></thead><tbody><tr><td>CLIENT_HOST</td><td>Required</td><td><code>string</code></td><td>Frontend Host</td><td></td></tr><tr><td>JWT_SECRET</td><td>Required</td><td><code>string</code></td><td>JWT secret</td><td></td></tr><tr><td>DB_TYPE</td><td>Optional</td><td><code>string</code></td><td>Specify DB to use</td><td><code>MongoDB | FakeDB</code></td></tr><tr><td>DB_CONNECTION_STRING</td><td>Required</td><td><code>string</code></td><td>Specifies URL for MongoDB Database</td><td></td></tr><tr><td>PORT</td><td>Optional</td><td><code>integer</code></td><td>Specifies Port for Server</td><td></td></tr><tr><td>LOGIN_PAGE_URL</td><td>Required</td><td><code>string</code></td><td>Login url to be used in emailing service</td><td></td></tr><tr><td>REDIS_HOST</td><td>Required</td><td><code>string</code></td><td>Host address for Redis database</td><td></td></tr><tr><td>REDIS_PORT</td><td>Required</td><td><code>integer</code></td><td>Port for Redis database</td><td></td></tr><tr><td>TOKEN_TTL</td><td>Optional</td><td><code>string</code></td><td>Time for token to live</td><td>In vercel/ms format https://github.com/vercel/ms</td></tr><tr><td>PAGESPEED_API_KEY</td><td>Optional</td><td><code>string</code></td><td>API Key for PageSpeed requests</td><td></td></tr><tr><td>SYSTEM_EMAIL_HOST</td><td>Required</td><td><code>string</code></td><td>Host to send System Emails From</td><td></td></tr><tr><td>SYSTEM_EMAIL_PORT</td><td>Required</td><td><code>number</code></td><td>Port for System Email Host</td><td></td></tr><tr><td>SYSTEM_EMAIL_ADDRESS</td><td>Required</td><td><code>string</code></td><td>System Email Address</td><td></td></tr><tr><td>SYSTEM_EMAIL_PASSWORD</td><td>Required</td><td><code>string</code></td><td>System Email Password</td><td></td></tr></tbody></table>
-
----
-
-#### Databases <a href="#databases" id="databases"></a>
-
-This project requires two databases:
-
-1. **Main application database:** The project uses MongoDB for its primary database, with a MongoDB Docker image provided for easy setup.
-2. **Redis for queue management:** A Redis database is used for the PingService’s queue system, and a Redis Docker image is included for deployment.
-
-You may use the included Dockerfiles to spin up databases quickly if you wish.
-
-**(Optional) Dockerised databases**
-
-Dockerfiles for the server and databases are located in the `Docker` directory
-
-<details>
-
-<summary>MongoDB Image</summary>
-
-Location: `Docker/mongoDB.Dockerfile`
-
-The `Docker/mongo/data` directory should be mounted to the MongoDB container in order to persist data.
-
-From the `Docker` directory run
-
-1. Build the image: `docker build -f mongoDB.Dockerfile -t uptime_database_mongo .`
-2. Run the docker image: `docker run -d -p 27017:27017 -v $(pwd)/mongo/data:/data/db --name uptime_database_mongo uptime_database_mongo`
-
-</details>
-
-<details>
-
-<summary>Redis Image</summary>
-
-Location `Docker/redis.Dockerfile`
-
-the `Docker/redis/data` directory should be mounted to the Redis container in order to persist data.
-
-From the `Docker` directory run
-
-1. Build the image: `docker build -f redis.Dockerfile -t uptime_redis .`
-2. Run the image: `docker run -d -p 6379:6379 -v $(pwd)/redis/data:/data --name uptime_redis uptime_redis`
-
-</details>
-
----
-
-#### Starting the development server <a href="#start-server" id="start-server"></a>
-
-- run `npm run dev` to start the development server
-
-or,
-
-- run `node index.js` to start server
-
----
-
-### API documentation <a href="#api-documentation" id="api-documentation"></a>
-
-Our API is documented in accordance with the [OpenAPI spec](https://www.openapis.org/).
-
-You can see the documentation on your local development server at http://localhost:{port}/api-docs
-
-You can also view the documentation on our demo server at [https://uptime-demo.bluewavelabs.ca/api-docs](https://uptime-demo.bluewavelabs.ca/api-docs)
-
-### Error handling
-
-Errors are returned in a standard format:
-
-`{"success": false, "msg": "No token provided"}`
-
-Errors are handled by error handling middleware and should be thrown with the following parameters
-
-| Name    | Type      | Default                | Notes                                |
-| ------- | --------- | ---------------------- | ------------------------------------ |
-| status  | `integer` | 500                    | Standard HTTP codes                  |
-| message | `string`  | "Something went wrong" | An error message                     |
-| service | `string`  | "Unknown Service"      | Name of service that threw the error |
-
-Example:
-
-```
-const myRoute = async(req, res, next) => {
-  try{
-    const result = myRiskyOperationHere();
-  }
-  catch(error){
-    error.status = 404
-    error.message = "Resource not found"
-    error.service = service name
-    next(error)
-    return;
-  }
-}
-
-```
-
-Errors should not be handled at the controller level and should be left to the middleware to handle.
diff --git a/docs/users-guide/quickstart.md b/docs/users-guide/quickstart.md
deleted file mode 100644
index 6d2ec2242..000000000
--- a/docs/users-guide/quickstart.md
+++ /dev/null
@@ -1,181 +0,0 @@
----
-icon: sign-posts-wrench
----
-
-# Installing Uptime Manager
-
-## Quickstart for users (quick method) <a href="#user-quickstart" id="user-quickstart"></a>
-
-1. Download our [Docker compose file](https://github.com/bluewave-labs/bluewave-uptime/blob/develop/Docker/dist/docker-compose.yaml)
-2. Run `docker compose up` to start the application
-3. Now the application is running at `http://localhost`
-
----
-
-## Quickstart for developers <a href="#dev-quickstart" id="dev-quickstart"></a>
-
-{% hint style="info" %}
-Make sure you change the directory to the specified directories, as paths in commands are relative.
-{% endhint %}
-
-### Cloning and initial setup
-
-1. Clone this repository.
-2. Checkout the `develop` branch `git checkout develop`
-
-### Setting up Docker images
-
-3. Change directory to the `Docker/dev` directory
-4. Build the docker images by running the `build_images.sh` script
-5. Run `docker run -d -p 6379:6379 -v $(pwd)/redis/data:/data --name uptime_redis uptime_redis`
-6. Run `docker run -d -p 27017:27017 -v $(pwd)/mongo/data:/data/db --name uptime_database_mongo uptime_database_mongo`
-
-### Server setup
-
-6. CD to `Server` directory, and run `npm install`
-7. While in `Server` directory, create a `.env` file with the [required environmental variables](#env-vars-server)
-8. While in the `Server` directory, run `npm run dev`
-
-### Client setup
-
-9. CD to `Client` directory `run npm install`
-10. While in the `Client` directory, create a `.env` file with the [required environmental variables](#env-vars-client)
-11. While in the `Client` directory run `npm run dev`
-
-### Access the application
-
-12. Client is now running at `localhost:5173`
-13. Server is now running at `localhost:5000`
-
----
-
-## Manual installation <a href="#manual-install" id="manual-install"></a>
-
-### Client installation <a href="#install-client" id="install-client"></a>
-
-1. Change directory to the `Client` directory
-2. Install all dependencies by running `npm install`
-3. Add a `.env` file to the `Client` directory with the following options:
-
-#### Environment variables <a href="#env-vars-client" id="env-vars-client"></a>
-
-| ENV Variable Name     | Required/Optional | Type      | Description        | Accepted Values                    |
-| --------------------- | ----------------- | --------- | ------------------ | ---------------------------------- |
-| VITE_APP_API_BASE_URL | Required          | `string`  | Base URL of server | {host}/api/v1                      |
-| VITE_APP_LOG_LEVEL    | Optional          | `string`  | Log level          | `"none"`\|`"error"` \| `"warn"` \| |
-| VITE_APP_DEMO         | Optional          | `boolean` | Demo server or not | `true`\|`false` \|                 |
-
-#### Starting the Client development server <a href="#start-client" id="start-client"></a>
-
-1. Run `npm run dev` to start the development server.
-
-### Server Installation <a href="#install-server" id="install-server"></a>
-
-1. Change the directory to the `Server` directory
-2. Install all dependencies by running `npm install`
-3. Add a `.env` file to the `Server` directory with the following options:
-
-#### Environment variables <a href="#env-vars-server" id="env-vars-server"></a>
-
-Configure the server with the following environmental variables:
-
-<table><thead><tr><th width="239">ENV Variable Name</th><th width="149">Required/Optional</th><th width="116">Type</th><th>Description</th><th>Accepted Values</th></tr></thead><tbody><tr><td>CLIENT_HOST</td><td>Required</td><td><code>string</code></td><td>Frontend Host</td><td></td></tr><tr><td>JWT_SECRET</td><td>Required</td><td><code>string</code></td><td>JWT secret</td><td></td></tr><tr><td>DB_TYPE</td><td>Optional</td><td><code>string</code></td><td>Specify DB to use</td><td><code>MongoDB | FakeDB</code></td></tr><tr><td>DB_CONNECTION_STRING</td><td>Required</td><td><code>string</code></td><td>Specifies URL for MongoDB Database</td><td></td></tr><tr><td>PORT</td><td>Optional</td><td><code>integer</code></td><td>Specifies Port for Server</td><td></td></tr><tr><td>LOGIN_PAGE_URL</td><td>Required</td><td><code>string</code></td><td>Login url to be used in emailing service</td><td></td></tr><tr><td>REDIS_HOST</td><td>Required</td><td><code>string</code></td><td>Host address for Redis database</td><td></td></tr><tr><td>REDIS_PORT</td><td>Required</td><td><code>integer</code></td><td>Port for Redis database</td><td></td></tr><tr><td>TOKEN_TTL</td><td>Optional</td><td><code>string</code></td><td>Time for token to live</td><td>In vercel/ms format https://github.com/vercel/ms</td></tr><tr><td>PAGESPEED_API_KEY</td><td>Optional</td><td><code>string</code></td><td>API Key for PageSpeed requests</td><td></td></tr><tr><td>SYSTEM_EMAIL_HOST</td><td>Required</td><td><code>string</code></td><td>Host to send System Emails From</td><td></td></tr><tr><td>SYSTEM_EMAIL_PORT</td><td>Required</td><td><code>number</code></td><td>Port for System Email Host</td><td></td></tr><tr><td>SYSTEM_EMAIL_ADDRESS</td><td>Required</td><td><code>string</code></td><td>System Email Address</td><td></td></tr><tr><td>SYSTEM_EMAIL_PASSWORD</td><td>Required</td><td><code>string</code></td><td>System Email Password</td><td></td></tr></tbody></table>
-
----
-
-#### Databases <a href="#databases" id="databases"></a>
-
-This project requires two databases:
-
-1. **Main application database:** The project uses MongoDB for its primary database, with a MongoDB Docker image provided for easy setup.
-2. **Redis for queue management:** A Redis database is used for the PingService’s queue system, and a Redis Docker image is included for deployment.
-
-You may use the included Dockerfiles to spin up databases quickly if you wish.
-
-**(Optional) Dockerised databases**
-
-Dockerfiles for the server and databases are located in the `Docker` directory
-
-<details>
-
-<summary>MongoDB Image</summary>
-
-Location: `Docker/mongoDB.Dockerfile`
-
-The `Docker/mongo/data` directory should be mounted to the MongoDB container in order to persist data.
-
-From the `Docker` directory run
-
-1. Build the image: `docker build -f mongoDB.Dockerfile -t uptime_database_mongo .`
-2. Run the docker image: `docker run -d -p 27017:27017 -v $(pwd)/mongo/data:/data/db --name uptime_database_mongo uptime_database_mongo`
-
-</details>
-
-<details>
-
-<summary>Redis Image</summary>
-
-Location `Docker/redis.Dockerfile`
-
-the `Docker/redis/data` directory should be mounted to the Redis container in order to persist data.
-
-From the `Docker` directory run
-
-1. Build the image: `docker build -f redis.Dockerfile -t uptime_redis .`
-2. Run the image: `docker run -d -p 6379:6379 -v $(pwd)/redis/data:/data --name uptime_redis uptime_redis`
-
-</details>
-
----
-
-#### Starting the development server <a href="#start-server" id="start-server"></a>
-
-- run `npm run dev` to start the development server
-
-or,
-
-- run `node index.js` to start server
-
----
-
-### API documentation <a href="#api-documentation" id="api-documentation"></a>
-
-Our API is documented in accordance with the [OpenAPI spec](https://www.openapis.org/).
-
-You can see the documentation on your local development server at http://localhost:{port}/api-docs
-
-You can also view the documentation on our demo server at [https://uptime-demo.bluewavelabs.ca/api-docs](https://uptime-demo.bluewavelabs.ca/api-docs)
-
-### Error handling
-
-Errors are returned in a standard format:
-
-`{"success": false, "msg": "No token provided"}`
-
-Errors are handled by error handling middleware and should be thrown with the following parameters
-
-| Name    | Type      | Default                | Notes                                |
-| ------- | --------- | ---------------------- | ------------------------------------ |
-| status  | `integer` | 500                    | Standard HTTP codes                  |
-| message | `string`  | "Something went wrong" | An error message                     |
-| service | `string`  | "Unknown Service"      | Name of service that threw the error |
-
-Example:
-
-```
-const myRoute = async(req, res, next) => {
-  try{
-    const result = myRiskyOperationHere();
-  }
-  catch(error){
-    error.status = 404
-    error.message = "Resource not found"
-    error.service = service name
-    next(error)
-    return;
-  }
-}
-
-```
-
-Errors should not be handled at the controller level and should be left to the middleware to handle.

From f2243634cd29860900cefc439466ef2bc76cc780 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Thu, 14 Nov 2024 11:33:55 +0800
Subject: [PATCH 051/142] Update docs and docker-compose

---
 Docker/dist/docker-compose.yaml              |  2 ++
 guides/users-guide/creating-a-new-monitor.md | 17 ++++++++-------
 guides/users-guide/quickstart.md             | 22 ++++++++++++++++++++
 3 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/Docker/dist/docker-compose.yaml b/Docker/dist/docker-compose.yaml
index c62fb2ea6..6d3faaf7f 100644
--- a/Docker/dist/docker-compose.yaml
+++ b/Docker/dist/docker-compose.yaml
@@ -18,6 +18,8 @@ services:
     environment:
       - DB_CONNECTION_STRING=mongodb://mongodb:27017/uptime_db
       - REDIS_HOST=redis
+    # volumes:
+    # - /var/run/docker.sock:/var/run/docker.sock:ro
   redis:
     image: bluewaveuptime/uptime_redis:latest
     ports:
diff --git a/guides/users-guide/creating-a-new-monitor.md b/guides/users-guide/creating-a-new-monitor.md
index 5784d1f41..0135c0b81 100644
--- a/guides/users-guide/creating-a-new-monitor.md
+++ b/guides/users-guide/creating-a-new-monitor.md
@@ -8,24 +8,25 @@ Creating a new monitor involves a few steps, mentioned below.&#x20;
 
 ### General settings
 
-* **URL to monitor:** Enter the full URL of the website or service you want to monitor.
-* **Display name:** Optionally, provide a custom name for your monitor. This helps identify it easily in your dashboard.
+- **URL to monitor:** Enter the full URL of the website or service you want to monitor.
+- **Display name:** Optionally, provide a custom name for your monitor. This helps identify it easily in your dashboard.
 
 ### Checks to perform
 
-* **Website monitoring:** This option uses HTTP(s) to monitor your website or API endpoint. You can choose between HTTPS and HTTP protocols.
-* **Ping monitoring:** Checks whether your server is available. This option is currently unselected.
+- **Website monitoring:** This option uses HTTP(s) to monitor your website or API endpoint. You can choose between HTTPS and HTTP protocols.
+- **Ping monitoring:** Checks whether your server is available. This option is currently unselected.
+- **Docker monitoring:** Checks whether a Docker container is running
 
 ### Incident notifications&#x20;
 
 When there's a new incident, you can choose how to be notified:
 
-* Notify via SMS (coming soon)
-* Notify via email (to the email address you logged in with)
-* Notify via email to multiple addresses (coming soon)
+- Notify via SMS (coming soon)
+- Notify via email (to the email address you logged in with)
+- Notify via email to multiple addresses (coming soon)
 
 ### Advanced settings
 
-* **Check frequency:** Set how often the system should check your monitor. The current setting is 1 minute.
+- **Check frequency:** Set how often the system should check your monitor. The current setting is 1 minute.
 
 After configuring all settings, click the "Create monitor" button at the bottom right to set up your new monitor.
diff --git a/guides/users-guide/quickstart.md b/guides/users-guide/quickstart.md
index 55e23f286..665062bf3 100644
--- a/guides/users-guide/quickstart.md
+++ b/guides/users-guide/quickstart.md
@@ -10,6 +10,17 @@ icon: sign-posts-wrench
 2. Run `docker compose up` to start the application
 3. Now the application is running at `http://localhost`
 
+##### Optional Config:
+
+- If you want to monitor Docker containers, uncomment this line in `docker-compose.yaml`:
+
+```
+  # volumes:
+  # - /var/run/docker.sock:/var/run/docker.sock:ro
+```
+
+This gives the app access to your docker daemon via unix socket, please be aware of what you are doing.
+
 ---
 
 ## Quickstart for users (remote server) <a href="#user-quickstart" id="user-quickstart"></a>
@@ -19,6 +30,17 @@ icon: sign-posts-wrench
 3. Run `docker compose up` to start the application
 4. Now the application is running at `http://<remote_server_ip>`
 
+##### Optional Config:
+
+- If you want to monitor Docker containers, uncomment this line in `docker-compose.yaml`:
+
+```
+  # volumes:
+  # - /var/run/docker.sock:/var/run/docker.sock:ro
+```
+
+This gives the app access to your docker daemon via unix socket, please be aware of what you are doing.
+
 ---
 
 ## Quickstart for developers <a href="#dev-quickstart" id="dev-quickstart"></a>

From a9aece6123eaa20ce2173c62c7f7904379a9f0dd Mon Sep 17 00:00:00 2001
From: Shemy Gan <jennifergan26@gmail.com>
Date: Thu, 14 Nov 2024 11:01:36 -0500
Subject: [PATCH 052/142] - set error as null instead of delete it - customize
 checkbox to pass in element as label - adjust checkbox posion to appear align
 top with string within the element label based on review feedback - remove
 the checkbox margin setting instead of comment out

---
 .../src/Components/Inputs/Checkbox/index.jsx  |  5 +-
 .../CreateMonitor/index.jsx                   | 55 +++++++++++--------
 Client/src/Validation/error.js                |  6 +-
 3 files changed, 37 insertions(+), 29 deletions(-)

diff --git a/Client/src/Components/Inputs/Checkbox/index.jsx b/Client/src/Components/Inputs/Checkbox/index.jsx
index 28643ce3a..20de4731b 100644
--- a/Client/src/Components/Inputs/Checkbox/index.jsx
+++ b/Client/src/Components/Inputs/Checkbox/index.jsx
@@ -39,6 +39,7 @@ const Checkbox = ({
 }) => {
 	const sizes = { small: "14px", medium: "16px", large: "18px" };
 	const theme = useTheme();
+	const checkBoxPosition = typeof label === "string" ? {} : { pb: "65px" };
 
 	return (
 		<FormControlLabel
@@ -65,11 +66,11 @@ const Checkbox = ({
 			sx={{
 				borderRadius: theme.shape.borderRadius,
 				p: theme.spacing(2.5),
-				//m: theme.spacing(-2.5),
 				"& .MuiButtonBase-root": {
 					width: theme.spacing(10),
 					p: 0,
 					mr: theme.spacing(6),
+					...checkBoxPosition,
 				},
 				"&:not(:has(.Mui-disabled)):hover": {
 					backgroundColor: theme.palette.background.accent,
@@ -85,7 +86,7 @@ const Checkbox = ({
 
 Checkbox.propTypes = {
 	id: PropTypes.string.isRequired,
-	label: PropTypes.string.isRequired,
+	label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
 	size: PropTypes.oneOf(["small", "medium", "large"]),
 	isChecked: PropTypes.bool.isRequired,
 	value: PropTypes.string,
diff --git a/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx b/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx
index 8210a7bee..9a6e2cfeb 100644
--- a/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx
+++ b/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx
@@ -29,15 +29,15 @@ const CreateInfrastructureMonitor = () => {
 		cpu: false,
 		usage_cpu: "",
 		memory: false,
-		usage_memory: "",		
+		usage_memory: "",
 		disk: false,
-		usage_disk: "",				
+		usage_disk: "",
 		secret: "",
 	});
 
 	const MS_PER_MINUTE = 60000;
-	const THRESHOLD_FIELD_PREFIX = "usage_"
-	const HARDWARE_MONITOR_TYPES = ["cpu","memory","disk"]
+	const THRESHOLD_FIELD_PREFIX = "usage_";
+	const HARDWARE_MONITOR_TYPES = ["cpu", "memory", "disk"];
 	const { user, authToken } = useSelector((state) => state.auth);
 	const monitorState = useSelector((state) => state.infrastructureMonitor);
 	const dispatch = useDispatch();
@@ -50,8 +50,9 @@ const CreateInfrastructureMonitor = () => {
 
 	const [errors, setErrors] = useState({});
 
-	const alertErrKeyLen = Object.keys(errors)
-							.filter(k => k.startsWith(THRESHOLD_FIELD_PREFIX)).length
+	const alertErrKeyLen = Object.keys(errors).filter((k) =>
+		k.startsWith(THRESHOLD_FIELD_PREFIX)
+	).length;
 
 	const handleCustomAlertCheckChange = (event) => {
 		const { value, id } = event.target;
@@ -62,14 +63,14 @@ const CreateInfrastructureMonitor = () => {
 			return {
 				...prev,
 				...newState,
-				[THRESHOLD_FIELD_PREFIX+ id]: newState[id]
-					? prev[THRESHOLD_FIELD_PREFIX+ id]
+				[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]);
+			return buildErrors(prev, [THRESHOLD_FIELD_PREFIX + id]);
 		});
 	};
 
@@ -134,7 +135,7 @@ const CreateInfrastructureMonitor = () => {
 				if (form[k]) thresholds[k] = form[k];
 				delete form[k];
 				delete form[k.substring(THRESHOLD_FIELD_PREFIX.length)];
-			});	
+			});
 
 		form = {
 			...form,
@@ -193,6 +194,25 @@ const CreateInfrastructureMonitor = () => {
 		{ _id: 600, name: "10 minutes" },
 	];
 
+	const NOTIFY_MULTIPLE_EMAIL_LABEL = (
+		<Box>
+			<Typography mb={theme.spacing(4)}>
+				Also notify via email to multiple addresses (coming soon)
+			</Typography>
+			<Field
+				id="notify-email-list"
+				type="text"
+				placeholder="name@gmail.com"
+				value=""
+				onChange={() => logger.warn("disabled")}
+				onBlur={handleBlur}
+			/>
+			<Typography mt={theme.spacing(4)}>
+				You can separate multiple emails with a comma
+			</Typography>
+		</Box>
+	);
+
 	return (
 		<Box className="create-infrastructure-monitor">
 			<Breadcrumbs
@@ -289,26 +309,13 @@ const CreateInfrastructureMonitor = () => {
 						/>
 						<Checkbox
 							id="notify-email"
-							label="Also notify via email to multiple addresses (coming soon)"
+							label={NOTIFY_MULTIPLE_EMAIL_LABEL}
 							isChecked={false}
 							value=""
 							onChange={() => logger.warn("disabled")}
 							onBlur={handleBlur}
 							isDisabled={true}
 						/>
-						<Box mx={theme.spacing(16)}>
-							<Field
-								id="notify-email-list"
-								type="text"
-								placeholder="name@gmail.com"
-								value=""
-								onChange={() => logger.warn("disabled")}
-								onBlur={handleBlur}
-							/>
-							<Typography mt={theme.spacing(4)}>
-								You can separate multiple emails with a comma
-							</Typography>
-						</Box>
 					</Stack>
 				</ConfigBox>
 
diff --git a/Client/src/Validation/error.js b/Client/src/Validation/error.js
index e1278310b..d017cfd2d 100644
--- a/Client/src/Validation/error.js
+++ b/Client/src/Validation/error.js
@@ -29,13 +29,13 @@ const hasValidationErrors = (form, validation, setErrors) => {
 			}
 			// Handle conditionally usage number required cases
 			if (!form.cpu || (form.cpu && form.usage_cpu)) {
-				delete newErrors["usage_cpu"];
+				newErrors["usage_cpu"] = null;
 			}
 			if (!form.memory || (form.memory && form.usage_memory)) {
-				delete newErrors["usage_memory"];
+				newErrors["usage_memory"] = null;
 			}
 			if (!form.disk || (form.disk && form.usage_disk)) {
-				delete newErrors["usage_disk"];
+				newErrors["usage_disk"] = null;
 			}
 		});
 		if (Object.keys(newErrors).length > 0) {

From f10cd9ff65113374d5bbecc4c1ef4b9a9d56bb47 Mon Sep 17 00:00:00 2001
From: Mend Renovate <bot@renovateapp.com>
Date: Thu, 14 Nov 2024 16:04:28 +0000
Subject: [PATCH 053/142] fix(deps): update dependency bullmq to v5.26.1

---
 Server/package-lock.json | 8 ++++----
 Server/package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/Server/package-lock.json b/Server/package-lock.json
index 22ffaa863..3a7d70c93 100644
--- a/Server/package-lock.json
+++ b/Server/package-lock.json
@@ -12,7 +12,7 @@
 				"@sendgrid/mail": "^8.1.3",
 				"axios": "^1.7.2",
 				"bcrypt": "^5.1.1",
-				"bullmq": "5.25.6",
+				"bullmq": "5.26.1",
 				"cors": "^2.8.5",
 				"dockerode": "4.0.2",
 				"dotenv": "^16.4.5",
@@ -1253,9 +1253,9 @@
 			}
 		},
 		"node_modules/bullmq": {
-			"version": "5.25.6",
-			"resolved": "https://registry.npmjs.org/bullmq/-/bullmq-5.25.6.tgz",
-			"integrity": "sha512-jxpa/DB02V20CqBAgyqpQazT630CJm0r4fky8EchH3mcJAomRtKXLS6tRA0J8tb29BDGlr/LXhlUuZwdBJBSdA==",
+			"version": "5.26.1",
+			"resolved": "https://registry.npmjs.org/bullmq/-/bullmq-5.26.1.tgz",
+			"integrity": "sha512-XuxCGFlC1PQ2i1JHQiB9dqkqKQILMwQpU7ipi+cT/dzJaoXVcS0/IByUz6SsZ3xyOQY3twPt6G7J2d5GrsJuEA==",
 			"license": "MIT",
 			"dependencies": {
 				"cron-parser": "^4.6.0",
diff --git a/Server/package.json b/Server/package.json
index ce34ee0f2..9958512ae 100644
--- a/Server/package.json
+++ b/Server/package.json
@@ -15,7 +15,7 @@
 		"@sendgrid/mail": "^8.1.3",
 		"axios": "^1.7.2",
 		"bcrypt": "^5.1.1",
-		"bullmq": "5.25.6",
+		"bullmq": "5.26.1",
 		"cors": "^2.8.5",
 		"dockerode": "4.0.2",
 		"dotenv": "^16.4.5",

From 4e60981b0b1c487182b830991c89c117f6670006 Mon Sep 17 00:00:00 2001
From: Shemy Gan <jennifergan26@gmail.com>
Date: Thu, 14 Nov 2024 14:28:42 -0500
Subject: [PATCH 054/142] - Add JSDoc for the new component

---
 .../src/Components/CustomThreshold/index.jsx  | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/Client/src/Components/CustomThreshold/index.jsx b/Client/src/Components/CustomThreshold/index.jsx
index 97dfe8bc3..744eade2f 100644
--- a/Client/src/Components/CustomThreshold/index.jsx
+++ b/Client/src/Components/CustomThreshold/index.jsx
@@ -4,6 +4,25 @@ import Checkbox from "../Inputs/Checkbox";
 import { useTheme } from "@emotion/react";
 import PropTypes from "prop-types";
 
+
+/**
+ * `CustomThreshold` is a functional React component that displays a 
+ * group of CheckBox with a label and its correspondant threshold input field.
+ *
+ * @param {{ checkboxId: any; checkboxLabel: any; onCheckboxChange: any; fieldId: any; onFieldChange: any; onFieldBlur: any; alertUnit: any; infrastructureMonitor: any; errors: any; }} param0
+ * @param {string} param0.checkboxId  - The text is the id of the checkbox.
+ * @param {string} param0.checkboxLabel - The text to be displayed as the label next to the check icon.
+ * @param {func} param0.onCheckboxChange - The function to invoke when checkbox is checked or unchecked.
+ * @param {string} param0.fieldId - The text is the id of the input field.
+ * @param {func} param0.onFieldChange - The function to invoke when input field is changed.
+ * @param {func} param0.onFieldBlur - The function to invoke when input field is losing focus.
+ * @param {string} param0.alertUnit the threshold unit such as usage percentage '%' etc
+ * @param {object} param0.infrastructureMonitor the form object of the create infrastrcuture monitor page
+ * @param {object} param0.errors the object that holds all the errors of the form page
+ * @returns A compound React component that renders the custom threshold alert section
+ * 
+ */
+
 export const CustomThreshold = ({
     checkboxId,
     checkboxLabel,

From c3859c75073efc387a26d1a9a50d056416144729 Mon Sep 17 00:00:00 2001
From: Shemy Gan <jennifergan26@gmail.com>
Date: Thu, 14 Nov 2024 14:42:23 -0500
Subject: [PATCH 055/142] - wrap when overflow

---
 Client/src/Components/CustomThreshold/index.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/Client/src/Components/CustomThreshold/index.jsx b/Client/src/Components/CustomThreshold/index.jsx
index 744eade2f..73bacba57 100644
--- a/Client/src/Components/CustomThreshold/index.jsx
+++ b/Client/src/Components/CustomThreshold/index.jsx
@@ -42,6 +42,7 @@ export const CustomThreshold = ({
         sx={{
             width: "50%",
             justifyContent: "space-between",
+            overflowWrap: "anywhere"
         }}
     >
         <Box>

From 88ae68611660df3f6d188fbacdc1f1263460d52e Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Fri, 15 Nov 2024 15:06:32 +0800
Subject: [PATCH 056/142] Add missing test case for docker monitor type

---
 Server/tests/db/monitorModule.test.js | 36 +++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/Server/tests/db/monitorModule.test.js b/Server/tests/db/monitorModule.test.js
index 189c8a703..d48985d58 100644
--- a/Server/tests/db/monitorModule.test.js
+++ b/Server/tests/db/monitorModule.test.js
@@ -891,6 +891,18 @@ describe("monitorModule", () => {
 				url: "https://test.com",
 			}),
 		};
+		const mockMonitorDocker = {
+			_id: "monitor123",
+			type: "docker",
+			name: "Test Monitor",
+			url: "https://test.com",
+			toObject: () => ({
+				_id: "monitor123",
+				type: "http",
+				name: "Test Monitor",
+				url: "https://test.com",
+			}),
+		};
 
 		const checkDocs = [
 			{
@@ -1004,6 +1016,30 @@ describe("monitorModule", () => {
 			expect(result.periodUptime).to.be.a("number");
 			expect(result.aggregateData).to.be.an("array");
 		});
+		it("should return monitor stats with calculated values, docker type", async () => {
+			monitorFindByIdStub.returns(mockMonitorDocker);
+			req.query.sortOrder = "desc";
+			const result = await getMonitorStatsById(req);
+			expect(result).to.include.keys([
+				"_id",
+				"type",
+				"name",
+				"url",
+				"uptimeDuration",
+				"lastChecked",
+				"latestResponseTime",
+				"periodIncidents",
+				"periodTotalChecks",
+				"periodAvgResponseTime",
+				"periodUptime",
+				"aggregateData",
+			]);
+			expect(result.latestResponseTime).to.equal(100);
+			expect(result.periodTotalChecks).to.equal(3);
+			expect(result.periodIncidents).to.equal(1);
+			expect(result.periodUptime).to.be.a("number");
+			expect(result.aggregateData).to.be.an("array");
+		});
 		it("should return monitor stats with calculated values", async () => {
 			req.query.sortOrder = "asc";
 			const result = await getMonitorStatsById(req);

From e7a6033fd161aa503c84aebbc9988965786dbdc2 Mon Sep 17 00:00:00 2001
From: Mend Renovate <bot@renovateapp.com>
Date: Fri, 15 Nov 2024 10:42:50 +0000
Subject: [PATCH 057/142] fix(deps): update dependency bullmq to v5.26.2

---
 Server/package-lock.json | 8 ++++----
 Server/package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/Server/package-lock.json b/Server/package-lock.json
index 045a1508d..810240a29 100644
--- a/Server/package-lock.json
+++ b/Server/package-lock.json
@@ -11,7 +11,7 @@
 			"dependencies": {
 				"axios": "^1.7.2",
 				"bcrypt": "^5.1.1",
-				"bullmq": "5.26.1",
+				"bullmq": "5.26.2",
 				"cors": "^2.8.5",
 				"dockerode": "4.0.2",
 				"dotenv": "^16.4.5",
@@ -1217,9 +1217,9 @@
 			}
 		},
 		"node_modules/bullmq": {
-			"version": "5.26.1",
-			"resolved": "https://registry.npmjs.org/bullmq/-/bullmq-5.26.1.tgz",
-			"integrity": "sha512-XuxCGFlC1PQ2i1JHQiB9dqkqKQILMwQpU7ipi+cT/dzJaoXVcS0/IByUz6SsZ3xyOQY3twPt6G7J2d5GrsJuEA==",
+			"version": "5.26.2",
+			"resolved": "https://registry.npmjs.org/bullmq/-/bullmq-5.26.2.tgz",
+			"integrity": "sha512-UdHBrJoRkpXoF8b/FVEkuRBnaUZoA7+qHQNyTx1n2oNVZ4iWxqGqss+M9xAwXOpBmSNvOSlaBdHpf+5QJTU8GQ==",
 			"license": "MIT",
 			"dependencies": {
 				"cron-parser": "^4.6.0",
diff --git a/Server/package.json b/Server/package.json
index acd0e4ee0..14c5c93fe 100644
--- a/Server/package.json
+++ b/Server/package.json
@@ -14,7 +14,7 @@
 	"dependencies": {
 		"axios": "^1.7.2",
 		"bcrypt": "^5.1.1",
-		"bullmq": "5.26.1",
+		"bullmq": "5.26.2",
 		"cors": "^2.8.5",
 		"dockerode": "4.0.2",
 		"dotenv": "^16.4.5",

From 2f8638cf047baac42c99d0dcec7ed534e54e554c Mon Sep 17 00:00:00 2001
From: Shemy Gan <jennifergan26@gmail.com>
Date: Fri, 15 Nov 2024 14:49:27 -0500
Subject: [PATCH 058/142] - update safe checking for string util - remove
 required for threshold in joi -  refine if logic and update no error checking
 with values due to the change to set null instead of delete error entry -
 move customthreshold component to under create infrastructure folder -
 correct interval setting and threshold default value and fix typo

---
 .../CreateMonitor}/CustomThreshold/index.jsx   |  4 ++--
 .../CreateMonitor/index.jsx                    | 18 +++++++++---------
 Client/src/Utils/stringUtils.js                | 15 ++++++++++++---
 Client/src/Validation/error.js                 |  8 ++++----
 Client/src/Validation/validation.js            |  8 ++------
 5 files changed, 29 insertions(+), 24 deletions(-)
 rename Client/src/{Components => Pages/InfrastructureMonitors/CreateMonitor}/CustomThreshold/index.jsx (96%)

diff --git a/Client/src/Components/CustomThreshold/index.jsx b/Client/src/Pages/InfrastructureMonitors/CreateMonitor/CustomThreshold/index.jsx
similarity index 96%
rename from Client/src/Components/CustomThreshold/index.jsx
rename to Client/src/Pages/InfrastructureMonitors/CreateMonitor/CustomThreshold/index.jsx
index 73bacba57..9bbd57baa 100644
--- a/Client/src/Components/CustomThreshold/index.jsx
+++ b/Client/src/Pages/InfrastructureMonitors/CreateMonitor/CustomThreshold/index.jsx
@@ -1,6 +1,6 @@
 import { Box, Stack, Typography } from "@mui/material";
-import Field from "../Inputs/Field";
-import Checkbox from "../Inputs/Checkbox";
+import Field from "../../../../Components/Inputs/Field";
+import Checkbox from "../../../../Components/Inputs/Checkbox";
 import { useTheme } from "@emotion/react";
 import PropTypes from "prop-types";
 
diff --git a/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx b/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx
index 9a6e2cfeb..4707b9155 100644
--- a/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx
+++ b/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx
@@ -2,7 +2,7 @@ import { useState } from "react";
 import { Box, Stack, Typography } from "@mui/material";
 import LoadingButton from "@mui/lab/LoadingButton";
 import { useSelector, useDispatch } from "react-redux";
-import { infrastractureMonitorValidation } from "../../../Validation/validation";
+import { infrastructureMonitorValidation } from "../../../Validation/validation";
 import {
 	createInfrastructureMonitor,
 	checkInfrastructureEndpointResolution,
@@ -18,7 +18,7 @@ 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 "../../../Components/CustomThreshold";
+import { CustomThreshold } from "../CreateMonitor/CustomThreshold";
 
 const CreateInfrastructureMonitor = () => {
 	const [infrastructureMonitor, setInfrastructureMonitor] = useState({
@@ -27,15 +27,15 @@ const CreateInfrastructureMonitor = () => {
 		notifications: [],
 		interval: 15,
 		cpu: false,
-		usage_cpu: "",
+		usage_cpu: 0,
 		memory: false,
-		usage_memory: "",
+		usage_memory: 0,
 		disk: false,
-		usage_disk: "",
+		usage_disk: 0,
 		secret: "",
 	});
 
-	const MS_PER_MINUTE = 60000;
+	const MS_PER_SECOND = 1000;
 	const THRESHOLD_FIELD_PREFIX = "usage_";
 	const HARDWARE_MONITOR_TYPES = ["cpu", "memory", "disk"];
 	const { user, authToken } = useSelector((state) => state.auth);
@@ -78,7 +78,7 @@ const CreateInfrastructureMonitor = () => {
 		event.preventDefault();
 		const { value, id } = event.target;
 		if (id?.startsWith("notify-email-")) return;
-		const { error } = infrastractureMonitorValidation.validate(
+		const { error } = infrastructureMonitorValidation.validate(
 			{ [id ?? appenedID]: value },
 			{
 				abortEarly: false,
@@ -156,10 +156,10 @@ const CreateInfrastructureMonitor = () => {
 				infrastructureMonitor.name === ""
 					? infrastructureMonitor.url
 					: infrastructureMonitor.name,
-			interval: infrastructureMonitor.interval * MS_PER_MINUTE,
+			interval: infrastructureMonitor.interval * MS_PER_SECOND,
 		};
 		delete form.notifications;
-		if (hasValidationErrors(form, infrastractureMonitorValidation, setErrors)) {
+		if (hasValidationErrors(form, infrastructureMonitorValidation, setErrors)) {
 			return;
 		} else {
 			const checkEndpointAction = await dispatch(
diff --git a/Client/src/Utils/stringUtils.js b/Client/src/Utils/stringUtils.js
index 693051f17..43ae5ed54 100644
--- a/Client/src/Utils/stringUtils.js
+++ b/Client/src/Utils/stringUtils.js
@@ -3,6 +3,15 @@
  * @param {string} str String whose first letter is to be capitalized
  * @returns A string with first letter capitalized
  */
-export const capitalizeFirstLetter = (str) =>{
-  return  str?.charAt(0).toUpperCase() + str.slice(1);
-}
+export const capitalizeFirstLetter = (str) => {	
+  if (str === null || str === undefined) {
+		return "";
+	}
+	if (typeof str !== "string") {
+		throw new TypeError("Input must be a string");
+	}
+	if (str.length === 0) {
+		return "";
+	}  
+	return str.charAt(0).toUpperCase() + str.slice(1);
+};
diff --git a/Client/src/Validation/error.js b/Client/src/Validation/error.js
index d017cfd2d..a941e2509 100644
--- a/Client/src/Validation/error.js
+++ b/Client/src/Validation/error.js
@@ -28,17 +28,17 @@ const hasValidationErrors = (form, validation, setErrors) => {
 				newErrors[err.path[0]] = err.message ?? "Validation error";
 			}
 			// Handle conditionally usage number required cases
-			if (!form.cpu || (form.cpu && form.usage_cpu)) {
+			if (!form.cpu || form.usage_cpu) {
 				newErrors["usage_cpu"] = null;
 			}
-			if (!form.memory || (form.memory && form.usage_memory)) {
+			if (!form.memory || form.usage_memory) {
 				newErrors["usage_memory"] = null;
 			}
-			if (!form.disk || (form.disk && form.usage_disk)) {
+			if (!form.disk || form.usage_disk) {
 				newErrors["usage_disk"] = null;
 			}
 		});
-		if (Object.keys(newErrors).length > 0) {
+		if (Object.values(newErrors).some(v=> v)) {
 			setErrors(newErrors);
 			return true;
 		} else {
diff --git a/Client/src/Validation/validation.js b/Client/src/Validation/validation.js
index d542c221e..7dfbeb246 100644
--- a/Client/src/Validation/validation.js
+++ b/Client/src/Validation/validation.js
@@ -1,7 +1,6 @@
 import joi from "joi";
 import dayjs from "dayjs";
 
-const THRESHOLD_COMMON_MSG = "Threshold is required.";
 const THRESHOLD_COMMON_BASE_MSG = "Threshold must be a number.";
 
 const nameSchema = joi
@@ -176,7 +175,7 @@ const advancedSettingsValidation = joi.object({
 	pagespeedApiKey: joi.string().allow(""),
 });
 
-const infrastractureMonitorValidation = joi.object({
+const infrastructureMonitorValidation = joi.object({
 	url: joi.string().uri({ allowRelative: true }).trim().messages({
 		"string.empty": "This field is required.",
 		"string.uri": "The URL you provided is not valid.",
@@ -187,18 +186,15 @@ const infrastractureMonitorValidation = joi.object({
 	secret: joi.string().trim().messages({ "string.empty": "This field is required." }),
 	usage_cpu: joi.number().messages({
 		"number.base": THRESHOLD_COMMON_BASE_MSG,
-		"any.required": THRESHOLD_COMMON_MSG,
 	}),
 	cpu: joi.boolean(),
 	memory: joi.boolean(),
 	disk: joi.boolean(),
 	usage_memory: joi.number().messages({
 		"number.base": THRESHOLD_COMMON_BASE_MSG,
-		"any.required": THRESHOLD_COMMON_MSG,
 	}),
 	usage_disk: joi.number().messages({
 		"number.base": THRESHOLD_COMMON_BASE_MSG,
-		"any.required": THRESHOLD_COMMON_MSG,
 	}),
 	// usage_temperature: joi.number().messages({
 	// 	"number.base": "Temperature must be a number.",
@@ -222,5 +218,5 @@ export {
 	settingsValidation,
 	maintenanceWindowValidation,
 	advancedSettingsValidation,
-	infrastractureMonitorValidation,
+	infrastructureMonitorValidation,
 };

From a45cddb91f42e9021218823aef1a858305ed2e16 Mon Sep 17 00:00:00 2001
From: Shemy Gan <jennifergan26@gmail.com>
Date: Fri, 15 Nov 2024 14:51:49 -0500
Subject: [PATCH 059/142] - Keep the threshold default value as string, it is
 required by the Field component

---
 .../Pages/InfrastructureMonitors/CreateMonitor/index.jsx    | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx b/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx
index 4707b9155..40ee5d53f 100644
--- a/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx
+++ b/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx
@@ -27,11 +27,11 @@ const CreateInfrastructureMonitor = () => {
 		notifications: [],
 		interval: 15,
 		cpu: false,
-		usage_cpu: 0,
+		usage_cpu: "",
 		memory: false,
-		usage_memory: 0,
+		usage_memory: "",
 		disk: false,
-		usage_disk: 0,
+		usage_disk: "",
 		secret: "",
 	});
 

From 6780374e1669c69f5acef412247a652da5f53408 Mon Sep 17 00:00:00 2001
From: Caio Cabral <ocaiocabral@gmail.com>
Date: Fri, 15 Nov 2024 18:10:10 -0500
Subject: [PATCH 060/142] fix: input focus and input error message

---
 Client/src/Components/Inputs/Field/index.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/Client/src/Components/Inputs/Field/index.jsx b/Client/src/Components/Inputs/Field/index.jsx
index ccb0c1e37..0e558c197 100644
--- a/Client/src/Components/Inputs/Field/index.jsx
+++ b/Client/src/Components/Inputs/Field/index.jsx
@@ -67,7 +67,7 @@ const Field = forwardRef(
 							borderColor: theme.palette.border.dark,
 						},
 					"&:has(.input-error) .MuiOutlinedInput-root fieldset": {
-						borderColor: theme.palette.error.contrastText,
+						borderColor: theme.palette.error.main,
 					},
 					display: hidden ? "none" : "",
 				}}
@@ -83,7 +83,7 @@ const Field = forwardRef(
 							<Typography
 								component="span"
 								ml={theme.spacing(1)}
-								color={theme.palette.error.contrastText}
+								color={theme.palette.error.main}
 							>
 								*
 							</Typography>
@@ -189,7 +189,7 @@ const Field = forwardRef(
 					<Typography
 						component="span"
 						className="input-error"
-						color={theme.palette.error.contrastText}
+						color={theme.palette.error.main}
 						mt={theme.spacing(2)}
 						sx={{
 							opacity: 0.8,

From d849a84f0215d241b4dc1ce89a35e108b25ef3f1 Mon Sep 17 00:00:00 2001
From: Caio Cabral <ocaiocabral@gmail.com>
Date: Fri, 15 Nov 2024 18:25:11 -0500
Subject: [PATCH 061/142] fix: disabled labels

---
 Client/src/Components/Inputs/Checkbox/index.jsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/Client/src/Components/Inputs/Checkbox/index.jsx b/Client/src/Components/Inputs/Checkbox/index.jsx
index 7d9a31bd3..a0348dedf 100644
--- a/Client/src/Components/Inputs/Checkbox/index.jsx
+++ b/Client/src/Components/Inputs/Checkbox/index.jsx
@@ -37,6 +37,7 @@ const Checkbox = ({
 	onChange,
 	isDisabled,
 }) => {
+	/* TODO move sizes to theme */
 	const sizes = { small: "14px", medium: "16px", large: "18px" };
 	const theme = useTheme();
 
@@ -78,6 +79,10 @@ const Checkbox = ({
 					fontSize: 13,
 					color: theme.palette.text.tertiary,
 				},
+				".MuiFormControlLabel-label.Mui-disabled": {
+					color: theme.palette.text.tertiary,
+					opacity: 0.25,
+				},
 			}}
 		/>
 	);

From bd4090db2c25bb6e5d4623ca946845e496769948 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mert=20=C5=9Ei=C5=9Fmano=C4=9Flu?= <mert190737fb@gmail.com>
Date: Sat, 16 Nov 2024 02:36:58 +0300
Subject: [PATCH 062/142] fix: Remove top level package-lock.json

---
 package-lock.json | 6 ------
 1 file changed, 6 deletions(-)
 delete mode 100644 package-lock.json

diff --git a/package-lock.json b/package-lock.json
deleted file mode 100644
index f71a78c1f..000000000
--- a/package-lock.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "name": "bluewave-uptime",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {}
-}

From f99f62c6ef1c9562456e05b761764358e230e935 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Mon, 18 Nov 2024 13:14:21 +0800
Subject: [PATCH 063/142] point to correct raw docker-compose file

---
 guides/users-guide/quickstart.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/guides/users-guide/quickstart.md b/guides/users-guide/quickstart.md
index 665062bf3..2b25dcc2d 100644
--- a/guides/users-guide/quickstart.md
+++ b/guides/users-guide/quickstart.md
@@ -6,7 +6,7 @@ icon: sign-posts-wrench
 
 ## Quickstart for users (quick method) <a href="#user-quickstart" id="user-quickstart"></a>
 
-1. Download our [Docker compose file](https://github.com/bluewave-labs/bluewave-uptime/blob/develop/Docker/dist/docker-compose.yaml)
+1. Download our [Docker compose file](https://raw.githubusercontent.com/bluewave-labs/bluewave-uptime/refs/heads/master/Docker/dev/docker-compose.yaml)
 2. Run `docker compose up` to start the application
 3. Now the application is running at `http://localhost`
 

From de56979bd38f5308b2a38ec2006ead7e597ac409 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Mon, 18 Nov 2024 13:24:50 +0800
Subject: [PATCH 064/142] Add sample env files

---
 guides/users-guide/quickstart.md | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/guides/users-guide/quickstart.md b/guides/users-guide/quickstart.md
index 2b25dcc2d..56a6abb61 100644
--- a/guides/users-guide/quickstart.md
+++ b/guides/users-guide/quickstart.md
@@ -96,6 +96,13 @@ Make sure you change the directory to the specified directories, as paths in com
 | VITE_APP_LOG_LEVEL    | Optional          | `string`  | Log level          | `"none"`\|`"error"` \| `"warn"` \| |
 | VITE_APP_DEMO         | Optional          | `boolean` | Demo server or not | `true`\|`false` \|                 |
 
+Sample ENV file:
+
+```
+VITE_APP_API_BASE_URL="http://localhost:5000/api/v1"
+VITE_APP_LOG_LEVEL="debug"
+```
+
 #### Starting the Client development server <a href="#start-client" id="start-client"></a>
 
 1. Run `npm run dev` to start the development server.
@@ -112,6 +119,25 @@ Configure the server with the following environmental variables:
 
 <table><thead><tr><th width="239">ENV Variable Name</th><th width="149">Required/Optional</th><th width="116">Type</th><th>Description</th><th>Accepted Values</th></tr></thead><tbody><tr><td>CLIENT_HOST</td><td>Required</td><td><code>string</code></td><td>Frontend Host</td><td></td></tr><tr><td>JWT_SECRET</td><td>Required</td><td><code>string</code></td><td>JWT secret</td><td></td></tr><tr><td>REFRESH_TOKEN_SECRET</td><td>Required</td><td><code>string</code></td><td>Refresh JWT secret</td><td></td></tr><tr><td>DB_TYPE</td><td>Optional</td><td><code>string</code></td><td>Specify DB to use</td><td><code>MongoDB | FakeDB</code></td></tr><tr><td>DB_CONNECTION_STRING</td><td>Required</td><td><code>string</code></td><td>Specifies URL for MongoDB Database</td><td></td></tr><tr><td>PORT</td><td>Optional</td><td><code>integer</code></td><td>Specifies Port for Server</td><td></td></tr><tr><td>LOGIN_PAGE_URL</td><td>Required</td><td><code>string</code></td><td>Login url to be used in emailing service</td><td></td></tr><tr><td>REDIS_HOST</td><td>Required</td><td><code>string</code></td><td>Host address for Redis database</td><td></td></tr><tr><td>REDIS_PORT</td><td>Required</td><td><code>integer</code></td><td>Port for Redis database</td><td></td></tr><tr><td>TOKEN_TTL</td><td>Optional</td><td><code>string</code></td><td>Time for token to live</td><td>In vercel/ms format https://github.com/vercel/ms</td></tr><tr><td>REFRESH_TOKEN_TTL</td><td>Optional</td><td><code>string</code></td><td>Time for refresh token to live</td><td></td></tr><tr><td>PAGESPEED_API_KEY</td><td>Optional</td><td><code>string</code></td><td>API Key for PageSpeed requests</td><td></td></tr><tr><td>SYSTEM_EMAIL_HOST</td><td>Required</td><td><code>string</code></td><td>Host to send System Emails From</td><td></td></tr><tr><td>SYSTEM_EMAIL_PORT</td><td>Required</td><td><code>number</code></td><td>Port for System Email Host</td><td></td></tr><tr><td>SYSTEM_EMAIL_ADDRESS</td><td>Required</td><td><code>string</code></td><td>System Email Address</td><td></td></tr><tr><td>SYSTEM_EMAIL_PASSWORD</td><td>Required</td><td><code>string</code></td><td>System Email Password</td><td></td></tr></tbody></table>
 
+Sample env file
+
+```
+CLIENT_HOST="http://localhost:5173"
+JWT_SECRET="my_secret"
+DB_TYPE="MongoDB"
+DB_CONNECTION_STRING="mongodb://localhost:27017/uptime_db"
+REDIS_HOST="127.0.0.1"
+REDIS_PORT=6379
+TOKEN_TTL="99d"
+PAGESPEED_API_KEY=<api_key>
+SYSTEM_EMAIL_HOST="smtp.gmail.com"
+SYSTEM_EMAIL_PORT=465
+SYSTEM_EMAIL_ADDRESS=<email_address>
+SYSTEM_EMAIL_PASSWORD=<password>
+REFRESH_TOKEN_SECRET="my_refresh"
+REFRESH_TOKEN_TTL="99d"
+```
+
 ---
 
 #### Databases <a href="#databases" id="databases"></a>

From d1bc624b83f040e4dd487f9ffadfc133f350b80f Mon Sep 17 00:00:00 2001
From: Alexander Holliday <ajhollid@gmail.com>
Date: Mon, 18 Nov 2024 13:38:47 +0800
Subject: [PATCH 065/142] Update quickstart.md

dev -> dist
---
 guides/users-guide/quickstart.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/guides/users-guide/quickstart.md b/guides/users-guide/quickstart.md
index 56a6abb61..57fde99b6 100644
--- a/guides/users-guide/quickstart.md
+++ b/guides/users-guide/quickstart.md
@@ -6,7 +6,7 @@ icon: sign-posts-wrench
 
 ## Quickstart for users (quick method) <a href="#user-quickstart" id="user-quickstart"></a>
 
-1. Download our [Docker compose file](https://raw.githubusercontent.com/bluewave-labs/bluewave-uptime/refs/heads/master/Docker/dev/docker-compose.yaml)
+1. Download our [Docker compose file](https://github.com/bluewave-labs/bluewave-uptime/raw/refs/heads/master/Docker/dist/docker-compose.yaml)
 2. Run `docker compose up` to start the application
 3. Now the application is running at `http://localhost`
 

From 49f95f1a7186758c3efc4665dea96af17e411dc3 Mon Sep 17 00:00:00 2001
From: Shemy Gan <jennifergan26@gmail.com>
Date: Mon, 18 Nov 2024 16:11:02 -0500
Subject: [PATCH 066/142] - Let input field keep left/right aligned until wrap
 around when screen gets smaller

---
 .../CreateMonitor/CustomThreshold/index.jsx                     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Client/src/Pages/InfrastructureMonitors/CreateMonitor/CustomThreshold/index.jsx b/Client/src/Pages/InfrastructureMonitors/CreateMonitor/CustomThreshold/index.jsx
index 9bbd57baa..3cdde1bdb 100644
--- a/Client/src/Pages/InfrastructureMonitors/CreateMonitor/CustomThreshold/index.jsx
+++ b/Client/src/Pages/InfrastructureMonitors/CreateMonitor/CustomThreshold/index.jsx
@@ -42,7 +42,7 @@ export const CustomThreshold = ({
         sx={{
             width: "50%",
             justifyContent: "space-between",
-            overflowWrap: "anywhere"
+            flexWrap: "wrap"         
         }}
     >
         <Box>

From 2af41625a4bea91e79f6ebf2322a92bf6a6d10bb Mon Sep 17 00:00:00 2001
From: Mend Renovate <bot@renovateapp.com>
Date: Mon, 18 Nov 2024 21:59:46 +0000
Subject: [PATCH 067/142] fix(deps): update dependency mongoose to v8.8.2

---
 Server/package-lock.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/Server/package-lock.json b/Server/package-lock.json
index 810240a29..51650d19a 100644
--- a/Server/package-lock.json
+++ b/Server/package-lock.json
@@ -4522,9 +4522,9 @@
 			}
 		},
 		"node_modules/mongoose": {
-			"version": "8.8.1",
-			"resolved": "https://registry.npmjs.org/mongoose/-/mongoose-8.8.1.tgz",
-			"integrity": "sha512-l7DgeY1szT98+EKU8GYnga5WnyatAu+kOQ2VlVX1Mxif6A0Umt0YkSiksCiyGxzx8SPhGe9a53ND1GD4yVDrPA==",
+			"version": "8.8.2",
+			"resolved": "https://registry.npmjs.org/mongoose/-/mongoose-8.8.2.tgz",
+			"integrity": "sha512-jCTSqDANfRzk909v4YoZQi7jlGRB2MTvgG+spVBc/BA4tOs1oWJr//V6yYujqNq9UybpOtsSfBqxI0dSOEFJHQ==",
 			"license": "MIT",
 			"dependencies": {
 				"bson": "^6.7.0",

From 7251c6c06db9092fb5f0cec573a38741180c3698 Mon Sep 17 00:00:00 2001
From: Shemy Gan <jennifergan26@gmail.com>
Date: Mon, 18 Nov 2024 22:06:18 -0500
Subject: [PATCH 068/142] - Minor updates based on meeting discussion. - fix
 typo, remove retention log section - change to use ms per minute for
 frequency etc

---
 .../CreateMonitor/index.jsx                   | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx b/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx
index 0de93a1bd..633c9ebe0 100644
--- a/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx
+++ b/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx
@@ -25,7 +25,7 @@ const CreateInfrastructureMonitor = () => {
 		url: "",
 		name: "",
 		notifications: [],
-		interval: 15,
+		interval: 0.25,
 		cpu: false,
 		usage_cpu: "",
 		memory: false,
@@ -35,7 +35,7 @@ const CreateInfrastructureMonitor = () => {
 		secret: "",
 	});
 
-	const MS_PER_SECOND = 1000;
+	const MS_PER_MINUTE = 60000;
 	const THRESHOLD_FIELD_PREFIX = "usage_";
 	const HARDWARE_MONITOR_TYPES = ["cpu", "memory", "disk"];
 	const { user, authToken } = useSelector((state) => state.auth);
@@ -156,7 +156,7 @@ const CreateInfrastructureMonitor = () => {
 				infrastructureMonitor.name === ""
 					? infrastructureMonitor.url
 					: infrastructureMonitor.name,
-			interval: infrastructureMonitor.interval * MS_PER_SECOND,
+			interval: infrastructureMonitor.interval * MS_PER_MINUTE,
 		};
 		delete form.notifications;
 		if (hasValidationErrors(form, infrastructureMonitorValidation, setErrors)) {
@@ -186,12 +186,12 @@ const CreateInfrastructureMonitor = () => {
 
 	//select values
 	const frequencies = [
-		{ _id: 15, name: "15 seconds" },
-		{ _id: 30, name: "30 seconds" },
-		{ _id: 60, name: "1 minute" },
-		{ _id: 120, name: "2 minutes" },
-		{ _id: 300, name: "5 minutes" },
-		{ _id: 600, name: "10 minutes" },
+		{ _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" },
 	];
 
 	const NOTIFY_MULTIPLE_EMAIL_LABEL = (
@@ -270,7 +270,7 @@ const CreateInfrastructureMonitor = () => {
 						<Field
 							type="text"
 							id="name"
-							label="Friendly name(optional)"
+							label="Friendly name"
 							isOptional={true}
 							value={infrastructureMonitor.name}
 							onBlur={handleBlur}
@@ -323,7 +323,7 @@ const CreateInfrastructureMonitor = () => {
 					<Box>
 						<Typography component="h2">Customize alerts</Typography>
 						<Typography component="p">
-							Send a notification to user(s) When the theresholds exceed a certain number
+							Send a notification to user(s) When the thresholds exceed a certain number
 							or percentage.
 						</Typography>
 					</Box>
@@ -368,7 +368,7 @@ const CreateInfrastructureMonitor = () => {
 						)}
 					</Stack>
 				</ConfigBox>
-				<ConfigBox>
+				{/* <ConfigBox>
 					<Box>
 						<Typography component="h2">Logging retention</Typography>
 						<Typography component="p">
@@ -386,8 +386,8 @@ const CreateInfrastructureMonitor = () => {
 							onBlur={handleBlur}
 							alertUnit="days"
 						/>
-					</Stack> */}
-				</ConfigBox>
+					</Stack>
+				</ConfigBox> */}
 				<ConfigBox>
 					<Box>
 						<Typography component="h2">Advanced settings</Typography>

From 657a953ad9571625e55515073a4bd28d78199fce Mon Sep 17 00:00:00 2001
From: Shemy Gan <jennifergan26@gmail.com>
Date: Mon, 18 Nov 2024 22:07:01 -0500
Subject: [PATCH 069/142] - remove retention

---
 .../CreateMonitor/index.jsx                   | 20 -------------------
 1 file changed, 20 deletions(-)

diff --git a/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx b/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx
index 633c9ebe0..56b37662a 100644
--- a/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx
+++ b/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx
@@ -368,26 +368,6 @@ const CreateInfrastructureMonitor = () => {
 						)}
 					</Stack>
 				</ConfigBox>
-				{/* <ConfigBox>
-					<Box>
-						<Typography component="h2">Logging retention</Typography>
-						<Typography component="p">
-							Configure how logs are stored. After this period, the Uptime Manager will
-							start deleting oldest data.
-						</Typography>
-					</Box>
-					{/* <Stack gap={theme.spacing(6)}>
-						<CustomAlertStack
-							checkboxId="retain-log"
-							checkboxLabel="Retain data for"
-							checkboxValue={""}
-							fieldId={"retries_max"}
-							onChange={handleChange}
-							onBlur={handleBlur}
-							alertUnit="days"
-						/>
-					</Stack>
-				</ConfigBox> */}
 				<ConfigBox>
 					<Box>
 						<Typography component="h2">Advanced settings</Typography>

From 93d96b99a4fbffbffb4deab5f6e1ba37e71fcc71 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 19 Nov 2024 11:40:34 +0800
Subject: [PATCH 070/142] Add infrastrucutre/details route

---
 Client/src/App.jsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/Client/src/App.jsx b/Client/src/App.jsx
index 151512701..03c406a6c 100644
--- a/Client/src/App.jsx
+++ b/Client/src/App.jsx
@@ -39,6 +39,7 @@ import { getAppSettings } from "./Features/Settings/settingsSlice";
 import { logger } from "./Utils/Logger"; // Import the logger
 import { networkService } from "./main";
 import { Infrastructure } from "./Pages/Infrastructure";
+import InfrastructureDetails from "./Pages/Infrastructure/details";
 function App() {
 	const AdminCheckedRegister = withAdminCheck(Register);
 	const MonitorsWithAdminProp = withAdminProp(Monitors);
@@ -48,6 +49,7 @@ function App() {
 	const MaintenanceWithAdminProp = withAdminProp(Maintenance);
 	const SettingsWithAdminProp = withAdminProp(Settings);
 	const AdvancedSettingsWithAdminProp = withAdminProp(AdvancedSettings);
+	const InfrastructureDetailsWithAdminProp = withAdminProp(InfrastructureDetails);
 	const mode = useSelector((state) => state.ui.mode);
 	const { authToken } = useSelector((state) => state.auth);
 	const dispatch = useDispatch();
@@ -128,6 +130,11 @@ function App() {
 						element={<ProtectedRoute Component={Infrastructure} />}
 					/>
 
+					<Route
+						path="infrastructure/:monitorId"
+						element={<ProtectedRoute Component={InfrastructureDetailsWithAdminProp} />}
+					/>
+
 					<Route
 						path="incidents/:monitorId?"
 						element={<ProtectedRoute Component={Incidents} />}

From 08323202b711869fdaf5aa09572143c9706b8dec Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 19 Nov 2024 11:40:45 +0800
Subject: [PATCH 071/142] Create stat boxes

---
 .../src/Pages/Infrastructure/details/data.js  | 128 ++++++++++++++++++
 .../Pages/Infrastructure/details/index.jsx    |  99 ++++++++++++++
 2 files changed, 227 insertions(+)
 create mode 100644 Client/src/Pages/Infrastructure/details/data.js
 create mode 100644 Client/src/Pages/Infrastructure/details/index.jsx

diff --git a/Client/src/Pages/Infrastructure/details/data.js b/Client/src/Pages/Infrastructure/details/data.js
new file mode 100644
index 000000000..029de5203
--- /dev/null
+++ b/Client/src/Pages/Infrastructure/details/data.js
@@ -0,0 +1,128 @@
+function generateMonitorEntries(monitorId, count = 10, options = {}) {
+	const defaultOptions = {
+		timeRange: {
+			start: new Date(Date.now() - 24 * 60 * 60 * 1000), // 24 hours ago
+			end: new Date(),
+		},
+		statusVariation: [true, false],
+		responseTimeRange: [50, 500],
+		cpuUsageRange: [0, 100],
+		memoryUsageRange: [0, 100],
+		diskUsageRange: [0, 100],
+	};
+
+	const mergedOptions = { ...defaultOptions, ...options };
+
+	return Array.from({ length: count }, (_, index) => {
+		const createdAt = new Date(
+			mergedOptions.timeRange.start.getTime() +
+				(index *
+					(mergedOptions.timeRange.end.getTime() -
+						mergedOptions.timeRange.start.getTime())) /
+					count
+		);
+
+		return {
+			_id: "123",
+			monitorId: monitorId,
+			status: randomFromArray(mergedOptions.statusVariation),
+			responseTime: randomInRange(mergedOptions.responseTimeRange),
+			statusCode: randomStatusCode(),
+			message: randomMessage(),
+			cpu: {
+				physical_core: randomInRange([4, 8]),
+				logical_core: randomInRange([4, 16]),
+				frequency: randomInRange([10, 4000]),
+				temperature: randomInRange([20, 90]),
+				free_percent: 100 - randomInRange(mergedOptions.cpuUsageRange),
+				usage_percent: randomInRange(mergedOptions.cpuUsageRange),
+				_id: "123",
+			},
+			memory: {
+				total_bytes: randomInRange([8, 32]) * 1024 * 1024 * 1024,
+				available_bytes: randomInRange([4, 16]) * 1024 * 1024 * 1024,
+				used_bytes: randomInRange([4, 16]) * 1024 * 1024 * 1024,
+				usage_percent: randomInRange(mergedOptions.memoryUsageRange),
+				_id: "123",
+			},
+			disk: [
+				{
+					read_speed_bytes: randomInRange([100, 1000]) * 1024 * 1024,
+					write_speed_bytes: randomInRange([100, 1000]) * 1024 * 1024,
+					total_bytes: randomInRange([100, 1000]) * 1024 * 1024 * 1024,
+					free_bytes: randomInRange([50, 500]) * 1024 * 1024 * 1024,
+					usage_percent: randomInRange(mergedOptions.diskUsageRange),
+					_id: "123",
+				},
+			],
+			host: {
+				os: randomOS(),
+				platform: randomPlatform(),
+				kernel_version: randomKernelVersion(),
+				_id: "123",
+			},
+			errors: randomErrors(),
+			expiry: new Date(createdAt.getTime() + 365 * 24 * 60 * 60 * 1000),
+			createdAt: createdAt,
+			updatedAt: createdAt,
+			__v: 0,
+		};
+	});
+}
+
+// Helper functions
+function randomInRange([min, max]) {
+	return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+function randomFromArray(arr) {
+	return arr[Math.floor(Math.random() * arr.length)];
+}
+
+function randomStatusCode() {
+	const statusCodes = [200, 201, 204, 400, 401, 403, 404, 500, 502, 503];
+	return randomFromArray(statusCodes);
+}
+
+function randomMessage() {
+	const messages = [
+		"OK",
+		"Created",
+		"No Content",
+		"Bad Request",
+		"Unauthorized",
+		"Forbidden",
+		"Not Found",
+		"Internal Server Error",
+	];
+	return randomFromArray(messages);
+}
+
+function randomOS() {
+	const oss = ["Windows", "Linux", "macOS", "Ubuntu", "CentOS"];
+	return randomFromArray(oss);
+}
+
+function randomPlatform() {
+	const platforms = ["x64", "x86", "ARM", "ARM64"];
+	return randomFromArray(platforms);
+}
+
+function randomKernelVersion() {
+	return `${randomInRange([4, 6])}.${randomInRange([0, 20])}.${randomInRange([0, 100])}`;
+}
+
+function randomErrors() {
+	const possibleErrors = [
+		"Network timeout",
+		"Connection refused",
+		"SSL certificate error",
+		"DNS resolution failed",
+		"",
+	];
+	return Math.random() < 0.2 ? [randomFromArray(possibleErrors)] : [];
+}
+
+// Usage
+const monitorId = "123";
+export const monitorData = generateMonitorEntries(monitorId, 20);
diff --git a/Client/src/Pages/Infrastructure/details/index.jsx b/Client/src/Pages/Infrastructure/details/index.jsx
new file mode 100644
index 000000000..ec5c2d066
--- /dev/null
+++ b/Client/src/Pages/Infrastructure/details/index.jsx
@@ -0,0 +1,99 @@
+import { monitorData } from "./data";
+import { useParams } from "react-router-dom";
+import Breadcrumbs from "../../../Components/Breadcrumbs";
+import { Stack, Box, Typography } from "@mui/material";
+import { useTheme } from "@emotion/react";
+
+const bytesToGB = (bytes) => {
+	if (typeof bytes !== "number") return 0;
+	if (bytes === 0) return 0;
+	const GB = bytes / (1024 * 1024 * 1024);
+	return Number(GB.toFixed(0));
+};
+
+const BaseBox = ({ children }) => {
+	const theme = useTheme();
+	return (
+		<Box
+			sx={{
+				padding: `${theme.spacing(4)} ${theme.spacing(8)}`,
+				minWidth: 200,
+				width: 225,
+				backgroundColor: theme.palette.background.main,
+				border: 1,
+				borderStyle: "solid",
+				borderColor: theme.palette.border.light,
+			}}
+		>
+			{children}
+		</Box>
+	);
+};
+
+const StatBox = ({ heading, subHeading }) => {
+	return (
+		<BaseBox>
+			<Typography component="h2">{heading}</Typography>
+			<Typography>{subHeading}</Typography>
+		</BaseBox>
+	);
+};
+
+const GaugeBox = ({ value, heading, metricOne, valueOne, metricTwo, valueTwo }) => {
+	const theme = useTheme();
+	return (
+		<BaseBox>
+			<div></div>
+		</BaseBox>
+	);
+};
+
+const InfrastructureDetails = () => {
+	const theme = useTheme();
+	const { monitorId } = useParams();
+	const testData = monitorData;
+	const latestCheck = testData[testData.length - 1];
+	const navList = [
+		{ name: "infrastructure monitors", path: "/infrastructure" },
+		{ name: "details", path: `/infrastructure/${monitorId}` },
+	];
+
+	return (
+		<Box>
+			<Breadcrumbs list={navList} />
+			<Stack
+				direction="column"
+				gap={theme.spacing(10)}
+				mt={theme.spacing(10)}
+			>
+				<Stack
+					direction="row"
+					gap={theme.spacing(8)}
+				>
+					<StatBox
+						heading={"CPU"}
+						subHeading={`${latestCheck.cpu.physical_core} cores`}
+					/>
+					<StatBox
+						heading={"Memory"}
+						subHeading={`${bytesToGB(latestCheck.memory.total_bytes)}GB`}
+					/>
+					<StatBox
+						heading={"Disk"}
+						subHeading={`${bytesToGB(latestCheck.disk[0].total_bytes)}GB`}
+					/>
+					<StatBox
+						heading={"Uptime"}
+						subHeading={"100%"}
+					/>
+					<StatBox
+						heading={"Status"}
+						subHeading={"Active"}
+					/>
+				</Stack>
+			</Stack>
+		</Box>
+	);
+};
+
+export default InfrastructureDetails;

From fbdd3c152055a61424ce87f49a2ac12fa1033da9 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 19 Nov 2024 11:42:42 +0800
Subject: [PATCH 072/142] Add custom gauge component

---
 .../Components/Charts/CustomGauge/index.css   |   0
 .../Components/Charts/CustomGauge/index.jsx   | 108 ++++++++++++++++++
 2 files changed, 108 insertions(+)
 create mode 100644 Client/src/Components/Charts/CustomGauge/index.css
 create mode 100644 Client/src/Components/Charts/CustomGauge/index.jsx

diff --git a/Client/src/Components/Charts/CustomGauge/index.css b/Client/src/Components/Charts/CustomGauge/index.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/Client/src/Components/Charts/CustomGauge/index.jsx b/Client/src/Components/Charts/CustomGauge/index.jsx
new file mode 100644
index 000000000..d00ab7f5f
--- /dev/null
+++ b/Client/src/Components/Charts/CustomGauge/index.jsx
@@ -0,0 +1,108 @@
+import { useTheme } from "@emotion/react";
+import { useEffect, useState } from "react";
+import { Box, Typography } from "@mui/material";
+import PropTypes from "prop-types";
+import "./index.css";
+
+/**
+ * A Performant SVG based circular gauge
+ *
+ * @component
+ * @param {Object} props - Component properties
+ * @param {number} [props.progress=0] - Progress percentage (0-100)
+ * @param {number} [props.radius=60] - Radius of the gauge circle
+ * @param {string} [props.color="#000000"] - Color of the progress stroke
+ * @param {number} [props.strokeWidth=15] - Width of the gauge stroke
+ *
+ * @example
+ * <CustomGauge
+ *   progress={75}
+ *   radius={50}
+ *   color="#00ff00"
+ *   strokeWidth={10}
+ * />
+ *
+ * @returns {React.ReactElement} Rendered CustomGauge component
+ */
+const CustomGauge = ({
+	progress = 0,
+	radius = 60,
+	color = "#000000",
+	strokeWidth = 15,
+}) => {
+	// Calculate the length of the stroke for the circle
+	const circumference = 2 * Math.PI * radius;
+	const totalSize = radius * 2 + strokeWidth * 2; // This is the total size of the SVG, needed for the viewBox
+	const strokeLength = (progress / 100) * circumference;
+	const [offset, setOffset] = useState(circumference);
+	const theme = useTheme();
+
+	// Handle initial animation
+	useEffect(() => {
+		setOffset(circumference);
+		const timer = setTimeout(() => {
+			setOffset(circumference - strokeLength);
+		}, 100);
+
+		return () => clearTimeout(timer);
+	}, [progress, circumference, strokeLength]);
+
+	return (
+		<Box
+			className="radial-chart"
+			width={radius}
+			height={radius}
+		>
+			<svg
+				viewBox={`0 0 ${totalSize} ${totalSize}`}
+				width={radius}
+				height={radius}
+			>
+				<circle
+					className="radial-chart-base"
+					stroke={theme.palette.background.fill}
+					strokeWidth={strokeWidth}
+					fill="none"
+					cx={totalSize / 2} // Center the circle
+					cy={totalSize / 2} // Center the circle
+					r={radius}
+				/>
+				<circle
+					className="radial-chart-progress"
+					stroke={color}
+					strokeWidth={strokeWidth}
+					strokeDasharray={`${circumference} ${circumference}`}
+					strokeDashoffset={offset}
+					strokeLinecap="round"
+					fill="none"
+					cx={totalSize / 2}
+					cy={totalSize / 2}
+					r={radius}
+				/>
+			</svg>
+
+			<Typography
+				className="radial-chart-text"
+				style={{
+					position: "absolute",
+					top: "50%",
+					left: "50%",
+					transform: "translate(-50%, -50%)",
+					...theme.typography.body2,
+					fill: theme.typography.body2.color,
+				}}
+			>
+				{`${progress}%`}
+			</Typography>
+		</Box>
+	);
+};
+
+export default CustomGauge;
+
+CustomGauge.propTypes = {
+	progress: PropTypes.number,
+	radius: PropTypes.number,
+	color: PropTypes.string,
+	strokeWidth: PropTypes.number,
+};

From d2f42f432fbbb084d12f4c6a6afc59ed8c2e0dd5 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 19 Nov 2024 11:43:29 +0800
Subject: [PATCH 073/142] Add styles for custom gauage

---
 Client/src/Components/Charts/CustomGauge/index.css | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/Client/src/Components/Charts/CustomGauge/index.css b/Client/src/Components/Charts/CustomGauge/index.css
index e69de29bb..1b64a6b9a 100644
--- a/Client/src/Components/Charts/CustomGauge/index.css
+++ b/Client/src/Components/Charts/CustomGauge/index.css
@@ -0,0 +1,14 @@
+.radial-chart {
+	position: relative;
+	display: inline-block;
+}
+
+.radial-chart-base {
+	opacity: 0.3;
+}
+
+.radial-chart-progress {
+	transform: rotate(-90deg);
+	transform-origin: center;
+	transition: stroke-dashoffset 1.5s ease-in-out;
+}

From ca9ca4f59acf095522f241f64c5b04b0766560f9 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 19 Nov 2024 12:02:37 +0800
Subject: [PATCH 074/142] Add gauges

---
 .../Pages/Infrastructure/details/index.jsx    | 71 ++++++++++++++++++-
 1 file changed, 70 insertions(+), 1 deletion(-)

diff --git a/Client/src/Pages/Infrastructure/details/index.jsx b/Client/src/Pages/Infrastructure/details/index.jsx
index ec5c2d066..9ff3c57f1 100644
--- a/Client/src/Pages/Infrastructure/details/index.jsx
+++ b/Client/src/Pages/Infrastructure/details/index.jsx
@@ -3,6 +3,7 @@ import { useParams } from "react-router-dom";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
 import { Stack, Box, Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
+import CustomGauge from "../../../Components/Charts/CustomGauge";
 
 const bytesToGB = (bytes) => {
 	if (typeof bytes !== "number") return 0;
@@ -43,7 +44,41 @@ const GaugeBox = ({ value, heading, metricOne, valueOne, metricTwo, valueTwo })
 	const theme = useTheme();
 	return (
 		<BaseBox>
-			<div></div>
+			<Stack
+				direction="column"
+				gap={theme.spacing(2)}
+				alignItems="center"
+			>
+				<CustomGauge
+					progress={value}
+					radius={100}
+					color={theme.palette.primary.main}
+				/>
+				<Typography component="h2">{heading}</Typography>
+				<Box
+					sx={{
+						width: "100%",
+						borderTop: `1px solid ${theme.palette.border.light}`,
+					}}
+				>
+					<Stack
+						justifyContent={"space-between"}
+						direction="row"
+						gap={theme.spacing(2)}
+					>
+						<Typography>{metricOne}</Typography>
+						<Typography>{valueOne}</Typography>
+					</Stack>
+					<Stack
+						justifyContent={"space-between"}
+						direction="row"
+						gap={theme.spacing(2)}
+					>
+						<Typography>{metricTwo}</Typography>
+						<Typography>{valueTwo}</Typography>
+					</Stack>
+				</Box>
+			</Stack>
 		</BaseBox>
 	);
 };
@@ -91,6 +126,40 @@ const InfrastructureDetails = () => {
 						subHeading={"Active"}
 					/>
 				</Stack>
+				<Stack
+					direction="row"
+					gap={theme.spacing(8)}
+				>
+					<GaugeBox
+						value={latestCheck.cpu.usage_percent}
+						heading={"Memory Usage"}
+						metricOne={"Used"}
+						valueOne={`${bytesToGB(latestCheck.memory.used_bytes)}GB`}
+						metricTwo={"Total"}
+						valueTwo={`${bytesToGB(latestCheck.memory.total_bytes)}GB`}
+					/>
+					<GaugeBox
+						value={latestCheck.cpu.usage_percent}
+						heading={"CPU Usage"}
+						metricOne={"Cores"}
+						valueOne={latestCheck.cpu.physical_core}
+						metricTwo={"Frequency"}
+						valueTwo={`${latestCheck.cpu.frequency} Ghz`}
+					/>
+					{latestCheck.disk.map((disk, idx) => {
+						return (
+							<GaugeBox
+								key={disk._id}
+								value={disk.usage_percent}
+								heading={`Disk${idx} usage`}
+								metricOne={"Used"}
+								valueOne={`${bytesToGB(disk.total_bytes - disk.free_bytes)}GB`}
+								metricTwo={"Total"}
+								valueTwo={`${bytesToGB(disk.total_bytes)}GB`}
+							/>
+						);
+					})}
+				</Stack>
 			</Stack>
 		</Box>
 	);

From 55e13d7deb30cfcbd3429ee0c37fd55d1fc6e92e Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 19 Nov 2024 12:04:47 +0800
Subject: [PATCH 075/142] Add area chart file

---
 Client/src/Components/Charts/AreaChart/index.jsx | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 Client/src/Components/Charts/AreaChart/index.jsx

diff --git a/Client/src/Components/Charts/AreaChart/index.jsx b/Client/src/Components/Charts/AreaChart/index.jsx
new file mode 100644
index 000000000..e69de29bb

From 49d81cf0ca60d5eb8404aaca5dd056e3bf711673 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 19 Nov 2024 12:05:26 +0800
Subject: [PATCH 076/142] Add area chart

---
 .../src/Components/Charts/AreaChart/index.jsx | 144 ++++++++++++++++++
 1 file changed, 144 insertions(+)

diff --git a/Client/src/Components/Charts/AreaChart/index.jsx b/Client/src/Components/Charts/AreaChart/index.jsx
index e69de29bb..ce4da9830 100644
--- a/Client/src/Components/Charts/AreaChart/index.jsx
+++ b/Client/src/Components/Charts/AreaChart/index.jsx
@@ -0,0 +1,144 @@
+import {
+	AreaChart,
+	Area,
+	XAxis,
+	YAxis,
+	CartesianGrid,
+	Tooltip,
+	ResponsiveContainer,
+} from "recharts";
+import { createGradient } from "../Utils/gradientUtils";
+import PropTypes from "prop-types";
+import { useTheme } from "@mui/material";
+
+/**
+ * CustomAreaChart component for rendering an area chart with optional gradient and custom ticks.
+ *
+ * @param {Object} props - The properties object.
+ * @param {Array} props.data - The data array for the chart.
+ * @param {string} props.xKey - The key for the x-axis data.
+ * @param {string} props.yKey - The key for the y-axis data.
+ * @param {Object} [props.xTick] - Custom tick component for the x-axis.
+ * @param {Object} [props.yTick] - Custom tick component for the y-axis.
+ * @param {string} [props.strokeColor] - The stroke color for the area.
+ * @param {string} [props.fillColor] - The fill color for the area.
+ * @param {boolean} [props.gradient=false] - Whether to apply a gradient fill.
+ * @param {string} [props.gradientDirection="vertical"] - The direction of the gradient.
+ * @param {string} [props.gradientStartColor] - The start color of the gradient.
+ * @param {string} [props.gradientEndColor] - The end color of the gradient.
+ * @param {Object} [props.customTooltip] - Custom tooltip component.
+ * @returns {JSX.Element} The rendered area chart component.
+ *
+ * @example
+ * // Example usage of CustomAreaChart
+ * import React from 'react';
+ * import CustomAreaChart from './CustomAreaChart';
+ * import { TzTick, PercentTick, InfrastructureTooltip } from './chartUtils';
+ *
+ * const data = [
+ *   { createdAt: '2023-01-01T00:00:00Z', cpu: { usage_percent: 0.5 } },
+ *   { createdAt: '2023-01-01T01:00:00Z', cpu: { usage_percent: 0.6 } },
+ *   // more data points...
+ * ];
+ *
+ * const MyChartComponent = () => {
+ *   return (
+ *     <CustomAreaChart
+ *       data={data}
+ *       xKey="createdAt"
+ *       yKey="cpu.usage_percent"
+ *       xTick={TzTick}
+ *       yTick={PercentTick}
+ *       strokeColor="#8884d8"
+ *       fillColor="#8884d8"
+ *       gradient={true}
+ *       gradientStartColor="#8884d8"
+ *       gradientEndColor="#82ca9d"
+ *       customTooltip={InfrastructureTooltip}
+ *     />
+ *   );
+ * };
+ *
+ * export default MyChartComponent;
+ */
+const CustomAreaChart = ({
+	data,
+	dataKey,
+	xKey,
+	yKey,
+	xTick,
+	yTick,
+	strokeColor,
+	fillColor,
+	gradient = false,
+	gradientDirection = "vertical",
+	gradientStartColor,
+	gradientEndColor,
+	customTooltip,
+}) => {
+	const theme = useTheme();
+	return (
+		<ResponsiveContainer
+			width="100%"
+			height="100%"
+		>
+			<AreaChart data={data}>
+				<XAxis
+					dataKey={xKey}
+					{...(xTick && { tick: xTick })}
+				/>
+				<YAxis
+					dataKey={yKey}
+					{...(yTick && { tick: yTick })}
+				/>
+				{gradient === true &&
+					createGradient({
+						startColor: gradientStartColor,
+						endColor: gradientEndColor,
+						direction: gradientDirection,
+					})}
+				<CartesianGrid
+					stroke={theme.palette.border.light}
+					strokeWidth={1}
+					strokeOpacity={1}
+					fill="transparent"
+					vertical={false}
+				/>
+				<Area
+					type="monotone"
+					dataKey={dataKey}
+					stroke={strokeColor}
+					fill={gradient === true ? "url(#colorUv)" : fillColor}
+				/>
+
+				{customTooltip ? (
+					<Tooltip
+						cursor={{ stroke: theme.palette.border.light }}
+						content={customTooltip}
+						wrapperStyle={{ pointerEvents: "none" }}
+					/>
+				) : (
+					<Tooltip />
+				)}
+			</AreaChart>
+		</ResponsiveContainer>
+	);
+};
+
+CustomAreaChart.propTypes = {
+	data: PropTypes.array.isRequired,
+	dataKey: PropTypes.string.isRequired,
+	xTick: PropTypes.object, // Recharts takes an instance of component, so we can't pass the component itself
+	yTick: PropTypes.object, // Recharts takes an instance of component, so we can't pass the component itself
+	xKey: PropTypes.string.isRequired,
+	yKey: PropTypes.string.isRequired,
+	fillColor: PropTypes.string,
+	strokeColor: PropTypes.string,
+	gradient: PropTypes.bool,
+	gradientDirection: PropTypes.string,
+	gradientStartColor: PropTypes.string,
+	gradientEndColor: PropTypes.string,
+	customTooltip: PropTypes.object,
+};
+
+export default CustomAreaChart;

From 92ba0d84dbb72eae3ab7b939793e67d8dfc04d9f Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 19 Nov 2024 12:06:21 +0800
Subject: [PATCH 077/142] Add data for area chart

---
 .../src/Components/Charts/AreaChart/data.js   | 59 +++++++++++++++++++
 1 file changed, 59 insertions(+)
 create mode 100644 Client/src/Components/Charts/AreaChart/data.js

diff --git a/Client/src/Components/Charts/AreaChart/data.js b/Client/src/Components/Charts/AreaChart/data.js
new file mode 100644
index 000000000..43efd165d
--- /dev/null
+++ b/Client/src/Components/Charts/AreaChart/data.js
@@ -0,0 +1,59 @@
+const ObjectId = (string) => string;
+const ISODate = (string) => string;
+
+// Helper to generate random percentage between 0.1 and 1.0
+const randomPercent = () => Number((Math.random() * 0.9 + 0.1).toFixed(2));
+
+// Create base timestamp and increment by 5 minutes for each entry
+const baseTime = new Date("2024-11-15T07:00:00.000Z");
+const checks = Array.from({ length: 20 }, (_, index) => {
+	const timestamp = new Date(baseTime.getTime() + index * 5 * 60 * 1000);
+
+	return {
+		_id: ObjectId(`6736f4f449e23954c8b89a${index.toString(16).padStart(2, "0")}`),
+		monitorId: ObjectId("6736e6c2939f02e0ca519465"),
+		status: true,
+		responseTime: Math.floor(Math.random() * 50) + 80, // Random between 80-130ms
+		statusCode: 200,
+		message: "OK",
+		cpu: {
+			physical_core: 0,
+			logical_core: 0,
+			frequency: 0,
+			temperature: 0,
+			free_percent: 0,
+			usage_percent: randomPercent(),
+			_id: ObjectId(`6736f4f449e23954c8b89b${index.toString(16).padStart(2, "0")}`),
+		},
+		memory: {
+			total_bytes: 0,
+			available_bytes: 0,
+			used_bytes: 0,
+			usage_percent: randomPercent(),
+			_id: ObjectId(`6736f4f449e23954c8b89c${index.toString(16).padStart(2, "0")}`),
+		},
+		disk: [
+			{
+				read_speed_bytes: 0,
+				write_speed_bytes: 0,
+				total_bytes: 0,
+				free_bytes: 0,
+				usage_percent: randomPercent(),
+				_id: ObjectId(`6736f4f449e23954c8b89d${index.toString(16).padStart(2, "0")}`),
+			},
+		],
+		host: {
+			os: "",
+			platform: "",
+			kernel_version: "",
+			_id: ObjectId(`6736f4f449e23954c8b89e${index.toString(16).padStart(2, "0")}`),
+		},
+		errors: [],
+		expiry: ISODate(new Date(timestamp.getTime() + 24 * 60 * 60 * 1000).toISOString()),
+		createdAt: ISODate(timestamp.toISOString()),
+		updatedAt: ISODate(timestamp.toISOString()),
+		__v: 0,
+	};
+});
+
+export default checks;

From 924c799858078381c09f7b5fa034cf0d5ec26879 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 19 Nov 2024 13:32:23 +0800
Subject: [PATCH 078/142] add and update chartUtils

---
 .../Components/Charts/Utils/chartUtils.jsx    | 170 ++++++++++++++++++
 .../Components/Charts/Utils/gradientUtils.jsx |  47 +++++
 2 files changed, 217 insertions(+)
 create mode 100644 Client/src/Components/Charts/Utils/chartUtils.jsx
 create mode 100644 Client/src/Components/Charts/Utils/gradientUtils.jsx

diff --git a/Client/src/Components/Charts/Utils/chartUtils.jsx b/Client/src/Components/Charts/Utils/chartUtils.jsx
new file mode 100644
index 000000000..0d87421b8
--- /dev/null
+++ b/Client/src/Components/Charts/Utils/chartUtils.jsx
@@ -0,0 +1,170 @@
+import PropTypes from "prop-types";
+import { useSelector } from "react-redux";
+import { useTheme } from "@mui/material";
+import { Text } from "recharts";
+import { formatDateWithTz } from "../../../Utils/timeUtils";
+import { Box, Stack, Typography } from "@mui/material";
+
+/**
+ * Custom tick component for rendering time with timezone.
+ *
+ * @param {Object} props - The properties object.
+ * @param {number} props.x - The x-coordinate for the tick.
+ * @param {number} props.y - The y-coordinate for the tick.
+ * @param {Object} props.payload - The payload object containing tick data.
+ * @param {number} props.index - The index of the tick.
+ * @returns {JSX.Element} The rendered tick component.
+ */
+export const TzTick = ({ x, y, payload, index }) => {
+	const theme = useTheme();
+
+	const uiTimezone = useSelector((state) => state.ui.timezone);
+	return (
+		<Text
+			x={x}
+			y={y + 10}
+			textAnchor="middle"
+			fill={theme.palette.text.tertiary}
+			fontSize={11}
+			fontWeight={400}
+		>
+			{formatDateWithTz(payload?.value, "h:mm a", uiTimezone)}
+		</Text>
+	);
+};
+
+TzTick.propTypes = {
+	x: PropTypes.number,
+	y: PropTypes.number,
+	payload: PropTypes.object,
+	index: PropTypes.number,
+};
+
+/**
+ * Custom tick component for rendering percentage values.
+ *
+ * @param {Object} props - The properties object.
+ * @param {number} props.x - The x-coordinate for the tick.
+ * @param {number} props.y - The y-coordinate for the tick.
+ * @param {Object} props.payload - The payload object containing tick data.
+ * @param {number} props.index - The index of the tick.
+ * @returns {JSX.Element|null} The rendered tick component or null for the first tick.
+ */
+export const PercentTick = ({ x, y, payload, index }) => {
+	const theme = useTheme();
+	if (index === 0) return null;
+	return (
+		<Text
+			x={x - 20}
+			y={y}
+			textAnchor="middle"
+			fill={theme.palette.text.tertiary}
+			fontSize={11}
+			fontWeight={400}
+		>
+			{`${payload?.value * 100}%`}
+		</Text>
+	);
+};
+
+PercentTick.propTypes = {
+	x: PropTypes.number,
+	y: PropTypes.number,
+	payload: PropTypes.object,
+	index: PropTypes.number,
+};
+
+/**
+ * Custom tooltip component for displaying infrastructure data.
+ *
+ * @param {Object} props - The properties object.
+ * @param {boolean} props.active - Indicates if the tooltip is active.
+ * @param {Array} props.payload - The payload array containing tooltip data.
+ * @param {string} props.label - The label for the tooltip.
+ * @param {string} props.yKey - The key for the y-axis data.
+ * @param {string} props.yLabel - The label for the y-axis data.
+ * @param {string} props.dotColor - The color of the dot in the tooltip.
+ * @returns {JSX.Element|null} The rendered tooltip component or null if inactive.
+ */
+export const InfrastructureTooltip = ({
+	active,
+	payload,
+	label,
+	yKey,
+	yIdx = -1,
+	yLabel,
+	dotColor,
+}) => {
+	const uiTimezone = useSelector((state) => state.ui.timezone);
+	const theme = useTheme();
+	if (active && payload && payload.length) {
+		const [hardwareType, metric] = yKey.split(".");
+		return (
+			<Box
+				className="area-tooltip"
+				sx={{
+					backgroundColor: theme.palette.background.main,
+					border: 1,
+					borderColor: theme.palette.border.dark,
+					borderRadius: theme.shape.borderRadius,
+					py: theme.spacing(2),
+					px: theme.spacing(4),
+				}}
+			>
+				<Typography
+					sx={{
+						color: theme.palette.text.tertiary,
+						fontSize: 12,
+						fontWeight: 500,
+					}}
+				>
+					{formatDateWithTz(label, "ddd, MMMM D, YYYY, h:mm A", uiTimezone)}
+				</Typography>
+				<Box mt={theme.spacing(1)}>
+					<Box
+						display="inline-block"
+						width={theme.spacing(4)}
+						height={theme.spacing(4)}
+						backgroundColor={dotColor}
+						sx={{ borderRadius: "50%" }}
+					/>
+					<Stack
+						display="inline-flex"
+						direction="row"
+						justifyContent="space-between"
+						ml={theme.spacing(3)}
+						sx={{
+							"& span": {
+								color: theme.palette.text.tertiary,
+								fontSize: 11,
+								fontWeight: 500,
+							},
+						}}
+					>
+						<Typography
+							component="span"
+							sx={{ opacity: 0.8 }}
+						>
+							{yIdx >= 0
+								? `${yLabel} ${payload[0].payload[hardwareType][yIdx][metric] * 100}%`
+								: `${yLabel} ${payload[0].payload[hardwareType][metric] * 100}%`}
+						</Typography>
+						<Typography component="span"></Typography>
+					</Stack>
+				</Box>
+				{/* Display original value */}
+			</Box>
+		);
+	}
+	return null;
+};
+
+InfrastructureTooltip.propTypes = {
+	active: PropTypes.bool,
+	payload: PropTypes.array,
+	label: PropTypes.string,
+	yKey: PropTypes.string,
+	yIdx: PropTypes.number,
+	yLabel: PropTypes.string,
+	dotColor: PropTypes.string,
+};
diff --git a/Client/src/Components/Charts/Utils/gradientUtils.jsx b/Client/src/Components/Charts/Utils/gradientUtils.jsx
new file mode 100644
index 000000000..ef967b7ed
--- /dev/null
+++ b/Client/src/Components/Charts/Utils/gradientUtils.jsx
@@ -0,0 +1,47 @@
+/**
+ * Creates an SVG gradient definition for use in charts
+ * @param {Object} params - The gradient parameters
+ * @param {string} [params.id="colorUv"] - Unique identifier for the gradient
+ * @param {string} params.startColor - Starting color of the gradient (hex, rgb, or color name)
+ * @param {string} params.endColor - Ending color of the gradient (hex, rgb, or color name)
+ * @param {number} [params.startOpacity=0.8] - Starting opacity (0-1)
+ * @param {number} [params.endOpacity=0] - Ending opacity (0-1)
+ * @param {('vertical'|'horizontal')} [params.direction="vertical"] - Direction of the gradient
+ * @returns {JSX.Element} SVG gradient definition element
+ * @example
+ * createCustomGradient({
+ *   startColor: "#1976D2",
+ *   endColor: "#42A5F5",
+ *   direction: "horizontal"
+ * })
+ */
+
+export const createGradient = ({
+	id = "colorUv",
+	startColor,
+	endColor,
+	startOpacity = 0.8,
+	endOpacity = 0,
+	direction = "vertical", // or "horizontal"
+}) => (
+	<defs>
+		<linearGradient
+			id={id}
+			x1={direction === "vertical" ? "0" : "0"}
+			y1={direction === "vertical" ? "0" : "0"}
+			x2={direction === "vertical" ? "0" : "1"}
+			y2={direction === "vertical" ? "1" : "0"}
+		>
+			<stop
+				offset="0%"
+				stopColor={startColor}
+				stopOpacity={startOpacity}
+			/>
+			<stop
+				offset="100%"
+				stopColor={endColor}
+				stopOpacity={endOpacity}
+			/>
+		</linearGradient>
+	</defs>
+);

From 6a0d61b73e21864dfda780bfef7c6f716f431b4e Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 19 Nov 2024 13:34:43 +0800
Subject: [PATCH 079/142] Update Area Chart docs and proptype

---
 Client/src/Components/Charts/AreaChart/index.jsx | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/Client/src/Components/Charts/AreaChart/index.jsx b/Client/src/Components/Charts/AreaChart/index.jsx
index ce4da9830..ee7e953f5 100644
--- a/Client/src/Components/Charts/AreaChart/index.jsx
+++ b/Client/src/Components/Charts/AreaChart/index.jsx
@@ -47,14 +47,22 @@ import { useTheme } from "@mui/material";
  *       data={data}
  *       xKey="createdAt"
  *       yKey="cpu.usage_percent"
- *       xTick={TzTick}
- *       yTick={PercentTick}
+ *       xTick={<TzTick />}
+ *       yTick={<PercentTick />}
  *       strokeColor="#8884d8"
  *       fillColor="#8884d8"
  *       gradient={true}
  *       gradientStartColor="#8884d8"
  *       gradientEndColor="#82ca9d"
- *       customTooltip={InfrastructureTooltip}
+ *       customTooltip={({ active, payload, label }) => (
+ *         <InfrastructureTooltip
+ *           label={label?.toString() ?? ""}
+ *           yKey="cpu.usage_percent"
+ *           yLabel="CPU Usage"
+ *           active={active}
+ *           payload={payload}
+ *         />
+ *       )}
  *     />
  *   );
  * };
@@ -138,7 +146,7 @@ CustomAreaChart.propTypes = {
 	gradientDirection: PropTypes.string,
 	gradientStartColor: PropTypes.string,
 	gradientEndColor: PropTypes.string,
-	customTooltip: PropTypes.object,
+	customTooltip: PropTypes.func,
 };
 
 export default CustomAreaChart;

From a0c73469fab08f5c5580aea9c14ec0717e6a3662 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 19 Nov 2024 13:35:00 +0800
Subject: [PATCH 080/142] Add area charts, fix dummy data

---
 .../src/Pages/Infrastructure/details/data.js  | 35 ++++----
 .../Pages/Infrastructure/details/index.jsx    | 89 +++++++++++++++++++
 2 files changed, 109 insertions(+), 15 deletions(-)

diff --git a/Client/src/Pages/Infrastructure/details/data.js b/Client/src/Pages/Infrastructure/details/data.js
index 029de5203..f945ae525 100644
--- a/Client/src/Pages/Infrastructure/details/data.js
+++ b/Client/src/Pages/Infrastructure/details/data.js
@@ -1,26 +1,30 @@
 function generateMonitorEntries(monitorId, count = 10, options = {}) {
 	const defaultOptions = {
 		timeRange: {
-			start: new Date(Date.now() - 24 * 60 * 60 * 1000), // 24 hours ago
+			start: new Date(Date.now() - 24 * 60 * 60 * 1000 * 20),
 			end: new Date(),
 		},
 		statusVariation: [true, false],
 		responseTimeRange: [50, 500],
-		cpuUsageRange: [0, 100],
-		memoryUsageRange: [0, 100],
-		diskUsageRange: [0, 100],
+		cpuUsageRange: [0, 1],
+		memoryUsageRange: [0, 1],
+		diskUsageRange: [0, 1],
 	};
 
 	const mergedOptions = { ...defaultOptions, ...options };
+	const startTime = mergedOptions.timeRange.start.getTime();
+	const endTime = mergedOptions.timeRange.end.getTime();
+	const totalTimeSpan = endTime - startTime;
 
-	return Array.from({ length: count }, (_, index) => {
-		const createdAt = new Date(
-			mergedOptions.timeRange.start.getTime() +
-				(index *
-					(mergedOptions.timeRange.end.getTime() -
-						mergedOptions.timeRange.start.getTime())) /
-					count
-		);
+	// Generate sorted random time points
+	const timePoints = Array.from({ length: count }, (_, index) => {
+		// Use a non-linear distribution to create more varied spacing
+		const progress = Math.pow(Math.random(), 2); // Bias towards earlier times
+		return startTime + progress * totalTimeSpan;
+	}).sort((a, b) => a - b);
+
+	return timePoints.map((timestamp) => {
+		const createdAt = new Date(timestamp);
 
 		return {
 			_id: "123",
@@ -34,7 +38,7 @@ function generateMonitorEntries(monitorId, count = 10, options = {}) {
 				logical_core: randomInRange([4, 16]),
 				frequency: randomInRange([10, 4000]),
 				temperature: randomInRange([20, 90]),
-				free_percent: 100 - randomInRange(mergedOptions.cpuUsageRange),
+				free_percent: 1 - randomInRange(mergedOptions.cpuUsageRange),
 				usage_percent: randomInRange(mergedOptions.cpuUsageRange),
 				_id: "123",
 			},
@@ -70,11 +74,12 @@ function generateMonitorEntries(monitorId, count = 10, options = {}) {
 	});
 }
 
-// Helper functions
+// Modify randomInRange to work with decimal ranges
 function randomInRange([min, max]) {
-	return Math.floor(Math.random() * (max - min + 1)) + min;
+	return Number((Math.random() * (max - min) + min).toFixed(2));
 }
 
+// ... rest of the code remains the same
 function randomFromArray(arr) {
 	return arr[Math.floor(Math.random() * arr.length)];
 }
diff --git a/Client/src/Pages/Infrastructure/details/index.jsx b/Client/src/Pages/Infrastructure/details/index.jsx
index 9ff3c57f1..783db2040 100644
--- a/Client/src/Pages/Infrastructure/details/index.jsx
+++ b/Client/src/Pages/Infrastructure/details/index.jsx
@@ -4,6 +4,12 @@ import Breadcrumbs from "../../../Components/Breadcrumbs";
 import { Stack, Box, Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import CustomGauge from "../../../Components/Charts/CustomGauge";
+import AreaChart from "../../../Components/Charts/AreaChart";
+import {
+	TzTick,
+	PercentTick,
+	InfrastructureTooltip,
+} from "../../../Components/Charts/Utils/chartUtils";
 
 const bytesToGB = (bytes) => {
 	if (typeof bytes !== "number") return 0;
@@ -92,6 +98,7 @@ const InfrastructureDetails = () => {
 		{ name: "infrastructure monitors", path: "/infrastructure" },
 		{ name: "details", path: `/infrastructure/${monitorId}` },
 	];
+	console.log(testData);
 
 	return (
 		<Box>
@@ -160,6 +167,88 @@ const InfrastructureDetails = () => {
 						);
 					})}
 				</Stack>
+				<Stack
+					direction={"row"}
+					height={300}
+					gap={theme.spacing(2)}
+					flexWrap="wrap" // Better way to do this?  FE team HELP!
+					sx={{
+						"& > *": {
+							flexBasis: `calc(50% - ${theme.spacing(2)})`,
+							maxWidth: `calc(50% - ${theme.spacing(2)})`,
+						},
+					}}
+				>
+					<AreaChart
+						data={testData}
+						dataKey="memory.usage_percent"
+						xKey="createdAt"
+						yKey="memory.usage_percent"
+						customTooltip={({ active, payload, label }) => (
+							<InfrastructureTooltip
+								label={label?.toString() ?? ""}
+								yKey="memory.usage_percent"
+								yLabel="Memory Usage"
+								active={active}
+								payload={payload}
+							/>
+						)}
+						xTick={<TzTick />}
+						yTick={<PercentTick />}
+						strokeColor={theme.palette.primary.main}
+						gradient={true}
+						gradientStartColor={theme.palette.primary.main}
+						gradientEndColor="#ffffff"
+					/>
+					<AreaChart
+						data={testData}
+						dataKey="cpu.usage_percent"
+						xKey="createdAt"
+						yKey="cpu.usage_percent"
+						customTooltip={({ active, payload, label }) => (
+							<InfrastructureTooltip
+								label={label?.toString() ?? ""}
+								yKey="cpu.usage_percent"
+								yLabel="CPU Usage"
+								active={active}
+								payload={payload}
+							/>
+						)}
+						xTick={<TzTick />}
+						yTick={<PercentTick />}
+						strokeColor={theme.palette.primary.main}
+						gradient={true}
+						gradientStartColor={theme.palette.primary.main}
+						gradientEndColor="#ffffff"
+					/>
+					{latestCheck.disk.map((disk, idx) => {
+						return (
+							<AreaChart
+								key={disk._id}
+								data={testData}
+								dataKey={`disk[${idx}].usage_percent`}
+								xKey="createdAt"
+								yKey={`disk[${idx}].usage_percent`}
+								customTooltip={({ active, payload, label }) => (
+									<InfrastructureTooltip
+										label={label?.toString() ?? ""}
+										yKey={`disk.usage_percent`}
+										yLabel="Disk Usage"
+										yIdx={idx}
+										active={active}
+										payload={payload}
+									/>
+								)}
+								xTick={<TzTick />}
+								yTick={<PercentTick />}
+								strokeColor={theme.palette.primary.main}
+								gradient={true}
+								gradientStartColor={theme.palette.primary.main}
+								gradientEndColor="#ffffff"
+							/>
+						);
+					})}
+				</Stack>
 			</Stack>
 		</Box>
 	);

From e3c13d93ec6f05e6e9f37d0901e629decc9793e3 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 19 Nov 2024 13:40:52 +0800
Subject: [PATCH 081/142] Fix label proptype to allow for dates and numbers,
 add comments

---
 Client/src/Components/Charts/Utils/chartUtils.jsx | 6 +++++-
 Client/src/Pages/Infrastructure/details/index.jsx | 9 +++++----
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/Client/src/Components/Charts/Utils/chartUtils.jsx b/Client/src/Components/Charts/Utils/chartUtils.jsx
index 0d87421b8..ad673e472 100644
--- a/Client/src/Components/Charts/Utils/chartUtils.jsx
+++ b/Client/src/Components/Charts/Utils/chartUtils.jsx
@@ -162,7 +162,11 @@ export const InfrastructureTooltip = ({
 InfrastructureTooltip.propTypes = {
 	active: PropTypes.bool,
 	payload: PropTypes.array,
-	label: PropTypes.string,
+	label: PropTypes.oneOfType([
+		PropTypes.instanceOf(Date),
+		PropTypes.string,
+		PropTypes.number,
+	]),
 	yKey: PropTypes.string,
 	yIdx: PropTypes.number,
 	yLabel: PropTypes.string,
diff --git a/Client/src/Pages/Infrastructure/details/index.jsx b/Client/src/Pages/Infrastructure/details/index.jsx
index 783db2040..2922a20e9 100644
--- a/Client/src/Pages/Infrastructure/details/index.jsx
+++ b/Client/src/Pages/Infrastructure/details/index.jsx
@@ -186,7 +186,7 @@ const InfrastructureDetails = () => {
 						yKey="memory.usage_percent"
 						customTooltip={({ active, payload, label }) => (
 							<InfrastructureTooltip
-								label={label?.toString() ?? ""}
+								label={label}
 								yKey="memory.usage_percent"
 								yLabel="Memory Usage"
 								active={active}
@@ -207,7 +207,7 @@ const InfrastructureDetails = () => {
 						yKey="cpu.usage_percent"
 						customTooltip={({ active, payload, label }) => (
 							<InfrastructureTooltip
-								label={label?.toString() ?? ""}
+								label={label}
 								yKey="cpu.usage_percent"
 								yLabel="CPU Usage"
 								active={active}
@@ -222,16 +222,17 @@ const InfrastructureDetails = () => {
 						gradientEndColor="#ffffff"
 					/>
 					{latestCheck.disk.map((disk, idx) => {
+						// disk is an array of disks, so we need to map over it
 						return (
 							<AreaChart
 								key={disk._id}
 								data={testData}
 								dataKey={`disk[${idx}].usage_percent`}
 								xKey="createdAt"
-								yKey={`disk[${idx}].usage_percent`}
+								yKey={`disk[${idx}].usage_percent`} // We are looking for the usage_percent of the current disk in the array
 								customTooltip={({ active, payload, label }) => (
 									<InfrastructureTooltip
-										label={label?.toString() ?? ""}
+										label={label} // label must be a string
 										yKey={`disk.usage_percent`}
 										yLabel="Disk Usage"
 										yIdx={idx}

From 9cf2be774bcd193f760799e5403dd4d96621c4eb Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 19 Nov 2024 13:54:51 +0800
Subject: [PATCH 082/142] Add a randomly generated gradientID to so each chart
 has a unique gradient

---
 Client/src/Components/Charts/AreaChart/index.jsx     | 4 +++-
 Client/src/Components/Charts/Utils/gradientUtils.jsx | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/Client/src/Components/Charts/AreaChart/index.jsx b/Client/src/Components/Charts/AreaChart/index.jsx
index ee7e953f5..4c2fc97ba 100644
--- a/Client/src/Components/Charts/AreaChart/index.jsx
+++ b/Client/src/Components/Charts/AreaChart/index.jsx
@@ -85,6 +85,7 @@ const CustomAreaChart = ({
 	customTooltip,
 }) => {
 	const theme = useTheme();
+	const gradientId = `gradient-${Math.random().toString(36).slice(2, 9)}`;
 	return (
 		<ResponsiveContainer
 			width="100%"
@@ -101,6 +102,7 @@ const CustomAreaChart = ({
 				/>
 				{gradient === true &&
 					createGradient({
+						id: gradientId,
 						startColor: gradientStartColor,
 						endColor: gradientEndColor,
 						direction: gradientDirection,
@@ -116,7 +118,7 @@ const CustomAreaChart = ({
 					type="monotone"
 					dataKey={dataKey}
 					stroke={strokeColor}
-					fill={gradient === true ? "url(#colorUv)" : fillColor}
+					fill={gradient === true ? `url(#${gradientId})` : fillColor}
 				/>
 
 				{customTooltip ? (
diff --git a/Client/src/Components/Charts/Utils/gradientUtils.jsx b/Client/src/Components/Charts/Utils/gradientUtils.jsx
index ef967b7ed..b5920374d 100644
--- a/Client/src/Components/Charts/Utils/gradientUtils.jsx
+++ b/Client/src/Components/Charts/Utils/gradientUtils.jsx
@@ -17,7 +17,7 @@
  */
 
 export const createGradient = ({
-	id = "colorUv",
+	id,
 	startColor,
 	endColor,
 	startOpacity = 0.8,

From 0c194a04039f193f5bb590c90d62d377f93e52dc Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 19 Nov 2024 14:18:29 +0800
Subject: [PATCH 083/142] Change AreaChart responsive container height to 80%

---
 Client/src/Components/Charts/AreaChart/index.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Client/src/Components/Charts/AreaChart/index.jsx b/Client/src/Components/Charts/AreaChart/index.jsx
index 4c2fc97ba..4aa507940 100644
--- a/Client/src/Components/Charts/AreaChart/index.jsx
+++ b/Client/src/Components/Charts/AreaChart/index.jsx
@@ -89,7 +89,7 @@ const CustomAreaChart = ({
 	return (
 		<ResponsiveContainer
 			width="100%"
-			height="100%"
+			height="80%" // FE team HELP!  Why does this overflow if set to 100%?
 		>
 			<AreaChart data={data}>
 				<XAxis

From 7f380cef10035b83591da43da4920da437f0b74c Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 19 Nov 2024 14:19:04 +0800
Subject: [PATCH 084/142] Add headers to charts, add multpilier for
 percentages, increase chart spacing

---
 .../Pages/Infrastructure/details/index.jsx    | 174 ++++++++++--------
 1 file changed, 99 insertions(+), 75 deletions(-)

diff --git a/Client/src/Pages/Infrastructure/details/index.jsx b/Client/src/Pages/Infrastructure/details/index.jsx
index 2922a20e9..c6c97d5f0 100644
--- a/Client/src/Pages/Infrastructure/details/index.jsx
+++ b/Client/src/Pages/Infrastructure/details/index.jsx
@@ -23,6 +23,7 @@ const BaseBox = ({ children }) => {
 	return (
 		<Box
 			sx={{
+				height: "100%",
 				padding: `${theme.spacing(4)} ${theme.spacing(8)}`,
 				minWidth: 200,
 				width: 225,
@@ -98,7 +99,6 @@ const InfrastructureDetails = () => {
 		{ name: "infrastructure monitors", path: "/infrastructure" },
 		{ name: "details", path: `/infrastructure/${monitorId}` },
 	];
-	console.log(testData);
 
 	return (
 		<Box>
@@ -130,7 +130,7 @@ const InfrastructureDetails = () => {
 					/>
 					<StatBox
 						heading={"Status"}
-						subHeading={"Active"}
+						subHeading={latestCheck.status === true ? "Active" : "Inactive"}
 					/>
 				</Stack>
 				<Stack
@@ -138,7 +138,7 @@ const InfrastructureDetails = () => {
 					gap={theme.spacing(8)}
 				>
 					<GaugeBox
-						value={latestCheck.cpu.usage_percent}
+						value={latestCheck.cpu.usage_percent * 100}
 						heading={"Memory Usage"}
 						metricOne={"Used"}
 						valueOne={`${bytesToGB(latestCheck.memory.used_bytes)}GB`}
@@ -146,7 +146,7 @@ const InfrastructureDetails = () => {
 						valueTwo={`${bytesToGB(latestCheck.memory.total_bytes)}GB`}
 					/>
 					<GaugeBox
-						value={latestCheck.cpu.usage_percent}
+						value={latestCheck.cpu.usage_percent * 100}
 						heading={"CPU Usage"}
 						metricOne={"Cores"}
 						valueOne={latestCheck.cpu.physical_core}
@@ -157,7 +157,7 @@ const InfrastructureDetails = () => {
 						return (
 							<GaugeBox
 								key={disk._id}
-								value={disk.usage_percent}
+								value={disk.usage_percent * 100}
 								heading={`Disk${idx} usage`}
 								metricOne={"Used"}
 								valueOne={`${bytesToGB(disk.total_bytes - disk.free_bytes)}GB`}
@@ -169,84 +169,108 @@ const InfrastructureDetails = () => {
 				</Stack>
 				<Stack
 					direction={"row"}
-					height={300}
-					gap={theme.spacing(2)}
-					flexWrap="wrap" // Better way to do this?  FE team HELP!
+					height={300} // FE team HELP!
+					gap={theme.spacing(8)} // FE team HELP!
+					flexWrap="wrap" // //FE team HELP! Better way to do this?
 					sx={{
 						"& > *": {
-							flexBasis: `calc(50% - ${theme.spacing(2)})`,
-							maxWidth: `calc(50% - ${theme.spacing(2)})`,
+							flexBasis: `calc(50% - ${theme.spacing(8)})`,
+							maxWidth: `calc(50% - ${theme.spacing(8)})`,
 						},
 					}}
 				>
-					<AreaChart
-						data={testData}
-						dataKey="memory.usage_percent"
-						xKey="createdAt"
-						yKey="memory.usage_percent"
-						customTooltip={({ active, payload, label }) => (
-							<InfrastructureTooltip
-								label={label}
-								yKey="memory.usage_percent"
-								yLabel="Memory Usage"
-								active={active}
-								payload={payload}
-							/>
-						)}
-						xTick={<TzTick />}
-						yTick={<PercentTick />}
-						strokeColor={theme.palette.primary.main}
-						gradient={true}
-						gradientStartColor={theme.palette.primary.main}
-						gradientEndColor="#ffffff"
-					/>
-					<AreaChart
-						data={testData}
-						dataKey="cpu.usage_percent"
-						xKey="createdAt"
-						yKey="cpu.usage_percent"
-						customTooltip={({ active, payload, label }) => (
-							<InfrastructureTooltip
-								label={label}
-								yKey="cpu.usage_percent"
-								yLabel="CPU Usage"
-								active={active}
-								payload={payload}
-							/>
-						)}
-						xTick={<TzTick />}
-						yTick={<PercentTick />}
-						strokeColor={theme.palette.primary.main}
-						gradient={true}
-						gradientStartColor={theme.palette.primary.main}
-						gradientEndColor="#ffffff"
-					/>
+					<BaseBox>
+						<Typography
+							component="h2"
+							padding={theme.spacing(8)}
+						>
+							Memory usage
+						</Typography>
+						<AreaChart
+							data={testData}
+							dataKey="memory.usage_percent"
+							xKey="createdAt"
+							yKey="memory.usage_percent"
+							customTooltip={({ active, payload, label }) => (
+								<InfrastructureTooltip
+									label={label}
+									yKey="memory.usage_percent"
+									yLabel="Memory Usage"
+									active={active}
+									payload={payload}
+								/>
+							)}
+							xTick={<TzTick />}
+							yTick={<PercentTick />}
+							strokeColor={theme.palette.primary.main}
+							gradient={true}
+							gradientStartColor={theme.palette.primary.main} //FE team HELP!  Not sure what colors to use
+							gradientEndColor="#ffffff" // FE team HELP!
+						/>
+					</BaseBox>
+					<BaseBox>
+						<Typography
+							component="h2"
+							padding={theme.spacing(8)}
+						>
+							CPU usage
+						</Typography>
+						<AreaChart
+							data={testData}
+							dataKey="cpu.usage_percent"
+							xKey="createdAt"
+							yKey="cpu.usage_percent"
+							customTooltip={({ active, payload, label }) => (
+								<InfrastructureTooltip
+									label={label}
+									yKey="cpu.usage_percent"
+									yLabel="CPU Usage"
+									active={active}
+									payload={payload}
+								/>
+							)}
+							xTick={<TzTick />}
+							yTick={<PercentTick />}
+							strokeColor={theme.palette.success.main} // FE team HELP!
+							gradient={true}
+							fill={theme.palette.success.main} // FE team HELP!
+							gradientStartColor={theme.palette.success.main}
+							gradientEndColor="#ffffff"
+						/>
+					</BaseBox>
 					{latestCheck.disk.map((disk, idx) => {
 						// disk is an array of disks, so we need to map over it
 						return (
-							<AreaChart
-								key={disk._id}
-								data={testData}
-								dataKey={`disk[${idx}].usage_percent`}
-								xKey="createdAt"
-								yKey={`disk[${idx}].usage_percent`} // We are looking for the usage_percent of the current disk in the array
-								customTooltip={({ active, payload, label }) => (
-									<InfrastructureTooltip
-										label={label} // label must be a string
-										yKey={`disk.usage_percent`}
-										yLabel="Disk Usage"
-										yIdx={idx}
-										active={active}
-										payload={payload}
-									/>
-								)}
-								xTick={<TzTick />}
-								yTick={<PercentTick />}
-								strokeColor={theme.palette.primary.main}
-								gradient={true}
-								gradientStartColor={theme.palette.primary.main}
-								gradientEndColor="#ffffff"
-							/>
+							<BaseBox key={disk._id}>
+								<Typography
+									component="h2"
+									padding={theme.spacing(8)}
+								>
+									{`Disk${idx} usage`}
+								</Typography>
+								<AreaChart
+									data={testData}
+									dataKey={`disk[${idx}].usage_percent`}
+									xKey="createdAt"
+									yKey={`disk[${idx}].usage_percent`} // We are looking for the usage_percent of the current disk in the array
+									customTooltip={({ active, payload, label }) => (
+										<InfrastructureTooltip
+											label={label} // label must be a string
+											yKey={`disk.usage_percent`}
+											yLabel="Disk Usage"
+											yIdx={idx}
+											active={active}
+											payload={payload}
+										/>
+									)}
+									xTick={<TzTick />}
+									yTick={<PercentTick />}
+									strokeColor={theme.palette.warning.main}
+									gradient={true}
+									gradientStartColor={theme.palette.warning.main}
+									gradientEndColor="#ffffff"
+								/>
+							</BaseBox>
 						);
 					})}
 				</Stack>

From 5a2c6a9aa7b3b948f9473dfb3f2a62bc6be00594 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 19 Nov 2024 14:39:58 +0800
Subject: [PATCH 085/142] Add jsdocs and proptypes to Infrastructure Details
 Page

---
 .../Pages/Infrastructure/details/index.jsx    | 52 +++++++++++++++++++
 1 file changed, 52 insertions(+)

diff --git a/Client/src/Pages/Infrastructure/details/index.jsx b/Client/src/Pages/Infrastructure/details/index.jsx
index c6c97d5f0..bf31e8d27 100644
--- a/Client/src/Pages/Infrastructure/details/index.jsx
+++ b/Client/src/Pages/Infrastructure/details/index.jsx
@@ -10,7 +10,13 @@ import {
 	PercentTick,
 	InfrastructureTooltip,
 } from "../../../Components/Charts/Utils/chartUtils";
+import PropTypes from "prop-types";
 
+/**
+ * Converts bytes to gigabytes
+ * @param {number} bytes - Number of bytes to convert
+ * @returns {number} Converted value in gigabytes
+ */
 const bytesToGB = (bytes) => {
 	if (typeof bytes !== "number") return 0;
 	if (bytes === 0) return 0;
@@ -18,6 +24,12 @@ const bytesToGB = (bytes) => {
 	return Number(GB.toFixed(0));
 };
 
+/**
+ * Renders a base box with consistent styling
+ * @param {Object} props - Component properties
+ * @param {React.ReactNode} props.children - Child components to render inside the box
+ * @returns {React.ReactElement} Styled box component
+ */
 const BaseBox = ({ children }) => {
 	const theme = useTheme();
 	return (
@@ -38,6 +50,17 @@ const BaseBox = ({ children }) => {
 	);
 };
 
+BaseBox.propTypes = {
+	children: PropTypes.node.isRequired,
+};
+
+/**
+ * Renders a statistic box with a heading and subheading
+ * @param {Object} props - Component properties
+ * @param {string} props.heading - Primary heading text
+ * @param {string} props.subHeading - Secondary heading text
+ * @returns {React.ReactElement} Stat box component
+ */
 const StatBox = ({ heading, subHeading }) => {
 	return (
 		<BaseBox>
@@ -47,6 +70,22 @@ const StatBox = ({ heading, subHeading }) => {
 	);
 };
 
+StatBox.propTypes = {
+	heading: PropTypes.string.isRequired,
+	subHeading: PropTypes.string.isRequired,
+};
+
+/**
+ * Renders a gauge box with usage visualization
+ * @param {Object} props - Component properties
+ * @param {number} props.value - Percentage value for gauge
+ * @param {string} props.heading - Box heading
+ * @param {string} props.metricOne - First metric label
+ * @param {string} props.valueOne - First metric value
+ * @param {string} props.metricTwo - Second metric label
+ * @param {string} props.valueTwo - Second metric value
+ * @returns {React.ReactElement} Gauge box component
+ */
 const GaugeBox = ({ value, heading, metricOne, valueOne, metricTwo, valueTwo }) => {
 	const theme = useTheme();
 	return (
@@ -90,6 +129,19 @@ const GaugeBox = ({ value, heading, metricOne, valueOne, metricTwo, valueTwo })
 	);
 };
 
+GaugeBox.propTypes = {
+	value: PropTypes.number.isRequired,
+	heading: PropTypes.string.isRequired,
+	metricOne: PropTypes.string.isRequired,
+	valueOne: PropTypes.string.isRequired,
+	metricTwo: PropTypes.string.isRequired,
+	valueTwo: PropTypes.string.isRequired,
+};
+
+/**
+ * Renders the infrastructure details page
+ * @returns {React.ReactElement} Infrastructure details page component
+ */
 const InfrastructureDetails = () => {
 	const theme = useTheme();
 	const { monitorId } = useParams();

From 9e7e13baea23a80306ee6c3a1a50090fc4cd0b51 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 19 Nov 2024 15:28:57 +0800
Subject: [PATCH 086/142] truncate Gauge percentage to 2 decimal places

---
 Client/src/Components/Charts/CustomGauge/index.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Client/src/Components/Charts/CustomGauge/index.jsx b/Client/src/Components/Charts/CustomGauge/index.jsx
index d00ab7f5f..387efc64f 100644
--- a/Client/src/Components/Charts/CustomGauge/index.jsx
+++ b/Client/src/Components/Charts/CustomGauge/index.jsx
@@ -92,7 +92,7 @@ const CustomGauge = ({
 					fill: theme.typography.body2.color,
 				}}
 			>
-				{`${progress}%`}
+				{`${progress.toFixed(2)}%`}
 			</Typography>
 		</Box>
 	);

From 217ae50acc68ed2396d089218df0811f5bf3750d Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 19 Nov 2024 16:01:08 +0800
Subject: [PATCH 087/142] Fetch data from gist

---
 .../src/Pages/Infrastructure/details/data.js  | 133 ------
 .../Pages/Infrastructure/details/index.jsx    | 388 ++++++++++--------
 2 files changed, 207 insertions(+), 314 deletions(-)
 delete mode 100644 Client/src/Pages/Infrastructure/details/data.js

diff --git a/Client/src/Pages/Infrastructure/details/data.js b/Client/src/Pages/Infrastructure/details/data.js
deleted file mode 100644
index f945ae525..000000000
--- a/Client/src/Pages/Infrastructure/details/data.js
+++ /dev/null
@@ -1,133 +0,0 @@
-function generateMonitorEntries(monitorId, count = 10, options = {}) {
-	const defaultOptions = {
-		timeRange: {
-			start: new Date(Date.now() - 24 * 60 * 60 * 1000 * 20),
-			end: new Date(),
-		},
-		statusVariation: [true, false],
-		responseTimeRange: [50, 500],
-		cpuUsageRange: [0, 1],
-		memoryUsageRange: [0, 1],
-		diskUsageRange: [0, 1],
-	};
-
-	const mergedOptions = { ...defaultOptions, ...options };
-	const startTime = mergedOptions.timeRange.start.getTime();
-	const endTime = mergedOptions.timeRange.end.getTime();
-	const totalTimeSpan = endTime - startTime;
-
-	// Generate sorted random time points
-	const timePoints = Array.from({ length: count }, (_, index) => {
-		// Use a non-linear distribution to create more varied spacing
-		const progress = Math.pow(Math.random(), 2); // Bias towards earlier times
-		return startTime + progress * totalTimeSpan;
-	}).sort((a, b) => a - b);
-
-	return timePoints.map((timestamp) => {
-		const createdAt = new Date(timestamp);
-
-		return {
-			_id: "123",
-			monitorId: monitorId,
-			status: randomFromArray(mergedOptions.statusVariation),
-			responseTime: randomInRange(mergedOptions.responseTimeRange),
-			statusCode: randomStatusCode(),
-			message: randomMessage(),
-			cpu: {
-				physical_core: randomInRange([4, 8]),
-				logical_core: randomInRange([4, 16]),
-				frequency: randomInRange([10, 4000]),
-				temperature: randomInRange([20, 90]),
-				free_percent: 1 - randomInRange(mergedOptions.cpuUsageRange),
-				usage_percent: randomInRange(mergedOptions.cpuUsageRange),
-				_id: "123",
-			},
-			memory: {
-				total_bytes: randomInRange([8, 32]) * 1024 * 1024 * 1024,
-				available_bytes: randomInRange([4, 16]) * 1024 * 1024 * 1024,
-				used_bytes: randomInRange([4, 16]) * 1024 * 1024 * 1024,
-				usage_percent: randomInRange(mergedOptions.memoryUsageRange),
-				_id: "123",
-			},
-			disk: [
-				{
-					read_speed_bytes: randomInRange([100, 1000]) * 1024 * 1024,
-					write_speed_bytes: randomInRange([100, 1000]) * 1024 * 1024,
-					total_bytes: randomInRange([100, 1000]) * 1024 * 1024 * 1024,
-					free_bytes: randomInRange([50, 500]) * 1024 * 1024 * 1024,
-					usage_percent: randomInRange(mergedOptions.diskUsageRange),
-					_id: "123",
-				},
-			],
-			host: {
-				os: randomOS(),
-				platform: randomPlatform(),
-				kernel_version: randomKernelVersion(),
-				_id: "123",
-			},
-			errors: randomErrors(),
-			expiry: new Date(createdAt.getTime() + 365 * 24 * 60 * 60 * 1000),
-			createdAt: createdAt,
-			updatedAt: createdAt,
-			__v: 0,
-		};
-	});
-}
-
-// Modify randomInRange to work with decimal ranges
-function randomInRange([min, max]) {
-	return Number((Math.random() * (max - min) + min).toFixed(2));
-}
-
-// ... rest of the code remains the same
-function randomFromArray(arr) {
-	return arr[Math.floor(Math.random() * arr.length)];
-}
-
-function randomStatusCode() {
-	const statusCodes = [200, 201, 204, 400, 401, 403, 404, 500, 502, 503];
-	return randomFromArray(statusCodes);
-}
-
-function randomMessage() {
-	const messages = [
-		"OK",
-		"Created",
-		"No Content",
-		"Bad Request",
-		"Unauthorized",
-		"Forbidden",
-		"Not Found",
-		"Internal Server Error",
-	];
-	return randomFromArray(messages);
-}
-
-function randomOS() {
-	const oss = ["Windows", "Linux", "macOS", "Ubuntu", "CentOS"];
-	return randomFromArray(oss);
-}
-
-function randomPlatform() {
-	const platforms = ["x64", "x86", "ARM", "ARM64"];
-	return randomFromArray(platforms);
-}
-
-function randomKernelVersion() {
-	return `${randomInRange([4, 6])}.${randomInRange([0, 20])}.${randomInRange([0, 100])}`;
-}
-
-function randomErrors() {
-	const possibleErrors = [
-		"Network timeout",
-		"Connection refused",
-		"SSL certificate error",
-		"DNS resolution failed",
-		"",
-	];
-	return Math.random() < 0.2 ? [randomFromArray(possibleErrors)] : [];
-}
-
-// Usage
-const monitorId = "123";
-export const monitorData = generateMonitorEntries(monitorId, 20);
diff --git a/Client/src/Pages/Infrastructure/details/index.jsx b/Client/src/Pages/Infrastructure/details/index.jsx
index bf31e8d27..40db34b80 100644
--- a/Client/src/Pages/Infrastructure/details/index.jsx
+++ b/Client/src/Pages/Infrastructure/details/index.jsx
@@ -1,10 +1,11 @@
-import { monitorData } from "./data";
 import { useParams } from "react-router-dom";
+import { useEffect, useState } from "react";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
 import { Stack, Box, Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import CustomGauge from "../../../Components/Charts/CustomGauge";
 import AreaChart from "../../../Components/Charts/AreaChart";
+import axios from "axios";
 import {
 	TzTick,
 	PercentTick,
@@ -17,11 +18,18 @@ import PropTypes from "prop-types";
  * @param {number} bytes - Number of bytes to convert
  * @returns {number} Converted value in gigabytes
  */
-const bytesToGB = (bytes) => {
-	if (typeof bytes !== "number") return 0;
-	if (bytes === 0) return 0;
+const formatBytes = (bytes) => {
+	if (typeof bytes !== "number") return "0 GB";
+	if (bytes === 0) return "0 GB";
+
 	const GB = bytes / (1024 * 1024 * 1024);
-	return Number(GB.toFixed(0));
+	const MB = bytes / (1024 * 1024);
+
+	if (GB >= 1) {
+		return `${Number(GB.toFixed(0))} GB`;
+	} else {
+		return `${Number(MB.toFixed(0))} MB`;
+	}
 };
 
 /**
@@ -130,12 +138,12 @@ const GaugeBox = ({ value, heading, metricOne, valueOne, metricTwo, valueTwo })
 };
 
 GaugeBox.propTypes = {
-	value: PropTypes.number.isRequired,
+	value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
 	heading: PropTypes.string.isRequired,
 	metricOne: PropTypes.string.isRequired,
-	valueOne: PropTypes.string.isRequired,
+	valueOne: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
 	metricTwo: PropTypes.string.isRequired,
-	valueTwo: PropTypes.string.isRequired,
+	valueTwo: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
 };
 
 /**
@@ -145,189 +153,207 @@ GaugeBox.propTypes = {
 const InfrastructureDetails = () => {
 	const theme = useTheme();
 	const { monitorId } = useParams();
-	const testData = monitorData;
-	const latestCheck = testData[testData.length - 1];
 	const navList = [
 		{ name: "infrastructure monitors", path: "/infrastructure" },
 		{ name: "details", path: `/infrastructure/${monitorId}` },
 	];
+	const [monitor, setMonitor] = useState(null);
+
+	useEffect(() => {
+		const fetchData = async () => {
+			try {
+				const response = await axios.get("http://localhost:5000/api/v1/dummy-data", {
+					headers: {
+						"Content-Type": "application/json",
+						"Cache-Control": "no-cache",
+					},
+				});
+				setMonitor(response.data.data);
+			} catch (error) {
+				console.error(error);
+			}
+		};
+		fetchData();
+	}, []);
 
 	return (
-		<Box>
-			<Breadcrumbs list={navList} />
-			<Stack
-				direction="column"
-				gap={theme.spacing(10)}
-				mt={theme.spacing(10)}
-			>
+		monitor && (
+			<Box>
+				<Breadcrumbs list={navList} />
 				<Stack
-					direction="row"
-					gap={theme.spacing(8)}
+					direction="column"
+					gap={theme.spacing(10)}
+					mt={theme.spacing(10)}
 				>
-					<StatBox
-						heading={"CPU"}
-						subHeading={`${latestCheck.cpu.physical_core} cores`}
-					/>
-					<StatBox
-						heading={"Memory"}
-						subHeading={`${bytesToGB(latestCheck.memory.total_bytes)}GB`}
-					/>
-					<StatBox
-						heading={"Disk"}
-						subHeading={`${bytesToGB(latestCheck.disk[0].total_bytes)}GB`}
-					/>
-					<StatBox
-						heading={"Uptime"}
-						subHeading={"100%"}
-					/>
-					<StatBox
-						heading={"Status"}
-						subHeading={latestCheck.status === true ? "Active" : "Inactive"}
-					/>
-				</Stack>
-				<Stack
-					direction="row"
-					gap={theme.spacing(8)}
-				>
-					<GaugeBox
-						value={latestCheck.cpu.usage_percent * 100}
-						heading={"Memory Usage"}
-						metricOne={"Used"}
-						valueOne={`${bytesToGB(latestCheck.memory.used_bytes)}GB`}
-						metricTwo={"Total"}
-						valueTwo={`${bytesToGB(latestCheck.memory.total_bytes)}GB`}
-					/>
-					<GaugeBox
-						value={latestCheck.cpu.usage_percent * 100}
-						heading={"CPU Usage"}
-						metricOne={"Cores"}
-						valueOne={latestCheck.cpu.physical_core}
-						metricTwo={"Frequency"}
-						valueTwo={`${latestCheck.cpu.frequency} Ghz`}
-					/>
-					{latestCheck.disk.map((disk, idx) => {
-						return (
-							<GaugeBox
-								key={disk._id}
-								value={disk.usage_percent * 100}
-								heading={`Disk${idx} usage`}
-								metricOne={"Used"}
-								valueOne={`${bytesToGB(disk.total_bytes - disk.free_bytes)}GB`}
-								metricTwo={"Total"}
-								valueTwo={`${bytesToGB(disk.total_bytes)}GB`}
+					<Stack
+						direction="row"
+						gap={theme.spacing(8)}
+					>
+						<StatBox
+							heading={"CPU"}
+							subHeading={`${monitor.checks[0].cpu.physical_core} cores`}
+						/>
+						<StatBox
+							heading={"Memory"}
+							subHeading={formatBytes(monitor.checks[0].memory.total_bytes)}
+						/>
+						<StatBox
+							heading={"Disk"}
+							subHeading={formatBytes(monitor.checks[0].disk[0].total_bytes)}
+						/>
+						<StatBox
+							heading={"Uptime"}
+							subHeading={"100%"}
+						/>
+						<StatBox
+							heading={"Status"}
+							subHeading={monitor.status === true ? "Active" : "Inactive"}
+						/>
+					</Stack>
+					<Stack
+						direction="row"
+						gap={theme.spacing(8)}
+					>
+						<GaugeBox
+							value={monitor.checks[0].memory.usage_percent * 100}
+							heading={"Memory Usage"}
+							metricOne={"Used"}
+							valueOne={formatBytes(monitor.checks[0].memory.used_bytes)}
+							metricTwo={"Total"}
+							valueTwo={formatBytes(monitor.checks[0].memory.total_bytes)}
+						/>
+						<GaugeBox
+							value={monitor.checks[0].cpu.usage_percent * 100}
+							heading={"CPU Usage"}
+							metricOne={"Cores"}
+							valueOne={monitor.checks[0].cpu.physical_core}
+							metricTwo={"Frequency"}
+							valueTwo={`${(monitor.checks[0].cpu.frequency / 1000).toFixed(2)} Ghz`}
+						/>
+						{monitor.checks[0].disk.map((disk, idx) => {
+							return (
+								<GaugeBox
+									key={disk._id}
+									value={disk.usage_percent * 100}
+									heading={`Disk${idx} usage`}
+									metricOne={"Used"}
+									valueOne={formatBytes(disk.total_bytes - disk.free_bytes)}
+									metricTwo={"Total"}
+									valueTwo={formatBytes(disk.total_bytes)}
+								/>
+							);
+						})}
+					</Stack>
+					<Stack
+						direction={"row"}
+						height={300} // FE team HELP!
+						gap={theme.spacing(8)} // FE team HELP!
+						flexWrap="wrap" // //FE team HELP! Better way to do this?
+						sx={{
+							"& > *": {
+								flexBasis: `calc(50% - ${theme.spacing(8)})`,
+								maxWidth: `calc(50% - ${theme.spacing(8)})`,
+							},
+						}}
+					>
+						<BaseBox>
+							<Typography
+								component="h2"
+								padding={theme.spacing(8)}
+							>
+								Memory usage
+							</Typography>
+							<AreaChart
+								data={monitor?.checks ?? []}
+								dataKey="memory.usage_percent"
+								xKey="createdAt"
+								yKey="memory.usage_percent"
+								customTooltip={({ active, payload, label }) => (
+									<InfrastructureTooltip
+										label={label}
+										yKey="memory.usage_percent"
+										yLabel="Memory Usage"
+										active={active}
+										payload={payload}
+									/>
+								)}
+								xTick={<TzTick />}
+								yTick={<PercentTick />}
+								strokeColor={theme.palette.primary.main}
+								gradient={true}
+								gradientStartColor={theme.palette.primary.main} //FE team HELP!  Not sure what colors to use
+								gradientEndColor="#ffffff" // FE team HELP!
 							/>
-						);
-					})}
+						</BaseBox>
+						<BaseBox>
+							<Typography
+								component="h2"
+								padding={theme.spacing(8)}
+							>
+								CPU usage
+							</Typography>
+							<AreaChart
+								data={monitor?.checks ?? []}
+								dataKey="cpu.usage_percent"
+								xKey="createdAt"
+								yKey="cpu.usage_percent"
+								customTooltip={({ active, payload, label }) => (
+									<InfrastructureTooltip
+										label={label}
+										yKey="cpu.usage_percent"
+										yLabel="CPU Usage"
+										active={active}
+										payload={payload}
+									/>
+								)}
+								xTick={<TzTick />}
+								yTick={<PercentTick />}
+								strokeColor={theme.palette.success.main} // FE team HELP!
+								gradient={true}
+								fill={theme.palette.success.main} // FE team HELP!
+								gradientStartColor={theme.palette.success.main}
+								gradientEndColor="#ffffff"
+							/>
+						</BaseBox>
+						{monitor?.checks?.[0]?.disk?.map((disk, idx) => {
+							// disk is an array of disks, so we need to map over it
+							return (
+								<BaseBox key={disk._id}>
+									<Typography
+										component="h2"
+										padding={theme.spacing(8)}
+									>
+										{`Disk${idx} usage`}
+									</Typography>
+									<AreaChart
+										data={monitor?.checks ?? []}
+										dataKey={`disk[${idx}].usage_percent`}
+										xKey="createdAt"
+										yKey={`disk[${idx}].usage_percent`} // We are looking for the usage_percent of the current disk in the array
+										customTooltip={({ active, payload, label }) => (
+											<InfrastructureTooltip
+												label={label} // label must be a string
+												yKey={`disk.usage_percent`}
+												yLabel="Disk Usage"
+												yIdx={idx}
+												active={active}
+												payload={payload}
+											/>
+										)}
+										xTick={<TzTick />}
+										yTick={<PercentTick />}
+										strokeColor={theme.palette.warning.main}
+										gradient={true}
+										gradientStartColor={theme.palette.warning.main}
+										gradientEndColor="#ffffff"
+									/>
+								</BaseBox>
+							);
+						})}
+					</Stack>
 				</Stack>
-				<Stack
-					direction={"row"}
-					height={300} // FE team HELP!
-					gap={theme.spacing(8)} // FE team HELP!
-					flexWrap="wrap" // //FE team HELP! Better way to do this?
-					sx={{
-						"& > *": {
-							flexBasis: `calc(50% - ${theme.spacing(8)})`,
-							maxWidth: `calc(50% - ${theme.spacing(8)})`,
-						},
-					}}
-				>
-					<BaseBox>
-						<Typography
-							component="h2"
-							padding={theme.spacing(8)}
-						>
-							Memory usage
-						</Typography>
-						<AreaChart
-							data={testData}
-							dataKey="memory.usage_percent"
-							xKey="createdAt"
-							yKey="memory.usage_percent"
-							customTooltip={({ active, payload, label }) => (
-								<InfrastructureTooltip
-									label={label}
-									yKey="memory.usage_percent"
-									yLabel="Memory Usage"
-									active={active}
-									payload={payload}
-								/>
-							)}
-							xTick={<TzTick />}
-							yTick={<PercentTick />}
-							strokeColor={theme.palette.primary.main}
-							gradient={true}
-							gradientStartColor={theme.palette.primary.main} //FE team HELP!  Not sure what colors to use
-							gradientEndColor="#ffffff" // FE team HELP!
-						/>
-					</BaseBox>
-					<BaseBox>
-						<Typography
-							component="h2"
-							padding={theme.spacing(8)}
-						>
-							CPU usage
-						</Typography>
-						<AreaChart
-							data={testData}
-							dataKey="cpu.usage_percent"
-							xKey="createdAt"
-							yKey="cpu.usage_percent"
-							customTooltip={({ active, payload, label }) => (
-								<InfrastructureTooltip
-									label={label}
-									yKey="cpu.usage_percent"
-									yLabel="CPU Usage"
-									active={active}
-									payload={payload}
-								/>
-							)}
-							xTick={<TzTick />}
-							yTick={<PercentTick />}
-							strokeColor={theme.palette.success.main} // FE team HELP!
-							gradient={true}
-							fill={theme.palette.success.main} // FE team HELP!
-							gradientStartColor={theme.palette.success.main}
-							gradientEndColor="#ffffff"
-						/>
-					</BaseBox>
-					{latestCheck.disk.map((disk, idx) => {
-						// disk is an array of disks, so we need to map over it
-						return (
-							<BaseBox key={disk._id}>
-								<Typography
-									component="h2"
-									padding={theme.spacing(8)}
-								>
-									{`Disk${idx} usage`}
-								</Typography>
-								<AreaChart
-									data={testData}
-									dataKey={`disk[${idx}].usage_percent`}
-									xKey="createdAt"
-									yKey={`disk[${idx}].usage_percent`} // We are looking for the usage_percent of the current disk in the array
-									customTooltip={({ active, payload, label }) => (
-										<InfrastructureTooltip
-											label={label} // label must be a string
-											yKey={`disk.usage_percent`}
-											yLabel="Disk Usage"
-											yIdx={idx}
-											active={active}
-											payload={payload}
-										/>
-									)}
-									xTick={<TzTick />}
-									yTick={<PercentTick />}
-									strokeColor={theme.palette.warning.main}
-									gradient={true}
-									gradientStartColor={theme.palette.warning.main}
-									gradientEndColor="#ffffff"
-								/>
-							</BaseBox>
-						);
-					})}
-				</Stack>
-			</Stack>
-		</Box>
+			</Box>
+		)
 	);
 };
 

From 7223ca366af960995a1a89f243f4beb87dfab86f Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 19 Nov 2024 16:01:28 +0800
Subject: [PATCH 088/142] Add temporary dummy data route

---
 Server/index.js | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/Server/index.js b/Server/index.js
index 0e9811a43..996c4fd07 100644
--- a/Server/index.js
+++ b/Server/index.js
@@ -92,6 +92,23 @@ const startApp = async () => {
 	app.use("/api/v1/queue", verifyJWT, queueRouter);
 	app.use("/api/v1/status-page", statusPageRouter);
 
+	app.use("/api/v1/dummy-data", async (req, res) => {
+		try {
+			const response = await axios.get(
+				"https://gist.githubusercontent.com/ajhollid/9afa39410c7bbf52cc905f285a2225bf/raw/429a231a3559ebc95f6f488ed2c766bd7d6f46e5/dummyData.json",
+				{
+					headers: {
+						"Content-Type": "application/json",
+						"Cache-Control": "no-cache",
+					},
+				}
+			);
+			return res.status(200).json(response.data);
+		} catch (error) {
+			return res.status(500).json({ message: error.message });
+		}
+	});
+
 	//health check
 	app.use("/api/v1/healthy", (req, res) => {
 		try {

From 8b8a0962dba43a87cfb3945ef0c0f24a76089e09 Mon Sep 17 00:00:00 2001
From: Shemy Gan <jennifergan26@gmail.com>
Date: Tue, 19 Nov 2024 09:57:39 -0500
Subject: [PATCH 089/142] - Move  create infrastructure folder to
 infrastructure and remove Infrastructuremonitor folder - Add create
 infrastructure page to globle routes and add "infrastructure" to PATH_MAP -
 Add navigation/breadcrumb to  create infrastructure page - Connect create
 infrastructure page to create monitor button on home page

---
 Client/src/App.jsx                                          | 6 +++++-
 Client/src/Components/Sidebar/index.jsx                     | 1 +
 .../CreateMonitor/CustomThreshold/index.jsx                 | 0
 .../CreateMonitor/index.jsx                                 | 6 +++---
 Client/src/Pages/Infrastructure/index.jsx                   | 4 +++-
 5 files changed, 12 insertions(+), 5 deletions(-)
 rename Client/src/Pages/{InfrastructureMonitors => Infrastructure}/CreateMonitor/CustomThreshold/index.jsx (100%)
 rename Client/src/Pages/{InfrastructureMonitors => Infrastructure}/CreateMonitor/index.jsx (98%)

diff --git a/Client/src/App.jsx b/Client/src/App.jsx
index 151512701..b7a01c9d9 100644
--- a/Client/src/App.jsx
+++ b/Client/src/App.jsx
@@ -10,6 +10,7 @@ import Register from "./Pages/Auth/Register/Register";
 import Account from "./Pages/Account";
 import Monitors from "./Pages/Monitors/Home";
 import CreateMonitor from "./Pages/Monitors/CreateMonitor";
+import CreateInfrastructureMonitor from "./Pages/Infrastructure/CreateMonitor";
 import Incidents from "./Pages/Incidents";
 import Status from "./Pages/Status";
 import Integrations from "./Pages/Integrations";
@@ -127,7 +128,10 @@ function App() {
 						path="infrastructure"
 						element={<ProtectedRoute Component={Infrastructure} />}
 					/>
-
+					<Route
+						path="infrastructure/create"
+						element={<ProtectedRoute Component={CreateInfrastructureMonitor} />}
+					/>
 					<Route
 						path="incidents/:monitorId?"
 						element={<ProtectedRoute Component={Incidents} />}
diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx
index 2e91289f8..e6507c6e4 100644
--- a/Client/src/Components/Sidebar/index.jsx
+++ b/Client/src/Components/Sidebar/index.jsx
@@ -90,6 +90,7 @@ const URL_MAP = {
 const PATH_MAP = {
 	monitors: "Dashboard",
 	pagespeed: "Dashboard",
+	infrastructure: "Dashboard",
 	account: "Account",
 	settings: "Other",
 };
diff --git a/Client/src/Pages/InfrastructureMonitors/CreateMonitor/CustomThreshold/index.jsx b/Client/src/Pages/Infrastructure/CreateMonitor/CustomThreshold/index.jsx
similarity index 100%
rename from Client/src/Pages/InfrastructureMonitors/CreateMonitor/CustomThreshold/index.jsx
rename to Client/src/Pages/Infrastructure/CreateMonitor/CustomThreshold/index.jsx
diff --git a/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx b/Client/src/Pages/Infrastructure/CreateMonitor/index.jsx
similarity index 98%
rename from Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx
rename to Client/src/Pages/Infrastructure/CreateMonitor/index.jsx
index 56b37662a..6a7081d9c 100644
--- a/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx
+++ b/Client/src/Pages/Infrastructure/CreateMonitor/index.jsx
@@ -177,7 +177,7 @@ const CreateInfrastructureMonitor = () => {
 			);
 			if (action.meta.requestStatus === "fulfilled") {
 				createToast({ body: "Infrastructure monitor created successfully!" });
-				navigate("/infrastructure-monitors/create");
+				navigate("/infrastructure");
 			} else {
 				createToast({ body: "Failed to create monitor." });
 			}
@@ -217,8 +217,8 @@ const CreateInfrastructureMonitor = () => {
 		<Box className="create-infrastructure-monitor">
 			<Breadcrumbs
 				list={[
-					{ name: "Infrastructure monitors", path: "/infrastructure-monitors/create" },
-					{ name: "create", path: `/infrastructure-monitors/create` },
+					{ name: "Infrastructure monitors", path: "infrastructure" },
+					{ name: "create", path: `infrastructure/create` },
 				]}
 			/>
 			<Stack
diff --git a/Client/src/Pages/Infrastructure/index.jsx b/Client/src/Pages/Infrastructure/index.jsx
index 324268af7..0cca80940 100644
--- a/Client/src/Pages/Infrastructure/index.jsx
+++ b/Client/src/Pages/Infrastructure/index.jsx
@@ -1,5 +1,6 @@
 import { Box, Button } from "@mui/material";
 import { Heading } from "../../Components/Heading";
+import { useNavigate } from "react-router-dom";
 
 /**
  * This is the Infrastructure monitoring page. This is a work in progress
@@ -9,13 +10,14 @@ import { Heading } from "../../Components/Heading";
  */
 
 function Infrastructure() {
+	const navigate = useNavigate();	
 	return (
 		<Box component="main">
 			<Button
 				variant="contained"
 				color="primary"
 				onClick={() => {
-					// navigate("/monitors/create");
+					navigate("/infrastructure/create");
 				}}
 				sx={{ fontWeight: 500 }}
 			>

From b7186aa0ef2b4c5268dbe57de9264f1d996a9b96 Mon Sep 17 00:00:00 2001
From: Shemy Gan <jennifergan26@gmail.com>
Date: Tue, 19 Nov 2024 11:31:22 -0500
Subject: [PATCH 090/142] - Replace pb with alignSelf for checkbox position

---
 Client/src/Components/Inputs/Checkbox/index.jsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/Client/src/Components/Inputs/Checkbox/index.jsx b/Client/src/Components/Inputs/Checkbox/index.jsx
index 797e43780..a2e8021df 100644
--- a/Client/src/Components/Inputs/Checkbox/index.jsx
+++ b/Client/src/Components/Inputs/Checkbox/index.jsx
@@ -40,8 +40,6 @@ const Checkbox = ({
 	/* TODO move sizes to theme */
 	const sizes = { small: "14px", medium: "16px", large: "18px" };
 	const theme = useTheme();
-	const checkBoxPosition = typeof label === "string" ? {} : { pb: "65px" };
-
 	return (
 		<FormControlLabel
 			className="checkbox-wrapper"
@@ -56,9 +54,10 @@ const Checkbox = ({
 						"aria-label": "controlled checkbox",
 						id: id,
 					}}
-					sx={{
+					sx={{						
 						"&:hover": { backgroundColor: "transparent" },
 						"& svg": { width: sizes[size], height: sizes[size] },
+						alignSelf: "flex-start",
 					}}
 				/>
 			}
@@ -71,7 +70,6 @@ const Checkbox = ({
 					width: theme.spacing(10),
 					p: 0,
 					mr: theme.spacing(6),
-					...checkBoxPosition,
 				},
 				"&:not(:has(.Mui-disabled)):hover": {
 					backgroundColor: theme.palette.background.accent,

From d072ef2ee32849b36445bed60ec70b09a57381e8 Mon Sep 17 00:00:00 2001
From: Shemy Gan <jennifergan26@gmail.com>
Date: Tue, 19 Nov 2024 13:02:22 -0500
Subject: [PATCH 091/142] - Update proptypes

---
 Client/src/Components/Inputs/Checkbox/index.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Client/src/Components/Inputs/Checkbox/index.jsx b/Client/src/Components/Inputs/Checkbox/index.jsx
index a2e8021df..2f89d86df 100644
--- a/Client/src/Components/Inputs/Checkbox/index.jsx
+++ b/Client/src/Components/Inputs/Checkbox/index.jsx
@@ -89,7 +89,7 @@ const Checkbox = ({
 
 Checkbox.propTypes = {
 	id: PropTypes.string.isRequired,
-	label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
+	label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
 	size: PropTypes.oneOf(["small", "medium", "large"]),
 	isChecked: PropTypes.bool.isRequired,
 	value: PropTypes.string,

From b5cfd834705a6223ad78ab9edc4e27b66c33a5a9 Mon Sep 17 00:00:00 2001
From: Mend Renovate <bot@renovateapp.com>
Date: Tue, 19 Nov 2024 19:00:13 +0000
Subject: [PATCH 092/142] fix(deps): update dependency bullmq to v5.28.0

---
 Server/package-lock.json | 8 ++++----
 Server/package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/Server/package-lock.json b/Server/package-lock.json
index 810240a29..c76e70f96 100644
--- a/Server/package-lock.json
+++ b/Server/package-lock.json
@@ -11,7 +11,7 @@
 			"dependencies": {
 				"axios": "^1.7.2",
 				"bcrypt": "^5.1.1",
-				"bullmq": "5.26.2",
+				"bullmq": "5.28.0",
 				"cors": "^2.8.5",
 				"dockerode": "4.0.2",
 				"dotenv": "^16.4.5",
@@ -1217,9 +1217,9 @@
 			}
 		},
 		"node_modules/bullmq": {
-			"version": "5.26.2",
-			"resolved": "https://registry.npmjs.org/bullmq/-/bullmq-5.26.2.tgz",
-			"integrity": "sha512-UdHBrJoRkpXoF8b/FVEkuRBnaUZoA7+qHQNyTx1n2oNVZ4iWxqGqss+M9xAwXOpBmSNvOSlaBdHpf+5QJTU8GQ==",
+			"version": "5.28.0",
+			"resolved": "https://registry.npmjs.org/bullmq/-/bullmq-5.28.0.tgz",
+			"integrity": "sha512-HyYr6bfbBuzfyUvRkP6Ux1Zrv2eZcM4zXMl90Q7oneORp3jKnXYyqjCewJGAoo4PqKyE4TWCcdUnFkdxAzysng==",
 			"license": "MIT",
 			"dependencies": {
 				"cron-parser": "^4.6.0",
diff --git a/Server/package.json b/Server/package.json
index 14c5c93fe..44a8947d7 100644
--- a/Server/package.json
+++ b/Server/package.json
@@ -14,7 +14,7 @@
 	"dependencies": {
 		"axios": "^1.7.2",
 		"bcrypt": "^5.1.1",
-		"bullmq": "5.26.2",
+		"bullmq": "5.28.0",
 		"cors": "^2.8.5",
 		"dockerode": "4.0.2",
 		"dotenv": "^16.4.5",

From 90acb72f206a5ed1ebe92dc3905f395c4590af33 Mon Sep 17 00:00:00 2001
From: Shemy Gan <jennifergan26@gmail.com>
Date: Tue, 19 Nov 2024 21:33:52 -0500
Subject: [PATCH 093/142] - Connect to BE to get infrastructure details

---
 .../src/Pages/Infrastructure/details/index.jsx  | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/Client/src/Pages/Infrastructure/details/index.jsx b/Client/src/Pages/Infrastructure/details/index.jsx
index 40db34b80..c8f8a2220 100644
--- a/Client/src/Pages/Infrastructure/details/index.jsx
+++ b/Client/src/Pages/Infrastructure/details/index.jsx
@@ -5,6 +5,8 @@ import { Stack, Box, Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import CustomGauge from "../../../Components/Charts/CustomGauge";
 import AreaChart from "../../../Components/Charts/AreaChart";
+import { useSelector } from "react-redux";
+import { networkService } from "../../../main";
 import axios from "axios";
 import {
 	TzTick,
@@ -158,15 +160,20 @@ const InfrastructureDetails = () => {
 		{ name: "details", path: `/infrastructure/${monitorId}` },
 	];
 	const [monitor, setMonitor] = useState(null);
+	const { authToken } = useSelector((state) => state.auth);
+	const [dateRange, setDateRange] = useState("day");
 
 	useEffect(() => {
 		const fetchData = async () => {
 			try {
-				const response = await axios.get("http://localhost:5000/api/v1/dummy-data", {
-					headers: {
-						"Content-Type": "application/json",
-						"Cache-Control": "no-cache",
-					},
+				const response = await networkService.getStatsByMonitorId({
+					authToken: authToken,
+					monitorId: monitorId,
+					sortOrder: null,
+					limit: null,
+					dateRange: dateRange,
+					numToDisplay: 50,
+					normalize: true,
 				});
 				setMonitor(response.data.data);
 			} catch (error) {

From 58be0c018bd485e3398fbea10a6c5f8663d6eb11 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 20 Nov 2024 10:37:01 +0800
Subject: [PATCH 094/142] rewrite monitor resolution check, update tests

---
 Server/controllers/monitorController.js       | 18 +++++++-------
 .../controllers/monitorController.test.js     | 24 ++++++++++---------
 2 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/Server/controllers/monitorController.js b/Server/controllers/monitorController.js
index 0615578c4..0866017bf 100644
--- a/Server/controllers/monitorController.js
+++ b/Server/controllers/monitorController.js
@@ -19,7 +19,7 @@ import jwt from "jsonwebtoken";
 import { getTokenFromHeaders } from "../utils/utils.js";
 import logger from "../utils/logger.js";
 import { handleError, handleValidationError } from "./controllerUtils.js";
-import dns from "dns";
+import axios from "axios";
 
 const SERVICE_NAME = "monitorController";
 
@@ -288,18 +288,16 @@ const checkEndpointResolution = async (req, res, next) => {
 	}
 
 	try {
-		let { monitorURL } = req.query;
-		monitorURL = new URL(monitorURL);
-		await new Promise((resolve, reject) => {
-			dns.resolve(monitorURL.hostname, (error) => {
-				if (error) {
-					reject(error);
-				}
-				resolve();
-			});
+		const { monitorURL } = req.query;
+		const parsedUrl = new URL(monitorURL);
+		const response = await axios.get(parsedUrl, {
+			timeout: 5000,
+			validateStatus: () => true,
 		});
 		return res.status(200).json({
 			success: true,
+			code: response.status,
+			statusText: response.statusText,
 			msg: `URL resolved successfully`,
 		});
 	} catch (error) {
diff --git a/Server/tests/controllers/monitorController.test.js b/Server/tests/controllers/monitorController.test.js
index 1074c35b1..1133f6be0 100644
--- a/Server/tests/controllers/monitorController.test.js
+++ b/Server/tests/controllers/monitorController.test.js
@@ -18,7 +18,7 @@ import jwt from "jsonwebtoken";
 import sinon from "sinon";
 import { successMessages } from "../../utils/messages.js";
 import logger from "../../utils/logger.js";
-import dns from "dns";
+import axios from "axios";
 const SERVICE_NAME = "monitorController";
 
 describe("Monitor Controller - getAllMonitors", () => {
@@ -476,38 +476,40 @@ describe("Monitor Controller - createMonitor", () => {
 	});
 });
 
-describe("Monitor Controllor - checkEndpointResolution", () => {
-	let req, res, next, dnsResolveStub;
+describe("Monitor Controller - checkEndpointResolution", () => {
+	let req, res, next, axiosGetStub;
 	beforeEach(() => {
 		req = { query: { monitorURL: "https://example.com" } };
 		res = { status: sinon.stub().returnsThis(), json: sinon.stub() };
 		next = sinon.stub();
-		dnsResolveStub = sinon.stub(dns, "resolve");
+		axiosGetStub = sinon.stub(axios, "get");
 	});
 	afterEach(() => {
-		dnsResolveStub.restore();
+		sinon.restore();
 	});
 	it("should resolve the URL successfully", async () => {
-		dnsResolveStub.callsFake((hostname, callback) => callback(null));
+		axiosGetStub.resolves({ status: 200, statusText: "OK" });
 		await checkEndpointResolution(req, res, next);
 		expect(res.status.calledWith(200)).to.be.true;
 		expect(
 			res.json.calledWith({
 				success: true,
+				code: 200,
+				statusText: "OK",
 				msg: "URL resolved successfully",
 			})
 		).to.be.true;
 		expect(next.called).to.be.false;
 	});
-	it("should return an error if DNS resolution fails", async () => {
-		const dnsError = new Error("DNS resolution failed");
-		dnsError.code = "ENOTFOUND";
-		dnsResolveStub.callsFake((hostname, callback) => callback(dnsError));
+	it("should return an error if endpoint resolution fails", async () => {
+		const axiosError = new Error("resolution failed");
+		axiosError.code = "ENOTFOUND";
+		axiosGetStub.rejects(axiosError);
 		await checkEndpointResolution(req, res, next);
 		expect(next.calledOnce).to.be.true;
 		const errorPassedToNext = next.getCall(0).args[0];
 		expect(errorPassedToNext).to.be.an.instanceOf(Error);
-		expect(errorPassedToNext.message).to.include("DNS resolution failed");
+		expect(errorPassedToNext.message).to.include("resolution failed");
 		expect(errorPassedToNext.code).to.equal("ENOTFOUND");
 		expect(errorPassedToNext.status).to.equal(500);
 	});

From dbe174d171a98f0007f96353ddc615cdca576de4 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 20 Nov 2024 12:09:52 +0800
Subject: [PATCH 095/142] remove dummy from Area Chart

---
 .../src/Components/Charts/AreaChart/data.js   | 59 -------------------
 1 file changed, 59 deletions(-)
 delete mode 100644 Client/src/Components/Charts/AreaChart/data.js

diff --git a/Client/src/Components/Charts/AreaChart/data.js b/Client/src/Components/Charts/AreaChart/data.js
deleted file mode 100644
index 43efd165d..000000000
--- a/Client/src/Components/Charts/AreaChart/data.js
+++ /dev/null
@@ -1,59 +0,0 @@
-const ObjectId = (string) => string;
-const ISODate = (string) => string;
-
-// Helper to generate random percentage between 0.1 and 1.0
-const randomPercent = () => Number((Math.random() * 0.9 + 0.1).toFixed(2));
-
-// Create base timestamp and increment by 5 minutes for each entry
-const baseTime = new Date("2024-11-15T07:00:00.000Z");
-const checks = Array.from({ length: 20 }, (_, index) => {
-	const timestamp = new Date(baseTime.getTime() + index * 5 * 60 * 1000);
-
-	return {
-		_id: ObjectId(`6736f4f449e23954c8b89a${index.toString(16).padStart(2, "0")}`),
-		monitorId: ObjectId("6736e6c2939f02e0ca519465"),
-		status: true,
-		responseTime: Math.floor(Math.random() * 50) + 80, // Random between 80-130ms
-		statusCode: 200,
-		message: "OK",
-		cpu: {
-			physical_core: 0,
-			logical_core: 0,
-			frequency: 0,
-			temperature: 0,
-			free_percent: 0,
-			usage_percent: randomPercent(),
-			_id: ObjectId(`6736f4f449e23954c8b89b${index.toString(16).padStart(2, "0")}`),
-		},
-		memory: {
-			total_bytes: 0,
-			available_bytes: 0,
-			used_bytes: 0,
-			usage_percent: randomPercent(),
-			_id: ObjectId(`6736f4f449e23954c8b89c${index.toString(16).padStart(2, "0")}`),
-		},
-		disk: [
-			{
-				read_speed_bytes: 0,
-				write_speed_bytes: 0,
-				total_bytes: 0,
-				free_bytes: 0,
-				usage_percent: randomPercent(),
-				_id: ObjectId(`6736f4f449e23954c8b89d${index.toString(16).padStart(2, "0")}`),
-			},
-		],
-		host: {
-			os: "",
-			platform: "",
-			kernel_version: "",
-			_id: ObjectId(`6736f4f449e23954c8b89e${index.toString(16).padStart(2, "0")}`),
-		},
-		errors: [],
-		expiry: ISODate(new Date(timestamp.getTime() + 24 * 60 * 60 * 1000).toISOString()),
-		createdAt: ISODate(timestamp.toISOString()),
-		updatedAt: ISODate(timestamp.toISOString()),
-		__v: 0,
-	};
-});
-
-export default checks;

From 8b739558024a7cbabed373018d767241fdbf21b0 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 20 Nov 2024 12:10:25 +0800
Subject: [PATCH 096/142] truncate decimals in tool top

---
 Client/src/Components/Charts/Utils/chartUtils.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/Client/src/Components/Charts/Utils/chartUtils.jsx b/Client/src/Components/Charts/Utils/chartUtils.jsx
index ad673e472..0922d8b7d 100644
--- a/Client/src/Components/Charts/Utils/chartUtils.jsx
+++ b/Client/src/Components/Charts/Utils/chartUtils.jsx
@@ -146,8 +146,8 @@ export const InfrastructureTooltip = ({
 							sx={{ opacity: 0.8 }}
 						>
 							{yIdx >= 0
-								? `${yLabel} ${payload[0].payload[hardwareType][yIdx][metric] * 100}%`
-								: `${yLabel} ${payload[0].payload[hardwareType][metric] * 100}%`}
+								? `${yLabel} ${(payload[0].payload[hardwareType][yIdx][metric] * 100).toFixed(2)}%`
+								: `${yLabel} ${(payload[0].payload[hardwareType][metric] * 100).toFixed(2)}%`}
 						</Typography>
 						<Typography component="span"></Typography>
 					</Stack>

From b1449d3587a38d63bd8c420a8df6797f1fef229c Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 20 Nov 2024 12:11:03 +0800
Subject: [PATCH 097/142] refactor details page to use reduce code duplication,
 caluclate area chart height

---
 .../src/Components/Charts/AreaChart/index.jsx |  11 +-
 .../Pages/Infrastructure/details/index.jsx    | 299 +++++++++---------
 2 files changed, 160 insertions(+), 150 deletions(-)

diff --git a/Client/src/Components/Charts/AreaChart/index.jsx b/Client/src/Components/Charts/AreaChart/index.jsx
index 4aa507940..d05dbb14a 100644
--- a/Client/src/Components/Charts/AreaChart/index.jsx
+++ b/Client/src/Components/Charts/AreaChart/index.jsx
@@ -10,7 +10,7 @@ import {
 import { createGradient } from "../Utils/gradientUtils";
 import PropTypes from "prop-types";
 import { useTheme } from "@mui/material";
-
+import { useId } from "react";
 /**
  * CustomAreaChart component for rendering an area chart with optional gradient and custom ticks.
  *
@@ -83,13 +83,16 @@ const CustomAreaChart = ({
 	gradientStartColor,
 	gradientEndColor,
 	customTooltip,
+	height = "100%",
 }) => {
 	const theme = useTheme();
-	const gradientId = `gradient-${Math.random().toString(36).slice(2, 9)}`;
+	const uniqueId = useId();
+	const gradientId = `gradient-${uniqueId}`;
 	return (
 		<ResponsiveContainer
 			width="100%"
-			height="80%" // FE team HELP!  Why does this overflow if set to 100%?
+			height={height}
+			// FE team HELP!  Why does this overflow if set to 100%?
 		>
 			<AreaChart data={data}>
 				<XAxis
@@ -120,7 +123,6 @@ const CustomAreaChart = ({
 					stroke={strokeColor}
 					fill={gradient === true ? `url(#${gradientId})` : fillColor}
 				/>
-
 				{customTooltip ? (
 					<Tooltip
 						cursor={{ stroke: theme.palette.border.light }}
@@ -149,6 +151,7 @@ CustomAreaChart.propTypes = {
 	gradientStartColor: PropTypes.string,
 	gradientEndColor: PropTypes.string,
 	customTooltip: PropTypes.func,
+	height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 };
 
 export default CustomAreaChart;
diff --git a/Client/src/Pages/Infrastructure/details/index.jsx b/Client/src/Pages/Infrastructure/details/index.jsx
index 40db34b80..100e785c8 100644
--- a/Client/src/Pages/Infrastructure/details/index.jsx
+++ b/Client/src/Pages/Infrastructure/details/index.jsx
@@ -13,6 +13,9 @@ import {
 } from "../../../Components/Charts/Utils/chartUtils";
 import PropTypes from "prop-types";
 
+const BASE_BOX_PADDING_VERTICAL = 4;
+const BASE_BOX_PADDING_HORIZONTAL = 8;
+const TYPOGRAPHY_PADDING = 8;
 /**
  * Converts bytes to gigabytes
  * @param {number} bytes - Number of bytes to convert
@@ -36,21 +39,23 @@ const formatBytes = (bytes) => {
  * Renders a base box with consistent styling
  * @param {Object} props - Component properties
  * @param {React.ReactNode} props.children - Child components to render inside the box
+ * @param {Object} props.sx - Additional styling for the box
  * @returns {React.ReactElement} Styled box component
  */
-const BaseBox = ({ children }) => {
+const BaseBox = ({ children, sx = {} }) => {
 	const theme = useTheme();
 	return (
 		<Box
 			sx={{
 				height: "100%",
-				padding: `${theme.spacing(4)} ${theme.spacing(8)}`,
+				padding: `${theme.spacing(BASE_BOX_PADDING_VERTICAL)} ${theme.spacing(BASE_BOX_PADDING_HORIZONTAL)}`,
 				minWidth: 200,
 				width: 225,
 				backgroundColor: theme.palette.background.main,
 				border: 1,
 				borderStyle: "solid",
 				borderColor: theme.palette.border.light,
+				...sx,
 			}}
 		>
 			{children}
@@ -60,6 +65,7 @@ const BaseBox = ({ children }) => {
 
 BaseBox.propTypes = {
 	children: PropTypes.node.isRequired,
+	sx: PropTypes.object,
 };
 
 /**
@@ -159,6 +165,18 @@ const InfrastructureDetails = () => {
 	];
 	const [monitor, setMonitor] = useState(null);
 
+	// These calculations are needed because ResponsiveContainer
+	// doesn't take padding of parent/siblings into account
+	// when calculating height.
+	const chartContainerHeight = 300;
+	const totalChartContainerPadding =
+		parseInt(theme.spacing(BASE_BOX_PADDING_VERTICAL), 10) * 2;
+	const totalTypographyPadding = parseInt(theme.spacing(TYPOGRAPHY_PADDING), 10) * 2;
+	const areaChartHeight =
+		(chartContainerHeight - totalChartContainerPadding - totalTypographyPadding) * 0.95;
+	// end height calculations
+
+	// Fetch data
 	useEffect(() => {
 		const fetchData = async () => {
 			try {
@@ -176,6 +194,86 @@ const InfrastructureDetails = () => {
 		fetchData();
 	}, []);
 
+	const statBoxConfigs = [
+		{
+			id: 0,
+			heading: "CPU",
+			subHeading: `${monitor?.checks[0]?.cpu?.physical_core} cores`,
+		},
+		{
+			id: 1,
+			heading: "Memory",
+			subHeading: formatBytes(monitor?.checks[0]?.memory?.total_bytes),
+		},
+		{
+			id: 2,
+			heading: "Disk",
+			subHeading: formatBytes(monitor?.checks[0]?.disk[0]?.total_bytes),
+		},
+		{ id: 3, heading: "Uptime", subHeading: "100%" },
+		{
+			id: 4,
+			heading: "Status",
+			subHeading: monitor?.status === true ? "Active" : "Inactive",
+		},
+	];
+
+	const gaugeBoxConfigs = [
+		{
+			type: "memory",
+			value: monitor?.checks[0]?.memory?.usage_percent * 100,
+			heading: "Memory Usage",
+			metricOne: "Used",
+			valueOne: formatBytes(monitor?.checks[0]?.memory?.used_bytes),
+			metricTwo: "Total",
+			valueTwo: formatBytes(monitor?.checks[0]?.memory?.total_bytes),
+		},
+		{
+			type: "cpu",
+			value: monitor?.checks[0]?.cpu?.usage_percent * 100,
+			heading: "CPU Usage",
+			metricOne: "Cores",
+			valueOne: monitor?.checks[0]?.cpu?.physical_core,
+			metricTwo: "Frequency",
+			valueTwo: `${(monitor?.checks[0]?.cpu?.frequency / 1000).toFixed(2)} Ghz`,
+		},
+		...(monitor?.checks[0]?.disk ?? []).map((disk, idx) => ({
+			type: "disk",
+			diskIndex: idx,
+			value: disk.usage_percent * 100,
+			heading: `Disk${idx} usage`,
+			metricOne: "Used",
+			valueOne: formatBytes(disk.total_bytes - disk.free_bytes),
+			metricTwo: "Total",
+			valueTwo: formatBytes(disk.total_bytes),
+		})),
+	];
+
+	const areaChartConfigs = [
+		{
+			type: "memory",
+			dataKey: "memory.usage_percent",
+			heading: "Memory usage",
+			strokeColor: theme.palette.primary.main,
+			yLabel: "Memory Usage",
+		},
+		{
+			type: "cpu",
+			dataKey: "cpu.usage_percent",
+			heading: "CPU usage",
+			strokeColor: theme.palette.success.main,
+			yLabel: "CPU Usage",
+		},
+		...(monitor?.checks?.[0]?.disk?.map((disk, idx) => ({
+			type: "disk",
+			diskIndex: idx,
+			dataKey: `disk[${idx}].usage_percent`,
+			heading: `Disk${idx} usage`,
+			strokeColor: theme.palette.warning.main,
+			yLabel: "Disk Usage",
+		})) || []),
+	];
+
 	return (
 		monitor && (
 			<Box>
@@ -189,64 +287,32 @@ const InfrastructureDetails = () => {
 						direction="row"
 						gap={theme.spacing(8)}
 					>
-						<StatBox
-							heading={"CPU"}
-							subHeading={`${monitor.checks[0].cpu.physical_core} cores`}
-						/>
-						<StatBox
-							heading={"Memory"}
-							subHeading={formatBytes(monitor.checks[0].memory.total_bytes)}
-						/>
-						<StatBox
-							heading={"Disk"}
-							subHeading={formatBytes(monitor.checks[0].disk[0].total_bytes)}
-						/>
-						<StatBox
-							heading={"Uptime"}
-							subHeading={"100%"}
-						/>
-						<StatBox
-							heading={"Status"}
-							subHeading={monitor.status === true ? "Active" : "Inactive"}
-						/>
+						{statBoxConfigs.map((statBox) => (
+							<StatBox
+								key={statBox.id}
+								{...statBox}
+							/>
+						))}
 					</Stack>
 					<Stack
 						direction="row"
 						gap={theme.spacing(8)}
 					>
-						<GaugeBox
-							value={monitor.checks[0].memory.usage_percent * 100}
-							heading={"Memory Usage"}
-							metricOne={"Used"}
-							valueOne={formatBytes(monitor.checks[0].memory.used_bytes)}
-							metricTwo={"Total"}
-							valueTwo={formatBytes(monitor.checks[0].memory.total_bytes)}
-						/>
-						<GaugeBox
-							value={monitor.checks[0].cpu.usage_percent * 100}
-							heading={"CPU Usage"}
-							metricOne={"Cores"}
-							valueOne={monitor.checks[0].cpu.physical_core}
-							metricTwo={"Frequency"}
-							valueTwo={`${(monitor.checks[0].cpu.frequency / 1000).toFixed(2)} Ghz`}
-						/>
-						{monitor.checks[0].disk.map((disk, idx) => {
-							return (
-								<GaugeBox
-									key={disk._id}
-									value={disk.usage_percent * 100}
-									heading={`Disk${idx} usage`}
-									metricOne={"Used"}
-									valueOne={formatBytes(disk.total_bytes - disk.free_bytes)}
-									metricTwo={"Total"}
-									valueTwo={formatBytes(disk.total_bytes)}
-								/>
-							);
-						})}
+						{gaugeBoxConfigs.map((config) => (
+							<GaugeBox
+								key={`${config.type}-${config.diskIndex ?? ""}`}
+								value={config.value}
+								heading={config.heading}
+								metricOne={config.metricOne}
+								valueOne={config.valueOne}
+								metricTwo={config.metricTwo}
+								valueTwo={config.valueTwo}
+							/>
+						))}
 					</Stack>
 					<Stack
 						direction={"row"}
-						height={300} // FE team HELP!
+						height={chartContainerHeight} // FE team HELP!
 						gap={theme.spacing(8)} // FE team HELP!
 						flexWrap="wrap" // //FE team HELP! Better way to do this?
 						sx={{
@@ -256,100 +322,41 @@ const InfrastructureDetails = () => {
 							},
 						}}
 					>
-						<BaseBox>
-							<Typography
-								component="h2"
-								padding={theme.spacing(8)}
-							>
-								Memory usage
-							</Typography>
-							<AreaChart
-								data={monitor?.checks ?? []}
-								dataKey="memory.usage_percent"
-								xKey="createdAt"
-								yKey="memory.usage_percent"
-								customTooltip={({ active, payload, label }) => (
-									<InfrastructureTooltip
-										label={label}
-										yKey="memory.usage_percent"
-										yLabel="Memory Usage"
-										active={active}
-										payload={payload}
-									/>
-								)}
-								xTick={<TzTick />}
-								yTick={<PercentTick />}
-								strokeColor={theme.palette.primary.main}
-								gradient={true}
-								gradientStartColor={theme.palette.primary.main} //FE team HELP!  Not sure what colors to use
-								gradientEndColor="#ffffff" // FE team HELP!
-							/>
-						</BaseBox>
-						<BaseBox>
-							<Typography
-								component="h2"
-								padding={theme.spacing(8)}
-							>
-								CPU usage
-							</Typography>
-							<AreaChart
-								data={monitor?.checks ?? []}
-								dataKey="cpu.usage_percent"
-								xKey="createdAt"
-								yKey="cpu.usage_percent"
-								customTooltip={({ active, payload, label }) => (
-									<InfrastructureTooltip
-										label={label}
-										yKey="cpu.usage_percent"
-										yLabel="CPU Usage"
-										active={active}
-										payload={payload}
-									/>
-								)}
-								xTick={<TzTick />}
-								yTick={<PercentTick />}
-								strokeColor={theme.palette.success.main} // FE team HELP!
-								gradient={true}
-								fill={theme.palette.success.main} // FE team HELP!
-								gradientStartColor={theme.palette.success.main}
-								gradientEndColor="#ffffff"
-							/>
-						</BaseBox>
-						{monitor?.checks?.[0]?.disk?.map((disk, idx) => {
-							// disk is an array of disks, so we need to map over it
-							return (
-								<BaseBox key={disk._id}>
-									<Typography
-										component="h2"
-										padding={theme.spacing(8)}
-									>
-										{`Disk${idx} usage`}
-									</Typography>
-									<AreaChart
-										data={monitor?.checks ?? []}
-										dataKey={`disk[${idx}].usage_percent`}
-										xKey="createdAt"
-										yKey={`disk[${idx}].usage_percent`} // We are looking for the usage_percent of the current disk in the array
-										customTooltip={({ active, payload, label }) => (
-											<InfrastructureTooltip
-												label={label} // label must be a string
-												yKey={`disk.usage_percent`}
-												yLabel="Disk Usage"
-												yIdx={idx}
-												active={active}
-												payload={payload}
-											/>
-										)}
-										xTick={<TzTick />}
-										yTick={<PercentTick />}
-										strokeColor={theme.palette.warning.main}
-										gradient={true}
-										gradientStartColor={theme.palette.warning.main}
-										gradientEndColor="#ffffff"
-									/>
-								</BaseBox>
-							);
-						})}
+						{areaChartConfigs.map((config) => (
+							<BaseBox key={`${config.type}-${config.diskIndex ?? ""}`}>
+								<Typography
+									component="h2"
+									padding={theme.spacing(8)}
+								>
+									{config.heading}
+								</Typography>
+								<AreaChart
+									height={areaChartHeight}
+									data={monitor?.checks ?? []}
+									dataKey={config.dataKey}
+									xKey="createdAt"
+									yKey={config.dataKey}
+									customTooltip={({ active, payload, label }) => (
+										<InfrastructureTooltip
+											label={label}
+											yKey={
+												config.type === "disk" ? "disk.usage_percent" : config.dataKey
+											}
+											yLabel={config.yLabel}
+											yIdx={config.diskIndex}
+											active={active}
+											payload={payload}
+										/>
+									)}
+									xTick={<TzTick />}
+									yTick={<PercentTick />}
+									strokeColor={config.strokeColor}
+									gradient={true}
+									gradientStartColor={config.strokeColor}
+									gradientEndColor="#ffffff"
+								/>
+							</BaseBox>
+						))}
 					</Stack>
 				</Stack>
 			</Box>

From 9bbcaaf156b195c2a65d46a34c261219de33d668 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 20 Nov 2024 12:13:46 +0800
Subject: [PATCH 098/142] memoize calculations in SVG gauge

---
 Client/src/Components/Charts/CustomGauge/index.jsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/Client/src/Components/Charts/CustomGauge/index.jsx b/Client/src/Components/Charts/CustomGauge/index.jsx
index 387efc64f..f3ad15b0b 100644
--- a/Client/src/Components/Charts/CustomGauge/index.jsx
+++ b/Client/src/Components/Charts/CustomGauge/index.jsx
@@ -1,5 +1,5 @@
 import { useTheme } from "@emotion/react";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useMemo } from "react";
 import { Box, Typography } from "@mui/material";
 import PropTypes from "prop-types";
 import "./index.css";
@@ -31,9 +31,14 @@ const CustomGauge = ({
 	strokeWidth = 15,
 }) => {
 	// Calculate the length of the stroke for the circle
-	const circumference = 2 * Math.PI * radius;
-	const totalSize = radius * 2 + strokeWidth * 2; // This is the total size of the SVG, needed for the viewBox
-	const strokeLength = (progress / 100) * circumference;
+	const { circumference, totalSize, strokeLength } = useMemo(
+		() => ({
+			circumference: 2 * Math.PI * radius,
+			totalSize: radius * 2 + strokeWidth * 2,
+			strokeLength: (progress / 100) * (2 * Math.PI * radius),
+		}),
+		[radius, strokeWidth, progress]
+	);
 	const [offset, setOffset] = useState(circumference);
 	const theme = useTheme();
 

From 1f5b5dd612237dbe6df926c31195d5e3ea9e41fe Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 20 Nov 2024 12:16:27 +0800
Subject: [PATCH 099/142] details -> Details

---
 Client/src/App.jsx                                             | 2 +-
 Client/src/Pages/Infrastructure/{details => Details}/index.jsx | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename Client/src/Pages/Infrastructure/{details => Details}/index.jsx (100%)

diff --git a/Client/src/App.jsx b/Client/src/App.jsx
index 03c406a6c..772c1aa45 100644
--- a/Client/src/App.jsx
+++ b/Client/src/App.jsx
@@ -39,7 +39,7 @@ import { getAppSettings } from "./Features/Settings/settingsSlice";
 import { logger } from "./Utils/Logger"; // Import the logger
 import { networkService } from "./main";
 import { Infrastructure } from "./Pages/Infrastructure";
-import InfrastructureDetails from "./Pages/Infrastructure/details";
+import InfrastructureDetails from "./Pages/Infrastructure/Details";
 function App() {
 	const AdminCheckedRegister = withAdminCheck(Register);
 	const MonitorsWithAdminProp = withAdminProp(Monitors);
diff --git a/Client/src/Pages/Infrastructure/details/index.jsx b/Client/src/Pages/Infrastructure/Details/index.jsx
similarity index 100%
rename from Client/src/Pages/Infrastructure/details/index.jsx
rename to Client/src/Pages/Infrastructure/Details/index.jsx

From 8bbb0012db706ff707bed7daf05c688f708bf020 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 20 Nov 2024 12:42:06 +0800
Subject: [PATCH 100/142] Add monitor information at top of page

---
 .../Pages/Infrastructure/Details/index.jsx    | 29 ++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/Client/src/Pages/Infrastructure/Details/index.jsx b/Client/src/Pages/Infrastructure/Details/index.jsx
index 100e785c8..4fb547a5a 100644
--- a/Client/src/Pages/Infrastructure/Details/index.jsx
+++ b/Client/src/Pages/Infrastructure/Details/index.jsx
@@ -5,6 +5,9 @@ import { Stack, Box, Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import CustomGauge from "../../../Components/Charts/CustomGauge";
 import AreaChart from "../../../Components/Charts/AreaChart";
+import PulseDot from "../../../Components/Animated/PulseDot";
+import useUtils from "../../Monitors/utils";
+import { formatDurationRounded, formatDurationSplit } from "../../../Utils/timeUtils";
 import axios from "axios";
 import {
 	TzTick,
@@ -164,7 +167,7 @@ const InfrastructureDetails = () => {
 		{ name: "details", path: `/infrastructure/${monitorId}` },
 	];
 	const [monitor, setMonitor] = useState(null);
-
+	const { statusColor, determineState } = useUtils();
 	// These calculations are needed because ResponsiveContainer
 	// doesn't take padding of parent/siblings into account
 	// when calculating height.
@@ -283,6 +286,30 @@ const InfrastructureDetails = () => {
 					gap={theme.spacing(10)}
 					mt={theme.spacing(10)}
 				>
+					<Stack
+						direction="row"
+						gap={theme.spacing(8)}
+					>
+						<Box>
+							<PulseDot color={statusColor[determineState(monitor)]} />
+						</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>
+					</Stack>
 					<Stack
 						direction="row"
 						gap={theme.spacing(8)}

From 11cc2833cf478b71dd3a42b73609743ce748ca6e Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 20 Nov 2024 12:55:58 +0800
Subject: [PATCH 101/142] extract tooltip percentage formatting

---
 .../Components/Charts/Utils/chartUtils.jsx    | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/Client/src/Components/Charts/Utils/chartUtils.jsx b/Client/src/Components/Charts/Utils/chartUtils.jsx
index 0922d8b7d..043203525 100644
--- a/Client/src/Components/Charts/Utils/chartUtils.jsx
+++ b/Client/src/Components/Charts/Utils/chartUtils.jsx
@@ -74,6 +74,22 @@ PercentTick.propTypes = {
 	index: PropTypes.number,
 };
 
+/**
+ * Converts a decimal value to a formatted percentage string.
+ *
+ * @param {number} value - The decimal value to convert (e.g., 0.75)
+ * @returns {string} Formatted percentage string (e.g., "75.00%") or original input if not a number
+ *
+ * @example
+ * getFormattedPercentage(0.7543)   // Returns "75.43%"
+ * getFormattedPercentage(1)        // Returns "100.00%"
+ * getFormattedPercentage("test")   // Returns "test"
+ */
+const getFormattedPercentage = (value) => {
+	if (typeof value !== "number") return value;
+	return `${(value * 100).toFixed(2)}.%`;
+};
+
 /**
  * Custom tooltip component for displaying infrastructure data.
  *
@@ -146,8 +162,8 @@ export const InfrastructureTooltip = ({
 							sx={{ opacity: 0.8 }}
 						>
 							{yIdx >= 0
-								? `${yLabel} ${(payload[0].payload[hardwareType][yIdx][metric] * 100).toFixed(2)}%`
-								: `${yLabel} ${(payload[0].payload[hardwareType][metric] * 100).toFixed(2)}%`}
+								? `${yLabel} ${getFormattedPercentage(payload[0].payload[hardwareType][yIdx][metric])}`
+								: `${yLabel} ${getFormattedPercentage(payload[0].payload[hardwareType][metric])}`}
 						</Typography>
 						<Typography component="span"></Typography>
 					</Stack>

From 5dcce33b6ce8c4ceed7137a2d2509434586d7ecc Mon Sep 17 00:00:00 2001
From: Mend Renovate <bot@renovateapp.com>
Date: Wed, 20 Nov 2024 09:29:22 +0000
Subject: [PATCH 102/142] fix(deps): update emotion monorepo to v11.13.5

---
 Client/package-lock.json | 56 ++++++++++++++++++++--------------------
 1 file changed, 28 insertions(+), 28 deletions(-)

diff --git a/Client/package-lock.json b/Client/package-lock.json
index 095a013f7..ead2bb529 100644
--- a/Client/package-lock.json
+++ b/Client/package-lock.json
@@ -362,16 +362,16 @@
 			}
 		},
 		"node_modules/@emotion/babel-plugin": {
-			"version": "11.12.0",
-			"resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.12.0.tgz",
-			"integrity": "sha512-y2WQb+oP8Jqvvclh8Q55gLUyb7UFvgv7eJfsj7td5TToBrIUtPay2kMrZi4xjq9qw2vD0ZR5fSho0yqoFgX7Rw==",
+			"version": "11.13.5",
+			"resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz",
+			"integrity": "sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==",
 			"license": "MIT",
 			"dependencies": {
 				"@babel/helper-module-imports": "^7.16.7",
 				"@babel/runtime": "^7.18.3",
 				"@emotion/hash": "^0.9.2",
 				"@emotion/memoize": "^0.9.0",
-				"@emotion/serialize": "^1.2.0",
+				"@emotion/serialize": "^1.3.3",
 				"babel-plugin-macros": "^3.1.0",
 				"convert-source-map": "^1.5.0",
 				"escape-string-regexp": "^4.0.0",
@@ -381,14 +381,14 @@
 			}
 		},
 		"node_modules/@emotion/cache": {
-			"version": "11.13.1",
-			"resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.13.1.tgz",
-			"integrity": "sha512-iqouYkuEblRcXmylXIwwOodiEK5Ifl7JcX7o6V4jI3iW4mLXX3dmt5xwBtIkJiQEXFAI+pC8X0i67yiPkH9Ucw==",
+			"version": "11.13.5",
+			"resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.13.5.tgz",
+			"integrity": "sha512-Z3xbtJ+UcK76eWkagZ1onvn/wAVb1GOMuR15s30Fm2wrMgC7jzpnO2JZXr4eujTTqoQFUrZIw/rT0c6Zzjca1g==",
 			"license": "MIT",
 			"dependencies": {
 				"@emotion/memoize": "^0.9.0",
 				"@emotion/sheet": "^1.4.0",
-				"@emotion/utils": "^1.4.0",
+				"@emotion/utils": "^1.4.2",
 				"@emotion/weak-memoize": "^0.4.0",
 				"stylis": "4.2.0"
 			}
@@ -415,17 +415,17 @@
 			"license": "MIT"
 		},
 		"node_modules/@emotion/react": {
-			"version": "11.13.3",
-			"resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.13.3.tgz",
-			"integrity": "sha512-lIsdU6JNrmYfJ5EbUCf4xW1ovy5wKQ2CkPRM4xogziOxH1nXxBSjpC9YqbFAP7circxMfYp+6x676BqWcEiixg==",
+			"version": "11.13.5",
+			"resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.13.5.tgz",
+			"integrity": "sha512-6zeCUxUH+EPF1s+YF/2hPVODeV/7V07YU5x+2tfuRL8MdW6rv5vb2+CBEGTGwBdux0OIERcOS+RzxeK80k2DsQ==",
 			"license": "MIT",
 			"dependencies": {
 				"@babel/runtime": "^7.18.3",
-				"@emotion/babel-plugin": "^11.12.0",
-				"@emotion/cache": "^11.13.0",
-				"@emotion/serialize": "^1.3.1",
+				"@emotion/babel-plugin": "^11.13.5",
+				"@emotion/cache": "^11.13.5",
+				"@emotion/serialize": "^1.3.3",
 				"@emotion/use-insertion-effect-with-fallbacks": "^1.1.0",
-				"@emotion/utils": "^1.4.0",
+				"@emotion/utils": "^1.4.2",
 				"@emotion/weak-memoize": "^0.4.0",
 				"hoist-non-react-statics": "^3.3.1"
 			},
@@ -439,15 +439,15 @@
 			}
 		},
 		"node_modules/@emotion/serialize": {
-			"version": "1.3.2",
-			"resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.2.tgz",
-			"integrity": "sha512-grVnMvVPK9yUVE6rkKfAJlYZgo0cu3l9iMC77V7DW6E1DUIrU68pSEXRmFZFOFB1QFo57TncmOcvcbMDWsL4yA==",
+			"version": "1.3.3",
+			"resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.3.tgz",
+			"integrity": "sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==",
 			"license": "MIT",
 			"dependencies": {
 				"@emotion/hash": "^0.9.2",
 				"@emotion/memoize": "^0.9.0",
 				"@emotion/unitless": "^0.10.0",
-				"@emotion/utils": "^1.4.1",
+				"@emotion/utils": "^1.4.2",
 				"csstype": "^3.0.2"
 			}
 		},
@@ -458,17 +458,17 @@
 			"license": "MIT"
 		},
 		"node_modules/@emotion/styled": {
-			"version": "11.13.0",
-			"resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.13.0.tgz",
-			"integrity": "sha512-tkzkY7nQhW/zC4hztlwucpT8QEZ6eUzpXDRhww/Eej4tFfO0FxQYWRyg/c5CCXa4d/f174kqeXYjuQRnhzf6dA==",
+			"version": "11.13.5",
+			"resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.13.5.tgz",
+			"integrity": "sha512-gnOQ+nGLPvDXgIx119JqGalys64lhMdnNQA9TMxhDA4K0Hq5+++OE20Zs5GxiCV9r814xQ2K5WmtofSpHVW6BQ==",
 			"license": "MIT",
 			"dependencies": {
 				"@babel/runtime": "^7.18.3",
-				"@emotion/babel-plugin": "^11.12.0",
+				"@emotion/babel-plugin": "^11.13.5",
 				"@emotion/is-prop-valid": "^1.3.0",
-				"@emotion/serialize": "^1.3.0",
+				"@emotion/serialize": "^1.3.3",
 				"@emotion/use-insertion-effect-with-fallbacks": "^1.1.0",
-				"@emotion/utils": "^1.4.0"
+				"@emotion/utils": "^1.4.2"
 			},
 			"peerDependencies": {
 				"@emotion/react": "^11.0.0-rc.0",
@@ -496,9 +496,9 @@
 			}
 		},
 		"node_modules/@emotion/utils": {
-			"version": "1.4.1",
-			"resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.1.tgz",
-			"integrity": "sha512-BymCXzCG3r72VKJxaYVwOXATqXIZ85cuvg0YOUDxMGNrKc1DJRZk8MgV5wyXRyEayIMd4FuXJIUgTBXvDNW5cA==",
+			"version": "1.4.2",
+			"resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.2.tgz",
+			"integrity": "sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==",
 			"license": "MIT"
 		},
 		"node_modules/@emotion/weak-memoize": {

From e239a72b874420f19a091832e78d5a4bb82eb167 Mon Sep 17 00:00:00 2001
From: Shemy Gan <jennifergan26@gmail.com>
Date: Wed, 20 Nov 2024 08:59:06 -0500
Subject: [PATCH 103/142] - cleanup

---
 Client/src/Pages/Infrastructure/details/index.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/Client/src/Pages/Infrastructure/details/index.jsx b/Client/src/Pages/Infrastructure/details/index.jsx
index c8f8a2220..63daeddb6 100644
--- a/Client/src/Pages/Infrastructure/details/index.jsx
+++ b/Client/src/Pages/Infrastructure/details/index.jsx
@@ -7,7 +7,6 @@ import CustomGauge from "../../../Components/Charts/CustomGauge";
 import AreaChart from "../../../Components/Charts/AreaChart";
 import { useSelector } from "react-redux";
 import { networkService } from "../../../main";
-import axios from "axios";
 import {
 	TzTick,
 	PercentTick,

From 307f13dae355760b18a0df240790a8c9af0fc3e4 Mon Sep 17 00:00:00 2001
From: Mend Renovate <bot@renovateapp.com>
Date: Wed, 20 Nov 2024 14:15:06 +0000
Subject: [PATCH 104/142] fix(deps): update dependency bullmq to v5.28.1

---
 Server/package-lock.json | 8 ++++----
 Server/package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/Server/package-lock.json b/Server/package-lock.json
index 68510c236..99166dac6 100644
--- a/Server/package-lock.json
+++ b/Server/package-lock.json
@@ -11,7 +11,7 @@
 			"dependencies": {
 				"axios": "^1.7.2",
 				"bcrypt": "^5.1.1",
-				"bullmq": "5.28.0",
+				"bullmq": "5.28.1",
 				"cors": "^2.8.5",
 				"dockerode": "4.0.2",
 				"dotenv": "^16.4.5",
@@ -1217,9 +1217,9 @@
 			}
 		},
 		"node_modules/bullmq": {
-			"version": "5.28.0",
-			"resolved": "https://registry.npmjs.org/bullmq/-/bullmq-5.28.0.tgz",
-			"integrity": "sha512-HyYr6bfbBuzfyUvRkP6Ux1Zrv2eZcM4zXMl90Q7oneORp3jKnXYyqjCewJGAoo4PqKyE4TWCcdUnFkdxAzysng==",
+			"version": "5.28.1",
+			"resolved": "https://registry.npmjs.org/bullmq/-/bullmq-5.28.1.tgz",
+			"integrity": "sha512-iSoqziPLKH//mmoc4Aj3/opTmk1PgFdITwUrx/wDqrTxfBRjnTGInsu129LCEY6d+SmhZWnA9PYU6ciX+NT64A==",
 			"license": "MIT",
 			"dependencies": {
 				"cron-parser": "^4.6.0",
diff --git a/Server/package.json b/Server/package.json
index 44a8947d7..0212dbd13 100644
--- a/Server/package.json
+++ b/Server/package.json
@@ -14,7 +14,7 @@
 	"dependencies": {
 		"axios": "^1.7.2",
 		"bcrypt": "^5.1.1",
-		"bullmq": "5.28.0",
+		"bullmq": "5.28.1",
 		"cors": "^2.8.5",
 		"dockerode": "4.0.2",
 		"dotenv": "^16.4.5",

From 3053d632c6cb5adbf5562fedf18b58b678c4213a Mon Sep 17 00:00:00 2001
From: Shemy Gan <jennifergan26@gmail.com>
Date: Wed, 20 Nov 2024 14:20:12 -0500
Subject: [PATCH 105/142] - extend field class instead

---
 Client/src/Components/Inputs/Field/index.css | 7 ++-----
 Client/src/Components/Inputs/Field/index.jsx | 6 +++---
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/Client/src/Components/Inputs/Field/index.css b/Client/src/Components/Inputs/Field/index.css
index 33196b3b9..940969c9e 100644
--- a/Client/src/Components/Inputs/Field/index.css
+++ b/Client/src/Components/Inputs/Field/index.css
@@ -2,12 +2,9 @@
 	min-width: var(--env-var-width-3);
 }
 
-.field-infrastructure-alert {
+.field-infrastructure-alert{
 	max-width: var(--env-var-width-4);
-}
-
-.field-infrastructure-alert .MuiInputBase-root:has(input) {
-	height: var(--env-var-height-2);
+	min-width: unset;
 }
 
 .field h3.MuiTypography-root,
diff --git a/Client/src/Components/Inputs/Field/index.jsx b/Client/src/Components/Inputs/Field/index.jsx
index d1eab532d..6409321fe 100644
--- a/Client/src/Components/Inputs/Field/index.jsx
+++ b/Client/src/Components/Inputs/Field/index.jsx
@@ -57,7 +57,7 @@ const Field = forwardRef(
 		return (
 			<Stack
 				gap={theme.spacing(2)}
-				className={`${className ?? `field field-${type}`}`}
+				className={`field field-${type} ${className}`}
 				sx={{
 					"& fieldset": {
 						borderColor: theme.palette.border.dark,
@@ -186,11 +186,11 @@ const Field = forwardRef(
 						),
 					}}
 				/>
-				{ error && (
+				{error && (
 					<Typography
 						component="span"
 						className="input-error"
-						hidden={className? true: false}						
+						hidden={className ? true : false}
 						color={theme.palette.error.main}
 						mt={theme.spacing(2)}
 						sx={{

From a3adb80a6eebe4842481fee39a19e77ad43aed80 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Thu, 21 Nov 2024 12:15:12 +0800
Subject: [PATCH 106/142] add className to list of class names instead of
 turning off default classes, add hideErrorText prop to hide errors for
 thresholds

---
 Client/src/Components/Inputs/Field/index.jsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/Client/src/Components/Inputs/Field/index.jsx b/Client/src/Components/Inputs/Field/index.jsx
index d1eab532d..eb8251c03 100644
--- a/Client/src/Components/Inputs/Field/index.jsx
+++ b/Client/src/Components/Inputs/Field/index.jsx
@@ -46,7 +46,8 @@ const Field = forwardRef(
 			error,
 			disabled,
 			hidden,
-			className
+			className,
+			hideErrorText = false,
 		},
 		ref
 	) => {
@@ -57,7 +58,7 @@ const Field = forwardRef(
 		return (
 			<Stack
 				gap={theme.spacing(2)}
-				className={`${className ?? `field field-${type}`}`}
+				className={`${className} field field-${type}`}
 				sx={{
 					"& fieldset": {
 						borderColor: theme.palette.border.dark,
@@ -186,11 +187,11 @@ const Field = forwardRef(
 						),
 					}}
 				/>
-				{ error && (
+				{error && (
 					<Typography
 						component="span"
 						className="input-error"
-						hidden={className? true: false}						
+						hidden={hideErrorText}
 						color={theme.palette.error.main}
 						mt={theme.spacing(2)}
 						sx={{
@@ -225,7 +226,8 @@ Field.propTypes = {
 	error: PropTypes.string,
 	disabled: PropTypes.bool,
 	hidden: PropTypes.bool,
-	className: PropTypes.string
+	className: PropTypes.string,
+	showErrorText: PropTypes.bool,
 };
 
 export default Field;

From 36d2a0aa85da8592721c46919d71ba73d9c4518c Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Thu, 21 Nov 2024 12:16:14 +0800
Subject: [PATCH 107/142] set min-width to 0 for infrascructure input fields to
 override default min-width rather than turning off class entirely

---
 Client/src/Components/Inputs/Field/index.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/Client/src/Components/Inputs/Field/index.css b/Client/src/Components/Inputs/Field/index.css
index 33196b3b9..f669847fc 100644
--- a/Client/src/Components/Inputs/Field/index.css
+++ b/Client/src/Components/Inputs/Field/index.css
@@ -3,6 +3,7 @@
 }
 
 .field-infrastructure-alert {
+	min-width: 0;
 	max-width: var(--env-var-width-4);
 }
 

From 692c79024c0902989f02ea98bfc5ba8df23f0c18 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Thu, 21 Nov 2024 12:16:46 +0800
Subject: [PATCH 108/142] Add hideErrorText prop to CustomThreshold

---
 .../CreateMonitor/CustomThreshold/index.jsx   | 116 +++++++++---------
 1 file changed, 58 insertions(+), 58 deletions(-)

diff --git a/Client/src/Pages/Infrastructure/CreateMonitor/CustomThreshold/index.jsx b/Client/src/Pages/Infrastructure/CreateMonitor/CustomThreshold/index.jsx
index 3cdde1bdb..3b664eb5d 100644
--- a/Client/src/Pages/Infrastructure/CreateMonitor/CustomThreshold/index.jsx
+++ b/Client/src/Pages/Infrastructure/CreateMonitor/CustomThreshold/index.jsx
@@ -4,9 +4,8 @@ import Checkbox from "../../../../Components/Inputs/Checkbox";
 import { useTheme } from "@emotion/react";
 import PropTypes from "prop-types";
 
-
 /**
- * `CustomThreshold` is a functional React component that displays a 
+ * `CustomThreshold` is a functional React component that displays a
  * group of CheckBox with a label and its correspondant threshold input field.
  *
  * @param {{ checkboxId: any; checkboxLabel: any; onCheckboxChange: any; fieldId: any; onFieldChange: any; onFieldBlur: any; alertUnit: any; infrastructureMonitor: any; errors: any; }} param0
@@ -20,64 +19,65 @@ import PropTypes from "prop-types";
  * @param {object} param0.infrastructureMonitor the form object of the create infrastrcuture monitor page
  * @param {object} param0.errors the object that holds all the errors of the form page
  * @returns A compound React component that renders the custom threshold alert section
- * 
+ *
  */
 
 export const CustomThreshold = ({
-    checkboxId,
-    checkboxLabel,
-    onCheckboxChange,
-    fieldId,		
-    onFieldChange,
-    onFieldBlur,
-    alertUnit,
-    infrastructureMonitor,
-    errors
-}) => 
-    {
-        const theme  = useTheme();
-        return (
-    <Stack
-        direction={"row"}
-        sx={{
-            width: "50%",
-            justifyContent: "space-between",
-            flexWrap: "wrap"         
-        }}
-    >
-        <Box>
-            <Checkbox
-                id={checkboxId}
-                label={checkboxLabel}
-                isChecked={infrastructureMonitor[checkboxId]}
-                onChange={onCheckboxChange}
-            />
-        </Box>
-        <Stack
-            direction={"row"}
-            sx={{
-                justifyContent: "flex-end",
-            }}
-        >
-            <Field
-                type="number"
-                className="field-infrastructure-alert"
-                id={fieldId}
-                value={infrastructureMonitor[fieldId]}
-                onBlur={onFieldBlur}
-                onChange={onFieldChange}
-                error={errors[fieldId]}
-                disabled={!infrastructureMonitor[checkboxId]}
-            ></Field>
-            <Typography
-                component="p"
-                m={theme.spacing(3)}
-            >
-                {alertUnit}
-            </Typography>
-        </Stack>
-    </Stack>
-)}
+	checkboxId,
+	checkboxLabel,
+	onCheckboxChange,
+	fieldId,
+	onFieldChange,
+	onFieldBlur,
+	alertUnit,
+	infrastructureMonitor,
+	errors,
+}) => {
+	const theme = useTheme();
+	return (
+		<Stack
+			direction={"row"}
+			sx={{
+				width: "50%",
+				justifyContent: "space-between",
+				flexWrap: "wrap",
+			}}
+		>
+			<Box>
+				<Checkbox
+					id={checkboxId}
+					label={checkboxLabel}
+					isChecked={infrastructureMonitor[checkboxId]}
+					onChange={onCheckboxChange}
+				/>
+			</Box>
+			<Stack
+				direction={"row"}
+				sx={{
+					justifyContent: "flex-end",
+				}}
+			>
+				<Field
+					type="number"
+					className="field-infrastructure-alert"
+					id={fieldId}
+					value={infrastructureMonitor[fieldId]}
+					onBlur={onFieldBlur}
+					onChange={onFieldChange}
+					error={errors[fieldId]}
+					disabled={!infrastructureMonitor[checkboxId]}
+					hideErrorText={true}
+				></Field>
+				<Typography
+					component="p"
+					m={theme.spacing(3)}
+				>
+					{alertUnit}
+				</Typography>
+			</Stack>
+		</Stack>
+	);
+};
 
 CustomThreshold.propTypes = {
 	checkboxId: PropTypes.string.isRequired,
@@ -89,4 +89,4 @@ CustomThreshold.propTypes = {
 	alertUnit: PropTypes.string.isRequired,
 	infrastructureMonitor: PropTypes.object.isRequired,
 	errors: PropTypes.object.isRequired,
-};
\ No newline at end of file
+};

From 992565ff7c152611d8e5916f885607c9f2e56abd Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Thu, 21 Nov 2024 12:25:23 +0800
Subject: [PATCH 109/142] update JSdoc

---
 Client/src/Components/Inputs/Field/index.jsx | 40 ++++++++++++--------
 1 file changed, 24 insertions(+), 16 deletions(-)

diff --git a/Client/src/Components/Inputs/Field/index.jsx b/Client/src/Components/Inputs/Field/index.jsx
index eb8251c03..760547e4f 100644
--- a/Client/src/Components/Inputs/Field/index.jsx
+++ b/Client/src/Components/Inputs/Field/index.jsx
@@ -7,23 +7,31 @@ import Visibility from "@mui/icons-material/Visibility";
 import "./index.css";
 
 /**
+ * Field component for rendering various types of input fields with customizable properties
+ *
  * @param {Object} props
- * @param {string} [props.type] - Type of input field (e.g., 'text', 'password').
- * @param {string} props.id - ID of the input field.
- * @param {string} props.name - Name of the input field.
- * @param {string} [props.label] - Label for the input field.
- * @param {boolean} [props.https] - Indicates if it should display http or https.
- * @param {boolean} [props.isRequired] - Indicates if the field is required, will display a red asterisk.
- * @param {boolean} [props.isOptional] - Indicates if the field is optional, will display optional text.
- * @param {string} [props.optionalLabel] - Optional label for the input field.
- * @param {string} [props.autoComplete] - Autocomplete value for the input field.
+ * @param {string} [props.type='text'] - Type of input field (text, password, url, email, description, number).
+ * @param {string} props.id - Unique identifier for the input field.
+ * @param {string} props.name - Name attribute for the input field.
+ * @param {string} [props.label] - Label text displayed above the input field.
+ * @param {boolean} [props.https=true] - For URL type, determines whether to show https:// or http://.
+ * @param {boolean} [props.isRequired=false] - Displays a red asterisk if the field is required.
+ * @param {boolean} [props.isOptional=false] - Displays an optional label next to the field.
+ * @param {string} [props.optionalLabel='(optional)'] - Custom text for optional label.
+ * @param {string} [props.autoComplete] - Autocomplete attribute for the input.
  * @param {string} [props.placeholder] - Placeholder text for the input field.
- * @param {string} props.value - Value of the input field.
- * @param {function} props.onChange - Function called on input change.
- * @param {string} [props.error] - Error message to display for the input field.
- * @param {boolean} [props.disabled] - Indicates if the input field is disabled.
- * @param {boolean} [props.hidden] - Indicates if the input field is hidden.
- * @param {React.Ref} [ref] - Ref forwarded to the underlying `TextField` component. Allows for direct interactions such as focusing.
+ * @param {string} props.value - Current value of the input field.
+ * @param {function} props.onChange - Callback function triggered on input value change.
+ * @param {function} [props.onBlur] - Callback function triggered when input loses focus.
+ * @param {function} [props.onInput] - Callback function triggered on input event.
+ * @param {string} [props.error] - Error message to display below the input field.
+ * @param {boolean} [props.disabled=false] - Disables the input field if true.
+ * @param {boolean} [props.hidden=false] - Hides the entire input field if true.
+ * @param {string} [props.className] - Additional CSS class names for the input container.
+ * @param {boolean} [props.hideErrorText=false] - Hides the error message if true.
+ * @param {React.Ref} [ref] - Ref forwarded to the underlying TextField component.
+ *
+ * @returns {React.ReactElement} Rendered input field component
  */
 
 const Field = forwardRef(
@@ -227,7 +235,7 @@ Field.propTypes = {
 	disabled: PropTypes.bool,
 	hidden: PropTypes.bool,
 	className: PropTypes.string,
-	showErrorText: PropTypes.bool,
+	hideErrorText: PropTypes.bool,
 };
 
 export default Field;

From 2ed22043eac05160b5927cb6c45e071af9c0edac Mon Sep 17 00:00:00 2001
From: Mend Renovate <bot@renovateapp.com>
Date: Thu, 21 Nov 2024 19:34:32 +0000
Subject: [PATCH 110/142] fix(deps): update material-ui monorepo to v7.22.3

---
 Client/package-lock.json | 22 +++++++++++-----------
 Client/package.json      |  4 ++--
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/Client/package-lock.json b/Client/package-lock.json
index ead2bb529..38c9d6c7d 100644
--- a/Client/package-lock.json
+++ b/Client/package-lock.json
@@ -15,8 +15,8 @@
 				"@mui/lab": "^5.0.0-alpha.170",
 				"@mui/material": "^5.16.7",
 				"@mui/x-charts": "^7.5.1",
-				"@mui/x-data-grid": "7.22.2",
-				"@mui/x-date-pickers": "7.22.2",
+				"@mui/x-data-grid": "7.22.3",
+				"@mui/x-date-pickers": "7.22.3",
 				"@reduxjs/toolkit": "2.3.0",
 				"axios": "^1.7.4",
 				"chart.js": "^4.4.3",
@@ -1400,9 +1400,9 @@
 			}
 		},
 		"node_modules/@mui/x-charts": {
-			"version": "7.22.2",
-			"resolved": "https://registry.npmjs.org/@mui/x-charts/-/x-charts-7.22.2.tgz",
-			"integrity": "sha512-0Y2du4Ed7gOT53l8vVJ4vKT+Jz4Dh/iHnLy8TtL3+XhbPH9Ndu9Q30WwyyzOn84yt37hSUru/njQ1BWaSvVPHw==",
+			"version": "7.22.3",
+			"resolved": "https://registry.npmjs.org/@mui/x-charts/-/x-charts-7.22.3.tgz",
+			"integrity": "sha512-w23+AwIK86bpNWkuHewyQwOKi1wYbLDzrvUEqvZ9KVYzZvnqpJmbTKideX1pLVgSNt0On8NDXytzCntV48Nobw==",
 			"license": "MIT",
 			"dependencies": {
 				"@babel/runtime": "^7.25.7",
@@ -1458,9 +1458,9 @@
 			}
 		},
 		"node_modules/@mui/x-data-grid": {
-			"version": "7.22.2",
-			"resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-7.22.2.tgz",
-			"integrity": "sha512-yfy2s5A6tbajQZiEdsba49T4FYb9F0WPrzbbG30dl1+sIiX4ZRX7ma44UIDGPZrsZv8xkkE+p8qeJxZ7OaMteA==",
+			"version": "7.22.3",
+			"resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-7.22.3.tgz",
+			"integrity": "sha512-O6kBf6yt/GkOcWjHca5xWN10qBQ/MkITvJmBuIOtX+LH7YtOAriMgD2zkhNbXxHChi7QdEud3bNC3jw5RLRVCA==",
 			"license": "MIT",
 			"dependencies": {
 				"@babel/runtime": "^7.25.7",
@@ -1495,9 +1495,9 @@
 			}
 		},
 		"node_modules/@mui/x-date-pickers": {
-			"version": "7.22.2",
-			"resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-7.22.2.tgz",
-			"integrity": "sha512-1KHSlIlnSoY3oHm820By8X344pIdGYqPvCCvfVHrEeeIQ/pHdxDD8tjZFWkFl4Jgm9oVFK90fMcqNZAzc+WaCw==",
+			"version": "7.22.3",
+			"resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-7.22.3.tgz",
+			"integrity": "sha512-shNp92IrST5BiVy2f4jbrmRaD32QhyUthjh1Oexvpcn0v6INyuWgxfodoTi5ZCnE5Ue5UVFSs4R9Xre0UbJ5DQ==",
 			"license": "MIT",
 			"dependencies": {
 				"@babel/runtime": "^7.25.7",
diff --git a/Client/package.json b/Client/package.json
index a13ee09ae..6a7d436a3 100644
--- a/Client/package.json
+++ b/Client/package.json
@@ -18,8 +18,8 @@
 		"@mui/lab": "^5.0.0-alpha.170",
 		"@mui/material": "^5.16.7",
 		"@mui/x-charts": "^7.5.1",
-		"@mui/x-data-grid": "7.22.2",
-		"@mui/x-date-pickers": "7.22.2",
+		"@mui/x-data-grid": "7.22.3",
+		"@mui/x-date-pickers": "7.22.3",
 		"@reduxjs/toolkit": "2.3.0",
 		"axios": "^1.7.4",
 		"chart.js": "^4.4.3",

From b8d391060d2c9e610a293eb0a777089630726411 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Fri, 22 Nov 2024 09:18:15 +0800
Subject: [PATCH 111/142] min-width 0 -> min-width unset, correct class name
 order

---
 Client/src/Components/Inputs/Field/index.css | 2 +-
 Client/src/Components/Inputs/Field/index.jsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/Client/src/Components/Inputs/Field/index.css b/Client/src/Components/Inputs/Field/index.css
index f669847fc..8279a79ab 100644
--- a/Client/src/Components/Inputs/Field/index.css
+++ b/Client/src/Components/Inputs/Field/index.css
@@ -3,7 +3,7 @@
 }
 
 .field-infrastructure-alert {
-	min-width: 0;
+	min-width: unset;
 	max-width: var(--env-var-width-4);
 }
 
diff --git a/Client/src/Components/Inputs/Field/index.jsx b/Client/src/Components/Inputs/Field/index.jsx
index 760547e4f..bbc28eac7 100644
--- a/Client/src/Components/Inputs/Field/index.jsx
+++ b/Client/src/Components/Inputs/Field/index.jsx
@@ -66,7 +66,7 @@ const Field = forwardRef(
 		return (
 			<Stack
 				gap={theme.spacing(2)}
-				className={`${className} field field-${type}`}
+				className={`field field-${type} ${className}`}
 				sx={{
 					"& fieldset": {
 						borderColor: theme.palette.border.dark,

From 3603cccd2b435cb89001a4b860eab31dc11cf2d3 Mon Sep 17 00:00:00 2001
From: Mend Renovate <bot@renovateapp.com>
Date: Fri, 22 Nov 2024 01:34:06 +0000
Subject: [PATCH 112/142] fix(deps): update dependency bullmq to v5.28.2

---
 Server/package-lock.json | 8 ++++----
 Server/package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/Server/package-lock.json b/Server/package-lock.json
index 99166dac6..c7b17e821 100644
--- a/Server/package-lock.json
+++ b/Server/package-lock.json
@@ -11,7 +11,7 @@
 			"dependencies": {
 				"axios": "^1.7.2",
 				"bcrypt": "^5.1.1",
-				"bullmq": "5.28.1",
+				"bullmq": "5.28.2",
 				"cors": "^2.8.5",
 				"dockerode": "4.0.2",
 				"dotenv": "^16.4.5",
@@ -1217,9 +1217,9 @@
 			}
 		},
 		"node_modules/bullmq": {
-			"version": "5.28.1",
-			"resolved": "https://registry.npmjs.org/bullmq/-/bullmq-5.28.1.tgz",
-			"integrity": "sha512-iSoqziPLKH//mmoc4Aj3/opTmk1PgFdITwUrx/wDqrTxfBRjnTGInsu129LCEY6d+SmhZWnA9PYU6ciX+NT64A==",
+			"version": "5.28.2",
+			"resolved": "https://registry.npmjs.org/bullmq/-/bullmq-5.28.2.tgz",
+			"integrity": "sha512-2F94CJnOKP2kyf29v8bxpNNyF7IsG+z0RY80gP7dAvUprcEbb3CAvyCKMcbkHeF/kBKkcJCNQOlVY/+JY8dsUQ==",
 			"license": "MIT",
 			"dependencies": {
 				"cron-parser": "^4.6.0",
diff --git a/Server/package.json b/Server/package.json
index 0212dbd13..fea0ca91f 100644
--- a/Server/package.json
+++ b/Server/package.json
@@ -14,7 +14,7 @@
 	"dependencies": {
 		"axios": "^1.7.2",
 		"bcrypt": "^5.1.1",
-		"bullmq": "5.28.1",
+		"bullmq": "5.28.2",
 		"cors": "^2.8.5",
 		"dockerode": "4.0.2",
 		"dotenv": "^16.4.5",

From ec1563bba2a5a2e7d4ebb98d674a3c35ef009b17 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Fri, 22 Nov 2024 09:49:32 +0800
Subject: [PATCH 113/142] Add  parameter for date ranges to return all checks

---
 Server/db/mongo/modules/monitorModule.js | 3 ++-
 Server/validation/joi.js                 | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/Server/db/mongo/modules/monitorModule.js b/Server/db/mongo/modules/monitorModule.js
index 4d355141d..fa72aad21 100644
--- a/Server/db/mongo/modules/monitorModule.js
+++ b/Server/db/mongo/modules/monitorModule.js
@@ -198,7 +198,7 @@ const getIncidents = (checks) => {
 
 /**
  * Get date range parameters
- * @param {string} dateRange - 'day' | 'week' | 'month'
+ * @param {string} dateRange - 'day' | 'week' | 'month' | 'all'
  * @returns {Object} Start and end dates
  */
 const getDateRange = (dateRange) => {
@@ -206,6 +206,7 @@ const getDateRange = (dateRange) => {
 		day: new Date(new Date().setDate(new Date().getDate() - 1)),
 		week: new Date(new Date().setDate(new Date().getDate() - 7)),
 		month: new Date(new Date().setMonth(new Date().getMonth() - 1)),
+		all: new Date(0),
 	};
 	return {
 		start: startDates[dateRange],
diff --git a/Server/validation/joi.js b/Server/validation/joi.js
index 82a732686..bc3967657 100644
--- a/Server/validation/joi.js
+++ b/Server/validation/joi.js
@@ -178,7 +178,7 @@ const getMonitorStatsByIdQueryValidation = joi.object({
 	status: joi.string(),
 	limit: joi.number(),
 	sortOrder: joi.string().valid("asc", "desc"),
-	dateRange: joi.string().valid("day", "week", "month"),
+	dateRange: joi.string().valid("day", "week", "month", "all"),
 	numToDisplay: joi.number(),
 	normalize: joi.boolean(),
 });

From 69281eb3f1f41d7fbae55c25efdca6338e22606a Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Fri, 22 Nov 2024 09:50:02 +0800
Subject: [PATCH 114/142] update network request with correct params

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

diff --git a/Client/src/Pages/Infrastructure/Details/index.jsx b/Client/src/Pages/Infrastructure/Details/index.jsx
index 5f3ec7f77..5f08d71e1 100644
--- a/Client/src/Pages/Infrastructure/Details/index.jsx
+++ b/Client/src/Pages/Infrastructure/Details/index.jsx
@@ -169,7 +169,7 @@ const InfrastructureDetails = () => {
 	];
 	const [monitor, setMonitor] = useState(null);
 	const { authToken } = useSelector((state) => state.auth);
-	const [dateRange, setDateRange] = useState("day");
+	const [dateRange, setDateRange] = useState("all");
 	const { statusColor, determineState } = useUtils();
 	// These calculations are needed because ResponsiveContainer
 	// doesn't take padding of parent/siblings into account
@@ -189,11 +189,11 @@ const InfrastructureDetails = () => {
 				const response = await networkService.getStatsByMonitorId({
 					authToken: authToken,
 					monitorId: monitorId,
-					sortOrder: null,
+					sortOrder: "asc",
 					limit: null,
 					dateRange: dateRange,
-					numToDisplay: 50,
-					normalize: true,
+					numToDisplay: null,
+					normalize: false,
 				});
 				setMonitor(response.data.data);
 			} catch (error) {

From 3721af755503f5a485e7a52c5acda22988d395f6 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Fri, 22 Nov 2024 11:52:01 +0800
Subject: [PATCH 115/142] Add hardware incident email template

---
 Server/templates/hardwareIncident.mjml | 43 ++++++++++++++++++++++++++
 1 file changed, 43 insertions(+)
 create mode 100644 Server/templates/hardwareIncident.mjml

diff --git a/Server/templates/hardwareIncident.mjml b/Server/templates/hardwareIncident.mjml
new file mode 100644
index 000000000..e27933fb9
--- /dev/null
+++ b/Server/templates/hardwareIncident.mjml
@@ -0,0 +1,43 @@
+<mjml>
+  <mj-head>
+    <mj-font name="Roboto" href="https://fonts.googleapis.com/css?family=Roboto:300,500"></mj-font>
+    <mj-attributes>
+      <mj-all font-family="Roboto, Helvetica, sans-serif"></mj-all>
+      <mj-text font-weight="300" font-size="16px" color="#616161" line-height="24px"></mj-text>
+      <mj-section padding="0px"></mj-section>
+    </mj-attributes>
+  </mj-head>
+  <mj-body>
+    <mj-section padding="20px 0">
+      <mj-column width="100%">
+        <mj-text align="left" font-size="10px">
+          Message from BlueWave Infrastructure Monitoring
+        </mj-text>
+      </mj-column>
+      <mj-column width="45%" padding-top="20px">
+        <mj-text align="center" font-weight="500" padding="0px" font-size="18px" color="red">
+          Infrastructure Alerts
+        </mj-text>
+        <mj-divider border-width="2px" border-color="#616161"></mj-divider>
+      </mj-column>
+    </mj-section>
+    <mj-section>
+      <mj-column width="100%">
+        <mj-text>
+          <p>Hello {{name}}!</p>
+          <p>{{monitor}} at {{url}} has the following infrastructure alerts:</p>
+          {{#each alerts}}
+            <p>• {{this}}</p>
+          {{/each}}
+        </mj-text>
+      </mj-column>
+      <mj-column width="100%">
+        <mj-divider border-width="1px" border-color="#E0E0E0"></mj-divider>
+        <mj-button background-color="#1570EF"> View Infrastructure Details </mj-button>
+        <mj-text font-size="12px">
+          <p>This email was sent by BlueWave Infrastructure Monitoring.</p>
+        </mj-text>
+      </mj-column>
+    </mj-section>
+  </mj-body>
+</mjml>
\ No newline at end of file

From 930403af8cd9ae2dc9631a08fa13d55f97fccfe2 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Fri, 22 Nov 2024 11:52:32 +0800
Subject: [PATCH 116/142] Update Notification model to include metric specific
 notification thresholds

---
 Server/db/models/Notification.js | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/Server/db/models/Notification.js b/Server/db/models/Notification.js
index 9edb0187a..868324cc2 100644
--- a/Server/db/models/Notification.js
+++ b/Server/db/models/Notification.js
@@ -16,6 +16,28 @@ const NotificationSchema = mongoose.Schema(
 		phone: {
 			type: String,
 		},
+		alertThreshold: {
+			type: Number,
+			default: 5,
+		},
+		cpuAlertThreshold: {
+			type: Number,
+			default: function () {
+				return this.alertThreshold;
+			},
+		},
+		memoryAlertThreshold: {
+			type: Number,
+			default: function () {
+				return this.alertThreshold;
+			},
+		},
+		diskAlertThreshold: {
+			type: Number,
+			default: function () {
+				return this.alertThreshold;
+			},
+		},
 	},
 	{
 		timestamps: true,

From e52c55bf2f06e5eb09666c76683c19fba8b6d1ae Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Fri, 22 Nov 2024 11:52:52 +0800
Subject: [PATCH 117/142] remove old treshold violated template

---
 Server/templates/thresholdViolated.mjml | 40 -------------------------
 1 file changed, 40 deletions(-)
 delete mode 100644 Server/templates/thresholdViolated.mjml

diff --git a/Server/templates/thresholdViolated.mjml b/Server/templates/thresholdViolated.mjml
deleted file mode 100644
index a3d4344e4..000000000
--- a/Server/templates/thresholdViolated.mjml
+++ /dev/null
@@ -1,40 +0,0 @@
-<mjml>
-  <mj-head>
-    <mj-font name="Roboto" href="https://fonts.googleapis.com/css?family=Roboto:300,500"></mj-font>
-    <mj-attributes>
-      <mj-all font-family="Roboto, Helvetica, sans-serif"></mj-all>
-      <mj-text font-weight="300" font-size="16px" color="#616161" line-height="24px"></mj-text>
-      <mj-section padding="0px"></mj-section>
-    </mj-attributes>
-  </mj-head>
-  <mj-body>
-    <mj-section padding="20px 0">
-      <mj-column width="100%">
-        <mj-text align="left" font-size="10px">
-          Message from BlueWave Uptime Service
-        </mj-text>
-      </mj-column>
-      <mj-column width="45%" padding-top="20px">
-        <mj-text font-weight="500" padding="0px" font-size="18px">
-          {{message}}
-        </mj-text>
-        <mj-text font-weight="500" padding="0px" font-size="18px">
-          {{#if cpu}}
-            {{cpu}}
-          {{/if}}
-        </mj-text>
-        <mj-text font-weight="500" padding="0px" font-size="18px">
-          {{#if disk}}
-            {{disk}}
-          {{/if}}
-        </mj-text>
-        <mj-text font-weight="500" padding="0px" font-size="18px">
-          {{#if memory}}
-            {{memory}}
-          {{/if}}
-        </mj-text>
-
-      </mj-column>
-    </mj-section>
-  </mj-body>
-</mjml>
\ No newline at end of file

From b96648b1559bd3b2c2fdb73a58f875403760c555 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Fri, 22 Nov 2024 11:55:31 +0800
Subject: [PATCH 118/142] add hardware monitor notification checking to
 jobQueue

---
 Server/service/jobQueue.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/Server/service/jobQueue.js b/Server/service/jobQueue.js
index eedeb1a5c..dd3ac010a 100644
--- a/Server/service/jobQueue.js
+++ b/Server/service/jobQueue.js
@@ -166,6 +166,15 @@ class JobQueue {
 				const { monitor, statusChanged, prevStatus } =
 					await this.statusService.updateStatus(networkResponse);
 
+				// If this is an infrastructure monitor, we need to check for thresholds
+				if (monitor.type === "hardware") {
+					await this.notificationService.handleInfrastructureNotifications({
+						...networkResponse,
+						monitor,
+						prevStatus,
+					});
+				}
+
 				//If status hasn't changed, we're done
 				if (statusChanged === false) return;
 

From 355f7e0511ec04150130fe2eb392f2c722eac1a6 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Fri, 22 Nov 2024 11:56:13 +0800
Subject: [PATCH 119/142] add monitor an dprevStatus to response from
 statusService if monitor status does not change

---
 Server/service/statusService.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/Server/service/statusService.js b/Server/service/statusService.js
index 4f7c1a4ce..6e61ea232 100644
--- a/Server/service/statusService.js
+++ b/Server/service/statusService.js
@@ -29,7 +29,8 @@ class StatusService {
 			const { monitorId, status } = networkResponse;
 			const monitor = await this.db.getMonitorById(monitorId);
 			// No change in monitor status, return early
-			if (monitor.status === status) return { statusChanged: false };
+			if (monitor.status === status)
+				return { monitor, statusChanged: false, prevStatus: monitor.status };
 			// Monitor status changed, save prev status and update monitor
 
 			this.logger.info({

From b9cfbd7a7485dc78817245487a4ccdc1ea479300 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Fri, 22 Nov 2024 11:56:26 +0800
Subject: [PATCH 120/142] handle hardware notifications

---
 Server/service/emailService.js        |  2 +-
 Server/service/notificationService.js | 86 ++++++++++++++++++++++++++-
 2 files changed, 86 insertions(+), 2 deletions(-)

diff --git a/Server/service/emailService.js b/Server/service/emailService.js
index 5977048ef..846b7c6c8 100644
--- a/Server/service/emailService.js
+++ b/Server/service/emailService.js
@@ -65,7 +65,7 @@ class EmailService {
 			serverIsDownTemplate: this.loadTemplate("serverIsDown"),
 			serverIsUpTemplate: this.loadTemplate("serverIsUp"),
 			passwordResetTemplate: this.loadTemplate("passwordReset"),
-			thresholdViolatedTemplate: this.loadTemplate("thresholdViolated"),
+			hardwareIncidentTemplate: this.loadTemplate("hardwareIncident"),
 		};
 
 		/**
diff --git a/Server/service/notificationService.js b/Server/service/notificationService.js
index f464c08a7..5323f5393 100644
--- a/Server/service/notificationService.js
+++ b/Server/service/notificationService.js
@@ -24,8 +24,15 @@ class NotificationService {
 	 * @param {boolean} networkResponse.prevStatus - The previous status of the monitor (true for up, false for down).
 	 * @param {string} address - The email address to send the notification to.
 	 */
-	async sendEmail(networkResponse, address) {
+	async sendEmail(networkResponse, address, alerts = []) {
 		const { monitor, status, prevStatus } = networkResponse;
+		if (monitor.type === "hardware") {
+			const template = "hardwareIncidentTemplate";
+			const context = { monitor: monitor.name, url: monitor.url, alerts };
+			const subject = `Monitor ${monitor.name} infrastructure alerts`;
+			this.emailService.buildAndSendEmail(template, context, address, subject);
+			return;
+		}
 		const template = prevStatus === false ? "serverIsUpTemplate" : "serverIsDownTemplate";
 		const context = { monitor: monitor.name, url: monitor.url };
 		const subject = `Monitor ${monitor.name} is ${status === true ? "up" : "down"}`;
@@ -58,6 +65,83 @@ class NotificationService {
 			});
 		}
 	}
+
+	async handleInfrastructureNotifications(networkResponse) {
+		const thresholds = networkResponse?.monitor?.thresholds;
+		if (thresholds === undefined) return; // No thresholds set, we're done
+
+		// Get thresholds from monitor
+		const {
+			usage_cpu: cpuThreshold = -1,
+			usage_memory: memoryThreshold = -1,
+			usage_disk: diskThreshold = -1,
+		} = thresholds;
+
+		// Get metrics from response
+		const metrics = networkResponse?.payload?.data ?? {};
+		const {
+			cpu: { usage_percent: cpuUsage = -1 } = {},
+			memory: { usage_percent: memoryUsage = -1 } = {},
+			disk = [],
+		} = metrics;
+
+		const alerts = {
+			cpu:
+				cpuThreshold !== -1 && cpuUsage > cpuThreshold / 100
+					? "CPU usage is above threshold"
+					: null,
+			memory:
+				memoryThreshold !== -1 && memoryUsage > memoryThreshold / 100
+					? "Memory usage is above threshold"
+					: null,
+			disk: disk.some(
+				(d) => diskThreshold !== -1 && d.usage_percent > diskThreshold / 100
+			)
+				? "Disk usage is above threshold"
+				: null,
+		};
+
+		const notifications = await this.db.getNotificationsByMonitorId(
+			networkResponse.monitorId
+		);
+		for (const notification of notifications) {
+			const alertsToSend = [];
+			const alertTypes = ["cpu", "memory", "disk"];
+
+			for (const type of alertTypes) {
+				// Iterate over each alert type to see if any need to be decmremented
+				if (alerts[type] !== null) {
+					notification[`${type}AlertThreshold`]--; // Decrement threshold if an alert is triggered
+
+					if (notification[`${type}AlertThreshold`] <= 0) {
+						// If threshold drops below 0, reset and send notification
+						notification[`${type}AlertThreshold`] = notification.alertThreshold;
+
+						const formatAlert = {
+							cpu: () =>
+								`${alerts.cpu} ${(cpuUsage * 100).toFixed(0)}% (${cpuThreshold}%)`,
+							memory: () =>
+								`${alerts.memory} ${(memoryUsage * 100).toFixed(0)}% (${memoryThreshold}%)`,
+							disk: () =>
+								`${alerts.disk} ${disk
+									.map((d, idx) => `Disk${idx}: ${(d.usage_percent * 100).toFixed(0)}%`)
+									.join(", ")} (${diskThreshold}%)`,
+						};
+
+						alertsToSend.push(formatAlert[type]());
+					}
+				}
+			}
+
+			await notification.save();
+
+			if (alertsToSend.length === 0) continue; // No alerts to send, we're done
+
+			if (notification.type === "email") {
+				this.sendEmail(networkResponse, notification.address, alertsToSend);
+			}
+		}
+	}
 }
 
 export default NotificationService;

From 6337cd6462c3ea09e353b847578b30a09f347784 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Fri, 22 Nov 2024 12:23:24 +0800
Subject: [PATCH 121/142] convert percentage to decimal before submitting

---
 Client/src/Pages/Infrastructure/CreateMonitor/index.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/Client/src/Pages/Infrastructure/CreateMonitor/index.jsx b/Client/src/Pages/Infrastructure/CreateMonitor/index.jsx
index 6a7081d9c..352f57bce 100644
--- a/Client/src/Pages/Infrastructure/CreateMonitor/index.jsx
+++ b/Client/src/Pages/Infrastructure/CreateMonitor/index.jsx
@@ -132,7 +132,7 @@ const CreateInfrastructureMonitor = () => {
 		Object.keys(form)
 			.filter((k) => k.startsWith(THRESHOLD_FIELD_PREFIX))
 			.map((k) => {
-				if (form[k]) thresholds[k] = form[k];
+				if (form[k]) thresholds[k] = form[k] / 100;
 				delete form[k];
 				delete form[k.substring(THRESHOLD_FIELD_PREFIX.length)];
 			});
@@ -158,6 +158,7 @@ const CreateInfrastructureMonitor = () => {
 					: infrastructureMonitor.name,
 			interval: infrastructureMonitor.interval * MS_PER_MINUTE,
 		};
+
 		delete form.notifications;
 		if (hasValidationErrors(form, infrastructureMonitorValidation, setErrors)) {
 			return;

From a5e918e0a7aa5f78785db41892d6b1dcd268e1e9 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Fri, 22 Nov 2024 12:23:40 +0800
Subject: [PATCH 122/142] remove percentage to decimal conversion from BE

---
 Server/service/notificationService.js | 32 +++++++++++----------------
 1 file changed, 13 insertions(+), 19 deletions(-)

diff --git a/Server/service/notificationService.js b/Server/service/notificationService.js
index 5323f5393..dfe3afc08 100644
--- a/Server/service/notificationService.js
+++ b/Server/service/notificationService.js
@@ -86,19 +86,11 @@ class NotificationService {
 		} = metrics;
 
 		const alerts = {
-			cpu:
-				cpuThreshold !== -1 && cpuUsage > cpuThreshold / 100
-					? "CPU usage is above threshold"
-					: null,
-			memory:
-				memoryThreshold !== -1 && memoryUsage > memoryThreshold / 100
-					? "Memory usage is above threshold"
-					: null,
-			disk: disk.some(
-				(d) => diskThreshold !== -1 && d.usage_percent > diskThreshold / 100
-			)
-				? "Disk usage is above threshold"
-				: null,
+			cpu: cpuThreshold !== -1 && cpuUsage > cpuThreshold ? true : false,
+			memory: memoryThreshold !== -1 && memoryUsage > memoryThreshold ? true : false,
+			disk: disk.some((d) => diskThreshold !== -1 && d.usage_percent > diskThreshold)
+				? true
+				: false,
 		};
 
 		const notifications = await this.db.getNotificationsByMonitorId(
@@ -110,7 +102,7 @@ class NotificationService {
 
 			for (const type of alertTypes) {
 				// Iterate over each alert type to see if any need to be decmremented
-				if (alerts[type] !== null) {
+				if (alerts[type] === true) {
 					notification[`${type}AlertThreshold`]--; // Decrement threshold if an alert is triggered
 
 					if (notification[`${type}AlertThreshold`] <= 0) {
@@ -119,13 +111,15 @@ class NotificationService {
 
 						const formatAlert = {
 							cpu: () =>
-								`${alerts.cpu} ${(cpuUsage * 100).toFixed(0)}% (${cpuThreshold}%)`,
+								`Your current CPU usage (${(cpuUsage * 100).toFixed(0)}%) is above your threshold (${(cpuThreshold * 100).toFixed(0)}%)`,
 							memory: () =>
-								`${alerts.memory} ${(memoryUsage * 100).toFixed(0)}% (${memoryThreshold}%)`,
+								`Your current memory usage (${(memoryUsage * 100).toFixed(0)}%) is above your threshold (${(memoryThreshold * 100).toFixed(0)}%)`,
 							disk: () =>
-								`${alerts.disk} ${disk
-									.map((d, idx) => `Disk${idx}: ${(d.usage_percent * 100).toFixed(0)}%`)
-									.join(", ")} (${diskThreshold}%)`,
+								`Your current disk usage: ${disk
+									.map((d, idx) => `(Disk${idx}: ${(d.usage_percent * 100).toFixed(0)}%)`)
+									.join(
+										", "
+									)} is above your threshold (${(diskThreshold * 100).toFixed(0)}%)`,
 						};
 
 						alertsToSend.push(formatAlert[type]());

From 80763356e5f2a3b7a108181d7d8ec8f676369caa Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Fri, 22 Nov 2024 12:24:26 +0800
Subject: [PATCH 123/142] fix typo in comment

---
 Server/service/notificationService.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Server/service/notificationService.js b/Server/service/notificationService.js
index dfe3afc08..88bdc0a86 100644
--- a/Server/service/notificationService.js
+++ b/Server/service/notificationService.js
@@ -101,7 +101,7 @@ class NotificationService {
 			const alertTypes = ["cpu", "memory", "disk"];
 
 			for (const type of alertTypes) {
-				// Iterate over each alert type to see if any need to be decmremented
+				// Iterate over each alert type to see if any need to be decremented
 				if (alerts[type] === true) {
 					notification[`${type}AlertThreshold`]--; // Decrement threshold if an alert is triggered
 

From 24571df7f1c49c4ca7451099c71cace1aa21b9c2 Mon Sep 17 00:00:00 2001
From: Mend Renovate <bot@renovateapp.com>
Date: Fri, 22 Nov 2024 11:22:46 +0000
Subject: [PATCH 124/142] fix(deps): update dependency bullmq to v5.29.0

---
 Server/package-lock.json | 8 ++++----
 Server/package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/Server/package-lock.json b/Server/package-lock.json
index c7b17e821..afef7f6c2 100644
--- a/Server/package-lock.json
+++ b/Server/package-lock.json
@@ -11,7 +11,7 @@
 			"dependencies": {
 				"axios": "^1.7.2",
 				"bcrypt": "^5.1.1",
-				"bullmq": "5.28.2",
+				"bullmq": "5.29.0",
 				"cors": "^2.8.5",
 				"dockerode": "4.0.2",
 				"dotenv": "^16.4.5",
@@ -1217,9 +1217,9 @@
 			}
 		},
 		"node_modules/bullmq": {
-			"version": "5.28.2",
-			"resolved": "https://registry.npmjs.org/bullmq/-/bullmq-5.28.2.tgz",
-			"integrity": "sha512-2F94CJnOKP2kyf29v8bxpNNyF7IsG+z0RY80gP7dAvUprcEbb3CAvyCKMcbkHeF/kBKkcJCNQOlVY/+JY8dsUQ==",
+			"version": "5.29.0",
+			"resolved": "https://registry.npmjs.org/bullmq/-/bullmq-5.29.0.tgz",
+			"integrity": "sha512-mRA0m+XJvvpB+MG1xSefcbb3VdEhqCenH87fGE01o2VsoRC0VwXROIX23RXha9RJaJ5/iEOsgUICuVvW+MHpqw==",
 			"license": "MIT",
 			"dependencies": {
 				"cron-parser": "^4.6.0",
diff --git a/Server/package.json b/Server/package.json
index fea0ca91f..7f48822c8 100644
--- a/Server/package.json
+++ b/Server/package.json
@@ -14,7 +14,7 @@
 	"dependencies": {
 		"axios": "^1.7.2",
 		"bcrypt": "^5.1.1",
-		"bullmq": "5.28.2",
+		"bullmq": "5.29.0",
 		"cors": "^2.8.5",
 		"dockerode": "4.0.2",
 		"dotenv": "^16.4.5",

From 70df0738adeea8b2681fd000ee8eb7b15538299b Mon Sep 17 00:00:00 2001
From: Shemy Gan <jennifergan26@gmail.com>
Date: Fri, 22 Nov 2024 15:11:54 -0500
Subject: [PATCH 125/142] - Remove inactive upcoming features

---
 .../Infrastructure/CreateMonitor/index.jsx    | 28 -------------------
 1 file changed, 28 deletions(-)

diff --git a/Client/src/Pages/Infrastructure/CreateMonitor/index.jsx b/Client/src/Pages/Infrastructure/CreateMonitor/index.jsx
index 6a7081d9c..9553b2a68 100644
--- a/Client/src/Pages/Infrastructure/CreateMonitor/index.jsx
+++ b/Client/src/Pages/Infrastructure/CreateMonitor/index.jsx
@@ -194,25 +194,6 @@ const CreateInfrastructureMonitor = () => {
 		{ _id: 10, name: "10 minutes" },
 	];
 
-	const NOTIFY_MULTIPLE_EMAIL_LABEL = (
-		<Box>
-			<Typography mb={theme.spacing(4)}>
-				Also notify via email to multiple addresses (coming soon)
-			</Typography>
-			<Field
-				id="notify-email-list"
-				type="text"
-				placeholder="name@gmail.com"
-				value=""
-				onChange={() => logger.warn("disabled")}
-				onBlur={handleBlur}
-			/>
-			<Typography mt={theme.spacing(4)}>
-				You can separate multiple emails with a comma
-			</Typography>
-		</Box>
-	);
-
 	return (
 		<Box className="create-infrastructure-monitor">
 			<Breadcrumbs
@@ -307,15 +288,6 @@ const CreateInfrastructureMonitor = () => {
 							onChange={(e) => handleChange(e)}
 							onBlur={handleBlur}
 						/>
-						<Checkbox
-							id="notify-email"
-							label={NOTIFY_MULTIPLE_EMAIL_LABEL}
-							isChecked={false}
-							value=""
-							onChange={() => logger.warn("disabled")}
-							onBlur={handleBlur}
-							isDisabled={true}
-						/>
 					</Stack>
 				</ConfigBox>
 

From fe960978515770c5ebbcfb4f33497e70a2da7329 Mon Sep 17 00:00:00 2001
From: Shemy Gan <jennifergan26@gmail.com>
Date: Fri, 22 Nov 2024 15:27:34 -0500
Subject: [PATCH 126/142] - Fix words in sentence based on figma

---
 Client/src/Pages/Infrastructure/CreateMonitor/index.jsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/Client/src/Pages/Infrastructure/CreateMonitor/index.jsx b/Client/src/Pages/Infrastructure/CreateMonitor/index.jsx
index 9553b2a68..f1650309b 100644
--- a/Client/src/Pages/Infrastructure/CreateMonitor/index.jsx
+++ b/Client/src/Pages/Infrastructure/CreateMonitor/index.jsx
@@ -234,7 +234,8 @@ const CreateInfrastructureMonitor = () => {
 					<Box>
 						<Typography component="h2">General settings</Typography>
 						<Typography component="p">
-							Here you can select the URL of the host, together with the type of monitor.
+							Here you can select the URL of the host, together with the friendly name and
+							authorization secret to connect to the server agent.
 						</Typography>
 					</Box>
 					<Stack gap={theme.spacing(15)}>
@@ -295,8 +296,8 @@ const CreateInfrastructureMonitor = () => {
 					<Box>
 						<Typography component="h2">Customize alerts</Typography>
 						<Typography component="p">
-							Send a notification to user(s) When the thresholds exceed a certain number
-							or percentage.
+							Send a notification to user(s) when thresholds exceed a certain number of
+							percentage.
 						</Typography>
 					</Box>
 					<Stack gap={theme.spacing(6)}>

From 5e069f8869798641c92f9526a99b7a35c299bf55 Mon Sep 17 00:00:00 2001
From: Alexander Holliday <ajhollid@gmail.com>
Date: Sat, 23 Nov 2024 10:07:02 +0800
Subject: [PATCH 127/142] Update index.jsx

grammar fix
---
 Client/src/Pages/Infrastructure/CreateMonitor/index.jsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/Client/src/Pages/Infrastructure/CreateMonitor/index.jsx b/Client/src/Pages/Infrastructure/CreateMonitor/index.jsx
index f1650309b..2171c3c19 100644
--- a/Client/src/Pages/Infrastructure/CreateMonitor/index.jsx
+++ b/Client/src/Pages/Infrastructure/CreateMonitor/index.jsx
@@ -296,8 +296,7 @@ const CreateInfrastructureMonitor = () => {
 					<Box>
 						<Typography component="h2">Customize alerts</Typography>
 						<Typography component="p">
-							Send a notification to user(s) when thresholds exceed a certain number of
-							percentage.
+							Send a notification to user(s) when thresholds exceed a specified percentage.
 						</Typography>
 					</Box>
 					<Stack gap={theme.spacing(6)}>

From 55cf4e0cc83258ee96d4d6854a8d6a04b29b29bc Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Sat, 23 Nov 2024 12:00:35 +0800
Subject: [PATCH 128/142] add safety checks and simple empty view for details
 page

---
 .../Pages/Infrastructure/Details/index.jsx    | 41 ++++++++++++-------
 1 file changed, 26 insertions(+), 15 deletions(-)

diff --git a/Client/src/Pages/Infrastructure/Details/index.jsx b/Client/src/Pages/Infrastructure/Details/index.jsx
index 5f3ec7f77..eaa3098b3 100644
--- a/Client/src/Pages/Infrastructure/Details/index.jsx
+++ b/Client/src/Pages/Infrastructure/Details/index.jsx
@@ -16,6 +16,7 @@ import {
 	InfrastructureTooltip,
 } from "../../../Components/Charts/Utils/chartUtils";
 import PropTypes from "prop-types";
+import { DateRangeIcon } from "@mui/x-date-pickers";
 
 const BASE_BOX_PADDING_VERTICAL = 4;
 const BASE_BOX_PADDING_HORIZONTAL = 8;
@@ -106,6 +107,7 @@ StatBox.propTypes = {
  */
 const GaugeBox = ({ value, heading, metricOne, valueOne, metricTwo, valueTwo }) => {
 	const theme = useTheme();
+
 	return (
 		<BaseBox>
 			<Stack
@@ -195,19 +197,20 @@ const InfrastructureDetails = () => {
 					numToDisplay: 50,
 					normalize: true,
 				});
+
 				setMonitor(response.data.data);
 			} catch (error) {
 				console.error(error);
 			}
 		};
 		fetchData();
-	}, []);
+	}, [authToken, monitorId, dateRange]);
 
 	const statBoxConfigs = [
 		{
 			id: 0,
 			heading: "CPU",
-			subHeading: `${monitor?.checks[0]?.cpu?.physical_core} cores`,
+			subHeading: `${monitor?.checks[0]?.cpu?.physical_core ?? 0} cores`,
 		},
 		{
 			id: 1,
@@ -230,26 +233,26 @@ const InfrastructureDetails = () => {
 	const gaugeBoxConfigs = [
 		{
 			type: "memory",
-			value: monitor?.checks[0]?.memory?.usage_percent * 100,
+			value: monitor?.checks[0]?.memory?.usage_percent ?? 0 * 100,
 			heading: "Memory Usage",
 			metricOne: "Used",
-			valueOne: formatBytes(monitor?.checks[0]?.memory?.used_bytes),
+			valueOne: formatBytes(monitor?.checks[0]?.memory?.used_bytes ?? 0),
 			metricTwo: "Total",
-			valueTwo: formatBytes(monitor?.checks[0]?.memory?.total_bytes),
+			valueTwo: formatBytes(monitor?.checks[0]?.memory?.total_bytes ?? 0),
 		},
 		{
 			type: "cpu",
-			value: monitor?.checks[0]?.cpu?.usage_percent * 100,
+			value: monitor?.checks[0]?.cpu?.usage_percent ?? 0 * 100,
 			heading: "CPU Usage",
 			metricOne: "Cores",
-			valueOne: monitor?.checks[0]?.cpu?.physical_core,
+			valueOne: monitor?.checks[0]?.cpu?.physical_core ?? 0,
 			metricTwo: "Frequency",
-			valueTwo: `${(monitor?.checks[0]?.cpu?.frequency / 1000).toFixed(2)} Ghz`,
+			valueTwo: `${(monitor?.checks[0]?.cpu?.frequency ?? 0 / 1000).toFixed(2)} Ghz`,
 		},
-		...(monitor?.checks[0]?.disk ?? []).map((disk, idx) => ({
+		...(monitor?.checks?.[0]?.disk ?? []).map((disk, idx) => ({
 			type: "disk",
 			diskIndex: idx,
-			value: disk.usage_percent * 100,
+			value: disk.usage_percent * 100 ?? 0,
 			heading: `Disk${idx} usage`,
 			metricOne: "Used",
 			valueOne: formatBytes(disk.total_bytes - disk.free_bytes),
@@ -284,9 +287,9 @@ const InfrastructureDetails = () => {
 	];
 
 	return (
-		monitor && (
-			<Box>
-				<Breadcrumbs list={navList} />
+		<Box>
+			<Breadcrumbs list={navList} />
+			{monitor?.checks?.length > 0 ? (
 				<Stack
 					direction="column"
 					gap={theme.spacing(10)}
@@ -392,8 +395,16 @@ const InfrastructureDetails = () => {
 						))}
 					</Stack>
 				</Stack>
-			</Box>
-		)
+			) : (
+				<Stack
+					direction="column"
+					gap={theme.spacing(10)}
+					mt={theme.spacing(10)}
+				>
+					<Typography variant="h2">Hang tight, there's no data yet</Typography>
+				</Stack>
+			)}
+		</Box>
 	);
 };
 

From 00a79d6be01c93d2891fcc481fa1b830b0903023 Mon Sep 17 00:00:00 2001
From: Mend Renovate <bot@renovateapp.com>
Date: Sat, 23 Nov 2024 08:07:54 +0000
Subject: [PATCH 129/142] fix(deps): update dependency bullmq to v5.29.1

---
 Server/package-lock.json | 8 ++++----
 Server/package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/Server/package-lock.json b/Server/package-lock.json
index afef7f6c2..fe26d5531 100644
--- a/Server/package-lock.json
+++ b/Server/package-lock.json
@@ -11,7 +11,7 @@
 			"dependencies": {
 				"axios": "^1.7.2",
 				"bcrypt": "^5.1.1",
-				"bullmq": "5.29.0",
+				"bullmq": "5.29.1",
 				"cors": "^2.8.5",
 				"dockerode": "4.0.2",
 				"dotenv": "^16.4.5",
@@ -1217,9 +1217,9 @@
 			}
 		},
 		"node_modules/bullmq": {
-			"version": "5.29.0",
-			"resolved": "https://registry.npmjs.org/bullmq/-/bullmq-5.29.0.tgz",
-			"integrity": "sha512-mRA0m+XJvvpB+MG1xSefcbb3VdEhqCenH87fGE01o2VsoRC0VwXROIX23RXha9RJaJ5/iEOsgUICuVvW+MHpqw==",
+			"version": "5.29.1",
+			"resolved": "https://registry.npmjs.org/bullmq/-/bullmq-5.29.1.tgz",
+			"integrity": "sha512-TZWiwRlPnpaN+Qwh4D8IQf2cYLpkiDX1LbaaWEabc6y37ojIttWOSynxDewpVHyW233LssSIC4+aLMSvAjtpmg==",
 			"license": "MIT",
 			"dependencies": {
 				"cron-parser": "^4.6.0",
diff --git a/Server/package.json b/Server/package.json
index 7f48822c8..5d55ed058 100644
--- a/Server/package.json
+++ b/Server/package.json
@@ -14,7 +14,7 @@
 	"dependencies": {
 		"axios": "^1.7.2",
 		"bcrypt": "^5.1.1",
-		"bullmq": "5.29.0",
+		"bullmq": "5.29.1",
 		"cors": "^2.8.5",
 		"dockerode": "4.0.2",
 		"dotenv": "^16.4.5",

From 964a31796c1136a3a822ef245e87f3b34a30edd3 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Sat, 23 Nov 2024 16:52:06 +0800
Subject: [PATCH 130/142] set initial loading state to false

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

diff --git a/Client/src/Pages/Incidents/IncidentTable/index.jsx b/Client/src/Pages/Incidents/IncidentTable/index.jsx
index 258bc47ff..69eed2ba1 100644
--- a/Client/src/Pages/Incidents/IncidentTable/index.jsx
+++ b/Client/src/Pages/Incidents/IncidentTable/index.jsx
@@ -39,7 +39,7 @@ const IncidentTable = ({ monitors, selectedMonitor, filter }) => {
 		page: 0,
 		rowsPerPage: 14,
 	});
-	const [isLoading, setIsLoading] = useState(true);
+	const [isLoading, setIsLoading] = useState(false);
 
 	useEffect(() => {
 		setPaginationController((prevPaginationController) => ({

From 2732d5f64c7547f3e2986dee46e67a63ab47a8f1 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Sat, 23 Nov 2024 17:14:05 +0800
Subject: [PATCH 131/142] add empty view according to spec

---
 .../Pages/Infrastructure/Details/empty.jsx    | 37 +++++++++++++++++++
 .../Pages/Infrastructure/Details/index.jsx    | 18 +++++----
 2 files changed, 47 insertions(+), 8 deletions(-)
 create mode 100644 Client/src/Pages/Infrastructure/Details/empty.jsx

diff --git a/Client/src/Pages/Infrastructure/Details/empty.jsx b/Client/src/Pages/Infrastructure/Details/empty.jsx
new file mode 100644
index 000000000..4a311233f
--- /dev/null
+++ b/Client/src/Pages/Infrastructure/Details/empty.jsx
@@ -0,0 +1,37 @@
+import { useTheme } from "@emotion/react";
+import PlaceholderLight from "../../../assets/Images/data_placeholder.svg?react";
+import PlaceholderDark from "../../../assets/Images/data_placeholder_dark.svg?react";
+import { Box, Typography, Stack } from "@mui/material";
+import PropTypes from "prop-types";
+import { useSelector } from "react-redux";
+const Empty = ({ styles }) => {
+	const theme = useTheme();
+	const mode = useSelector((state) => state.ui.mode);
+	return (
+		<Box sx={{ ...styles, marginTop: theme.spacing(24) }}>
+			<Stack
+				direction="column"
+				gap={theme.spacing(8)}
+				alignItems="center"
+			>
+				{mode === "light" ? <PlaceholderLight /> : <PlaceholderDark />}
+
+				<Typography variant="h2">Your infrastructure dashboard will show here</Typography>
+				<Typography
+					textAlign="center"
+					color={theme.palette.text.secondary}
+				>
+					Hang tight! When we receive data, we'll show it here. Please check back in a few
+					minutes.
+				</Typography>
+			</Stack>
+		</Box>
+	);
+};
+
+Empty.propTypes = {
+	styles: PropTypes.object,
+	mode: PropTypes.string,
+};
+
+export default Empty;
diff --git a/Client/src/Pages/Infrastructure/Details/index.jsx b/Client/src/Pages/Infrastructure/Details/index.jsx
index eaa3098b3..f9c8dbe1f 100644
--- a/Client/src/Pages/Infrastructure/Details/index.jsx
+++ b/Client/src/Pages/Infrastructure/Details/index.jsx
@@ -9,6 +9,7 @@ import { useSelector } from "react-redux";
 import { networkService } from "../../../main";
 import PulseDot from "../../../Components/Animated/PulseDot";
 import useUtils from "../../Monitors/utils";
+import Empty from "./empty";
 import { formatDurationRounded, formatDurationSplit } from "../../../Utils/timeUtils";
 import {
 	TzTick,
@@ -16,7 +17,6 @@ import {
 	InfrastructureTooltip,
 } from "../../../Components/Charts/Utils/chartUtils";
 import PropTypes from "prop-types";
-import { DateRangeIcon } from "@mui/x-date-pickers";
 
 const BASE_BOX_PADDING_VERTICAL = 4;
 const BASE_BOX_PADDING_HORIZONTAL = 8;
@@ -396,13 +396,15 @@ const InfrastructureDetails = () => {
 					</Stack>
 				</Stack>
 			) : (
-				<Stack
-					direction="column"
-					gap={theme.spacing(10)}
-					mt={theme.spacing(10)}
-				>
-					<Typography variant="h2">Hang tight, there's no data yet</Typography>
-				</Stack>
+				<Empty
+					styles={{
+						border: 1,
+						borderColor: theme.palette.border.light,
+						borderRadius: theme.shape.borderRadius,
+						backgroundColor: theme.palette.background.main,
+						p: theme.spacing(30),
+					}}
+				/>
 			)}
 		</Box>
 	);

From 4fd8d440127606bbc67f051036ba1bd6c58d6ebc Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Sat, 23 Nov 2024 17:20:34 +0800
Subject: [PATCH 132/142] redirect on error

---
 Client/src/Pages/Infrastructure/Details/index.jsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/Client/src/Pages/Infrastructure/Details/index.jsx b/Client/src/Pages/Infrastructure/Details/index.jsx
index f9c8dbe1f..6730ed7ec 100644
--- a/Client/src/Pages/Infrastructure/Details/index.jsx
+++ b/Client/src/Pages/Infrastructure/Details/index.jsx
@@ -9,6 +9,7 @@ import { useSelector } from "react-redux";
 import { networkService } from "../../../main";
 import PulseDot from "../../../Components/Animated/PulseDot";
 import useUtils from "../../Monitors/utils";
+import { useNavigate } from "react-router-dom";
 import Empty from "./empty";
 import { formatDurationRounded, formatDurationSplit } from "../../../Utils/timeUtils";
 import {
@@ -163,6 +164,7 @@ GaugeBox.propTypes = {
  * @returns {React.ReactElement} Infrastructure details page component
  */
 const InfrastructureDetails = () => {
+	const navigate = useNavigate();
 	const theme = useTheme();
 	const { monitorId } = useParams();
 	const navList = [
@@ -200,6 +202,8 @@ const InfrastructureDetails = () => {
 
 				setMonitor(response.data.data);
 			} catch (error) {
+				navigate("/not-found", { replace: true });
+
 				console.error(error);
 			}
 		};

From 435345fa3d5fdbdb433005a5f08c4568fd2d21f1 Mon Sep 17 00:00:00 2001
From: DemonicQuasar <66374844+DemonicQuasar@users.noreply.github.com>
Date: Sat, 23 Nov 2024 06:18:56 -0600
Subject: [PATCH 133/142] Update Login.jsx to remove Sign up link

Removing sign up link as per issue #1180.
---
 Client/src/Pages/Auth/Login.jsx | 17 -----------------
 1 file changed, 17 deletions(-)

diff --git a/Client/src/Pages/Auth/Login.jsx b/Client/src/Pages/Auth/Login.jsx
index 0554ad579..ece5de314 100644
--- a/Client/src/Pages/Auth/Login.jsx
+++ b/Client/src/Pages/Auth/Login.jsx
@@ -548,23 +548,6 @@ const Login = () => {
 					)
 				)}
 			</Stack>
-			<Box
-				textAlign="center"
-				p={theme.spacing(12)}
-			>
-				<Typography display="inline-block">Don&apos;t have an account? —</Typography>
-				<Typography
-					component="span"
-					color={theme.palette.primary.main}
-					ml={theme.spacing(2)}
-					onClick={() => {
-						navigate("/register");
-					}}
-					sx={{ userSelect: "none" }}
-				>
-					Sign Up
-				</Typography>
-			</Box>
 		</Stack>
 	);
 };

From abc28c9ee848ea5cfe29f15e7dde685630b96706 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Sun, 24 Nov 2024 15:59:09 +0800
Subject: [PATCH 134/142] Add better status string generation

---
 Server/service/statusService.js             |  7 ++++++-
 Server/tests/services/statusService.test.js | 12 ++++++++++++
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/Server/service/statusService.js b/Server/service/statusService.js
index 4f7c1a4ce..06f0a7f0e 100644
--- a/Server/service/statusService.js
+++ b/Server/service/statusService.js
@@ -11,6 +11,11 @@ class StatusService {
 		this.SERVICE_NAME = "StatusService";
 	}
 
+	getStatusString = (status) => {
+		if (status === true) return "up";
+		if (status === false) return "down";
+		return "unknown";
+	};
 	/**
 	 * Updates the status of a monitor based on the network response.
 	 *
@@ -34,7 +39,7 @@ class StatusService {
 
 			this.logger.info({
 				service: this.SERVICE_NAME,
-				message: `${monitor.name} went from ${monitor.status === true ? "up" : "down"} to ${status === true ? "up" : "down"}`,
+				message: `${monitor.name} went from ${this.getStatusString(monitor.status)} to ${this.getStatusString(status)}`,
 				prevStatus: monitor.status,
 				newStatus: status,
 			});
diff --git a/Server/tests/services/statusService.test.js b/Server/tests/services/statusService.test.js
index 7330ab57f..1ac660e51 100644
--- a/Server/tests/services/statusService.test.js
+++ b/Server/tests/services/statusService.test.js
@@ -27,6 +27,18 @@ describe("StatusService", () => {
 		});
 	});
 
+	describe("getStatusString", () => {
+		it("should return 'up' if status is true", () => {
+			expect(statusService.getStatusString(true)).to.equal("up");
+		});
+		it("should return 'down' if status is false", () => {
+			expect(statusService.getStatusString(false)).to.equal("down");
+		});
+		it("should return 'unknown' if status is undefined or null", () => {
+			expect(statusService.getStatusString(undefined)).to.equal("unknown");
+		});
+	});
+
 	describe("updateStatus", async () => {
 		beforeEach(() => {
 			// statusService.insertCheck = sinon.stub().resolves;

From 257cc73ab3b559e9804273c321543f5f9682d593 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Sun, 24 Nov 2024 17:39:05 +0800
Subject: [PATCH 135/142] Add safety check for destructuing payload in
 StatusService

---
 Server/service/statusService.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Server/service/statusService.js b/Server/service/statusService.js
index 6e61ea232..442329620 100644
--- a/Server/service/statusService.js
+++ b/Server/service/statusService.js
@@ -104,7 +104,7 @@ class StatusService {
 
 		if (type === "hardware") {
 			const { cpu, memory, disk, host } = payload?.data ?? {};
-			const { errors } = payload;
+			const { errors } = payload?.errors ?? [];
 			check.cpu = cpu ?? {};
 			check.memory = memory ?? {};
 			check.disk = disk ?? {};

From 02666397c9187ee75108824bca6612fd869eb6a0 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Sun, 24 Nov 2024 17:43:37 +0800
Subject: [PATCH 136/142] Move all notification handling from JobQueue to
 NotificaitonService where it should be

---
 Server/service/jobQueue.js            |  18 +----
 Server/service/notificationService.js | 107 +++++++++++++++++++-------
 2 files changed, 80 insertions(+), 45 deletions(-)

diff --git a/Server/service/jobQueue.js b/Server/service/jobQueue.js
index dd3ac010a..182f0235a 100644
--- a/Server/service/jobQueue.js
+++ b/Server/service/jobQueue.js
@@ -165,26 +165,12 @@ class JobQueue {
 				// Handle status change
 				const { monitor, statusChanged, prevStatus } =
 					await this.statusService.updateStatus(networkResponse);
-
-				// If this is an infrastructure monitor, we need to check for thresholds
-				if (monitor.type === "hardware") {
-					await this.notificationService.handleInfrastructureNotifications({
-						...networkResponse,
-						monitor,
-						prevStatus,
-					});
-				}
-
-				//If status hasn't changed, we're done
-				if (statusChanged === false) return;
-
-				// if prevStatus is undefined, monitor is resuming, we're done
-				if (prevStatus === undefined) return;
-
+				// Handle notifications
 				this.notificationService.handleNotifications({
 					...networkResponse,
 					monitor,
 					prevStatus,
+					statusChanged,
 				});
 			} catch (error) {
 				this.logger.error({
diff --git a/Server/service/notificationService.js b/Server/service/notificationService.js
index 88bdc0a86..25bf5bfa6 100644
--- a/Server/service/notificationService.js
+++ b/Server/service/notificationService.js
@@ -14,48 +14,62 @@ class NotificationService {
 	}
 
 	/**
-	 * Sends an email notification based on the network response.
+	 * Sends an email notification for hardware infrastructure alerts
 	 *
-	 * @param {Object} networkResponse - The response from the network monitor.
-	 * @param {Object} networkResponse.monitor - The monitor object containing details about the monitored service.
-	 * @param {string} networkResponse.monitor.name - The name of the monitor.
-	 * @param {string} networkResponse.monitor.url - The URL of the monitor.
-	 * @param {boolean} networkResponse.status - The current status of the monitor (true for up, false for down).
-	 * @param {boolean} networkResponse.prevStatus - The previous status of the monitor (true for up, false for down).
-	 * @param {string} address - The email address to send the notification to.
+	 * @async
+	 * @function sendHardwareEmail
+	 * @param {Object} networkResponse - Response object containing monitor information
+	 * @param {string} address - Email address to send the notification to
+	 * @param {Array} [alerts=[]] - List of hardware alerts to include in the email
+	 * @returns {Promise<boolean>} - Indicates whether email was sent successfully
+	 * @throws {Error}
 	 */
-	async sendEmail(networkResponse, address, alerts = []) {
+	async sendHardwareEmail(networkResponse, address, alerts = []) {
+		if (alerts.length === 0) return false;
+		const { monitor, status, prevStatus } = networkResponse;
+		const template = "hardwareIncidentTemplate";
+		const context = { monitor: monitor.name, url: monitor.url, alerts };
+		const subject = `Monitor ${monitor.name} infrastructure alerts`;
+		this.emailService.buildAndSendEmail(template, context, address, subject);
+		return true;
+	}
+
+	/**
+	 * Sends an email notification about monitor status change
+	 *
+	 * @async
+	 * @function sendEmail
+	 * @param {Object} networkResponse - Response object containing monitor status information
+	 * @param {string} address - Email address to send the notification to
+	 * @returns {Promise<boolean>} - Indicates email was sent successfully
+	 */
+	async sendEmail(networkResponse, address) {
 		const { monitor, status, prevStatus } = networkResponse;
-		if (monitor.type === "hardware") {
-			const template = "hardwareIncidentTemplate";
-			const context = { monitor: monitor.name, url: monitor.url, alerts };
-			const subject = `Monitor ${monitor.name} infrastructure alerts`;
-			this.emailService.buildAndSendEmail(template, context, address, subject);
-			return;
-		}
 		const template = prevStatus === false ? "serverIsUpTemplate" : "serverIsDownTemplate";
 		const context = { monitor: monitor.name, url: monitor.url };
 		const subject = `Monitor ${monitor.name} is ${status === true ? "up" : "down"}`;
 		this.emailService.buildAndSendEmail(template, context, address, subject);
+		return true;
 	}
 
-	/**
-	 * Handles notifications based on the network response.
-	 *
-	 * @param {Object} networkResponse - The response from the network monitor.
-	 * @param {string} networkResponse.monitorId - The ID of the monitor.
-	 */
-	async handleNotifications(networkResponse) {
+	async handleStatusNotifications(networkResponse) {
 		try {
+			//If status hasn't changed, we're done
+			if (networkResponse.statusChanged === false) return false;
+
+			// if prevStatus is undefined, monitor is resuming, we're done
+			if (networkResponse.prevStatus === undefined) return false;
 			const notifications = await this.db.getNotificationsByMonitorId(
 				networkResponse.monitorId
 			);
+
 			for (const notification of notifications) {
 				if (notification.type === "email") {
 					this.sendEmail(networkResponse, notification.address);
 				}
 				// Handle other types of notifications here
 			}
+			return true;
 		} catch (error) {
 			this.logger.warn({
 				message: error.message,
@@ -65,10 +79,18 @@ class NotificationService {
 			});
 		}
 	}
-
-	async handleInfrastructureNotifications(networkResponse) {
+	/**
+	 * Handles status change notifications for a monitor
+	 *
+	 * @async
+	 * @function handleStatusNotifications
+	 * @param {Object} networkResponse - Response object containing monitor status information
+	 * @returns {Promise<boolean>} - Indicates whether notifications were processed
+	 * @throws {Error}
+	 */
+	async handleHardwareNotifications(networkResponse) {
 		const thresholds = networkResponse?.monitor?.thresholds;
-		if (thresholds === undefined) return; // No thresholds set, we're done
+		if (thresholds === undefined) return false; // No thresholds set, we're done
 
 		// Get thresholds from monitor
 		const {
@@ -78,7 +100,9 @@ class NotificationService {
 		} = thresholds;
 
 		// Get metrics from response
-		const metrics = networkResponse?.payload?.data ?? {};
+		const metrics = networkResponse?.payload?.data ?? null;
+		if (metrics === null) return false;
+
 		const {
 			cpu: { usage_percent: cpuUsage = -1 } = {},
 			memory: { usage_percent: memoryUsage = -1 } = {},
@@ -121,7 +145,6 @@ class NotificationService {
 										", "
 									)} is above your threshold (${(diskThreshold * 100).toFixed(0)}%)`,
 						};
-
 						alertsToSend.push(formatAlert[type]());
 					}
 				}
@@ -132,9 +155,35 @@ class NotificationService {
 			if (alertsToSend.length === 0) continue; // No alerts to send, we're done
 
 			if (notification.type === "email") {
-				this.sendEmail(networkResponse, notification.address, alertsToSend);
+				this.sendHardwareEmail(networkResponse, notification.address, alertsToSend);
 			}
 		}
+		return true;
+	}
+
+	/**
+	 * Handles notifications for different monitor types
+	 *
+	 * @async
+	 * @function handleNotifications
+	 * @param {Object} networkResponse - Response object containing monitor information
+	 * @returns {Promise<boolean>} - Indicates whether notifications were processed successfully
+	 */
+	async handleNotifications(networkResponse) {
+		try {
+			if (networkResponse.monitor.type === "hardware") {
+				this.handleHardwareNotifications(networkResponse);
+			}
+			this.handleStatusNotifications(networkResponse);
+			return true;
+		} catch (error) {
+			this.logger.warn({
+				message: error.message,
+				service: this.SERVICE_NAME,
+				method: "handleNotifications",
+				stack: error.stack,
+			});
+		}
 	}
 }
 

From b97e149d623546f5493ee2daac38d8e7a6845cf5 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Sun, 24 Nov 2024 17:43:50 +0800
Subject: [PATCH 137/142] update tests

---
 .../services/notificationService.test.js      | 202 +++++++++++++++++-
 1 file changed, 197 insertions(+), 5 deletions(-)

diff --git a/Server/tests/services/notificationService.test.js b/Server/tests/services/notificationService.test.js
index b33bd21ed..ccfdd22ae 100644
--- a/Server/tests/services/notificationService.test.js
+++ b/Server/tests/services/notificationService.test.js
@@ -78,11 +78,23 @@ describe("NotificationService", () => {
 	describe("handleNotifications", async () => {
 		it("should handle notifications based on the network response", async () => {
 			notificationService.sendEmail = sinon.stub();
-			notificationService.db.getNotificationsByMonitorId.resolves([
-				{ type: "email", address: "www.google.com" },
-			]);
-			await notificationService.handleNotifications({ monitorId: "123" });
-			expect(notificationService.sendEmail.calledOnce).to.be.true;
+			const res = await notificationService.handleNotifications({
+				monitor: {
+					type: "email",
+					address: "www.google.com",
+				},
+			});
+			expect(res).to.be.true;
+		});
+		it("should handle hardware notifications", async () => {
+			notificationService.sendEmail = sinon.stub();
+			const res = await notificationService.handleNotifications({
+				monitor: {
+					type: "hardware",
+					address: "www.google.com",
+				},
+			});
+			expect(res).to.be.true;
 		});
 
 		it("should handle an error when getting notifications", async () => {
@@ -92,4 +104,184 @@ describe("NotificationService", () => {
 			expect(notificationService.logger.warn.calledOnce).to.be.true;
 		});
 	});
+
+	describe("sendHardwareEmail", async () => {
+		let networkResponse, address, alerts;
+		beforeEach(() => {
+			networkResponse = {
+				monitor: {
+					name: "Test Monitor",
+					url: "http://test.com",
+				},
+				status: true,
+				prevStatus: false,
+			};
+			address = "test@test.com";
+			alerts = ["test"];
+		});
+
+		afterEach(() => {
+			sinon.restore();
+		});
+		it("should send an email notification with Hardware Template", async () => {
+			emailService.buildAndSendEmail.resolves(true);
+			const res = await notificationService.sendHardwareEmail(
+				networkResponse,
+				address,
+				alerts
+			);
+			expect(res).to.be.true;
+		});
+		it("should return false if no alerts are provided", async () => {
+			alerts = [];
+			emailService.buildAndSendEmail.resolves(true);
+			const res = await notificationService.sendHardwareEmail(
+				networkResponse,
+				address,
+				alerts
+			);
+			expect(res).to.be.false;
+		});
+	});
+	describe("handleStatusNotifications", async () => {
+		let networkResponse;
+		beforeEach(() => {
+			networkResponse = {
+				monitor: {
+					name: "Test Monitor",
+					url: "http://test.com",
+				},
+				statusChanged: true,
+				status: true,
+				prevStatus: false,
+			};
+		});
+
+		afterEach(() => {
+			sinon.restore();
+		});
+
+		it("should handle status notifications", async () => {
+			db.getNotificationsByMonitorId.resolves([
+				{ type: "email", address: "test@test.com" },
+			]);
+			const res = await notificationService.handleStatusNotifications(networkResponse);
+			expect(res).to.be.true;
+		});
+		it("should return false if status hasn't changed", async () => {
+			networkResponse.statusChanged = false;
+			const res = await notificationService.handleStatusNotifications(networkResponse);
+			expect(res).to.be.false;
+		});
+		it("should return false if prevStatus is undefined", async () => {
+			networkResponse.prevStatus = undefined;
+			const res = await notificationService.handleStatusNotifications(networkResponse);
+			expect(res).to.be.false;
+		});
+		it("should handle an error", async () => {
+			const testError = new Error("Test Error");
+			db.getNotificationsByMonitorId.rejects(testError);
+			try {
+				await notificationService.handleStatusNotifications(networkResponse);
+			} catch (error) {
+				expect(error).to.be.an.instanceOf(Error);
+				expect(error.message).to.equal("Test Error");
+			}
+		});
+	});
+
+	describe("handleHardwareNotifications", async () => {
+		let networkResponse;
+		beforeEach(() => {
+			networkResponse = {
+				monitor: {
+					name: "Test Monitor",
+					url: "http://test.com",
+					thresholds: {
+						usage_cpu: 1,
+						usage_memory: 1,
+						usage_disk: 1,
+					},
+				},
+				payload: {
+					data: {
+						cpu: {
+							usage_percent: 0.655,
+						},
+						memory: {
+							usage_percent: 0.783,
+						},
+						disk: [
+							{
+								name: "/dev/sda1",
+								usage_percent: 0.452,
+							},
+							{
+								name: "/dev/sdb1",
+								usage_percent: 0.627,
+							},
+						],
+					},
+				},
+			};
+		});
+		afterEach(() => {
+			sinon.restore();
+		});
+
+		describe("it should return false if no thresholds are set", () => {
+			it("should return false if no thresholds are set", async () => {
+				networkResponse.monitor.thresholds = undefined;
+				const res =
+					await notificationService.handleHardwareNotifications(networkResponse);
+				expect(res).to.be.false;
+			});
+
+			it("should return false if metrics are null", async () => {
+				networkResponse.payload.data = null;
+				const res =
+					await notificationService.handleHardwareNotifications(networkResponse);
+				expect(res).to.be.false;
+			});
+
+			it("should return true if request is well formed and thresholds > 0", async () => {
+				db.getNotificationsByMonitorId.resolves([
+					{
+						type: "email",
+						address: "test@test.com",
+						alertThreshold: 1,
+						cpuAlertThreshold: 1,
+						memoryAlertThreshold: 1,
+						diskAlertThreshold: 1,
+						save: sinon.stub().resolves(),
+					},
+				]);
+				const res =
+					await notificationService.handleHardwareNotifications(networkResponse);
+				expect(res).to.be.true;
+			});
+
+			it("should return true if thresholds are exceeded", async () => {
+				db.getNotificationsByMonitorId.resolves([
+					{
+						type: "email",
+						address: "test@test.com",
+						alertThreshold: 1,
+						cpuAlertThreshold: 1,
+						memoryAlertThreshold: 1,
+						diskAlertThreshold: 1,
+						save: sinon.stub().resolves(),
+					},
+				]);
+				networkResponse.monitor.thresholds = {
+					usage_cpu: 0.01,
+					usage_memory: 0.01,
+					usage_disk: 0.01,
+				};
+				const res =
+					await notificationService.handleHardwareNotifications(networkResponse);
+				expect(res).to.be.true;
+			});
+		});
+	});
 });

From 6363fa72e278ae18fad4b6f0349c927ba489cb25 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Mon, 25 Nov 2024 09:54:17 +0800
Subject: [PATCH 138/142] add back 50 checks to display for sanity

---
 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 5f08d71e1..179712c1f 100644
--- a/Client/src/Pages/Infrastructure/Details/index.jsx
+++ b/Client/src/Pages/Infrastructure/Details/index.jsx
@@ -192,7 +192,7 @@ const InfrastructureDetails = () => {
 					sortOrder: "asc",
 					limit: null,
 					dateRange: dateRange,
-					numToDisplay: null,
+					numToDisplay: 50,
 					normalize: false,
 				});
 				setMonitor(response.data.data);

From f90208bc0fa4e44c5244866b2d34a69e5005e11f Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Mon, 25 Nov 2024 09:55:01 +0800
Subject: [PATCH 139/142] Add dependencies to useEffect

---
 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 179712c1f..d32e94d50 100644
--- a/Client/src/Pages/Infrastructure/Details/index.jsx
+++ b/Client/src/Pages/Infrastructure/Details/index.jsx
@@ -201,7 +201,7 @@ const InfrastructureDetails = () => {
 			}
 		};
 		fetchData();
-	}, []);
+	}, [dateRange, monitorId, authToken]);
 
 	const statBoxConfigs = [
 		{

From 6dab90f5184abfe9839b7d12bfb1cfd42a8051ef Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Mon, 25 Nov 2024 10:06:40 +0800
Subject: [PATCH 140/142] fix logger missing debug level, replace console.error
 with logger.error

---
 Client/src/Pages/Infrastructure/Details/index.jsx | 3 ++-
 Client/src/Utils/Logger.js                        | 8 ++++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/Client/src/Pages/Infrastructure/Details/index.jsx b/Client/src/Pages/Infrastructure/Details/index.jsx
index d32e94d50..bdb43123c 100644
--- a/Client/src/Pages/Infrastructure/Details/index.jsx
+++ b/Client/src/Pages/Infrastructure/Details/index.jsx
@@ -9,6 +9,7 @@ import { useSelector } from "react-redux";
 import { networkService } from "../../../main";
 import PulseDot from "../../../Components/Animated/PulseDot";
 import useUtils from "../../Monitors/utils";
+import { logger } from "../../../Utils/Logger";
 import { formatDurationRounded, formatDurationSplit } from "../../../Utils/timeUtils";
 import {
 	TzTick,
@@ -197,7 +198,7 @@ const InfrastructureDetails = () => {
 				});
 				setMonitor(response.data.data);
 			} catch (error) {
-				console.error(error);
+				logger.error(error);
 			}
 		};
 		fetchData();
diff --git a/Client/src/Utils/Logger.js b/Client/src/Utils/Logger.js
index 177391b99..b22cc0a22 100644
--- a/Client/src/Utils/Logger.js
+++ b/Client/src/Utils/Logger.js
@@ -44,6 +44,14 @@ class Logger {
 			this.log = NO_OP;
 			return;
 		}
+
+		if (logLevel === "debug") {
+			this.error = console.error.bind(console);
+			this.warn = console.warn.bind(console);
+			this.info = console.info.bind(console);
+			this.log = console.log.bind(console);
+			return;
+		}
 	}
 
 	cleanup() {

From fec43778fafcb2ce7531fc24695536680e983ab4 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Mon, 25 Nov 2024 10:22:21 +0800
Subject: [PATCH 141/142] simplify formatting of values

---
 .../Pages/Infrastructure/Details/index.jsx    | 27 +++++++++++++++----
 1 file changed, 22 insertions(+), 5 deletions(-)

diff --git a/Client/src/Pages/Infrastructure/Details/index.jsx b/Client/src/Pages/Infrastructure/Details/index.jsx
index 6730ed7ec..b76aa3de3 100644
--- a/Client/src/Pages/Infrastructure/Details/index.jsx
+++ b/Client/src/Pages/Infrastructure/Details/index.jsx
@@ -28,6 +28,7 @@ const TYPOGRAPHY_PADDING = 8;
  * @returns {number} Converted value in gigabytes
  */
 const formatBytes = (bytes) => {
+	if (bytes === undefined || bytes === null) return "0 GB";
 	if (typeof bytes !== "number") return "0 GB";
 	if (bytes === 0) return "0 GB";
 
@@ -41,6 +42,22 @@ const formatBytes = (bytes) => {
 	}
 };
 
+/**
+ * Converts a decimal value to a percentage
+ *
+ * @function decimalToPercentage
+ * @param {number} value - Decimal value to convert
+ * @returns {number} Percentage representation
+ *
+ * @example
+ * decimalToPercentage(0.75)  // Returns 75
+ * decimalToPercentage(null)  // Returns 0
+ */
+const decimalToPercentage = (value) => {
+	if (value === null || undefined) return 0;
+	return value * 100;
+};
+
 /**
  * Renders a base box with consistent styling
  * @param {Object} props - Component properties
@@ -237,16 +254,16 @@ const InfrastructureDetails = () => {
 	const gaugeBoxConfigs = [
 		{
 			type: "memory",
-			value: monitor?.checks[0]?.memory?.usage_percent ?? 0 * 100,
+			value: decimalToPercentage(monitor?.checks[0]?.memory?.usage_percent),
 			heading: "Memory Usage",
 			metricOne: "Used",
-			valueOne: formatBytes(monitor?.checks[0]?.memory?.used_bytes ?? 0),
+			valueOne: formatBytes(monitor?.checks[0]?.memory?.used_bytes),
 			metricTwo: "Total",
-			valueTwo: formatBytes(monitor?.checks[0]?.memory?.total_bytes ?? 0),
+			valueTwo: formatBytes(monitor?.checks[0]?.memory?.total_bytes),
 		},
 		{
 			type: "cpu",
-			value: monitor?.checks[0]?.cpu?.usage_percent ?? 0 * 100,
+			value: decimalToPercentage(monitor?.checks[0]?.cpu?.usage_percent),
 			heading: "CPU Usage",
 			metricOne: "Cores",
 			valueOne: monitor?.checks[0]?.cpu?.physical_core ?? 0,
@@ -256,7 +273,7 @@ const InfrastructureDetails = () => {
 		...(monitor?.checks?.[0]?.disk ?? []).map((disk, idx) => ({
 			type: "disk",
 			diskIndex: idx,
-			value: disk.usage_percent * 100 ?? 0,
+			value: decimalToPercentage(disk.usage_percent),
 			heading: `Disk${idx} usage`,
 			metricOne: "Used",
 			valueOne: formatBytes(disk.total_bytes - disk.free_bytes),

From 21546ef65c18a5f181d936208440f1190dc583b7 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Mon, 25 Nov 2024 10:33:52 +0800
Subject: [PATCH 142/142] fix conditional error

---
 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 b76aa3de3..e1611f982 100644
--- a/Client/src/Pages/Infrastructure/Details/index.jsx
+++ b/Client/src/Pages/Infrastructure/Details/index.jsx
@@ -54,7 +54,7 @@ const formatBytes = (bytes) => {
  * decimalToPercentage(null)  // Returns 0
  */
 const decimalToPercentage = (value) => {
-	if (value === null || undefined) return 0;
+	if (value === null || value === undefined) return 0;
 	return value * 100;
 };