diff --git a/web/components/admin/LogTable.tsx b/web/components/admin/LogTable.tsx index 5f89d3967..aad62658b 100644 --- a/web/components/admin/LogTable.tsx +++ b/web/components/admin/LogTable.tsx @@ -1,7 +1,7 @@ -import React, { FC } from 'react'; +import React, { FC, useState } from 'react'; import { Table, Tag, Typography } from 'antd'; import Linkify from 'react-linkify'; -import { SortOrder } from 'antd/lib/table/interface'; +import { SortOrder, TablePaginationConfig } from 'antd/lib/table/interface'; import format from 'date-fns/format'; const { Title } = Typography; @@ -24,13 +24,19 @@ function renderMessage(text) { export type LogTableProps = { logs: object[]; - pageSize: number; + initialPageSize: number; }; -export const LogTable: FC = ({ logs, pageSize }) => { +export const LogTable: FC = ({ logs, initialPageSize }) => { if (!logs?.length) { return null; } + + const [pageSize, setPageSize] = useState(initialPageSize); + const handleTableChange = (pagination: TablePaginationConfig) => { + setPageSize(pagination.pageSize); + }; + const columns = [ { title: 'Level', @@ -81,7 +87,10 @@ export const LogTable: FC = ({ logs, pageSize }) => { dataSource={logs} columns={columns} rowKey={row => row.time} - pagination={{ pageSize: pageSize || 20 }} + pagination={{ + pageSize, + }} + onChange={handleTableChange} /> ); diff --git a/web/components/admin/Offline.tsx b/web/components/admin/Offline.tsx index 905259fce..515a872b9 100644 --- a/web/components/admin/Offline.tsx +++ b/web/components/admin/Offline.tsx @@ -170,7 +170,7 @@ export const Offline: FC = ({ logs = [], config }) => { - + ); }; diff --git a/web/pages/admin/index.tsx b/web/pages/admin/index.tsx index 5f9adf14d..ddb36989e 100644 --- a/web/pages/admin/index.tsx +++ b/web/pages/admin/index.tsx @@ -187,7 +187,7 @@ export default function Home() {
- + ); } diff --git a/web/pages/admin/logs.tsx b/web/pages/admin/logs.tsx index bacb8531f..f02d71e33 100644 --- a/web/pages/admin/logs.tsx +++ b/web/pages/admin/logs.tsx @@ -32,7 +32,7 @@ export default function Logs() { }; }, []); - return ; + return ; } Logs.getLayout = function getLayout(page: ReactElement) {