add pagination

src/Pages/DistributedUptime/Monitors/Hooks/useSubscribeToMonitors.jsx

@@ -5,7 +5,7 @@ import { useTheme } from "@emotion/react";
 import { useMonitorUtils } from "../../../../Hooks/useMonitorUtils";
 import { createToast } from "../../../../Utils/toastUtils";
 
-const useSubscribeToMonitors = () => {
+const useSubscribeToMonitors = (page, rowsPerPage) => {
 	// Redux
 	const { user } = useSelector((state) => state.auth);
 
@@ -25,8 +25,8 @@ const useSubscribeToMonitors = () => {
 				teamId: user.teamId,
 				limit: 25,
 				types: ["distributed_http"],
-				page: 0,
-				rowsPerPage: 10,
+				page,
+				rowsPerPage,
 				filter: null,
 				field: null,
 				order: null,
@@ -56,7 +56,7 @@ const useSubscribeToMonitors = () => {
 			});
 			setNetworkError(true);
 		}
-	}, [user, getMonitorWithPercentage, theme, isLoading]);
+	}, [user, getMonitorWithPercentage, theme, isLoading, page, rowsPerPage]);
 	return [isLoading, networkError, monitors, monitorsSummary, filteredMonitors];
 };
 export { useSubscribeToMonitors };

src/Pages/DistributedUptime/Monitors/index.jsx

@@ -3,10 +3,12 @@ import { Stack, Typography } from "@mui/material";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
 import CreateMonitorHeader from "../../../Components/MonitorCreateHeader";
 import MonitorTable from "./Components/MonitorTable";
+import Pagination from "../../../Components/Table/TablePagination";
 import Fallback from "../../../Components/Fallback";
 import GenericFallback from "../../../Components/GenericFallback";
 
 // Utils
+import { useState } from "react";
 import { useTheme } from "@mui/material/styles";
 import { useIsAdmin } from "../../../Hooks/useIsAdmin";
 import { useSubscribeToMonitors } from "./Hooks/useSubscribeToMonitors";
@@ -16,11 +18,23 @@ const BREADCRUMBS = [{ name: `Distributed Uptime`, path: "/distributed-uptime" }
 
 const DistributedUptimeMonitors = () => {
 	// Local state
+	const [page, setPage] = useState(0);
+	const [rowsPerPage, setRowsPerPage] = useState(10);
+
 	// Utils
 	const theme = useTheme();
 	const isAdmin = useIsAdmin();
 	const [isLoading, networkError, monitors, monitorsSummary, filteredMonitors] =
-		useSubscribeToMonitors();
+		useSubscribeToMonitors(page, rowsPerPage);
+	// Handlers
+	const handleChangePage = (event, newPage) => {
+		setPage(newPage);
+	};
+
+	const handleChangeRowsPerPage = (event) => {
+		setRowsPerPage(event.target.value);
+		setPage(0);
+	};
 
 	if (isLoading) {
 		return <SkeletonLayout />;
@@ -69,6 +83,14 @@ const DistributedUptimeMonitors = () => {
 				isLoading={isLoading}
 				monitors={filteredMonitors}
 			/>
+			<Pagination
+				itemCount={monitorsSummary?.totalMonitors ?? 0}
+				paginationLabel="monitors"
+				page={page}
+				rowsPerPage={rowsPerPage}
+				handleChangePage={handleChangePage}
+				handleChangeRowsPerPage={handleChangeRowsPerPage}
+			/>
 		</Stack>
 	);
 };

src/Pages/StatusPage/StatusPages/index.jsx

@@ -51,6 +51,7 @@ const StatusPages = () => {
 			/>
 		);
 	}
+
 	return (
 		<Stack gap={theme.spacing(10)}>
 			<Breadcrumbs list={BREADCRUMBS} />