mgr/dashboard: Use forms in RBD snapshot form

Signed-off-by: Stephan Müller <smueller@suse.com>

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 dc277020b0fed18b5934326cb58df98503d152f6..38ca9d07f688c56fc4392ff687c8982c9cfddf09 100644 (file)
--- 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 @@
 
     <!-- Name -->
     <div class="form-group"
-         [ngClass]="{'has-error': (formDir.submitted || snapshotForm.controls.snapshotName.dirty) && snapshotForm.controls.snapshotName.invalid}">
+         [ngClass]="{'has-error': snapshotForm.showError('snapshotName', formDir)}">
       <label i18n
              class="control-label col-sm-3"
              for="snapshotName">Name
@@ -29,7 +29,7 @@
                autofocus>
         <span i18n
               class="help-block"
-              *ngIf="(formDir.submitted || snapshotForm.controls.snapshotName.dirty) && snapshotForm.controls.snapshotName.hasError('required')">
+              *ngIf="snapshotForm.showError('snapshotName', formDir, 'required')">
               This field is required.
             </span>
       </div>

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 a0acb1c0bb4fc6bf9e565e1c1dc512a705eb6c22..eea9dee561d1a3538fa04b7f21b060b27ffa9846 100644 (file)
--- 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<string>;
 
-  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 });
       });
   }