From bbf61a11e3e1fce76228463fa76d0b490ed67405 Mon Sep 17 00:00:00 2001
From: sshijun <sshijun@vmware.com>
Date: Thu, 17 Oct 2019 14:36:41 +0800
Subject: [PATCH] Add server paging to tag-retention sub task list

Signed-off-by: sshijun <sshijun@vmware.com>
---
 .../tag-retention.component.html              |  6 +--
 .../tag-retention/tag-retention.component.ts  | 41 ++++++++++++++-----
 .../tag-retention/tag-retention.service.ts    | 10 +++--
 3 files changed, 40 insertions(+), 17 deletions(-)

diff --git a/src/portal/src/app/project/tag-retention/tag-retention.component.html b/src/portal/src/app/project/tag-retention/tag-retention.component.html
index 9f716b8f2..6308e88bd 100644
--- a/src/portal/src/app/project/tag-retention/tag-retention.component.html
+++ b/src/portal/src/app/project/tag-retention/tag-retention.component.html
@@ -124,7 +124,7 @@
                                  (click)="openDetail(i,execution.id)">{{execution.start_time|date:'medium'}}</clr-dg-cell>
                     <clr-dg-cell class="hand" (click)="openDetail(i,execution.id)">{{execution.duration}}</clr-dg-cell>
                     <clr-dg-row-detail *ngIf="index===i">
-                        <clr-datagrid [clrDgLoading]="loadingHistories" class="w-100">
+                        <clr-datagrid (clrDgRefresh)="loadLog()" [clrDgLoading]="loadingHistories" class="w-100">
                             <clr-dg-column>{{'TAG_RETENTION.REPOSITORY' | translate}}</clr-dg-column>
                             <clr-dg-column>{{'TAG_RETENTION.STATUS' | translate}}</clr-dg-column>
                             <clr-dg-column>{{'TAG_RETENTION.RETAINED' | translate}}/{{'TAG_RETENTION.TOTAL' | translate}}</clr-dg-column>
@@ -134,7 +134,7 @@
                             <clr-dg-placeholder>
                                 {{'TAG_RETENTION.NO_HISTORY' | translate}}
                             </clr-dg-placeholder>
-                            <clr-dg-row *clrDgItems="let task of historyList" [clrDgItem]="task">
+                            <clr-dg-row *ngFor="let task of historyList" [clrDgItem]="task">
                                 <clr-dg-cell>{{task.repository}}</clr-dg-cell>
                                 <clr-dg-cell>{{task.status}}</clr-dg-cell>
                                 <clr-dg-cell>{{task.retained}}/{{task.total}}</clr-dg-cell>
@@ -150,7 +150,7 @@
             {{innerPagination.lastItem + 1 }} {{'ROBOT_ACCOUNT.OF' |
                 translate}} </span>
                                 {{innerPagination.totalItems }} {{'ROBOT_ACCOUNT.ITEMS' | translate}}
-                                <clr-dg-pagination #innerPagination [clrDgPageSize]="5"></clr-dg-pagination>
+                                <clr-dg-pagination [clrDgTotalItems]="totalLogCount" [(clrDgPage)]="currentLogPage" #innerPagination [clrDgPageSize]="logPageSize"></clr-dg-pagination>
                             </clr-dg-footer>
                         </clr-datagrid>
                     </clr-dg-row-detail>
diff --git a/src/portal/src/app/project/tag-retention/tag-retention.component.ts b/src/portal/src/app/project/tag-retention/tag-retention.component.ts
index 8f17ba961..58a38910c 100644
--- a/src/portal/src/app/project/tag-retention/tag-retention.component.ts
+++ b/src/portal/src/app/project/tag-retention/tag-retention.component.ts
@@ -68,6 +68,7 @@ export class TagRetentionComponent implements OnInit {
     retention: Retention = new Retention();
     editIndex: number;
     executionList = [];
+    executionId: number;
     historyList = [];
     loadingExecutions: boolean = true;
     loadingHistories: boolean = true;
@@ -76,6 +77,10 @@ export class TagRetentionComponent implements OnInit {
     currentPage: number = 1;
     pageSize: number = 10;
     totalCount: number = 0;
+    currentLogPage: number = 1;
+    totalLogCount: number = 0;
+    logPageSize: number = 5;
+    isDetailOpened: boolean = false;
     @ViewChild('cronScheduleComponent', {static: false})
     cronScheduleComponent: CronScheduleComponent;
     @ViewChild('addRule', {static: false}) addRuleComponent: AddRuleComponent;
@@ -255,7 +260,7 @@ export class TagRetentionComponent implements OnInit {
             this.tagRetentionService.getRunNowList(this.retentionId, this.currentPage, this.pageSize)
               .pipe(finalize(() => this.loadingExecutions = false))
               .subscribe(
-              response => {
+                  (response: any) => {
                     // Get total count
                     if (response.headers) {
                         let xHeader: string = response.headers.get("x-total-count");
@@ -322,22 +327,36 @@ export class TagRetentionComponent implements OnInit {
         }
     }
 
+    loadLog() {
+        if (this.isDetailOpened) {
+            this.loadingHistories = true;
+            this.tagRetentionService.getExecutionHistory(this.retentionId, this.executionId, this.currentLogPage, this.logPageSize)
+                .pipe(finalize(() => this.loadingHistories = false))
+                .subscribe(
+                    (response: any) => {
+                        // Get total count
+                        if (response.headers) {
+                            let xHeader: string = response.headers.get("x-total-count");
+                            if (xHeader) {
+                                this.totalLogCount = parseInt(xHeader, 0);
+                            }
+                        }
+                        this.historyList = response.body as Array<any>;
+                        TagRetentionComponent.calculateDuration(this.historyList);
+                    }, error => {
+                        this.errorHandler.error(error);
+                    });
+        }
+    }
     openDetail(index, executionId) {
         if (this.index !== index) {
             this.index = index;
             this.historyList = [];
-            this.loadingHistories = true;
-            this.tagRetentionService.getExecutionHistory(this.retentionId, executionId)
-              .pipe(finalize(() => this.loadingHistories = false))
-              .subscribe(
-                res => {
-                    this.historyList = res;
-                    TagRetentionComponent.calculateDuration(this.historyList);
-                }, error => {
-                    this.errorHandler.error(error);
-                });
+            this.executionId = executionId;
+            this.isDetailOpened = true;
         } else {
             this.index = -1;
+            this.isDetailOpened = false;
         }
     }
 
diff --git a/src/portal/src/app/project/tag-retention/tag-retention.service.ts b/src/portal/src/app/project/tag-retention/tag-retention.service.ts
index 424eab091..5f64b9dd0 100644
--- a/src/portal/src/app/project/tag-retention/tag-retention.service.ts
+++ b/src/portal/src/app/project/tag-retention/tag-retention.service.ts
@@ -117,9 +117,13 @@ export class TagRetentionService {
           .pipe(catchError(error => observableThrowError(error)), );
     }
 
-    getExecutionHistory(retentionId, executionId) {
-        return this.http.get(`/api/retentions/${retentionId}/executions/${executionId}/tasks`)
-            .pipe(map(response => response as Array<any>))
+    getExecutionHistory(retentionId, executionId, page: number, pageSize: number) {
+        let params = new HttpParams();
+        if (page && pageSize) {
+            params = params.set('page', page + '').set('page_size', pageSize + '');
+        }
+        return this.http.get<HttpResponse<Array<any>>>(`/api/retentions/${retentionId}/executions/${executionId}/tasks`,
+            buildHttpRequestOptionsWithObserveResponse(params))
             .pipe(catchError(error => observableThrowError(error)));
     }