Upstream/harbor
1
0
Fork 0
mirror of https://github.com/goharbor/harbor.git synced 2025-02-05 06:21:22 +01:00
Code Issues Projects Releases Wiki Activity

Add pagination support to p2p policy list (#14742)

Browse Source 
Signed-off-by: AllForNothing <sshijun@vmware.com>
This commit is contained in:
Will Sun 2021-04-26 10:25:10 +08:00 committed by GitHub
parent 81b26418c1
commit 2ffa6580fa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 56 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/portal/src/app/base/project/p2p-provider/policy/policy.component.html
View File

@ -8,7 +8,7 @@
</clr-tooltip-content>
</clr-tooltip>
</h4>
<clr-datagrid (clrDgSingleSelectedChange)="refreshJobs($event)" [clrDgLoading]="loading" [(clrDgSingleSelected)]="selectedRow">
<clr-datagrid (clrDgRefresh)="getPolicies($event)" (clrDgSingleSelectedChange)="refreshJobs($event)" [clrDgLoading]="loading" [(clrDgSingleSelected)]="selectedRow">
<clr-dg-action-bar>
<div class="clr-row">
<div class="clr-col-7">
@ -77,15 +77,15 @@
</clr-dg-action-bar>
<clr-dg-column [clrDgField]="'name'">{{'P2P_PROVIDER.NAME' | translate}}</clr-dg-column>
<clr-dg-column>{{'P2P_PROVIDER.ENABLED' | translate}}</clr-dg-column>
<clr-dg-column [clrDgField]="'provider_name'">{{'P2P_PROVIDER.PROVIDER' | translate}}</clr-dg-column>
<clr-dg-column>{{'P2P_PROVIDER.PROVIDER' | translate}}</clr-dg-column>
<clr-dg-column>{{'P2P_PROVIDER.FILTERS' | translate}}</clr-dg-column>
<clr-dg-column>{{'P2P_PROVIDER.TRIGGER' | translate}}</clr-dg-column>
<clr-dg-column [clrDgSortBy]="creationTimeComparator">{{'P2P_PROVIDER.CREATED' | translate}}</clr-dg-column>
<clr-dg-column [clrDgSortBy]="'creation_time'">{{'P2P_PROVIDER.CREATED' | translate}}</clr-dg-column>
<clr-dg-column>{{'P2P_PROVIDER.DESCRIPTION' | translate}}</clr-dg-column>
<clr-dg-placeholder>
{{'P2P_PROVIDER.NO_POLICY' | translate}}
</clr-dg-placeholder>
<clr-dg-row *clrDgItems="let p of policyList" [clrDgItem]="p">
<clr-dg-row *ngFor="let p of policyList" [clrDgItem]="p">
<clr-dg-cell>{{p.name}}</clr-dg-cell>
<clr-dg-cell>
<div *ngIf="p.enabled" class="icon-wrap">
@ -144,9 +144,10 @@
<clr-dg-cell>{{p.description}}</clr-dg-cell>
</clr-dg-row>
<clr-dg-footer>
<clr-dg-pagination [clrDgPageSize]="10">
<clr-dg-pagination #pagination [clrDgPageSize]="policyPageSize" [(clrDgPage)]="policyPage" [clrDgTotalItems]="totalPolicy">
<clr-dg-page-size [clrPageSizeOptions]="[10,25,50]">{{"PAGINATION.PAGE_SIZE" | translate}}</clr-dg-page-size>
<span *ngIf="policyList?.length > 0">1 - {{policyList?.length}} {{'WEBHOOK.OF' | translate}} </span> {{policyList?.length}} {{'WEBHOOK.ITEMS' | translate}}
<span *ngIf="totalPolicy">{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} {{'DESTINATION.OF' | translate}}</span>
{{totalPolicy}} {{'DESTINATION.ITEMS' | translate}}
</clr-dg-pagination>
</clr-dg-footer>
</clr-datagrid>

10
src/portal/src/app/base/project/p2p-provider/policy/policy.component.spec.ts
View File

@ -18,6 +18,8 @@ import { AppConfigService } from '../../../../services/app-config.service';
import { ErrorHandler } from '../../../../shared/units/error-handler';
import { InlineAlertComponent } from "../../../../shared/components/inline-alert/inline-alert.component";
import { SharedTestingModule } from "../../../../shared/shared.module";
import { HttpHeaders, HttpResponse } from "@angular/common/http";
import { Registry } from "../../../../../../ng-swagger-gen/models/registry";
describe('PolicyComponent', () => {
let component: PolicyComponent;
@ -98,8 +100,12 @@ describe('PolicyComponent', () => {
};
const mockPreheatService = {
ListPolicies: () => {
return of([policy1, policy2]).pipe(delay(0));
ListPoliciesResponse: () => {
const response: HttpResponse<Array<Registry>> = new HttpResponse<Array<Registry>>({
headers: new HttpHeaders({'x-total-count': [policy1, policy2].length.toString()}),
body: [policy1, policy2]
});
return of(response).pipe(delay(0));
},
ListProvidersUnderProject() {
return of(providers).pipe(delay(0));

50
src/portal/src/app/base/project/p2p-provider/policy/policy.component.ts
View File

@ -17,10 +17,9 @@ import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
import { MessageHandlerService } from '../../../../shared/services/message-handler.service';
import { Project } from '../../project';
import { clone, CustomComparator, DEFAULT_PAGE_SIZE } from '../../../../shared/units/utils';
import { clone, DEFAULT_PAGE_SIZE, getSortingString } from '../../../../shared/units/utils';
import { forkJoin, Observable, Subject, Subscription } from 'rxjs';
import {
ClrDatagridComparatorInterface,
UserPermissionService,
USERSTATICPERMISSION
} from '../../../../shared/services';
@ -61,7 +60,7 @@ export class PolicyComponent implements OnInit, OnDestroy {
policyList: PreheatPolicy[] = [];
providers: ProviderUnderProject[] = [];
metadata: any;
loading: boolean = false;
loading: boolean = true;
hasCreatPermission: boolean = false;
hasUpdatePermission: boolean = false;
hasDeletePermission: boolean = false;
@ -71,7 +70,6 @@ export class PolicyComponent implements OnInit, OnDestroy {
selectedExecutionRow: Execution;
jobsLoading: boolean = false;
stopLoading: boolean = false;
creationTimeComparator: ClrDatagridComparatorInterface<Execution> = new CustomComparator<Execution>("creation_time", "date");
executionList: Execution[] = [];
currentExecutionPage: number = 1;
pageSize: number = DEFAULT_PAGE_SIZE;
@ -87,6 +85,10 @@ export class PolicyComponent implements OnInit, OnDestroy {
routerSub: Subscription;
scrollSub: Subscription;
scrollTop: number;
policyPageSize: number = 10;
policyPage: number = 1;
totalPolicy: number = 0;
state: ClrDatagridStateInterface;
constructor(
private route: ActivatedRoute,
private router: Router,
@ -125,7 +127,6 @@ export class PolicyComponent implements OnInit, OnDestroy {
this.projectName = project.name;
}
this.getPermissions();
this.refresh();
}
ngOnDestroy(): void {
@ -181,16 +182,47 @@ export class PolicyComponent implements OnInit, OnDestroy {
refresh() {
this.selectedRow = null;
this.getPolicies();
this.policyPage = 1;
this.totalPolicy = 0;
this.getPolicies(this.state);
}
getPolicies() {
getPolicies(state?: ClrDatagridStateInterface) {
if (state) {
this.state = state;
}
if (state && state.page) {
this.pageSize = state.page.size;
}
let q: string;
if (state && state.filters && state.filters.length) {
q = encodeURIComponent(`${state.filters[0].property}=~${state.filters[0].value}`);
}
let sort: string;
if (state && state.sort && state.sort.by) {
sort = getSortingString(state);
} else { // sort by creation_time desc by default
sort = `-creation_time`;
}
this.loading = true;
this.preheatService.ListPolicies({projectName: this.projectName})
this.preheatService.ListPoliciesResponse({
projectName: this.projectName,
sort: sort,
q: q,
page: this.policyPage,
pageSize: this.policyPageSize
})
.pipe(finalize(() => (this.loading = false)))
.subscribe(
response => {
this.policyList = response;
// Get total count
if (response.headers) {
let xHeader: string = response.headers.get("X-Total-Count");
if (xHeader) {
this.totalPolicy = parseInt(xHeader, 0);
}
}
this.policyList = response.body || [];
},
error => {
this.messageHandlerService.handleError(error);