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',