80 lines
1.9 KiB
React
80 lines
1.9 KiB
React
import { useTheme } from "@emotion/react";
|
|
import { Box, Stack, Typography } from "@mui/material";
|
|
import Search from "../../../../Components/Inputs/Search";
|
|
import MemoizedMonitorTable from "../MonitorTable";
|
|
import { useState } from "react";
|
|
import useDebounce from "../../../../Utils/debounce";
|
|
import PropTypes from "prop-types";
|
|
|
|
const CurrentMonitoring = ({ totalMonitors, monitors, isAdmin }) => {
|
|
const theme = useTheme();
|
|
const [search, setSearch] = useState("");
|
|
const [isSearching, setIsSearching] = useState(false);
|
|
const debouncedFilter = useDebounce(search, 500);
|
|
const handleSearch = (value) => {
|
|
setIsSearching(true);
|
|
setSearch(value);
|
|
};
|
|
return (
|
|
<Box
|
|
flex={1}
|
|
px={theme.spacing(10)}
|
|
py={theme.spacing(8)}
|
|
border={1}
|
|
borderColor={theme.palette.border.light}
|
|
borderRadius={theme.shape.borderRadius}
|
|
backgroundColor={theme.palette.background.main}
|
|
>
|
|
<Stack
|
|
direction="row"
|
|
alignItems="center"
|
|
mb={theme.spacing(8)}
|
|
>
|
|
<Typography
|
|
component="h2"
|
|
variant="h2"
|
|
fontWeight={500}
|
|
letterSpacing={-0.2}
|
|
>
|
|
Actively monitoring
|
|
</Typography>
|
|
<Box
|
|
className="current-monitors-counter"
|
|
color={theme.palette.text.primary}
|
|
border={1}
|
|
borderColor={theme.palette.border.light}
|
|
backgroundColor={theme.palette.background.accent}
|
|
>
|
|
{totalMonitors}
|
|
</Box>
|
|
<Box
|
|
width="25%"
|
|
minWidth={150}
|
|
ml="auto"
|
|
>
|
|
<Search
|
|
options={monitors}
|
|
filteredBy="name"
|
|
inputValue={search}
|
|
handleInputChange={handleSearch}
|
|
/>
|
|
</Box>
|
|
</Stack>
|
|
<MemoizedMonitorTable
|
|
isAdmin={isAdmin}
|
|
filter={debouncedFilter}
|
|
setIsSearching={setIsSearching}
|
|
isSearching={isSearching}
|
|
/>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
CurrentMonitoring.propTypes = {
|
|
totalMonitors: PropTypes.number,
|
|
monitors: PropTypes.array,
|
|
isAdmin: PropTypes.bool,
|
|
};
|
|
|
|
export { CurrentMonitoring };
|