Fix replication tasks page cannot pagination

Signed-off-by: FangyuanCheng <fangyuanc@vmware.com>

src/portal/lib/src/create-edit-rule/create-edit-rule.component.html

@@ -121,13 +121,13 @@
               <label for="ruleDeletion" class="clr-control-label">{{'REPLICATION.DELETE_REMOTE_IMAGES' | translate}}</label>
             </clr-checkbox-wrapper>
           </div>
-          <div class="rule-width">
+          <div class="clr-form-control rule-width">
               <clr-checkbox-wrapper>
                 <input type="checkbox" clrCheckbox [checked]="true" id="enablePolicy" formControlName="enabled" class="clr-checkbox">
                 <label for="enablePolicy" class="clr-control-label">{{'REPLICATION.ENABLED' | translate}}</label>
               </clr-checkbox-wrapper>
           </div>
-          <div class="rule-width">
+          <div class="clr-form-control rule-width">
               <clr-checkbox-wrapper>
                 <input type="checkbox" clrCheckbox [checked]="true" id="overridePolicy" formControlName="override" class="clr-checkbox">
                 <label for="overridePolicy" class="clr-control-label">{{'REPLICATION.OVERRIDE' | translate}}</label>

src/portal/lib/src/list-replication-rule/list-replication-rule.component.ts

@@ -46,7 +46,7 @@ import { ErrorHandler } from "../error-handler/error-handler";
 import { CustomComparator } from "../utils";
 import { operateChanges, OperateInfo, OperationState } from "../operation/operate";
 import { OperationService } from "../operation/operation.service";
