TRX/Checkmate
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- All threshold use same error msg

Browse Source 
- Display one common error msg at bottom
for any field with error
- Hide individual field error for threshold input
This commit is contained in:
Shemy Gan committed 2024-11-11 20:10:49 -05:00
1 parent d5c51482f7
commit 11d71060b2
3 files changed
+64 -27
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Client/src/Components/Inputs/Field/index.jsx
+2 -1
View File
@@ -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={{
Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx
+44 -11
View File
@@ -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)}>
Client/src/Validation/validation.js
+18 -15
View File
@@ -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,
};