mirror of
https://github.com/bluewave-labs/Checkmate.git
synced 2026-01-27 04:09:46 -06:00
Feat: Uptime Monitor Filters
This commit is contained in:
@@ -19,6 +19,8 @@ import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
|
||||
const FilterHeader = ({ header, options, value, onChange, multiple = true }) => {
|
||||
const theme = useTheme();
|
||||
|
||||
const controlledValue = value === undefined ? [] : value; // Ensure value is always treated as an array for controlled component purposes
|
||||
|
||||
return (
|
||||
<FormControl
|
||||
sx={{ m: theme.spacing(2), minWidth: "10%" }}
|
||||
@@ -33,7 +35,7 @@ const FilterHeader = ({ header, options, value, onChange, multiple = true }) =>
|
||||
/>
|
||||
)}
|
||||
displayEmpty
|
||||
value={value ?? []}
|
||||
value={controlledValue}
|
||||
onChange={onChange}
|
||||
renderValue={(selected) => {
|
||||
if (!selected?.length) {
|
||||
@@ -52,7 +54,7 @@ const FilterHeader = ({ header, options, value, onChange, multiple = true }) =>
|
||||
value={option.value}
|
||||
>
|
||||
<Checkbox
|
||||
checked={value?.includes(option.value)}
|
||||
checked={controlledValue.includes(option.value)}
|
||||
size="small"
|
||||
/>
|
||||
<ListItemText primary={option.label} />
|
||||
|
||||
@@ -51,7 +51,7 @@ const Filter = ({
|
||||
setSelectedStatus(selectedValues.length > 0 ? selectedValues : undefined);
|
||||
|
||||
if (selectedValues.length === 0 || selectedValues.length === 2) {
|
||||
setToFilterStatus(null);
|
||||
setToFilterStatus(undefined);
|
||||
} else {
|
||||
setToFilterStatus(selectedValues[0] === "Up" ? "true" : "false");
|
||||
}
|
||||
@@ -62,7 +62,7 @@ const Filter = ({
|
||||
setSelectedState(selectedValues);
|
||||
|
||||
if (selectedValues.length === 0 || selectedValues.length === 2) {
|
||||
setToFilterActive(null);
|
||||
setToFilterActive(undefined);
|
||||
} else {
|
||||
setToFilterActive(selectedValues[0] === "Active" ? "true" : "false");
|
||||
}
|
||||
@@ -137,11 +137,11 @@ const Filter = ({
|
||||
};
|
||||
|
||||
Filter.propTypes = {
|
||||
selectedTypes: PropTypes.arrayOf(PropTypes.string).isRequired,
|
||||
selectedTypes: PropTypes.arrayOf(PropTypes.string),
|
||||
setSelectedTypes: PropTypes.func.isRequired,
|
||||
selectedStatus: PropTypes.arrayOf(PropTypes.string).isRequired,
|
||||
selectedStatus: PropTypes.arrayOf(PropTypes.string),
|
||||
setSelectedStatus: PropTypes.func.isRequired,
|
||||
selectedState: PropTypes.arrayOf(PropTypes.string).isRequired,
|
||||
selectedState: PropTypes.arrayOf(PropTypes.string),
|
||||
setSelectedState: PropTypes.func.isRequired,
|
||||
setToFilterStatus: PropTypes.func.isRequired,
|
||||
setToFilterActive: PropTypes.func.isRequired,
|
||||
|
||||
@@ -73,8 +73,8 @@ const UptimeMonitors = () => {
|
||||
const [selectedTypes, setSelectedTypes] = useState(undefined);
|
||||
const [selectedState, setSelectedState] = useState(undefined);
|
||||
const [selectedStatus, setSelectedStatus] = useState(undefined);
|
||||
const [toFilterStatus, setToFilterStatus] = useState(null);
|
||||
const [toFilterActive, setToFilterActive] = useState(null);
|
||||
const [toFilterStatus, setToFilterStatus] = useState(undefined);
|
||||
const [toFilterActive, setToFilterActive] = useState(undefined);
|
||||
|
||||
// Utils
|
||||
const theme = useTheme();
|
||||
@@ -114,23 +114,20 @@ const UptimeMonitors = () => {
|
||||
setSelectedState(undefined);
|
||||
setSelectedTypes(undefined);
|
||||
setSelectedStatus(undefined);
|
||||
setToFilterStatus(null);
|
||||
setToFilterActive(null);
|
||||
setToFilterStatus(undefined);
|
||||
setToFilterActive(undefined);
|
||||
};
|
||||
|
||||
const field =
|
||||
toFilterStatus !== null
|
||||
? "status"
|
||||
: toFilterActive !== null
|
||||
? "isActive"
|
||||
: sort?.field;
|
||||
const filterLookup = new Map([
|
||||
[toFilterStatus, "status"],
|
||||
[toFilterActive, "isActive"]
|
||||
]);
|
||||
|
||||
const filter =
|
||||
toFilterStatus !== null
|
||||
? toFilterStatus
|
||||
: toFilterActive !== null
|
||||
? toFilterActive
|
||||
: search;
|
||||
const activeFilter = [...filterLookup].find(([key]) => key !== undefined);
|
||||
const field = activeFilter?.[1] || sort?.field;
|
||||
const filter = activeFilter?.[0] || search;
|
||||
|
||||
const effectiveTypes = selectedTypes?.length ? selectedTypes : TYPES;
|
||||
|
||||
const [
|
||||
monitorsWithChecks,
|
||||
@@ -139,7 +136,7 @@ const UptimeMonitors = () => {
|
||||
monitorsWithChecksNetworkError,
|
||||
] = useFetchMonitorsWithChecks({
|
||||
teamId,
|
||||
types: selectedTypes && selectedTypes.length > 0 ? selectedTypes : TYPES,
|
||||
types: effectiveTypes,
|
||||
limit: 25,
|
||||
page: page,
|
||||
rowsPerPage: rowsPerPage,
|
||||
|
||||
Reference in New Issue
Block a user