New virtualized table component

[rawagner]

This PR revamps table component. Depends on revamped list pages #8827 . See only last commit. Converts PodList and MachineList pages.

New table is virtualized only. Non-virtualized table should be a separate component to keep the amount of props to minimum IMO.

Changes in new table

1. filtering - sice new list pages are taking care of filtering New ListPage components #8827 there is no need to have the functionality in the new table which simplified things quite a bit
2. sorting - colum (previously called Header, i've changed that to align with PF) provides a sort function - a specific implementation not just some string which loosly references implementation (previously sortFunc). sort prop also accepts string selector.

Prevous header/sorting definition

const getHeader = (showNodes) => [
    {
      title: i18next.t(podColumnInfo.name.title),
      id: podColumnInfo.name.id,
      sortField: 'metadata.name', // or sortFunc: 'fooFunc'
      transforms: [sortable],
      props: { className: podColumnInfo.name.classes },
    },
];

new way - almost the same, but we are in control when sorting

const getColumns = (showNodes: boolean, t: TFunction): TableColumn<PodKind>[] => [
  {
    title: t(podColumnInfo.name.title),
    id: podColumnInfo.name.id,
    sort: (data, direction) => { // data and direction is properly typed as PodKind[] and SortByDirection
      // do whatever sorting you need
      return data.sort(sortResourceByValue<PodKind>(direction, podRestarts));
    },
    // or a simple string selector
    sort: 'metadata.name'
    transforms: [sortable],
    props: { className: podColumnInfo.name.classes },
  },
];

memoize the colums (headers) and pass them to new VirtualizedTable

// ....
const columns = React.useMemo(() => getColumns(showNodes, t), [showNodes, t]);
return (
  <VirtualizedTable<PodKind>
    data={data}
    loaded={loaded}
    loadError={loadError}
    aria-label={t('public~Pods')}
    columns={columns}
    Row={Row}
  />
);

3. Row prop is evaluated as an actual React.FC not a function which returns a JSX.
4. no more customData prop drilling
   Wrap your Row component into useCallback and pass whatever data you want.

const Row = React.useCallback<React.FC<RowProps<PodKind>>>(
  (rowProps) => (
    <PodTableRow
      {...rowProps}
      // these are the old `customData`
      showNamespaceOverride={showNamespaceOverride}
      showNodes={showNodes}
    />
  ),
  [showNamespaceOverride, showNodes],
);

as @TheRealJon mentioned in some of my other PR, doing this is antipattern so I reverted this change. You can still pass additional data to rows by rowData prop. rowData is more descriptive name than customData IMO.

[openshift-ci-robot]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: rawagner

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

• frontend/OWNERS [rawagner]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[spadgett]

This is great to see and looks like a much cleaner API. Thank you @rawagner 👍

I did want to mention we have a long standing bug with table performance tracked in https://bugzilla.redhat.com/show_bug.cgi?id=1856355 and patternfly/react-virtualized-extension#8. @jcaianirh and @dtaylor113 have been looking at it. If we're going to be reworking our tables in console anyway, it might be a good time to try to tackle that, particularly if it requires changes that touch all pages. @jcaianirh mentioned that the PatternFly composable table might perform better, but I'm not sure if that works with virtualization or how big a change that is. It's possible the performance issue is just an upstream PatternFly bug, but I wanted to raise it.

Ideally virtualization would just be a single boolean prop to enable or disable, but I'm not sure if that's possible since the PatternFly virtualized and non-virtualized tables have different APIs.

[rawagner]

I tried composable table (example with virtualized table is here ) but I didnt see any performance improvement on pods page :/

[rawagner]

@spadgett i've made some changes to cell cache and wrapped row rendering functions in useCallback and I think there's is a difference when scrolling but it still isnt fluid.

[rawagner]

Ok, I added one last change - useActiveColumns (see latest commit) which loads user settings & filters the table columns based on those settings. The filtered columns are then passed to the table. The table is handling only column visibility based on the actual size.

The table how has 3 less properties and IMO its more transparent to see whats going on.

[rawagner]

/retest

[rawagner]

/retest

[yapei]

Checked sorting, filtering, column management and responsive of the table on Pods and Machines list page, looks good
/label qe-approved

[rawagner]

/retest

[spadgett]

/lgtm

[openshift-ci]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: rawagner, spadgett

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

• frontend/OWNERS [rawagner,spadgett]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[rawagner]

/retest

[rawagner]

/retest