Add support for TEP-0047 'displayName'

When viewing a Pipeline or Task details page, include the 'displayName' alongside the 'description' if provided. On the PipelineRun details page, show the 'displayName' in the TaskTree instead of the pipelineTaskName. This also accounts for retries where the 'displayName' is used as the base instead. The details to the right still show the full TaskRun name as before. A future change may include display of the pipelineTask description so this is wired up but its display is omitted for now.
tektoncd · Jul 10, 2023 · 74b0b0d · 74b0b0d
1 parent 3481453
commit 74b0b0d
Show file tree

Hide file tree

Showing 17 changed files with 83 additions and 21 deletions.
diff --git a/packages/components/src/components/PipelineRun/PipelineRun.js b/packages/components/src/components/PipelineRun/PipelineRun.js
@@ -169,6 +169,8 @@ export /* istanbul ignore next */ class PipelineRunContainer extends Component {
  });
 
  const { podName } = taskRun.status || {};
+ let displayName =
+ taskRun.metadata.labels?.[labelConstants.DASHBOARD_DISPLAY_NAME];
 
  if (retryPodIndex[podName] || taskRun.status?.retriesStatus) {
  const retryNumber =
@@ -178,8 +180,11 @@ export /* istanbul ignore next */ class PipelineRunContainer extends Component {
  id: 'dashboard.pipelineRun.pipelineTaskName.retry',
  defaultMessage: '{pipelineTaskName} (retry {retryNumber, number})'
  },
- { pipelineTaskName, retryNumber }
+ { pipelineTaskName: displayName || pipelineTaskName, retryNumber }
  );
