1 files changed, 75 insertions, 0 deletions
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/config-option/config-option.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/config-option/config-option.component.html
new file mode 100644
index 000000000..9c88b5b71
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/config-option/config-option.component.html
@@ -0,0 +1,75 @@
+<div [formGroup]="optionsFormGroup">
+  <div *ngFor="let option of options; let last = last">
+    <div class="form-group row pt-2"
+         *ngIf="option.type === 'bool'">
+      <label class="cd-col-form-label"
+             [for]="option.name">
+        <b>{{ option.text }}</b>
+        <br>
+        <span class="text-muted">
+          {{ option.desc }}
+          <cd-helper *ngIf="option.long_desc">
+            {{ option.long_desc }}</cd-helper>
+        </span>
+      </label>
+
+      <div class="cd-col-form-input">
+        <div class="custom-control custom-checkbox">
+          <input class="custom-control-input"
+                 type="checkbox"
+                 [id]="option.name"
+                 [formControlName]="option.name">
+          <label class="custom-control-label"
+                 [for]="option.name"></label>
+        </div>
+      </div>
+    </div>
+
+    <div class="form-group row pt-2"
+         *ngIf="option.type !== 'bool'">
+      <label class="cd-col-form-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="cd-col-form-input">
+        <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))">
+          <button class="btn btn-light"
+                  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
+                  *ngIf="optionsFormShowReset">
+            <i [ngClass]="[icons.erase]"
+               aria-hidden="true"></i>
+          </button>
+        </div>
+        <span class="invalid-feedback"
+              *ngIf="optionsForm.showError(option.name, optionsFormDir, 'pattern')">
+          {{ option.additionalTypeInfo.patternHelpText }}</span>
+        <span class="invalid-feedback"
+              *ngIf="optionsForm.showError(option.name, optionsFormDir, 'invalidUuid')">
+          {{ option.additionalTypeInfo.patternHelpText }}</span>
+        <span class="invalid-feedback"
+              *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="invalid-feedback"
+              *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"
+        class="my-2">
+  </div>
+</div>