Skip to content

Commit

Permalink
mgr/dashboard: Use forms in RBD form
Browse files Browse the repository at this point in the history 
Signed-off-by: Stephan Müller <[email protected]>
  • Loading branch information
Stephan Müller committed Jul 3, 2018
1 parent db9d15f commit 870a3ac
Show file tree
Hide file tree
Showing 2 changed files with 63 additions and 62 deletions.
40 changes: 20 additions & 20 deletions src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-form/rbd-form.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ <h3 class="panel-title">

<!-- Parent -->
<div class="form-group"
*ngIf="rbdForm.controls.parent.value">
*ngIf="rbdForm.getValue('parent')">
<label i18n
class="control-label col-sm-3"
for="name">{mode, select, cloning {Clone from} copying {Copy from} other {Parent}}
Expand All @@ -41,7 +41,7 @@ <h3 class="panel-title">

<!-- Name -->
<div class="form-group"
[ngClass]="{'has-error': (formDir.submitted || rbdForm.controls.name.dirty) && rbdForm.controls.name.invalid}">
[ngClass]="{'has-error': rbdForm.showError('name', formDir)}">
<label i18n
class="control-label col-sm-3"
for="name">Name
Expand All @@ -57,15 +57,15 @@ <h3 class="panel-title">
autofocus>
<span i18n
class="help-block"
*ngIf="(formDir.submitted || rbdForm.controls.name.dirty) && rbdForm.controls.name.hasError('required')">
*ngIf="rbdForm.showError('name', formDir, 'required')">
This field is required.
</span>
</div>
</div>

<!-- Pool -->
<div class="form-group"
[ngClass]="{'has-error': (formDir.submitted || rbdForm.controls.pool.dirty) && rbdForm.controls.pool.invalid}"
[ngClass]="{'has-error': rbdForm.showError('pool', formDir)}"
(change)="onPoolChange($event.target.value)">
<label class="control-label col-sm-3"
for="pool">
Expand Down Expand Up @@ -100,7 +100,7 @@ <h3 class="panel-title">
</select>
<span i18n
class="help-block"
*ngIf="(formDir.submitted || rbdForm.controls.pool.dirty) && rbdForm.controls.pool.hasError('required')">
*ngIf="rbdForm.showError('pool', formDir, 'required')">
This field is required.
</span>
</div>
Expand All @@ -123,8 +123,8 @@ <h3 class="panel-title">

<!-- Data Pool -->
<div class="form-group"
[ngClass]="{'has-error': (formDir.submitted || rbdForm.controls.dataPool.dirty) && rbdForm.controls.dataPool.invalid}"
*ngIf="rbdForm.controls.useDataPool.value">
[ngClass]="{'has-error': rbdForm.showError('dataPool', formDir)}"
*ngIf="rbdForm.getValue('useDataPool')">
<label class="control-label col-sm-3"
for="dataPool">
Data pool
Expand Down Expand Up @@ -162,15 +162,15 @@ <h3 class="panel-title">
</select>
<span i18n
class="help-block"
*ngIf="(formDir.submitted || rbdForm.controls.dataPool.dirty) && rbdForm.controls.dataPool.hasError('required')">
*ngIf="rbdForm.showError('dataPool', formDir, 'required')">
This field is required.
</span>
</div>
</div>

<!-- Size -->
<div class="form-group"
[ngClass]="{'has-error': (formDir.submitted || rbdForm.controls.size.dirty) && rbdForm.controls.size.invalid}">
[ngClass]="{'has-error': rbdForm.showError('size', formDir)}">
<label i18n
class="control-label col-sm-3"
for="size">Size
Expand All @@ -188,12 +188,12 @@ <h3 class="panel-title">
cdDimlessBinary>
<span i18n
class="help-block"
*ngIf="(formDir.submitted || rbdForm.controls.size.dirty) && rbdForm.controls.size.hasError('required')">
*ngIf="rbdForm.showError('size', formDir, 'required')">
This field is required.
</span>
<span i18n
class="help-block"
*ngIf="(formDir.submitted || rbdForm.controls.size.dirty) && rbdForm.controls.size.hasError('invalidSizeObject')">
*ngIf="rbdForm.showError('size', formDir, 'invalidSizeObject')">
You have to increase the size.
</span>
</div>
Expand Down Expand Up @@ -241,7 +241,7 @@ <h3 class="panel-title">

