CONSOLE-4772: Update list pages to use DataView in Workloads Tab

frontend/packages/console-app/locales/en/console-app.json

@@ -442,6 +442,8 @@
   "Authentication is being reconfigured. The new identity provider will be available once reconfiguration is complete.": "Authentication is being reconfigured. The new identity provider will be available once reconfiguration is complete.",
   "View authentication conditions for reconfiguration status.": "View authentication conditions for reconfiguration status.",
   "Add": "Add",
+  "Min available {{minAvailable}}": "Min available {{minAvailable}}",
+  "Max unavailable {{maxUnavailable}}": "Max unavailable {{maxUnavailable}}",
   "Min available {{minAvailable}} of {{count}} pod_one": "Min available {{minAvailable}} of {{count}} pod",
   "Min available {{minAvailable}} of {{count}} pod_other": "Min available {{minAvailable}} of {{count}} pods",
   "Max unavailable {{maxUnavailable}} of {{count}} pod_one": "Max unavailable {{maxUnavailable}} of {{count}} pod",
@@ -453,20 +455,19 @@
   "An eviction is allowed if at least \"minAvailable\" pods selected by \"selector\" will still be available after the eviction, i.e. even in the absence of the evicted pod. So for example you can prevent all voluntary evictions by specifying \"100%\".": "An eviction is allowed if at least \"minAvailable\" pods selected by \"selector\" will still be available after the eviction, i.e. even in the absence of the evicted pod. So for example you can prevent all voluntary evictions by specifying \"100%\".",
   "More information:": "More information:",
   "PodDisruptionBudget documentation": "PodDisruptionBudget documentation",
+  "Disruption not allowed": "Disruption not allowed",
   "Unknown error removing PodDisruptionBudget {{pdbName}}.": "Unknown error removing PodDisruptionBudget {{pdbName}}.",
   "Remove PodDisruptionBudget?": "Remove PodDisruptionBudget?",
   "Are you sure you want to remove the PodDisruptionBudget <1>{{pdbName}}</1> from <4>{{workloadName}}</4>?": "Are you sure you want to remove the PodDisruptionBudget <1>{{pdbName}}</1> from <4>{{workloadName}}</4>?",
   "The PodDisruptionBudget will be deleted.": "The PodDisruptionBudget will be deleted.",
   "Requirement": "Requirement",
-  "Selector": "Selector",
-  "Availability": "Availability",
-  "Allowed disruptions": "Allowed disruptions",
   "{{count}} PodDisruptionBudget violated_one": "{{count}} PodDisruptionBudget violated",
   "{{count}} PodDisruptionBudget violated_other": "{{count}} PodDisruptionBudget violated",
   "PodDisruptionBudget details": "PodDisruptionBudget details",
   "Min available": "Min available",
   "Max unavailable": "Max unavailable",
   "Allowed disruption": "Allowed disruption",
+  "Selector": "Selector",
   "Label query over pods whose evictions are managed by the disruption budget. Anull selector will match no pods, while an empty ({}) selector will select all pods within the namespace.": "Label query over pods whose evictions are managed by the disruption budget. Anull selector will match no pods, while an empty ({}) selector will select all pods within the namespace.",
   "Resource is already covered by another PodDisruptionBudget": "Resource is already covered by another PodDisruptionBudget",
   "Availability requirement value": "Availability requirement value",
@@ -479,8 +480,9 @@
   "Create {{label}}": "Create {{label}}",
   "Edit {{label}}": "Edit {{label}}",
   "{helpText}": "{helpText}",
+  "Availability": "Availability",
+  "Allowed disruptions": "Allowed disruptions",
   "Create PodDisruptionBudget": "Create PodDisruptionBudget",
-  "Disruption not allowed": "Disruption not allowed",
   "No PodDisruptionBudget": "No PodDisruptionBudget",
   "Learn how to create, import, and run applications on OpenShift with step-by-step instructions and tasks.": "Learn how to create, import, and run applications on OpenShift with step-by-step instructions and tasks.",
   "Quick starts": "Quick starts",

frontend/packages/console-app/src/components/pdb/AvailabilityDisplay.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import * as _ from 'lodash';
+import { useTranslation } from 'react-i18next';
+import { DASH } from '@console/shared/src/constants/ui';
+import { PodDisruptionBudgetKind } from './types';
+
+const AvailabilityDisplay: React.FC<AvailabilityDisplayProps> = ({ pdb }) => {
+  const { t } = useTranslation();
+
+  if (_.isNil(pdb.spec.maxUnavailable) && _.isNil(pdb.spec.minAvailable)) {
+    return <>{DASH}</>;
+  }
+
+  if (_.isNil(pdb.spec.maxUnavailable)) {
+    return (
+      <>
+        {t('console-app~Min available {{minAvailable}}', { minAvailable: pdb.spec.minAvailable })}
+      </>
+    );
+  }
+
+  return (
+    <>
+      {t('console-app~Max unavailable {{maxUnavailable}}', {
+        maxUnavailable: pdb.spec.maxUnavailable,
+      })}
+    </>
+  );
+};
+
+type AvailabilityDisplayProps = {
+  pdb: PodDisruptionBudgetKind;
+};
+
+export default AvailabilityDisplay;

