Upstream/harbor
1
0
Fork 0
mirror of https://github.com/goharbor/harbor.git synced 2024-10-01 14:58:03 +02:00
Code Issues Projects Releases Wiki Activity

Merge pull request #8623 from jwangyangls/replication-task-paging

Browse Source 
Add paging from backend in replication task ui
This commit is contained in:
jwangyangls 2019-08-14 13:08:38 +08:00 committed by GitHub
commit b2b5d74456
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 49 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/portal/lib/src/config/gc/gc-history/gc-history.component.ts
View File

@ -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 (

8
src/portal/lib/src/replication/replication-tasks/replication-tasks.component.html
View File

@ -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}}
<clr-dg-pagination #pagination [(clrDgPage)]="currentPage" [clrDgPageSize]="pageSize"></clr-dg-pagination>
<span *ngIf="totalCount">{{pagination.firstItem + 1}} - {{pagination.lastItem +1 }} {{'REPLICATION.OF' | translate}} </span>{{totalCount }} {{'REPLICATION.ITEMS' | translate}}
<clr-dg-pagination #pagination [(clrDgPage)]="currentPage" [clrDgTotalItems]="totalCount" [clrDgPageSize]="pageSize"></clr-dg-pagination>
</clr-dg-footer>
</clr-datagrid>
</div>

62
src/portal/lib/src/replication/replication-tasks/replication-tasks.component.ts
View File

@ -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 {

5
src/portal/lib/src/replication/replication.component.ts
View File

@ -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 (

3
src/portal/lib/src/service/replication.service.ts
View File

@ -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)));
}

1
src/portal/lib/src/shared/shared.const.ts
View File

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