Merge branch 'improvement/add-virtualise-list-for-tables' into tmp/oc…

…topus/w/2.7/improvement/add-virtualise-list-for-tables
scality · Dec 9, 2020 · 43bd056 · 43bd056
2 parents 3904539 + 8f0ca15
commit 43bd056
Show file tree

Hide file tree

Showing 9 changed files with 246 additions and 137 deletions.
diff --git a/ui/cypress/integration/node/nodetabs.spec.js b/ui/cypress/integration/node/nodetabs.spec.js
@@ -137,9 +137,10 @@ describe('Node page volumes tabs', () => {
 
   it('brings me to the loki-vol volume page', () => {
     cy.stubHistory();
+
     cy.get('[data-cy="volume_table_name_cell"]')
-      .contains('td', 'loki-vol')
-      .click();
+      .contains('div', 'loki-vol')
+      .click({ force: true });
     cy.get('@historyPush').should(
       'be.calledWith',
       '/volumes/loki-vol/overview?node=master-0',

diff --git a/ui/cypress/integration/volume/volumelist.spec.js b/ui/cypress/integration/volume/volumelist.spec.js
@@ -20,15 +20,21 @@ describe('Volume list', () => {
     );
   });
 
-  it('brings me to the overview tab of master-0-alertmanager Volume', () => {
+  it('brings me to the overview tab of worker-0-burry-1 Volume', () => {
+    // After implementing the virtualized table, not all the volumes are visible at the first render.
+    // So we should test the first several volumes which are visiable.
+
     cy.visit('/volumes');
     cy.stubHistory();
+    // The application re-renders, it's possible the element we're interacting with has become "dead"
+    // cy... failed because the element has been detached from the DOM
 
     cy.get('[data-cy="volume_table_name_cell"]')
-      .contains('master-1-prometheus')
-      .click();
+      .contains('worker-0-burry-1')
+      .click({ force: true });
+
     cy.get('@historyPush').should('be.calledWithExactly', {
-      pathname: '/volumes/master-1-prometheus/overview',
+      pathname: '/volumes/worker-0-burry-1/overview',
       search: '',
     });
   });
@@ -38,10 +44,10 @@ describe('Volume list', () => {
     cy.stubHistory();
 
     cy.get('[data-cy="volume_table_name_cell"]')
-      .contains('prom-m0-reldev')
-      .click();
+      .contains('master-0-alertmanager')
+      .click({ force: true });
     cy.get('@historyPush').should('be.calledOnce').and('be.calledWithExactly', {
-      pathname: '/volumes/prom-m0-reldev/metrics',
+      pathname: '/volumes/master-0-alertmanager/metrics',
       search: 'from=now-7d',
     });
   });

diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -22,8 +22,10 @@
     "react-router-dom": "^5.1.0",
     "react-scripts": "^3.4.4",
     "react-select": "^3.0.8",
-    "react-table": "^7.2.2",
+    "react-table": "^7.6.2",
     "react-virtualized": "^9.21.0",
+    "react-virtualized-auto-sizer": "^1.0.2",
+    "react-window": "^1.8.6",
     "redux": "^4.0.1",
     "redux-oidc": "^3.1.0",
     "redux-saga": "^1.0.2",

diff --git a/ui/src/components/CommonLayoutStyle.js b/ui/src/components/CommonLayoutStyle.js
@@ -87,7 +87,8 @@ export const SortIncentive = styled.span`
   display: none;
 `;
 
-export const TableHeader = styled.th`
+export const TableHeader = styled.span`
+  padding: ${padding.base};
   &:hover {
     ${SortIncentive} {
       display: block;

diff --git a/ui/src/components/NodeListTable.js b/ui/src/components/NodeListTable.js
@@ -15,11 +15,6 @@ import { fontSize, padding } from '@scality/core-ui/dist/style/theme';
 import CircleStatus from './CircleStatus';
 import { Button } from '@scality/core-ui';
 import { intl } from '../translations/IntlGlobalProvider';
-import {
-  SortCaretWrapper,
-  SortIncentive,
-  TableHeader,
-} from './CommonLayoutStyle';
 import { compareHealth, useTableSortURLSync } from '../services/utils';
 import {
   API_STATUS_READY,
@@ -140,6 +135,24 @@ const StatusText = styled.div`
   }};
 `;
 
+export const SortCaretWrapper = styled.span`
+  padding-left: ${padding.smaller};
+  position: absolute;
+`;
+
+export const SortIncentive = styled.span`
+  position: absolute;
+  display: none;
+`;
+
+export const TableHeader = styled.th`
+  &:hover {
+    ${SortIncentive} {
+      display: block;
+    }
+  }
+`;
+
 function GlobalFilter({
   preGlobalFilteredRows,
   globalFilter,
@@ -315,7 +328,7 @@ function Table({ columns, data, rowClicked, theme, selectedNodeName }) {
                     }),
                   );
                   return (
-                    <TableHeader {...headerStyleProps}>
+                    <TableHeader {...headerStyleProps} className="th">
                       {column.render('Header')}
                       <SortCaretWrapper>
                         {column.isSorted ? (