migrate to ConsoleDataView for PL and PLR list

Author: arvindk-softwaredev

locales/en/plugin__pipelines-console-plugin.json

@@ -200,8 +200,10 @@
   "File contains non-printable characters. Preview is not available.": "File contains non-printable characters. Preview is not available.",
   "Filename": "Filename",
   "Filesystem": "Filesystem",
+  "Filter by data source": "Filter by data source",
   "Filter by label": "Filter by label",
   "Filter by name": "Filter by name",
+  "Filter by status": "Filter by status",
   "Finally task": "Finally task",
   "Finally tasks": "Finally tasks",
   "Fit to screen": "Fit to screen",
@@ -322,7 +324,6 @@
   "No parameters are associated with this Pipeline.": "No parameters are associated with this Pipeline.",
   "No parameters are associated with this PipelineRun.": "No parameters are associated with this PipelineRun.",
   "No PipelineRuns found": "No PipelineRuns found",
-  "No Pipelines found": "No Pipelines found",
   "No Projects found": "No Projects found",
   "No Properties found": "No Properties found",
   "No Repositories found": "No Repositories found",

src/components/approval-tasks/ApprovalTasksList.tsx

@@ -44,7 +44,8 @@ const ApprovalTasksList: FC<ApprovalTasksListProps> = ({
   const { t } = useTranslation('plugin__pipelines-console-plugin');
   const { ns, name: pipelineRunName } = useParams();
   namespace = namespace || ns;
-  const [pipelineRuns, pipelineRunsLoaded] = usePipelineRuns(namespace);
+  const [pipelineRuns, k8sLoaded, trLoaded] = usePipelineRuns(namespace);
+  const pipelineRunsLoaded = k8sLoaded && trLoaded;
   const [approvalTasks, approvalTasksLoaded, approvalTasksLoadError] =
     useApprovalTasks(namespace, pipelineRunName);
   const columns = useApprovalsColumns(namespace);

src/components/common/DataViewFilterToolbar.tsx

@@ -31,6 +31,7 @@ export interface CheckboxFilterConfig {
   title: string;
   placeholder?: string;
   options: FilterOption[];
+  defaultValues?: string[];
 }
 
 export interface FilterValues {

src/components/hooks/useDataViewFilter.ts

@@ -1,19 +1,34 @@
+import {
+  K8sResourceCommon,
+  useFlag,
+} from '@openshift-console/dynamic-plugin-sdk';
 import { useCallback, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSearchParams } from 'react-router-dom-v5-compat';
+import { FLAG_PIPELINE_TEKTON_RESULT_INSTALLED } from '../../consts';
 import type {
   CheckboxFilterConfig,
   FilterValues,
 } from '../common/DataViewFilterToolbar';
+import {
+  isPipelineRunLoadedFromTektonResults,
+  pipelineFilterReducer,
+  pipelineRunDataSourceFilter,
+  pipelineRunFilterReducer,
+  pipelineRunStatusFilter,
+  pipelineStatusFilter,
+} from '../utils/pipeline-filter-reducer';
+import { ListFilterId, ListFilterLabels } from '../utils/pipeline-utils';
 
-interface UseDataViewFilterOptions<T> {
+export type ResourceType = 'Pipeline' | 'PipelineRun' | 'TaskRun';
+
+interface UseDataViewFilterOptions<T extends K8sResourceCommon> {
   data: T[];
-  getName: (obj: T) => string;
+  getName?: (obj: T) => string;
   getLabels?: (obj: T) => Record<string, string> | undefined;
-  checkboxFilters?: CheckboxFilterConfig[];
-  matchesCheckboxFilter?: (
-    obj: T,
-    filterId: string,
-    selectedValues: string[],
-  ) => boolean;
+  resourceType?: ResourceType;
+  defaultStatusValues?: string[];
+  defaultDataSourceValues?: string[];
 }
 
 const matchesLabels = (
@@ -31,74 +46,256 @@ const matchesLabels = (
   });
 };
 
-export const useDataViewFilter = <T>({
+interface ResourceFilterConfig {
+  statusOptions: ListFilterId[];
+  statusFilter: (phases: any, obj: any) => boolean;
+  statusReducer: (obj: any) => string;
+  hasDataSourceFilter: boolean;
+  defaultStatusValues?: string[];
+  defaultDataSourceValues?: string[];
+}
+
+const RESOURCE_FILTER_CONFIG: Record<ResourceType, ResourceFilterConfig> = {
+  Pipeline: {
+    statusOptions: [
+      ListFilterId.Succeeded,
+      ListFilterId.Running,
+      ListFilterId.Failed,
+      ListFilterId.Cancelled,
+      ListFilterId.Other,
+    ],
+    statusFilter: pipelineStatusFilter,
+    statusReducer: pipelineFilterReducer,
+    hasDataSourceFilter: false,
+  },
+  PipelineRun: {
+    statusOptions: [
+      ListFilterId.Succeeded,
+      ListFilterId.Running,
+      ListFilterId.Failed,
+      ListFilterId.Cancelled,
+      ListFilterId.Other,
+    ],
+    statusFilter: pipelineRunStatusFilter,
+    statusReducer: pipelineRunFilterReducer,
+    hasDataSourceFilter: true,
+    defaultDataSourceValues: ['cluster-data'],
+  },
+  TaskRun: {
+    statusOptions: [
+      ListFilterId.Succeeded,
+      ListFilterId.Running,
+      ListFilterId.Failed,
+      ListFilterId.Cancelled,
+    ],
+    statusFilter: pipelineRunStatusFilter,
+    statusReducer: pipelineRunFilterReducer,
+    hasDataSourceFilter: true,
+    defaultDataSourceValues: ['cluster-data'],
+  },
+};
+
+const defaultGetName = <T extends K8sResourceCommon>(obj: T): string =>
+  obj.metadata?.name || '';
+
+const defaultGetLabels = <T extends K8sResourceCommon>(
+  obj: T,
+): Record<string, string> | undefined => obj.metadata?.labels;
+
+export const useDataViewFilter = <T extends K8sResourceCommon>({
   data,
-  getName,
-  getLabels,
-  checkboxFilters = [],
-  matchesCheckboxFilter,
+  getName = defaultGetName,
+  getLabels = defaultGetLabels,
+  resourceType,
+  defaultStatusValues,
+  defaultDataSourceValues,
 }: UseDataViewFilterOptions<T>) => {
+  const { t } = useTranslation('plugin__pipelines-console-plugin');
+  const isTektonResultEnabled = useFlag(FLAG_PIPELINE_TEKTON_RESULT_INSTALLED);
+  const allStatusIds = useMemo(() => Object.values(ListFilterId), []);
+  const resetFilterState = { name: '', labels: [] };
+
+  const checkboxFilters = useMemo<CheckboxFilterConfig[]>(() => {
+    if (!resourceType) return [];
+    const config = RESOURCE_FILTER_CONFIG[resourceType];
+    if (!config?.statusOptions?.length) return [];
+    const filters: CheckboxFilterConfig[] = [
+      {
+        id: 'status',
+        title: t('Status'),
+        placeholder: t('Filter by status'),
+        defaultValues: defaultStatusValues ?? config.defaultStatusValues,
+        options: config.statusOptions.map((id) => ({
+          value: id,
+          label: ListFilterLabels[id],
+          count: 0,
+        })),
+      },
+    ];
+    if (config.hasDataSourceFilter && isTektonResultEnabled) {
+      filters.push({
+        id: 'dataSource',
+        title: t('Data source'),
+        placeholder: t('Filter by data source'),
+        defaultValues:
+          defaultDataSourceValues ?? config.defaultDataSourceValues,
+        options: [
+          { value: 'cluster-data', label: t('Cluster'), count: 0 },
+          { value: 'archived-data', label: t('Archived'), count: 0 },
+        ],
+      });
+    }
+    return filters;
+  }, [
+    resourceType,
+    isTektonResultEnabled,
+    t,
+    defaultStatusValues,
+    defaultDataSourceValues,
+  ]);
+
+  const config = resourceType
+    ? RESOURCE_FILTER_CONFIG[resourceType]
+    : undefined;
+
+  const matchesCheckboxFilter = useCallback(
+    (obj: T, filterId: string, selectedValues: string[]) => {
+      if (filterId === 'status' && config) {
+        return config.statusFilter(
+          { selected: selectedValues, all: allStatusIds },
+          obj,
+        );
+      }
+      if (filterId === 'dataSource') {
+        return pipelineRunDataSourceFilter({ selected: selectedValues }, obj);
+      }
+      return true;
+    },
+    [allStatusIds, config],
+  );
+
+  const getCheckboxFilterValue = useCallback(
+    (obj: T, filterId: string): string | undefined => {
+      if (filterId === 'status' && config) return config.statusReducer(obj);
+      if (filterId === 'dataSource') {
+        return isPipelineRunLoadedFromTektonResults(obj)
+          ? 'archived-data'
+          : 'cluster-data';
+      }
+      return undefined;
+    },
+    [config],
+  );
+
   const initialValues = useMemo(() => {
     const values: FilterValues = { name: '', labels: [] };
     checkboxFilters.forEach((f) => {
-      values[f.id] = [];
+      values[f.id] = f.defaultValues ?? [];
     });
     return values;
   }, [checkboxFilters]);
 
   const [filterValues, setFilterValues] = useState<FilterValues>(initialValues);
+  const [, setSearchParams] = useSearchParams();
+
+  const resetPage = useCallback(() => {
+    setSearchParams((prev) => {
+      const next = new URLSearchParams(prev);
+      next.set('page', '1');
+      return next;
+    });
+  }, [setSearchParams]);
 
   const onFilterChange = useCallback(
     (key: string, value: string | string[]) => {
       setFilterValues((prev) => ({ ...prev, [key]: value }));
+      resetPage();
     },
-    [],
+    [resetPage],
   );
 
   const onClearAll = useCallback(() => {
-    setFilterValues(initialValues);
-  }, [initialValues]);
+    setFilterValues(resetFilterState);
+    resetPage();
+  }, [resetPage]);
 
-  const filteredData = useMemo(() => {
-    if (!data) return [];
-    return data.filter((obj) => {
+  const passesNameAndLabelFilters = useCallback(
+    (obj: T): boolean => {
       const name = getName(obj);
       if (
         filterValues.name &&
         !name?.toLowerCase().includes(filterValues.name.toLowerCase())
       ) {
         return false;
       }
-
       const labelFilters = filterValues.labels || [];
       if (labelFilters.length > 0 && getLabels) {
         if (!matchesLabels(getLabels(obj), labelFilters)) {
           return false;
         }
       }
+      return true;
+    },
+    [filterValues.name, filterValues.labels, getName, getLabels],
+  );
 
-      if (matchesCheckboxFilter) {
-        for (const filter of checkboxFilters) {
-          const selected = (filterValues[filter.id] as string[]) || [];
-          if (
-            selected.length > 0 &&
-            !matchesCheckboxFilter(obj, filter.id, selected)
-          ) {
-            return false;
-          }
+  const passesCheckboxFilter = useCallback(
+    (obj: T, excludeFilterId?: string): boolean => {
+      if (!resourceType) return true;
+      for (const filter of checkboxFilters) {
+        if (filter.id === excludeFilterId) continue;
+        const selected = (filterValues[filter.id] as string[]) || [];
+        if (
+          selected.length > 0 &&
+          !matchesCheckboxFilter(obj, filter.id, selected)
+        ) {
+          return false;
         }
       }
-
       return true;
-    });
+    },
+    [resourceType, checkboxFilters, filterValues, matchesCheckboxFilter],
+  );
+
+  const filteredData = useMemo(() => {
+    if (!data) return [];
+    return data.filter(
+      (obj) => passesNameAndLabelFilters(obj) && passesCheckboxFilter(obj),
+    );
+  }, [data, passesNameAndLabelFilters, passesCheckboxFilter]);
+
+  const updatedCheckboxFilters = useMemo(() => {
+    if (!resourceType || !data) return checkboxFilters;
+    return checkboxFilters.map((filter) => ({
+      ...filter,
+      options: filter.options.map((opt) => {
+        let count = 0;
+        data.forEach((obj) => {
+          if (
+            passesNameAndLabelFilters(obj) &&
+            passesCheckboxFilter(obj, filter.id) &&
+            getCheckboxFilterValue(obj, filter.id) === opt.value
+          ) {
+            count++;
+          }
+        });
+        return { ...opt, count };
+      }),
+    }));
   }, [
-    data,
-    filterValues,
-    getName,
-    getLabels,
+    resourceType,
     checkboxFilters,
-    matchesCheckboxFilter,
+    data,
+    getCheckboxFilterValue,
+    passesNameAndLabelFilters,
+    passesCheckboxFilter,
   ]);
 
-  return { filterValues, onFilterChange, onClearAll, filteredData };
+  return {
+    filterValues,
+    onFilterChange,
+    onClearAll,
+    filteredData,
+    updatedCheckboxFilters,
+  };
 };