feat: Workflow title/description in workflow list view. Fixes argopro…

…j#6529 Fixes argoproj#6529 - [x] title and description in list view - [x] add react-markdown dependency - [ ] allow description to be markdown Signed-off-by: jmeridth <jmeridth@gmail.com>
jmeridth · Oct 13, 2022 · 2395193 · 2395193
1 parent d4817ef
commit 2395193
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 1 deletion.
diff --git a/ui/package.json b/ui/package.json
@@ -32,6 +32,7 @@
         "react-chartjs-2": "^2.11.2",
         "react-datepicker": "^2.16.0",
         "react-dom": "^16.14.0",
+        "react-markdown": "^8.0.3",
         "react-moment": "^1.1.1",
         "react-monaco-editor": "^0.50.1",
         "react-router-dom": "^4.2.2",

diff --git a/ui/src/app/shared/annotations.ts b/ui/src/app/shared/annotations.ts
@@ -1 +1,3 @@
 export const ANNOTATION_KEY_POD_NAME_VERSION = 'workflows.argoproj.io/pod-name-format';
+export const ANNOTATION_TITLE = 'workflows.argoproj.io/title';
+export const ANNOTATION_DESCRIPTION = 'workflows.argoproj.io/description';
diff --git a/ui/src/app/shared/services/workflows-service.ts b/ui/src/app/shared/services/workflows-service.ts
@@ -33,6 +33,7 @@ export class WorkflowsService {
             'items.metadata.namespace',
             'items.metadata.creationTimestamp',
             'items.metadata.labels',
+            'items.metadata.annotations',
             'items.status.phase',
             'items.status.message',
             'items.status.finishedAt',

diff --git a/ui/src/app/workflows/components/workflows-row/workflows-row.tsx b/ui/src/app/workflows/components/workflows-row/workflows-row.tsx
@@ -2,6 +2,7 @@ import {Ticker} from 'argo-ui/src/index';
 import * as React from 'react';
 import {Link} from 'react-router-dom';
 import {Workflow} from '../../../../models';
+import {ANNOTATION_DESCRIPTION, ANNOTATION_TITLE} from '../../../shared/annotations';
 import {uiUrl} from '../../../shared/base';
 import {DurationPanel} from '../../../shared/components/duration-panel';
 import {PhaseIcon} from '../../../shared/components/phase-icon';
@@ -48,7 +49,10 @@ export class WorkflowsRow extends React.Component<WorkflowsRowProps, WorkflowRow
                         <PhaseIcon value={wf.status.phase} />
                     </div>
                     <Link to={uiUrl(`workflows/${wf.metadata.namespace}/${wf.metadata.name}`)} className='small-11 row'>
-                        <div className='columns small-3'>{wf.metadata.name}</div>
+                        <div className='columns small-3'>
+                            {(wf.metadata.annotations && wf.metadata.annotations[ANNOTATION_TITLE]) || wf.metadata.name}
+                            {wf.metadata.annotations && wf.metadata.annotations[ANNOTATION_DESCRIPTION] ? <span>{wf.metadata.annotations[ANNOTATION_DESCRIPTION]}</span> : null}
+                        </div>
                         <div className='columns small-1'>{wf.metadata.namespace}</div>
                         <div className='columns small-1'>
                             <Timestamp date={wf.status.startedAt} />