ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.ts

   1 import { Component, EventEmitter, OnInit } from '@angular/core';
   2 import { FormControl, Validators } from '@angular/forms';
   3 import { ActivatedRoute, Router } from '@angular/router';
   4
   5 import { I18n } from '@ngx-translate/i18n-polyfill';
   6 import * as _ from 'lodash';
   7 import { BsModalService } from 'ngx-bootstrap/modal';
   8 import { forkJoin, Subscription } from 'rxjs';
   9
  10 import { ErasureCodeProfileService } from '../../../shared/api/erasure-code-profile.service';
  11 import { PoolService } from '../../../shared/api/pool.service';
  12 import { CriticalConfirmationModalComponent } from '../../../shared/components/critical-confirmation-modal/critical-confirmation-modal.component';
  13 import { ActionLabelsI18n, URLVerbs } from '../../../shared/constants/app.constants';
  14 import { CdFormGroup } from '../../../shared/forms/cd-form-group';
  15 import { CdValidators } from '../../../shared/forms/cd-validators';
  16 import {
  17   RbdConfigurationEntry,
  18   RbdConfigurationSourceField
  19 } from '../../../shared/models/configuration';
  20 import { CrushRule } from '../../../shared/models/crush-rule';
  21 import { CrushStep } from '../../../shared/models/crush-step';
  22 import { ErasureCodeProfile } from '../../../shared/models/erasure-code-profile';
  23 import { FinishedTask } from '../../../shared/models/finished-task';
  24 import { Permission } from '../../../shared/models/permissions';
  25 import { PoolFormInfo } from '../../../shared/models/pool-form-info';
  26 import { DimlessBinaryPipe } from '../../../shared/pipes/dimless-binary.pipe';
  27 import { AuthStorageService } from '../../../shared/services/auth-storage.service';
  28 import { FormatterService } from '../../../shared/services/formatter.service';
  29 import { TaskWrapperService } from '../../../shared/services/task-wrapper.service';
  30 import { ErasureCodeProfileFormComponent } from '../erasure-code-profile-form/erasure-code-profile-form.component';
  31 import { Pool } from '../pool';
  32 import { PoolFormData } from './pool-form-data';
  33
  34 interface FormFieldDescription {
  35   externalFieldName: string;
  36   formControlName: string;
  37   attr?: string;
  38   replaceFn?: Function;
  39   editable?: boolean;
  40   resetValue?: any;
  41 }
  42
  43 @Component({
  44   selector: 'cd-pool-form',
  45   templateUrl: './pool-form.component.html',
  46   styleUrls: ['./pool-form.component.scss']
  47 })
  48 export class PoolFormComponent implements OnInit {
  49   permission: Permission;
  50   form: CdFormGroup;
  51   ecProfiles: ErasureCodeProfile[];
  52   info: PoolFormInfo;
  53   routeParamsSubscribe: any;
  54   editing = false;
  55   data = new PoolFormData(this.i18n);
  56   externalPgChange = false;
  57   private modalSubscription: Subscription;
  58   current = {
  59     rules: []
  60   };
  61   initializeConfigData = new EventEmitter<{
  62     initialData: RbdConfigurationEntry[];
  63     sourceType: RbdConfigurationSourceField;
  64   }>();
  65   currentConfigurationValues: { [configKey: string]: any } = {};
  66   action: string;
  67   resource: string;
  68
  69   constructor(
  70     private dimlessBinaryPipe: DimlessBinaryPipe,
  71     private route: ActivatedRoute,
  72     private router: Router,
  73     private modalService: BsModalService,
  74     private poolService: PoolService,
  75     private authStorageService: AuthStorageService,
  76     private formatter: FormatterService,
  77     private bsModalService: BsModalService,
  78     private taskWrapper: TaskWrapperService,
  79     private ecpService: ErasureCodeProfileService,
  80     private i18n: I18n,
  81     public actionLabels: ActionLabelsI18n
  82   ) {
  83     this.editing = this.router.url.startsWith(`/pool/${URLVerbs.EDIT}`);
  84     this.action = this.editing ? this.actionLabels.EDIT : this.actionLabels.CREATE;
  85     this.resource = this.i18n('pool');
  86     this.authenticate();
  87     this.createForm();
  88   }
  89
  90   authenticate() {
  91     this.permission = this.authStorageService.getPermissions().pool;
  92     if (
  93       !this.permission.read ||
  94       ((!this.permission.update && this.editing) || (!this.permission.create && !this.editing))
  95     ) {
  96       this.router.navigate(['/404']);
  97     }
  98   }
  99
 100   private createForm() {
 101     const compressionForm = new CdFormGroup({
 102       mode: new FormControl('none'),
 103       algorithm: new FormControl(''),
 104       minBlobSize: new FormControl('', {
 105         updateOn: 'blur'
 106       }),
 107       maxBlobSize: new FormControl('', {
 108         updateOn: 'blur'
 109       }),
 110       ratio: new FormControl('', {
 111         updateOn: 'blur'
 112       })
 113     });
 114
 115     this.form = new CdFormGroup(
 116       {
 117         name: new FormControl('', {
 118           validators: [Validators.pattern(/^[\.A-Za-z0-9_/-]+$/), Validators.required]
 119         }),
 120         poolType: new FormControl('', {
 121           validators: [Validators.required]
 122         }),
 123         crushRule: new FormControl(null, {
 124           validators: [
 125             CdValidators.custom(
 126               'tooFewOsds',
 127               (rule) => this.info && rule && this.info.osd_count < rule.min_size
 128             )
 129           ]
 130         }),
 131         size: new FormControl('', {
 132           updateOn: 'blur'
 133         }),
 134         erasureProfile: new FormControl(null),
 135         pgNum: new FormControl('', {
 136           validators: [Validators.required, Validators.min(1)]
 137         }),
 138         ecOverwrites: new FormControl(false),
 139         compression: compressionForm
 140       },
 141       [
 142         CdValidators.custom('form', () => null),
 143         CdValidators.custom('rbdPool', () => {
 144           return (
 145             this.form &&
 146             this.form.getValue('name').includes('/') &&
 147             this.data &&
 148             this.data.applications.selected.indexOf('rbd') !== -1
 149           );
 150         })
 151       ]
 152     );
 153   }
 154
 155   ngOnInit() {
 156     forkJoin(this.poolService.getInfo(), this.ecpService.list()).subscribe(
 157       (data: [PoolFormInfo, ErasureCodeProfile[]]) => {
 158         this.initInfo(data[0]);
 159         this.initEcp(data[1]);
 160         if (this.editing) {
 161           this.initEditMode();
 162         }
 163         this.listenToChanges();
 164         this.setComplexValidators();
 165       }
 166     );
 167   }
 168
 169   private initInfo(info: PoolFormInfo) {
 170     this.form.silentSet('algorithm', info.bluestore_compression_algorithm);
 171     info.compression_modes.push('unset');
 172     this.info = info;
 173   }
 174
 175   private initEcp(ecProfiles: ErasureCodeProfile[]) {
 176     const control = this.form.get('erasureProfile');
 177     if (ecProfiles.length <= 1) {
 178       control.disable();
 179     }
 180     if (ecProfiles.length === 1) {
 181       control.setValue(ecProfiles[0]);
 182     } else if (ecProfiles.length > 1 && control.disabled) {
 183       control.enable();
 184     }
 185     this.ecProfiles = ecProfiles;
 186   }
 187
 188   private initEditMode() {
 189     this.disableForEdit();
 190     this.routeParamsSubscribe = this.route.params.subscribe((param: { name: string }) =>
 191       this.poolService.get(param.name).subscribe((pool: Pool) => {
 192         this.data.pool = pool;
 193         this.initEditFormData(pool);
 194       })
 195     );
 196   }
 197
 198   private disableForEdit() {
 199     ['poolType', 'crushRule', 'size', 'erasureProfile', 'ecOverwrites'].forEach((controlName) =>
 200       this.form.get(controlName).disable()
 201     );
 202   }
 203
 204   private initEditFormData(pool: Pool) {
 205     this.initializeConfigData.emit({
 206       initialData: pool.configuration,
 207       sourceType: RbdConfigurationSourceField.pool
 208     });
 209
 210     const dataMap = {
 211       name: pool.pool_name,
 212       poolType: pool.type,
 213       crushRule: this.info['crush_rules_' + pool.type].find(
 214         (rule: CrushRule) => rule.rule_name === pool.crush_rule
 215       ),
 216       size: pool.size,
 217       erasureProfile: this.ecProfiles.find((ecp) => ecp.name === pool.erasure_code_profile),
 218       pgNum: pool.pg_num,
 219       ecOverwrites: pool.flags_names.includes('ec_overwrites'),
 220       mode: pool.options.compression_mode,
 221       algorithm: pool.options.compression_algorithm,
 222       minBlobSize: this.dimlessBinaryPipe.transform(pool.options.compression_min_blob_size),
 223       maxBlobSize: this.dimlessBinaryPipe.transform(pool.options.compression_max_blob_size),
 224       ratio: pool.options.compression_required_ratio
 225     };
 226
 227     Object.keys(dataMap).forEach((controlName: string) => {
 228       const value = dataMap[controlName];
 229       if (!_.isUndefined(value) && value !== '') {
 230         this.form.silentSet(controlName, value);
 231       }
 232     });
 233     this.data.applications.selected = pool.application_metadata;
 234   }
 235
 236   private listenToChanges() {
 237     this.listenToChangesDuringAddEdit();
 238     if (!this.editing) {
 239       this.listenToChangesDuringAdd();
 240     }
 241   }
 242
 243   private listenToChangesDuringAddEdit() {
 244     this.form.get('pgNum').valueChanges.subscribe((pgs) => {
 245       const change = pgs - this.data.pgs;
 246       if (Math.abs(change) !== 1 || pgs === 2) {
 247         this.data.pgs = pgs;
 248         return;
 249       }
 250       this.doPgPowerJump(change as 1 | -1);
 251     });
 252   }
 253
 254   private doPgPowerJump(jump: 1 | -1) {
 255     const power = this.calculatePgPower() + jump;
 256     this.setPgs(jump === -1 ? Math.round(power) : Math.floor(power));
 257   }
 258
 259   private calculatePgPower(pgs = this.form.getValue('pgNum')): number {
 260     return Math.log(pgs) / Math.log(2);
 261   }
 262
 263   private setPgs(power: number) {
 264     const pgs = Math.pow(2, power < 0 ? 0 : power); // Set size the nearest accurate size.
 265     this.data.pgs = pgs;
 266     this.form.silentSet('pgNum', pgs);
 267   }
 268
 269   private listenToChangesDuringAdd() {
 270     this.form.get('poolType').valueChanges.subscribe((poolType) => {
 271       this.form.get('size').updateValueAndValidity();
 272       this.rulesChange();
 273       if (poolType === 'replicated') {
 274         this.replicatedRuleChange();
 275       }
 276       this.pgCalc();
 277     });
 278     this.form.get('crushRule').valueChanges.subscribe(() => {
 279       if (this.form.getValue('poolType') === 'replicated') {
 280         this.replicatedRuleChange();
 281       }
 282       this.pgCalc();
 283     });
 284     this.form.get('size').valueChanges.subscribe(() => {
 285       this.pgCalc();
 286     });
 287     this.form.get('erasureProfile').valueChanges.subscribe(() => {
 288       this.pgCalc();
 289     });
 290     this.form.get('mode').valueChanges.subscribe(() => {
 291       ['minBlobSize', 'maxBlobSize', 'ratio'].forEach((name) => {
 292         this.form.get(name).updateValueAndValidity({ emitEvent: false });
 293       });
 294     });
 295     this.form.get('minBlobSize').valueChanges.subscribe(() => {
 296       this.form.get('maxBlobSize').updateValueAndValidity({ emitEvent: false });
 297     });
 298     this.form.get('maxBlobSize').valueChanges.subscribe(() => {
 299       this.form.get('minBlobSize').updateValueAndValidity({ emitEvent: false });
 300     });
 301   }
 302
 303   private rulesChange() {
 304     const poolType = this.form.getValue('poolType');
 305     if (!poolType || !this.info) {
 306       this.current.rules = [];
 307       return;
 308     }
 309     const rules = this.info['crush_rules_' + poolType] || [];
 310     const control = this.form.get('crushRule');
 311     if (rules.length === 1) {
 312       control.setValue(rules[0]);
 313       control.disable();
 314     } else {
 315       control.setValue(null);
 316       control.enable();
 317     }
 318     this.current.rules = rules;
 319   }
 320
 321   private replicatedRuleChange() {
 322     if (this.form.getValue('poolType') !== 'replicated') {
 323       return;
 324     }
 325     const control = this.form.get('size');
 326     let size = this.form.getValue('size') || 3;
 327     const min = this.getMinSize();
 328     const max = this.getMaxSize();
 329     if (size < min) {
 330       size = min;
 331     } else if (size > max) {
 332       size = max;
 333     }
 334     if (size !== control.value) {
 335       this.form.silentSet('size', size);
 336     }
 337   }
 338
 339   getMinSize(): number {
 340     if (!this.info || this.info.osd_count < 1) {
 341       return;
 342     }
 343     const rule = this.form.getValue('crushRule');
 344     if (rule) {
 345       return rule.min_size;
 346     }
 347     return 1;
 348   }
 349
 350   getMaxSize(): number {
 351     if (!this.info || this.info.osd_count < 1) {
 352       return;
 353     }
 354     const osds: number = this.info.osd_count;
 355     if (this.form.getValue('crushRule')) {
 356       const max: number = this.form.get('crushRule').value.max_size;
 357       if (max < osds) {
 358         return max;
 359       }
 360     }
 361     return osds;
 362   }
 363
 364   private pgCalc() {
 365     const poolType = this.form.getValue('poolType');
 366     if (!this.info || this.form.get('pgNum').dirty || !poolType) {
 367       return;
 368     }
 369     const pgMax = this.info.osd_count * 100;
 370     const pgs =
 371       poolType === 'replicated' ? this.replicatedPgCalc(pgMax) : this.erasurePgCalc(pgMax);
 372     if (!pgs) {
 373       return;
 374     }
 375     const oldValue = this.data.pgs;
 376     this.alignPgs(pgs);
 377     const newValue = this.data.pgs;
 378     if (!this.externalPgChange) {
 379       this.externalPgChange = oldValue !== newValue;
 380     }
 381   }
 382
 383   private replicatedPgCalc(pgs): number {
 384     const sizeControl = this.form.get('size');
 385     const size = sizeControl.value;
 386     if (sizeControl.valid && size > 0) {
 387       return pgs / size;
 388     }
 389   }
 390
 391   private erasurePgCalc(pgs): number {
 392     const ecpControl = this.form.get('erasureProfile');
 393     const ecp = ecpControl.value;
 394     if ((ecpControl.valid || ecpControl.disabled) && ecp) {
 395       return pgs / (ecp.k + ecp.m);
 396     }
 397   }
 398
 399   private alignPgs(pgs = this.form.getValue('pgNum')) {
 400     this.setPgs(Math.round(this.calculatePgPower(pgs < 1 ? 1 : pgs)));
 401   }
 402
 403   private setComplexValidators() {
 404     if (this.editing) {
 405       this.form
 406         .get('pgNum')
 407         .setValidators(
 408           CdValidators.custom('noDecrease', (pgs) => this.data.pool && pgs < this.data.pool.pg_num)
 409         );
 410       this.form
 411         .get('name')
 412         .setValidators([
 413           this.form.get('name').validator,
 414           CdValidators.custom(
 415             'uniqueName',
 416             (name) =>
 417               this.data.pool &&
 418               this.info &&
 419               this.info.pool_names.indexOf(name) !== -1 &&
 420               this.info.pool_names.indexOf(name) !==
 421                 this.info.pool_names.indexOf(this.data.pool.pool_name)
 422           )
 423         ]);
 424     } else {
 425       CdValidators.validateIf(
 426         this.form.get('size'),
 427         () => this.form.get('poolType').value === 'replicated',
 428         [
 429           CdValidators.custom(
 430             'min',
 431             (value) => this.form.getValue('size') && value < this.getMinSize()
 432           ),
 433           CdValidators.custom(
 434             'max',
 435             (value) => this.form.getValue('size') && this.getMaxSize() < value
 436           )
 437         ]
 438       );
 439       this.form
 440         .get('name')
 441         .setValidators([
 442           this.form.get('name').validator,
 443           CdValidators.custom(
 444             'uniqueName',
 445             (name) => this.info && this.info.pool_names.indexOf(name) !== -1
 446           )
 447         ]);
 448     }
 449     this.setCompressionValidators();
 450   }
 451
 452   private setCompressionValidators() {
 453     CdValidators.validateIf(this.form.get('minBlobSize'), () => this.hasCompressionEnabled(), [
 454       Validators.min(0),
 455       CdValidators.custom('maximum', (size) =>
 456         this.oddBlobSize(size, this.form.getValue('maxBlobSize'))
 457       )
 458     ]);
 459     CdValidators.validateIf(this.form.get('maxBlobSize'), () => this.hasCompressionEnabled(), [
 460       Validators.min(0),
 461       CdValidators.custom('minimum', (size) =>
 462         this.oddBlobSize(this.form.getValue('minBlobSize'), size)
 463       )
 464     ]);
 465     CdValidators.validateIf(this.form.get('ratio'), () => this.hasCompressionEnabled(), [
 466       Validators.min(0),
 467       Validators.max(1)
 468     ]);
 469   }
 470
 471   private oddBlobSize(minimum, maximum) {
 472     minimum = this.formatter.toBytes(minimum);
 473     maximum = this.formatter.toBytes(maximum);
 474     return Boolean(minimum && maximum && minimum >= maximum);
 475   }
 476
 477   hasCompressionEnabled() {
 478     return this.form.getValue('mode') && this.form.get('mode').value.toLowerCase() !== 'none';
 479   }
 480
 481   describeCrushStep(step: CrushStep) {
 482     return [
 483       step.op.replace('_', ' '),
 484       step.item_name || '',
 485       step.type ? step.num + ' type ' + step.type : ''
 486     ].join(' ');
 487   }
 488
 489   addErasureCodeProfile() {
 490     this.modalSubscription = this.modalService.onHide.subscribe(() => this.reloadECPs());
 491     this.bsModalService.show(ErasureCodeProfileFormComponent);
 492   }
 493
 494   private reloadECPs() {
 495     this.ecpService.list().subscribe((profiles: ErasureCodeProfile[]) => this.initEcp(profiles));
 496     this.modalSubscription.unsubscribe();
 497   }
 498
 499   deleteErasureCodeProfile() {
 500     const ecp = this.form.getValue('erasureProfile');
 501     if (!ecp) {
 502       return;
 503     }
 504     const name = ecp.name;
 505     this.modalSubscription = this.modalService.onHide.subscribe(() => this.reloadECPs());
 506     this.modalService.show(CriticalConfirmationModalComponent, {
 507       initialState: {
 508         itemDescription: this.i18n('erasure code profile'),
 509         submitActionObservable: () =>
 510           this.taskWrapper.wrapTaskAroundCall({
 511             task: new FinishedTask('ecp/delete', { name: name }),
 512             call: this.ecpService.delete(name)
 513           })
 514       }
 515     });
 516   }
 517
 518   submit() {
 519     if (this.form.invalid) {
 520       this.form.setErrors({ cdSubmitButton: true });
 521       return;
 522     }
 523
 524     const pool = { pool: this.form.getValue('name') };
 525
 526     this.assignFormFields(pool, [
 527       { externalFieldName: 'pool_type', formControlName: 'poolType' },
 528       { externalFieldName: 'pg_num', formControlName: 'pgNum', editable: true },
 529       this.form.getValue('poolType') === 'replicated'
 530         ? { externalFieldName: 'size', formControlName: 'size' }
 531         : {
 532             externalFieldName: 'erasure_code_profile',
 533             formControlName: 'erasureProfile',
 534             attr: 'name'
 535           },
 536       { externalFieldName: 'rule_name', formControlName: 'crushRule', attr: 'rule_name' }
 537     ]);
 538
 539     if (this.info.is_all_bluestore) {
 540       this.assignFormField(pool, {
 541         externalFieldName: 'flags',
 542         formControlName: 'ecOverwrites',
 543         replaceFn: () => ['ec_overwrites']
 544       });
 545
 546       if (this.form.getValue('mode') !== 'none') {
 547         this.assignFormFields(pool, [
 548           {
 549             externalFieldName: 'compression_mode',
 550             formControlName: 'mode',
 551             editable: true,
 552             replaceFn: (value) => this.hasCompressionEnabled() && value
 553           },
 554           {
 555             externalFieldName: 'compression_algorithm',
 556             formControlName: 'algorithm',
 557             editable: true
 558           },
 559           {
 560             externalFieldName: 'compression_min_blob_size',
 561             formControlName: 'minBlobSize',
 562             replaceFn: this.formatter.toBytes,
 563             editable: true,
 564             resetValue: 0
 565           },
 566           {
 567             externalFieldName: 'compression_max_blob_size',
 568             formControlName: 'maxBlobSize',
 569             replaceFn: this.formatter.toBytes,
 570             editable: true,
 571             resetValue: 0
 572           },
 573           {
 574             externalFieldName: 'compression_required_ratio',
 575             formControlName: 'ratio',
 576             editable: true,
 577             resetValue: 0
 578           }
 579         ]);
 580       } else if (this.editing) {
 581         this.assignFormFields(pool, [
 582           {
 583             externalFieldName: 'compression_mode',
 584             formControlName: 'mode',
 585             editable: true,
 586             replaceFn: () => 'unset'
 587           },
 588           {
 589             externalFieldName: 'srcpool',
 590             formControlName: 'name',
 591             editable: true,
 592             replaceFn: () => this.data.pool.pool_name
 593           }
 594         ]);
 595       }
 596     }
 597
 598     const apps = this.data.applications.selected;
 599     if (apps.length > 0 || this.editing) {
 600       pool['application_metadata'] = apps;
 601     }
 602
 603     // Only collect configuration data for replicated pools, as QoS cannot be configured on EC
 604     // pools. EC data pools inherit their settings from the corresponding replicated metadata pool.
 605     if (
 606       this.form.get('poolType').value === 'replicated' &&
 607       !_.isEmpty(this.currentConfigurationValues)
 608     ) {
 609       pool['configuration'] = this.currentConfigurationValues;
 610     }
 611
 612     this.triggerApiTask(pool);
 613   }
 614
 615   /**
 616    * Retrieves the values for the given form field descriptions and assigns the values to the given
 617    * object. This method differentiates between `add` and `edit` mode and acts differently on one or
 618    * the other.
 619    */
 620   private assignFormFields(pool: object, formFieldDescription: FormFieldDescription[]): void {
 621     formFieldDescription.forEach((item) => this.assignFormField(pool, item));
 622   }
 623
 624   /**
 625    * Retrieves the value for the given form field description and assigns the values to the given
 626    * object. This method differentiates between `add` and `edit` mode and acts differently on one or
 627    * the other.
 628    */
 629   private assignFormField(
 630     pool: object,
 631     {
 632       externalFieldName,
 633       formControlName,
 634       attr,
 635       replaceFn,
 636       editable,
 637       resetValue
 638     }: FormFieldDescription
 639   ): void {
 640     if (this.editing && (!editable || this.form.get(formControlName).pristine)) {
 641       return;
 642     }
 643     const value = this.form.getValue(formControlName);
 644     let apiValue = replaceFn ? replaceFn(value) : attr ? _.get(value, attr) : value;
 645     if (!value || !apiValue) {
 646       if (editable && !_.isUndefined(resetValue)) {
 647         apiValue = resetValue;
 648       } else {
 649         return;
 650       }
 651     }
 652     pool[externalFieldName] = apiValue;
 653   }
 654
 655   private triggerApiTask(pool) {
 656     this.taskWrapper
 657       .wrapTaskAroundCall({
 658         task: new FinishedTask('pool/' + (this.editing ? URLVerbs.EDIT : URLVerbs.CREATE), {
 659           pool_name: pool.hasOwnProperty('srcpool') ? pool.srcpool : pool.pool
 660         }),
 661         call: this.poolService[this.editing ? URLVerbs.UPDATE : URLVerbs.CREATE](pool)
 662       })
 663       .subscribe(
 664         undefined,
 665         (resp) => {
 666           if (_.isObject(resp.error) && resp.error.code === '34') {
 667             this.form.get('pgNum').setErrors({ '34': true });
 668           }
 669           this.form.setErrors({ cdSubmitButton: true });
 670         },
 671         () => this.router.navigate(['/pool'])
 672       );
 673   }
 674
 675   appSelection() {
 676     this.form.updateValueAndValidity({ emitEvent: false, onlySelf: true });
 677   }
 678 }