-
+const jobstatus = "InProgress";
 
 @Component({
     selector: "hbr-list-replication-rule",
@@ -204,9 +204,7 @@ export class ListReplicationRuleComponent implements OnInit, OnChanges {
                 if (ruleData.length) {
                     ruleData.forEach(job => {
                         if (
-                            job.status === "pending" ||
-                            job.status === "running" ||
-                            job.status === "retrying"
+                            job.status === jobstatus
                         ) {
                             count++;
                         }

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

@@ -91,26 +91,19 @@
         </span>
       </div>
     </div>
-    <clr-datagrid (clrDgRefresh)="clrLoadTasks($event)" [(clrDgSelected)]="selectedRow" [clrDgLoading]="loading">
+    <clr-datagrid [(clrDgSelected)]="selectedRow" [clrDgLoading]="loading">
       <clr-dg-column>{{'REPLICATION.TASK_ID'| translate}}</clr-dg-column>
-      <clr-dg-column [clrDgField]="'resource_type'">{{'REPLICATION.RESOURCE_TYPE'
-        | translate}}</clr-dg-column>
-      <clr-dg-column [clrDgField]="'src_resource'">{{'REPLICATION.SOURCE' |
-        translate}}</clr-dg-column>
-      <clr-dg-column [clrDgField]="'dst_resource'">{{'REPLICATION.DESTINATION' |
-        translate}}</clr-dg-column>
-      <clr-dg-column [clrDgField]="'operation'">{{'REPLICATION.OPERATION' |
-          translate}}</clr-dg-column>
-      <clr-dg-column [clrDgField]="'status'">{{'REPLICATION.STATUS' |
-        translate}}</clr-dg-column>
-      <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 [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>
+      <clr-dg-column [clrDgField]="'dst_resource'">{{'REPLICATION.DESTINATION' | translate}}</clr-dg-column>
+      <clr-dg-column [clrDgField]="'operation'">{{'REPLICATION.OPERATION' | translate}}</clr-dg-column>
+      <clr-dg-column [clrDgField]="'status'">{{'REPLICATION.STATUS' | translate}}</clr-dg-column>
+      <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-cell>{{t.id}}</clr-dg-cell>
-        <clr-dg-cell>{{t.resource_type}}</clr-dg-cell>
+        <clr-dg-cell class="resource-width">{{t.resource_type}}</clr-dg-cell>
         <clr-dg-cell>{{t.src_resource}}</clr-dg-cell>
         <clr-dg-cell>{{t.dst_resource}}</clr-dg-cell>
         <clr-dg-cell>{{t.operation}}</clr-dg-cell>
@@ -128,12 +121,8 @@
         </clr-dg-cell>
       </clr-dg-row>
       <clr-dg-footer>
-        <span *ngIf="pagination.totalItems">{{pagination.firstItem + 1}}
-          -
-          {{pagination.lastItem +1 }} {{'ROBOT_ACCOUNT.OF' |
-          translate}} </span>
-        {{pagination.totalItems }} {{'ROBOT_ACCOUNT.ITEMS' | translate}}
-        <clr-dg-pagination #pagination [clrDgPageSize]="pageSize" [(clrDgPage)]="currentPage" [clrDgTotalItems]="totalCount"></clr-dg-pagination>
+        <span *ngIf="pagination.totalItems">{{pagination.firstItem + 1}} - {{pagination.lastItem +1 }} {{'REPLICATION.OF' | translate}} </span>{{pagination.totalItems }} {{'REPLICATION.ITEMS' | translate}}
+        <clr-dg-pagination #pagination [(clrDgPage)]="currentPage" [clrDgPageSize]="pageSize"></clr-dg-pagination>
       </clr-dg-footer>
     </clr-datagrid>
   </div>

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

@@ -105,6 +105,9 @@
         }
         clr-datagrid {
             margin-top: 20px;
+            .resource-width {
+                width: 150px;
+            }
         }
     }
 }

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

@@ -20,12 +20,9 @@ const taskStatus: any = {
 })
 export class ReplicationTasksComponent implements OnInit, OnDestroy {
   isOpenFilterTag: boolean;
-  selectedRow: [];
   currentPage: number = 1;
-  currentPagePvt: number = 0;
-  totalCount: number = 0;
+  selectedRow: [];
   pageSize: number = DEFAULT_PAGE_SIZE;
-  currentState: State;
   loading = true;
   searchTask: string;
   defaultFilter = "resource_type";
@@ -53,6 +50,7 @@ export class ReplicationTasksComponent implements OnInit, OnDestroy {
   ngOnInit(): void {
     this.searchTask = '';
     this.getExecutionDetail();
+    this.clrLoadTasks();
   }
 
   getExecutionDetail(): void {
@@ -120,30 +118,16 @@ export class ReplicationTasksComponent implements OnInit, OnDestroy {
     }
   }
 
-  clrLoadTasks(state: State): void {
-      if (!state || !state.page) {
-        return;
-      }
-      // Keep it for future filter
-      this.currentState = state;
-
-      let pageNumber: number = calculatePage(state);
-      if (pageNumber !== this.currentPagePvt) {
-        // load data
-        let params: RequestQueryParams = new RequestQueryParams();
-        params.set("page", '' + pageNumber);
-        params.set("page_size", '' + this.pageSize);
-        if (this.searchTask && this.searchTask !== "") {
-            params.set(this.defaultFilter, this.searchTask);
-        }
-
+  clrLoadTasks(): void {
       this.loading = true;
+      let params: RequestQueryParams = new RequestQueryParams();
+      if (this.searchTask && this.searchTask !== "") {
+        params.set(this.defaultFilter, this.searchTask);
+      }
       this.replicationService.getReplicationTasks(this.executionId, params)
       .pipe(finalize(() => (this.loading = false)))
       .subscribe(res => {
-        this.totalCount = res.length;
         this.tasks = res; // Keep the data
-        this.taskItem = this.tasks.filter(tasks => tasks.resource_type !== "");
         if (!this.timerDelay) {
           this.timerDelay = timer(10000, 10000).subscribe(() => {
             let count: number = 0;
@@ -157,31 +141,17 @@ export class ReplicationTasksComponent implements OnInit, OnDestroy {
               }
             });
             if (count > 0) {
-              this.clrLoadTasks(this.currentState);
+              this.clrLoadTasks();
             } else {
               this.timerDelay.unsubscribe();
               this.timerDelay = null;
             }
           });
         }
-        this.taskItem = doFiltering<ReplicationTasks>(this.taskItem, state);
-
-        this.taskItem = doSorting<ReplicationTasks>(this.taskItem, state);
-
-        this.currentPagePvt = pageNumber;
       },
       error => {
         this.errorHandler.error(error);
       });
-      } else {
-
-        this.taskItem = this.tasks.filter(tasks => tasks.resource_type !== "");
-        // Do customized filter
-        this.taskItem = doFiltering<ReplicationTasks>(this.taskItem, state);
-
-        // Do customized sorting
-        this.taskItem = doSorting<ReplicationTasks>(this.taskItem, state);
-      }
   }
   onBack(): void {
     this.router.navigate(["harbor", "replications"]);
@@ -194,8 +164,8 @@ export class ReplicationTasksComponent implements OnInit, OnDestroy {
 
   // refresh icon
   refreshTasks(): void {
-    this.searchTask = '';
     this.loading = true;
+    this.currentPage = 1;
     this.replicationService.getReplicationTasks(this.executionId)
     .subscribe(res => {
       this.tasks = res;
@@ -213,23 +183,7 @@ export class ReplicationTasksComponent implements OnInit, OnDestroy {
     }
     this.searchTask = value.trim();
     this.loading = true;
-    this.currentPage = 1;
-    if (this.currentPagePvt === 1) {
-        // Force reloading
-        let st: State = this.currentState;
-        if (!st) {
-            st = {
-                page: {}
-            };
-        }
-        st.page.from = 0;
-        st.page.to = this.pageSize - 1;
-        st.page.size = this.pageSize;
-
-        this.currentPagePvt = 0;
-
-        this.clrLoadTasks(st);
-    }
+    this.clrLoadTasks();
   }
 
   openFilter(isOpen: boolean): void {