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] - 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,
 };