Surface details of step onError continue in lists and details

Update the step and Task display in the UI to show indicators when a non-zero exit code was ignored. Propagate the indicator all the way up to the PipelineRuns and TaskRuns list pages, using the base 'success' icon. When a step is selected, display the non-zero exit code in the step details header so the user can easily identify why the status is displayed differently. We have a similar message in the log trailer but this may be below the fold depending on log length, window size, etc.
tektoncd · Nov 23, 2021 · 9bccb26 · 9bccb26
1 parent 075985e
commit 9bccb26
Show file tree

Hide file tree

Showing 33 changed files with 477 additions and 162 deletions.
diff --git a/packages/components/src/components/DetailsHeader/DetailsHeader.js b/packages/components/src/components/DetailsHeader/DetailsHeader.js
@@ -53,7 +53,7 @@ class DetailsHeader extends Component {
   }
 
   statusLabel() {
-    const { intl, reason, status, taskRun } = this.props;
+    const { exitCode, hasWarning, intl, reason, status, taskRun } = this.props;
     const { reason: taskReason, status: taskStatus } = getStatus(taskRun);
 
     if (
@@ -75,10 +75,18 @@ class DetailsHeader extends Component {
     }
     if (status === 'terminated') {
       if (reason === 'Completed') {
-        return intl.formatMessage({
-          id: 'dashboard.taskRun.status.succeeded',
-          defaultMessage: 'Completed'
-        });
+        return hasWarning
+          ? intl.formatMessage(
+              {
+                id: 'dashboard.taskRun.status.succeeded.warning',
+                defaultMessage: 'Completed with exit code {exitCode}'
+              },
+              { exitCode }
+            )
+          : intl.formatMessage({
+              id: 'dashboard.taskRun.status.succeeded',
+              defaultMessage: 'Completed'
+            });
       }
       return intl.formatMessage({
         id: 'dashboard.taskRun.status.failed',
@@ -100,7 +108,13 @@ class DetailsHeader extends Component {
   }
 
   render() {
-    const { intl, displayName, taskRun, type = 'step' } = this.props;
+    const {
+      displayName,
+      hasWarning,
+      intl,
+      taskRun,
+      type = 'step'
+    } = this.props;
     let { reason, status } = this.props;
     let statusLabel;
 
@@ -127,6 +141,7 @@ class DetailsHeader extends Component {
         <h2 className="tkn--details-header--heading">
           <StatusIcon
             DefaultIcon={DefaultIcon}
+            hasWarning={hasWarning}
             reason={reason}
             status={status}
             {...(type === 'step' ? { type: 'inverse' } : null)}

diff --git a/packages/components/src/components/DetailsHeader/DetailsHeader.scss b/packages/components/src/components/DetailsHeader/DetailsHeader.scss
@@ -49,6 +49,12 @@ header.tkn--step-details-header {
         top: -1px;
         left: -1px;
       }
+
+      &.tkn--status-icon--warning.tkn--status-icon--type-normal {
+        width: 28px;
+        height: 28px;
+        margin-right: 0.5rem;
+      }
     }
 
     > .tkn--status-label {

diff --git a/packages/components/src/components/DetailsHeader/DetailsHeader.stories.js b/packages/components/src/components/DetailsHeader/DetailsHeader.stories.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2019-2020 The Tekton Authors
+Copyright 2019-2021 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
@@ -67,6 +67,19 @@ export const Completed = args => (
   />
 );
 
+export const CompletedWithWarning = args => (
+  <DetailsHeader
+    exitCode={1}
+    hasWarning
+    reason="Completed"
+    status="terminated"
+    displayName="build"
+    taskRun={getTaskRun({ reason: 'Succeeded', status: 'True' })}
+    {...args}
+  />
+);
+CompletedWithWarning.storyName = 'Completed with warning';
+
 export const Failed = args => (
   <DetailsHeader
     reason="Error"

diff --git a/packages/components/src/components/PipelineRun/PipelineRun.stories.js b/packages/components/src/components/PipelineRun/PipelineRun.stories.js
@@ -36,46 +36,54 @@ const task = {
   }
 };
 
-const taskRun = {
-  metadata: { labels: {}, name: 'sampleTaskRunName', namespace: 'default' },
-  spec: {
-    params: {},
-    resources: {
-      inputs: {},
-      outputs: {}
+function getTaskRun({ exitCode = 0, name }) {
+  return {
+    metadata: { labels: {}, name, namespace: 'default', uid: name },
+    spec: {
+      params: {},
+      resources: {
+        inputs: {},
+        outputs: {}
+      },
+      serviceAccountName: 'default',
+      taskRef: { kind: 'Task', name: 'task1' },
+      timeout: '24h0m0s'
     },
-    serviceAccountName: 'default',
-    taskRef: { kind: 'Task', name: 'task1' },
-    timeout: '24h0m0s'
-  },
-  status: {
-    completionTime: '2019-08-21T17:15:31Z',
-    conditions: [
-      {
-        lastTransitionTime: '2019-08-21T17:15:31Z',
-        message: 'All Steps have completed executing',
-        reason: 'Succeeded',
-        status: 'True',
-        type: 'Succeeded'
-      }
-    ],
-    podName: 'sample-task-run-pod-name',
-    startTime: '2019-08-21T17:12:21Z',
-    steps: [
-      {
-        name: 'build',
-        terminated: {
-          containerID:
-            'docker://88659459cb477936d2ee859822b024bf02768c9ff3dd048f7d8af85843064f95',
-          exitCode: 0,
-          finishedAt: '2019-08-21T17:12:29Z',
-          reason: 'Completed',
-          startedAt: '2019-08-21T17:12:26Z'
+    status: {
+      completionTime: '2019-08-21T17:15:31Z',
+      conditions: [
+        {
+          lastTransitionTime: '2019-08-21T17:15:31Z',
+          message: 'All Steps have completed executing',
+          reason: 'Succeeded',
+          status: 'True',
+          type: 'Succeeded'
         }
-      }
-    ]
-  }
-};
+      ],
+      podName: `sample-task-run-pod-name-${name}`,
+      startTime: '2019-08-21T17:12:21Z',
+      steps: [
+        {
+          name: 'build',
+          terminated: {
+            containerID:
+              'docker://88659459cb477936d2ee859822b024bf02768c9ff3dd048f7d8af85843064f95',
+            exitCode,
+            finishedAt: '2019-08-21T17:12:29Z',
+            reason: 'Completed',
+            startedAt: '2019-08-21T17:12:26Z'
+          }
+        }
+      ]
+    }
+  };
+}
+
+const taskRun = getTaskRun({ name: 'sampleTaskRunName' });
+const taskRunWithWarning = getTaskRun({
+  exitCode: 1,
+  name: 'sampleTaskRunName2'
+});
 
 const pipelineRun = {
   metadata: {
@@ -102,33 +110,11 @@ const pipelineRun = {
     taskRuns: {
       sampleTaskRunName: {
         pipelineTaskName: 'task1',
-        status: {
-          completionTime: '2019-08-21T17:15:31Z',
-          conditions: [
-            {
-              lastTransitionTime: '2019-08-21T17:15:31Z',
-              message: 'All Steps have completed executing',
-              reason: 'Succeeded',
-              status: 'True',
-              type: 'Succeeded'
-            }
-          ],
-          podName: 'sample-task-run-pod-name',
-          startTime: '2019-08-21T17:12:21Z',
-          steps: [
-            {
-              name: 'build',
-              terminated: {
-                containerID:
-                  'docker://88659459cb477936d2ee859822b024bf02768c9ff3dd048f7d8af85843064f95',
-                exitCode: 0,
-                finishedAt: '2019-08-21T17:12:29Z',
-                reason: 'Completed',
-                startedAt: '2019-08-21T17:12:26Z'
-              }
-            }
-          ]
-        }
+        status: taskRun.status
+      },
+      sampleTaskRunName2: {
+        pipelineTaskName: 'task2',
+        status: taskRunWithWarning.status
       }
     }
   }
@@ -153,7 +139,7 @@ export const Base = () => {
       pipelineRun={pipelineRun}
       selectedStepId={selectedStepId}
       selectedTaskId={selectedTaskId}
-      taskRuns={[taskRun]}
+      taskRuns={[taskRun, taskRunWithWarning]}
       tasks={[task]}
     />
   );

diff --git a/packages/components/src/components/PipelineRuns/PipelineRuns.js b/packages/components/src/components/PipelineRuns/PipelineRuns.js
@@ -15,7 +15,7 @@ import React from 'react';
 import { injectIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 import { StatusIcon, Table } from '@tektoncd/dashboard-components';
-import { getStatus, urls } from '@tektoncd/dashboard-utils';
+import { getStatus, taskRunHasWarning, urls } from '@tektoncd/dashboard-utils';
 import { Pending24 as DefaultIcon } from '@carbon/icons-react';
 import { Link as CarbonLink } from 'carbon-components-react';
 
@@ -40,8 +40,20 @@ const PipelineRuns = ({
   },
   getPipelineRunStatusIcon = pipelineRun => {
     const { reason, status } = getStatus(pipelineRun);
+    let hasWarning = false;
+    if (status === 'True' && reason === 'Succeeded') {
+      hasWarning = Object.values(
+        pipelineRun.status?.taskRuns || {}
+      ).some(taskRun => taskRunHasWarning(taskRun));
+    }
+
     return (
-      <StatusIcon DefaultIcon={DefaultIcon} reason={reason} status={status} />
+      <StatusIcon
+        DefaultIcon={DefaultIcon}
+        hasWarning={hasWarning}
+        reason={reason}
+        status={status}
+      />
     );
   },
   getPipelineRunStatusTooltip = (pipelineRun, intl) => {

diff --git a/packages/components/src/components/PipelineRuns/PipelineRuns.scss b/packages/components/src/components/PipelineRuns/PipelineRuns.scss
@@ -18,5 +18,11 @@ limitations under the License.
     margin-right: 0.5em;
     vertical-align: sub;
     flex-shrink: 0;
+
+    &.tkn--status-icon--warning {
+      width: 24px;
+      height: 24px;
+      margin-top: 1px;
+    }
   }
 }
diff --git a/packages/components/src/components/PipelineRuns/PipelineRuns.stories.js b/packages/components/src/components/PipelineRuns/PipelineRuns.stories.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2019-2020 The Tekton Authors
+Copyright 2019-2021 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
@@ -138,6 +138,51 @@ export const Base = () => (
             }
           ]
         }
+      },
+      {
+        metadata: {
+          name: 'pipeline-run-20211118145503',
+          namespace: 'cb4552a6-b2d7-45e2-9773-3d4ca33909ff',
+          uid: '90cde04b-ef64-4e3a-a74c-9cd7f78738d2',
+          creationTimestamp: '2021-11-18T14:55:00Z'
+        },
+        spec: {
+          pipelineRef: {
+            name: 'pipeline'
+          }
+        },
+        status: {
+          conditions: [
+            {
+              lastTransitionTime: '2021-11-18T14:58:47Z',
+              message: 'All Tasks have completed executing',
+              reason: 'Succeeded',
+              status: 'True',
+              type: 'Succeeded'
+            }
+          ],
+          taskRuns: {
+            foo: {
+              status: {
+                conditions: [
+                  {
+                    reason: 'Succeeded',
+                    status: 'True',
+                    type: 'Succeeded'
+                  }
+                ],
+                steps: [
+                  {
+                    terminated: {
+                      exitCode: 1,
+                      reason: 'Completed'
+                    }
+                  }
+                ]
+              }
+            }
+          }
+        }
       }
     ]}
     cancelPipelineRun={() => {}}