1 files changed, 74 insertions, 0 deletions
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-configuration-form/rbd-configuration-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-configuration-form/rbd-configuration-form.component.html
new file mode 100644
index 000000000..130aa3286
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-configuration-form/rbd-configuration-form.component.html
@@ -0,0 +1,74 @@
+<fieldset #cfgFormGroup
+          [formGroup]="form.get('configuration')">
+  <legend i18n>RBD Configuration</legend>
+
+  <div *ngFor="let section of rbdConfigurationService.sections"
+       class="col-12">
+    <h4 class="cd-header">
+      <span (click)="toggleSectionVisibility(section.class)"
+            class="collapsible">
+        {{ section.heading }} <i [ngClass]="!sectionVisibility[section.class] ? icons.addCircle : icons.minusCircle"
+                                 aria-hidden="true"></i>
+      </span>
+    </h4>
+    <div class="{{ section.class }}"
+         [hidden]="!sectionVisibility[section.class]">
+      <div class="form-group row"
+           *ngFor="let option of section.options">
+        <label class="cd-col-form-label"
+               [for]="option.name">{{ option.displayName }}<cd-helper>{{ option.description }}</cd-helper></label>
+
+        <div class="cd-col-form-input {{ section.heading }}">
+          <div class="input-group">
+            <ng-container [ngSwitch]="option.type">
+              <ng-container *ngSwitchCase="configurationType.milliseconds">
+                <input [id]="option.name"
+                       [name]="option.name"
+                       [formControlName]="option.name"
+                       type="text"
+                       class="form-control"
+                       [ngDataReady]="ngDataReady"
+                       cdMilliseconds>
+              </ng-container>
+              <ng-container *ngSwitchCase="configurationType.bps">
+                <input [id]="option.name"
+                       [name]="option.name"
+                       [formControlName]="option.name"
+                       type="text"
+                       class="form-control"
+                       defaultUnit="b"
+                       [ngDataReady]="ngDataReady"
+                       cdDimlessBinaryPerSecond>
+              </ng-container>
+              <ng-container *ngSwitchCase="configurationType.iops">
+                <input [id]="option.name"
+                       [name]="option.name"
+                       [formControlName]="option.name"
+                       type="text"
+                       class="form-control"
+                       [ngDataReady]="ngDataReady"
+                       cdIops>
+              </ng-container>
+            </ng-container>
+            <span class="input-group-append">
+              <button class="btn btn-light"
+                      type="button"
+                      data-toggle="button"
+                      [ngClass]="{'active': isDisabled(option.name)}"
+                      title="Remove the local configuration value. The parent configuration value will be inherited and used instead."
+                      i18n-title
+                      (click)="reset(option.name)">
+                <i [ngClass]="[icons.erase]"
+                   aria-hidden="true"></i>
+              </button>
+            </span>
+          </div>
+          <span i18n
+                class="invalid-feedback"
+                *ngIf="form.showError('configuration.' + option.name, cfgFormGroup, 'min')">The minimum value is 0</span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</fieldset>