Update TaskRun List Page Columns & PipelineRun Tab

openshift · Oct 12, 2020 · e82afd7 · e82afd7
1 parent f12ee43
commit e82afd7
Show file tree

Hide file tree

Showing 8 changed files with 105 additions and 19 deletions.
diff --git a/frontend/packages/dev-console/src/components/pipelineruns/PipelineRunDetailsPage.tsx b/frontend/packages/dev-console/src/components/pipelineruns/PipelineRunDetailsPage.tsx
@@ -7,6 +7,7 @@ import { PipelineRunDetails } from './detail-page-tabs/PipelineRunDetails';
 import { PipelineRunLogsWithActiveTask } from './detail-page-tabs/PipelineRunLogs';
 import { useMenuActionsWithUserAnnotation } from './triggered-by';
 import { usePipelinesBreadcrumbsFor } from '../pipelines/hooks';
+import TaskRuns from './detail-page-tabs/TaskRuns';
 
 const PipelineRunDetailsPage: React.FC<DetailsPageProps> = (props) => {
   const { kindObj, match } = props;
@@ -24,6 +25,11 @@ const PipelineRunDetailsPage: React.FC<DetailsPageProps> = (props) => {
       pages={[
         navFactory.details(PipelineRunDetails),
         navFactory.editYaml(viewYamlComponent),
+        {
+          href: 'task-runs',
+          name: 'Task Runs',
+          component: TaskRuns,
+        },
         {
           href: 'logs',
           path: 'logs/:name?',

diff --git a/frontend/packages/dev-console/src/components/pipelineruns/detail-page-tabs/TaskRuns.tsx b/frontend/packages/dev-console/src/components/pipelineruns/detail-page-tabs/TaskRuns.tsx
@@ -0,0 +1,17 @@
+import * as React from 'react';
+import TaskRunsListPage from '../../taskruns/list-page/TaskRunsListPage';
+import { TaskRunKind } from '../../../utils/pipeline-augment';
+
+interface TaskRunsProps {
+  obj: TaskRunKind;
+}
+
+const TaskRuns: React.FC<TaskRunsProps> = ({ obj }) => (
+  <TaskRunsListPage
+    showTitle={false}
+    selector={{ 'tekton.dev/pipelineRun': obj.metadata.name }}
+    hideBadge
+  />
+);
+
+export default TaskRuns;
diff --git a/frontend/packages/dev-console/src/components/taskruns/list-page/TaskRunsHeader.tsx b/frontend/packages/dev-console/src/components/taskruns/list-page/TaskRunsHeader.tsx
@@ -14,29 +14,42 @@ const TaskRunsHeader = () => {
       sortField: 'metadata.namespace',
       transforms: [sortable],
       props: { className: tableColumnClasses[1] },
+      id: 'namespace',
     },
     {
-      title: 'Status',
-      sortField: 'status.conditions[0].reason',
+      title: 'Pipeline',
+      sortField: 'metadata.labels[tekton.dev/pipeline]',
       transforms: [sortable],
       props: { className: tableColumnClasses[2] },
     },
     {
-      title: 'Started',
-      sortField: 'status.startTime',
+      title: 'Task',
+      sortField: 'spec.taskRef.name',
       transforms: [sortable],
       props: { className: tableColumnClasses[3] },
     },
     {
-      title: 'Duration',
-      sortField: 'status.completionTime',
+      title: 'Pod',
+      sortField: 'status.podName',
       transforms: [sortable],
       props: { className: tableColumnClasses[4] },
     },
     {
-      title: '',
+      title: 'Status',
+      sortField: 'status.conditions[0].reason',
+      transforms: [sortable],
       props: { className: tableColumnClasses[5] },
     },
+    {
+      title: 'Started',
+      sortField: 'status.startTime',
+      transforms: [sortable],
+      props: { className: tableColumnClasses[6] },
+    },
+    {
+      title: '',
+      props: { className: tableColumnClasses[7] },
+    },
   ];
 };
 

diff --git a/frontend/packages/dev-console/src/components/taskruns/list-page/TaskRunsList.tsx b/frontend/packages/dev-console/src/components/taskruns/list-page/TaskRunsList.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Table } from '@console/internal/components/factory';
+import { SortByDirection } from '@patternfly/react-table';
 import { TaskRunModel } from '../../../models';
 import TaskRunsHeader from './TaskRunsHeader';
 import TaskRunsRow from './TaskRunsRow';
@@ -8,6 +9,8 @@ const TaskRunsList: React.FC = (props) => (
   <Table
     {...props}
     aria-label={TaskRunModel.labelPlural}
+    defaultSortField="status.startTime"
+    defaultSortOrder={SortByDirection.desc}
     Header={TaskRunsHeader}
     Row={TaskRunsRow}
     virtualize

diff --git a/frontend/packages/dev-console/src/components/taskruns/list-page/TaskRunsListPage.tsx b/frontend/packages/dev-console/src/components/taskruns/list-page/TaskRunsListPage.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { getBadgeFromType } from '@console/shared';
 import { ListPage } from '@console/internal/components/factory';
 import { referenceForModel } from '@console/internal/module/k8s';
+import { getURLSearchParams } from '@console/internal/components/utils';
 import TaskRunsList from './TaskRunsList';
 import { TaskRunModel } from '../../../models';
 import { runFilters as taskRunFilters } from '../../pipelines/detail-page-tabs/PipelineRuns';
@@ -14,17 +15,19 @@ const TaskRunsListPage: React.FC<Omit<
   React.ComponentProps<typeof ListPage>,
   'canCreate' | 'kind' | 'ListComponent' | 'rowFilters'
 > &
-  TaskRunsListPageProps> = (props) => {
+  TaskRunsListPageProps> = ({ hideBadge, ...props }) => {
+  const searchParams = getURLSearchParams();
+  const kind = searchParams?.kind;
+
   return (
     <ListPage
       {...props}
-      canCreate={false}
+      canCreate={kind?.includes(referenceForModel(TaskRunModel)) ?? false}
       kind={referenceForModel(TaskRunModel)}
       ListComponent={TaskRunsList}
       rowFilters={taskRunFilters}
-      badge={props.hideBadge ? null : getBadgeFromType(TaskRunModel.badge)}
+      badge={hideBadge ? null : getBadgeFromType(TaskRunModel.badge)}
     />
   );
 };
-
 export default TaskRunsListPage;
diff --git a/frontend/packages/dev-console/src/components/taskruns/list-page/TaskRunsRow.tsx b/frontend/packages/dev-console/src/components/taskruns/list-page/TaskRunsRow.tsx
@@ -3,14 +3,16 @@ import { TableRow, TableData, RowFunction } from '@console/internal/components/f
 import { ResourceLink, Timestamp, Kebab, ResourceKebab } from '@console/internal/components/utils';
 import { referenceForModel } from '@console/internal/module/k8s';
 import { TaskRunKind } from '../../../utils/pipeline-augment';
-import { TaskRunModel } from '../../../models';
+import { TaskRunModel, PipelineModel, TaskModel } from '../../../models';
 import { tableColumnClasses } from './taskruns-table';
 import { Status } from '@console/shared';
 import { pipelineRunFilterReducer as taskRunFilterReducer } from '../../../utils/pipeline-filter-reducer';
-import { pipelineRunDuration as taskRunDuration } from '../../../utils/pipeline-utils';
+
+const taskRunsReference = referenceForModel(TaskRunModel);
+const taskReference = referenceForModel(TaskModel);
+const pipelineReference = referenceForModel(PipelineModel);
 
 const TaskRunsRow: RowFunction<TaskRunKind> = ({ obj, index, key, style }) => {
-  const taskRunsReference = referenceForModel(TaskRunModel);
   return (
     <TableRow id={obj.metadata.uid} index={index} trKey={key} style={style}>
       <TableData className={tableColumnClasses[0]}>
@@ -22,17 +24,45 @@ const TaskRunsRow: RowFunction<TaskRunKind> = ({ obj, index, key, style }) => {
           data-test-id={obj.metadata.name}
         />
       </TableData>
-      <TableData className={tableColumnClasses[1]}>
+      <TableData className={tableColumnClasses[1]} columnID="namespace">
         <ResourceLink kind="Namespace" name={obj.metadata.namespace} />
       </TableData>
       <TableData className={tableColumnClasses[2]}>
-        <Status status={taskRunFilterReducer(obj)} />
+        {obj.metadata.labels['tekton.dev/pipeline'] ? (
+          <ResourceLink
+            kind={pipelineReference}
+            name={obj.metadata.labels['tekton.dev/pipeline']}
+            namespace={obj.metadata.namespace}
+          />
+        ) : (
+          '-'
+        )}
       </TableData>
       <TableData className={tableColumnClasses[3]}>
-        <Timestamp timestamp={obj?.status?.startTime} />
+        {obj.spec.taskRef?.name ? (
+          <ResourceLink
+            kind={taskReference}
+            name={obj.spec.taskRef.name}
+            namespace={obj.metadata.namespace}
+          />
+        ) : (
+          '-'
+        )}
+      </TableData>
+      <TableData className={tableColumnClasses[4]}>
+        {obj.status?.podName ? (
+          <ResourceLink kind="Pod" name={obj.status.podName} namespace={obj.metadata.namespace} />
+        ) : (
+          '-'
+        )}
       </TableData>
-      <TableData className={tableColumnClasses[4]}>{taskRunDuration(obj)}</TableData>
       <TableData className={tableColumnClasses[5]}>
+        <Status status={taskRunFilterReducer(obj)} />
+      </TableData>
+      <TableData className={tableColumnClasses[6]}>
+        <Timestamp timestamp={obj?.status?.startTime} />
+      </TableData>
+      <TableData className={tableColumnClasses[7]}>
         <ResourceKebab actions={Kebab.factory.common} kind={taskRunsReference} resource={obj} />
       </TableData>
     </TableRow>

diff --git a/frontend/packages/dev-console/src/components/taskruns/list-page/taskruns-table.ts b/frontend/packages/dev-console/src/components/taskruns/list-page/taskruns-table.ts
@@ -3,8 +3,10 @@ import { Kebab } from '@console/internal/components/utils';
 export const tableColumnClasses = [
   '', // name
   '', // namespace
+  '', // pipeline
+  'pf-m-hidden pf-m-visible-on-sm', // task
+  'pf-m-hidden pf-m-visible-on-sm', // pod
   'pf-m-hidden pf-m-visible-on-sm', // status
   'pf-m-hidden pf-m-visible-on-sm', // started
-  'pf-m-hidden pf-m-visible-on-sm', // duration
   Kebab.columnClass,
 ];
diff --git a/frontend/packages/dev-console/src/plugin.tsx b/frontend/packages/dev-console/src/plugin.tsx
@@ -503,6 +503,18 @@ const plugin: Plugin<ConsumedExtensions> = [
         ).default,
     },
   },
+  {
+    type: 'Page/Resource/List',
+    properties: {
+      model: TaskRunModel,
+      loader: async () =>
+        (
+          await import(
+            './components/taskruns/list-page/TaskRunsListPage' /* webpackChunkName: "taskrun-resource-list" */
+          )
+        ).default,
+    },
+  },
   {
     type: 'Perspective',
     properties: {