From 3784c08e3d52307ac4ce72473481dd627a5c0bc5 Mon Sep 17 00:00:00 2001 From: Steven Zou Date: Tue, 22 Aug 2017 13:33:24 +0800 Subject: [PATCH] Fix the projectId not ready issue --- .../list-replication-rule.component.html.ts | 10 +- .../list-replication-rule.component.ts | 100 +++++++++++------- src/ui_ng/package.json | 2 +- 3 files changed, 70 insertions(+), 42 deletions(-) diff --git a/src/ui_ng/lib/src/list-replication-rule/list-replication-rule.component.html.ts b/src/ui_ng/lib/src/list-replication-rule/list-replication-rule.component.html.ts index 047a61c2f..410e2aeeb 100644 --- a/src/ui_ng/lib/src/list-replication-rule/list-replication-rule.component.html.ts +++ b/src/ui_ng/lib/src/list-replication-rule/list-replication-rule.component.html.ts @@ -2,27 +2,27 @@ export const LIST_REPLICATION_RULE_TEMPLATE: string = `
{{'REPLICATION.NAME' | translate}} - {{'REPLICATION.PROJECT' | translate}} + {{'REPLICATION.PROJECT' | translate}} {{'REPLICATION.DESCRIPTION' | translate}} {{'REPLICATION.DESTINATION_NAME' | translate}} {{'REPLICATION.LAST_START_TIME' | translate}} {{'REPLICATION.ACTIVATION' | translate}} {{'REPLICATION.PLACEHOLDER' | translate }} - + - + {{p.name}} - + {{p.name}} - {{p.project_name}} + {{p.project_name}} {{p.description ? p.description : '-'}} {{p.target_name}} diff --git a/src/ui_ng/lib/src/list-replication-rule/list-replication-rule.component.ts b/src/ui_ng/lib/src/list-replication-rule/list-replication-rule.component.ts index bad464f98..96c525738 100644 --- a/src/ui_ng/lib/src/list-replication-rule/list-replication-rule.component.ts +++ b/src/ui_ng/lib/src/list-replication-rule/list-replication-rule.component.ts @@ -11,7 +11,19 @@ // 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, OnInit, EventEmitter, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { + Component, + Input, + Output, + OnInit, + EventEmitter, + ViewChild, + ChangeDetectionStrategy, + ChangeDetectorRef, + OnChanges, + SimpleChange, + SimpleChanges +} from '@angular/core'; import { ReplicationService } from '../service/replication.service'; import { ReplicationRule } from '../service/interface'; @@ -36,10 +48,10 @@ import { LIST_REPLICATION_RULE_TEMPLATE } from './list-replication-rule.componen template: LIST_REPLICATION_RULE_TEMPLATE, changeDetection: ChangeDetectionStrategy.OnPush }) -export class ListReplicationRuleComponent implements OnInit { +export class ListReplicationRuleComponent implements OnInit, OnChanges { nullTime: string = '0001-01-01T00:00:00Z'; - + @Input() projectId: number; @Input() selectedId: number | string; @Input() withReplicationJob: boolean; @@ -53,7 +65,7 @@ export class ListReplicationRuleComponent implements OnInit { @Output() toggleOne = new EventEmitter(); @Output() redirect = new EventEmitter(); - projectScope: boolean; + projectScope: boolean = false; rules: ReplicationRule[]; changedRules: ReplicationRule[]; @@ -64,7 +76,7 @@ export class ListReplicationRuleComponent implements OnInit { @ViewChild('deletionConfirmDialog') deletionConfirmDialog: ConfirmationDialogComponent; - + startTimeComparator: Comparator = new CustomComparator('start_time', 'date'); enabledComparator: Comparator = new CustomComparator('enabled', 'number'); @@ -72,56 +84,72 @@ export class ListReplicationRuleComponent implements OnInit { private replicationService: ReplicationService, private translateService: TranslateService, private errorHandler: ErrorHandler, - private ref: ChangeDetectorRef) { - setInterval(()=>ref.markForCheck(), 500); + private ref: ChangeDetectorRef) { + setInterval(() => ref.markForCheck(), 500); } ngOnInit(): void { - this.projectScope = (!this.projectId); - this.retrieveRules(); + //Global scope + if (!this.projectScope) { + this.retrieveRules(); + } + } + + ngOnChanges(changes: SimpleChanges): void { + let proIdChange: SimpleChange = changes["projectId"]; + if (proIdChange) { + if (proIdChange.currentValue !== proIdChange.previousValue) { + if (proIdChange.currentValue) { + this.projectId = proIdChange.currentValue; + this.projectScope = true; //Scope is project, not global list + //Initially load the replication rule data + this.retrieveRules(); + } + } + } } retrieveRules(ruleName: string = ''): void { this.loading = true; toPromise(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; - }); - } + .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') { + if (status === 'all') { this.changedRules = this.rules; } else { - this.changedRules = this.rules.filter(policy=>policy.enabled === +status); + this.changedRules = this.rules.filter(policy => policy.enabled === +status); } } toggleConfirm(message: ConfirmationAcknowledgement) { - if(message && - message.source === ConfirmationTargets.TOGGLE_CONFIRM && + if (message && + message.source === ConfirmationTargets.TOGGLE_CONFIRM && message.state === ConfirmationState.CONFIRMED) { let rule: ReplicationRule = message.data; - if(rule) { + if (rule) { rule.enabled = rule.enabled === 0 ? 1 : 0; toPromise(this.replicationService .enableReplicationRule(rule.id || '', rule.enabled)) - .then(() => + .then(() => this.translateService.get('REPLICATION.TOGGLED_SUCCESS') - .subscribe(res=>this.errorHandler.info(res))) + .subscribe(res => this.errorHandler.info(res))) .catch(error => this.errorHandler.error(error)); - } + } } } @@ -133,13 +161,13 @@ export class ListReplicationRuleComponent implements OnInit { .deleteReplicationRule(message.data)) .then(() => { this.translateService.get('REPLICATION.DELETED_SUCCESS') - .subscribe(res=>this.errorHandler.info(res)); + .subscribe(res => this.errorHandler.info(res)); this.reload.emit(true); }) .catch(error => { - if(error && error.status === 412) { + if (error && error.status === 412) { this.translateService.get('REPLICATION.FAILED_TO_DELETE_POLICY_ENABLED') - .subscribe(res=>this.errorHandler.error(res)); + .subscribe(res => this.errorHandler.error(res)); } else { this.errorHandler.error(error); } @@ -163,7 +191,7 @@ export class ListReplicationRuleComponent implements OnInit { toggleRule(rule: ReplicationRule) { let toggleConfirmMessage: ConfirmationMessage = new ConfirmationMessage( rule.enabled === 1 ? 'REPLICATION.TOGGLE_DISABLE_TITLE' : 'REPLICATION.TOGGLE_ENABLE_TITLE', - rule.enabled === 1 ? 'REPLICATION.CONFIRM_TOGGLE_DISABLE_POLICY': 'REPLICATION.CONFIRM_TOGGLE_ENABLE_POLICY', + rule.enabled === 1 ? 'REPLICATION.CONFIRM_TOGGLE_DISABLE_POLICY' : 'REPLICATION.CONFIRM_TOGGLE_ENABLE_POLICY', rule.name || '', rule, ConfirmationTargets.TOGGLE_CONFIRM diff --git a/src/ui_ng/package.json b/src/ui_ng/package.json index ae2a2759c..23e284bd9 100644 --- a/src/ui_ng/package.json +++ b/src/ui_ng/package.json @@ -31,7 +31,7 @@ "clarity-icons": "^0.9.8", "clarity-ui": "^0.9.8", "core-js": "^2.4.1", - "harbor-ui": "0.4.46", + "harbor-ui": "0.4.50", "intl": "^1.2.5", "mutationobserver-shim": "^0.3.2", "ngx-cookie": "^1.0.0",