feat: Display title and description in archived view

Already working in normal workflow view via #9805 - create shared react component for workflow row name to dry up usage of this code in both normal and archive workflow lists - add documentation regarding title and description annotations Signed-off-by: jmeridth <jmeridth@gmail.com>
argoproj · Mar 31, 2023 · 94dbaf6 · 94dbaf6
1 parent 1d04d88
commit 94dbaf6
Show file tree

Hide file tree

Showing 8 changed files with 132 additions and 56 deletions.
diff --git a/docs/assets/workflow-title-and-description.png b/docs/assets/workflow-title-and-description.png
diff --git a/docs/title-and-description.md b/docs/title-and-description.md
@@ -0,0 +1,22 @@
+# Title and Description
+
+If you add specific title and description annotations to your workflow they will show up on the workflow lists.
+
+```yaml
+apiVersion: argoproj.io/v1alpha1
+kind: Workflow
+metadata:
+  name: my-wf
+  annotations:
+    workflows.argoproj.io/title: 'Test Title'
+    workflows.argoproj.io/description: 'Test Description'
+```
+
+Note:
+
+- no title or description, defaults to `workflow.metadata.name`
+- no title, description (title defaults to `workflow.metadata.name`)
+- title, no description
+- title and description
+
+![Workflow Title And Description](assets/workflow-title-and-description.png)
diff --git a/mkdocs.yml b/mkdocs.yml
@@ -109,6 +109,7 @@ nav:
           - artifact-visualization.md
           - widgets.md
           - intermediate-inputs.md
+          - title-and-description.md
       - Debugging Tools:
           - workflow-events.md
           - debug-pause.md

diff --git a/ui/src/app/archived-workflows/components/archived-workflow-list/archived-workflow-list.tsx b/ui/src/app/archived-workflows/components/archived-workflow-list/archived-workflow-list.tsx
@@ -10,6 +10,7 @@ import {Loading} from '../../../shared/components/loading';
 import {PaginationPanel} from '../../../shared/components/pagination-panel';
 import {PhaseIcon} from '../../../shared/components/phase-icon';
 import {Timestamp} from '../../../shared/components/timestamp';
+import {WorkflowsRowName} from '../../../shared/components/workflows-row-name/workflows-row-name';
 import {ZeroState} from '../../../shared/components/zero-state';
 import {formatDuration, wfDuration} from '../../../shared/duration';
 import {Pagination, parseLimit} from '../../../shared/pagination';
@@ -275,7 +276,9 @@ export class ArchivedWorkflowList extends BasePage<RouteComponentProps<any>, Sta
                             <div className='columns small-1'>
                                 <PhaseIcon value={w.status.phase} />
                             </div>
-                            <div className='columns small-3'>{w.metadata.name}</div>
+                            <div className='columns small-3'>
+                                <WorkflowsRowName metadata={w.metadata} />
+                            </div>
                             <div className='columns small-2'>{w.metadata.namespace}</div>
                             <div className='columns small-2'>
                                 <Timestamp date={w.status.startedAt} />

