Upstream/harbor
1
0
Fork 0
mirror of https://github.com/goharbor/harbor.git synced 2025-02-17 04:11:24 +01:00
Code Issues Projects Releases Wiki Activity

Merge pull request #2427 from wknet123/master-shareable-list-rule

Browse Source 
Update for shareable replication component.
This commit is contained in:
Steven Zou 2017-06-05 19:39:37 +08:00 committed by GitHub
commit 5512478593
6 changed files with 80 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/ui_ng/lib/src/index.ts
View File

@ -9,5 +9,6 @@ export * from './endpoint/index';
export * from './repository/index';
export * from './repository-stackview/index';
export * from './tag/index';
export * from './list-replication-rule/index';
export * from './replication/index';
export * from './vulnerability-scanning/index';

12
src/ui_ng/lib/src/list-replication-rule/list-replication-rule.component.html.ts
View File

@ -3,26 +3,26 @@ export const LIST_REPLICATION_RULE_TEMPLATE: string = `
<confirmation-dialog #deletionConfirmDialog (confirmAction)="deletionConfirm($event)"></confirmation-dialog>
<clr-datagrid [clrDgLoading]="loading">
<clr-dg-column [clrDgField]="'name'">{{'REPLICATION.NAME' | translate}}</clr-dg-column>
<clr-dg-column [clrDgField]="'project_name'" *ngIf="projectless">{{'REPLICATION.PROJECT' | translate}}</clr-dg-column>
<clr-dg-column [clrDgField]="'project_name'" *ngIf="projectScope">{{'REPLICATION.PROJECT' | translate}}</clr-dg-column>
<clr-dg-column [clrDgField]="'description'">{{'REPLICATION.DESCRIPTION' | translate}}</clr-dg-column>
<clr-dg-column [clrDgField]="'target_name'">{{'REPLICATION.DESTINATION_NAME' | translate}}</clr-dg-column>
<clr-dg-column [clrDgSortBy]="startTimeComparator">{{'REPLICATION.LAST_START_TIME' | translate}}</clr-dg-column>
<clr-dg-column [clrDgSortBy]="enabledComparator">{{'REPLICATION.ACTIVATION' | translate}}</clr-dg-column>
<clr-dg-row *clrDgItems="let p of rules" [clrDgItem]="p" (click)="selectRule(p)" [style.backgroundColor]="(!projectless && selectedId === p.id) ? '#eee' : ''">
<clr-dg-row *clrDgItems="let p of changedRules" [clrDgItem]="p" (click)="selectRule(p)" [style.backgroundColor]="(!projectScope && withReplicationJob && selectedId === p.id) ? '#eee' : ''">
<clr-dg-action-overflow>
<button class="action-item" (click)="editRule(p)">{{'REPLICATION.EDIT_POLICY' | translate}}</button>
<button class="action-item" (click)="toggleRule(p)">{{ (p.enabled === 0 ? 'REPLICATION.ENABLE' : 'REPLICATION.DISABLE') | translate}}</button>
<button class="action-item" (click)="deleteRule(p)">{{'REPLICATION.DELETE_POLICY' | translate}}</button>
</clr-dg-action-overflow>
<clr-dg-cell>
<ng-template [ngIf]="projectless">
<a href="javascript:void(0)">{{p.name}}</a>
<ng-template [ngIf]="projectScope">
<a href="javascript:void(0)" (click)="redirectTo(p)">{{p.name}}</a>
</ng-template>
<ng-template [ngIf]="!projectless">
<ng-template [ngIf]="!projectScope">
{{p.name}}
</ng-template>
</clr-dg-cell>
<clr-dg-cell *ngIf="projectless">{{p.project_name}}</clr-dg-cell>
<clr-dg-cell *ngIf="projectScope">{{p.project_name}}</clr-dg-cell>
<clr-dg-cell>{{p.description ? p.description : '-'}}</clr-dg-cell>
<clr-dg-cell>{{p.target_name}}</clr-dg-cell>
<clr-dg-cell>

55
src/ui_ng/lib/src/list-replication-rule/list-replication-rule.component.ts
View File

@ -11,7 +11,7 @@
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
import { Component, Input, Output, EventEmitter, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { Component, Input, Output, OnInit, EventEmitter, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { ReplicationService } from '../service/replication.service';
import { ReplicationRule } from '../service/interface';
@ -32,17 +32,17 @@ import { State, Comparator } from 'clarity-angular';
import { LIST_REPLICATION_RULE_TEMPLATE } from './list-replication-rule.component.html';
@Component({
selector: 'list-replication-rule',
selector: 'hbr-list-replication-rule',
template: LIST_REPLICATION_RULE_TEMPLATE,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ListReplicationRuleComponent {
export class ListReplicationRuleComponent implements OnInit {
nullTime: string = '0001-01-01T00:00:00Z';
@Input() rules: ReplicationRule[];
@Input() projectless: boolean;
@Input() projectId: number;
@Input() selectedId: number | string;
@Input() withReplicationJob: boolean;
@Input() loading: boolean = false;
@ -50,6 +50,13 @@ export class ListReplicationRuleComponent {
@Output() selectOne = new EventEmitter<ReplicationRule>();
@Output() editOne = new EventEmitter<ReplicationRule>();
@Output() toggleOne = new EventEmitter<ReplicationRule>();
@Output() redirect = new EventEmitter<ReplicationRule>();
projectScope: boolean;
rules: ReplicationRule[];
changedRules: ReplicationRule[];
ruleName: string;
@ViewChild('toggleConfirmDialog')
toggleConfirmDialog: ConfirmationDialogComponent;
@ -68,6 +75,38 @@ export class ListReplicationRuleComponent {
setInterval(()=>ref.markForCheck(), 500);
}
ngOnInit(): void {
this.projectScope = (!this.projectId);
this.retrieveRules();
}
retrieveRules(ruleName: string = ''): void {
this.loading = true;
toPromise<ReplicationRule[]>(this.replicationService
.getReplicationRules(this.projectId, ruleName))
.then(rules=>{
this.rules = rules || [];
if(this.rules && this.rules.length > 0) {
this.selectedId = this.rules[0].id || '';
this.selectOne.emit(this.rules[0]);
}
this.changedRules = this.rules;
this.loading = false;
}
).catch(error=>{
this.errorHandler.error(error);
this.loading = false;
});
}
filterRuleStatus(status: string) {
if(status === 'all') {
this.changedRules = this.rules;
} else {
this.changedRules = this.rules.filter(policy=>policy.enabled === +status);
}
}
toggleConfirm(message: ConfirmationAcknowledgement) {
if(message &&
message.source === ConfirmationTargets.TOGGLE_CONFIRM &&
@ -112,6 +151,10 @@ export class ListReplicationRuleComponent {
this.selectOne.emit(rule);
}
redirectTo(rule: ReplicationRule): void {
this.redirect.emit(rule);
}
editRule(rule: ReplicationRule) {
this.editOne.emit(rule);
}

8
src/ui_ng/lib/src/replication/replication.component.html.ts
View File

@ -3,7 +3,7 @@ export const REPLICATION_TEMPLATE: string = `
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="row flex-items-xs-between">
<div class="flex-xs-middle option-left">
<button class="btn btn-link" (click)="openModal()"><clr-icon shape="add"></clr-icon> {{'REPLICATION.REPLICATION_RULE' | translate}}</button>
<button *ngIf="withReplicationJob" class="btn btn-link" (click)="openModal()"><clr-icon shape="add"></clr-icon> {{'REPLICATION.REPLICATION_RULE' | translate}}</button>
<create-edit-rule [projectId]="projectId" (reload)="reloadRules($event)"></create-edit-rule>
</div>
<div class="flex-xs-middle option-right">
@ -20,9 +20,9 @@ export const REPLICATION_TEMPLATE: string = `
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<list-replication-rule [rules]="changedRules" [projectless]="false" [selectedId]="initSelectedId" (selectOne)="selectOneRule($event)" (editOne)="openEditRule($event)" (reload)="reloadRules($event)" [loading]="loading"></list-replication-rule>
<hbr-list-replication-rule #listReplicationRule [projectId]="projectId" (selectOne)="selectOneRule($event)" (editOne)="openEditRule($event)" (reload)="reloadRules($event)" [loading]="loading" [withReplicationJob]="withReplicationJob" (redirect)="customRedirect($event)"></hbr-list-replication-rule>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div *ngIf="withReplicationJob" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="row flex-items-xs-between">
<h5 class="flex-items-xs-bottom option-left-down" style="margin-left: 14px;">{{'REPLICATION.REPLICATION_JOBS' | translate}}</h5>
<div class="flex-items-xs-bottom option-right-down">
@ -45,7 +45,7 @@ export const REPLICATION_TEMPLATE: string = `
</div>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div *ngIf="withReplicationJob" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<clr-datagrid [clrDgLoading]="loading">
<clr-dg-column [clrDgField]="'repository'">{{'REPLICATION.NAME' | translate}}</clr-dg-column>
<clr-dg-column [clrDgField]="'status'">{{'REPLICATION.STATUS' | translate}}</clr-dg-column>

