add support for tektonresult api to load TaskRuns

openshift · Nov 16, 2023 · a756cf8 · a756cf8
1 parent ba8ac18
commit a756cf8
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 16 deletions.
diff --git a/frontend/packages/pipelines-plugin/src/components/pipelineruns/PipelineRunDetailsPage.tsx b/frontend/packages/pipelines-plugin/src/components/pipelineruns/PipelineRunDetailsPage.tsx
@@ -11,19 +11,19 @@ import { pipelineRunStatus } from '../../utils/pipeline-filter-reducer';
 import { chainsSignedAnnotation } from '../pipelines/const';
 import { useDevPipelinesBreadcrumbsFor } from '../pipelines/hooks';
 import { usePipelineOperatorVersion } from '../pipelines/utils/pipeline-operator';
-import { useTaskRuns } from '../taskruns/useTaskRuns';
 import { PipelineRunDetails } from './detail-page-tabs/PipelineRunDetails';
 import { PipelineRunLogsWithActiveTask } from './detail-page-tabs/PipelineRunLogs';
 import TaskRuns from './detail-page-tabs/TaskRuns';
 import PipelineRunEvents from './events/PipelineRunEvents';
+import { useGetTaskRuns } from './hooks/useTektonResults';
 import PipelineRunParametersForm from './PipelineRunParametersForm';
 import { useMenuActionsWithUserAnnotation } from './triggered-by';
 
 const PipelineRunDetailsPage: React.FC<DetailsPageProps> = (props) => {
   const { kindObj, match } = props;
   const { t } = useTranslation();
   const operatorVersion = usePipelineOperatorVersion(props.namespace);
-  const [taskRuns] = useTaskRuns(props.namespace);
+  const [taskRuns] = useGetTaskRuns(props.namespace);
   const menuActions: KebabAction[] = useMenuActionsWithUserAnnotation(
     getPipelineRunKebabActions(operatorVersion, taskRuns, true),
   );

diff --git a/...ackages/pipelines-plugin/src/components/pipelineruns/detail-page-tabs/PipelineRunLogs.tsx b/...ackages/pipelines-plugin/src/components/pipelineruns/detail-page-tabs/PipelineRunLogs.tsx
@@ -11,7 +11,7 @@ import { PipelineRunKind, TaskRunKind } from '../../../types';
 import { pipelineRunFilterReducer } from '../../../utils/pipeline-filter-reducer';
 import { TektonResourceLabel } from '../../pipelines/const';
 import { ColoredStatusIcon } from '../../pipelines/detail-page-tabs/pipeline-details/StatusIcon';
-import { useTaskRuns } from '../../taskruns/useTaskRuns';
+import { useGetTaskRuns } from '../hooks/useTektonResults';
 import { ErrorDetailsWithStaticLog } from '../logs/log-snippet-types';
 import { getDownloadAllLogsCallback } from '../logs/logs-utils';
 import LogsWrapperComponent from '../logs/LogsWrapperComponent';
@@ -209,7 +209,7 @@ export const PipelineRunLogsWithActiveTask: React.FC<PipelineRunLogsWithActiveTa
   params,
 }) => {
   const activeTask = _.get(params, 'match.params.name');
-  const [taskRuns, taskRunsLoaded] = useTaskRuns(obj?.metadata?.namespace, obj?.metadata?.name);
+  const [taskRuns, taskRunsLoaded] = useGetTaskRuns(obj?.metadata?.namespace, obj?.metadata?.name);
   return (
     taskRunsLoaded && <PipelineRunLogs obj={obj} activeTask={activeTask} taskRuns={taskRuns} />
   );

diff --git a/...ipelines-plugin/src/components/pipelineruns/detail-page-tabs/PipelineRunVisualization.tsx b/...ipelines-plugin/src/components/pipelineruns/detail-page-tabs/PipelineRunVisualization.tsx
@@ -2,16 +2,16 @@ import * as React from 'react';
 import { LoadingInline } from '@console/internal/components/utils';
 import { PipelineKind, PipelineRunKind } from '../../../types';
 import PipelineVisualization from '../../pipelines/detail-page-tabs/pipeline-details/PipelineVisualization';
-import { useTaskRuns } from '../../taskruns/useTaskRuns';
 import { usePipelineFromPipelineRun } from '../hooks/usePipelineFromPipelineRun';
+import { useGetTaskRuns } from '../hooks/useTektonResults';
 import './PipelineRunVisualization.scss';
 
 type PipelineRunVisualizationProps = {
   pipelineRun: PipelineRunKind;
 };
 
 const PipelineRunVisualization: React.FC<PipelineRunVisualizationProps> = ({ pipelineRun }) => {
-  const [taskRuns, taskRunsLoaded] = useTaskRuns(
+  const [taskRuns, taskRunsLoaded] = useGetTaskRuns(
     pipelineRun?.metadata?.namespace,
     pipelineRun?.metadata?.name,
   );

diff --git a/frontend/packages/pipelines-plugin/src/components/pipelineruns/hooks/useTektonResults.ts b/frontend/packages/pipelines-plugin/src/components/pipelineruns/hooks/useTektonResults.ts
@@ -147,14 +147,27 @@ export const useGetPipelineRuns = (ns: string, options?: { name: string; kind: s
   ];
 };
 
-export const useGetTaskRuns = (ns: string) => {
-  const [taskRuns, taskRunsLoaded] = useTaskRuns(ns);
-  const [resultTaskRuns, resultTaskRunsLoaded] = useTRTaskRuns(ns);
+export const useGetTaskRuns = (
+  ns: string,
+  pipelineRunName?: string,
+): [TaskRunKind[], boolean, unknown, GetNextPage] => {
+  const [k8sTaskRuns, k8sTaskRunsLoaded, k8sTaskRunsLoadError] = useTaskRuns(ns, pipelineRunName);
+  const [
+    resultTaskRuns,
+    resultTaskRunsLoaded,
+    resultTaskRunsLoadError,
+    getNextPage,
+  ] = useTRTaskRuns(ns);
   const mergedTaskRuns =
-    resultTaskRunsLoaded || taskRunsLoaded
-      ? uniqBy([...taskRuns, ...resultTaskRuns], (r) => r.metadata.name)
+    resultTaskRunsLoaded || k8sTaskRunsLoaded
+      ? uniqBy([...k8sTaskRuns, ...resultTaskRuns], (r) => r.metadata.name)
       : [];
-  return [mergedTaskRuns, resultTaskRunsLoaded || taskRunsLoaded];
+  return [
+    mergedTaskRuns,
+    resultTaskRunsLoaded || k8sTaskRunsLoaded,
+    k8sTaskRunsLoadError || resultTaskRunsLoadError,
+    getNextPage,
+  ];
 };
 
 // export const useTRTaskRunLog = (

diff --git a/frontend/packages/pipelines-plugin/src/components/taskruns/list-page/TaskRunsList.tsx b/frontend/packages/pipelines-plugin/src/components/taskruns/list-page/TaskRunsList.tsx
@@ -5,19 +5,24 @@ import { ColumnLayout } from '@console/dynamic-plugin-sdk';
 import { Table } from '@console/internal/components/factory';
 import { useActiveColumns } from '@console/internal/components/factory/Table/active-columns-hook';
 import { TaskRunModel } from '../../../models';
+import { TaskRunKind } from '../../../types';
 import TaskRunsHeader from './TaskRunsHeader';
 import TaskRunsRow from './TaskRunsRow';
 
 interface TaskRunsListProps {
   customData?: { [key: string]: any };
   columnLayout: ColumnLayout;
+  loaded?: boolean;
+  data?: TaskRunKind[];
 }
 
 const TaskRunsList: React.FC<TaskRunsListProps> = (props) => {
   const { t } = useTranslation();
   const {
     columnLayout: { columns, id },
     customData,
+    data,
+    loaded,
   } = props;
   const [activeColumns, userSettingsLoaded] = useActiveColumns({
     columns,
@@ -27,6 +32,11 @@ const TaskRunsList: React.FC<TaskRunsListProps> = (props) => {
     activeColumns,
   ]);
   const newCustomData = { ...customData, selectedColumns };
+  const onRowsRendered = ({ stopIndex }) => {
+    if (loaded && stopIndex === data.length - 1) {
+      customData?.nextPage?.();
+    }
+  };
   return (
     userSettingsLoaded && (
       <Table
@@ -39,6 +49,7 @@ const TaskRunsList: React.FC<TaskRunsListProps> = (props) => {
         virtualize
         activeColumns={selectedColumns}
         customData={newCustomData}
+        onRowsRendered={onRowsRendered}
       />
     )
   );

diff --git a/frontend/packages/pipelines-plugin/src/components/taskruns/list-page/TaskRunsListPage.tsx b/frontend/packages/pipelines-plugin/src/components/taskruns/list-page/TaskRunsListPage.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 import * as _ from 'lodash';
 import Helmet from 'react-helmet';
 import { useTranslation } from 'react-i18next';
-import { ListPage } from '@console/internal/components/factory';
 import { getURLSearchParams } from '@console/internal/components/utils';
 import { referenceForModel } from '@console/internal/module/k8s';
 import {
@@ -13,6 +12,8 @@ import {
 } from '@console/shared';
 import { TaskRunModel } from '../../../models';
 import { usePipelineTechPreviewBadge } from '../../../utils/hooks';
+import { ListPage } from '../../ListPage';
+import { useGetTaskRuns } from '../../pipelineruns/hooks/useTektonResults';
 import { runFilters as taskRunFilters } from '../../pipelines/detail-page-tabs/PipelineRuns';
 import TaskRunsHeader from './TaskRunsHeader';
 import TaskRunsList from './TaskRunsList';
@@ -32,12 +33,24 @@ const TaskRunsListPage: React.FC<
   const { t } = useTranslation();
   const searchParams = getURLSearchParams();
   const kind = searchParams?.kind;
-  const badge = usePipelineTechPreviewBadge(namespace);
+  const ns = namespace || props?.match?.params?.ns;
+  const badge = usePipelineTechPreviewBadge(ns);
+  const trForPlr = props.selector && props.selector?.matchLabels?.['tekton.dev/pipelineRun'];
+  const [taskRuns, taskRunsLoaded, taskRunsLoadError, getNextPage] = useGetTaskRuns(ns, trForPlr);
+  const taskRunsResource = {
+    [referenceForModel(TaskRunModel)]: {
+      data: taskRuns,
+      kind: referenceForModel(TaskRunModel),
+      loadError: taskRunsLoadError,
+      loaded: taskRunsLoaded,
+    },
+  };
   const customData = React.useMemo(
     () => ({
       showPipelineColumn,
+      nextPage: getNextPage,
     }),
-    [showPipelineColumn],
+    [showPipelineColumn, getNextPage],
   );
   const columnManagementID = referenceForModel(TaskRunModel);
   const [tableColumns, , userSettingsLoaded] = useUserSettingsCompatibility<TableColumnsType>(
@@ -60,7 +73,7 @@ const TaskRunsListPage: React.FC<
           ListComponent={TaskRunsList}
           rowFilters={taskRunFilters(t)}
           badge={hideBadge ? null : badge}
-          namespace={namespace}
+          namespace={ns}
           columnLayout={{
             columns: TaskRunsHeader()().map((column) =>
               _.pick(column, ['title', 'additional', 'id']),
@@ -72,6 +85,7 @@ const TaskRunsListPage: React.FC<
                 : null,
             type: t('pipelines-plugin~TaskRun'),
           }}
+          data={taskRunsResource}
         />
       )}
     </>