add pagination components

client/src/Pages/Logs/TabQueue.tsx

@@ -4,6 +4,7 @@ import Box from "@mui/material/Box";
 import { TableJobs, TableFailedJobs } from "./components/TableJobs";
 import { TableWorkers } from "./components/TableWorkers";
 import { useTheme } from "@mui/material";
+import { useState } from "react";
 import { useTranslation, Trans } from "react-i18next";
 import { useGet, usePost } from "@/Hooks/UseApi";
 import type { QueueData } from "@/Types/Queue";
@@ -15,16 +16,23 @@ import { SPACING } from "@/Utils/Theme/constants";
 export const TabQueue = () => {
 	const theme = useTheme();
 	const { t } = useTranslation();
+	const [page, setPage] = useState(0);
+	const [rowsPerPage, setRowsPerPage] = useState(10);
 	const {
 		data: queueData,
 		isLoading,
 		// error,
 		refetch,
-	} = useGet<QueueData>("/queue/all-metrics", {}, { refreshInterval: 1000 });
+	} = useGet<QueueData>(
+		`/queue/all-metrics?page=${page}&rowsPerPage=${rowsPerPage}`,
+		{},
+		{ refreshInterval: 1000, keepPreviousData: true }
+	);
 
 	const { post, loading: isFlushing } = usePost();
 
 	const jobs = queueData?.jobs ?? [];
+	const jobsCount = queueData?.count ?? 0;
 	const workers = (queueData?.metrics?.workers ?? []).map((worker, idx) => ({
 		...worker,
 		id: idx,
@@ -104,7 +112,17 @@ export const TabQueue = () => {
 						/>
 					</Typography>
 				</Stack>
-				<TableJobs jobs={jobs} />
+				<TableJobs
+					jobs={jobs}
+					count={jobsCount}
+					page={page}
+					rowsPerPage={rowsPerPage}
+					onPageChange={(_, newPage) => setPage(newPage)}
+					onRowsPerPageChange={(event) => {
+						setRowsPerPage(parseInt(event.target.value, 10));
+						setPage(0);
+					}}
+				/>
 			</Stack>
 			<Stack gap={theme.spacing(3)}>
 				<Stack gap={theme.spacing(1)}>

client/src/Pages/Logs/components/TableJobs.tsx

@@ -1,4 +1,4 @@
-import { Table } from "@/Components/design-elements";
+import { Table, Pagination } from "@/Components/design-elements";
 import { Typography, useTheme } from "@mui/material";
 import prettyMilliseconds from "pretty-ms";
 import { formatTimestamp } from "@/Utils/TimeUtils";
@@ -6,14 +6,27 @@ import { formatTimestamp } from "@/Utils/TimeUtils";
 import { useTranslation } from "react-i18next";
 import type { QueueJobFailure, QueueJobSummary, QueueMetrics } from "@/Types/Queue";
 import type { Header } from "@/Components/design-elements";
+import type { TablePaginationProps } from "@mui/material/TablePagination";
 
 type QueueJobWithId = QueueJobSummary & { id: string | number };
 
 interface TableJobsProps {
 	jobs: QueueJobSummary[];
+	count: number;
+	page: number;
+	rowsPerPage: number;
+	onPageChange: TablePaginationProps["onPageChange"];
+	onRowsPerPageChange: TablePaginationProps["onRowsPerPageChange"];
 }
 
-export const TableJobs = ({ jobs }: TableJobsProps) => {
+export const TableJobs = ({
+	jobs,
+	count,
+	page,
+	rowsPerPage,
+	onPageChange,
+	onRowsPerPageChange,
+}: TableJobsProps) => {
 	const { t } = useTranslation();
 	const theme = useTheme();
 
@@ -151,18 +164,29 @@ export const TableJobs = ({ jobs }: TableJobsProps) => {
 	];
 
 	return (
-		<Table
-			headers={headers}
-			data={jobsWithId}
-			getRowSx={(row) => ({
-				...(row.lockedAt && {
-					"& td": { backgroundColor: theme.palette.rowStatus.running },
-				}),
-				...(row.monitorActive === false && {
-					"& td": { backgroundColor: theme.palette.rowStatus.paused },
-				}),
-			})}
-		/>
+		<>
+			<Table
+				headers={headers}
+				data={jobsWithId}
+				getRowSx={(row) => ({
+					...(row.lockedAt && {
+						"& td": { backgroundColor: theme.palette.rowStatus.running },
+					}),
+					...(row.monitorActive === false && {
+						"& td": { backgroundColor: theme.palette.rowStatus.paused },
+					}),
+				})}
+			/>
+			<Pagination
+				component="div"
+				count={count}
+				page={page}
+				rowsPerPage={rowsPerPage}
+				onPageChange={onPageChange}
+				onRowsPerPageChange={onRowsPerPageChange}
+				itemsOnPage={jobs.length}
+			/>
+		</>
 	);
 };
 

client/src/Types/Queue.ts

@@ -51,5 +51,6 @@ export type QueueJobSummary = {
 
 export interface QueueData {
 	jobs: QueueJobSummary[];
+	count: number;
 	metrics: QueueMetrics;
 }