mgr/dashboard: Add config option component

This commit adds an initial config option component in order to move
the HTML template and the config option types related code to an own
centralized place to be re-usable by other components

Signed-off-by: Tatjana Dehler <tdehler@suse.com>
(cherry picked from commit 1834c68)

src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-configuration-form/rbd-configuration-form.component.html

@@ -57,10 +57,8 @@ <h3 class="page-header">
                 type="button"
                 data-toggle="button"
                 [ngClass]="{'active': isDisabled(option.name)}"
-                tooltip="Remove the local configuration value. The parent configuration value will be inherited and used instead."
-                containerClass="tooltip-wide"
-                [delay]="1000"
-                i18n-tooltip
+                title="Remove the local configuration value. The parent configuration value will be inherited and used instead."
+                i18n-title
                 (click)="reset(option.name)">
                 <i class="fa fa-eraser"
                    aria-hidden="true"></i>

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

@@ -7,9 +7,9 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { ToastModule } from 'ng2-toastr';
 
 import { configureTestBed, i18nProviders } from '../../../../../testing/unit-test-helper';
+import { ConfigFormModel } from '../../../../shared/components/config-option/config-option.model';
 import { SharedModule } from '../../../../shared/shared.module';
 import { ConfigurationFormComponent } from './configuration-form.component';
-import { ConfigFormModel } from './configuration-form.model';
 
 describe('ConfigurationFormComponent', () => {
   let component: ConfigurationFormComponent;
@@ -104,61 +104,4 @@ describe('ConfigurationFormComponent', () => {
       expect(component.maxValue).toBe(5.2);
     });
   });
-
-  describe('getStep', () => {
-    it('should return the correct step for type uint and value 0', () => {
-      const ret = component.getStep('uint', 0);
-      expect(ret).toBe(1);
-    });
-
-    it('should return the correct step for type int and value 1', () => {
-      const ret = component.getStep('int', 1);
-      expect(ret).toBe(1);
-    });
-
-    it('should return the correct step for type int and value null', () => {
-      const ret = component.getStep('int', null);
-      expect(ret).toBe(1);
-    });
-
-    it('should return the correct step for type size and value 2', () => {
-      const ret = component.getStep('size', 2);
-      expect(ret).toBe(1);
-    });
-
-    it('should return the correct step for type secs and value 3', () => {
-      const ret = component.getStep('secs', 3);
-      expect(ret).toBe(1);
-    });
-
-    it('should return the correct step for type float and value 1', () => {
-      const ret = component.getStep('float', 1);
-      expect(ret).toBe(0.1);
-    });
-
-    it('should return the correct step for type float and value 0.1', () => {
-      const ret = component.getStep('float', 0.1);
-      expect(ret).toBe(0.1);
-    });
-
-    it('should return the correct step for type float and value 0.02', () => {
-      const ret = component.getStep('float', 0.02);
-      expect(ret).toBe(0.01);
-    });
-
-    it('should return the correct step for type float and value 0.003', () => {
-      const ret = component.getStep('float', 0.003);
-      expect(ret).toBe(0.001);
-    });
-
-    it('should return the correct step for type float and value null', () => {
-      const ret = component.getStep('float', null);
-      expect(ret).toBe(0.1);
-    });
-
-    it('should return undefined for unknown type', () => {
-      const ret = component.getStep('unknown', 1);
-      expect(ret).toBeUndefined();
-    });
-  });
 });

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

@@ -6,12 +6,12 @@ import { I18n } from '@ngx-translate/i18n-polyfill';
 import * as _ from 'lodash';
 
 import { ConfigurationService } from '../../../../shared/api/configuration.service';
+import { ConfigFormModel } from '../../../../shared/components/config-option/config-option.model';
+import { ConfigOptionTypes } from '../../../../shared/components/config-option/config-option.types';
 import { NotificationType } from '../../../../shared/enum/notification-type.enum';
 import { CdFormGroup } from '../../../../shared/forms/cd-form-group';
 import { NotificationService } from '../../../../shared/services/notification.service';
 import { ConfigFormCreateRequestModel } from './configuration-form-create-request.model';
