Merge pull request #2450 from loma373/feat/search-infra-moniters

feat: add search functionality to infrastructure monitor

client/src/Pages/Infrastructure/Monitors/Components/MonitorsTable/index.jsx

@@ -1,9 +1,11 @@
 // Components
+import { Box } from "@mui/material";
 import DataTable from "../../../../../Components/Table";
 import Host from "../../../../../Components/Host";
 import { StatusLabel } from "../../../../../Components/Label";
 import { Stack } from "@mui/material";
 import { InfrastructureMenu } from "../MonitorsTableMenu";
+import LoadingSpinner from "../../../../Uptime/Monitors/Components/LoadingSpinner";
 // Assets
 import CPUChipIcon from "../../../../../assets/icons/cpu-chip.svg?react";
 import CustomGauge from "../../../../../Components/Charts/CustomGauge";
@@ -15,7 +17,13 @@ import { useNavigate } from "react-router-dom";
 import PropTypes from "prop-types";
 import { useTranslation } from "react-i18next";
 
-const MonitorsTable = ({ isLoading, monitors, isAdmin, handleActionMenuDelete }) => {
+const MonitorsTable = ({
+	isLoading,
+	monitors,
+	isAdmin,
+	handleActionMenuDelete,
+	isSearching,
+}) => {
 	// Utils
 	const theme = useTheme();
 	const { t } = useTranslation();
@@ -120,23 +128,26 @@ const MonitorsTable = ({ isLoading, monitors, isAdmin, handleActionMenuDelete })
 	});
 
 	return (
-		<DataTable
-			shouldRender={!isLoading}
-			headers={headers}
-			data={data}
-			config={{
-				/* TODO this behavior seems to be repeated. Put it on the root table? */
-				rowSX: {
-					cursor: "pointer",
-					"&:hover td": {
-						backgroundColor: theme.palette.tertiary.main,
-						transition: "background-color .3s ease",
+		<Box position="relative">
+			<LoadingSpinner shouldRender={isSearching} />
+			<DataTable
+				shouldRender={!isLoading}
+				headers={headers}
+				data={data}
+				config={{
+					/* TODO this behavior seems to be repeated. Put it on the root table? */
+					rowSX: {
+						cursor: "pointer",
+						"&:hover td": {
+							backgroundColor: theme.palette.tertiary.main,
+							transition: "background-color .3s ease",
+						},
 					},
-				},
-				onRowClick: (row) => openDetails(row.id),
-				emptyView: "No monitors found",
-			}}
-		/>
+					onRowClick: (row) => openDetails(row.id),
+					emptyView: "No monitors found",
+				}}
+			/>
+		</Box>
 	);
 };
 
@@ -145,6 +156,7 @@ MonitorsTable.propTypes = {
 	monitors: PropTypes.array,
 	isAdmin: PropTypes.bool,
 	handleActionMenuDelete: PropTypes.func,
+	isSearching: PropTypes.bool,
 };
 
 export default MonitorsTable;

client/src/Pages/Infrastructure/Monitors/index.jsx

@@ -8,6 +8,7 @@ import Pagination from "../../..//Components/Table/TablePagination";
 import GenericFallback from "../../../Components/GenericFallback";
 import Fallback from "../../../Components/Fallback";
 import Filter from "./Components/Filters";
+import SearchComponent from "../../Uptime/Monitors/Components/SearchComponent";
 // Utils
 import { useTheme } from "@emotion/react";
 import { useState } from "react";
@@ -30,6 +31,8 @@ const InfrastructureMonitors = () => {
 	const [updateTrigger, setUpdateTrigger] = useState(false);
 	const [selectedStatus, setSelectedStatus] = useState(undefined);
 	const [toFilterStatus, setToFilterStatus] = useState(undefined);
+	const [search, setSearch] = useState(undefined);
+	const [isSearching, setIsSearching] = useState(false);
 
 	// Utils
 	const theme = useTheme();
@@ -67,7 +70,7 @@ const InfrastructureMonitors = () => {
 		types: TYPES,
 		page,
 		field: field,
-		filter: toFilterStatus,
+		filter: toFilterStatus ?? search,
 		rowsPerPage,
 		updateTrigger,
 	});
@@ -122,12 +125,19 @@ const InfrastructureMonitors = () => {
 					setToFilterStatus={setToFilterStatus}
 					handleReset={handleReset}
 				/>
+				<SearchComponent
+					monitors={monitors}
+					onSearchChange={setSearch}
+					setIsSearching={setIsSearching}
+				/>
 			</Stack>
+
 			<MonitorsTable
 				isLoading={isLoading}
 				monitors={monitors}
 				isAdmin={isAdmin}
 				handleActionMenuDelete={handleActionMenuDelete}
+				isSearching={isSearching}
 			/>
 			<Pagination
 				itemCount={summary?.totalMonitors}