diff --git a/ui/src/app/shared/components/workflows-row-name/workflows-row-name.scss b/ui/src/app/shared/components/workflows-row-name/workflows-row-name.scss
@@ -0,0 +1,8 @@
+@import 'node_modules/argo-ui/src/styles/config';
+
+.wf-rows-name {
+  white-space: pre-line;
+  line-height: 1.5em;
+  display: inline-block;
+  vertical-align: middle;
+}
diff --git a/ui/src/app/shared/components/workflows-row-name/workflows-row-name.tsx b/ui/src/app/shared/components/workflows-row-name/workflows-row-name.tsx
@@ -0,0 +1,12 @@
+import * as kubernetes from 'argo-ui/src/models/kubernetes';
+import * as React from 'react';
+import {ANNOTATION_DESCRIPTION, ANNOTATION_TITLE} from '../../../shared/annotations';
+
+require('./workflows-row-name.scss');
+
+export const WorkflowsRowName = ({metadata}: {metadata: kubernetes.ObjectMeta}) => {
+    const title = (metadata.annotations && metadata.annotations[ANNOTATION_TITLE]) || metadata.name;
+    const description = (metadata.annotations && metadata.annotations[ANNOTATION_DESCRIPTION] && `\n${metadata.annotations[ANNOTATION_DESCRIPTION]}`) || '';
+    const content = `${title}${description}`;
+    return <div className='wf-rows-name'>{content}</div>;
+};
diff --git a/ui/src/app/shared/services/archived-workflows-service.ts b/ui/src/app/shared/services/archived-workflows-service.ts
@@ -3,61 +3,92 @@ import {Pagination} from '../pagination';
 import {Utils} from '../utils';
 import requests from './requests';
 export class ArchivedWorkflowsService {
-    public list(namespace: string, name: string, namePrefix: string, phases: string[], labels: string[], minStartedAt: Date, maxStartedAt: Date, pagination: Pagination) {
-        if (namespace === '') {
-            return requests
-                .get(`api/v1/archived-workflows?${Utils.queryParams({name, namePrefix, phases, labels, minStartedAt, maxStartedAt, pagination}).join('&')}`)
-                .then(res => res.body as models.WorkflowList);
-        } else {
-            return requests
-                .get(`api/v1/archived-workflows?namespace=${namespace}&${Utils.queryParams({name, namePrefix, phases, labels, minStartedAt, maxStartedAt, pagination}).join('&')}`)
-                .then(res => res.body as models.WorkflowList);
-        }
-    }
+           public list(
+               namespace: string,
+               name: string,
+               namePrefix: string,
+               phases: string[],
+               labels: string[],
+               minStartedAt: Date,
+               maxStartedAt: Date,
+               pagination: Pagination,
+               fields = [
+                   'metadata',
+                   'items.metadata.uid',
+                   'items.metadata.name',
+                   'items.metadata.namespace',
+                   'items.metadata.creationTimestamp',
+                   'items.metadata.labels',
+                   'items.metadata.annotations',
+                   'items.status.phase',
+                   'items.status.message',
+                   'items.status.finishedAt',
+                   'items.status.startedAt',
+                   'items.status.estimatedDuration',
+                   'items.status.progress',
+                   'items.spec.suspend'
+               ]
+           ) {
+               const params = Utils.queryParams({
+                   name,
+                   namePrefix,
+                   phases,
+                   labels,
+                   minStartedAt,
+                   maxStartedAt,
+                   pagination
+               });
+               params.push(`fields=${fields.join(',')}`);
+               if (namespace === '') {
+                   return requests.get(`api/v1/archived-workflows?${params.join('&')}`).then(res => res.body as models.WorkflowList);
+               } else {
+                   return requests.get(`api/v1/archived-workflows?namespace=${namespace}&${params.join('&')}).join('&')}`).then(res => res.body as models.WorkflowList);
+               }
+           }
 
-    public get(uid: string, namespace: string) {
-        if (namespace === '') {
-            return requests.get(`api/v1/archived-workflows/${uid}`).then(res => res.body as models.Workflow);
-        } else {
-            return requests.get(`api/v1/archived-workflows/${uid}?namespace=${namespace}`).then(res => res.body as models.Workflow);
-        }
-    }
+           public get(uid: string, namespace: string) {
+               if (namespace === '') {
+                   return requests.get(`api/v1/archived-workflows/${uid}`).then(res => res.body as models.Workflow);
+               } else {
+                   return requests.get(`api/v1/archived-workflows/${uid}?namespace=${namespace}`).then(res => res.body as models.Workflow);
+               }
+           }
 
-    public delete(uid: string, namespace: string) {
-        if (namespace === '') {
-            return requests.delete(`api/v1/archived-workflows/${uid}`);
-        } else {
-            return requests.delete(`api/v1/archived-workflows/${uid}?namespace=${namespace}`);
-        }
-    }
+           public delete(uid: string, namespace: string) {
+               if (namespace === '') {
+                   return requests.delete(`api/v1/archived-workflows/${uid}`);
+               } else {
+                   return requests.delete(`api/v1/archived-workflows/${uid}?namespace=${namespace}`);
+               }
+           }
 
-    public listLabelKeys(namespace: string) {
-        if (namespace === '') {
-            return requests.get(`api/v1/archived-workflows-label-keys`).then(res => res.body as models.Labels);
-        } else {
-            return requests.get(`api/v1/archived-workflows-label-keys?namespace=${namespace}`).then(res => res.body as models.Labels);
-        }
-    }
+           public listLabelKeys(namespace: string) {
+               if (namespace === '') {
+                   return requests.get(`api/v1/archived-workflows-label-keys`).then(res => res.body as models.Labels);
+               } else {
+                   return requests.get(`api/v1/archived-workflows-label-keys?namespace=${namespace}`).then(res => res.body as models.Labels);
+               }
+           }
 
-    public async listLabelValues(key: string, namespace: string): Promise<models.Labels> {
-        let url = `api/v1/archived-workflows-label-values?listOptions.labelSelector=${key}`;
-        if (namespace !== '') {
-            url += `&namespace=${namespace}`;
-        }
-        return (await requests.get(url)).body as models.Labels;
-    }
+           public async listLabelValues(key: string, namespace: string): Promise<models.Labels> {
+               let url = `api/v1/archived-workflows-label-values?listOptions.labelSelector=${key}`;
+               if (namespace !== '') {
+                   url += `&namespace=${namespace}`;
+               }
+               return (await requests.get(url)).body as models.Labels;
+           }
 
-    public resubmit(uid: string, namespace: string) {
-        return requests
-            .put(`api/v1/archived-workflows/${uid}/resubmit`)
-            .send({namespace})
-            .then(res => res.body as models.Workflow);
-    }
+           public resubmit(uid: string, namespace: string) {
+               return requests
+                   .put(`api/v1/archived-workflows/${uid}/resubmit`)
+                   .send({namespace})
+                   .then(res => res.body as models.Workflow);
+           }
 
-    public retry(uid: string, namespace: string) {
-        return requests
-            .put(`api/v1/archived-workflows/${uid}/retry`)
-            .send({namespace})
-            .then(res => res.body as models.Workflow);
-    }
-}
+           public retry(uid: string, namespace: string) {
+               return requests
+                   .put(`api/v1/archived-workflows/${uid}/retry`)
+                   .send({namespace})
+                   .then(res => res.body as models.Workflow);
+           }
+       }
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,11 +2,11 @@ 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';
 import {Timestamp} from '../../../shared/components/timestamp';
+import {WorkflowsRowName} from '../../../shared/components/workflows-row-name/workflows-row-name';
 import {wfDuration} from '../../../shared/duration';
 import {WorkflowDrawer} from '../workflow-drawer/workflow-drawer';
 
@@ -50,8 +50,7 @@ export class WorkflowsRow extends React.Component<WorkflowsRowProps, WorkflowRow
                     </div>
                     <Link to={uiUrl(`workflows/${wf.metadata.namespace}/${wf.metadata.name}`)} className='small-11 row'>
                         <div className='columns small-3'>
-                            {(wf.metadata.annotations && wf.metadata.annotations[ANNOTATION_TITLE]) || wf.metadata.name}
-                            {wf.metadata.annotations && wf.metadata.annotations[ANNOTATION_DESCRIPTION] ? <p>{wf.metadata.annotations[ANNOTATION_DESCRIPTION]}</p> : null}
+                            <WorkflowsRowName metadata={wf.metadata} />
                         </div>
                         <div className='columns small-1'>{wf.metadata.namespace}</div>
                         <div className='columns small-1'>