import 15.2.0 Octopus source

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

diff --git a/ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-configuration-form/rbd-configuration-form.component.html b/ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-configuration-form/rbd-configuration-form.component.html
index 7a1a59b161931fa2e2eeebd61270c37ae5a6fa74..a0e3bf8b308ece796eaa0d2e48c94406b20d886f 100644 (file)
--- a/ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-configuration-form/rbd-configuration-form.component.html
+++ b/ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-configuration-form/rbd-configuration-form.component.html
@@ -1,74 +1,71 @@
-<fieldset #cfgFormGroup [formGroup]="form.get('configuration')">
+<fieldset #cfgFormGroup
+          [formGroup]="form.get('configuration')">
   <legend i18n>RBD Configuration</legend>
 
-  <div *ngFor="let section of rbdConfigurationService.sections">
-    <h3 class="page-header">
-      <span
-        (click)="toggleSectionVisibility(section.class)"
-        class="collapsible">{{ section.heading }} <i [ngClass]="{'fa-plus-circle': !sectionVisibility[section.class], 'fa-minus-circle': sectionVisibility[section.class]}" class="fa" aria-hidden="true"></i></span>
+  <div *ngFor="let section of rbdConfigurationService.sections"
+       class="col-12">
+    <h3 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>
     </h3>
-    <div class="{{ section.class }}" [hidden]="!sectionVisibility[section.class]">
-      <div
-        class="form-group"
-        *ngFor="let option of section.options"
-        [ngClass]="{'has-error': form.showError('configuration.' + option.name, cfgFormGroup)}">
-        <label
-          class="control-label col-sm-3"
-          [for]="option.name">{{ option.displayName }}<cd-helper>{{ option.description }}</cd-helper></label>
+    <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="col-sm-9 {{ section.heading }}">
+        <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>
+                <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>
+                <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>
+                <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-btn">
-              <button
-                class="btn btn-default"
-                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 class="fa fa-eraser"
+            <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="help-block"
-            *ngIf="form.showError('configuration.' + option.name, cfgFormGroup, 'min')">The mininum value is 0</span>
+          <span i18n
+                class="invalid-feedback"
+                *ngIf="form.showError('configuration.' + option.name, cfgFormGroup, 'min')">The mininum value is 0</span>
         </div>
       </div>
     </div>