Pass page limit and offset for fetching records

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 (
     <Table>
@@ -108,7 +121,8 @@ const RegistryRecords = ({ type }) => {
         </TableRow>
       </TableHead>
       <TableBody>
-        {paginatedRecords.map((record) => {
+        {records.sort(sorter)
+          .map((record) => {
             const { id, names, createTime, attributes: { type, name: displayName, fileName, version, description, service, package: pkg } } = record;
 
             let pkgLink;
@@ -153,18 +167,20 @@ const RegistryRecords = ({ type }) => {
                 </TableCell>
               </TableRow>
             );
-        })}
+          }
+          )}
       </TableBody>
       <TableFooter>
         <TableRow>
           <TablePagination
             component="td"
             rowsPerPageOptions={[5, 10, 25]}
-            count={records.length}
+            count={records.length >= rowsPerPage ? -1 : rowsPerPage}
             rowsPerPage={rowsPerPage}
             page={page}
             onPageChange={handleChangePage}
             onRowsPerPageChange={handleChangeRowsPerPage}
+            labelDisplayedRows={labelDisplayedRows}
           />
         </TableRow>
       </TableFooter>

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