Feat: Uptime Monitor Filters

This commit is contained in:
Br0wnHammer
2025-04-03 15:07:42 +05:30
parent bda7e4706b
commit 3dc77d6e27
3 changed files with 23 additions and 24 deletions

View File

@@ -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} />

View File

@@ -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,

View File

@@ -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,