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,63 +121,66 @@ const RegistryRecords = ({ type }) => {
         </TableRow>
       </TableHead>
       <TableBody>
-        {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 = (<PackageLink config={config} type={type} pkg={pkg} />);
-          }
+            if (pkg) {
+              pkgLink = (<PackageLink config={config} type={type} pkg={pkg} />);
+            }
 
-          if (type === 'lrn:app') {
-            appLinks = (
-              <>
-                {(names || []).map(lrn =>
-                  <div key={lrn}>
-                    <AppLink config={config} lrn={lrn} />
-                  </div>
-                )}
-              </>
+            if (type === 'lrn:app') {
+              appLinks = (
+                <>
+                  {(names || []).map(lrn =>
+                    <div key={lrn}>
+                      <AppLink config={config} lrn={lrn} />
+                    </div>
+                  )}
+                </>
+              );
+            }
+
+            return (
+              <TableRow key={id} size='small'>
+                <TableCell monospace>{type}</TableCell>
+                <TableCell monospace>
+                  {appLinks || (names || []).map(name => <div key={name}>{name}</div>)}
+                </TableCell>
+                <TableCell monospace>
+                  {version}
+                </TableCell>
+                <TableCell>
+                  {displayName || service || fileName || description}
+                </TableCell>
+                <TableCell>
+                  {moment.utc(createTime).fromNow()}
+                </TableCell>
+                <TableCell monospace>
+                  {pkgLink}
+                </TableCell>
+                <TableCell>
+                  <QueryLink config={config} id={id} icon />
+                </TableCell>
+              </TableRow>
             );
           }
-
-          return (
-            <TableRow key={id} size='small'>
-              <TableCell monospace>{type}</TableCell>
-              <TableCell monospace>
-                {appLinks || (names || []).map(name => <div key={name}>{name}</div>)}
-              </TableCell>
-              <TableCell monospace>
-                {version}
-              </TableCell>
-              <TableCell>
-                {displayName || service || fileName || description}
-              </TableCell>
-              <TableCell>
-                {moment.utc(createTime).fromNow()}
-              </TableCell>
-              <TableCell monospace>
-                {pkgLink}
-              </TableCell>
-              <TableCell>
-                <QueryLink config={config} id={id} icon />
-              </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',