diff --git a/src/containers/panels/registry/RegistryRecords.js b/src/containers/panels/registry/RegistryRecords.js index 50da800..592c41e 100644 --- a/src/containers/panels/registry/RegistryRecords.js +++ b/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 ( @@ -93,55 +108,66 @@ const RegistryRecords = ({ type }) => { - {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 = (); - } + if (pkg) { + pkgLink = (); + } - if (type === 'lrn:app') { - appLinks = ( - <> - {(names || []).map(lrn => -
- -
- )} - - ); - } - - return ( - - {type} - - {appLinks || (names || []).map(name =>
{name}
)} -
- - {version} - - - {displayName || service || fileName || description} - - - {moment.utc(createTime).fromNow()} - - - {pkgLink} - - - - -
+ if (type === 'lrn:app') { + appLinks = ( + <> + {(names || []).map(lrn => +
+ +
+ )} + ); } - )} + + return ( + + {type} + + {appLinks || (names || []).map(name =>
{name}
)} +
+ + {version} + + + {displayName || service || fileName || description} + + + {moment.utc(createTime).fromNow()} + + + {pkgLink} + + + + +
+ ); + })}
+ + + + +
); };