feat(ui): Add workflow author information to workflow summary and dra…

…wer (#9119)

Signed-off-by: Yuan Tang <terrytangyuan@gmail.com>

ui/src/app/workflows/components/workflow-creator-info/workflow-creator-info.scss

@@ -0,0 +1,44 @@
+@import 'node_modules/argo-ui/src/styles/config';
+
+.wf-row-creator-labels {
+  display: flex; 
+  flex-wrap: wrap;
+  align-items: center;
+  height: 100%;
+  $gutter: 0.5em;
+  border-radius: 0 0 3px 3px;
+
+  .tag {
+    line-height: normal;
+    background-color: $argo-color-gray-3;
+    border-radius: 3px;
+    height: auto;
+    margin: $gutter 0;
+    margin-right: 10px;
+    display: flex;
+    overflow: hidden;
+    cursor: pointer;
+
+    &:hover {
+      .key {
+        color: $argo-color-teal-5;
+      }
+      .value {
+        color: $argo-color-gray-3;
+      }
+    }
+
+    .key, .value {
+      padding: 0.5em 8px;
+    }
+
+    .key {
+      color: $argo-color-gray-6;
+    }
+
+    .value {
+      color: white;
+      background-color: $argo-color-teal-5;
+    }
+  }
+}

ui/src/app/workflows/components/workflow-creator-info/workflow-creator-info.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import * as models from '../../../../models';
+import {labels} from '../../../../models';
+
+require('./workflow-creator-info.scss');
+
+interface WorkflowCreatorInfoProps {
+    workflow: models.Workflow;
+    onChange: (key: string, value: string) => void;
+}
+
+export class WorkflowCreatorInfo extends React.Component<WorkflowCreatorInfoProps, {}> {
+    constructor(props: WorkflowCreatorInfoProps) {
+        super(props);
+    }
+
+    public render() {
+        const w = this.props.workflow;
+        const creatorLabels = [];
+        if (w.metadata.labels) {
+            const creatorInfoMap = new Map<string, string>([
+                ['Name', w.metadata.labels[labels.creator]],
+                ['Email', w.metadata.labels[labels.creatorEmail]],
+                ['Preferred username', w.metadata.labels[labels.creatorPreferredUsername]]
+            ]);
+            creatorInfoMap.forEach((value: string, key: string) => {
+                if (value !== '' && value !== undefined) {
+                    creatorLabels.push(
+                        <div
+                            title={`List workflows created by ${key}=${value}`}
+                            className='tag'
+                            key={`${w.metadata.uid}-${key}`}
+                            onClick={async e => {
+                                e.preventDefault();
+                                this.props.onChange(key, value);
+                            }}>
+                            <div className='key'>{key}</div>
+                            <div className='value'>{value}</div>
+                        </div>
+                    );
+                }
+            });
+        } else {
+            creatorLabels.push(<div key={`${w.metadata.uid}- `}> No creator information </div>);
+        }
+        return <div className='wf-row-creator-labels'>{creatorLabels}</div>;
+    }
+}

ui/src/app/workflows/components/workflow-drawer/workflow-drawer.tsx

@@ -6,6 +6,7 @@ import {Loading} from '../../../shared/components/loading';
 import {ConditionsPanel} from '../../../shared/conditions-panel';
 import {formatDuration} from '../../../shared/duration';
 import {services} from '../../../shared/services';
+import {WorkflowCreatorInfo} from '../workflow-creator-info/workflow-creator-info';
 import {WorkflowFrom} from '../workflow-from';
 import {WorkflowLabels} from '../workflow-labels/workflow-labels';
 
@@ -105,6 +106,17 @@ export class WorkflowDrawer extends React.Component<WorkflowDrawerProps, Workflo
                         />
                     </div>
                 </div>
+                <div className='workflow-drawer__section workflow-drawer__labels'>
+                    <div className='workflow-drawer__title'>Creator</div>
+                    <div className='workflow-drawer__labels--list'>
+                        <WorkflowCreatorInfo
+                            workflow={wf}
+                            onChange={key => {
+                                this.props.onChange(key);
+                            }}
+                        />
+                    </div>
+                </div>
             </div>
         );
     }

ui/src/app/workflows/components/workflow-summary-panel.tsx

@@ -10,6 +10,7 @@ import {ConditionsPanel} from '../../shared/conditions-panel';
 import {Consumer} from '../../shared/context';
 import {wfDuration} from '../../shared/duration';
 import {ResourcesDuration} from '../../shared/resources-duration';
+import {WorkflowCreatorInfo} from './workflow-creator-info/workflow-creator-info';
 import {WorkflowFrom} from './workflow-from';
 import {WorkflowLabels} from './workflow-labels/workflow-labels';
 
@@ -51,7 +52,19 @@ export const WorkflowSummaryPanel = (props: {workflow: Workflow}) => (
             ];
             const creator = props.workflow.metadata.labels[labels.creator];
             if (creator) {
-                attributes.push({title: 'Creator', value: creator});
+                attributes.push({
+                    title: 'Creator',
+                    value: (
+                        <Consumer>
+                            {ctx => (
+                                <WorkflowCreatorInfo
+                                    workflow={props.workflow}
+                                    onChange={(key, value) => ctx.navigation.goto(uiUrl(`workflows/${props.workflow.metadata.namespace}?label=${key}=${value}`))}
+                                />
+                            )}
+                        </Consumer>
+                    )
+                });
             }
             if (props.workflow.status.resourcesDuration) {
                 attributes.push({

ui/src/models/workflows.ts

@@ -4,6 +4,8 @@ export const labels = {
     clusterWorkflowTemplate: 'workflows.argoproj.io/cluster-workflow-template',
     completed: 'workflows.argoproj.io/completed',
     creator: 'workflows.argoproj.io/creator',
+    creatorEmail: 'workflows.argoproj.io/creator-email',
+    creatorPreferredUsername: 'workflows.argoproj.io/creator-preferred-username',
     cronWorkflow: 'workflows.argoproj.io/cron-workflow',
     workflowTemplate: 'workflows.argoproj.io/workflow-template'
 };