frontend/packages/console-app/src/components/pdb/DisruptionsAllowed.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { Tooltip } from '@patternfly/react-core';
+import { useTranslation } from 'react-i18next';
+import { YellowExclamationTriangleIcon } from '@console/dynamic-plugin-sdk';
+import { PodDisruptionBudgetKind } from './types';
+import { isDisruptionViolated } from './utils/get-pdb-resources';
+
+const DisruptionsAllowed: React.FC<DisruptionsAllowedProps> = ({ pdb }) => {
+  const { t } = useTranslation();
+  const isPDBViolated = isDisruptionViolated(pdb);
+
+  return (
+    <>
+      {pdb.status.disruptionsAllowed}{' '}
+      {isPDBViolated && (
+        <Tooltip content={t('console-app~Disruption not allowed')}>
+          <YellowExclamationTriangleIcon />
+        </Tooltip>
+      )}
+    </>
+  );
+};
+
+type DisruptionsAllowedProps = {
+  pdb: PodDisruptionBudgetKind;
+};
+
+export default DisruptionsAllowed;

frontend/packages/console-app/src/components/pdb/PDBList.tsx

@@ -1,31 +1,171 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import { useActiveColumns } from '@console/internal/components/factory/Table/active-columns-hook';
-import VirtualizedTable from '@console/internal/components/factory/Table/VirtualizedTable';
-import { getPDBTableColumns } from './pdb-table-columns';
-import PodDisruptionBudgetTableRow from './PDBTableRow';
+import {
+  actionsCellProps,
+  cellIsStickyProps,
+  getNameCellProps,
+  initialFiltersDefault,
+  ConsoleDataView,
+} from '@console/app/src/components/data-view/ConsoleDataView';
+import { GetDataViewRows } from '@console/app/src/components/data-view/types';
+import { TableColumn } from '@console/dynamic-plugin-sdk/src/extensions/console-types';
+import { ResourceLink, Selector } from '@console/internal/components/utils';
+import { LoadingBox } from '@console/internal/components/utils/status-box';
+import { referenceForModel } from '@console/internal/module/k8s';
+import LazyActionMenu from '@console/shared/src/components/actions/LazyActionMenu';
+import { Timestamp } from '@console/shared/src/components/datetime/Timestamp';
+import { DASH } from '@console/shared/src/constants/ui';
+import { PodDisruptionBudgetModel } from '../../models';
+import AvailabilityDisplay from './AvailabilityDisplay';
+import DisruptionsAllowed from './DisruptionsAllowed';
 import { PodDisruptionBudgetKind } from './types';
 
