Add support for custom table filters

[vojtechszocs]

Table and List components now support custom filter functions via existing ListPage.rowFilters prop pass-through.

For example:

// packages/kubevirt-plugin/src/components/table-filters.ts

import { TableFilter } from '@console/internal/components/factory/table-filters';

export const kubevirtTableFilters: TableFilters = {
  VmStatus: {
    type: 'vm-status',
    filter: (statuses, vm) => {
      const status = getSimpleVmStatus(vm);
      return statuses.selected.has(status) || !_.includes(statuses.all, status);
    },
  },
};

type TableFilters = {
  [name: string]: {
    type: string;
    filter: TableFilter;
  };
};

// packages/kubevirt-plugin/src/components/vm.tsx

import { kubevirtTableFilters } from './table-filters';

const filters = [{
  type: kubevirtTableFilters.VmStatus.type, // change here
  selected: VM_SIMPLE_STATUS_ALL,
  reducer: getSimpleVmStatus,
  items: VM_SIMPLE_STATUS_ALL.map((status) => ({
    id: status,
    title: VM_SIMPLE_STATUS_TO_TEXT[status],
  })),
  filter: kubevirtTableFilters.VmStatus.filter, // change here
}];

// declare VirtualMachinesPage as usual, passing rowFilters={filters}

Additionally, Table vs. List filter map inconsistency was removed by using the same tableFilters implementation.

---

/cc @spadgett @christianvogt @mareklibra @jtomasek

[openshift-ci-robot]

@vojtechszocs: GitHub didn't allow me to request PR reviews from the following users: mareklibra.

Note that only openshift members and repo collaborators can review this PR, and authors cannot review their own PRs.

Details

In response to this:

This PR makes Table and List components support custom filter functions via customFilterFuncs prop, for example:

const kubevirtFilterFuncs = {
 'vm-status': (statuses, vm) => {
   const status = getSimpleVmStatus(vm);
   return statuses.selected.has(status) || !_.includes(statuses.all, status);
 },
};

const VirtualMachinesPage = (props) => (
 <ListPage
   {...props}
   canCreate
   kind={VirtualMachineModel.kind}
   ListComponent={VMList}
   createProps={getCreateProps(props.namespace)}
   rowFilters={filters}
   customFilterFuncs={kubevirtFilterFuncs}
 />
);

Built-in tableFilters take precedence over customFilterFuncs:

const filter = tableFilters[name] || customFilterFuncs[name];

Additionally, Table vs. List built-in filter inconsistency was removed by using the same tableFilters implementation.

---

/cc @spadgett @christianvogt @mareklibra @jtomasek

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

[vojtechszocs]

FYI @jelkosz

[vojtechszocs]

@spadgett @alecmerdler Can you please share your knowledge on rowFilters prop of ListPage component?

For example, in public/components/pod.tsx

const filters = [{
  type: 'pod-status',
  selected: [ 'Running', 'Pending', 'Terminating', 'CrashLoopBackOff' ],
  reducer: podPhaseFilterReducer,
  items: [
    { id: 'Running', title: 'Running' },
    { id: 'Pending', title: 'Pending' },
    { id: 'Terminating', title: 'Terminating' },
    { id: 'CrashLoopBackOff', title: 'CrashLoopBackOff' },
    // Use title "Completed" to match what appears in the status column for the pod.
    // The pod phase is "Succeeded," but the container state is "Completed."
    { id: 'Succeeded', title: 'Completed' },
    { id: 'Failed', title: 'Failed' },
    { id: 'Unknown', title: 'Unknown '},
  ],
}];

The rowFilters prop is used to construct RowsOfRowFilters in ListPageWrapper_ representing the various (visual) filter components, and is therefore unrelated to what we're trying to do in this PR, right?

[christianvogt]

As discussed, I do not understand why rowFilters is disconnected from the filter function declarations which are currently mapped by type string inside table.tsx and list.tsx. Why the decoupling?
Could we not add a filter: (selected, all) => boolean property to the filter definition objects?

[spadgett]

As discussed, I do not understand why rowFilters is disconnected from the filter function declarations which are currently mapped by type string inside table.tsx and list.tsx. Why the decoupling?
Could we not add a filter: (selected, all) => boolean property to the filter definition objects?

I agree, that's a cleaner approach. I don't know the history of the current implementation. @alecmerdler might.

We should consider the same thing for sortFunc, which follows the same pattern.

[vojtechszocs]

PR updated, added KubeVirt example code in PR description.

[christianvogt]

/lgtm

[mareklibra]

@spadgett , @christianvogt , @vojtechszocs , is there a way how to pass additional objects to row filters? As an example, to determine status of a virtual machine, additional objects (like pods or custom resource objects) need to be inspected.

[spadgett]

/approve

[spadgett]

/lgtm

[vojtechszocs]

@spadgett , @christianvogt , @vojtechszocs , is there a way how to pass additional objects to row filters? As an example, to determine status of a virtual machine, additional objects (like pods or custom resource objects) need to be inspected.

@mareklibra This can be done as a follow-up. It seems that the VM table needs more data beyond the usual list of VM objects, so one way to solve that is to make the VM table work with composite (synthetic) objects that combine VM data and any other k8s resource data that is necessary.

[christianvogt]

/lgtm

[openshift-ci-robot]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: christianvogt, spadgett, vojtechszocs

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

The pull request process is described here

Details

Needs approval from an approver in each of these files:

• frontend/OWNERS [spadgett]

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