src/containers/panels/registry/RegistryRecords.js

@@ -3,7 +3,7 @@
 //
 
 import moment from 'moment';
-import React, { useContext } from 'react';
+import React, { useContext, useState } from 'react';
 import { useQuery } from '@apollo/react-hooks';
 import { makeStyles } from '@material-ui/core';
 import ButtonGroup from '@material-ui/core/ButtonGroup';
@@ -11,6 +11,8 @@ import Button from '@material-ui/core/Button';
 import TableHead from '@material-ui/core/TableHead';
 import TableRow from '@material-ui/core/TableRow';
 import TableBody from '@material-ui/core/TableBody';
+import TableFooter from '@material-ui/core/TableFooter';
+import TablePagination from '@material-ui/core/TablePagination';
 
 import WNS_RECORDS from '../../../gql/wns_records.graphql';
 
@@ -68,6 +70,8 @@ export const RecordType = ({ type = types[0].key, onChange }) => {
 const RegistryRecords = ({ type }) => {
   const { config } = useContext(ConsoleContext);
   const [sorter, sortBy] = useSorter('createTime', false);
+  const [page, setPage] = useState(0);
+  const [rowsPerPage, setRowsPerPage] = useState(5);
   const { data } = useQueryStatusReducer(useQuery(WNS_RECORDS, {
     pollInterval: config.api.intervalQuery,
     variables: { attributes: { type } }
@@ -79,6 +83,17 @@ const RegistryRecords = ({ type }) => {
 
   const records = JSON.parse(data.wns_records.json);
 
+  const handleChangePage = (event, newPage) => {
+    setPage(newPage);
+  };
+
+  const handleChangeRowsPerPage = (event) => {
+    setRowsPerPage(parseInt(event.target.value, 10));
+    setPage(0);
+  };
+
+  const paginatedRecords = records.sort(sorter).slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
+
   return (
     <Table>
       <TableHead>
@@ -93,8 +108,7 @@ const RegistryRecords = ({ type }) => {
         </TableRow>
       </TableHead>
       <TableBody>
-        {records.sort(sorter)
-          .map((record) => {
+        {paginatedRecords.map((record) => {
           const { id, names, createTime, attributes: { type, name: displayName, fileName, version, description, service, package: pkg } } = record;
 
           let pkgLink;
@@ -139,9 +153,21 @@ const RegistryRecords = ({ type }) => {
               </TableCell>
             </TableRow>
           );
-          }
-          )}
+        })}
       </TableBody>
+      <TableFooter>
+        <TableRow>
+          <TablePagination
+            component="td"
+            rowsPerPageOptions={[5, 10, 25]}
+            count={records.length}
+            rowsPerPage={rowsPerPage}
+            page={page}
+            onPageChange={handleChangePage}
+            onRowsPerPageChange={handleChangeRowsPerPage}
+          />
+        </TableRow>
+      </TableFooter>
     </Table>
   );
 };