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]} > { 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 = () => { - - - - {/* - - */} + {HARDWARE_MONITOR_TYPES.map((type, idx) => ( + + ))} {alertErrKeyLen > 0 && ( { 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] + ] + } )} 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); +}