ceph/src/pybind/mgr/dashboard/frontend/src/app/shared/components/config-option/config-option.component.ts

   1 import { Component, Input, OnInit } from '@angular/core';
   2 import { FormControl, NgForm } from '@angular/forms';
   3
   4 import _ from 'lodash';
   5
   6 import { ConfigurationService } from '~/app/shared/api/configuration.service';
   7 import { Icons } from '~/app/shared/enum/icons.enum';
   8 import { CdFormGroup } from '~/app/shared/forms/cd-form-group';
   9 import { ConfigOptionTypes } from './config-option.types';
  10
  11 @Component({
  12   selector: 'cd-config-option',
  13   templateUrl: './config-option.component.html',
  14   styleUrls: ['./config-option.component.scss']
  15 })
  16 export class ConfigOptionComponent implements OnInit {
  17   @Input()
  18   optionNames: Array<string> = [];
  19   @Input()
  20   optionsForm: CdFormGroup = new CdFormGroup({});
  21   @Input()
  22   optionsFormDir: NgForm = new NgForm([], []);
  23   @Input()
  24   optionsFormGroupName = '';
  25   @Input()
  26   optionsFormShowReset = true;
  27
  28   icons = Icons;
  29   options: Array<any> = [];
  30   optionsFormGroup: CdFormGroup = new CdFormGroup({});
  31
  32   constructor(private configService: ConfigurationService) {}
  33
  34   private static optionNameToText(optionName: string): string {
  35     const sections = ['mon', 'mgr', 'osd', 'mds', 'client'];
  36     return optionName
  37       .split('_')
  38       .filter((c, index) => index !== 0 || !sections.includes(c))
  39       .map((c) => c.charAt(0).toUpperCase() + c.substring(1))
  40       .join(' ');
  41   }
  42
  43   ngOnInit() {
  44     this.createForm();
  45     this.loadStoredData();
  46   }
  47
  48   private createForm() {
  49     this.optionsForm.addControl(this.optionsFormGroupName, this.optionsFormGroup);
  50     this.optionNames.forEach((optionName) => {
  51       this.optionsFormGroup.addControl(optionName, new FormControl(null));
  52     });
  53   }
  54
  55   getStep(type: string, value: any): number | undefined {
  56     return ConfigOptionTypes.getTypeStep(type, value);
  57   }
  58
  59   private loadStoredData() {
  60     this.configService.filter(this.optionNames).subscribe((data: any) => {
  61       this.options = data.map((configOption: any) => {
  62         const formControl = this.optionsForm.get(configOption.name);
  63         const typeValidators = ConfigOptionTypes.getTypeValidators(configOption);
  64         configOption.additionalTypeInfo = ConfigOptionTypes.getType(configOption.type);
  65
  66         // Set general information and value
  67         configOption.text = ConfigOptionComponent.optionNameToText(configOption.name);
  68         configOption.value = _.find(configOption.value, (p) => {
  69           return p.section === 'osd'; // TODO: Can handle any other section
  70         });
  71         if (configOption.value) {
  72           if (configOption.additionalTypeInfo.name === 'bool') {
  73             formControl.setValue(configOption.value.value === 'true');
  74           } else {
  75             formControl.setValue(configOption.value.value);
  76           }
  77         }
  78
  79         // Set type information and validators
  80         if (typeValidators) {
  81           configOption.patternHelpText = typeValidators.patternHelpText;
  82           if ('max' in typeValidators && typeValidators.max !== '') {
  83             configOption.maxValue = typeValidators.max;
  84           }
  85           if ('min' in typeValidators && typeValidators.min !== '') {
  86             configOption.minValue = typeValidators.min;
  87           }
  88           formControl.setValidators(typeValidators.validators);
  89         }
  90
  91         return configOption;
  92       });
  93     });
  94   }
  95
  96   saveValues() {
  97     const options = {};
  98     this.optionNames.forEach((optionName) => {
  99       const optionValue = this.optionsForm.getValue(optionName);
 100       if (optionValue !== null && optionValue !== '') {
 101         options[optionName] = {
 102           section: 'osd', // TODO: Can handle any other section
 103           value: optionValue
 104         };
 105       }
 106     });
 107
 108     return this.configService.bulkCreate({ options: options });
 109   }
 110
 111   resetValue(optionName: string) {
 112     this.configService.delete(optionName, 'osd').subscribe(
 113       // TODO: Can handle any other section
 114       () => {
 115         const formControl = this.optionsForm.get(optionName);
 116         formControl.reset();
 117       }
 118     );
 119   }
 120 }