OCPBUGS-15566: remove virtualized table and add pagination

nmstate · Jul 12, 2023 · bc8019c · bc8019c
1 parent 92cf6fa
commit bc8019c
Show file tree

Hide file tree

Showing 6 changed files with 104 additions and 150 deletions.
diff --git a/package.json b/package.json
@@ -32,7 +32,6 @@
     "@openshift/dynamic-plugin-sdk-webpack": "~1.0.0",
     "@patternfly/react-core": "4.175.4",
     "@patternfly/react-table": "^4.93.1",
-    "@patternfly/react-virtualized-extension": "^4.88.115",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.0.0",
     "@testing-library/react-hooks": "^8.0.1",
@@ -68,7 +67,6 @@
     "react-query": "^3.39.2",
     "react-router": "5.2.0",
     "react-router-dom": "5.2.0",
-    "react-virtualized": "^9.22.5",
     "sass": "^1.57.1",
     "sass-loader": "^13.2.0",
     "style-loader": "^3.3.1",

diff --git a/src/utils/hooks/usePagination/usePagination.ts b/src/utils/hooks/usePagination/usePagination.ts
@@ -0,0 +1,19 @@
+import { useState } from 'react';
+
+import { paginationInitialState } from './utils/constants';
+import { PaginationState, UsePagination } from './utils/types';
+
+const usePagination: UsePagination = () => {
+  const [pagination, setPagination] = useState<PaginationState>(paginationInitialState);
+
+  const onPaginationChange = (newPagination: PaginationState) => {
+    setPagination((currentPagination) => ({
+      ...currentPagination,
+      ...newPagination,
+    }));
+  };
+
+  return { onPaginationChange, pagination };
+};
+
+export default usePagination;
diff --git a/src/utils/hooks/usePagination/utils/constants.ts b/src/utils/hooks/usePagination/utils/constants.ts
@@ -0,0 +1,17 @@
+import { PerPageOptions } from '@patternfly/react-core';
+
+import { PaginationState } from './types';
+
+export const paginationDefaultValues: PerPageOptions[] = [
+  { title: '15', value: 15 },
+  { title: '50', value: 50 },
+  { title: '100', value: 100 },
+  { title: '200', value: 200 },
+];
+
+export const paginationInitialState: PaginationState = {
+  endIndex: 15,
+  page: 1,
+  perPage: 15,
+  startIndex: 0,
+};
diff --git a/src/utils/hooks/usePagination/utils/types.ts b/src/utils/hooks/usePagination/utils/types.ts
@@ -0,0 +1,13 @@
+export type PaginationState = {
+  endIndex: number;
+  page: number;
+  perPage: number;
+  startIndex: number;
+};
+
+export type UsePaginationValues = {
+  onPaginationChange: (newPagination: PaginationState) => void;
+  pagination: PaginationState;
+};
+
+export type UsePagination = () => UsePaginationValues;
diff --git a/src/views/states/list/StatesList.tsx b/src/views/states/list/StatesList.tsx
@@ -1,5 +1,4 @@
-import React, { FC, useEffect, useRef } from 'react';
-import { CellMeasurer, CellMeasurerCache } from 'react-virtualized';
+import React, { FC } from 'react';
 import {
   NodeNetworkStateModelGroupVersionKind,
   NodeNetworkStateModelRef,
@@ -14,9 +13,11 @@ import {
   useK8sWatchResource,
   useListPageFilter,
 } from '@openshift-console/dynamic-plugin-sdk';
+import { Pagination } from '@patternfly/react-core';
 import { Table, TableGridBreakpoint, TableHeader } from '@patternfly/react-table';
-import { AutoSizer, VirtualTableBody } from '@patternfly/react-virtualized-extension';
 import { V1beta1NodeNetworkState } from '@types';
+import usePagination from '@utils/hooks/usePagination/usePagination';
+import { paginationDefaultValues } from '@utils/hooks/usePagination/utils/constants';
 
 import InterfaceDrawer from './components/InterfaceDrawer/InterfaceDrawer';
 import StateRow from './components/StateRow';
@@ -27,11 +28,8 @@ import useStateFilters from './hooks/useStateFilters';
 
 const StatesList: FC = () => {
   const { t } = useNMStateTranslation();
-
   const { selectedInterfaceName, selectedStateName, selectedInterfaceType } = useDrawerInterface();
 
-  const measurementCacheRef = useRef(null);
-
   const [states, statesLoaded, statesError] = useK8sWatchResource<V1beta1NodeNetworkState[]>({
     groupVersionKind: NodeNetworkStateModelGroupVersionKind,
     isList: true,
@@ -43,83 +41,74 @@ const StatesList: FC = () => {
     (iface) => iface.name === selectedInterfaceName && iface.type === selectedInterfaceType,
   );
 
+  const { onPaginationChange, pagination } = usePagination();
   const [columns, activeColumns] = useStateColumns();
   const filters = useStateFilters();
   const [data, filteredData, onFilterChange] = useListPageFilter(states, filters);
 
-  useEffect(() => {
-    measurementCacheRef.current = new CellMeasurerCache({
-      fixedWidth: true,
-      minHeight: 44,
-      keyMapper: (rowIndex) => rowIndex,
-    });
-  }, []);
-
-  const rowRenderer = ({ index, key, parent }) => {
-    return (
-      <CellMeasurer
-        cache={measurementCacheRef.current}
-        columnIndex={0}
-        key={key}
-        parent={parent}
-        rowIndex={index}
-      >
-        <StateRow
-          obj={filteredData[index]}
-          activeColumnIDs={new Set(activeColumns.map(({ id }) => id))}
-          rowData={{ rowIndex: index }}
-        />
-      </CellMeasurer>
-    );
-  };
+  const paginatedData = filteredData.slice(pagination?.startIndex, pagination?.endIndex + 1);
 
   return (
     <>
       <ListPageHeader title={t(NodeNetworkStateModel.label)}></ListPageHeader>
       <ListPageBody>
         <StatusBox loaded={statesLoaded} error={statesError} data={states}>
-          <ListPageFilter
-            data={data}
-            loaded={statesLoaded}
-            rowFilters={filters}
-            onFilterChange={onFilterChange}
-            columnLayout={{
-              columns: columns?.map(({ id, title, additional }) => ({
-                id,
-                title,
-                additional,
-              })),
-              id: NodeNetworkStateModelRef,
-              selectedColumns: new Set(activeColumns?.map((col) => col?.id)),
-              type: t('NodeNetworkState'),
-            }}
-          />
+          <div className="list-managment-group">
+            <ListPageFilter
+              data={data}
+              loaded={statesLoaded}
+              rowFilters={filters}
+              onFilterChange={(...args) => {
+                onFilterChange(...args);
+                onPaginationChange({
+                  endIndex: pagination?.perPage,
+                  page: 1,
+                  perPage: pagination?.perPage,
+                  startIndex: 0,
+                });
+              }}
+              columnLayout={{
+                columns: columns?.map(({ id, title, additional }) => ({
+                  id,
+                  title,
+                  additional,
+                })),
+                id: NodeNetworkStateModelRef,
+                selectedColumns: new Set(activeColumns?.map((col) => col?.id)),
+                type: t('NodeNetworkState'),
+              }}
+            />
+            <Pagination
+              onPerPageSelect={(_e, perPage, page, startIndex, endIndex) =>
+                onPaginationChange({ endIndex, page, perPage, startIndex })
+              }
+              onSetPage={(_e, page, perPage, startIndex, endIndex) =>
+                onPaginationChange({ endIndex, page, perPage, startIndex })
+              }
+              className="list-managment-group__pagination"
+              defaultToFullPage
+              itemCount={filteredData?.length}
+              page={pagination?.page}
+              perPage={pagination?.perPage}
+              perPageOptions={paginationDefaultValues}
+            />
+          </div>
 
           <Table
             cells={activeColumns}
-            rows={filteredData}
+            rows={paginatedData}
             gridBreakPoint={TableGridBreakpoint.none}
             role="presentation"
           >
             <TableHeader />
-            {measurementCacheRef.current && (
-              <AutoSizer disableHeight>
-                {({ width }) => (
-                  <VirtualTableBody
-                    className="pf-c-table pf-c-virtualized pf-c-window-scroller"
-                    deferredMeasurementCache={measurementCacheRef.current}
-                    rowHeight={measurementCacheRef.current.rowHeight}
-                    height={400}
-                    overscanRowCount={2}
-                    columnCount={1}
-                    rows={filteredData}
-                    rowCount={filteredData.length}
-                    rowRenderer={rowRenderer}
-                    width={width}
-                  />
-                )}
-              </AutoSizer>
-            )}
+            {paginatedData.map((nns, index) => (
+              <StateRow
+                key={nns?.metadata?.name}
+                obj={nns}
+                activeColumnIDs={new Set(activeColumns.map(({ id }) => id))}
+                rowData={{ rowIndex: index }}
+              />
+            ))}
           </Table>
         </StatusBox>
       </ListPageBody>

diff --git a/yarn.lock b/yarn.lock
@@ -263,13 +263,6 @@
   dependencies:
     regenerator-runtime "^0.13.11"
 
-"@babel/runtime@^7.8.7":
-  version "7.22.3"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.3.tgz#0a7fce51d43adbf0f7b517a71f4c3aaca92ebcbb"
-  integrity sha512-XsDuspWKLUsxwCp6r7EhsExHtYfbe5oAGQ19kqngTdCPUoPQzOPdUbD/pB9PJiwb2ptYKQDjSJT3R6dC+EPqfQ==
-  dependencies:
-    regenerator-runtime "^0.13.11"
-
 "@babel/template@^7.18.10", "@babel/template@^7.3.3":
   version "7.18.10"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.18.10.tgz#6f9134835970d1dbf0835c0d100c9f38de0c5e71"
@@ -833,39 +826,16 @@
     tippy.js "5.1.2"
     tslib "^2.0.0"
 
-"@patternfly/react-core@^4.276.8":
-  version "4.276.8"
-  resolved "https://registry.yarnpkg.com/@patternfly/react-core/-/react-core-4.276.8.tgz#7ef52830dcdda954bd5bec40132da6eef49aba6f"
-  integrity sha512-dn322rEzBeiVztZEuCZMUUittNb8l1hk30h9ZN31FLZLLVtXGlThFNV9ieqOJYA9zrYxYZrHMkTnOxSWVacMZg==
-  dependencies:
-    "@patternfly/react-icons" "^4.93.6"
-    "@patternfly/react-styles" "^4.92.6"
-    "@patternfly/react-tokens" "^4.94.6"
-    focus-trap "6.9.2"
-    react-dropzone "9.0.0"
-    tippy.js "5.1.2"
-    tslib "^2.0.0"
-
 "@patternfly/react-icons@^4.26.4", "@patternfly/react-icons@^4.90.0", "@patternfly/react-icons@^4.93.0":
   version "4.93.0"
   resolved "https://registry.yarnpkg.com/@patternfly/react-icons/-/react-icons-4.93.0.tgz#523034461307711e40cb92975a3a7360e8a184db"
   integrity sha512-OH0vORVioL+HLWMEog8/3u8jsiMCeJ0pFpvRKRhy5Uk4CdAe40k1SOBvXJP6opr+O8TLbz0q3bm8Jsh/bPaCuQ==
 
-"@patternfly/react-icons@^4.93.6":
-  version "4.93.6"
-  resolved "https://registry.yarnpkg.com/@patternfly/react-icons/-/react-icons-4.93.6.tgz#4aff18724afa30157e3ffd6a6414951dbb39dcb3"
-  integrity sha512-ZrXegc/81oiuTIeWvoHb3nG/eZODbB4rYmekBEsrbiysyO7m/sUFoi/RLvgFINrRoh6YCJqL5fj06Jg6d7jX1g==
-
 "@patternfly/react-styles@^4.11.4", "@patternfly/react-styles@^4.25.4", "@patternfly/react-styles@^4.89.0", "@patternfly/react-styles@^4.92.0":
   version "4.92.0"
   resolved "https://registry.yarnpkg.com/@patternfly/react-styles/-/react-styles-4.92.0.tgz#817d06b3bf9a42b485d14fdb2f51dbf565d040b1"
   integrity sha512-B/f6iyu8UEN1+wRxdC4sLIhvJeyL8SqInDXZmwOIqK8uPJ8Lze7qrbVhkkVzbMF37/oDPVa6dZH8qZFq062LEA==
 
-"@patternfly/react-styles@^4.92.6":
-  version "4.92.6"
-  resolved "https://registry.yarnpkg.com/@patternfly/react-styles/-/react-styles-4.92.6.tgz#a72c5f0b7896ce1c419d1db79f8e39ba6632057d"
-  integrity sha512-b8uQdEReMyeoMzjpMri845QxqtupY/tIFFYfVeKoB2neno8gkcW1RvDdDe62LF88q45OktCwAe/8A99ker10Iw==
-
 "@patternfly/[email protected]":
   version "4.108.0"
   resolved "https://registry.yarnpkg.com/@patternfly/react-table/-/react-table-4.108.0.tgz#82956d4a64e0581b569acdc89f2a6d7d330840d3"
@@ -895,23 +865,6 @@
   resolved "https://registry.yarnpkg.com/@patternfly/react-tokens/-/react-tokens-4.94.0.tgz#d605487667c544a71ab3495a19e3ad2777191943"
   integrity sha512-fYXxUJZnzpn89K2zzHF0cSncZZVGKrohdb5f5T1wzxwU2NZPVGpvr88xhm+V2Y/fSrrTPwXcP3IIdtNOOtJdZw==
 
-"@patternfly/react-tokens@^4.94.6":
-  version "4.94.6"
-  resolved "https://registry.yarnpkg.com/@patternfly/react-tokens/-/react-tokens-4.94.6.tgz#47c715721ad3dd315a523f352ba1a0de2b03f0bc"
-  integrity sha512-tm7C6nat+uKMr1hrapis7hS3rN9cr41tpcCKhx6cod6FLU8KwF2Yt5KUxakhIOCEcE/M/EhXhAw/qejp8w0r7Q==
-
-"@patternfly/react-virtualized-extension@^4.88.115":
-  version "4.88.115"
-  resolved "https://registry.yarnpkg.com/@patternfly/react-virtualized-extension/-/react-virtualized-extension-4.88.115.tgz#01ed2d91c76bf4b3a56da45b9b30718e60d76710"
-  integrity sha512-FCr0JSavfnDXQMg/uGzhMbAF9R6AWXRCdiTP5HOjdrF9EcavL6tnxPJy7/U/+fChgls3chN/KQ85TlbGm96D3w==
-  dependencies:
-    "@patternfly/react-core" "^4.276.8"
-    "@patternfly/react-icons" "^4.93.6"
-    "@patternfly/react-styles" "^4.92.6"
-    linear-layout-vector "0.0.1"
-    react-virtualized "^9.21.1"
-    tslib "^2.0.0"
-
 "@sinclair/typebox@^0.24.1":
   version "0.24.51"
   resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.24.51.tgz#645f33fe4e02defe26f2f5c0410e1c094eac7f5f"
@@ -2403,11 +2356,6 @@ cloneable-readable@^1.0.0:
     process-nextick-args "^2.0.0"
     readable-stream "^2.3.5"
 
-clsx@^1.0.4:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
-  integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
-
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
@@ -2923,14 +2871,6 @@ dom-accessibility-api@^0.5.6, dom-accessibility-api@^0.5.9:
   resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.14.tgz#56082f71b1dc7aac69d83c4285eef39c15d93f56"
   integrity sha512-NMt+m9zFMPZe0JcY9gN224Qvk6qLIdqex29clBvc/y75ZBX9YA9wNK3frsYvu2DI1xcCIwxwnX+TlsJ2DSOADg==
 
-dom-helpers@^5.1.3:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
-  integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
-  dependencies:
-    "@babel/runtime" "^7.8.7"
-    csstype "^3.0.2"
-
 dom-serializer@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-2.0.0.tgz#e41b802e1eedf9f6cae183ce5e622d789d7d8e53"
@@ -5391,11 +5331,6 @@ levn@~0.3.0:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
-[email protected]:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/linear-layout-vector/-/linear-layout-vector-0.0.1.tgz#398114d7303b6ecc7fd6b273af7b8401d8ba9c70"
-  integrity sha512-w+nr1ZOVFGyMhwr8JKo0YzqDc8C2Z7pc9UbTuJA4VG/ezlSFEx+7kNrfCYvq7JQ/jHKR+FWy6reNrkVVzm0hSA==
-
 lines-and-columns@^1.1.6:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
@@ -6499,11 +6434,6 @@ react-is@^18.0.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
-react-lifecycles-compat@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
-  integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
-
 react-query@^3.39.2:
   version "3.39.2"
   resolved "https://registry.yarnpkg.com/react-query/-/react-query-3.39.2.tgz#9224140f0296f01e9664b78ed6e4f69a0cc9216f"
@@ -6558,18 +6488,6 @@ react-side-effect@^2.1.0:
   resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-2.1.2.tgz#dc6345b9e8f9906dc2eeb68700b615e0b4fe752a"
   integrity sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==
 
-react-virtualized@^9.21.1, react-virtualized@^9.22.5:
-  version "9.22.5"
-  resolved "https://registry.yarnpkg.com/react-virtualized/-/react-virtualized-9.22.5.tgz#bfb96fed519de378b50d8c0064b92994b3b91620"
-  integrity sha512-YqQMRzlVANBv1L/7r63OHa2b0ZsAaDp1UhVNEdUaXI8A5u6hTpA5NYtUueLH2rFuY/27mTGIBl7ZhqFKzw18YQ==
-  dependencies:
-    "@babel/runtime" "^7.7.2"
-    clsx "^1.0.4"
-    dom-helpers "^5.1.3"
-    loose-envify "^1.4.0"
-    prop-types "^15.7.2"
-    react-lifecycles-compat "^3.0.4"
-
 react@^17.0.1:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"