Update UI components to support displaying TaskRun Pod details

Add a new tab to the TaskRunDetails to display the associated Pod and any relevant events. This tab is only present when the required Pod information is provided to the component. This will not be exposed in the Dashboard application until a future change fetches the Pod information in both the PipelineRun and TaskRun containers and passes it to the UI components.
grofers · Jul 6, 2021 · ac3bafa · ac3bafa
1 parent 52f6512
commit ac3bafa
Show file tree

Hide file tree

Showing 17 changed files with 143 additions and 9 deletions.
diff --git a/packages/components/src/components/PipelineRun/PipelineRun.js b/packages/components/src/components/PipelineRun/PipelineRun.js
@@ -185,6 +185,7 @@ export /* istanbul ignore next */ class PipelineRunContainer extends Component {
       loading,
       onViewChange,
       pipelineRun,
+      pod,
       rerun,
       selectedStepId,
       selectedTaskId,
@@ -341,6 +342,7 @@ export /* istanbul ignore next */ class PipelineRunContainer extends Component {
               (selectedTaskId && (
                 <TaskRunDetails
                   onViewChange={onViewChange}
+                  pod={pod}
                   task={task}
                   taskRun={taskRun}
                   view={view}

diff --git a/packages/components/src/components/PipelineRun/PipelineRun.stories.js b/packages/components/src/components/PipelineRun/PipelineRun.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
@@ -158,6 +158,29 @@ export const Base = () => {
   );
 };
 
+export const WithPodDetails = () => {
+  const [selectedStepId, setSelectedStepId] = useState();
+  const [selectedTaskId, setSelectedTaskId] = useState();
+  return (
+    <PipelineRun
+      fetchLogs={() => 'sample log output'}
+      handleTaskSelected={(taskId, stepId) => {
+        setSelectedStepId(stepId);
+        setSelectedTaskId(taskId);
+      }}
+      pipelineRun={pipelineRun}
+      pod={{
+        events: '<Pod events go here>',
+        resource: '<Pod resource goes here>'
+      }}
+      selectedStepId={selectedStepId}
+      selectedTaskId={selectedTaskId}
+      taskRuns={[taskRun]}
+      tasks={[task]}
+    />
+  );
+};
+
 export const Empty = () => <PipelineRun />;
 
 export const Error = () => <PipelineRun error="Internal server error" />;
diff --git a/packages/components/src/components/TaskRunDetails/TaskRunDetails.js b/packages/components/src/components/TaskRunDetails/TaskRunDetails.js
@@ -25,7 +25,7 @@ function getDescriptions(array = []) {
   }, {});
 }
 
-const TaskRunDetails = ({ intl, onViewChange, task, taskRun, view }) => {
+const TaskRunDetails = ({ intl, onViewChange, pod, task, taskRun, view }) => {
   const displayName = taskRun.metadata.name;
   const taskSpec = task?.spec || taskRun.spec.taskSpec;
 
@@ -95,7 +95,8 @@ const TaskRunDetails = ({ intl, onViewChange, task, taskRun, view }) => {
   const tabs = [
     paramsTable && 'params',
     resultsTable && 'results',
-    'status'
+    'status',
+    pod && 'pod'
   ].filter(Boolean);
 
   let selectedTabIndex = tabs.indexOf(view);
@@ -157,6 +158,30 @@ const TaskRunDetails = ({ intl, onViewChange, task, taskRun, view }) => {
             />
           </div>
         </Tab>
+        {pod && (
+          <Tab id={`${displayName}-pod`} label="Pod">
+            <div className="tkn--step-status">
+              {pod.events && (
+                <ViewYAML
+                  dark
+                  resource={pod.events}
+                  title={intl.formatMessage({
+                    id: 'dashboard.pod.events',
+                    defaultMessage: 'Events'
+                  })}
+                />
+              )}
+              <ViewYAML
+                dark
+                resource={pod.resource}
+                title={intl.formatMessage({
+                  id: 'dashboard.pod.resource',
+                  defaultMessage: 'Resource'
+                })}
+              />
+            </div>
+          </Tab>
+        )}
       </Tabs>
     </div>
   );

diff --git a/packages/components/src/components/TaskRunDetails/TaskRunDetails.stories.js b/packages/components/src/components/TaskRunDetails/TaskRunDetails.stories.js
@@ -45,3 +45,21 @@ export const Base = () => (
     }}
   />
 );
+
+export const Pod = () => (
+  <TaskRunDetails
+    pod={{
+      events: '<Pod events go here>',
+      resource: '<Pod resource goes here>'
+    }}
+    taskRun={{
+      metadata: { name: 'my-task' },
+      spec: {},
+      status: {
+        completionTime: '2021-03-03T15:25:34Z',
+        podName: 'my-task-h7d6j-pod-pdtb7',
+        startTime: '2021-03-03T15:25:27Z'
+      }
+    }}
+  />
+);
diff --git a/packages/components/src/components/TaskRunDetails/TaskRunDetails.test.js b/packages/components/src/components/TaskRunDetails/TaskRunDetails.test.js
@@ -79,7 +79,7 @@ describe('TaskRunDetails', () => {
     expect(queryByText(description)).toBeTruthy();
   });
 
-  it('does not render parameters or results tabs when those fields are not present', () => {
+  it('does not render tabs whose fields are not provided', () => {
     const taskRun = {
       metadata: { name: 'task-run-name' },
       spec: {},
@@ -88,6 +88,7 @@ describe('TaskRunDetails', () => {
     const { queryByText } = render(<TaskRunDetails taskRun={taskRun} />);
     expect(queryByText(/parameters/i)).toBeFalsy();
     expect(queryByText(/results/i)).toBeFalsy();
+    expect(queryByText(/pod/i)).toBeFalsy();
     expect(queryByText(/status/i)).toBeTruthy();
   });
 
@@ -145,4 +146,31 @@ describe('TaskRunDetails', () => {
     );
     expect(queryByText(description)).toBeTruthy();
   });
+
+  it('renders pod', () => {
+    const events = 'fake-events';
+    const pod = 'fake-pod';
+    const taskRun = {
+      metadata: { name: 'task-run-name' },
+      spec: {},
+      status: {}
+    };
+    const { queryByText } = render(
+      <TaskRunDetails
+        pod={{
+          events,
+          resource: pod
+        }}
+        task={{
+          metadata: 'task',
+          spec: {}
+        }}
+        taskRun={taskRun}
+        view="pod"
+      />
+    );
+    expect(queryByText('Pod')).toBeTruthy();
+    expect(queryByText(events)).toBeTruthy();
+    expect(queryByText(pod)).toBeTruthy();
+  });
 });
diff --git a/packages/components/src/components/ViewYAML/ViewYAML.js b/packages/components/src/components/ViewYAML/ViewYAML.js
@@ -40,16 +40,25 @@ function YAMLRaw({ children, className }) {
   );
 }
 
-function ViewYAML({ className, dark, enableSyntaxHighlighting, resource }) {
+function ViewYAML({
+  className,
+  dark,
+  enableSyntaxHighlighting,
+  resource,
+  title
+}) {
   const clz = classNames('bx--snippet--multi', className, {
     'tkn--view-yaml--dark': dark
   });
   const yaml = jsYaml.dump(resource);
+  const Wrapper = enableSyntaxHighlighting ? YAMLHighlighter : YAMLRaw;
 
-  if (enableSyntaxHighlighting) {
-    return <YAMLHighlighter className={clz}>{yaml}</YAMLHighlighter>;
-  }
-  return <YAMLRaw className={clz}>{yaml}</YAMLRaw>;
+  return (
+    <>
+      {title && <span className="tkn--view-yaml--title">{title}</span>}
+      <Wrapper className={clz}>{yaml}</Wrapper>
+    </>
+  );
 }
 
 ViewYAML.propTypes = {

diff --git a/packages/components/src/components/ViewYAML/ViewYAML.scss b/packages/components/src/components/ViewYAML/ViewYAML.scss
@@ -16,6 +16,15 @@ limitations under the License.
   color: $gray-10;            //       $inverse-01
 }
 
+.tkn--view-yaml--title {
+  display: inline-block;
+  margin-bottom: .5rem;
+
+  &:not(:first-child) {
+    margin-top: 1rem;
+  }
+}
+
 // TODO: Colorize YAML syntax to conform carbon design. See
 // https://github.com/carbon-design-system/carbon-website/issues/965 for more
 // details.

diff --git a/src/nls/messages_de.json b/src/nls/messages_de.json
@@ -175,6 +175,8 @@
     "dashboard.pipelinesDropdown.empty.allNamespaces": "",
     "dashboard.pipelinesDropdown.empty.selectedNamespace": "",
     "dashboard.pipelinesDropdown.label": "",
+    "dashboard.pod.events": "",
+    "dashboard.pod.resource": "",
     "dashboard.rerun.actionText": "",
     "dashboard.rerun.button": "",
     "dashboard.rerun.error": "",

diff --git a/src/nls/messages_en.json b/src/nls/messages_en.json
@@ -175,6 +175,8 @@
     "dashboard.pipelinesDropdown.empty.allNamespaces": "No Pipelines found",
     "dashboard.pipelinesDropdown.empty.selectedNamespace": "No Pipelines found in the ''{namespace}'' namespace",
     "dashboard.pipelinesDropdown.label": "Select Pipeline",
+    "dashboard.pod.events": "Events",
+    "dashboard.pod.resource": "Resource",
     "dashboard.rerun.actionText": "Rerun",
     "dashboard.rerun.button": "Rerun",
     "dashboard.rerun.error": "An error occurred when rerunning {runName}: check the dashboard logs for details. Status code: {statusCode}",

diff --git a/src/nls/messages_es.json b/src/nls/messages_es.json
@@ -175,6 +175,8 @@
     "dashboard.pipelinesDropdown.empty.allNamespaces": "",
     "dashboard.pipelinesDropdown.empty.selectedNamespace": "",
     "dashboard.pipelinesDropdown.label": "",
+    "dashboard.pod.events": "",
+    "dashboard.pod.resource": "",
     "dashboard.rerun.actionText": "",
     "dashboard.rerun.button": "",
     "dashboard.rerun.error": "",

diff --git a/src/nls/messages_fr.json b/src/nls/messages_fr.json
@@ -175,6 +175,8 @@
     "dashboard.pipelinesDropdown.empty.allNamespaces": "",
     "dashboard.pipelinesDropdown.empty.selectedNamespace": "",
     "dashboard.pipelinesDropdown.label": "",
+    "dashboard.pod.events": "",
+    "dashboard.pod.resource": "",
     "dashboard.rerun.actionText": "",
     "dashboard.rerun.button": "",
     "dashboard.rerun.error": "",

diff --git a/src/nls/messages_it.json b/src/nls/messages_it.json
@@ -175,6 +175,8 @@
     "dashboard.pipelinesDropdown.empty.allNamespaces": "",
     "dashboard.pipelinesDropdown.empty.selectedNamespace": "",
     "dashboard.pipelinesDropdown.label": "",
+    "dashboard.pod.events": "",
+    "dashboard.pod.resource": "",
     "dashboard.rerun.actionText": "",
     "dashboard.rerun.button": "",
     "dashboard.rerun.error": "",

diff --git a/src/nls/messages_ja.json b/src/nls/messages_ja.json
@@ -175,6 +175,8 @@
     "dashboard.pipelinesDropdown.empty.allNamespaces": "Pipelineが見つかりません",
     "dashboard.pipelinesDropdown.empty.selectedNamespace": "''{namespace}'' NamespaceにPipelineが見つかりません",
     "dashboard.pipelinesDropdown.label": "Pipelineを選択",
+    "dashboard.pod.events": "",
+    "dashboard.pod.resource": "",
     "dashboard.rerun.actionText": "再実行",
     "dashboard.rerun.button": "再実行",
     "dashboard.rerun.error": "{runName}の再実行中にエラーが発生しました：詳細については、ダッシュボードログを確認してください。ステータスコード：{statusCode}",

diff --git a/src/nls/messages_ko.json b/src/nls/messages_ko.json
@@ -175,6 +175,8 @@
     "dashboard.pipelinesDropdown.empty.allNamespaces": "",
     "dashboard.pipelinesDropdown.empty.selectedNamespace": "",
     "dashboard.pipelinesDropdown.label": "",
+    "dashboard.pod.events": "",
+    "dashboard.pod.resource": "",
     "dashboard.rerun.actionText": "",
     "dashboard.rerun.button": "",
     "dashboard.rerun.error": "",

diff --git a/src/nls/messages_pt.json b/src/nls/messages_pt.json
@@ -175,6 +175,8 @@
     "dashboard.pipelinesDropdown.empty.allNamespaces": "",
     "dashboard.pipelinesDropdown.empty.selectedNamespace": "",
     "dashboard.pipelinesDropdown.label": "",
+    "dashboard.pod.events": "",
+    "dashboard.pod.resource": "",
     "dashboard.rerun.actionText": "",
     "dashboard.rerun.button": "",
     "dashboard.rerun.error": "",

diff --git a/src/nls/messages_zh-Hans.json b/src/nls/messages_zh-Hans.json
@@ -175,6 +175,8 @@
     "dashboard.pipelinesDropdown.empty.allNamespaces": "未找到 Pipelines",
     "dashboard.pipelinesDropdown.empty.selectedNamespace": "在Namespace ''{namespace}'' 中未找到 Pipelines",
     "dashboard.pipelinesDropdown.label": "选择 Pipeline",
+    "dashboard.pod.events": "",
+    "dashboard.pod.resource": "",
     "dashboard.rerun.actionText": "重新运行",
     "dashboard.rerun.button": "重新运行",
     "dashboard.rerun.error": "重新运行 {runName} 时发生错误：检查 Dashboard 日志以了解详情。状态代码：{statusCode}",

diff --git a/src/nls/messages_zh-Hant.json b/src/nls/messages_zh-Hant.json
@@ -175,6 +175,8 @@
     "dashboard.pipelinesDropdown.empty.allNamespaces": "",
     "dashboard.pipelinesDropdown.empty.selectedNamespace": "",
     "dashboard.pipelinesDropdown.label": "",
+    "dashboard.pod.events": "",
+    "dashboard.pod.resource": "",
     "dashboard.rerun.actionText": "",
     "dashboard.rerun.button": "",
     "dashboard.rerun.error": "",