From 1530aa119a8334887faf230e4b7a033697c83a47 Mon Sep 17 00:00:00 2001 From: Yogi_Wang Date: Fri, 9 Aug 2019 17:28:40 +0800 Subject: [PATCH] Add paging from backend in replication task ui Signed-off-by: Yogi_Wang --- .../gc/gc-history/gc-history.component.ts | 3 +- .../replication-tasks.component.html | 8 +-- .../replication-tasks.component.ts | 62 ++++++++++++------- .../src/replication/replication.component.ts | 5 +- .../lib/src/service/replication.service.ts | 3 +- src/portal/lib/src/shared/shared.const.ts | 1 + 6 files changed, 49 insertions(+), 33 deletions(-) diff --git a/src/portal/lib/src/config/gc/gc-history/gc-history.component.ts b/src/portal/lib/src/config/gc/gc-history/gc-history.component.ts index dfcc0c4e8..2a8c55c18 100644 --- a/src/portal/lib/src/config/gc/gc-history/gc-history.component.ts +++ b/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 ( diff --git a/src/portal/lib/src/replication/replication-tasks/replication-tasks.component.html b/src/portal/lib/src/replication/replication-tasks/replication-tasks.component.html index d441c799b..633f020e6 100644 --- a/src/portal/lib/src/replication/replication-tasks/replication-tasks.component.html +++ b/src/portal/lib/src/replication/replication-tasks/replication-tasks.component.html @@ -92,7 +92,7 @@ - + {{'REPLICATION.TASK_ID'| translate}} {{'REPLICATION.RESOURCE_TYPE' | translate}} {{'REPLICATION.SOURCE' | translate}} @@ -102,7 +102,7 @@ {{'REPLICATION.CREATION_TIME' | translate}} {{'REPLICATION.END_TIME' | translate}} {{'REPLICATION.LOGS' | translate}} - + {{t.id}} {{t.resource_type}} {{t.src_resource}} @@ -118,8 +118,8 @@ - {{pagination.firstItem + 1}} - {{pagination.lastItem +1 }} {{'REPLICATION.OF' | translate}} {{pagination.totalItems }} {{'REPLICATION.ITEMS' | translate}} - + {{pagination.firstItem + 1}} - {{pagination.lastItem +1 }} {{'REPLICATION.OF' | translate}} {{totalCount }} {{'REPLICATION.ITEMS' | translate}} + diff --git a/src/portal/lib/src/replication/replication-tasks/replication-tasks.component.ts b/src/portal/lib/src/replication/replication-tasks/replication-tasks.component.ts index a9984d47f..d80320319 100644 --- a/src/portal/lib/src/replication/replication-tasks/replication-tasks.component.ts +++ b/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) { - count++; - } + if (this.executions['status'] === executionStatus) { + 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 { - this.loading = true; + clrLoadTasks(state: State): void { + 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) - .subscribe(res => { - this.tasks = res; - this.loading = false; - }, - error => { - this.loading = false; - this.errorHandler.error(error); - }); + let state: State = { + page: {} + }; + this.clrLoadTasks(state); } public doSearch(value: string): void { + this.currentPage = 1; this.searchTask = value.trim(); - this.loading = true; - this.clrLoadTasks(); + let state: State = { + page: {} + }; + this.clrLoadTasks(state); } openFilter(isOpen: boolean): void { diff --git a/src/portal/lib/src/replication/replication.component.ts b/src/portal/lib/src/replication/replication.component.ts index e211af9ea..1bdbfe200 100644 --- a/src/portal/lib/src/replication/replication.component.ts +++ b/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 ( diff --git a/src/portal/lib/src/service/replication.service.ts b/src/portal/lib/src/service/replication.service.ts index 135f04b8c..3da31077f 100644 --- a/src/portal/lib/src/service/replication.service.ts +++ b/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, - queryParams ? buildHttpRequestOptions(queryParams) : HTTP_GET_OPTIONS) + .get(url, buildHttpRequestOptionsWithObserveResponse(queryParams)) .pipe(map(response => response as ReplicationTasks) , catchError(error => observableThrowError(error))); } diff --git a/src/portal/lib/src/shared/shared.const.ts b/src/portal/lib/src/shared/shared.const.ts index db48e9354..e8697f706 100644 --- a/src/portal/lib/src/shared/shared.const.ts +++ b/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;