From bc8019c94700add0a8ad91785051e91e1c8a1ed9 Mon Sep 17 00:00:00 2001 From: Ugo Palatucci Date: Wed, 12 Jul 2023 10:20:51 +0200 Subject: [PATCH] OCPBUGS-15566: remove virtualized table and add pagination --- package.json | 2 - .../hooks/usePagination/usePagination.ts | 19 +++ .../hooks/usePagination/utils/constants.ts | 17 +++ src/utils/hooks/usePagination/utils/types.ts | 13 ++ src/views/states/list/StatesList.tsx | 121 ++++++++---------- yarn.lock | 82 ------------ 6 files changed, 104 insertions(+), 150 deletions(-) create mode 100644 src/utils/hooks/usePagination/usePagination.ts create mode 100644 src/utils/hooks/usePagination/utils/constants.ts create mode 100644 src/utils/hooks/usePagination/utils/types.ts diff --git a/package.json b/package.json index f8880c67..fc0e166f 100644 --- 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 new file mode 100644 index 00000000..12428aab --- /dev/null +++ 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(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 new file mode 100644 index 00000000..afe20c39 --- /dev/null +++ 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 new file mode 100644 index 00000000..a0da8c1a --- /dev/null +++ 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 index 93e8c98c..d0048377 100644 --- 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({ 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 ( - - id))} - rowData={{ rowIndex: index }} - /> - - ); - }; + const paginatedData = filteredData.slice(pagination?.startIndex, pagination?.endIndex + 1); return ( <> - ({ - id, - title, - additional, - })), - id: NodeNetworkStateModelRef, - selectedColumns: new Set(activeColumns?.map((col) => col?.id)), - type: t('NodeNetworkState'), - }} - /> +
+ { + 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'), + }} + /> + + 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} + /> +
- {measurementCacheRef.current && ( - - {({ width }) => ( - - )} - - )} + {paginatedData.map((nns, index) => ( + id))} + rowData={{ rowIndex: index }} + /> + ))}
diff --git a/yarn.lock b/yarn.lock index 3de9f6ac..6a1fd93c 100644 --- 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/react-table@4.108.0": 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" -linear-layout-vector@0.0.1: - 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"