<!-- Object Size -->
<div class="form-group"
[ngClass]="{'has-error': (formDir.submitted || rbdForm.controls.obj_size.dirty) && rbdForm.controls.obj_size.invalid}">
[ngClass]="{'has-error': rbdForm.showError('obj_size', formDir)}">
<label i18n
class="control-label col-sm-3"
for="size">Object size
Expand All @@ -259,11 +259,11 @@ <h3 class="panel-title">

<!-- Strippe Unit -->
<div class="form-group"
[ngClass]="{'has-error': (formDir.submitted || rbdForm.controls.stripingUnit.dirty) && rbdForm.controls.stripingUnit.invalid}">
[ngClass]="{'has-error': rbdForm.showError('stripingUnit', formDir)}">
<label class="control-label col-sm-3"
for="stripingUnit">
<span i18n>Stripe unit</span><span class="required"
*ngIf="rbdForm.controls.stripingCount.value !== null"></span>
*ngIf="rbdForm.getValue('stripingCount')"></span>
</label>
<div class="col-sm-9">
<select id="stripingUnit"
Expand All @@ -276,24 +276,24 @@ <h3 class="panel-title">
</select>
<span i18n
class="help-block"
*ngIf="(formDir.submitted || rbdForm.controls.stripingUnit.dirty) && rbdForm.controls.stripingUnit.hasError('required')">
*ngIf="rbdForm.showError('stripingUnit', formDir, 'required')">
This field is required because stripe count is defined!
</span>
<span i18n
class="help-block"
*ngIf="(formDir.submitted || rbdForm.controls.stripingUnit.dirty) && rbdForm.controls.stripingUnit.hasError('invalidStripingUnit')">
*ngIf="rbdForm.showError('stripingUnit', formDir, 'invalidStripingUnit')">
Stripe unit is greater than object size.
</span>
</div>
</div>

