Display placeholders for pipeline tasks that haven't begun executing yet

packages/components/src/components/PipelineRun/PipelineRun.js

@@ -74,33 +74,6 @@ export /* istanbul ignore next */ class PipelineRunContainer extends Component {
     );
   }
 
-  sortTaskRuns = taskRuns => {
-    const toReturn = taskRuns.sort((taskRunA, taskRunB) => {
-      if (!taskRunA || !taskRunB) {
-        return 0;
-      }
-
-      const firstStepA = taskRunA.status?.steps?.[0];
-      const firstStepB = taskRunB.status?.steps?.[0];
-
-      if (!firstStepA || !firstStepB) {
-        return 0;
-      }
-
-      const { startedAt: startedAtA } =
-        firstStepA.terminated || firstStepA.running || {};
-      const { startedAt: startedAtB } =
-        firstStepB.terminated || firstStepB.running || {};
-
-      if (!startedAtA || !startedAtB) {
-        return 0;
-      }
-
-      return new Date(startedAtA).getTime() - new Date(startedAtB).getTime();
-    });
-    return toReturn;
-  };
-
   loadTaskRuns = () => {
     const { intl, pipelineRun } = this.props;
     if (!pipelineRun?.status?.taskRuns) {
@@ -186,7 +159,6 @@ export /* istanbul ignore next */ class PipelineRunContainer extends Component {
       selectedStepId,
       selectedTaskId,
       showIO,
-      sortTaskRuns,
       triggerHeader,
       view
     } = this.props;
@@ -275,11 +247,6 @@ export /* istanbul ignore next */ class PipelineRunContainer extends Component {
     }
 
     const taskRuns = this.loadTaskRuns();
-
-    if (sortTaskRuns) {
-      this.sortTaskRuns(taskRuns);
-    }
-
     const taskRun =
       taskRuns.find(run => run.metadata.uid === selectedTaskId) || {};
 
@@ -360,7 +327,6 @@ PipelineRunContainer.propTypes = {
   onViewChange: PropTypes.func,
   selectedStepId: PropTypes.string,
   selectedTaskId: PropTypes.string,
-  sortTaskRuns: PropTypes.bool,
   view: PropTypes.string
 };
 
@@ -369,7 +335,6 @@ PipelineRunContainer.defaultProps = {
   onViewChange: /* istanbul ignore next */ () => {},
   selectedStepId: null,
   selectedTaskId: null,
-  sortTaskRuns: false,
   view: null
 };
 

packages/utils/src/utils/constants.js

@@ -14,6 +14,7 @@ limitations under the License.
 export const labels = {
   CLUSTER_TASK: 'tekton.dev/clusterTask',
   CONDITION_CHECK: 'tekton.dev/conditionCheck',
+  CONDITION_NAME: 'tekton.dev/conditionName',
   DASHBOARD_IMPORT: 'dashboard.tekton.dev/import',
   DASHBOARD_RETRY_NAME: 'dashboard.tekton.dev/retryName',
   PIPELINE: 'tekton.dev/pipeline',

packages/utils/src/utils/index.js

@@ -11,6 +11,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { labels as labelConstants } from './constants';
 import { getStatus } from './status';
 
 export { default as buildGraphData } from './buildGraphData';
@@ -341,3 +342,99 @@ export function getTranslateWithId(intl) {
     }
   };
 }
+
+export function getTaskSpecFromTaskRef({ clusterTasks, pipelineTask, tasks }) {
+  if (!pipelineTask.taskRef) {
+    return {};
+  }
+
+  const definitions =
+    pipelineTask.taskRef.kind === 'ClusterTask' ? clusterTasks : tasks;
+  const definition = (definitions || []).find(
+    task => task.metadata.name === pipelineTask.taskRef.name
+  );
+
+  return definition?.spec || {};
+}
+
+export function getPlaceholderTaskRun({
+  clusterTasks,
+  condition,
+  pipelineTask,
+  tasks
+}) {
+  const { name: pipelineTaskName, taskSpec } = pipelineTask;
+  const specToDisplay =
+    taskSpec || getTaskSpecFromTaskRef({ clusterTasks, pipelineTask, tasks });
+  const { steps = [] } = specToDisplay;
+
+  const displayName =
+    pipelineTaskName + (condition ? `-${condition.conditionRef}` : '');
+
+  return {
+    metadata: {
+      name: displayName,
+      labels: {
+        [labelConstants.PIPELINE_TASK]: pipelineTaskName,
+        ...(condition && {
+          [labelConstants.CONDITION_CHECK]: displayName,
+          [labelConstants.CONDITION_NAME]: condition.conditionRef
+        })
+      },
+      uid: `_placeholder_${displayName}`
+    },
+    spec: {
+      taskSpec: specToDisplay
+    },
+    status: {
+      steps: steps.map(({ name }) => ({ name }))
+    }
+  };
+}
+
+export function getTaskRunsWithPlaceholders({
+  clusterTasks,
+  pipeline,
+  pipelineRun,
+  taskRuns,
+  tasks
+}) {
+  const pipelineTasks = []
+    .concat(pipeline?.spec?.tasks)
+    .concat(pipelineRun?.spec?.pipelineSpec?.tasks)
+    .concat(pipeline?.spec?.finally)
+    .concat(pipelineRun?.spec?.pipelineSpec?.finally)
+    .filter(Boolean);
+
+  const taskRunsToDisplay = [];
+  pipelineTasks.forEach(pipelineTask => {
+    if (pipelineTask.conditions) {
+      pipelineTask.conditions.forEach(condition => {
+        const conditionTaskRun = taskRuns.find(
+          taskRun =>
+            taskRun.metadata.labels?.[labelConstants.PIPELINE_TASK] ===
+              pipelineTask.name &&
+            taskRun.metadata.labels?.[labelConstants.CONDITION_NAME] ===
+              condition.conditionRef
+        );
+        taskRunsToDisplay.push(
+          conditionTaskRun || getPlaceholderTaskRun({ pipelineTask, condition })
+        );
+      });
+    }
+
+    const realTaskRun = taskRuns.find(
+      taskRun =>
+        taskRun.metadata.labels?.[labelConstants.PIPELINE_TASK] ===
+          pipelineTask.name &&
+        !taskRun.metadata.labels?.[labelConstants.CONDITION_CHECK]
+    );
+
+    taskRunsToDisplay.push(
+      realTaskRun ||
+        getPlaceholderTaskRun({ clusterTasks, pipelineTask, tasks })
+    );
+  });
+
+  return taskRunsToDisplay;
+}