-import { ConfigFormModel } from './configuration-form.model';
-import { ConfigOptionTypes } from './configuration-form.types';
 
 @Component({
   selector: 'cd-configuration-form',
@@ -84,26 +84,7 @@ export class ConfigurationFormComponent implements OnInit {
   }
 
   getStep(type: string, value: number): number | undefined {
-    const numberTypes = ['uint', 'int', 'size', 'secs'];
-
-    if (numberTypes.includes(type)) {
-      return 1;
-    }
-
-    if (type === 'float') {
-      if (value !== null) {
-        const stringVal = value.toString();
-        if (stringVal.indexOf('.') !== -1) {
-          // Value type float and contains decimal characters
-          const decimal = value.toString().split('.');
-          return Math.pow(10, -decimal[1].length);
-        }
-      }
-
-      return 0.1;
-    }
-
-    return undefined;
+    return ConfigOptionTypes.getTypeStep(type, value);
   }
 
   setResponse(response: ConfigFormModel) {

src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-recv-speed-modal/osd-recv-speed-modal.component.ts

@@ -9,10 +9,10 @@ import { mergeMap } from 'rxjs/operators';
 
 import { ConfigurationService } from '../../../../shared/api/configuration.service';
 import { OsdService } from '../../../../shared/api/osd.service';
+import { ConfigOptionTypes } from '../../../../shared/components/config-option/config-option.types';
 import { NotificationType } from '../../../../shared/enum/notification-type.enum';
 import { CdFormGroup } from '../../../../shared/forms/cd-form-group';
 import { NotificationService } from '../../../../shared/services/notification.service';
-import { ConfigOptionTypes } from '../../configuration/configuration-form/configuration-form.types';
 
 @Component({
   selector: 'cd-osd-recv-speed-modal',

src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts

@@ -12,6 +12,7 @@ import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import { DirectivesModule } from '../directives/directives.module';
 import { PipesModule } from '../pipes/pipes.module';
 import { BackButtonComponent } from './back-button/back-button.component';
+import { ConfigOptionComponent } from './config-option/config-option.component';
 import { ConfirmationModalComponent } from './confirmation-modal/confirmation-modal.component';
 import { CriticalConfirmationModalComponent } from './critical-confirmation-modal/critical-confirmation-modal.component';
 import { ErrorPanelComponent } from './error-panel/error-panel.component';
@@ -63,7 +64,8 @@ import { WarningPanelComponent } from './warning-panel/warning-panel.component';
     GrafanaComponent,
     SelectComponent,
     BackButtonComponent,
-    RefreshSelectorComponent
+    RefreshSelectorComponent,
+    ConfigOptionComponent
   ],
   providers: [],
   exports: [
@@ -82,7 +84,8 @@ import { WarningPanelComponent } from './warning-panel/warning-panel.component';
     LanguageSelectorComponent,
     GrafanaComponent,
     SelectComponent,
-    RefreshSelectorComponent
+    RefreshSelectorComponent,
+    ConfigOptionComponent
   ],
   entryComponents: [ModalComponent, CriticalConfirmationModalComponent, ConfirmationModalComponent]
 })

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

@@ -0,0 +1,72 @@
+<div [formGroup]="optionsFormGroup">
+  <div *ngFor="let option of options; let last = last">
+    <div class="form-group"
+         [ngClass]="{'has-error': optionsForm.showError(option.name, optionsFormDir)}"
+         *ngIf="option.type === 'bool'">
+      <label class="col-sm-6 control-label"
+             [for]="option.name">
+        {{ option.text }}
+        <br>
+        <span class="text-muted">
+          {{ option.desc }}
+          <cd-helper *ngIf="option.long_desc">
+            {{ option.long_desc }}</cd-helper>
+        </span>
+      </label>
+      <div class="col-sm-6 checkbox-primary checkbox">
+        <input type="checkbox"
+               [id]="option.name"
+               [formControlName]="option.name">
+        <label></label>
+      </div>
+    </div>
+    <div class="form-group"
+         [ngClass]="{'has-error': optionsForm.showError(option.name, optionsFormDir)}"
+         *ngIf="option.type !== 'bool'">
+      <label class="col-sm-6 control-label"
+             [for]="option.name">{{ option.text }}
+        <br>
+        <span class="text-muted">
+          {{ option.desc }}
+          <cd-helper *ngIf="option.long_desc">
+            {{ option.long_desc }}</cd-helper>
+        </span>
+      </label>
+      <div class="col-sm-6">
+        <div class="input-group">
+          <input class="form-control"
+                 [type]="option.additionalTypeInfo.inputType"
+                 [id]="option.name"
+                 [placeholder]="option.additionalTypeInfo.humanReadable"
+                 [formControlName]="option.name"
+                 [step]="getStep(option.type, optionsForm.getValue(option.name))">
+          <span class="input-group-btn"
+                *ngIf="optionsFormShowReset">
+            <button class="btn btn-default"
+                    type="button"
+                    data-toggle="button"
+                    title="Remove the custom configuration value. The default configuration will be inherited and used instead."
+                    (click)="resetValue(option.name)"
+                    i18n-title>
+              <i class="fa fa-eraser"
+                 aria-hidden="true"></i>
+            </button>
+          </span>
+        </div>
+        <span class="help-block"
+              *ngIf="optionsForm.showError(option.name, optionsFormDir, 'pattern')">
+          {{ option.additionalTypeInfo.patternHelpText }}</span>
+        <span class="help-block"
+              *ngIf="optionsForm.showError(option.name, optionsFormDir, 'invalidUuid')">
+          {{ option.additionalTypeInfo.patternHelpText }}</span>
+        <span class="help-block"
+              *ngIf="optionsForm.showError(option.name, optionsFormDir, 'max')"
+              i18n>The entered value is too high! It must not be greater than {{ option.maxValue }}.</span>
+        <span class="help-block"
+              *ngIf="optionsForm.showError(option.name, optionsFormDir, 'min')"
+              i18n>The entered value is too low! It must not be lower than {{ option.minValue }}.</span>
+      </div>
+    </div>
+    <hr *ngIf="!last">
+  </div>
+</div>

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

@@ -0,0 +1,30 @@
+hr {
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+
+.control-label {
+  text-align: left;
+}
+
+.checkbox-primary {
+  input {
+    width: 23px;
+    height: 15px;
+    margin-left: 0;
+    cursor: pointer;
+  }
+  label {
+    &:before,
+    &:after {
+      margin-left: 0;
+    }
+    cursor: auto;
+  }
+}
+
+.form-group {
+  .col-sm-6 {
+    padding-top: 7px;
+  }
+}