Update display of retries

packages/components/src/components/PipelineRun/PipelineRun.jsx

@@ -30,24 +30,6 @@ import StepDetails from '../StepDetails';
 import TaskRunDetails from '../TaskRunDetails';
 import TaskTree from '../TaskTree';
 
-function getPipelineTaskName({ pipelineRun, taskRunName }) {
-  const {
-    status: { childReferences, taskRuns }
-  } = pipelineRun;
-
-  if (taskRuns) {
-    return taskRuns[taskRunName]?.pipelineTaskName;
-  }
-
-  if (childReferences) {
-    const { pipelineTaskName } =
-      childReferences.find(({ name }) => name === taskRunName) || {};
-    return pipelineTaskName;
-  }
-
-  return undefined;
-}
-
 export /* istanbul ignore next */ class PipelineRunContainer extends Component {
   state = {
     isLogsMaximized: false
@@ -81,6 +63,7 @@ export /* istanbul ignore next */ class PipelineRunContainer extends Component {
       getLogsToolbar,
       maximizedLogsContainer,
       pollingInterval,
+      selectedRetry,
       selectedStepId,
       selectedTaskId
     } = this.props;
@@ -112,7 +95,7 @@ export /* istanbul ignore next */ class PipelineRunContainer extends Component {
           }
           fetchLogs={() => fetchLogs(stepName, stepStatus, taskRun)}
           forcePolling={forceLogPolling}
-          key={`${selectedTaskId}:${selectedStepId}`}
+          key={`${selectedTaskId}:${selectedStepId}:${selectedRetry}`}
           pollingInterval={pollingInterval}
           stepStatus={stepStatus}
           isLogsMaximized={isLogsMaximized}
@@ -130,7 +113,7 @@ export /* istanbul ignore next */ class PipelineRunContainer extends Component {
   };
 
   loadTaskRuns = () => {
-    const { intl, pipelineRun } = this.props;
+    const { pipelineRun } = this.props;
     if (
       !pipelineRun?.status?.taskRuns &&
       !pipelineRun?.status?.childReferences
@@ -144,67 +127,7 @@ export /* istanbul ignore next */ class PipelineRunContainer extends Component {
       return [];
     }
 
-    const retryPodIndex = {};
-    taskRuns = taskRuns.reduce((acc, taskRun) => {
-      if (taskRun.status?.retriesStatus) {
-        taskRun.status.retriesStatus.forEach((retryStatus, index) => {
-          const retryRun = { ...taskRun };
-          retryRun.status = retryStatus;
-          retryPodIndex[retryStatus.podName] = index;
-          acc.push(retryRun);
-        });
-      }
-      acc.push(taskRun);
-      return acc;
-    }, []);
-
-    return taskRuns.map(taskRun => {
-      const { name: taskRunName, uid } = taskRun.metadata;
-
-      let pipelineTaskName = getPipelineTaskName({
-        pipelineRun,
-        taskRunName
-      });
-
-      const { podName } = taskRun.status || {};
-      let displayName =
-        taskRun.metadata.labels?.[labelConstants.DASHBOARD_DISPLAY_NAME];
-
-      if (retryPodIndex[podName] || taskRun.status?.retriesStatus) {
-        const retryNumber =
-          retryPodIndex[podName] || taskRun.status.retriesStatus.length;
-        pipelineTaskName = intl.formatMessage(
-          {
-            id: 'dashboard.pipelineRun.pipelineTaskName.retry',
-            defaultMessage: '{pipelineTaskName} (retry {retryNumber, number})'
-          },
-          { pipelineTaskName: displayName || pipelineTaskName, retryNumber }
-        );
-        if (displayName) {
-          displayName = pipelineTaskName;
-        }
-      }
-
-      return {
-        ...taskRun,
-        metadata: {
-          ...taskRun.metadata,
-          labels: {
-            ...taskRun.metadata.labels,
-            ...(displayName
-              ? {
-                  [labelConstants.DASHBOARD_DISPLAY_NAME]: displayName
-                }
-              : null),
-            [labelConstants.DASHBOARD_RETRY_NAME]: pipelineTaskName
-          },
-          uid: `${uid}${podName}`
-        },
-        status: {
-          ...taskRun.status
-        }
-      };
-    });
+    return taskRuns;
   };
 
   render() {
@@ -215,10 +138,12 @@ export /* istanbul ignore next */ class PipelineRunContainer extends Component {
       icon,
       intl,
       loading,
+      onRetryChange,
       onViewChange,
       pipelineRun,
       pod,
       runActions,
+      selectedRetry,
       selectedStepId,
       selectedTaskId,
       triggerHeader,
@@ -311,8 +236,14 @@ export /* istanbul ignore next */ class PipelineRunContainer extends Component {
     }
 
     const taskRuns = this.loadTaskRuns();
-    const taskRun =
-      taskRuns.find(run => run.metadata.uid === selectedTaskId) || {};
+    let taskRun = taskRuns.find(({ metadata }) => metadata.labels?.[labelConstants.PIPELINE_TASK] === selectedTaskId) || {};
+
+    if (taskRun.status?.retriesStatus && selectedRetry) {
+      taskRun = {
+        ...taskRun,
+        status: taskRun.status.retriesStatus[selectedRetry]
+      };
+    }
 
     const task =
       (taskRun.spec?.taskRef?.name &&
@@ -356,9 +287,11 @@ export /* istanbul ignore next */ class PipelineRunContainer extends Component {
         {taskRuns.length > 0 && (
           <div className="tkn--tasks">
             <TaskTree
+              onRetryChange={onRetryChange}
               onSelect={handleTaskSelected}
-              selectedTaskId={selectedTaskId}
+              selectedRetry={selectedRetry}
               selectedStepId={selectedStepId}
+              selectedTaskId={selectedTaskId}
               taskRuns={taskRuns}
             />
             {(selectedStepId && (

packages/components/src/components/PipelineRun/PipelineRun.stories.jsx

@@ -12,6 +12,7 @@ limitations under the License.
 */
 
 import React, { useState } from 'react';
+import { labels as labelConstants } from '@tektoncd/dashboard-utils';
 
 import PipelineRun from '.';
 
@@ -35,9 +36,16 @@ const task = {
   }
 };
 
-function getTaskRun({ exitCode = 0, name }) {
+function getTaskRun({ exitCode = 0, name, pipelineTaskName }) {
   return {
-    metadata: { labels: {}, name, namespace: 'default', uid: name },
+    metadata: {
+      labels: {
+        [labelConstants.PIPELINE_TASK]: pipelineTaskName
+      },
+      name,
+      namespace: 'default',
+      uid: name
+    },
     spec: {
       params: {},
       serviceAccountName: 'default',
@@ -74,10 +82,14 @@ function getTaskRun({ exitCode = 0, name }) {
   };
 }
 
-const taskRun = getTaskRun({ name: 'sampleTaskRunName' });
+const taskRun = getTaskRun({
+  name: 'sampleTaskRunName',
+  pipelineTaskName: 'task1'
+});
 const taskRunWithWarning = getTaskRun({
   exitCode: 1,
-  name: 'sampleTaskRunName2'
+  name: 'sampleTaskRunName2',
+  pipelineTaskName: 'task2'
 });
 
 const pipelineRun = {

packages/components/src/components/Step/Step.jsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2019-2021 The Tekton Authors
+Copyright 2019-2023 The Tekton Authors
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
@@ -91,11 +91,11 @@ class Step extends Component {
         data-reason={reason}
         data-selected={selected || undefined}
       >
-        <a
+        <span
           className="tkn--step-link"
-          href="#"
           tabIndex="0"
           onClick={this.handleClick}
+          onKeyUp={e => e.key === 'Enter' && this.handleClick(e)}
         >
           <StatusIcon
             DefaultIcon={DefaultIcon}
@@ -108,7 +108,7 @@ class Step extends Component {
           <span className="tkn--step-name" title={stepName}>
             {stepName}
           </span>
-        </a>
+        </span>
       </li>
     );
   }

packages/components/src/components/Step/Step.scss

@@ -1,5 +1,5 @@
 /*
-Copyright 2019-2021 The Tekton Authors
+Copyright 2019-2023 The Tekton Authors
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
@@ -14,23 +14,24 @@ limitations under the License.
 .tkn--step {
   list-style-type: none;
 
-  &:hover > a.tkn--step-link,
-  &:hover > a.tkn--step-link:hover,
-  &[data-selected] > a.tkn--step-link:hover {
+  &:hover > .tkn--step-link,
+  &:hover > .tkn--step-link:hover,
+  &[data-selected] > .tkn--step-link:hover {
     background-color: $hover-ui;
     text-decoration: none;
   }
 
-  &:hover > a.tkn--step-link,
-  > a.tkn--step-link:hover {
+  &:hover > .tkn--step-link,
+  > .tkn--step-link:hover {
     border-left-color: $hover-ui;
   }
 
-  &[data-selected] > a.tkn--step-link {
+  &[data-selected] > .tkn--step-link {
     border-left: 3px solid $interactive-04;
   }
 
-  > a.tkn--step-link {
+  > .tkn--step-link {
+    cursor: pointer;
     display: flex;
     align-items: baseline;
     position: relative;