diff --git a/src/components/JobList/index.tsx b/src/components/JobList/index.tsx index 8fba7d1..b7a2de7 100644 --- a/src/components/JobList/index.tsx +++ b/src/components/JobList/index.tsx @@ -2,11 +2,18 @@ import { ReactNode } from "react"; import DescriptionIcon from "@mui/icons-material/Description"; import Typography from "@mui/material/Typography"; import Box from "@mui/material/Box"; +import type { + DecodedValueMap, + QueryParamConfigMap, + SetQuery, +} from "use-query-params"; import { useMaterialReactTable, MaterialReactTable, type MRT_ColumnDef, type MRT_Row, + type MRT_PaginationState, + type MRT_Updater, } from 'material-react-table'; import type { UseQueryResult } from "@tanstack/react-query"; import { type Theme } from "@mui/material/styles"; @@ -21,6 +28,8 @@ import useDefaultTableOptions from "../../lib/table"; import sentryIcon from "./assets/sentry.svg"; +const DEFAULT_PAGE_SIZE = 25; + const columns: MRT_ColumnDef[] = [ { header: "status", @@ -195,19 +204,47 @@ function JobDetailPanel(props: JobDetailPanelProps): ReactNode { ) }; +type JobListParams = { + [key: string]: number|string; +} + type JobListProps = { + params: DecodedValueMap; + setter: SetQuery; + manualPagination: Boolean; query: UseQueryResult | UseQueryResult; sortMode?: "time" | "id"; } -export default function JobList({ query, sortMode }: JobListProps) { +export default function JobList({ query, params, setter, manualPagination, sortMode }: JobListProps) { const options = useDefaultTableOptions(); const data = query.data?.jobs || []; + const onPaginationChange = (updater: MRT_Updater) => { + if ( ! ( updater instanceof Function ) ) return; + const newParams = updater({pageSize: params.pageSize, pageIndex: params.page}); + setter({ + page: newParams.pageIndex || 0, + pageSize: newParams.pageSize || DEFAULT_PAGE_SIZE, + }); + }; + options.state = {} + if ( manualPagination === true ) { + options.manualPagination = true; + options.rowCount = Infinity; + options.onPaginationChange = onPaginationChange; + options.state.pagination = { + pageIndex: params.page || 0, + pageSize: params.pageSize || DEFAULT_PAGE_SIZE, + }; + } else { + options.initialState = { pagination: { pageIndex: 0, pageSize: DEFAULT_PAGE_SIZE }} + } + options.state.isLoading = query.isLoading || query.isFetching; const table = useMaterialReactTable({ + rowCount: data.length, ...options, columns, data: data, - rowCount: data.length, enableFacetedValues: true, initialState: { ...options.initialState, @@ -217,10 +254,6 @@ export default function JobList({ query, sortMode }: JobListProps) { duration: false, waiting: false, }, - pagination: { - pageIndex: 0, - pageSize: 25, - }, sorting: [ { id: sortMode === "time"? "started" : "job_id", @@ -228,9 +261,6 @@ export default function JobList({ query, sortMode }: JobListProps) { }, ], }, - state: { - isLoading: query.isLoading || query.isFetching, - }, renderDetailPanel: JobDetailPanel, muiTableBodyRowProps: ({row, isDetailPanel}) => { if ( isDetailPanel ) { diff --git a/src/pages/Node/index.tsx b/src/pages/Node/index.tsx index 89fcee9..cc50b66 100644 --- a/src/pages/Node/index.tsx +++ b/src/pages/Node/index.tsx @@ -10,7 +10,7 @@ import type { NodeParams } from "../../lib/paddles.d"; import { useNode, useNodeJobs } from "../../lib/paddles"; export default function Node() { - const [params, _] = useQueryParams({ + const [params, setParams] = useQueryParams({ page: NumberParam, pageSize: NumberParam, }); @@ -36,7 +36,7 @@ export default function Node() {
- +