From 1edff74f485b8c0aa681cd091d8f202a1dd6b7eb Mon Sep 17 00:00:00 2001 From: IshaVenikar Date: Thu, 29 Aug 2024 11:56:03 +0530 Subject: [PATCH 1/4] Implement pagination for registry records table --- .../panels/registry/RegistryRecords.js | 114 +++++++++++------- 1 file changed, 70 insertions(+), 44 deletions(-) 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} + + + + + + ); + })} + + + + +
); }; -- 2.45.2 From e81ad6009cf9f1e2d080c70dd5b223769b74863c Mon Sep 17 00:00:00 2001 From: IshaVenikar Date: Thu, 29 Aug 2024 19:43:04 +0530 Subject: [PATCH 2/4] Pass page limit and offset for fetching records --- .../panels/registry/RegistryRecords.js | 108 ++++++++++-------- src/resolvers.js | 4 +- 2 files changed, 65 insertions(+), 47 deletions(-) diff --git a/src/containers/panels/registry/RegistryRecords.js b/src/containers/panels/registry/RegistryRecords.js index 592c41e..32efb33 100644 --- a/src/containers/panels/registry/RegistryRecords.js +++ b/src/containers/panels/registry/RegistryRecords.js @@ -72,9 +72,12 @@ const RegistryRecords = ({ type }) => { const [sorter, sortBy] = useSorter('createTime', false); const [page, setPage] = useState(0); const [rowsPerPage, setRowsPerPage] = useState(5); - const { data } = useQueryStatusReducer(useQuery(WNS_RECORDS, { + + 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) { @@ -85,14 +88,24 @@ const RegistryRecords = ({ type }) => { const handleChangePage = (event, newPage) => { setPage(newPage); + const offset = newPage * rowsPerPage; + refetch({ attributes: { type, limit: rowsPerPage, offset } }); }; const handleChangeRowsPerPage = (event) => { - setRowsPerPage(parseInt(event.target.value, 10)); + const newRowsPerPage = parseInt(event.target.value, 10); + setRowsPerPage(newRowsPerPage); setPage(0); + refetch({ attributes: { type, limit: newRowsPerPage, offset: 0 } }); }; - const paginatedRecords = records.sort(sorter).slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage); + const labelDisplayedRows = ({ from, to }) => { + if(to > from) { + return `${from}-${to}`; + } else { + return `${from}-${from + records.length - 1}`; + } + }; return ( @@ -108,63 +121,66 @@ const RegistryRecords = ({ type }) => { - {paginatedRecords.map((record) => { - const { id, names, createTime, attributes: { type, name: displayName, fileName, version, description, service, package: pkg } } = record; + {records.sort(sorter) + .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 => -
- -
- )} - + 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} + + + + + ); } - - return ( - - {type} - - {appLinks || (names || []).map(name =>
{name}
)} - - - {version} - - - {displayName || service || fileName || description} - - - {moment.utc(createTime).fromNow()} - - - {pkgLink} - - - - - - ); - })} + )} = rowsPerPage ? -1 : rowsPerPage} rowsPerPage={rowsPerPage} page={page} onPageChange={handleChangePage} onRowsPerPageChange={handleChangeRowsPerPage} + labelDisplayedRows={labelDisplayedRows} /> diff --git a/src/resolvers.js b/src/resolvers.js index 67a048a..a5643d4 100644 --- a/src/resolvers.js +++ b/src/resolvers.js @@ -45,7 +45,9 @@ export const createResolvers = config => { wns_records: async (_, { attributes }) => { log('WNS records...'); - const data = await registry.queryRecords(attributes); + + const {limit, offset, ...queryAttributes } = attributes; + const data = await registry.queryRecords(queryAttributes, false, false, limit, offset); return { __typename: 'JSONResult', -- 2.45.2 From 6b3ec781eff7f9093e320967e2290ec0e9333629 Mon Sep 17 00:00:00 2001 From: IshaVenikar Date: Fri, 30 Aug 2024 12:48:27 +0530 Subject: [PATCH 3/4] Disable next button if records are not present --- src/containers/panels/registry/RegistryRecords.js | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/src/containers/panels/registry/RegistryRecords.js b/src/containers/panels/registry/RegistryRecords.js index 32efb33..46cdc42 100644 --- a/src/containers/panels/registry/RegistryRecords.js +++ b/src/containers/panels/registry/RegistryRecords.js @@ -71,7 +71,7 @@ const RegistryRecords = ({ type }) => { const { config } = useContext(ConsoleContext); const [sorter, sortBy] = useSorter('createTime', false); const [page, setPage] = useState(0); - const [rowsPerPage, setRowsPerPage] = useState(5); + const [rowsPerPage, setRowsPerPage] = useState(10); const offset = page * rowsPerPage; @@ -100,10 +100,10 @@ const RegistryRecords = ({ type }) => { }; const labelDisplayedRows = ({ from, to }) => { - if(to > from) { - return `${from}-${to}`; - } else { + if (rowsPerPage > records.length) { return `${from}-${from + records.length - 1}`; + } else { + return `${from}-${to}`; } }; @@ -175,12 +175,15 @@ const RegistryRecords = ({ type }) => { = rowsPerPage ? -1 : rowsPerPage} + count={-1} rowsPerPage={rowsPerPage} page={page} onPageChange={handleChangePage} onRowsPerPageChange={handleChangeRowsPerPage} labelDisplayedRows={labelDisplayedRows} + nextIconButtonProps={{ + disabled: records.length < rowsPerPage, + }} /> -- 2.45.2 From 0273dbae7e79399c09f9caa1ab9e7bc9eafe821e Mon Sep 17 00:00:00 2001 From: Prathamesh Musale Date: Fri, 6 Sep 2024 09:27:53 +0530 Subject: [PATCH 4/4] Upgrade registry-sdk and increment package version --- package.json | 4 ++-- yarn.lock | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) 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/yarn.lock b/yarn.lock index b5ab02a..86d07b5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1037,10 +1037,10 @@ resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39" integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw== -"@cerc-io/registry-sdk@^0.2.2": - version "0.2.2" - resolved "https://git.vdb.to/api/packages/cerc-io/npm/%40cerc-io%2Fregistry-sdk/-/0.2.2/registry-sdk-0.2.2.tgz#2e8a533f069b4bb9f4cd4798e783f52e29167d0d" - integrity sha512-ocRMbWtdewOg02ORfK1U+qbTqB46anHP4ApXokGkY4d+mFSApR3sdUEi2geHcs8oh+SG8YAp7LUJ9AAJneNY8g== +"@cerc-io/registry-sdk@^0.2.8": + version "0.2.8" + resolved "https://git.vdb.to/api/packages/cerc-io/npm/%40cerc-io%2Fregistry-sdk/-/0.2.8/registry-sdk-0.2.8.tgz#d71837f735d998987055068457fdf8b2e94ca69c" + integrity sha512-utK3Rq5qZrEoRs/eOsOkowcsD740nlnBs6C3KKFRHgKIiR0XedD6t33KukUPLKbGp4mYZOYXRTA7/A04x58lKw== dependencies: "@cosmjs/amino" "^0.28.1" "@cosmjs/crypto" "^0.28.1" -- 2.45.2