Add monitor table component

Client/src/Pages/Incidents/IncidentTable/index.jsx

@@ -15,14 +15,12 @@ import {
 
 import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
 import ArrowForwardRoundedIcon from "@mui/icons-material/ArrowForwardRounded";
-
 import { useState, useEffect } from "react";
 import { useSelector } from "react-redux";
 import { networkService } from "../../../main";
 import { StatusLabel } from "../../../Components/Label";
 import { logger } from "../../../Utils/Logger";
 import { useTheme } from "@emotion/react";
-
 const IncidentTable = ({ monitors, selectedMonitor, filter }) => {
   const theme = useTheme();
   const { authToken, user } = useSelector((state) => state.auth);

Client/src/Pages/Monitors/Home/MonitorTable/index.jsx

@@ -0,0 +1,117 @@
+import PropTypes from "prop-types";
+import {
+  TableContainer,
+  Table,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableBody,
+  Pagination,
+  PaginationItem,
+  Paper,
+  Box,
+} from "@mui/material";
+import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
+import ArrowForwardRoundedIcon from "@mui/icons-material/ArrowForwardRounded";
+import ArrowDownwardRoundedIcon from "@mui/icons-material/ArrowDownwardRounded";
+
+import { useState, useEffect } from "react";
+import { logger } from "../../../../Utils/Logger";
+import Host from "../host";
+import { StatusLabel } from "../../../../Components/Label";
+const MonitorTable = ({ teamId }) => {
+  const [paginationController, setPaginationController] = useState({
+    page: 0,
+    rowsPerPage: 14,
+  });
+  const [monitors, setMonitors] = useState([]);
+  const [monitorCount, setMonitorCount] = useState(0);
+
+  const handlePageChange = (_, newPage) => {
+    setPaginationController({
+      ...paginationController,
+      page: newPage - 1, // 0-indexed
+    });
+  };
+
+  useEffect(() => {
+    const fetchPage = async () => {
+      if (!monitors || Object.keys(monitors).length === 0) {
+        return;
+      }
+      try {
+        console.log("DO NETWORK");
+
+        const res = await networkService.getMonitorsByTeamId(
+          token,
+          user.teamId,
+          25,
+          ["http", "ping"],
+          null,
+          "desc",
+          true
+        );
+
+        setMonitors([]);
+        setMonitorCount(0);
+      } catch (error) {
+        logger.error(error);
+      }
+    };
+    fetchPage();
+  }, [monitors]);
+
+  let paginationComponent = <></>;
+  if (monitorCount > paginationController.rowsPerPage) {
+    paginationComponent = (
+      <Pagination
+        count={Math.ceil(monitorCount / paginationController.rowsPerPage)}
+        page={paginationController.page + 1} //0-indexed
+        onChange={handlePageChange}
+        shape="rounded"
+        renderItem={(item) => (
+          <PaginationItem
+            slots={{
+              previous: ArrowBackRoundedIcon,
+              next: ArrowForwardRoundedIcon,
+            }}
+            {...item}
+          />
+        )}
+      />
+    );
+  }
+
+  return (
+    <>
+      <TableContainer component={Paper}>
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableCell>Host</TableCell>
+              <TableCell>
+                {" "}
+                <Box width="max-content">
+                  Status
+                  <span>
+                    <ArrowDownwardRoundedIcon />
+                  </span>
+                </Box>
+              </TableCell>
+              <TableCell>Response Time</TableCell>
+              <TableCell>Type</TableCell>
+              <TableCell>Actions</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody></TableBody>
+        </Table>
+      </TableContainer>
+      {paginationComponent}
+    </>
+  );
+};
+
+MonitorTable.propTypes = {
+  teamId: PropTypes.string,
+};
+export default MonitorTable;

Client/src/Pages/Monitors/Home/index.jsx

@@ -4,7 +4,6 @@ import { useSelector, useDispatch } from "react-redux";
 import { getUptimeMonitorsByTeamId } from "../../../Features/UptimeMonitors/uptimeMonitorsSlice";
 import { useNavigate } from "react-router-dom";
 import { useTheme } from "@emotion/react";
-import BasicTable from "../../../Components/BasicTable";
 import { Box, Button, Stack, Typography } from "@mui/material";
 import PropTypes from "prop-types";
 import SkeletonLayout from "./skeleton";
@@ -13,6 +12,7 @@ import StatusBox from "./StatusBox";
 import { buildData } from "./monitorData";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
 import Greeting from "../../../Utils/greeting";
+import MonitorTable from "./MonitorTable";
 
 const Monitors = ({ isAdmin }) => {
   const theme = useTheme();
@@ -119,7 +119,8 @@ const Monitors = ({ isAdmin }) => {
                   </Box>
                   {/* TODO - add search bar */}
                 </Stack>
-                <BasicTable data={data} paginated={true} table={"monitors"} />
+                <MonitorTable teamId="test" />
+                {/* <BasicTable data={data} paginated={true} table={"monitors"} /> */}
               </Box>
             </>
           )}