+ if (displayName) {
+ displayName = pipelineTaskName;
+ }
  }
 
  return {
@@ -188,6 +193,11 @@ export /* istanbul ignore next */ class PipelineRunContainer extends Component {
  ...taskRun.metadata,
  labels: {
  ...taskRun.metadata.labels,
+ ...(displayName
+ ? {
+ [labelConstants.DASHBOARD_DISPLAY_NAME]: displayName
+ }
+ : null),
  [labelConstants.DASHBOARD_RETRY_NAME]: pipelineTaskName
  },
  uid: `${uid}${podName}`

diff --git a/packages/components/src/components/ResourceDetails/ResourceDetails.js b/packages/components/src/components/ResourceDetails/ResourceDetails.js
@@ -84,6 +84,28 @@ const ResourceDetails = ({
  >
  <div className="tkn--details">
  <ul className="tkn--resourcedetails-metadata">
+ {resource.spec?.displayName && (
+ <li>
+ <span>
+ {intl.formatMessage({
+ id: 'dashboard.resourceDetails.spec.displayName',
+ defaultMessage: 'Display name:'
+ })}
+ </span>
+ {resource.spec.displayName}
+ </li>
+ )}
+ {resource.spec?.description && (
+ <li>
+ <span>
+ {intl.formatMessage({
+ id: 'dashboard.resourceDetails.spec.description',
+ defaultMessage: 'Description:'
+ })}
+ </span>
+ {resource.spec.description}
+ </li>
+ )}
  <li>
  <span>
  {intl.formatMessage({
@@ -125,17 +147,6 @@ const ResourceDetails = ({
  {resource.metadata.namespace}
  </li>
  )}
- {resource.spec?.description && (
- <li>
- <span>
- {intl.formatMessage({
- id: 'dashboard.resourceDetails.description',
- defaultMessage: 'Description'
- })}
- </span>
- {resource.spec.description}
- </li>
- )}
  {additionalMetadata}
  </ul>
  {children}

diff --git a/packages/components/src/components/TaskRunDetails/TaskRunDetails.js b/packages/components/src/components/TaskRunDetails/TaskRunDetails.js
@@ -122,7 +122,8 @@ const TaskRunDetails = ({ onViewChange, pod, task, taskRun, view }) => {
  />
  ) : null;
 
- const results = taskRun.status?.taskResults;
+ // taskResults renamed to results in v1
+ const results = taskRun.status?.taskResults || taskRun.status?.results;
  const resultsTable = results?.length ? (
  <Table
  size="sm"

diff --git a/packages/components/src/components/TaskRunDetails/TaskRunDetails.stories.js b/packages/components/src/components/TaskRunDetails/TaskRunDetails.stories.js
@@ -21,7 +21,7 @@ const params = [
  value: paramValue
  }
 ];
-const taskResults = [{ name: 'message', value: 'hello' }];
+const results = [{ name: 'message', value: 'hello' }];
 
 export default {
  component: TaskRunDetails,
@@ -48,7 +48,7 @@ export const Base = {
  ],
  results: [
  {
- name: taskResults[0].name,
+ name: results[0].name,
  description: 'A useful description of the result…'
  }
  ]
@@ -58,7 +58,7 @@ export const Base = {
  completionTime: '2021-03-03T15:25:34Z',
  podName: 'my-task-h7d6j-pod-pdtb7',
  startTime: '2021-03-03T15:25:27Z',
- taskResults
+ results
  }
  }
  }
@@ -90,7 +90,7 @@ export const WithWarning = {
  }
  ],
  startTime: '2021-03-03T15:25:27Z',
- taskResults
+ results
  }
  }
  }

diff --git a/packages/components/src/components/TaskTree/TaskTree.js b/packages/components/src/components/TaskTree/TaskTree.js
@@ -32,9 +32,11 @@ const TaskTree = ({ onSelect, selectedStepId, selectedTaskId, taskRuns }) => {
  }
  const { uid, labels, name } = taskRun.metadata;
  const {
+ [labelConstants.DASHBOARD_DISPLAY_NAME]: displayName,
  [labelConstants.PIPELINE_TASK]: pipelineTaskName,
  [labelConstants.DASHBOARD_RETRY_NAME]: retryName
  } = labels;
+
  const { reason, status } = getStatus(taskRun);
  const { steps } = taskRun.status || {};
  const expanded =
@@ -44,7 +46,7 @@ const TaskTree = ({ onSelect, selectedStepId, selectedTaskId, taskRuns }) => {
  const selectDefaultStep = !selectedTaskId;
  return (
  <Task
- displayName={retryName || pipelineTaskName || name}
+ displayName={displayName || retryName || pipelineTaskName || name}
  expanded={expanded}
  id={uid}
  key={uid}

diff --git a/packages/utils/src/utils/constants.js b/packages/utils/src/utils/constants.js
@@ -13,6 +13,8 @@ limitations under the License.
 
 export const labels = {
  CLUSTER_TASK: 'tekton.dev/clusterTask',
+ DASHBOARD_DESCRIPTION: 'dashboard.tekton.dev/description',
+ DASHBOARD_DISPLAY_NAME: 'dashboard.tekton.dev/displayName',
  DASHBOARD_IMPORT: 'dashboard.tekton.dev/import',
  DASHBOARD_RETRY_NAME: 'dashboard.tekton.dev/retryName',
  PIPELINE: 'tekton.dev/pipeline',

diff --git a/packages/utils/src/utils/index.js b/packages/utils/src/utils/index.js
@@ -478,10 +478,26 @@ export function getTaskRunsWithPlaceholders({
  pipelineTask.name
  );
 
- taskRunsToDisplay.push(
+ const taskRunToDisplay =
  realTaskRun ||
- getPlaceholderTaskRun({ clusterTasks, pipelineTask, tasks })
- );
+ getPlaceholderTaskRun({ clusterTasks, pipelineTask, tasks });
+
+ const { description, displayName } = pipelineTask;
+ taskRunToDisplay.metadata.labels = {
+ ...taskRunToDisplay.metadata.labels,
+ ...(description
+ ? {
+ [labelConstants.DASHBOARD_DESCRIPTION]: description
+ }
+ : null),
+ ...(displayName
+ ? {
+ [labelConstants.DASHBOARD_DISPLAY_NAME]: displayName
+ }
+ : null)
+ };
+
+ taskRunsToDisplay.push(taskRunToDisplay);
  });
 
  return taskRunsToDisplay;

diff --git a/src/nls/messages_de.json b/src/nls/messages_de.json
@@ -202,6 +202,8 @@
  "dashboard.resourceDetails.ariaLabel": "",
  "dashboard.resourceDetails.description": "",
  "dashboard.resourceDetails.errorloading": "",
+ "dashboard.resourceDetails.spec.description": "",
+ "dashboard.resourceDetails.spec.displayName": "",
  "dashboard.resourceList.emptyState": "",
  "dashboard.resourceList.errorLoading": "",
  "dashboard.resourceList.viewRuns": "",

diff --git a/src/nls/messages_en.json b/src/nls/messages_en.json
@@ -202,6 +202,8 @@
  "dashboard.resourceDetails.ariaLabel": "Resource details",
  "dashboard.resourceDetails.description": "Description",
  "dashboard.resourceDetails.errorloading": "Error loading resource",
+ "dashboard.resourceDetails.spec.description": "Description:",
+ "dashboard.resourceDetails.spec.displayName": "Display name:",
  "dashboard.resourceList.emptyState": "No matching resources found for type {type}",
  "dashboard.resourceList.errorLoading": "Error loading {type}",
  "dashboard.resourceList.viewRuns": "View {kind} of {resource}",

diff --git a/src/nls/messages_es.json b/src/nls/messages_es.json
@@ -202,6 +202,8 @@
  "dashboard.resourceDetails.ariaLabel": "",
  "dashboard.resourceDetails.description": "",
  "dashboard.resourceDetails.errorloading": "",
+ "dashboard.resourceDetails.spec.description": "",
+ "dashboard.resourceDetails.spec.displayName": "",
  "dashboard.resourceList.emptyState": "",
  "dashboard.resourceList.errorLoading": "",
  "dashboard.resourceList.viewRuns": "",

diff --git a/src/nls/messages_fr.json b/src/nls/messages_fr.json
@@ -202,6 +202,8 @@
  "dashboard.resourceDetails.ariaLabel": "",
  "dashboard.resourceDetails.description": "",
  "dashboard.resourceDetails.errorloading": "",
+ "dashboard.resourceDetails.spec.description": "",
+ "dashboard.resourceDetails.spec.displayName": "",
  "dashboard.resourceList.emptyState": "",
  "dashboard.resourceList.errorLoading": "",
  "dashboard.resourceList.viewRuns": "",

diff --git a/src/nls/messages_it.json b/src/nls/messages_it.json
@@ -202,6 +202,8 @@
  "dashboard.resourceDetails.ariaLabel": "",
  "dashboard.resourceDetails.description": "",
  "dashboard.resourceDetails.errorloading": "",
+ "dashboard.resourceDetails.spec.description": "",
+ "dashboard.resourceDetails.spec.displayName": "",
  "dashboard.resourceList.emptyState": "",
  "dashboard.resourceList.errorLoading": "",
  "dashboard.resourceList.viewRuns": "",

diff --git a/src/nls/messages_ja.json b/src/nls/messages_ja.json
@@ -202,6 +202,8 @@
  "dashboard.resourceDetails.ariaLabel": "リソースの詳細",
  "dashboard.resourceDetails.description": "説明",
  "dashboard.resourceDetails.errorloading": "リソースのロード中にエラーが発生しました",
+ "dashboard.resourceDetails.spec.description": "",
+ "dashboard.resourceDetails.spec.displayName": "",
  "dashboard.resourceList.emptyState": "{type}のリソースがありません",
  "dashboard.resourceList.errorLoading": "{type}のロード中にエラーが発生しました",
  "dashboard.resourceList.viewRuns": "{resource}の{kind}を表示",

diff --git a/src/nls/messages_ko.json b/src/nls/messages_ko.json
@@ -202,6 +202,8 @@
  "dashboard.resourceDetails.ariaLabel": "",
  "dashboard.resourceDetails.description": "",
  "dashboard.resourceDetails.errorloading": "",
+ "dashboard.resourceDetails.spec.description": "",
+ "dashboard.resourceDetails.spec.displayName": "",
  "dashboard.resourceList.emptyState": "",
  "dashboard.resourceList.errorLoading": "",
  "dashboard.resourceList.viewRuns": "",

diff --git a/src/nls/messages_pt.json b/src/nls/messages_pt.json
@@ -202,6 +202,8 @@
  "dashboard.resourceDetails.ariaLabel": "",
  "dashboard.resourceDetails.description": "",
  "dashboard.resourceDetails.errorloading": "",
+ "dashboard.resourceDetails.spec.description": "",
+ "dashboard.resourceDetails.spec.displayName": "",
  "dashboard.resourceList.emptyState": "",
  "dashboard.resourceList.errorLoading": "",
  "dashboard.resourceList.viewRuns": "",

diff --git a/src/nls/messages_zh-Hans.json b/src/nls/messages_zh-Hans.json
@@ -202,6 +202,8 @@
  "dashboard.resourceDetails.ariaLabel": "资源详情",
  "dashboard.resourceDetails.description": "描述",
  "dashboard.resourceDetails.errorloading": "加载资源时发生错误",
+ "dashboard.resourceDetails.spec.description": "",
+ "dashboard.resourceDetails.spec.displayName": "",
  "dashboard.resourceList.emptyState": "没有为类型 {type} 找到匹配的资源",
  "dashboard.resourceList.errorLoading": "加载 {type} 时发生错误",
  "dashboard.resourceList.viewRuns": "查看 {resource} 的 {kind}",

diff --git a/src/nls/messages_zh-Hant.json b/src/nls/messages_zh-Hant.json
@@ -202,6 +202,8 @@
  "dashboard.resourceDetails.ariaLabel": "",
  "dashboard.resourceDetails.description": "",
  "dashboard.resourceDetails.errorloading": "",
+ "dashboard.resourceDetails.spec.description": "",
+ "dashboard.resourceDetails.spec.displayName": "",
  "dashboard.resourceList.emptyState": "",
  "dashboard.resourceList.errorLoading": "",
  "dashboard.resourceList.viewRuns": "",