-const PodDisruptionBudgetList: React.FC<PodDisruptionBudgetsListProps> = (props) => {
+export const tableColumnInfo = [
+  { id: 'name' },
+  { id: 'namespace' },
+  { id: 'selector' },
+  { id: 'minAvailable' },
+  { id: 'disruptionsAllowed' },
+  { id: 'creationTimestamp' },
+  { id: '' },
+];
+
+const getDataViewRows: GetDataViewRows<PodDisruptionBudgetKind, undefined> = (data, columns) => {
+  return data.map(({ obj: pdb }) => {
+    const { name, namespace } = pdb.metadata;
+    const resourceKind = referenceForModel(PodDisruptionBudgetModel);
+    const context = { [resourceKind]: pdb };
+
+    const rowCells = {
+      [tableColumnInfo[0].id]: {
+        cell: <ResourceLink kind={resourceKind} name={name} namespace={namespace} />,
+        props: getNameCellProps(name),
+      },
+      [tableColumnInfo[1].id]: {
+        cell: <ResourceLink kind="Namespace" name={namespace} />,
+      },
+      [tableColumnInfo[2].id]: {
+        cell: <Selector selector={pdb.spec.selector} namespace={namespace} />,
+      },
+      [tableColumnInfo[3].id]: {
+        cell: <AvailabilityDisplay pdb={pdb} />,
+      },
+      [tableColumnInfo[4].id]: {
+        cell: <DisruptionsAllowed pdb={pdb} />,
+      },
+      [tableColumnInfo[5].id]: {
+        cell: <Timestamp timestamp={pdb.metadata.creationTimestamp} />,
+      },
+      [tableColumnInfo[6].id]: {
+        cell: <LazyActionMenu context={context} />,
+        props: actionsCellProps,
+      },
+    };
+
+    return columns.map(({ id }) => {
+      const cell = rowCells[id]?.cell || DASH;
+      return {
+        id,
+        props: rowCells[id]?.props,
+        cell,
+      };
+    });
+  });
+};
+
+const usePDBColumns = (): TableColumn<PodDisruptionBudgetKind>[] => {
   const { t } = useTranslation();
-  const [columns] = useActiveColumns({ columns: getPDBTableColumns() });
+  const columns = React.useMemo(() => {
+    return [
+      {
+        title: t('console-app~Name'),
+        id: tableColumnInfo[0].id,
+        sort: 'metadata.name',
+        props: {
+          ...cellIsStickyProps,
+          modifier: 'nowrap',
+        },
+      },
+      {
+        title: t('console-app~Namespace'),
+        id: tableColumnInfo[1].id,
+        sort: 'metadata.namespace',
+        props: {
+          modifier: 'nowrap',
+        },
+      },
+      {
+        title: t('console-app~Selector'),
+        id: tableColumnInfo[2].id,
+        sort: 'spec.selector',
+        props: {
+          modifier: 'nowrap',
+          width: 20,
+        },
+      },
+      {
+        title: t('console-app~Availability'),
+        id: tableColumnInfo[3].id,
+        sort: 'spec.minAvailable',
+        props: {
+          modifier: 'nowrap',
+        },
+      },
+      {
+        title: t('console-app~Allowed disruptions'),
+        id: tableColumnInfo[4].id,
+        sort: 'status.disruptionsAllowed',
+        props: {
+          modifier: 'nowrap',
+        },
+      },
+      {
+        title: t('console-app~Created'),
+        id: tableColumnInfo[5].id,
+        sort: 'metadata.creationTimestamp',
+        props: {
+          modifier: 'nowrap',
+        },
+      },
+      {
+        title: '',
+        id: tableColumnInfo[6].id,
+        props: {
+          ...cellIsStickyProps,
+        },
+      },
+    ];
+  }, [t]);
+  return columns;
+};
+
+const PodDisruptionBudgetList: React.FCC<PodDisruptionBudgetsListProps> = ({
+  data,
+  loaded,
+  ...props
+}) => {
+  const columns = usePDBColumns();
 
   return (
-    <VirtualizedTable<PodDisruptionBudgetKind>
-      {...props}
-      aria-label={t('console-app~PodDisruptionBudgets')}
-      label={t('console-app~PodDisruptionBudgets')}
-      columns={columns}
-      Row={PodDisruptionBudgetTableRow}
-    />
+    <React.Suspense fallback={<LoadingBox />}>
+      <ConsoleDataView<PodDisruptionBudgetKind>
+        {...props}
+        label={PodDisruptionBudgetModel.labelPlural}
+        data={data}
+        loaded={loaded}
+        columns={columns}
+        initialFilters={initialFiltersDefault}
+        getDataViewRows={getDataViewRows}
+        hideColumnManagement
+      />
+    </React.Suspense>
   );
 };
 
 export default PodDisruptionBudgetList;
 
 type PodDisruptionBudgetsListProps = {
   data: PodDisruptionBudgetKind[];
-  unfilteredData: PodDisruptionBudgetKind[];
   loaded: boolean;
-  loadError: any;
+  loadError?: any;
 };

frontend/packages/console-app/src/components/pdb/PDBPage.tsx

@@ -1,9 +1,7 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { ListPageBody } from '@console/dynamic-plugin-sdk';
-import { useListPageFilter } from '@console/internal/components/factory/ListPage/filter-hook';
 import ListPageCreate from '@console/internal/components/factory/ListPage/ListPageCreate';
-import ListPageFilter from '@console/internal/components/factory/ListPage/ListPageFilter';
 import ListPageHeader from '@console/internal/components/factory/ListPage/ListPageHeader';
 import { useK8sWatchResource } from '@console/internal/components/utils/k8s-watch-hook';
 import { referenceForModel } from '@console/internal/module/k8s';
@@ -27,7 +25,6 @@ export const PodDisruptionBudgetsPage: React.FC<PodDisruptionBudgetsPageProps> =
     namespace,
   });
 
-  const [data, filteredData, onFilterChange] = useListPageFilter(resources);
   const resourceKind = referenceForModel(PodDisruptionBudgetModel);
   const accessReview = {
     groupVersionKind: resourceKind,
@@ -41,13 +38,7 @@ export const PodDisruptionBudgetsPage: React.FC<PodDisruptionBudgetsPageProps> =
         </ListPageCreate>
       </ListPageHeader>
       <ListPageBody>
-        <ListPageFilter data={data} loaded={loaded} onFilterChange={onFilterChange} />
-        <PodDisruptionBudgetList
-          data={filteredData}
-          unfilteredData={resources}
-          loaded={loaded}
-          loadError={loadError}
-        />
+        <PodDisruptionBudgetList data={resources} loaded={loaded} loadError={loadError} />
       </ListPageBody>
     </>
   );