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

- Extract CustomThreshold component

Browse Source 
- Refine Error setting in validation to remove any leftover errors
- Add back the await as it is indeed needed even though syntax checker prompts to remove it
This commit is contained in:
Shemy Gan committed 2024-11-12 10:19:03 -05:00
1 parent 2e51f025f9
commit 8737dbfd5b
3 files changed
+89 -61
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Client/src/Components/CustomThreshold/index.jsx
+72
View File
@@ -0,0 +1,72 @@
import { Box, Stack, Typography } from "@mui/material";
import Field from "../Inputs/Field";
import Checkbox from "../Inputs/Checkbox";
import { useTheme } from "@emotion/react";
import PropTypes from "prop-types";
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",
}}
>
<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
+9 -55
View File
@@ -18,6 +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";
const CreateInfrastructureMonitor = () => {
const [infrastructureMonitor, setInfrastructureMonitor] = useState({
@@ -52,55 +53,6 @@ const CreateInfrastructureMonitor = () => {
const alertErrKeyLen = Object.keys(errors)
.filter(k => k.startsWith(THRESHOLD_FIELD_PREFIX)).length
const CustomAlertStack = ({
checkboxId,
checkboxLabel,
fieldId,
alertUnit,
onChange,
onBlur,
}) => (
<Stack
direction={"row"}
sx={{
width: "50%",
justifyContent: "space-between",
}}
>
<Box>
<Checkbox
id={checkboxId}
label={checkboxLabel}
isChecked={infrastructureMonitor[checkboxId]}
onChange={handleCustomAlertCheckChange}
/>
</Box>
<Stack
direction={"row"}
sx={{
justifyContent: "flex-end",
}}
>
<Field
type="number"
className="field-infrastructure-alert"
id={fieldId}
value={infrastructureMonitor[fieldId]}
onBlur={onBlur}
onChange={onChange}
error={errors[fieldId]}
disabled={!infrastructureMonitor[checkboxId]}
></Field>
<Typography
component="p"
m={theme.spacing(3)}
>
{alertUnit}
</Typography>
</Stack>
</Stack>
);
const handleCustomAlertCheckChange = (event) => {
const { value, id } = event.target;
setInfrastructureMonitor((prev) => {
@@ -209,7 +161,7 @@ const CreateInfrastructureMonitor = () => {
if (hasValidationErrors(form, infrastractureMonitorValidation, setErrors)) {
return;
} else {
const checkEndpointAction = dispatch(
const checkEndpointAction = await dispatch(
checkInfrastructureEndpointResolution({ authToken, monitorURL: form.url })
);
if (checkEndpointAction.meta.requestStatus === "rejected") {
@@ -219,7 +171,7 @@ const CreateInfrastructureMonitor = () => {
setErrors({ url: "The entered URL is not reachable." });
return;
}
const action = dispatch(
const action = await dispatch(
createInfrastructureMonitor({ authToken, monitor: generatePayload(form) })
);
if (action.meta.requestStatus === "fulfilled") {
@@ -370,18 +322,20 @@ const CreateInfrastructureMonitor = () => {
</Box>
<Stack gap={theme.spacing(6)}>
{HARDWARE_MONITOR_TYPES.map((type, idx) => (
<CustomAlertStack
<CustomThreshold
key={idx}
checkboxId={type}
checkboxLabel={
type !== "cpu" ? capitalizeFirstLetter(type) : type.toUpperCase()
}
checkboxValue={""}
onCheckboxChange={handleCustomAlertCheckChange}
fieldId={THRESHOLD_FIELD_PREFIX + type}
fieldValue={infrastructureMonitor[THRESHOLD_FIELD_PREFIX + type] ?? ""}
onChange={handleChange}
onBlur={handleBlur}
onFieldChange={handleChange}
onFieldBlur={handleBlur}
alertUnit="%"
infrastructureMonitor={infrastructureMonitor}
errors={errors}
/>
))}
{alertErrKeyLen > 0 && (
Client/src/Validation/error.js
+8 -6
View File
@@ -1,7 +1,7 @@
const buildErrors = (prev, id, error) => {
const updatedErrors = { ...prev };
if (error) {
updatedErrors[id] = error.details[0].message?? "Validation error";
updatedErrors[id] = error.details[0].message ?? "Validation error";
} else {
delete updatedErrors[id];
}
@@ -27,22 +27,24 @@ const hasValidationErrors = (form, validation, setErrors) => {
) {
newErrors[err.path[0]] = err.message ?? "Validation error";
}
// Handle conditionally usage number required cases
if (!form.cpu || (form.cpu && form.usage_cpu)) {
delete newErrors["usage_cpu"];
}
}
if (!form.memory || (form.memory && form.usage_memory)) {
delete newErrors["usage_memory"];
}
}
if (!form.disk || (form.disk && form.usage_disk)) {
delete newErrors["usage_disk"];
}
}
});
if (Object.keys(newErrors).length > 0) {
setErrors(newErrors);
return true;
} else return false;
} else {
setErrors({});
return false;
}
}
return false;
};