ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/mgr-modules/mgr-module-form/mgr-module-form.component.ts

   1 import { Component, OnInit } from '@angular/core';
   2 import { ValidatorFn, 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 { forkJoin as observableForkJoin } from 'rxjs';
   8
   9 import { MgrModuleService } from '../../../../shared/api/mgr-module.service';
  10 import { NotificationType } from '../../../../shared/enum/notification-type.enum';
  11 import { CdFormBuilder } from '../../../../shared/forms/cd-form-builder';
  12 import { CdFormGroup } from '../../../../shared/forms/cd-form-group';
  13 import { CdValidators } from '../../../../shared/forms/cd-validators';
  14 import { NotificationService } from '../../../../shared/services/notification.service';
  15
  16 @Component({
  17   selector: 'cd-mgr-module-form',
  18   templateUrl: './mgr-module-form.component.html',
  19   styleUrls: ['./mgr-module-form.component.scss']
  20 })
  21 export class MgrModuleFormComponent implements OnInit {
  22   mgrModuleForm: CdFormGroup;
  23   error = false;
  24   loading = false;
  25   moduleName = '';
  26   moduleOptions: any[] = [];
  27
  28   constructor(
  29     private route: ActivatedRoute,
  30     private router: Router,
  31     private formBuilder: CdFormBuilder,
  32     private mgrModuleService: MgrModuleService,
  33     private notificationService: NotificationService,
  34     private i18n: I18n
  35   ) {}
  36
  37   ngOnInit() {
  38     this.route.params.subscribe((params: { name: string }) => {
  39       this.moduleName = decodeURIComponent(params.name);
  40       this.loading = true;
  41       const observables = [
  42         this.mgrModuleService.getOptions(this.moduleName),
  43         this.mgrModuleService.getConfig(this.moduleName)
  44       ];
  45       observableForkJoin(observables).subscribe(
  46         (resp: object) => {
  47           this.loading = false;
  48           this.moduleOptions = resp[0];
  49           // Create the form dynamically.
  50           this.createForm();
  51           // Set the form field values.
  52           this.mgrModuleForm.setValue(resp[1]);
  53         },
  54         (_error) => {
  55           this.error = true;
  56         }
  57       );
  58     });
  59   }
  60
  61   getValidators(moduleOption: any): ValidatorFn[] {
  62     const result = [];
  63     switch (moduleOption.type) {
  64       case 'addr':
  65         result.push(CdValidators.ip());
  66         break;
  67       case 'uint':
  68       case 'int':
  69       case 'size':
  70       case 'secs':
  71         result.push(CdValidators.number());
  72         result.push(Validators.required);
  73         if (_.isNumber(moduleOption.min)) {
  74           result.push(Validators.min(moduleOption.min));
  75         }
  76         if (_.isNumber(moduleOption.max)) {
  77           result.push(Validators.max(moduleOption.max));
  78         }
  79         break;
  80       case 'str':
  81         if (_.isNumber(moduleOption.min)) {
  82           result.push(Validators.minLength(moduleOption.min));
  83         }
  84         if (_.isNumber(moduleOption.max)) {
  85           result.push(Validators.maxLength(moduleOption.max));
  86         }
  87         break;
  88       case 'float':
  89         result.push(Validators.required);
  90         result.push(CdValidators.decimalNumber());
  91         break;
  92       case 'uuid':
  93         result.push(CdValidators.uuid());
  94         break;
  95     }
  96     return result;
  97   }
  98
  99   createForm() {
 100     const controlsConfig = {};
 101     _.forEach(this.moduleOptions, (moduleOption) => {
 102       controlsConfig[moduleOption.name] = [
 103         moduleOption.default_value,
 104         this.getValidators(moduleOption)
 105       ];
 106     });
 107     this.mgrModuleForm = this.formBuilder.group(controlsConfig);
 108   }
 109
 110   goToListView() {
 111     this.router.navigate(['/mgr-modules']);
 112   }
 113
 114   onSubmit() {
 115     // Exit immediately if the form isn't dirty.
 116     if (this.mgrModuleForm.pristine) {
 117       this.goToListView();
 118       return;
 119     }
 120     const config = {};
 121     _.forEach(this.moduleOptions, (moduleOption) => {
 122       const control = this.mgrModuleForm.get(moduleOption.name);
 123       // Append the option only if the value has been modified.
 124       if (control.dirty && control.valid) {
 125         config[moduleOption.name] = control.value;
 126       }
 127     });
 128     this.mgrModuleService.updateConfig(this.moduleName, config).subscribe(
 129       () => {
 130         this.notificationService.show(
 131           NotificationType.success,
 132           this.i18n('Updated options for module "{{name}}".', { name: this.moduleName })
 133         );
 134         this.goToListView();
 135       },
 136       () => {
 137         // Reset the 'Submit' button.
 138         this.mgrModuleForm.setErrors({ cdSubmitButton: true });
 139       }
 140     );
 141   }
 142 }