Fix the projectId not ready issue

This commit is contained in:
Steven Zou 2017-08-22 13:33:24 +08:00
parent f4a87f89c6
commit 3784c08e3d
3 changed files with 70 additions and 42 deletions

View File

@ -2,27 +2,27 @@ export const LIST_REPLICATION_RULE_TEMPLATE: string = `
<div> <div>
<clr-datagrid [clrDgLoading]="loading"> <clr-datagrid [clrDgLoading]="loading">
<clr-dg-column [clrDgField]="'name'">{{'REPLICATION.NAME' | translate}}</clr-dg-column> <clr-dg-column [clrDgField]="'name'">{{'REPLICATION.NAME' | translate}}</clr-dg-column>
<clr-dg-column [clrDgField]="'project_name'" *ngIf="projectScope">{{'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]="'description'">{{'REPLICATION.DESCRIPTION' | translate}}</clr-dg-column>
<clr-dg-column [clrDgField]="'target_name'">{{'REPLICATION.DESTINATION_NAME' | 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]="startTimeComparator">{{'REPLICATION.LAST_START_TIME' | translate}}</clr-dg-column>
<clr-dg-column [clrDgSortBy]="enabledComparator">{{'REPLICATION.ACTIVATION' | translate}}</clr-dg-column> <clr-dg-column [clrDgSortBy]="enabledComparator">{{'REPLICATION.ACTIVATION' | translate}}</clr-dg-column>
<clr-dg-placeholder>{{'REPLICATION.PLACEHOLDER' | translate }}</clr-dg-placeholder> <clr-dg-placeholder>{{'REPLICATION.PLACEHOLDER' | translate }}</clr-dg-placeholder>
<clr-dg-row *clrDgItems="let p of changedRules" [clrDgItem]="p" (click)="selectRule(p)" [style.backgroundColor]="(!projectScope && withReplicationJob && 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 *ngIf="!readonly"> <clr-dg-action-overflow *ngIf="!readonly">
<button class="action-item" (click)="editRule(p)">{{'REPLICATION.EDIT_POLICY' | translate}}</button> <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)="toggleRule(p)">{{ (p.enabled === 0 ? 'REPLICATION.ENABLE' : 'REPLICATION.DISABLE') | translate}}</button>
<button class="action-item" (click)="deleteRule(p)">{{'REPLICATION.DELETE_POLICY' | translate}}</button> <button class="action-item" (click)="deleteRule(p)">{{'REPLICATION.DELETE_POLICY' | translate}}</button>
</clr-dg-action-overflow> </clr-dg-action-overflow>
<clr-dg-cell> <clr-dg-cell>
<ng-template [ngIf]="projectScope"> <ng-template [ngIf]="!projectScope">
<a href="javascript:void(0)" (click)="redirectTo(p)">{{p.name}}</a> <a href="javascript:void(0)" (click)="redirectTo(p)">{{p.name}}</a>
</ng-template> </ng-template>
<ng-template [ngIf]="!projectScope"> <ng-template [ngIf]="projectScope">
{{p.name}} {{p.name}}
</ng-template> </ng-template>
</clr-dg-cell> </clr-dg-cell>
<clr-dg-cell *ngIf="projectScope">{{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.description ? p.description : '-'}}</clr-dg-cell>
<clr-dg-cell>{{p.target_name}}</clr-dg-cell> <clr-dg-cell>{{p.target_name}}</clr-dg-cell>
<clr-dg-cell> <clr-dg-cell>

View File

@ -11,7 +11,19 @@
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and // See the License for the specific language governing permissions and
// limitations under the License. // 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 { ReplicationService } from '../service/replication.service';
import { ReplicationRule } from '../service/interface'; import { ReplicationRule } from '../service/interface';
@ -36,10 +48,10 @@ import { LIST_REPLICATION_RULE_TEMPLATE } from './list-replication-rule.componen
template: LIST_REPLICATION_RULE_TEMPLATE, template: LIST_REPLICATION_RULE_TEMPLATE,
changeDetection: ChangeDetectionStrategy.OnPush changeDetection: ChangeDetectionStrategy.OnPush
}) })
export class ListReplicationRuleComponent implements OnInit { export class ListReplicationRuleComponent implements OnInit, OnChanges {
nullTime: string = '0001-01-01T00:00:00Z'; nullTime: string = '0001-01-01T00:00:00Z';
@Input() projectId: number; @Input() projectId: number;
@Input() selectedId: number | string; @Input() selectedId: number | string;
@Input() withReplicationJob: boolean; @Input() withReplicationJob: boolean;
@ -53,7 +65,7 @@ export class ListReplicationRuleComponent implements OnInit {
@Output() toggleOne = new EventEmitter<ReplicationRule>(); @Output() toggleOne = new EventEmitter<ReplicationRule>();
@Output() redirect = new EventEmitter<ReplicationRule>(); @Output() redirect = new EventEmitter<ReplicationRule>();
projectScope: boolean; projectScope: boolean = false;
rules: ReplicationRule[]; rules: ReplicationRule[];
changedRules: ReplicationRule[]; changedRules: ReplicationRule[];
@ -64,7 +76,7 @@ export class ListReplicationRuleComponent implements OnInit {
@ViewChild('deletionConfirmDialog') @ViewChild('deletionConfirmDialog')
deletionConfirmDialog: ConfirmationDialogComponent; deletionConfirmDialog: ConfirmationDialogComponent;
startTimeComparator: Comparator<ReplicationRule> = new CustomComparator<ReplicationRule>('start_time', 'date'); startTimeComparator: Comparator<ReplicationRule> = new CustomComparator<ReplicationRule>('start_time', 'date');
enabledComparator: Comparator<ReplicationRule> = new CustomComparator<ReplicationRule>('enabled', 'number'); enabledComparator: Comparator<ReplicationRule> = new CustomComparator<ReplicationRule>('enabled', 'number');
@ -72,56 +84,72 @@ export class ListReplicationRuleComponent implements OnInit {
private replicationService: ReplicationService, private replicationService: ReplicationService,
private translateService: TranslateService, private translateService: TranslateService,
private errorHandler: ErrorHandler, private errorHandler: ErrorHandler,
private ref: ChangeDetectorRef) { private ref: ChangeDetectorRef) {
setInterval(()=>ref.markForCheck(), 500); setInterval(() => ref.markForCheck(), 500);
} }
ngOnInit(): void { ngOnInit(): void {
this.projectScope = (!this.projectId); //Global scope
this.retrieveRules(); 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 { retrieveRules(ruleName: string = ''): void {
this.loading = true; this.loading = true;
toPromise<ReplicationRule[]>(this.replicationService toPromise<ReplicationRule[]>(this.replicationService
.getReplicationRules(this.projectId, ruleName)) .getReplicationRules(this.projectId, ruleName))
.then(rules=>{ .then(rules => {
this.rules = rules || []; this.rules = rules || [];
if(this.rules && this.rules.length > 0) { if (this.rules && this.rules.length > 0) {
this.selectedId = this.rules[0].id || ''; this.selectedId = this.rules[0].id || '';
this.selectOne.emit(this.rules[0]); this.selectOne.emit(this.rules[0]);
} }
this.changedRules = this.rules; this.changedRules = this.rules;
this.loading = false; this.loading = false;
} }
).catch(error=>{ ).catch(error => {
this.errorHandler.error(error); this.errorHandler.error(error);
this.loading = false; this.loading = false;
}); });
} }
filterRuleStatus(status: string) { filterRuleStatus(status: string) {
if(status === 'all') { if (status === 'all') {
this.changedRules = this.rules; this.changedRules = this.rules;
} else { } else {
this.changedRules = this.rules.filter(policy=>policy.enabled === +status); this.changedRules = this.rules.filter(policy => policy.enabled === +status);
} }
} }
toggleConfirm(message: ConfirmationAcknowledgement) { toggleConfirm(message: ConfirmationAcknowledgement) {
if(message && if (message &&
message.source === ConfirmationTargets.TOGGLE_CONFIRM && message.source === ConfirmationTargets.TOGGLE_CONFIRM &&
message.state === ConfirmationState.CONFIRMED) { message.state === ConfirmationState.CONFIRMED) {
let rule: ReplicationRule = message.data; let rule: ReplicationRule = message.data;
if(rule) { if (rule) {
rule.enabled = rule.enabled === 0 ? 1 : 0; rule.enabled = rule.enabled === 0 ? 1 : 0;
toPromise<any>(this.replicationService toPromise<any>(this.replicationService
.enableReplicationRule(rule.id || '', rule.enabled)) .enableReplicationRule(rule.id || '', rule.enabled))
.then(() => .then(() =>
this.translateService.get('REPLICATION.TOGGLED_SUCCESS') this.translateService.get('REPLICATION.TOGGLED_SUCCESS')
.subscribe(res=>this.errorHandler.info(res))) .subscribe(res => this.errorHandler.info(res)))
.catch(error => this.errorHandler.error(error)); .catch(error => this.errorHandler.error(error));
} }
} }
} }
@ -133,13 +161,13 @@ export class ListReplicationRuleComponent implements OnInit {
.deleteReplicationRule(message.data)) .deleteReplicationRule(message.data))
.then(() => { .then(() => {
this.translateService.get('REPLICATION.DELETED_SUCCESS') this.translateService.get('REPLICATION.DELETED_SUCCESS')
.subscribe(res=>this.errorHandler.info(res)); .subscribe(res => this.errorHandler.info(res));
this.reload.emit(true); this.reload.emit(true);
}) })
.catch(error => { .catch(error => {
if(error && error.status === 412) { if (error && error.status === 412) {
this.translateService.get('REPLICATION.FAILED_TO_DELETE_POLICY_ENABLED') this.translateService.get('REPLICATION.FAILED_TO_DELETE_POLICY_ENABLED')
.subscribe(res=>this.errorHandler.error(res)); .subscribe(res => this.errorHandler.error(res));
} else { } else {
this.errorHandler.error(error); this.errorHandler.error(error);
} }
@ -163,7 +191,7 @@ export class ListReplicationRuleComponent implements OnInit {
toggleRule(rule: ReplicationRule) { toggleRule(rule: ReplicationRule) {
let toggleConfirmMessage: ConfirmationMessage = new ConfirmationMessage( let toggleConfirmMessage: ConfirmationMessage = new ConfirmationMessage(
rule.enabled === 1 ? 'REPLICATION.TOGGLE_DISABLE_TITLE' : 'REPLICATION.TOGGLE_ENABLE_TITLE', 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.name || '',
rule, rule,
ConfirmationTargets.TOGGLE_CONFIRM ConfirmationTargets.TOGGLE_CONFIRM

View File

@ -31,7 +31,7 @@
"clarity-icons": "^0.9.8", "clarity-icons": "^0.9.8",
"clarity-ui": "^0.9.8", "clarity-ui": "^0.9.8",
"core-js": "^2.4.1", "core-js": "^2.4.1",
"harbor-ui": "0.4.46", "harbor-ui": "0.4.50",
"intl": "^1.2.5", "intl": "^1.2.5",
"mutationobserver-shim": "^0.3.2", "mutationobserver-shim": "^0.3.2",
"ngx-cookie": "^1.0.0", "ngx-cookie": "^1.0.0",