From ac3bafa72e45990ac3da08b00f2e08f9dd2ace81 Mon Sep 17 00:00:00 2001 From: Alan Greene Date: Fri, 2 Jul 2021 13:08:27 +0100 Subject: [PATCH] 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. --- .../src/components/PipelineRun/PipelineRun.js | 2 ++ .../PipelineRun/PipelineRun.stories.js | 25 +++++++++++++++- .../TaskRunDetails/TaskRunDetails.js | 29 ++++++++++++++++-- .../TaskRunDetails/TaskRunDetails.stories.js | 18 +++++++++++ .../TaskRunDetails/TaskRunDetails.test.js | 30 ++++++++++++++++++- .../src/components/ViewYAML/ViewYAML.js | 19 ++++++++---- .../src/components/ViewYAML/ViewYAML.scss | 9 ++++++ src/nls/messages_de.json | 2 ++ src/nls/messages_en.json | 2 ++ src/nls/messages_es.json | 2 ++ src/nls/messages_fr.json | 2 ++ src/nls/messages_it.json | 2 ++ src/nls/messages_ja.json | 2 ++ src/nls/messages_ko.json | 2 ++ src/nls/messages_pt.json | 2 ++ src/nls/messages_zh-Hans.json | 2 ++ src/nls/messages_zh-Hant.json | 2 ++ 17 files changed, 143 insertions(+), 9 deletions(-) diff --git a/packages/components/src/components/PipelineRun/PipelineRun.js b/packages/components/src/components/PipelineRun/PipelineRun.js index b0d4b7a44..331f6c784 100644 --- 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 && ( { ); }; +export const WithPodDetails = () => { + const [selectedStepId, setSelectedStepId] = useState(); + const [selectedTaskId, setSelectedTaskId] = useState(); + return ( + 'sample log output'} + handleTaskSelected={(taskId, stepId) => { + setSelectedStepId(stepId); + setSelectedTaskId(taskId); + }} + pipelineRun={pipelineRun} + pod={{ + events: '', + resource: '' + }} + selectedStepId={selectedStepId} + selectedTaskId={selectedTaskId} + taskRuns={[taskRun]} + tasks={[task]} + /> + ); +}; + export const Empty = () => ; export const Error = () => ; diff --git a/packages/components/src/components/TaskRunDetails/TaskRunDetails.js b/packages/components/src/components/TaskRunDetails/TaskRunDetails.js index 8de89b392..28bd3e904 100644 --- 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 }) => { /> + {pod && ( + +
+ {pod.events && ( + + )} + +
+ + )} ); diff --git a/packages/components/src/components/TaskRunDetails/TaskRunDetails.stories.js b/packages/components/src/components/TaskRunDetails/TaskRunDetails.stories.js index 7554e87bd..4679b8063 100644 --- 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 = () => ( + ', + resource: '' + }} + 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 index c1e04eb28..719fea284 100644 --- 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(); 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( + + ); + 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 index e058627a6..5a760684f 100644 --- 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 {yaml}; - } - return {yaml}; + return ( + <> + {title && {title}} + {yaml} + + ); } ViewYAML.propTypes = { diff --git a/packages/components/src/components/ViewYAML/ViewYAML.scss b/packages/components/src/components/ViewYAML/ViewYAML.scss index 674340ceb..ea9a4a661 100644 --- 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 index 0a2385bb1..f4a0a2bb0 100644 --- 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 index bd109beb6..6a2622f70 100644 --- 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 index 8d46c9cc1..aef2629eb 100644 --- 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 index 5aef8aadb..d72daf028 100644 --- 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 index e068e9983..f584f0bc0 100644 --- 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 index 3ededfb52..fd1515b09 100644 --- 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 index 1ec30a8f5..bead34a0b 100644 --- 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 index 673f62253..bd84374a1 100644 --- 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 index 8da2ad16c..695dc2be9 100644 --- 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 index 3c19ad9e0..0ee3a6839 100644 --- 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": "",