File
Implements
Metadata
| selector |
cd-pool-edit-peer-modal |
| styleUrls |
./pool-edit-peer-modal.component.scss |
| templateUrl |
./pool-edit-peer-modal.component.html |
Methods
|
validateClientID
|
validateClientID(control: AbstractControl)
|
|
|
|
Returns : { invalidClientID: { value: any; }; }
|
|
validateClusterName
|
validateClusterName(control: AbstractControl)
|
|
|
|
Returns : { invalidClusterName: { value: any; }; }
|
|
validateKey
|
validateKey(control: AbstractControl)
|
|
|
|
Returns : { invalidKey: { value: any; }; }
|
|
validateMonAddr
|
validateMonAddr(control: AbstractControl)
|
|
|
|
Returns : { invalidMonAddr: { value: any; }; }
|
|
bsConfig
|
Type : object
|
Default value : {
containerClass: 'theme-default'
}
|
|
|
|
Public
modalRef
|
Type : BsModalRef
|
|
|
import { Component, OnInit } from '@angular/core';
import { AbstractControl, FormControl, Validators } from '@angular/forms';
import { BsModalRef } from 'ngx-bootstrap/modal';
import { RbdMirroringService } from '../../../../shared/api/rbd-mirroring.service';
import { CdFormGroup } from '../../../../shared/forms/cd-form-group';
import { FinishedTask } from '../../../../shared/models/finished-task';
import { TaskWrapperService } from '../../../../shared/services/task-wrapper.service';
import { PoolEditPeerResponseModel } from './pool-edit-peer-response.model';
@Component({
selector: 'cd-pool-edit-peer-modal',
templateUrl: './pool-edit-peer-modal.component.html',
styleUrls: ['./pool-edit-peer-modal.component.scss']
})
export class PoolEditPeerModalComponent implements OnInit {
mode: string;
poolName: string;
peerUUID: string;
editPeerForm: CdFormGroup;
bsConfig = {
containerClass: 'theme-default'
};
pattern: string;
response: PoolEditPeerResponseModel;
constructor(
public modalRef: BsModalRef,
private rbdMirroringService: RbdMirroringService,
private taskWrapper: TaskWrapperService
) {
this.createForm();
}
createForm() {
this.editPeerForm = new CdFormGroup({
clusterName: new FormControl('', {
validators: [Validators.required, this.validateClusterName]
}),
clientID: new FormControl('', {
validators: [Validators.required, this.validateClientID]
}),
monAddr: new FormControl('', {
validators: [this.validateMonAddr]
}),
key: new FormControl('', {
validators: [this.validateKey]
})
});
}
ngOnInit() {
this.pattern = `${this.poolName}/${this.peerUUID}`;
if (this.mode === 'edit') {
this.rbdMirroringService
.getPeer(this.poolName, this.peerUUID)
.subscribe((resp: PoolEditPeerResponseModel) => {
this.setResponse(resp);
});
}
}
validateClusterName(control: AbstractControl) {
if (!control.value.match(/^[\w\-_]*$/)) {
return { invalidClusterName: { value: control.value } };
}
}
validateClientID(control: AbstractControl) {
if (!control.value.match(/^(?!client\.)[\w\-_.]*$/)) {
return { invalidClientID: { value: control.value } };
}
}
validateMonAddr(control: AbstractControl) {
if (!control.value.match(/^[,; ]*([\w.\-_\[\]]+(:[\d]+)?[,; ]*)*$/)) {
return { invalidMonAddr: { value: control.value } };
}
}
validateKey(control: AbstractControl) {
try {
if (control.value === '' || !!atob(control.value)) {
return null;
}
} catch (error) {}
return { invalidKey: { value: control.value } };
}
setResponse(response: PoolEditPeerResponseModel) {
this.response = response;
this.editPeerForm.get('clusterName').setValue(response.cluster_name);
this.editPeerForm.get('clientID').setValue(response.client_id);
this.editPeerForm.get('monAddr').setValue(response.mon_host);
this.editPeerForm.get('key').setValue(response.key);
}
update() {
const request = new PoolEditPeerResponseModel();
request.cluster_name = this.editPeerForm.getValue('clusterName');
request.client_id = this.editPeerForm.getValue('clientID');
request.mon_host = this.editPeerForm.getValue('monAddr');
request.key = this.editPeerForm.getValue('key');
let action;
if (this.mode === 'edit') {
action = this.taskWrapper.wrapTaskAroundCall({
task: new FinishedTask('rbd/mirroring/peer/edit', {
pool_name: this.poolName
}),
call: this.rbdMirroringService.updatePeer(this.poolName, this.peerUUID, request)
});
} else {
action = this.taskWrapper.wrapTaskAroundCall({
task: new FinishedTask('rbd/mirroring/peer/add', {
pool_name: this.poolName
}),
call: this.rbdMirroringService.addPeer(this.poolName, request)
});
}
action.subscribe(
undefined,
() => this.editPeerForm.setErrors({ cdSubmitButton: true }),
() => {
this.rbdMirroringService.refresh();
this.modalRef.hide();
}
);
}
}
<cd-modal>
<ng-container class="modal-title"
i18n>{mode, select, edit {Edit} other {Add}}
pool mirror peer</ng-container>
<ng-container class="modal-content">
<form name="editPeerForm"
class="form"
#formDir="ngForm"
[formGroup]="editPeerForm"
novalidate>
<div class="modal-body">
<p>
<ng-container i18n>{mode, select, edit {Edit} other {Add}} the pool
mirror peer attributes for pool <kbd>{{ poolName }}</kbd> and click
<kbd>Submit</kbd>.</ng-container>
</p>
<div class="form-group"
[ngClass]="{'has-error': editPeerForm.showError('clusterName', formDir)}">
<label class="control-label"
for="clusterName">
<span i18n>Cluster Name</span>
<span class="required"></span>
</label>
<input class="form-control"
type="text"
placeholder="Name..."
i18n-placeholder
id="clusterName"
name="clusterName"
formControlName="clusterName"
autofocus>
<span class="help-block"
*ngIf="editPeerForm.showError('clusterName', formDir, 'required')"
i18n>This field is required.</span>
<span class="help-block"
*ngIf="editPeerForm.showError('clusterName', formDir, 'invalidClusterName')"
i18n>The cluster name is not valid.</span>
</div>
<div class="form-group"
[ngClass]="{'has-error': editPeerForm.showError('clientID', formDir)}">
<label class="control-label"
for="clientID">
<span i18n>CephX ID</span>
<span class="required"></span>
</label>
<input class="form-control"
type="text"
placeholder="CephX ID..."
i18n-placeholder
id="clientID"
name="clientID"
formControlName="clientID">
<span class="help-block"
*ngIf="editPeerForm.showError('clientID', formDir, 'required')"
i18n>This field is required.</span>
<span class="help-block"
*ngIf="editPeerForm.showError('clientID', formDir, 'invalidClientID')"
i18n>The CephX ID is not valid.</span>
</div>
<div class="form-group"
[ngClass]="{'has-error': editPeerForm.showError('monAddr', formDir)}">
<label class="control-label"
for="monAddr">
<span i18n>Monitor Addresses</span>
</label>
<input class="form-control"
type="text"
placeholder="Comma-delimited addresses..."
i18n-placeholder
id="monAddr"
name="monAddr"
formControlName="monAddr">
<span class="help-block"
*ngIf="editPeerForm.showError('monAddr', formDir, 'invalidMonAddr')"
i18n>The monitory address is not valid.</span>
</div>
<div class="form-group"
[ngClass]="{'has-error': editPeerForm.showError('key', formDir)}">
<label class="control-label"
for="key">
<span i18n>CephX Key</span>
</label>
<input class="form-control"
type="text"
placeholder="Base64-encoded key..."
i18n-placeholder
id="key"
name="key"
formControlName="key">
<span class="help-block"
*ngIf="editPeerForm.showError('key', formDir, 'invalidKey')"
i18n>CephX key must be base64 encoded.</span>
</div>
</div>
<div class="modal-footer">
<div class="button-group text-right">
<cd-submit-button i18n
[form]="editPeerForm"
(submitAction)="update()">Submit</cd-submit-button>
<cd-back-button [back]="modalRef.hide"
name="Cancel"
i18n-name>
</cd-back-button>
</div>
</div>
</form>
</ng-container>
</cd-modal>
Legend
Html element with directive