File

src/app/ceph/block/rbd-snapshot-form/rbd-snapshot-form.component.ts

Implements

OnInit

Metadata

selector cd-rbd-snapshot-form
styleUrls ./rbd-snapshot-form.component.scss
templateUrl ./rbd-snapshot-form.component.html

Index

Properties
Methods

Constructor

constructor(modalRef: BsModalRef, rbdService: RbdService, taskManagerService: TaskManagerService, notificationService: NotificationService)
Parameters :
Name Type Optional
modalRef BsModalRef No
rbdService RbdService No
taskManagerService TaskManagerService No
notificationService NotificationService No

Methods

createAction
createAction()
Returns : void
createForm
createForm()
Returns : void
editAction
editAction()
Returns : void
ngOnInit
ngOnInit()
Returns : void
setEditing
setEditing(editing: boolean)

Set the 'editing' flag. If set to TRUE, the modal dialog is in 'Edit' mode, otherwise in 'Create' mode.

Parameters :
Name Type Optional Default value
editing boolean No true
Returns : void
setSnapName
setSnapName(snapName)
Parameters :
Name Optional
snapName No
Returns : void
submit
submit()
Returns : void

Properties

editing
Default value : false
imageName
Type : string
Public modalRef
Type : BsModalRef
Public onSubmit
Type : Subject<string>
poolName
Type : string
snapName
Type : string
snapshotForm
Type : CdFormGroup
import { Component, OnInit } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';

import { BsModalRef } from 'ngx-bootstrap/modal';
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 { TaskManagerService } from '../../../shared/services/task-manager.service';

@Component({
  selector: 'cd-rbd-snapshot-form',
  templateUrl: './rbd-snapshot-form.component.html',
  styleUrls: ['./rbd-snapshot-form.component.scss']
})
export class RbdSnapshotFormComponent implements OnInit {
  poolName: string;
  imageName: string;
  snapName: string;

  snapshotForm: CdFormGroup;

  editing = false;

  public onSubmit: Subject<string>;

  constructor(
    public modalRef: BsModalRef,
    private rbdService: RbdService,
    private taskManagerService: TaskManagerService,
    private notificationService: NotificationService
  ) {
    this.createForm();
  }

  createForm() {
    this.snapshotForm = new CdFormGroup({
      snapshotName: new FormControl('', {
        validators: [Validators.required]
      })
    });
  }

  ngOnInit() {
    this.onSubmit = new Subject();
  }

  setSnapName(snapName) {
    this.snapName = snapName;
    this.snapshotForm.get('snapshotName').setValue(snapName);
  }

  /**
   * Set the 'editing' flag. If set to TRUE, the modal dialog is in
   * 'Edit' mode, otherwise in 'Create' mode.
   * @param {boolean} editing
   */
  setEditing(editing: boolean = true) {
    this.editing = editing;
  }

  editAction() {
    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
    };
    this.rbdService
      .renameSnapshot(this.poolName, this.imageName, this.snapName, snapshotName)
      .toPromise()
      .then(() => {
        this.taskManagerService.subscribe(
          finishedTask.name,
          finishedTask.metadata,
          (asyncFinishedTask: FinishedTask) => {
            this.notificationService.notifyTask(asyncFinishedTask);
          }
        );
        this.modalRef.hide();
        this.onSubmit.next(this.snapName);
      })
      .catch(() => {
        this.snapshotForm.setErrors({ cdSubmitButton: true });
      });
  }

  createAction() {
    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
    };
    this.rbdService
      .createSnapshot(this.poolName, this.imageName, snapshotName)
      .toPromise()
      .then(() => {
        this.taskManagerService.subscribe(
          finishedTask.name,
          finishedTask.metadata,
          (asyncFinishedTask: FinishedTask) => {
            this.notificationService.notifyTask(asyncFinishedTask);
          }
        );
        this.modalRef.hide();
        this.onSubmit.next(snapshotName);
      })
      .catch(() => {
        this.snapshotForm.setErrors({ cdSubmitButton: true });
      });
  }

  submit() {
    if (this.editing) {
      this.editAction();
    } else {
      this.createAction();
    }
  }
}
<div class="modal-header">
  <h4 class="modal-title pull-left"
      i18n>{ editing, select, true {Rename} other {Create}} RBD Snapshot</h4>
  <button type="button"
          class="close pull-right"
          aria-label="Close"
          (click)="modalRef.hide()">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<form name="snapshotForm"
      class="form-horizontal"
      #formDir="ngForm"
      [formGroup]="snapshotForm"
      novalidate>
  <div class="modal-body">

    <!-- Name -->
    <div class="form-group"
         [ngClass]="{'has-error': snapshotForm.showError('snapshotName', formDir)}">
      <label class="control-label col-sm-3"
             for="snapshotName">
        <ng-container i18n>Name</ng-container>
        <span class="required"></span>
      </label>
      <div class="col-sm-9">
        <input class="form-control"
               type="text"
               placeholder="Snapshot name..."
               id="snapshotName"
               name="snapshotName"
               formControlName="snapshotName"
               autofocus>
        <span class="help-block"
              *ngIf="snapshotForm.showError('snapshotName', formDir, 'required')"
              i18n>This field is required.</span>
      </div>
    </div>

  </div>

  <div class="modal-footer">
    <div class="button-group text-right">
      <cd-submit-button [form]="snapshotForm"
                        (submitAction)="submit()"
                        i18n>{ editing, select, true {Rename} other {Create}} Snapshot</cd-submit-button>
      <cd-back-button [back]="modalRef.hide"
                      name="Close"
                      i18n-name>
      </cd-back-button>
    </div>
  </div>
</form>

./rbd-snapshot-form.component.scss

Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""