- 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

Client/src/Pages/InfrastructureMonitors/CreateMonitor/CustomThreshold/index.jsx

@@ -0,0 +1,92 @@
+import { Box, Stack, Typography } from "@mui/material";
+import Field from "../../../../Components/Inputs/Field";
+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 
+ * 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,
+    onCheckboxChange,
+    fieldId,		
+    onFieldChange,
+    onFieldBlur,
+    alertUnit,
+    infrastructureMonitor,
+    errors
+}) => 
+    {
+        const theme  = useTheme();
+        return (
+    <Stack
+        direction={"row"}
+        sx={{
+            width: "50%",
+            justifyContent: "space-between",
+            overflowWrap: "anywhere"
+        }}
+    >
+        <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,
+};

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(