Implement pagination for registry records table

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,55 +108,66 @@ const RegistryRecords = ({ type }) => {
         </TableRow>
       </TableHead>
       <TableBody>
-        {records.sort(sorter)
-          .map((record) => {
-            const { id, names, createTime, attributes: { type, name: displayName, fileName, version, description, service, package: pkg } } = record;
+        {paginatedRecords.map((record) => {
+          const { id, names, createTime, attributes: { type, name: displayName, fileName, version, description, service, package: pkg } } = record;
 
-            let pkgLink;
-            let appLinks;
+          let pkgLink;
+          let appLinks;
 
-            if (pkg) {
-              pkgLink = (<PackageLink config={config} type={type} pkg={pkg} />);
-            }
+          if (pkg) {
+            pkgLink = (<PackageLink config={config} type={type} pkg={pkg} />);
+          }
 
-            if (type === 'lrn:app') {
-              appLinks = (
-                <>
-                  {(names || []).map(lrn =>
-                    <div key={lrn}>
-                      <AppLink config={config} lrn={lrn} />
-                    </div>
-                  )}
-                </>
-              );
-            }
-
-            return (
-              <TableRow key={id} size='small'>
-                <TableCell monospace>{type}</TableCell>
-                <TableCell monospace>
-                  {appLinks || (names || []).map(name => <div key={name}>{name}</div>)}
-                </TableCell>
-                <TableCell monospace>
-                  {version}
-                </TableCell>
-                <TableCell>
-                  {displayName || service || fileName || description}
-                </TableCell>
-                <TableCell>
-                  {moment.utc(createTime).fromNow()}
-                </TableCell>
-                <TableCell monospace>
-                  {pkgLink}
-                </TableCell>
-                <TableCell>
-                  <QueryLink config={config} id={id} icon />
-                </TableCell>
-              </TableRow>
+          if (type === 'lrn:app') {
+            appLinks = (
+              <>
+                {(names || []).map(lrn =>
+                  <div key={lrn}>
+                    <AppLink config={config} lrn={lrn} />
+                  </div>
+                )}
+              </>
             );
           }
-          )}
+
+          return (
+            <TableRow key={id} size='small'>
+              <TableCell monospace>{type}</TableCell>
+              <TableCell monospace>
+                {appLinks || (names || []).map(name => <div key={name}>{name}</div>)}
+              </TableCell>
+              <TableCell monospace>
+                {version}
+              </TableCell>
+              <TableCell>
+                {displayName || service || fileName || description}
+              </TableCell>
+              <TableCell>
+                {moment.utc(createTime).fromNow()}
+              </TableCell>
+              <TableCell monospace>
+                {pkgLink}
+              </TableCell>
+              <TableCell>
+                <QueryLink config={config} id={id} icon />
+              </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>
   );
 };