diff --git a/src/Pages/DistributedUptime/Monitors/Hooks/useSubscribeToMonitors.jsx b/src/Pages/DistributedUptime/Monitors/Hooks/useSubscribeToMonitors.jsx
index 7c60b6ca2..7c498d753 100644
--- a/src/Pages/DistributedUptime/Monitors/Hooks/useSubscribeToMonitors.jsx
+++ b/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 };
diff --git a/src/Pages/DistributedUptime/Monitors/index.jsx b/src/Pages/DistributedUptime/Monitors/index.jsx
index 2111ddca3..41e21130d 100644
--- a/src/Pages/DistributedUptime/Monitors/index.jsx
+++ b/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 ;
@@ -69,6 +83,14 @@ const DistributedUptimeMonitors = () => {
isLoading={isLoading}
monitors={filteredMonitors}
/>
+
);
};
diff --git a/src/Pages/StatusPage/StatusPages/index.jsx b/src/Pages/StatusPage/StatusPages/index.jsx
index 9027467a4..54a41f850 100644
--- a/src/Pages/StatusPage/StatusPages/index.jsx
+++ b/src/Pages/StatusPage/StatusPages/index.jsx
@@ -51,6 +51,7 @@ const StatusPages = () => {
/>
);
}
+
return (