Add paging from backend in replication task ui

Signed-off-by: Yogi_Wang <yawang@vmware.com>

src/portal/lib/src/config/gc/gc-history/gc-history.component.ts

@@ -4,6 +4,7 @@ import { GcJobViewModel } from "../gcLog";
 import { GcViewModelFactory } from "../gc.viewmodel.factory";
 import { ErrorHandler } from "../../../error-handler/index";
 import { Subscription, timer } from "rxjs";
+import { REFRESH_TIME_DIFFERENCE } from '../../../shared/shared.const';
 const JOB_STATUS = {
   PENDING: "pending",
   RUNNING: "running"
@@ -34,7 +35,7 @@ export class GcHistoryComponent implements OnInit, OnDestroy {
       this.loading = false;
       // to avoid some jobs not finished.
       if (!this.timerDelay) {
-        this.timerDelay = timer(3000, 3000).subscribe(() => {
+        this.timerDelay = timer(REFRESH_TIME_DIFFERENCE, REFRESH_TIME_DIFFERENCE).subscribe(() => {
           let count: number = 0;
           this.jobs.forEach(job => {
             if (

src/portal/lib/src/replication/replication-tasks/replication-tasks.component.html

@@ -92,7 +92,7 @@
         </span>
       </div>
     </div>
-    <clr-datagrid [(clrDgSelected)]="selectedRow" [clrDgLoading]="loading">
+    <clr-datagrid (clrDgRefresh)="clrLoadTasks($event)" [clrDgLoading]="loading">
       <clr-dg-column [clrDgSortBy]="'id'">{{'REPLICATION.TASK_ID'| translate}}</clr-dg-column>
       <clr-dg-column [clrDgField]="'resource_type'" class="resource-width">{{'REPLICATION.RESOURCE_TYPE' | translate}}</clr-dg-column>
       <clr-dg-column [clrDgField]="'src_resource'">{{'REPLICATION.SOURCE' | translate}}</clr-dg-column>
@@ -102,7 +102,7 @@
       <clr-dg-column [clrDgSortBy]="startTimeComparator">{{'REPLICATION.CREATION_TIME' | translate}}</clr-dg-column>
       <clr-dg-column [clrDgSortBy]="endTimeComparator">{{'REPLICATION.END_TIME' | translate}}</clr-dg-column>
       <clr-dg-column>{{'REPLICATION.LOGS' | translate}}</clr-dg-column>
-      <clr-dg-row *clrDgItems="let t of tasks">
+      <clr-dg-row *ngFor="let t of tasks">
         <clr-dg-cell>{{t.id}}</clr-dg-cell>
         <clr-dg-cell class="resource-width">{{t.resource_type}}</clr-dg-cell>
         <clr-dg-cell>{{t.src_resource}}</clr-dg-cell>
@@ -118,8 +118,8 @@
         </clr-dg-cell>
       </clr-dg-row>
       <clr-dg-footer>
-        <span *ngIf="pagination.totalItems">{{pagination.firstItem + 1}} - {{pagination.lastItem +1 }} {{'REPLICATION.OF' | translate}} </span>{{pagination.totalItems }} {{'REPLICATION.ITEMS' | translate}}
+        <span *ngIf="totalCount">{{pagination.firstItem + 1}} - {{pagination.lastItem +1 }} {{'REPLICATION.OF' | translate}} </span>{{totalCount }} {{'REPLICATION.ITEMS' | translate}}
-        <clr-dg-pagination #pagination [(clrDgPage)]="currentPage" [clrDgPageSize]="pageSize"></clr-dg-pagination>
+        <clr-dg-pagination #pagination [(clrDgPage)]="currentPage" [clrDgTotalItems]="totalCount" [clrDgPageSize]="pageSize"></clr-dg-pagination>
       </clr-dg-footer>
     </clr-datagrid>
   </div>

src/portal/lib/src/replication/replication-tasks/replication-tasks.component.ts

@@ -6,8 +6,9 @@ import { finalize } from "rxjs/operators";
 import { Subscription, timer } from "rxjs";
 import { ErrorHandler } from "../../error-handler/error-handler";
 import { ReplicationJob, ReplicationTasks, Comparator, ReplicationJobItem, State } from "../../service/interface";
-import { CustomComparator, DEFAULT_PAGE_SIZE, calculatePage, doFiltering, doSorting } from "../../utils";
+import { CustomComparator, DEFAULT_PAGE_SIZE } from "../../utils";
 import { RequestQueryParams } from "../../service/RequestQueryParams";
+import { REFRESH_TIME_DIFFERENCE } from '../../shared/shared.const';
 const executionStatus = 'InProgress';
 @Component({
   selector: 'replication-tasks',
@@ -18,8 +19,8 @@ export class ReplicationTasksComponent implements OnInit, OnDestroy {
   isOpenFilterTag: boolean;
   inProgress: boolean = false;
   currentPage: number = 1;
-  selectedRow: [];
   pageSize: number = DEFAULT_PAGE_SIZE;
+  totalCount: number;
   loading = true;
   searchTask: string;
   defaultFilter = "resource_type";
@@ -47,7 +48,6 @@ export class ReplicationTasksComponent implements OnInit, OnDestroy {
   ngOnInit(): void {
     this.searchTask = '';
     this.getExecutionDetail();
-    this.clrLoadTasks();
   }
 
   getExecutionDetail(): void {
@@ -67,14 +67,17 @@ export class ReplicationTasksComponent implements OnInit, OnDestroy {
 
   clrLoadPage(): void {
     if (!this.timerDelay) {
-      this.timerDelay = timer(10000, 10000).subscribe(() => {
+      this.timerDelay = timer(REFRESH_TIME_DIFFERENCE, REFRESH_TIME_DIFFERENCE).subscribe(() => {
         let count: number = 0;
-          if (this.executions['status'] === executionStatus) {
+        if (this.executions['status'] === executionStatus) {
-            count++;
+          count++;
-          }
+        }
         if (count > 0) {
           this.getExecutionDetail();
-          this.clrLoadTasks();
+          let state: State = {
+            page: {}
+          };
+          this.clrLoadTasks(state);
         } else {
           this.timerDelay.unsubscribe();
           this.timerDelay = null;
@@ -136,16 +139,30 @@ export class ReplicationTasksComponent implements OnInit, OnDestroy {
     }
   }
 
-  clrLoadTasks(): void {
+  clrLoadTasks(state: State): void {
-      this.loading = true;
+      if (!state || !state.page || !this.executionId) {
+        return;
+      }
+
       let params: RequestQueryParams = new RequestQueryParams();
+      params = params.set('page_size', this.pageSize + '').set('page', this.currentPage + '');
       if (this.searchTask && this.searchTask !== "") {
         params = params.set(this.defaultFilter, this.searchTask);
       }
+
+      this.loading = true;
       this.replicationService.getReplicationTasks(this.executionId, params)
-      .pipe(finalize(() => (this.loading = false)))
+      .pipe(finalize(() => {
+        this.loading = false;
+      }))
       .subscribe(res => {
-        this.tasks = res; // Keep the data
+        if (res.headers) {
+          let xHeader: string = res.headers.get("X-Total-Count");
+          if (xHeader) {
+            this.totalCount = parseInt(xHeader, 0);
+          }
+        }
+        this.tasks = res.body; // Keep the data
       },
       error => {
         this.errorHandler.error(error);
@@ -162,23 +179,20 @@ export class ReplicationTasksComponent implements OnInit, OnDestroy {
 
   // refresh icon
   refreshTasks(): void {
-    this.loading = true;
     this.currentPage = 1;
-    this.replicationService.getReplicationTasks(this.executionId)
+    let state: State = {
-    .subscribe(res => {
+      page: {}
-      this.tasks = res;
+    };
-      this.loading = false;
+    this.clrLoadTasks(state);
-    },
-    error => {
-      this.loading = false;
-      this.errorHandler.error(error);
-    });
   }
 
   public doSearch(value: string): void {
+    this.currentPage = 1;
     this.searchTask = value.trim();
-    this.loading = true;
+    let state: State = {
-    this.clrLoadTasks();
+      page: {}
+    };
+    this.clrLoadTasks(state);
   }
 
   openFilter(isOpen: boolean): void {

src/portal/lib/src/replication/replication.component.ts

@@ -48,7 +48,8 @@ import {
 import {
   ConfirmationTargets,
   ConfirmationButtons,
-  ConfirmationState
+  ConfirmationState,
+  REFRESH_TIME_DIFFERENCE
 } from "../shared/shared.const";
 import { ConfirmationMessage } from "../confirmation-dialog/confirmation-message";
 import { ConfirmationDialogComponent } from "../confirmation-dialog/confirmation-dialog.component";
@@ -214,7 +215,7 @@ export class ReplicationComponent implements OnInit, OnDestroy {
         this.totalCount = response.metadata.xTotalCount;
         this.jobs = response.data;
         if (!this.timerDelay) {
-          this.timerDelay = timer(10000, 10000).subscribe(() => {
+          this.timerDelay = timer(REFRESH_TIME_DIFFERENCE, REFRESH_TIME_DIFFERENCE).subscribe(() => {
             let count: number = 0;
             this.jobs.forEach(job => {
               if (

src/portal/lib/src/service/replication.service.ts

@@ -296,8 +296,7 @@ export class ReplicationDefaultService extends ReplicationService {
     }
     let url: string = `${this._replicateUrl}/executions/${executionId}/tasks`;
     return this.http
-      .get(url,
+      .get(url, buildHttpRequestOptionsWithObserveResponse(queryParams))
-        queryParams ? buildHttpRequestOptions(queryParams) : HTTP_GET_OPTIONS)
       .pipe(map(response => response as ReplicationTasks)
         , catchError(error => observableThrowError(error)));
   }

src/portal/lib/src/shared/shared.const.ts

@@ -149,3 +149,4 @@ export enum GroupType {
   LDAP_TYPE = 1,
   HTTP_TYPE = 2
 }
+export const REFRESH_TIME_DIFFERENCE = 10000;