<!-- Strippe Count -->
<div class="form-group"
[ngClass]="{'has-error': (formDir.submitted || rbdForm.controls.stripingCount.dirty) && rbdForm.controls.stripingCount.invalid}">
[ngClass]="{'has-error': rbdForm.showError('stripingCount', formDir)}">
<label class="control-label col-sm-3"
for="stripingCount">
<span i18n>Stripe count</span><span class="required"
*ngIf="rbdForm.controls.stripingUnit.value !== null"></span>
*ngIf="rbdForm.getValue('stripingUnit')"></span>
</label>
<div class="col-sm-9">
<input id="stripingCount"
Expand All @@ -303,12 +303,12 @@ <h3 class="panel-title">
type="number">
<span i18n
class="help-block"
*ngIf="(formDir.submitted || rbdForm.controls.stripingCount.dirty) && rbdForm.controls.stripingCount.hasError('required')">
*ngIf="rbdForm.showError('stripingCount', formDir, 'required')">
This field is required because stripe unit is defined!
</span>
<span i18n
class="help-block"
*ngIf="(formDir.submitted || rbdForm.controls.stripingCount.dirty) && rbdForm.controls.stripingCount.hasError('min')">
*ngIf="rbdForm.showError('stripingCount', formDir, 'min')">
Stripe count must be greater than 0.
</span>
</div>
Expand Down
85 changes: 43 additions & 42 deletions src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-form/rbd-form.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, ValidatorFn, Validators } from '@angular/forms';
import { FormControl, ValidatorFn, Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';

import * as _ from 'lodash';
import { Observable } from 'rxjs/Observable';

import { PoolService } from '../../../shared/api/pool.service';
import { RbdService } from '../../../shared/api/rbd.service';
import { CdFormGroup } from '../../../shared/forms/cd-form-group';
import { FinishedTask } from '../../../shared/models/finished-task';
import { Permission } from '../../../shared/models/permissions';
import { DimlessBinaryPipe } from '../../../shared/pipes/dimless-binary.pipe';
Expand All @@ -27,8 +28,8 @@ import { RbdFormResponseModel } from './rbd-form-response.model';
})
export class RbdFormComponent implements OnInit {
poolPermission: Permission;
rbdForm: FormGroup;
featuresFormGroups: FormGroup;
rbdForm: CdFormGroup;
featuresFormGroups: CdFormGroup;
deepFlattenFormControl: FormControl;
layeringFormControl: FormControl;
exclusiveLockFormControl: FormControl;
Expand Down Expand Up @@ -136,15 +137,15 @@ export class RbdFormComponent implements OnInit {
this.objectMapFormControl = new FormControl({ value: false, disabled: true });
this.journalingFormControl = new FormControl({ value: false, disabled: true });
this.fastDiffFormControl = new FormControl({ value: false, disabled: true });
this.featuresFormGroups = new FormGroup({
this.featuresFormGroups = new CdFormGroup({
'deep-flatten': this.deepFlattenFormControl,
layering: this.layeringFormControl,
'exclusive-lock': this.exclusiveLockFormControl,
'object-map': this.objectMapFormControl,
journaling: this.journalingFormControl,
'fast-diff': this.fastDiffFormControl
});
this.rbdForm = new FormGroup(
this.rbdForm = new CdFormGroup(
{
parent: new FormControl(''),
name: new FormControl('', {
Expand Down Expand Up @@ -272,14 +273,14 @@ export class RbdFormComponent implements OnInit {
const newDataPools = this.allDataPools.filter((dataPool: any) => {
return dataPool.pool_name !== selectedPoolName;
});
if (this.rbdForm.get('dataPool').value === selectedPoolName) {
if (this.rbdForm.getValue('dataPool') === selectedPoolName) {
this.rbdForm.get('dataPool').setValue(null);
}
this.dataPools = newDataPools;
}

onUseDataPoolChange() {
if (!this.rbdForm.get('useDataPool').value) {
if (!this.rbdForm.getValue('useDataPool')) {
this.rbdForm.get('dataPool').setValue(null);
this.onDataPoolChange(null);
}
Expand All @@ -289,14 +290,14 @@ export class RbdFormComponent implements OnInit {
const newPools = this.allPools.filter((pool: any) => {
return pool.pool_name !== selectedDataPoolName;
});
if (this.rbdForm.get('pool').value === selectedDataPoolName) {
if (this.rbdForm.getValue('pool') === selectedDataPoolName) {
this.rbdForm.get('pool').setValue(null);
}
this.pools = newPools;
}

validateRbdForm(formatter: FormatterService): ValidatorFn {
return (formGroup: FormGroup) => {
return (formGroup: CdFormGroup) => {
// Data Pool
const useDataPoolControl = formGroup.get('useDataPool');
const dataPoolControl = formGroup.get('dataPool');
Expand Down Expand Up @@ -351,19 +352,19 @@ export class RbdFormComponent implements OnInit {
_.forIn(this.features, (details, feature) => {
if (details.requires === key) {
if (checked) {
this.featuresFormGroups.get(feature).enable();
this.rbdForm.get(feature).enable();
} else {
this.featuresFormGroups.get(feature).disable();
this.featuresFormGroups.get(feature).setValue(checked);
this.rbdForm.get(feature).disable();
this.rbdForm.get(feature).setValue(checked);
this.watchDataFeatures(feature, checked);
this.deepBoxCheck(feature, checked);
}
}
if (this.mode === this.rbdFormMode.editing && this.featuresFormGroups.get(feature).enabled) {
if (this.mode === this.rbdFormMode.editing && this.rbdForm.get(feature).enabled) {
if (this.response.features_name.indexOf(feature) !== -1 && !details.allowDisable) {
this.featuresFormGroups.get(feature).disable();
this.rbdForm.get(feature).disable();
} else if (this.response.features_name.indexOf(feature) === -1 && !details.allowEnable) {
this.featuresFormGroups.get(feature).disable();
this.rbdForm.get(feature).disable();
}
}
});
Expand All @@ -372,8 +373,8 @@ export class RbdFormComponent implements OnInit {
featureFormUpdate(key, checked) {
if (checked) {
const required = this.features[key].requires;
if (required && !this.featuresFormGroups.get(required).value) {
this.featuresFormGroups.get(key).setValue(false);
if (required && !this.rbdForm.getValue(required)) {
this.rbdForm.get(key).setValue(false);
return;
}
}
Expand Down Expand Up @@ -429,18 +430,18 @@ export class RbdFormComponent implements OnInit {

createRequest() {
const request = new RbdFormCreateRequestModel();
request.pool_name = this.rbdForm.get('pool').value;
request.name = this.rbdForm.get('name').value;
request.size = this.formatter.toBytes(this.rbdForm.get('size').value);
request.obj_size = this.formatter.toBytes(this.rbdForm.get('obj_size').value);
request.pool_name = this.rbdForm.getValue('pool');
request.name = this.rbdForm.getValue('name');
request.size = this.formatter.toBytes(this.rbdForm.getValue('size'));
request.obj_size = this.formatter.toBytes(this.rbdForm.getValue('obj_size'));
_.forIn(this.features, (feature) => {
if (this.featuresFormGroups.get(feature.key).value) {
if (this.rbdForm.getValue(feature.key)) {
request.features.push(feature.key);
}
});
request.stripe_unit = this.formatter.toBytes(this.rbdForm.get('stripingUnit').value);
request.stripe_count = this.rbdForm.get('stripingCount').value;
request.data_pool = this.rbdForm.get('dataPool').value;
request.stripe_unit = this.formatter.toBytes(this.rbdForm.getValue('stripingUnit'));
request.stripe_count = this.rbdForm.getValue('stripingCount');
request.data_pool = this.rbdForm.getValue('dataPool');
return request;
}

Expand All @@ -457,10 +458,10 @@ export class RbdFormComponent implements OnInit {

editRequest() {
const request = new RbdFormEditRequestModel();
request.name = this.rbdForm.get('name').value;
request.size = this.formatter.toBytes(this.rbdForm.get('size').value);
request.name = this.rbdForm.getValue('name');
request.size = this.formatter.toBytes(this.rbdForm.getValue('size'));
_.forIn(this.features, (feature) => {
if (this.featuresFormGroups.get(feature.key).value) {
if (this.rbdForm.getValue(feature.key)) {
request.features.push(feature.key);
}
});
Expand All @@ -469,17 +470,17 @@ export class RbdFormComponent implements OnInit {

cloneRequest(): RbdFormCloneRequestModel {
const request = new RbdFormCloneRequestModel();
request.child_pool_name = this.rbdForm.get('pool').value;
request.child_image_name = this.rbdForm.get('name').value;
request.obj_size = this.formatter.toBytes(this.rbdForm.get('obj_size').value);
request.child_pool_name = this.rbdForm.getValue('pool');
request.child_image_name = this.rbdForm.getValue('name');
request.obj_size = this.formatter.toBytes(this.rbdForm.getValue('obj_size'));
_.forIn(this.features, (feature) => {
if (this.featuresFormGroups.get(feature.key).value) {
if (this.rbdForm.getValue(feature.key)) {
request.features.push(feature.key);
}
});
request.stripe_unit = this.formatter.toBytes(this.rbdForm.get('stripingUnit').value);
request.stripe_count = this.rbdForm.get('stripingCount').value;
request.data_pool = this.rbdForm.get('dataPool').value;
request.stripe_unit = this.formatter.toBytes(this.rbdForm.getValue('stripingUnit'));
request.stripe_count = this.rbdForm.getValue('stripingCount');
request.data_pool = this.rbdForm.getValue('dataPool');
return request;
}

Expand Down Expand Up @@ -517,17 +518,17 @@ export class RbdFormComponent implements OnInit {
if (this.snapName) {
request.snapshot_name = this.snapName;
}
request.dest_pool_name = this.rbdForm.get('pool').value;
request.dest_image_name = this.rbdForm.get('name').value;
request.obj_size = this.formatter.toBytes(this.rbdForm.get('obj_size').value);
request.dest_pool_name = this.rbdForm.getValue('pool');
request.dest_image_name = this.rbdForm.getValue('name');
request.obj_size = this.formatter.toBytes(this.rbdForm.getValue('obj_size'));
_.forIn(this.features, (feature) => {
if (this.featuresFormGroups.get(feature.key).value) {
if (this.rbdForm.getValue(feature.key)) {
request.features.push(feature.key);
}
});
request.stripe_unit = this.formatter.toBytes(this.rbdForm.get('stripingUnit').value);
request.stripe_count = this.rbdForm.get('stripingCount').value;
request.data_pool = this.rbdForm.get('dataPool').value;
request.stripe_unit = this.formatter.toBytes(this.rbdForm.getValue('stripingUnit'));
request.stripe_count = this.rbdForm.getValue('stripingCount');
request.data_pool = this.rbdForm.getValue('dataPool');
return request;
}

Expand Down

0 comments on commit 870a3ac

Please sign in to comment.