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

   1 import { Component, OnInit } from '@angular/core';
   2 import { UntypedFormControl, UntypedFormGroup, ValidatorFn } from '@angular/forms';
   3 import { ActivatedRoute, Router } from '@angular/router';
   4
   5 import _ from 'lodash';
   6
   7 import { ConfigurationService } from '~/app/shared/api/configuration.service';
   8 import { ConfigFormModel } from '~/app/shared/components/config-option/config-option.model';
   9 import { ConfigOptionTypes } from '~/app/shared/components/config-option/config-option.types';
  10 import { ActionLabelsI18n } from '~/app/shared/constants/app.constants';
  11 import { NotificationType } from '~/app/shared/enum/notification-type.enum';
  12 import { CdForm } from '~/app/shared/forms/cd-form';
  13 import { CdFormGroup } from '~/app/shared/forms/cd-form-group';
  14 import { NotificationService } from '~/app/shared/services/notification.service';
  15 import { ConfigFormCreateRequestModel } from './configuration-form-create-request.model';
  16
  17 @Component({
  18   selector: 'cd-configuration-form',
  19   templateUrl: './configuration-form.component.html',
  20   styleUrls: ['./configuration-form.component.scss']
  21 })
  22 export class ConfigurationFormComponent extends CdForm implements OnInit {
  23   configForm: CdFormGroup;
  24   response: ConfigFormModel;
  25   type: string;
  26   inputType: string;
  27   humanReadableType: string;
  28   minValue: number;
  29   maxValue: number;
  30   patternHelpText: string;
  31   availSections = ['global', 'mon', 'mgr', 'osd', 'mds', 'client'];
  32
  33   constructor(
  34     public actionLabels: ActionLabelsI18n,
  35     private route: ActivatedRoute,
  36     private router: Router,
  37     private configService: ConfigurationService,
  38     private notificationService: NotificationService
  39   ) {
  40     super();
  41     this.createForm();
  42   }
  43
  44   createForm() {
  45     const formControls = {
  46       name: new UntypedFormControl({ value: null }),
  47       desc: new UntypedFormControl({ value: null }),
  48       long_desc: new UntypedFormControl({ value: null }),
  49       values: new UntypedFormGroup({}),
  50       default: new UntypedFormControl({ value: null }),
  51       daemon_default: new UntypedFormControl({ value: null }),
  52       services: new UntypedFormControl([])
  53     };
  54
  55     this.availSections.forEach((section) => {
  56       formControls.values.addControl(section, new UntypedFormControl(null));
  57     });
  58
  59     this.configForm = new CdFormGroup(formControls);
  60   }
  61
  62   ngOnInit() {
  63     this.route.params.subscribe((params: { name: string }) => {
  64       const configName = params.name;
  65       this.configService.get(configName).subscribe((resp: ConfigFormModel) => {
  66         this.setResponse(resp);
  67         this.loadingReady();
  68       });
  69     });
  70   }
  71
  72   getValidators(configOption: any): ValidatorFn[] {
  73     const typeValidators = ConfigOptionTypes.getTypeValidators(configOption);
  74     if (typeValidators) {
  75       this.patternHelpText = typeValidators.patternHelpText;
  76
  77       if ('max' in typeValidators && typeValidators.max !== '') {
  78         this.maxValue = typeValidators.max;
  79       }
  80
  81       if ('min' in typeValidators && typeValidators.min !== '') {
  82         this.minValue = typeValidators.min;
  83       }
  84
  85       return typeValidators.validators;
  86     }
  87
  88     return undefined;
  89   }
  90
  91   getStep(type: string, value: number): number | undefined {
  92     return ConfigOptionTypes.getTypeStep(type, value);
  93   }
  94
  95   setResponse(response: ConfigFormModel) {
  96     this.response = response;
  97     const validators = this.getValidators(response);
  98
  99     this.configForm.get('name').setValue(response.name);
 100     this.configForm.get('desc').setValue(response.desc);
 101     this.configForm.get('long_desc').setValue(response.long_desc);
 102     this.configForm.get('default').setValue(response.default);
 103     this.configForm.get('daemon_default').setValue(response.daemon_default);
 104     this.configForm.get('services').setValue(response.services);
 105
 106     if (this.response.value) {
 107       this.response.value.forEach((value) => {
 108         // Check value type. If it's a boolean value we need to convert it because otherwise we
 109         // would use the string representation. That would cause issues for e.g. checkboxes.
 110         let sectionValue = null;
 111         if (value.value === 'true') {
 112           sectionValue = true;
 113         } else if (value.value === 'false') {
 114           sectionValue = false;
 115         } else {
 116           sectionValue = value.value;
 117         }
 118         this.configForm.get('values').get(value.section).setValue(sectionValue);
 119       });
 120     }
 121
 122     this.availSections.forEach((section) => {
 123       this.configForm.get('values').get(section).setValidators(validators);
 124     });
 125
 126     const currentType = ConfigOptionTypes.getType(response.type);
 127     this.type = currentType.name;
 128     this.inputType = currentType.inputType;
 129     this.humanReadableType = currentType.humanReadable;
 130   }
 131
 132   createRequest(): ConfigFormCreateRequestModel | null {
 133     const values: any[] = [];
 134
 135     this.availSections.forEach((section) => {
 136       const sectionValue = this.configForm.getValue(section);
 137       if (sectionValue !== null && sectionValue !== '') {
 138         values.push({ section: section, value: sectionValue });
 139       }
 140     });
 141
 142     if (!_.isEqual(this.response.value, values)) {
 143       const request = new ConfigFormCreateRequestModel();
 144       request.name = this.configForm.getValue('name');
 145       request.value = values;
 146       return request;
 147     }
 148
 149     return null;
 150   }
 151
 152   submit() {
 153     const request = this.createRequest();
 154
 155     if (request) {
 156       this.configService.create(request).subscribe(
 157         () => {
 158           this.notificationService.show(
 159             NotificationType.success,
 160             $localize`Updated config option ${request.name}`
 161           );
 162           this.router.navigate(['/configuration']);
 163         },
 164         () => {
 165           this.configForm.setErrors({ cdSubmitButton: true });
 166         }
 167       );
 168     }
 169
 170     this.router.navigate(['/configuration']);
 171   }
 172 }