Merge remote-tracking branch 'upstream/develop' into fix/fe/uptime-refactor

Client/package-lock.json

@@ -15,9 +15,9 @@
 				"@mui/lab": "6.0.0-beta.24",
 				"@mui/material": "6.4.1",
 				"@mui/x-charts": "^7.5.1",
-				"@mui/x-data-grid": "7.24.0",
-				"@mui/x-date-pickers": "7.24.0",
-				"@reduxjs/toolkit": "2.5.0",
+				"@mui/x-data-grid": "7.24.1",
+				"@mui/x-date-pickers": "7.24.1",
+				"@reduxjs/toolkit": "2.5.1",
 				"axios": "^1.7.4",
 				"dayjs": "1.11.13",
 				"joi": "17.13.3",
@@ -1390,15 +1390,15 @@
 			"license": "MIT"
 		},
 		"node_modules/@mui/x-charts": {
-			"version": "7.24.0",
-			"resolved": "https://registry.npmjs.org/@mui/x-charts/-/x-charts-7.24.0.tgz",
-			"integrity": "sha512-X/zN0GxPHJC24QckFrtEbIK0HYoGwZgpNC5CV9cvRGvHphDFuNZk9xg9fJwIg1i3PPZHXRO3E+L/ee6fJ9ufhw==",
+			"version": "7.24.1",
+			"resolved": "https://registry.npmjs.org/@mui/x-charts/-/x-charts-7.24.1.tgz",
+			"integrity": "sha512-OdTS/nXaANPe4AoUFIDD4LlID8kK/00q+uqVOCkVClEvFQeAkj3pBaghdS4hY7rVqsCgsm+yOStQVJa9G2MR+Q==",
 			"license": "MIT",
 			"dependencies": {
 				"@babel/runtime": "^7.25.7",
 				"@mui/utils": "^5.16.6 || ^6.0.0",
 				"@mui/x-charts-vendor": "7.20.0",
-				"@mui/x-internals": "7.24.0",
+				"@mui/x-internals": "7.24.1",
 				"@react-spring/rafz": "^9.7.5",
 				"@react-spring/web": "^9.7.5",
 				"clsx": "^2.1.1",
@@ -1448,14 +1448,14 @@
 			}
 		},
 		"node_modules/@mui/x-data-grid": {
-			"version": "7.24.0",
-			"resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-7.24.0.tgz",
-			"integrity": "sha512-goYTKDp+e+dXw7E+WndWUhWXTjX3aTqN8W2dCKhXnmE9Gu8dFwG6Azl7GK9l2m5YHGuqYmpWqcSG9etLdwYaVg==",
+			"version": "7.24.1",
+			"resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-7.24.1.tgz",
+			"integrity": "sha512-4sYTbMwsDotuTd2Cwa2JGTPXPWQs8RGJvocAKnIsNOzNdZNMrikE//HO35snriK8s4dauAApY7RVbeisjpVT+A==",
 			"license": "MIT",
 			"dependencies": {
 				"@babel/runtime": "^7.25.7",
 				"@mui/utils": "^5.16.6 || ^6.0.0",
-				"@mui/x-internals": "7.24.0",
+				"@mui/x-internals": "7.24.1",
 				"clsx": "^2.1.1",
 				"prop-types": "^15.8.1",
 				"reselect": "^5.1.1"
@@ -1485,14 +1485,14 @@
 			}
 		},
 		"node_modules/@mui/x-date-pickers": {
-			"version": "7.24.0",
-			"resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-7.24.0.tgz",
-			"integrity": "sha512-oBM9Yp2H3tJ7qoHB4APQJYxZG4rz6JD4CwLzbzD9o3r+E1HGpGSLhwK3rDEz9VEjbOq8893Z2TGYLLWoyjeFXQ==",
+			"version": "7.24.1",
+			"resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-7.24.1.tgz",
+			"integrity": "sha512-ykQugMQHuQKBk3kViW/r0PpubtHQOlrd54bgbdafgTMCeM2VpXvv4zimzOu5IGnM6wEN8hupC7EXZbkrT6x46w==",
 			"license": "MIT",
 			"dependencies": {
 				"@babel/runtime": "^7.25.7",
 				"@mui/utils": "^5.16.6 || ^6.0.0",
-				"@mui/x-internals": "7.24.0",
+				"@mui/x-internals": "7.24.1",
 				"@types/react-transition-group": "^4.4.11",
 				"clsx": "^2.1.1",
 				"prop-types": "^15.8.1",
@@ -1551,9 +1551,9 @@
 			}
 		},
 		"node_modules/@mui/x-internals": {
-			"version": "7.24.0",
-			"resolved": "https://registry.npmjs.org/@mui/x-internals/-/x-internals-7.24.0.tgz",
-			"integrity": "sha512-lYa/XLltxNMY8YAFDopIHrXda2EAoqMCilyGMuPMz+WTG+b+StlUKqtj8cgFPQ/sa5dQ2fR7R3KJdjLREKUrlQ==",
+			"version": "7.24.1",
+			"resolved": "https://registry.npmjs.org/@mui/x-internals/-/x-internals-7.24.1.tgz",
+			"integrity": "sha512-9BvJzpLJnS9BDphvkiv6v0QOLxbnu8jhwcexFjtCQ2ZyxtVuVsWzGZ2npT9sGOil7+eaFDmWnJtea/tgrPvSwQ==",
 			"license": "MIT",
 			"dependencies": {
 				"@babel/runtime": "^7.25.7",
@@ -1691,9 +1691,9 @@
 			}
 		},
 		"node_modules/@reduxjs/toolkit": {
-			"version": "2.5.0",
-			"resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.5.0.tgz",
-			"integrity": "sha512-awNe2oTodsZ6LmRqmkFhtb/KH03hUhxOamEQy411m3Njj3BbFvoBovxo4Q1cBWnV1ErprVj9MlF0UPXkng0eyg==",
+			"version": "2.5.1",
+			"resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.5.1.tgz",
+			"integrity": "sha512-UHhy3p0oUpdhnSxyDjaRDYaw8Xra75UiLbCiRozVPHjfDwNYkh0TsVm/1OmTW8Md+iDAJmYPWUKMvsMc2GtpNg==",
 			"license": "MIT",
 			"dependencies": {
 				"immer": "^10.0.3",

Client/package.json

@@ -18,9 +18,9 @@
 		"@mui/lab": "6.0.0-beta.24",
 		"@mui/material": "6.4.1",
 		"@mui/x-charts": "^7.5.1",
-		"@mui/x-data-grid": "7.24.0",
-		"@mui/x-date-pickers": "7.24.0",
-		"@reduxjs/toolkit": "2.5.0",
+		"@mui/x-data-grid": "7.24.1",
+		"@mui/x-date-pickers": "7.24.1",
+		"@reduxjs/toolkit": "2.5.1",
 		"axios": "^1.7.4",
 		"dayjs": "1.11.13",
 		"joi": "17.13.3",

Client/src/Pages/Infrastructure/Details/index.jsx

@@ -625,8 +625,7 @@ const InfrastructureDetails = () => {
 						</ButtonGroup>
 					</Stack>
 					<Stack
-						direction={"row"}
-						height={chartContainerHeight} // FE team HELP!
+						direction="row"
 						gap={theme.spacing(8)} // FE team HELP!
 						flexWrap="wrap" // //FE team HELP! Better way to do this?
 						sx={{

Client/src/Pages/Infrastructure/index.jsx

@@ -137,20 +137,18 @@ function Infrastructure() {
 			id: "actions",
 			content: "Actions",
 			render: (row) => (
-				<IconButton>
-					<InfrastructureMenu
-						monitor={row}
-						isAdmin={isAdmin}
-						updateCallback={handleActionMenuDelete}
-					/>
-				</IconButton>
+				<InfrastructureMenu
+					monitor={row}
+					isAdmin={isAdmin}
+					updateCallback={handleActionMenuDelete}
+				/>
 			),
 		},
 	];
 
 	const monitorsAsRows = monitors.map((monitor) => {
 		const processor =
-			((monitor.checks[0]?.cpu?.usage_frequency ?? 0) / 1000).toFixed(2) + " GHz";
+			((monitor.checks[0]?.cpu?.frequency ?? 0) / 1000).toFixed(2) + " GHz";
 		const cpu = (monitor?.checks[0]?.cpu.usage_percent ?? 0) * 100;
 		const mem = (monitor?.checks[0]?.memory.usage_percent ?? 0) * 100;
 		const disk = (monitor?.checks[0]?.disk[0]?.usage_percent ?? 0) * 100;
@@ -158,14 +156,12 @@ function Infrastructure() {
 		const uptimePercentage = ((monitor?.uptimePercentage ?? 0) * 100)
 			.toFixed(2)
 			.toString();
-		const percentageColor =
-			monitor.uptimePercentage < 0.25
-				? theme.palette.error.main
-				: monitor.uptimePercentage < 0.5
-					? theme.palette.percentage.uptimeFair
-					: monitor.uptimePercentage < 0.75
-						? theme.palette.percentage.uptimeGood
-						: theme.palette.success.lowContrast;
+		const percentageColor = monitor.uptimePercentage < 0.25
+			? theme.palette.error.main
+			: monitor.uptimePercentage < 0.5
+				? theme.palette.warning.main
+				: theme.palette.success.main;
+				
 		return {
 			id: monitor._id,
 			name: monitor.name,
@@ -243,7 +239,7 @@ function Infrastructure() {
 								backgroundColor={theme.palette.tertiary.main}
 								sx={{
 									padding: ".25em .75em",
-									borderRadius: "50%",
+									borderRadius: "10000px",
 									fontSize: "12px",
 									fontWeight: 500,
 								}}

Client/src/Pages/PageSpeed/index.jsx

@@ -106,9 +106,15 @@ const PageSpeed = () => {
 							component="span"
 							className="current-monitors-counter"
 							color={theme.palette.primary.contrastText}
-							border={1}
-							borderColor={theme.palette.primary.lowContrast}
+							border={2}
+							borderColor={theme.palette.accent.main}
 							backgroundColor={theme.palette.tertiary.main}
+							sx={{
+								padding: ".25em .75em",
+								borderRadius: "10000px",
+								fontSize: "12px",
+								fontWeight: 500,
+							}}
 						>
 							{summary?.totalMonitors ?? 0}
 						</Box>

Client/src/Pages/Uptime/CreateUptime/index.jsx

@@ -235,53 +235,6 @@ const CreateMonitor = () => {
 						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)}>
-						<TextInput
-							type={monitor.type === "http" ? "url" : "text"}
-							id="monitor-url"
-							startAdornment={
-								monitor.type === "http" ? <HttpAdornment https={https} /> : null
-							}
-							label={monitorTypeMaps[monitor.type].label || "URL to monitor"}
-							https={https}
-							placeholder={monitorTypeMaps[monitor.type].placeholder || ""}
-							value={monitor.url}
-							onChange={(event) => handleChange(event, "url")}
-							error={errors["url"] ? true : false}
-							helperText={errors["url"]}
-						/>
-						<TextInput
-							type="number"
-							id="monitor-port"
-							label="Port to monitor"
-							placeholder="5173"
-							value={monitor.port}
-							onChange={(event) => handleChange(event, "port")}
-							error={errors["port"] ? true : false}
-							helperText={errors["port"]}
-							hidden={monitor.type !== "port"}
-						/>
-						<TextInput
-							type="text"
-							id="monitor-name"
-							label="Display name"
-							isOptional={true}
-							placeholder={monitorTypeMaps[monitor.type].namePlaceholder || ""}
-							value={monitor.name}
-							onChange={(event) => handleChange(event, "name")}
-							error={errors["name"] ? true : false}
-							helperText={errors["name"]}
-						/>
-					</Stack>
-				</ConfigBox>
 				<ConfigBox>
 					<Box>
 						<Typography component="h2">Checks to perform</Typography>
@@ -363,6 +316,52 @@ const CreateMonitor = () => {
 						)}
 					</Stack>
 				</ConfigBox>
+				<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)}>
+						<TextInput
+							type={monitor.type === "http" ? "url" : "text"}
+							id="monitor-url"
+							startAdornment={
+								monitor.type === "http" ? <HttpAdornment https={https} /> : null
+							}
+							label={monitorTypeMaps[monitor.type].label || "URL to monitor"}
+							https={https}
+							placeholder={monitorTypeMaps[monitor.type].placeholder || ""}
+							value={monitor.url}
+							onChange={(event) => handleChange(event, "url")}
+							error={errors["url"] ? true : false}
+							helperText={errors["url"]}
+						/>
+						<TextInput
+							type="number"
+							id="monitor-port"
+							label="Port to monitor"
+							placeholder="5173"
+							value={monitor.port}
+							onChange={(event) => handleChange(event, "port")}
+							error={errors["port"] ? true : false}
+							helperText={errors["port"]}
+							hidden={monitor.type !== "port"}
+						/>
+						<TextInput
+							type="text"
+							id="monitor-name"
+							label="Display name"
+							isOptional={true}
+							placeholder={monitorTypeMaps[monitor.type].namePlaceholder || ""}
+							value={monitor.name}
+							onChange={(event) => handleChange(event, "name")}
+							error={errors["name"] ? true : false}
+							helperText={errors["name"]}
+						/>
+					</Stack>
+				</ConfigBox>
 				<ConfigBox>
 					<Box>
 						<Typography component="h2">Incident notifications</Typography>

Client/src/Utils/NetworkServiceProvider.jsx

@@ -1,14 +1,15 @@
 import { useDispatch } from "react-redux";
 import { useNavigate } from "react-router";
 import { setNetworkService } from "./NetworkService";
-import NetworkService from "./NetworkService";
+import NetworkService, { networkService } from "./NetworkService";
 import { store } from "../store";
 
 const NetworkServiceProvider = ({ children }) => {
 	const dispatch = useDispatch();
 	const navigate = useNavigate();
-	const networkService = new NetworkService(store, dispatch, navigate);
-	setNetworkService(networkService);
+	if (!networkService) {
+		setNetworkService(new NetworkService(store, dispatch, navigate));
+	}
 	return children;
 };