feat(ui): Add Template/Cron workflow filter to workflow page. Closes #…

…4532 (#4543) Signed-off-by: Tianchu Zhao <evantczhao@gmail.com>
argoproj · Nov 19, 2020 · 916b454 · 916b454
1 parent 6e2b0cf
commit 916b454
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 22 deletions.
diff --git a/USERS.md b/USERS.md
@@ -104,3 +104,4 @@ Currently, the following organizations are **officially** using Argo Workflows:
 1. [UFirstGroup](https://www.ufirstgroup.com)
 1. [Wavefront](https://www.wavefront.com/)
 1. [Wellcome Trust](https://wellcome.ac.uk/)
+1. [Woolworths Group](https://www.woolworthsgroup.com.au/)
diff --git a/ui/src/app/reports/components/reports.tsx b/ui/src/app/reports/components/reports.tsx
@@ -1,4 +1,4 @@
-import {Checkbox, DataLoader, Page, Select} from 'argo-ui/src/index';
+import {Checkbox, Page} from 'argo-ui/src/index';
 import {ChartOptions} from 'chart.js';
 import 'chartjs-plugin-annotation';
 import * as React from 'react';
@@ -7,8 +7,9 @@ import {RouteComponentProps} from 'react-router-dom';
 import {getColorForNodePhase, NODE_PHASE, Workflow} from '../../../models';
 import {uiUrl} from '../../shared/base';
 import {BasePage} from '../../shared/components/base-page';
+import {DataLoaderDropdown} from '../../shared/components/data-loader-dropdown';
 import {ErrorNotice} from '../../shared/components/error-notice';
-import {InputFilter} from '../../shared/components/input-filter';
+import {NamespaceFilter} from '../../shared/components/namespace-filter';
 import {TagsInput} from '../../shared/components/tags-input/tags-input';
 import {ZeroState} from '../../shared/components/zero-state';
 import {Consumer, ContextApis} from '../../shared/context';
@@ -43,18 +44,10 @@ export class Reports extends BasePage<RouteComponentProps<any>, State> {
         this.setLabel(labelKeyPhase, value);
     }
 
-    private get workflowTemplate() {
-        return this.getLabel(labelKeyWorkflowTemplate);
-    }
-
     private set workflowTemplate(value: string) {
         this.setLabel(labelKeyWorkflowTemplate, value);
     }
 
-    private get cronWorkflow() {
-        return this.getLabel(labelKeyCronWorkflow);
-    }
-
     private set cronWorkflow(value: string) {
         this.setLabel(labelKeyCronWorkflow, value);
     }
@@ -257,11 +250,11 @@ export class Reports extends BasePage<RouteComponentProps<any>, State> {
                     </div>
                     <div className='columns small-4 xlarge-12'>
                         <p className='wf-filters-container__title'>Namespace</p>
-                        <InputFilter
-                            name='namespace'
+                        <NamespaceFilter
                             value={this.state.namespace}
-                            placeholder='Namespace'
-                            onChange={namespace => this.fetchReport(namespace, this.state.labels, this.state.archivedWorkflows)}
+                            onChange={namespace => {
+                                this.fetchReport(namespace, this.state.labels, this.state.archivedWorkflows);
+                            }}
                         />
                     </div>
                     <div className='columns small-4 xlarge-12'>
@@ -274,15 +267,17 @@ export class Reports extends BasePage<RouteComponentProps<any>, State> {
                     </div>
                     <div className='columns small-4 xlarge-12'>
                         <p className='wf-filters-container__title'>Workflow Template</p>
-                        <DataLoader load={() => services.workflowTemplate.list(this.state.namespace).then(list => list.map(x => x.metadata.name))}>
-                            {list => <Select options={list} value={this.workflowTemplate} onChange={x => (this.workflowTemplate = x.value)} />}
-                        </DataLoader>
+                        <DataLoaderDropdown
+                            load={services.workflowTemplate.list(this.state.namespace).then(list => list.map(x => x.metadata.name))}
+                            onChange={value => (this.workflowTemplate = value)}
+                        />
                     </div>
                     <div className='columns small-4 xlarge-12'>
                         <p className='wf-filters-container__title'>Cron Workflow</p>
-                        <DataLoader load={() => services.cronWorkflows.list(this.state.namespace).then(list => list.map(x => x.metadata.name))}>
-                            {list => <Select options={list} value={this.cronWorkflow} onChange={x => (this.cronWorkflow = x.value)} />}
-                        </DataLoader>
+                        <DataLoaderDropdown
+                            load={services.cronWorkflows.list(this.state.namespace).then(list => list.map(x => x.metadata.name))}
+                            onChange={value => (this.cronWorkflow = value)}
+                        />
                     </div>
                     <div className='columns small-43 xlarge-12'>
                         <p className='wf-filters-container__title'>Phase</p>

diff --git a/ui/src/app/shared/components/data-loader-dropdown.tsx b/ui/src/app/shared/components/data-loader-dropdown.tsx
@@ -0,0 +1,21 @@
+import {DataLoader, Select, SelectOption} from 'argo-ui';
+import * as React from 'react';
+
+export const DataLoaderDropdown = (props: {load: Promise<(string | SelectOption)[]>; onChange: (value: string) => void}) => {
+    const [selected, setSelected] = React.useState('');
+
+    return (
+        <DataLoader load={() => props.load}>
+            {list => (
+                <Select
+                    options={list}
+                    value={selected}
+                    onChange={x => {
+                        setSelected(x.value);
+                        props.onChange(x.value);
+                    }}
+                />
+            )}
+        </DataLoader>
+    );
+};
diff --git a/ui/src/app/workflows/components/workflow-filters/workflow-filters.tsx b/ui/src/app/workflows/components/workflow-filters/workflow-filters.tsx
@@ -1,8 +1,10 @@
 import * as React from 'react';
 import * as models from '../../../../models';
 import {CheckboxFilter} from '../../../shared/components/checkbox-filter/checkbox-filter';
+import {DataLoaderDropdown} from '../../../shared/components/data-loader-dropdown';
 import {NamespaceFilter} from '../../../shared/components/namespace-filter';
 import {TagsInput} from '../../../shared/components/tags-input/tags-input';
+import {services} from '../../../shared/services';
 
 require('./workflow-filters.scss');
 
@@ -16,6 +18,18 @@ interface WorkflowFilterProps {
 }
 
 export class WorkflowFilters extends React.Component<WorkflowFilterProps, {}> {
+    private set workflowTemplate(value: string) {
+        this.setLabel(models.labels.workflowTemplate, value);
+    }
+
+    private set cronWorkflow(value: string) {
+        this.setLabel(models.labels.cronWorkflow, value);
+    }
+
+    private get labelSuggestion() {
+        return this.getLabelSuggestions(this.props.workflows);
+    }
+
     public render() {
         return (
             <div className='wf-filters-container'>
@@ -33,13 +47,27 @@ export class WorkflowFilters extends React.Component<WorkflowFilterProps, {}> {
                         <p className='wf-filters-container__title'>Labels</p>
                         <TagsInput
                             placeholder=''
-                            autocomplete={this.getLabelSuggestions(this.props.workflows)}
+                            autocomplete={this.labelSuggestion}
                             tags={this.props.selectedLabels}
                             onChange={tags => {
                                 this.props.onChange(this.props.namespace, this.props.selectedPhases, tags);
                             }}
                         />
                     </div>
+                    <div className='columns small-3 xlarge-12'>
+                        <p className='wf-filters-container__title'>Workflow Template</p>
+                        <DataLoaderDropdown
+                            load={services.workflowTemplate.list(this.props.namespace).then(list => list.map(x => x.metadata.name))}
+                            onChange={value => (this.workflowTemplate = value)}
+                        />
+                    </div>
+                    <div className='columns small-3 xlarge-12'>
+                        <p className='wf-filters-container__title'>Cron Workflow</p>
+                        <DataLoaderDropdown
+                            load={services.cronWorkflows.list(this.props.namespace).then(list => list.map(x => x.metadata.name))}
+                            onChange={value => (this.cronWorkflow = value)}
+                        />
+                    </div>
                     <div className='columns small-6 xlarge-12'>
                         <p className='wf-filters-container__title'>Phases</p>
                         <CheckboxFilter
@@ -56,6 +84,10 @@ export class WorkflowFilters extends React.Component<WorkflowFilterProps, {}> {
         );
     }
 
+    private setLabel(name: string, value: string) {
+        this.props.onChange(this.props.namespace, this.props.selectedPhases, [name.concat('=' + value)]);
+    }
+
     private getPhaseItems(workflows: models.Workflow[]) {
         const phasesMap = new Map<string, number>();
         this.props.phaseItems.forEach(value => phasesMap.set(value, 0));
@@ -67,6 +99,20 @@ export class WorkflowFilters extends React.Component<WorkflowFilterProps, {}> {
         return results;
     }
 
+    private addCommonLabel(suggestions: string[]) {
+        const commonLabel = new Array<string>();
+        const commonLabelPool = [models.labels.cronWorkflow, models.labels.workflowTemplate, models.labels.clusterWorkflowTemplate];
+        commonLabelPool.forEach(labelPrefix => {
+            for (const label of suggestions) {
+                if (label.startsWith(labelPrefix)) {
+                    commonLabel.push(`${labelPrefix}`);
+                    break;
+                }
+            }
+        });
+        return commonLabel.concat(suggestions);
+    }
+
     private getLabelSuggestions(workflows: models.Workflow[]) {
         const suggestions = new Array<string>();
         workflows
@@ -80,6 +126,6 @@ export class WorkflowFilters extends React.Component<WorkflowFilterProps, {}> {
                     }
                 });
             });
-        return suggestions.sort((a, b) => a.localeCompare(b));
+        return this.addCommonLabel(suggestions.sort((a, b) => a.localeCompare(b)));
     }
 }