feat: Reduce API calls when changing filters. Closes #2231 (#2232)

* feat: Reduce API calls when changing filters * rename * Filter props change * rename variables
argoproj · Feb 14, 2020 · af94352 · af94352
1 parent a58cbc7
commit af94352
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 14 deletions.
diff --git a/ui/src/app/workflows/components/workflow-filters/workflow-filters.tsx b/ui/src/app/workflows/components/workflow-filters/workflow-filters.tsx
@@ -9,6 +9,7 @@ require('./workflow-filters.scss');
 interface WorkflowFilterProps {
     workflows: models.Workflow[];
     namespace: string;
+    phaseItems: string[];
     selectedPhases: string[];
     selectedLabels: string[];
     onChange: (namespace: string, selectedPhases: string[], labels: string[]) => void;
@@ -57,7 +58,7 @@ export class WorkflowFilters extends React.Component<WorkflowFilterProps, {}> {
 
     private getPhaseItems(workflows: models.Workflow[]) {
         const phasesMap = new Map<string, number>();
-        Object.values(models.NODE_PHASE).forEach(value => phasesMap.set(value, 0));
+        this.props.phaseItems.forEach(value => phasesMap.set(value, 0));
         workflows.filter(wf => wf.status.phase).forEach(wf => phasesMap.set(wf.status.phase, (phasesMap.get(wf.status.phase) || 0) + 1));
         const results = new Array<{name: string; count: number}>();
         phasesMap.forEach((val, key) => {

diff --git a/ui/src/app/workflows/components/workflows-list/workflows-list.tsx b/ui/src/app/workflows/components/workflows-list/workflows-list.tsx
@@ -25,6 +25,8 @@ require('./workflows-list.scss');
 
 interface State {
     loading: boolean;
+    initialized: boolean;
+    managedNamespace: boolean;
     namespace: string;
     selectedPhases: string[];
     selectedLabels: string[];
@@ -42,14 +44,16 @@ export class WorkflowsList extends BasePage<RouteComponentProps<any>, State> {
         super(props, context);
         this.state = {
             loading: true,
+            initialized: false,
+            managedNamespace: false,
             namespace: this.props.match.params.namespace || '',
             selectedPhases: this.queryParams('phase'),
             selectedLabels: this.queryParams('label')
         };
     }
 
     public componentDidMount(): void {
-        this.fetchWorkflows();
+        this.fetchWorkflows(this.state.namespace, this.state.selectedPhases, this.state.selectedLabels);
     }
 
     public componentWillUnmount(): void {
@@ -90,6 +94,7 @@ export class WorkflowsList extends BasePage<RouteComponentProps<any>, State> {
                                     <WorkflowFilters
                                         workflows={this.state.workflows}
                                         namespace={this.state.namespace}
+                                        phaseItems={Object.values(models.NODE_PHASE)}
                                         selectedPhases={this.state.selectedPhases}
                                         selectedLabels={this.state.selectedLabels}
                                         onChange={(namespace, selectedPhases, selectedLabels) => this.changeFilters(namespace, selectedPhases, selectedLabels)}
@@ -115,24 +120,33 @@ export class WorkflowsList extends BasePage<RouteComponentProps<any>, State> {
         );
     }
 
-    private fetchWorkflows(): void {
+    private fetchWorkflows(namespace: string, selectedPhases: string[], selectedLabels: string[]): void {
         if (this.subscription) {
             this.subscription.unsubscribe();
         }
-        services.info
-            .get()
-            .then(info => {
-                if (info.managedNamespace && info.managedNamespace !== this.state.namespace) {
-                    this.setState({namespace: info.managedNamespace});
+        let workflowList;
+        let newNamespace = namespace;
+        if (!this.state.initialized) {
+            workflowList = services.info.get().then(info => {
+                if (info.managedNamespace) {
+                    newNamespace = info.managedNamespace;
                 }
-                return services.workflows.list(this.state.namespace, this.state.selectedPhases, this.state.selectedLabels);
-            })
+                this.setState({initialized: true, managedNamespace: info.managedNamespace ? true : false});
+                return services.workflows.list(newNamespace, selectedPhases, selectedLabels);
+            });
+        } else {
+            if (this.state.managedNamespace) {
+                newNamespace = this.state.namespace;
+            }
+            workflowList = services.workflows.list(newNamespace, selectedPhases, selectedLabels);
+        }
+        workflowList
             .then(list => list.items)
             .then(list => list || [])
-            .then(workflows => this.setState({workflows}))
+            .then(workflows => this.setState({workflows, namespace: newNamespace, selectedPhases, selectedLabels}))
             .then(() => {
                 this.subscription = services.workflows
-                    .watch({namespace: this.state.namespace, phases: this.state.selectedPhases, labels: this.state.selectedLabels})
+                    .watch({namespace: newNamespace, phases: selectedPhases, labels: selectedLabels})
                     .map(workflowChange => {
                         const workflows = this.state.workflows;
                         if (!workflowChange) {
@@ -167,7 +181,6 @@ export class WorkflowsList extends BasePage<RouteComponentProps<any>, State> {
     }
 
     private changeFilters(namespace: string, selectedPhases: string[], selectedLabels: string[]) {
-        this.setState({namespace, selectedPhases, selectedLabels});
         const params = new URLSearchParams();
         selectedPhases.forEach(phase => {
             params.append('phase', phase);
@@ -180,7 +193,7 @@ export class WorkflowsList extends BasePage<RouteComponentProps<any>, State> {
             url += '?' + params.toString();
         }
         history.pushState(null, '', uiUrl(url));
-        this.fetchWorkflows();
+        this.fetchWorkflows(namespace, selectedPhases, selectedLabels);
     }
 
     private renderWorkflows(ctx: any) {