Add pagination to replication rules searching (#14464)

Signed-off-by: AllForNothing <sshijun@vmware.com>
This commit is contained in:
Will Sun 2021-03-17 14:32:45 +08:00 committed by GitHub
parent 6fe9ec4ede
commit f0b241c695
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 17 additions and 15 deletions

View File

@ -53,13 +53,13 @@
<clr-dg-cell>{{p.name}}</clr-dg-cell>
<clr-dg-cell class="status-width">
<div [ngSwitch]="p.enabled">
<clr-tooltip *ngSwitchCase="false" class="tooltip-lg">
<clr-icon clrTooltipTrigger shape="exclamation-triangle" class="is-warning text-alignment" size="22"></clr-icon>Disabled
<clr-tooltip-content clrPosition="top-right" clrSize="xs" *clrIfOpen>
<span>{{'REPLICATION.RULE_DISABLED' | translate}}</span>
</clr-tooltip-content>
</clr-tooltip>
<div *ngSwitchCase="true" ><clr-icon shape="success-standard" class="is-success text-alignment" size="18"></clr-icon> Enabled</div>
<clr-tooltip *ngSwitchCase="false" class="tooltip-lg">
<clr-icon clrTooltipTrigger shape="exclamation-triangle" class="is-warning text-alignment" size="22"></clr-icon>Disabled
<clr-tooltip-content clrPosition="top-right" clrSize="xs" *clrIfOpen>
<span>{{'REPLICATION.RULE_DISABLED' | translate}}</span>
</clr-tooltip-content>
</clr-tooltip>
<div *ngSwitchCase="true" ><clr-icon shape="success-standard" class="is-success text-alignment" size="18"></clr-icon> Enabled</div>
</div>
</clr-dg-cell>
<clr-dg-cell class="col-width">
@ -73,8 +73,8 @@
</clr-signpost-content>
</clr-signpost>
</clr-dg-cell>
<clr-dg-cell class="col-width">
{{p.src_registry && p.src_registry.id > 0 ? 'pull-based' : 'push-based'}}
<clr-dg-cell class="col-width">
{{p.src_registry && p.src_registry.id > 0 ? 'pull-based' : 'push-based'}}
</clr-dg-cell>
<clr-dg-cell class="min-width">
{{p.dest_registry ? p.dest_registry.name : ''}} : {{p.dest_namespace? p.dest_namespace: '-'}}

View File

@ -52,6 +52,7 @@ export class ListReplicationRuleComponent {
@Input() hasUpdateReplicationPermission: boolean;
@Input() hasDeleteReplicationPermission: boolean;
@Input() hasExecuteReplicationPermission: boolean;
@Input() searchString: string;
@Output() selectOne = new EventEmitter<ReplicationRule>();
@Output() editOne = new EventEmitter<ReplicationRule>();
@Output() toggleOne = new EventEmitter<ReplicationRule>();
@ -68,7 +69,6 @@ export class ListReplicationRuleComponent {
page: number = 1;
pageSize: number = 5;
totalCount: number = 0;
ruleName: string = "";
loading: boolean = true;
constructor(private replicationService: ReplicationService,
@ -232,7 +232,7 @@ export class ListReplicationRuleComponent {
}
this.loading = true;
this.replicationService.getReplicationRulesResponse(
this.ruleName,
this.searchString,
this.page,
this.pageSize)
.pipe(finalize(() => this.loading = false))
@ -255,7 +255,7 @@ export class ListReplicationRuleComponent {
this.page = 1;
this.totalCount = 0;
this.selectedRow = null;
this.ruleName = "";
this.searchString = null;
this.clrLoad();
}
isHelmHub(srcRegistry: any): boolean {

View File

@ -17,6 +17,7 @@
[hasUpdateReplicationPermission]="hasUpdateReplicationPermission"
[hasDeleteReplicationPermission]="hasDeleteReplicationPermission"
[hasExecuteReplicationPermission]="hasExecuteReplicationPermission"
[searchString]="filterComponent?.currentValue"
></hbr-list-replication-rule>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 jobList" [hidden]='hiddenJobList'>

View File

@ -168,7 +168,8 @@ export class ReplicationComponent implements OnInit, OnDestroy {
switchMap( ruleName => {
this.listReplicationRule.loading = true;
this.listReplicationRule.page = 1;
return this.replicationService.getReplicationRulesResponse(ruleName);
return this.replicationService
.getReplicationRulesResponse(ruleName, this.listReplicationRule.page, this.listReplicationRule.pageSize);
})
).subscribe(response => {
this.hideJobs();
@ -176,7 +177,7 @@ export class ReplicationComponent implements OnInit, OnDestroy {
if (response.headers) {
let xHeader: string = response.headers.get("x-total-count");
if (xHeader) {
this.totalCount = parseInt(xHeader, 0);
this.listReplicationRule.totalCount = parseInt(xHeader, 0);
}
}
this.listReplicationRule.selectedRow = null; // Clear selection

View File

@ -59,7 +59,7 @@
</clr-input-container>
<clr-input-container>
<label>{{'PROFILE.COMMENT' | translate}}</label>
<input clrInput type="text" #commentInput="ngModel" name="comment" [(ngModel)]="newUser.comment" maxLengthExt="20" id="comment" size="30"
<input clrInput type="text" #commentInput="ngModel" name="comment" [(ngModel)]="newUser.comment" maxLengthExt="30" id="comment" size="30"
(input)='handleValidation("comment", false)' (blur)='handleValidation("comment", true)'>
<clr-control-error *ngIf='getValidationState("comment")'>
{{'TOOLTIP.COMMENT' | translate}}