Add TaskRun results tab

Add a tab to display TaskRun results as a sibling of Parameters and Status when a user clicks on the TaskRun in the TaskTree component. Similar to Parameters, this is only displayed when there are results to display.
tektoncd · Mar 3, 2021 · d39e87b · d39e87b
1 parent eb08ed1
commit d39e87b
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 8 deletions.
diff --git a/packages/components/src/components/TaskRunDetails/TaskRunDetails.js b/packages/components/src/components/TaskRunDetails/TaskRunDetails.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2020 The Tekton Authors
+Copyright 2020-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
@@ -20,8 +20,6 @@ import { DetailsHeader, Param, Tab, Table, Tabs, ViewYAML } from '..';
 
 import './TaskRunDetails.scss';
 
-const tabs = ['params', 'status'];
-
 const TaskRunDetails = props => {
   const { intl, onViewChange, taskRun, view } = props;
   const displayName = taskRun.metadata.name;
@@ -60,6 +58,29 @@ const TaskRunDetails = props => {
     />
   );
 
+  const results = taskRun.status?.taskResults;
+  const resultsTable = results && results.length && (
+    <Table
+      size="short"
+      headers={headers}
+      rows={results.map(({ name, value }) => ({
+        id: name,
+        name,
+        value: (
+          <span title={value}>
+            <Param>{value}</Param>
+          </span>
+        )
+      }))}
+    />
+  );
+
+  const tabs = [
+    paramsTable && 'params',
+    resultsTable && 'results',
+    'status'
+  ].filter(Boolean);
+
   let selectedTabIndex = tabs.indexOf(view);
   if (selectedTabIndex === -1) {
     selectedTabIndex = 0;
@@ -79,7 +100,7 @@ const TaskRunDetails = props => {
       >
         {paramsTable && (
           <Tab
-            id={`${displayName}-details`}
+            id={`${displayName}-params`}
             label={intl.formatMessage({
               id: 'dashboard.taskRun.params',
               defaultMessage: 'Parameters'
@@ -88,6 +109,17 @@ const TaskRunDetails = props => {
             <div className="tkn--step-status">{paramsTable}</div>
           </Tab>
         )}
+        {resultsTable && (
+          <Tab
+            id={`${displayName}-results`}
+            label={intl.formatMessage({
+              id: 'dashboard.taskRun.results',
+              defaultMessage: 'Results'
+            })}
+          >
+            <div className="tkn--step-status">{resultsTable}</div>
+          </Tab>
+        )}
         <Tab
           id={`${displayName}-details`}
           label={intl.formatMessage({

diff --git a/packages/components/src/components/TaskRunDetails/TaskRunDetails.stories.js b/packages/components/src/components/TaskRunDetails/TaskRunDetails.stories.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2020 The Tekton Authors
+Copyright 2020-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
@@ -36,7 +36,12 @@ export const Base = () => (
       spec: {
         params
       },
-      status: 'this will show the TaskRun.status'
+      status: {
+        completionTime: '2021-03-03T15:25:34Z',
+        podName: 'my-task-h7d6j-pod-pdtb7',
+        startTime: '2021-03-03T15:25:27Z',
+        taskResults: [{ name: 'message', value: 'hello' }]
+      }
     }}
   />
 );
diff --git a/packages/components/src/components/TaskRunDetails/TaskRunDetails.test.js b/packages/components/src/components/TaskRunDetails/TaskRunDetails.test.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2020 The Tekton Authors
+Copyright 2020-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
@@ -62,4 +62,18 @@ describe('TaskRunDetails', () => {
     fireEvent.click(queryByText(/parameters/i));
     expect(queryByText('fake_name')).toBeTruthy();
   });
+
+  it('renders results', () => {
+    const taskRun = {
+      metadata: { name: 'task-run-name' },
+      spec: {},
+      status: { taskResults: [{ name: 'message', value: 'hello' }] }
+    };
+    const { queryByText } = renderWithIntl(
+      <TaskRunDetails taskRun={taskRun} view="results" />
+    );
+    expect(queryByText(/results/i)).toBeTruthy();
+    expect(queryByText(/message/)).toBeTruthy();
+    expect(queryByText(/hello/)).toBeTruthy();
+  });
 });
diff --git a/packages/components/src/components/TaskRunDetails/index.js b/packages/components/src/components/TaskRunDetails/index.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2020 The Tekton Authors
+Copyright 2020-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
@@ -10,5 +10,6 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
+/* istanbul ignore file */
 
 export { default } from './TaskRunDetails';