diff --git a/client/src/Pages/Infrastructure/Monitors/Components/MonitorsTable/index.jsx b/client/src/Pages/Infrastructure/Monitors/Components/MonitorsTable/index.jsx index 7a5db231f..7ee603ef7 100644 --- a/client/src/Pages/Infrastructure/Monitors/Components/MonitorsTable/index.jsx +++ b/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 ( - + + openDetails(row.id), - emptyView: "No monitors found", - }} - /> + onRowClick: (row) => openDetails(row.id), + emptyView: "No monitors found", + }} + /> + ); }; @@ -145,6 +156,7 @@ MonitorsTable.propTypes = { monitors: PropTypes.array, isAdmin: PropTypes.bool, handleActionMenuDelete: PropTypes.func, + isSearching: PropTypes.bool, }; export default MonitorsTable; diff --git a/client/src/Pages/Infrastructure/Monitors/index.jsx b/client/src/Pages/Infrastructure/Monitors/index.jsx index 6ecf8e54d..f5527f3be 100644 --- a/client/src/Pages/Infrastructure/Monitors/index.jsx +++ b/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} /> + +