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

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

@@ -3,6 +3,8 @@ import * as models from '../../../../models';
 import {CheckboxFilter} from '../../../shared/components/checkbox-filter/checkbox-filter';
 import {NamespaceFilter} from '../../../shared/components/namespace-filter';
 import {TagsInput} from '../../../shared/components/tags-input/tags-input';
+import {services} from '../../../shared/services';
+import {DataLoader, Select} from 'argo-ui';
 
 require('./workflow-filters.scss');
 
@@ -16,6 +18,34 @@ interface WorkflowFilterProps {
 }
 
 export class WorkflowFilters extends React.Component<WorkflowFilterProps, {}> {
+    private get workflowTemplate() {
+        return this.getLabel(models.labels.workflowTemplate);
+    }
+
+    private set workflowTemplate(value: string) {
+        this.setLabel(models.labels.workflowTemplate, value);
+    }
+
+    private get cronWorkflow() {
+        return this.getLabel(models.labels.cronWorkflow);
+    }
+
+    private set cronWorkflow(value: string) {
+        this.setLabel(models.labels.cronWorkflow, value);
+    }
+
+    private getLabel(name: string) {
+        return (this.labelSuggestion.find(label => label.startsWith(name)) || '').replace(name + '=', '');
+    }
+
+    private setLabel(name: string, value: string) {
+        this.props.onChange(this.props.namespace, this.props.selectedPhases, [name.concat('=' + value)])
+    }
+
+    private get labelSuggestion() {
+        return this.getLabelSuggestions(this.props.workflows);
+    }
+
     public render() {
         return (
             <div className='wf-filters-container'>
@@ -33,13 +63,25 @@ 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>
+                        <DataLoader load={() => services.workflowTemplate.list(this.props.namespace).then(list => list.map(x => x.metadata.name))}>
+                            {list => <Select options={list} value={this.workflowTemplate} onChange={x => (this.workflowTemplate = x.value)} />}
+                        </DataLoader>
+                    </div>
+                    <div className='columns small-3 xlarge-12'>
+                        <p className='wf-filters-container__title'>Cron Workflow</p>
+                        <DataLoader load={() => services.cronWorkflows.list(this.props.namespace).then(list => list.map(x => x.metadata.name))}>
+                            {list => <Select options={list} value={this.cronWorkflow} onChange={x => (this.cronWorkflow = x.value)} />}
+                        </DataLoader>
+                    </div>
                     <div className='columns small-6 xlarge-12'>
                         <p className='wf-filters-container__title'>Phases</p>
                         <CheckboxFilter
@@ -67,6 +109,24 @@ 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 +140,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)));
     }
 }