mirror of
https://github.com/bluewave-labs/Checkmate.git
synced 2026-01-20 16:49:46 -06:00
93 lines
2.9 KiB
JavaScript
93 lines
2.9 KiB
JavaScript
import { Box, Stack, Typography } from "@mui/material";
|
|
import TextInput from "../../../../Components/Inputs/TextInput";
|
|
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",
|
|
flexWrap: "wrap",
|
|
}}
|
|
>
|
|
<Box>
|
|
<Checkbox
|
|
id={checkboxId}
|
|
label={checkboxLabel}
|
|
isChecked={infrastructureMonitor[checkboxId]}
|
|
onChange={onCheckboxChange}
|
|
/>
|
|
</Box>
|
|
<Stack
|
|
direction={"row"}
|
|
sx={{
|
|
justifyContent: "flex-end",
|
|
}}
|
|
>
|
|
<TextInput
|
|
maxWidth="var(--env-var-width-4)"
|
|
type="number"
|
|
id={fieldId}
|
|
value={infrastructureMonitor[fieldId]}
|
|
onBlur={onFieldBlur}
|
|
onChange={onFieldChange}
|
|
error={errors[fieldId] ? true : false}
|
|
disabled={!infrastructureMonitor[checkboxId]}
|
|
/>
|
|
|
|
<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,
|
|
};
|