From 1a175e0f75187ee6dc242f0fa99fbee414e615ea Mon Sep 17 00:00:00 2001 From: =?utf8?q?Stephan=20M=C3=BCller?= Date: Tue, 19 Jun 2018 14:08:52 +0200 Subject: [PATCH] mgr/dashboard: Use forms in RBD snapshot form MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit Signed-off-by: Stephan Müller --- .../rbd-snapshot-form.component.html | 4 +- .../rbd-snapshot-form.component.ts | 78 +++++++++++-------- 2 files changed, 46 insertions(+), 36 deletions(-) diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-form/rbd-snapshot-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-form/rbd-snapshot-form.component.html index dc277020b0f..38ca9d07f68 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-form/rbd-snapshot-form.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-form/rbd-snapshot-form.component.html @@ -13,7 +13,7 @@
+ [ngClass]="{'has-error': snapshotForm.showError('snapshotName', formDir)}">
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-form/rbd-snapshot-form.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-form/rbd-snapshot-form.component.ts index a0acb1c0bb4..eea9dee561d 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-form/rbd-snapshot-form.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-form/rbd-snapshot-form.component.ts @@ -1,14 +1,13 @@ import { Component, OnInit } from '@angular/core'; -import { FormControl, FormGroup, Validators } from '@angular/forms'; +import { FormControl, Validators } from '@angular/forms'; import { BsModalRef } from 'ngx-bootstrap'; import { Subject } from 'rxjs'; import { RbdService } from '../../../shared/api/rbd.service'; +import { CdFormGroup } from '../../../shared/forms/cd-form-group'; import { FinishedTask } from '../../../shared/models/finished-task'; -import { - NotificationService -} from '../../../shared/services/notification.service'; +import { NotificationService } from '../../../shared/services/notification.service'; import { TaskManagerService } from '../../../shared/services/task-manager.service'; @Component({ @@ -17,30 +16,29 @@ import { TaskManagerService } from '../../../shared/services/task-manager.servic styleUrls: ['./rbd-snapshot-form.component.scss'] }) export class RbdSnapshotFormComponent implements OnInit { - poolName: string; imageName: string; snapName: string; - snapshotForm: FormGroup; + snapshotForm: CdFormGroup; editing = false; public onSubmit: Subject; - constructor(public modalRef: BsModalRef, - private rbdService: RbdService, - private taskManagerService: TaskManagerService, - private notificationService: NotificationService) { + constructor( + public modalRef: BsModalRef, + private rbdService: RbdService, + private taskManagerService: TaskManagerService, + private notificationService: NotificationService + ) { this.createForm(); } createForm() { - this.snapshotForm = new FormGroup({ + this.snapshotForm = new CdFormGroup({ snapshotName: new FormControl('', { - validators: [ - Validators.required - ] + validators: [Validators.required] }) }); } @@ -56,46 +54,58 @@ export class RbdSnapshotFormComponent implements OnInit { } editAction() { - const snapshotName = this.snapshotForm.get('snapshotName').value; + const snapshotName = this.snapshotForm.getValue('snapshotName'); const finishedTask = new FinishedTask(); finishedTask.name = 'rbd/snap/edit'; finishedTask.metadata = { - 'pool_name': this.poolName, - 'image_name': this.imageName, - 'snapshot_name': snapshotName + pool_name: this.poolName, + image_name: this.imageName, + snapshot_name: snapshotName }; - this.rbdService.renameSnapshot(this.poolName, this.imageName, this.snapName, snapshotName) - .toPromise().then((resp) => { - this.taskManagerService.subscribe(finishedTask.name, finishedTask.metadata, + this.rbdService + .renameSnapshot(this.poolName, this.imageName, this.snapName, snapshotName) + .toPromise() + .then((resp) => { + this.taskManagerService.subscribe( + finishedTask.name, + finishedTask.metadata, (asyncFinishedTask: FinishedTask) => { this.notificationService.notifyTask(asyncFinishedTask); - }); + } + ); this.modalRef.hide(); this.onSubmit.next(this.snapName); - }).catch((resp) => { - this.snapshotForm.setErrors({'cdSubmitButton': true}); + }) + .catch((resp) => { + this.snapshotForm.setErrors({ cdSubmitButton: true }); }); } createAction() { - const snapshotName = this.snapshotForm.get('snapshotName').value; + const snapshotName = this.snapshotForm.getValue('snapshotName'); const finishedTask = new FinishedTask(); finishedTask.name = 'rbd/snap/create'; finishedTask.metadata = { - 'pool_name': this.poolName, - 'image_name': this.imageName, - 'snapshot_name': snapshotName + pool_name: this.poolName, + image_name: this.imageName, + snapshot_name: snapshotName }; - this.rbdService.createSnapshot(this.poolName, this.imageName, snapshotName) - .toPromise().then((resp) => { - this.taskManagerService.subscribe(finishedTask.name, finishedTask.metadata, + this.rbdService + .createSnapshot(this.poolName, this.imageName, snapshotName) + .toPromise() + .then((resp) => { + this.taskManagerService.subscribe( + finishedTask.name, + finishedTask.metadata, (asyncFinishedTask: FinishedTask) => { this.notificationService.notifyTask(asyncFinishedTask); - }); + } + ); this.modalRef.hide(); this.onSubmit.next(snapshotName); - }).catch((resp) => { - this.snapshotForm.setErrors({'cdSubmitButton': true}); + }) + .catch((resp) => { + this.snapshotForm.setErrors({ cdSubmitButton: true }); }); } -- 2.39.5