New virtualized table component

frontend/packages/ceph-storage-plugin/src/utils/table-filters.ts

@@ -1,11 +1,12 @@
 import * as _ from 'lodash';
 import { TFunction } from 'i18next';
 import { RowFilter } from '@console/internal/components/filter-toolbar';
+import { K8sResourceKind } from '@console/internal/module/k8s';
 import { getPhase } from './noobaa-utils';
 
 const allPhases = ['Pending', 'Bound', 'Lost'];
 
-export const obcStatusFilter = (t: TFunction): RowFilter => ({
+export const obcStatusFilter = (t: TFunction): RowFilter<K8sResourceKind> => ({
   type: 'obc-status',
   filterGroupName: t('ceph-storage-plugin~Status'),
   reducer: getPhase,
@@ -19,12 +20,14 @@ export const obcStatusFilter = (t: TFunction): RowFilter => ({
     }
     const phase = getPhase(obc);
     return (
-      phases.selected.has(phase) || !_.includes(phases.all, phase) || _.isEmpty(phases.selected)
+      phases.selected.includes(phase) ||
+      !_.includes(phases.all, phase) ||
+      _.isEmpty(phases.selected)
     );
   },
 });
 
-export const obStatusFilter = (t: TFunction): RowFilter => ({
+export const obStatusFilter = (t: TFunction): RowFilter<K8sResourceKind> => ({
   type: 'ob-status',
   filterGroupName: t('ceph-storage-plugin~Status'),
   reducer: getPhase,
@@ -38,7 +41,9 @@ export const obStatusFilter = (t: TFunction): RowFilter => ({
     }
     const phase = getPhase(ob);
     return (
-      phases.selected.has(phase) || !_.includes(phases.all, phase) || _.isEmpty(phases.selected)
+      phases.selected.includes(phase) ||
+      !_.includes(phases.all, phase) ||
+      _.isEmpty(phases.selected)
     );
   },
 });

frontend/packages/console-app/src/components/nodes/NodeDetailsPage.tsx

@@ -33,7 +33,7 @@ const NodeDetailsPage: React.FC<React.ComponentProps<typeof DetailsPage>> = (pro
         <PodsPage
           showTitle={false}
           fieldSelector={`spec.nodeName=${obj.metadata.name}`}
-          customData={{ showNamespaceOverride: true }}
+          showNamespaceOverride
         />
       )),
       events(ResourceEventStream),

frontend/packages/console-shared/src/hooks/useK8sModel.ts

@@ -7,10 +7,11 @@ import { RootState } from '@console/internal/redux';
 // Hook that retrieves the k8s model for provided groupVersionKind reference. Hook version of
 // `connectToModel`.
 export const useK8sModel = (groupVersionKind: GroupVersionKind): [K8sKind, boolean] => [
-  useSelector<RootState, K8sKind>(
-    ({ k8s }) =>
-      k8s.getIn(['RESOURCES', 'models', groupVersionKind]) ??
-      k8s.getIn(['RESOURCES', 'models', kindForReference(groupVersionKind)]),
+  useSelector<RootState, K8sKind>(({ k8s }) =>
+    groupVersionKind
+      ? k8s.getIn(['RESOURCES', 'models', groupVersionKind]) ??
+        k8s.getIn(['RESOURCES', 'models', kindForReference(groupVersionKind)])
+      : undefined,
   ),
   useSelector<RootState, boolean>(({ k8s }) => k8s.getIn(['RESOURCES', 'inFlight']) ?? false),
 ];

frontend/packages/container-security/src/components/ImageVulnerabilitiesList.tsx

@@ -32,7 +32,7 @@ const ImageVulnerabilitiesList: React.FC<ImageVulnerabilitiesListProps> = (props
     },
   } = props;
 
-  const imageVulnerabilitiesRowFilters: RowFilter[] = [
+  const imageVulnerabilitiesRowFilters: RowFilter<ImageVuln>[] = [
     {
       filterGroupName: t('container-security~Severity'),
       items: [
@@ -47,7 +47,7 @@ const ImageVulnerabilitiesList: React.FC<ImageVulnerabilitiesListProps> = (props
       type: 'vulnerability-severity',
       reducer: (v) => v.vulnerability.severity,
       filter: (filter, vuln) =>
-        filter.selected.has(vuln.vulnerability.severity) || _.isEmpty(filter.selected),
+        filter.selected?.includes(vuln.vulnerability.severity) || _.isEmpty(filter.selected),
     },
   ];
 

frontend/packages/knative-plugin/src/components/eventing/channels-list/ChannelListPage.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { MultiListPage } from '@console/internal/components/factory';
 import { RowFilter } from '@console/internal/components/filter-toolbar';
-import { K8sResourceKind, referenceFor, referenceForModel } from '@console/internal/module/k8s';
+import { K8sResourceCommon, referenceFor, referenceForModel } from '@console/internal/module/k8s';
 import {
   getDynamicChannelModel,
   useChannelModels,
@@ -34,29 +34,24 @@ const ChannelListPage: React.FC<React.ComponentProps<typeof MultiListPage>> = (p
     [eventSourceChannels, modelsLoaded],
   );
 
-  const getModelId = React.useCallback((obj: K8sResourceKind) => {
+  const getModelId = React.useCallback((obj: K8sResourceCommon) => {
     const reference = referenceFor(obj);
     const model = getDynamicChannelModel(reference);
     return model.id;
   }, []);
 
-  const rowFilterReducer = React.useCallback(
-    ({ selected }: { selected: Set<string>; all: string[] }, obj: K8sResourceKind) =>
-      selected.size === 0 || selected.has(getModelId(obj)),
-    [getModelId],
-  );
-
-  const channelRowFilter: RowFilter[] = React.useMemo(
+  const channelRowFilter = React.useMemo<RowFilter<K8sResourceCommon>[]>(
     () => [
       {
         filterGroupName: 'Type',
         type: 'event-source-type',
         items: eventSourceChannels.map(({ id, label }) => ({ id, title: label })),
         reducer: getModelId,
-        filter: rowFilterReducer,
+        filter: (filter, obj) =>
+          !filter.selected?.length || filter.selected?.includes(getModelId(obj)),
       },
     ],
-    [eventSourceChannels, getModelId, rowFilterReducer],
+    [eventSourceChannels, getModelId],
   );
   return (
     <MultiListPage

frontend/packages/knative-plugin/src/components/eventing/eventsource-list/EventSourceListPage.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { MultiListPage } from '@console/internal/components/factory';
 import { RowFilter } from '@console/internal/components/filter-toolbar';
 import {
-  K8sResourceKind,
+  K8sResourceCommon,
   modelFor,
   referenceFor,
   referenceForModel,
@@ -45,29 +45,24 @@ const EventSourceListPage: React.FC<React.ComponentProps<typeof MultiListPage>>
         : [],
     [sourcesModel, modelsLoaded],
   );
-  const getModelId = React.useCallback((obj: K8sResourceKind) => {
+  const getModelId = React.useCallback((obj: K8sResourceCommon) => {
     const reference = referenceFor(obj);
     const model = getDynamicEventSourceModel(reference) || modelFor(reference);
     return model.id;
   }, []);
 
-  const rowFilterReducer = React.useCallback(
-    ({ selected }: { selected: Set<string>; all: string[] }, obj: K8sResourceKind) =>
-      selected.size === 0 || selected.has(getModelId(obj)),
-    [getModelId],
-  );
-
-  const eventSourceRowFilters: RowFilter[] = React.useMemo(
+  const eventSourceRowFilters = React.useMemo<RowFilter<K8sResourceCommon>[]>(
     () => [
       {
         filterGroupName: 'Type',
         type: 'event-source-type',
         items: sourcesModel.map(({ id, label }) => ({ id, title: label })),
         reducer: getModelId,
-        filter: rowFilterReducer,
+        filter: (filter, obj) =>
+          !filter.selected?.length || filter.selected?.includes(getModelId(obj)),
       },
     ],
-    [sourcesModel, getModelId, rowFilterReducer],
+    [sourcesModel, getModelId],
   );
   return (
     <MultiListPage

frontend/packages/kubevirt-plugin/src/components/vm-disks/table-filters.ts

@@ -1,4 +1,3 @@
-import * as _ from 'lodash';
 import { RowFilter } from '@console/internal/components/filter-toolbar';
 import { DiskType } from '../../constants/vm/storage';
 
@@ -18,7 +17,7 @@ export const diskSourceFilter: RowFilter = {
   filter: (disks, obj) => {
     const diskType = typeReducer(obj);
     return (
-      disks.selected.size === 0 || disks.selected.has(diskType) || !_.includes(disks.all, diskType)
+      !disks.selected.length || disks.selected.includes(diskType) || disks.all?.includes(diskType)
     );
   },
 };

frontend/packages/kubevirt-plugin/src/components/vm-templates/vm-template.tsx

@@ -38,16 +38,16 @@ const filters = (t: TFunction): RowFilter<VirtualMachineTemplateBundle>[] => [
       return 'user';
     },
     items: templateProviders(t),
-    filter: (types, obj: VirtualMachineTemplateBundle) => {
+    filter: (types, obj) => {
       let providerFilter = true;
-      if (types.selected.size > 0) {
-        if (templateProviders(t).length === types.selected.size) {
+      if (types.selected?.length > 0) {
+        if (templateProviders(t).length === types.selected.length) {
           providerFilter = true;
         } else if (obj.template) {
           const type = getTemplateProviderType(obj.template);
-          providerFilter = types.selected.has(type);
+          providerFilter = types.selected.includes(type);
         } else {
-          providerFilter = types.selected.has('user');
+          providerFilter = types.selected.includes('user');
         }
       }
       return providerFilter;

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

@@ -17,8 +17,8 @@ export const vmStatusFilter: RowFilter = {
     const status = ((obj?.metadata as any)
       ?.vmStatusBundle as VMStatusBundle)?.status.getSimpleLabel();
     return (
-      statuses.selected.size === 0 ||
-      statuses.selected.has(status) ||
+      statuses.selected?.length === 0 ||
+      statuses.selected?.includes(status) ||
       !_.includes(statuses.all, status)
     );
   },
@@ -35,9 +35,9 @@ export const vmStatusFilterNew: RowFilter = {
   filter: (statuses, obj) => {
     const status = obj?.metadata?.status;
     return (
-      statuses.selected.size === 0 ||
-      statuses.selected.has(status) ||
-      !_.includes(statuses.all, status)
+      statuses.selected?.length === 0 ||
+      statuses.selected?.includes(status) ||
+      !_.includes(statuses?.all, status)
     );
   },
 };

frontend/packages/kubevirt-plugin/src/components/vms/types.ts

@@ -4,6 +4,8 @@ import {
   PersistentVolumeClaimKind,
   PodKind,
 } from '@console/internal/module/k8s';
+import { V2VVMImportStatus } from '../../constants/v2v-import/ovirt/v2v-vm-import-status';
+import { VMStatusBundle } from '../../statuses/vm/types';
 import { V1alpha1DataVolume } from '../../types/api';
 import { VMIKind, VMKind } from '../../types/vm';
 import { VMImportKind } from '../../types/vm-import/ovirt/vm-import';
@@ -71,3 +73,23 @@ export enum VMTabEnum {
   nics = 'Network Interfaces',
   disks = 'Disks',
 }
+
+export type ObjectBundle = {
+  vm: VMKind;
+  vmi: VMIKind;
+  vmImport: VMImportKind;
+};
+
+export type VMRowObjType = {
+  metadata: {
+    name: string;
+    namespace: string;
+    status: string;
+    node: string;
+    creationTimestamp: string;
+    uid: string;
+    lookupID: string;
+    vmStatusBundle: VMStatusBundle;
+    vmImportStatus?: V2VVMImportStatus;
+  };
+} & ObjectBundle;

frontend/packages/local-storage-operator-plugin/src/components/disks-list/disks-list-page.tsx

@@ -175,27 +175,24 @@ export const NodesDisksListPage: React.FC<NodesDisksListPageProps> = ({
     </EmptyState>
   );
 
-  const diskFilters: RowFilter[] = [
+  const diskFilters: RowFilter<DiskMetadata>[] = [
     {
       type: 'disk-state',
       filterGroupName: t('lso-plugin~Disk State'),
-      reducer: (disk: DiskMetadata) => {
+      reducer: (disk) => {
         return disk?.status?.state;
       },
       items: [
         { id: DiskStates.Available, title: t('lso-plugin~Available') },
         { id: DiskStates.NotAvailable, title: t('lso-plugin~NotAvailable') },
         { id: DiskStates.Unknown, title: t('lso-plugin~Unknown') },
       ],
-      filter: (
-        states: { all: (keyof typeof DiskStates)[]; selected: Set<keyof typeof DiskStates> },
-        disk: DiskMetadata,
-      ) => {
+      filter: (states, disk) => {
         if (!states || !states.selected || _.isEmpty(states.selected)) {
           return true;
         }
         const diskState = disk?.status.state;
-        return states.selected.has(diskState) || !_.includes(states.all, diskState);
+        return states.selected.includes(diskState) || !_.includes(states.all, diskState);
       },
     },
   ];

frontend/packages/metal3-plugin/src/components/baremetal-hosts/table-filters.ts

@@ -64,15 +64,17 @@ export const getHostFilterStatus = (bundle: BareMetalHostBundle): string => {
   return _.findKey(hostStatesToFilterMap, ({ states }) => states.includes(bundle.status.status));
 };
 
-export const hostStatusFilter = (t: TFunction): RowFilter => ({
+export const hostStatusFilter = (t: TFunction): RowFilter<BareMetalHostBundle> => ({
   filterGroupName: 'Status',
   type: 'host-status',
   reducer: getHostFilterStatus,
   items: _.map(hostStatesToFilterMap, ({ title }, id) => ({ id, title: t(title) })),
-  filter: (groups, bundle: BareMetalHostBundle) => {
+  filter: (groups, bundle) => {
     const status = getHostFilterStatus(bundle);
     return (
-      groups.selected.has(status) || !_.includes(groups.all, status) || _.isEmpty(groups.selected)
+      groups.selected?.includes(status) ||
+      !_.includes(groups.all, status) ||
+      _.isEmpty(groups.selected)
     );
   },
 });

frontend/packages/metal3-plugin/src/components/baremetal-nodes/table-filters.ts

@@ -37,10 +37,12 @@ export const bareMetalNodeStatusFilter = (t: TFunction): RowFilter<BareMetalNode
   type: 'bare-metal-node-status',
   reducer: getBareMetalNodeFilterStatus,
   items: _.map(statesToFilterMap, ({ titleKey }, id) => ({ id, title: t(titleKey) })),
-  filter: (groups, bundle: BareMetalNodeListBundle) => {
+  filter: (groups, bundle) => {
     const status = isCSRBundle(bundle) ? 'approval' : getBareMetalNodeFilterStatus(bundle);
     return (
-      groups.selected.has(status) || !_.includes(groups.all, status) || _.isEmpty(groups.selected)
+      groups.selected?.includes(status) ||
+      !_.includes(groups.all, status) ||
+      _.isEmpty(groups.selected)
     );
   },
 });

frontend/packages/pipelines-plugin/src/utils/pipeline-filter-reducer.ts

@@ -65,32 +65,32 @@ export const pipelineRunFilterReducer = (pipelineRun): string => {
 };
 
 export const pipelineStatusFilter = (filters, pipeline) => {
-  if (!filters || !filters.selected || !filters.selected.size) {
+  if (!filters || !filters.selected || !filters.selected.length) {
     return true;
   }
   const status = pipelineFilterReducer(pipeline);
-  return filters.selected.has(status) || !_.includes(filters.all, status);
+  return filters.selected?.includes(status) || !_.includes(filters.all, status);
 };
 
 export const pipelineRunStatusFilter = (phases, pipeline) => {
-  if (!phases || !phases.selected || !phases.selected.size) {
+  if (!phases || !phases.selected || !phases.selected.length) {
     return true;
   }
 
   const status = pipelineRunFilterReducer(pipeline);
-  return phases.selected.has(status) || !_.includes(phases.all, status);
+  return phases.selected?.includes(status) || !_.includes(phases.all, status);
 };
 
 export const pipelineResourceFilterReducer = (pipelineResource): string => {
   return pipelineResource.spec.type;
 };
 
 export const pipelineResourceTypeFilter = (filters, pipelineResource): boolean => {
-  if (!filters || !filters.selected || !filters.selected.size) {
+  if (!filters || !filters.selected || !filters.selected.length) {
     return true;
   }
   const type = pipelineResourceFilterReducer(pipelineResource);
-  return filters.selected.has(type) || !_.includes(filters.all, type);
+  return filters.selected?.includes(type) || !_.includes(filters.all, type);
 };
 
 export const taskRunFilterReducer = (taskRun): string => {

frontend/public/actions/k8s.ts

@@ -12,6 +12,7 @@ import { makeReduxID } from '../components/utils/k8s-watcher';
 import { APIServiceModel } from '../models';
 import { coFetchJSON } from '../co-fetch';
 import { referenceForModel, K8sResourceKind, K8sKind, fetchSwagger } from '../module/k8s';
+import { FilterValue } from '../components/factory/table-filters';
 
 export enum ActionType {
   ReceivedResources = 'resources',
@@ -71,7 +72,7 @@ export const getResources = () => (dispatch: Dispatch) => {
     });
 };
 
-export const filterList = (id: string, name: string, value: string) =>
+export const filterList = (id: string, name: string, value: FilterValue) =>
   action(ActionType.FilterList, { id, name, value });
 
 export const startWatchK8sObject = (id: string) => action(ActionType.StartWatchK8sObject, { id });