Feat: Infra Monitors Filters

src/Components/FilterHeader/index.jsx

@@ -23,7 +23,7 @@ const FilterHeader = ({ header, options, value, onChange, multiple = true }) =>
 
 	return (
 		<FormControl
-			sx={{ m: theme.spacing(2), minWidth: "10%" }}
+			sx={{ minWidth: "10%" }}
 			size="small"
 		>
 			<Select

src/Pages/Infrastructure/Monitors/Components/Filters/index.jsx

@@ -0,0 +1,84 @@
+import { useTheme } from "@emotion/react";
+import PropTypes from "prop-types";
+import FilterHeader from "../../../../../Components/FilterHeader";
+import { useMemo } from "react";
+import { Box, Button } from "@mui/material";
+import ClearIcon from "@mui/icons-material/Clear";
+import { useTranslation } from "react-i18next";
+
+/**
+ * Filter Component
+ *
+ * A high-level component that provides filtering options for status in Infrastructure Page.
+ * It allows users to select multiple options for each filter and reset the filters.
+ *
+ * @component
+ * @param {Object} props - The component props.
+ * @param {string[]} props.selectedStatus - An array of selected status values.
+ * @param {function} props.setSelectedStatus - A function to set the selected status values.
+ * @param {function} props.setToFilterStatus - A function to set the filter status based on selected status values.
+ * @param {function} props.handleReset - A function to reset all filters.
+ *
+ * @returns {JSX.Element} The rendered Filter component.
+ */
+
+const statusOptions = [
+	{ value: "Up", label: "Up" },
+	{ value: "Down", label: "Down" },
+];
+
+const Filter = ({
+	selectedStatus,
+	setSelectedStatus,
+	setToFilterStatus,
+	handleReset,
+}) => {
+	const theme = useTheme();
+	const { t } = useTranslation();
+
+	const handleStatusChange = (event) => {
+		const selectedValues = event.target.value;
+		setSelectedStatus(selectedValues.length > 0 ? selectedValues : undefined);
+
+		if (selectedValues.length === 0 || selectedValues.length === 2) {
+			setToFilterStatus(undefined);
+		} else {
+			setToFilterStatus(selectedValues[0] === "Up" ? "true" : "false");
+		}
+	};
+
+	const isFilterActive = useMemo(() => {
+		return selectedStatus?.length ?? 0 > 0;
+	}, [selectedStatus]);
+
+	return (
+		<Box>
+			<FilterHeader
+				header={t("status")}
+				options={statusOptions}
+				value={selectedStatus}
+				onChange={handleStatusChange}
+			/>
+			<Button
+				color={theme.palette.primary.contrastText}
+				onClick={handleReset}
+				variant="contained"
+				endIcon={<ClearIcon />}
+				sx={{
+					visibility: isFilterActive ? "visible" : "hidden",
+				}}
+			>
+				{t("reset")}
+			</Button>
+		</Box>
+	);
+};
+
+Filter.propTypes = {
+    selectedStatus: PropTypes.arrayOf(PropTypes.string),
+    setSelectedStatus: PropTypes.func.isRequired,
+    setToFilterStatus: PropTypes.func.isRequired,
+    handleReset: PropTypes.func.isRequired,
+};
+
+export default Filter;

src/Pages/Infrastructure/Monitors/Hooks/useMonitorFetch.jsx

@@ -3,7 +3,7 @@ import { useSelector } from "react-redux";
 import { networkService } from "../../../../main";
 import { createToast } from "../../../../Utils/toastUtils";
 
-const useMonitorFetch = ({ page, rowsPerPage, updateTrigger }) => {
+const useMonitorFetch = ({ page, field, filter, rowsPerPage, updateTrigger }) => {
 	// Redux state
 	const { user } = useSelector((state) => state.auth);
 
@@ -19,6 +19,8 @@ const useMonitorFetch = ({ page, rowsPerPage, updateTrigger }) => {
 				const response = await networkService.getMonitorsByTeamId({
 					teamId: user.teamId,
 					limit: 1,
+					field: field,
+					filter: filter,
 					types: ["hardware"],
 					page: page,
 					rowsPerPage: rowsPerPage,
@@ -36,7 +38,7 @@ const useMonitorFetch = ({ page, rowsPerPage, updateTrigger }) => {
 		};
 
 		fetchMonitors();
-	}, [page, rowsPerPage, user.teamId, updateTrigger]);
+	}, [page, field, filter, rowsPerPage, user.teamId, updateTrigger]);
 
 	return { monitors, summary, isLoading, networkError };
 };

src/Pages/Infrastructure/Monitors/index.jsx

@@ -7,6 +7,7 @@ import MonitorsTable from "./Components/MonitorsTable";
 import Pagination from "../../..//Components/Table/TablePagination";
 import GenericFallback from "../../../Components/GenericFallback";
 import Fallback from "../../../Components/Fallback";
+import Filter from "./Components/Filters";
 // Utils
 import { useTheme } from "@emotion/react";
 import { useMonitorFetch } from "./Hooks/useMonitorFetch";
@@ -21,6 +22,8 @@ const InfrastructureMonitors = () => {
 	const [page, setPage] = useState(0);
 	const [rowsPerPage, setRowsPerPage] = useState(5);
 	const [updateTrigger, setUpdateTrigger] = useState(false);
+	const [selectedStatus, setSelectedStatus] = useState(undefined);
+	const [toFilterStatus, setToFilterStatus] = useState(undefined);
 
 	// Utils
 	const theme = useTheme();
@@ -40,8 +43,17 @@ const InfrastructureMonitors = () => {
 		setRowsPerPage(event.target.value);
 	};
 
+	const handleReset = () => {
+		setSelectedStatus(undefined);
+		setToFilterStatus(undefined);
+	};
+
+	const field = toFilterStatus !== undefined ? "status" : undefined;
+
 	const { monitors, summary, isLoading, networkError } = useMonitorFetch({
 		page,
+		field: field,
+		filter: toFilterStatus,
 		rowsPerPage,
 		updateTrigger,
 	});
@@ -89,6 +101,12 @@ const InfrastructureMonitors = () => {
 				shouldRender={!isLoading}
 				monitorCount={summary?.totalMonitors ?? 0}
 			/>
+			<Filter
+				selectedStatus={selectedStatus}
+				setSelectedStatus={setSelectedStatus}
+				setToFilterStatus={setToFilterStatus}
+				handleReset={handleReset}
+			/>
 			<MonitorsTable
 				shouldRender={!isLoading}
 				monitors={monitors}

src/Pages/Uptime/Monitors/Components/Filter/index.jsx

@@ -99,6 +99,7 @@ const Filter = ({
 				display: "flex",
 				flexDirection: "row",
 				alignItems: "center",
+				m: theme.spacing(2),
 				ml: theme.spacing(4),
 				gap: theme.spacing(2),
 			}}