53
src/ui_ng/lib/src/replication/replication.component.ts
View File

@ -11,12 +11,13 @@
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
import { Component, OnInit, ViewChild, Input } from '@angular/core';
import { Component, OnInit, ViewChild, Input, Output, EventEmitter } from '@angular/core';
import { ResponseOptions, RequestOptions } from '@angular/http';
import { NgModel } from '@angular/forms';
import { TranslateService } from '@ngx-translate/core';
import { ListReplicationRuleComponent} from '../list-replication-rule/list-replication-rule.component';
import { CreateEditRuleComponent } from '../create-edit-rule/create-edit-rule.component';
import { ErrorHandler } from '../error-handler/error-handler';
@ -71,6 +72,9 @@ export class SearchOption {
export class ReplicationComponent implements OnInit {
@Input() projectId: number | string;
@Input() withReplicationJob: boolean;
@Output() redirect = new EventEmitter<ReplicationRule>();
search: SearchOption = new SearchOption();
@ -94,6 +98,9 @@ export class ReplicationComponent implements OnInit {
toggleJobSearchOption = optionalSearch;
currentJobSearchOption: number;
@ViewChild(ListReplicationRuleComponent)
listReplicationRule: ListReplicationRuleComponent;
@ViewChild(CreateEditRuleComponent)
createEditPolicyComponent: CreateEditRuleComponent;
@ -113,32 +120,8 @@ export class ReplicationComponent implements OnInit {
this.currentRuleStatus = this.ruleStatus[0];
this.currentJobStatus = this.jobStatus[0];
this.currentJobSearchOption = 0;
this.retrieveRules();
}
retrieveRules(): void {
this.loading = true;
toPromise<ReplicationRule[]>(this.replicationService
.getReplicationRules(this.projectId, this.search.ruleName))
.then(response=>{
this.changedRules = response || [];
if(this.changedRules && this.changedRules.length > 0) {
this.initSelectedId = this.changedRules[0].id || '';
}
this.rules = this.changedRules;
if(this.changedRules && this.changedRules.length > 0) {
this.search.ruleId = this.changedRules[0].id || '';
this.fetchReplicationJobs();
}
this.loading = false;
}
).catch(error=>{
this.errorHandler.error(error);
this.loading = false;
});
}
openModal(): void {
this.createEditPolicyComponent.openCreateEditRule(true);
}
@ -177,37 +160,39 @@ export class ReplicationComponent implements OnInit {
this.search.repoName = '';
this.search.status = '';
this.currentJobSearchOption = 0;
this.currentJobStatus = { 'key': 'all', 'description': 'REPLICATION.ALL' };
this.currentJobStatus = { 'key': 'all', 'description': 'REPLICATION.ALL' };
this.fetchReplicationJobs();
}
}
customRedirect(rule: ReplicationRule) {
this.redirect.emit(rule);
}
doSearchRules(ruleName: string) {
this.search.ruleName = ruleName;
this.retrieveRules();
this.listReplicationRule.retrieveRules(ruleName);
}
doFilterRuleStatus($event: any) {
if ($event && $event.target && $event.target["value"]) {
let status = $event.target["value"];
this.currentRuleStatus = this.ruleStatus.find((r: any)=>r.key === status);
if(this.currentRuleStatus.key === 'all') {
this.changedRules = this.rules;
} else {
this.changedRules = this.rules.filter(policy=>policy.enabled === +this.currentRuleStatus.key);
}
this.listReplicationRule.filterRuleStatus(this.currentRuleStatus.key);
}
}
doFilterJobStatus($event: any) {
if ($event && $event.target && $event.target["value"]) {
let status = $event.target["value"];
this.currentJobStatus = this.jobStatus.find((r: any)=>r.key === status);
if(this.currentJobStatus.key === 'all') {
status = '';
}
this.search.status = status;
this.doSearchJobs(this.search.repoName);
}
}
@ -219,12 +204,12 @@ export class ReplicationComponent implements OnInit {
reloadRules(isReady: boolean) {
if(isReady) {
this.search.ruleName = '';
this.retrieveRules();
this.listReplicationRule.retrieveRules(this.search.ruleName);
}
}
refreshRules() {
this.retrieveRules();
this.listReplicationRule.retrieveRules();
}
refreshJobs() {

2
src/ui_ng/lib/src/utils.ts
View File

@ -104,7 +104,7 @@ export class CustomComparator<T> implements Comparator<T> {
compare(a: {[key: string]: any| any[]}, b: {[key: string]: any| any[]}) {
let comp = 0;
if(a && b && a[this.fieldName] && b[this.fieldName]) {
if(a && b) {
let fieldA = a[this.fieldName];
let fieldB = b[this.fieldName];
switch(this.type) {