diff --git a/package.json b/package.json index 4140df6..d5a2a17 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@cerc-io/console-app", - "version": "0.2.4", + "version": "0.2.5", "description": "Laconic Console", "repository": "https://github.com/cerc-io/laconic-console", "main": "dist/es/index.js", @@ -31,7 +31,7 @@ "@apollo/react-components": "^4.0.0", "@apollo/react-hooks": "^4.0.0", "@babel/runtime": "^7.21.0", - "@cerc-io/registry-sdk": "^0.2.2", + "@cerc-io/registry-sdk": "^0.2.8", "@lirewine/debug": "1.0.0-beta.78", "@lirewine/gem-core": "1.0.0-beta.28", "@lirewine/react-ux": "1.1.0-beta.1", diff --git a/src/containers/panels/registry/RegistryRecords.js b/src/containers/panels/registry/RegistryRecords.js index 50da800..46cdc42 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,9 +70,14 @@ export const RecordType = ({ type = types[0].key, onChange }) => { const RegistryRecords = ({ type }) => { const { config } = useContext(ConsoleContext); const [sorter, sortBy] = useSorter('createTime', false); - const { data } = useQueryStatusReducer(useQuery(WNS_RECORDS, { + const [page, setPage] = useState(0); + const [rowsPerPage, setRowsPerPage] = useState(10); + + const offset = page * rowsPerPage; + + const { data, refetch } = useQueryStatusReducer(useQuery(WNS_RECORDS, { pollInterval: config.api.intervalQuery, - variables: { attributes: { type } } + variables: { attributes: { type, limit: rowsPerPage, offset: offset } } })); if (!data) { @@ -79,6 +86,27 @@ const RegistryRecords = ({ type }) => { const records = JSON.parse(data.wns_records.json); + const handleChangePage = (event, newPage) => { + setPage(newPage); + const offset = newPage * rowsPerPage; + refetch({ attributes: { type, limit: rowsPerPage, offset } }); + }; + + const handleChangeRowsPerPage = (event) => { + const newRowsPerPage = parseInt(event.target.value, 10); + setRowsPerPage(newRowsPerPage); + setPage(0); + refetch({ attributes: { type, limit: newRowsPerPage, offset: 0 } }); + }; + + const labelDisplayedRows = ({ from, to }) => { + if (rowsPerPage > records.length) { + return `${from}-${from + records.length - 1}`; + } else { + return `${from}-${to}`; + } + }; + return (