Workflows backend filtering/sorting - UX (#584)

* Workflows backend filtering/sorting

Author: jozefbakus

ui/src/app/components/workflows/workflows-home/workflows-home.component.html

@@ -73,7 +73,7 @@ <h3 class="modal-title">Upload workflow</h3>
   </div>
 </clr-modal>
 
-<clr-datagrid [(clrDgSelected)]="selected" (clrDgRefresh)="onClarityDgRefresh($event)">
+<clr-datagrid [(clrDgSelected)]="selected"  (clrDgRefresh)="onClarityDgRefresh($event)" [clrDgLoading]="loading">
 
   <clr-dg-action-bar>
     <clr-dropdown>
@@ -170,7 +170,7 @@ <h3 class="modal-title">Upload workflow</h3>
 
   </clr-dg-column>
 
-  <clr-dg-row *clrDgItems="let workflow of workflows" [clrDgItem]="workflow">
+  <clr-dg-row *ngFor="let workflow of workflows" [clrDgItem]="workflow">
     <clr-dg-action-overflow>
       <button type="button" class="action-item" (click)="showWorkflow(workflow.id)">
         <clr-icon shape="eye"></clr-icon>
@@ -218,5 +218,12 @@ <h3 class="modal-title">Upload workflow</h3>
       {{workflow.isActive ? 'Yes' : 'No'}}
     </clr-dg-cell>
   </clr-dg-row>
+  <clr-dg-footer>
+    <clr-dg-pagination #pagination [clrDgPageSize]="pageSize" [clrDgPage]="page"
+                       [clrDgTotalItems]="total"></clr-dg-pagination>
+    <clr-dg-page-size [clrPageSizeOptions]="[50,100,150,200,250,300]">Workflows per page</clr-dg-page-size>
+    {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
+    of {{total}} workflows
+  </clr-dg-footer>
 </clr-datagrid>
 

ui/src/app/components/workflows/workflows-home/workflows-home.component.spec.ts

@@ -17,7 +17,6 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { WorkflowsHomeComponent } from './workflows-home.component';
 import { provideMockStore } from '@ngrx/store/testing';
-import { ProjectModelFactory } from '../../../models/project.model';
 import { WorkflowModelFactory } from '../../../models/workflow.model';
 import { ConfirmationDialogService } from '../../../services/confirmation-dialog/confirmation-dialog.service';
 import { Store } from '@ngrx/store';
@@ -30,12 +29,12 @@ import { ClrDatagridStateInterface } from '@clr/angular';
 import {
   DeleteWorkflow,
   SwitchWorkflowActiveState,
-  SetWorkflowsSort,
   LoadJobsForRun,
   ExportWorkflows,
   SetWorkflowFile,
   ImportWorkflows,
   RunWorkflows,
+  SearchWorkflows,
 } from '../../../stores/workflows/workflows.actions';
 
 describe('WorkflowsHomeComponent', () => {
@@ -47,13 +46,19 @@ describe('WorkflowsHomeComponent', () => {
 
   const initialAppState = {
     workflows: {
-      workflows: [
-        WorkflowModelFactory.create('workflowOne', undefined, undefined, undefined, undefined, undefined),
-        WorkflowModelFactory.create('workflowTwo', undefined, undefined, undefined, undefined, undefined),
-      ],
+      workflowsSearch: {
+        loading: true,
+        workflows: [
+          WorkflowModelFactory.create('workflowOne', undefined, undefined, undefined, undefined, undefined),
+          WorkflowModelFactory.create('workflowTwo', undefined, undefined, undefined, undefined, undefined),
+        ],
+        total: 2,
+        searchRequest: undefined,
+      },
+      workflowAction: {
+        loading: false,
+      },
     },
-    workflowsSort: undefined,
-    workflowsFilters: undefined,
   };
 
   beforeEach(
@@ -83,9 +88,13 @@ describe('WorkflowsHomeComponent', () => {
     waitForAsync(() => {
       fixture.detectChanges();
       fixture.whenStable().then(() => {
-        expect(underTest.workflows).toEqual([...initialAppState.workflows.workflows]);
-        expect(underTest.sort).toEqual(initialAppState.workflowsSort);
-        expect(underTest.filters).toBeUndefined();
+        expect(underTest.workflows).toEqual([...initialAppState.workflows.workflowsSearch.workflows]);
+        expect(underTest.total).toEqual(initialAppState.workflows.workflowsSearch.total);
+        expect(underTest.sort).toEqual(undefined);
+        expect(underTest.filters).toEqual([]);
+        expect(underTest.pageFrom).toEqual(0);
+        expect(underTest.pageSize).toEqual(100);
+        expect(underTest.page).toEqual(0 / 100 + 1);
       });
     }),
   );
@@ -291,7 +300,6 @@ describe('WorkflowsHomeComponent', () => {
       subject.next(true);
 
       fixture.detectChanges();
-      expect(underTest.ignoreRefresh).toBeTrue();
       fixture.whenStable().then(() => {
         expect(storeSpy).toHaveBeenCalled();
         expect(storeSpy).toHaveBeenCalledWith(new DeleteWorkflow(id));
@@ -312,7 +320,6 @@ describe('WorkflowsHomeComponent', () => {
       subject.next(false);
 
       fixture.detectChanges();
-      expect(underTest.ignoreRefresh).toBeTrue();
       fixture.whenStable().then(() => {
         expect(storeSpy).toHaveBeenCalledTimes(0);
       });
@@ -333,7 +340,6 @@ describe('WorkflowsHomeComponent', () => {
       subject.next(true);
 
       fixture.detectChanges();
-      expect(underTest.ignoreRefresh).toBeTrue();
       fixture.whenStable().then(() => {
         expect(storeSpy).toHaveBeenCalled();
         expect(storeSpy).toHaveBeenCalledWith(
@@ -360,7 +366,6 @@ describe('WorkflowsHomeComponent', () => {
       subject.next(false);
 
       fixture.detectChanges();
-      expect(underTest.ignoreRefresh).toBeFalse();
       fixture.whenStable().then(() => {
         expect(storeSpy).toHaveBeenCalledTimes(0);
       });
@@ -444,31 +449,31 @@ describe('WorkflowsHomeComponent', () => {
 
   describe('onClarityDgRefresh', () => {
     it(
-      'should dispatch SetWorkflowsSort when ignoreRefresh is false',
+      'should dispatch SearchWorkflows when ignoreRefresh is false',
       waitForAsync(() => {
         underTest.ignoreRefresh = false;
+        underTest.loading = true;
+        underTest.filters = [];
 
         const subject = new Subject<boolean>();
         const storeSpy = spyOn(store, 'dispatch');
-        const state: ClrDatagridStateInterface = {};
 
-        underTest.onClarityDgRefresh(state);
+        underTest.refresh();
         subject.next(true);
 
         fixture.detectChanges();
-        expect(underTest.ignoreRefresh).toBeFalse();
-        expect(underTest.sort).toBeUndefined();
-        expect(underTest.filters).toBeUndefined();
 
         fixture.whenStable().then(() => {
           expect(storeSpy).toHaveBeenCalled();
-          expect(storeSpy).toHaveBeenCalledWith(new SetWorkflowsSort(underTest.sort));
+          expect(storeSpy).toHaveBeenCalledWith(
+            new SearchWorkflows({ from: 0, size: 0, sort: undefined, containsFilterAttributes: [], booleanFilterAttributes: [] }),
+          );
         });
       }),
     );
 
     it(
-      'onClarityDgRefresh() should not dispatch SetWorkflowsSort and SetWorkflowsFilters when ignoreRefresh is true',
+      'onClarityDgRefresh() should not dispatch SearchWorkflows when ignoreRefresh is true',
       waitForAsync(() => {
         underTest.ignoreRefresh = true;
 

ui/src/app/components/workflows/workflows-home/workflows-home.component.ts

@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import { Component, OnDestroy, OnInit, QueryList, ViewChildren } from '@angular/core';
+import { AfterViewInit, Component, OnDestroy, OnInit, QueryList, ViewChildren } from '@angular/core';
 import { Subject, Subscription } from 'rxjs';
 import { AppState, selectWorkflowState } from '../../../stores/app.reducers';
 import { WorkflowModel } from '../../../models/workflow.model';
@@ -24,9 +24,8 @@ import {
   ImportWorkflows,
   LoadJobsForRun,
   RunWorkflows,
+  SearchWorkflows,
   SetWorkflowFile,
-  SetWorkflowsFilters,
-  SetWorkflowsSort,
   UpdateWorkflowsIsActive,
 } from '../../../stores/workflows/workflows.actions';
 import { ConfirmationDialogTypes } from '../../../constants/confirmationDialogTypes.constants';
@@ -38,24 +37,36 @@ import { ClrDatagridColumn, ClrDatagridStateInterface } from '@clr/angular';
 import { SortAttributesModel } from '../../../models/search/sortAttributes.model';
 import { filter } from 'rxjs/operators';
 import { workflowsHomeColumns } from 'src/app/constants/workflow.constants';
+import { TableSearchRequestModel } from '../../../models/search/tableSearchRequest.model';
+import { ContainsFilterAttributes } from '../../../models/search/containsFilterAttributes.model';
+import { BooleanFilterAttributes } from '../../../models/search/booleanFilterAttributes.model';
 
 @Component({
   selector: 'app-workflows-home',
   templateUrl: './workflows-home.component.html',
   styleUrls: ['./workflows-home.component.scss'],
 })
-export class WorkflowsHomeComponent implements OnInit, OnDestroy {
+export class WorkflowsHomeComponent implements OnInit, AfterViewInit, OnDestroy {
   @ViewChildren(ClrDatagridColumn) columns: QueryList<ClrDatagridColumn>;
 
   confirmationDialogServiceSubscription: Subscription = null;
   runWorkflowDialogSubscription: Subscription = null;
   workflowsSubscription: Subscription = null;
+  loadingSubscription: Subscription = null;
   routerSubscription: Subscription = null;
   workflows: WorkflowModel[] = [];
   absoluteRoutes = absoluteRoutes;
   workflowsHomeColumns = workflowsHomeColumns;
   selected: WorkflowModel[] = [];
 
+  loading = true;
+  loadingAction = false;
+
+  page = 1;
+  total = 0;
+  pageFrom = 0;
+  pageSize = 0;
+
   removeWorkflowFilterSubject: Subject<any> = new Subject();
   sort: SortAttributesModel = undefined;
   filters: any[] = undefined;
@@ -74,9 +85,29 @@ export class WorkflowsHomeComponent implements OnInit, OnDestroy {
 
   ngOnInit(): void {
     this.workflowsSubscription = this.store.select(selectWorkflowState).subscribe((state) => {
-      this.workflows = state.workflows;
-      this.sort = state.workflowsSort;
-      this.filters = state.workflowsFilters;
+      this.workflows = state.workflowsSearch.workflows;
+      this.total = state.workflowsSearch.total;
+      this.sort = state.workflowsSearch.searchRequest?.sort;
+      this.filters = [
+        ...(state.workflowsSearch.searchRequest?.containsFilterAttributes || []),
+        ...(state.workflowsSearch.searchRequest?.booleanFilterAttributes || []),
+      ];
+      this.pageFrom = state.workflowsSearch.searchRequest?.from ? state.workflowsSearch.searchRequest?.from : 0;
+      this.pageSize = state.workflowsSearch.searchRequest?.size ? state.workflowsSearch.searchRequest?.size : 100;
+      this.page = this.pageFrom / this.pageSize + 1;
+
+      if (this.loadingAction == true && state.workflowAction.loading == false) {
+        this.loadingAction = false;
+        this.refresh();
+      } else {
+        this.loadingAction = state.workflowAction.loading;
+      }
+    });
+  }
+
+  ngAfterViewInit(): void {
+    this.loadingSubscription = this.store.select(selectWorkflowState).subscribe((state) => {
+      this.loading = state.workflowsSearch.loading;
     });
   }
 
@@ -95,7 +126,6 @@ export class WorkflowsHomeComponent implements OnInit, OnDestroy {
     this.confirmationDialogServiceSubscription = this.confirmationDialogService
       .confirm(ConfirmationDialogTypes.YesOrNo, texts.BULK_RUN_WORKFLOWS_TITLE, texts.BULK_RUN_WORKFLOWS_CONTENT(selected.length))
       .subscribe((confirmed) => {
-        this.ignoreRefresh = true;
         if (confirmed) this.store.dispatch(new RunWorkflows(selected.map((workflow) => workflow.id)));
       });
   }
@@ -146,7 +176,6 @@ export class WorkflowsHomeComponent implements OnInit, OnDestroy {
     this.confirmationDialogServiceSubscription = this.confirmationDialogService
       .confirm(ConfirmationDialogTypes.Delete, texts.DELETE_WORKFLOW_CONFIRMATION_TITLE, texts.DELETE_WORKFLOW_CONFIRMATION_CONTENT)
       .subscribe((confirmed) => {
-        this.ignoreRefresh = true;
         if (confirmed) this.store.dispatch(new DeleteWorkflow(id));
       });
   }
@@ -160,7 +189,6 @@ export class WorkflowsHomeComponent implements OnInit, OnDestroy {
       )
       .subscribe((confirmed) => {
         if (confirmed) {
-          this.ignoreRefresh = true;
           this.store.dispatch(new SwitchWorkflowActiveState({ id: id, currentActiveState: currentActiveState }));
         }
       });
@@ -177,16 +205,28 @@ export class WorkflowsHomeComponent implements OnInit, OnDestroy {
   onClarityDgRefresh(state: ClrDatagridStateInterface) {
     if (!this.ignoreRefresh) {
       this.sort = state.sort ? new SortAttributesModel(state.sort.by as string, state.sort.reverse ? -1 : 1) : undefined;
-      this.store.dispatch(new SetWorkflowsSort(this.sort));
+      this.pageFrom = state.page.from < 0 ? 0 : state.page.from;
+      this.pageSize = state.page.size;
       this.filters = state.filters ? state.filters : [];
-      this.store.dispatch(new SetWorkflowsFilters(this.filters));
+      this.refresh();
     }
   }
 
+  refresh() {
+    const searchRequestModel: TableSearchRequestModel = {
+      from: this.pageFrom,
+      size: this.pageSize,
+      sort: this.sort,
+      containsFilterAttributes: this.filters.filter((f) => f instanceof ContainsFilterAttributes).map((f) => f as ContainsFilterAttributes),
+      booleanFilterAttributes: this.filters.filter((f) => f instanceof BooleanFilterAttributes).map((f) => f as BooleanFilterAttributes),
+    };
+    this.store.dispatch(new SearchWorkflows(searchRequestModel));
+  }
+
   getFilter(name: string): any | undefined {
     let filter = undefined;
     if (this.filters) {
-      filter = this.filters.find((filter) => filter.field == name);
+      filter = this.filters.find((filter) => filter?.field == name);
     }
 
     return filter && filter.value ? filter.value : undefined;
@@ -197,7 +237,8 @@ export class WorkflowsHomeComponent implements OnInit, OnDestroy {
   }
 
   clearFilters() {
-    this.removeWorkflowFilterSubject.next();
+    this.filters = [];
+    this.refresh();
   }
 
   clearSort() {
@@ -236,7 +277,6 @@ export class WorkflowsHomeComponent implements OnInit, OnDestroy {
       )
       .subscribe((confirmed) => {
         if (confirmed) {
-          this.ignoreRefresh = true;
           this.store.dispatch(new UpdateWorkflowsIsActive({ ids: ids, isActiveNewValue: isActiveNewValue }));
         }
       });
@@ -247,5 +287,6 @@ export class WorkflowsHomeComponent implements OnInit, OnDestroy {
     !!this.confirmationDialogServiceSubscription && this.confirmationDialogServiceSubscription.unsubscribe();
     !!this.runWorkflowDialogSubscription && this.runWorkflowDialogSubscription.unsubscribe();
     !!this.routerSubscription && this.routerSubscription.unsubscribe();
+    !!this.loadingSubscription && this.loadingSubscription.unsubscribe();
   }
 }

ui/src/app/constants/api.constants.ts

@@ -25,6 +25,7 @@ export const api = {
 
   GET_PROJECTS: '/workflows/projects',
   GET_WORKFLOWS: '/workflows',
+  SEARCH_WORKFLOWS: '/workflows/search',
   GET_WORKFLOW: '/workflow',
   DELETE_WORKFLOW: '/workflows',
   EXPORT_WORKFLOWS: '/workflows/export',

ui/src/app/constants/texts.constants.ts

@@ -15,6 +15,7 @@
 
 export const texts = {
   LOAD_WORKFLOWS_FAILURE_NOTIFICATION: "Sorry, workflows couldn't be loaded. Please try again.",
+  SEARCH_WORKFLOWS_FAILURE_NOTIFICATION: "Sorry, workflows couldn't be loaded. Please try again.",
 
   DELETE_WORKFLOW_CONFIRMATION_TITLE: 'Delete workflow',
   DELETE_WORKFLOW_CONFIRMATION_CONTENT: 'Are you sure you want to delete this workflow? The operation cannot be reverted.',

ui/src/app/services/workflow/workflow.service.spec.ts

@@ -19,8 +19,10 @@ import { HttpClientTestingModule, HttpTestingController } from '@angular/common/
 import { api } from '../../constants/api.constants';
 import { WorkflowService } from './workflow.service';
 import { ProjectModelFactory } from '../../models/project.model';
-import { WorkflowModelFactory } from '../../models/workflow.model';
+import { WorkflowModel, WorkflowModelFactory } from '../../models/workflow.model';
 import { WorkflowJoinedModelFactory } from '../../models/workflowJoined.model';
+import { TableSearchResponseModel } from '../../models/search/tableSearchResponse.model';
+import { TableSearchRequestModelFactory } from '../../models/search/tableSearchRequest.model';
 
 describe('WorkflowService', () => {
   let underTest: WorkflowService;
@@ -73,6 +75,21 @@ describe('WorkflowService', () => {
     req.flush([...workflows]);
   });
 
+  it('searchWorkflows() should return workflows search response', () => {
+    const workflows = [WorkflowModelFactory.create('workflowName1', true, 'projectName1', new Date(Date.now()), new Date(Date.now()), 0)];
+    const searchResponseModel = new TableSearchResponseModel<WorkflowModel>(workflows, 1);
+    const request = TableSearchRequestModelFactory.create(0, 100);
+
+    underTest.searchWorkflows(request).subscribe(
+      (data) => expect(data).toEqual(searchResponseModel),
+      (error) => fail(error),
+    );
+
+    const req = httpTestingController.expectOne(api.SEARCH_WORKFLOWS);
+    expect(req.request.method).toEqual('POST');
+    req.flush(searchResponseModel);
+  });
+
   it('getWorkflow() should return workflow data', () => {
     const workflow = WorkflowJoinedModelFactory.create('name', true, 'project', undefined, undefined, undefined, 0);