mgr/dashboard:Use advanced fieldset for rbd image

Fixes https://tracker.ceph.com/issues/65025

- using cd-advanced-fieldset component for advanced section
- this will align advanced sections of forms in dashboard
- changed heading of sections of rbd-configuration to h5 to better represent it
  as a sub section.
- added unit tests for rbd image config

Signed-off-by: Afreen <afreen23.git@gmail.com>

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
index 62707db349961f17d0bdebe5f034f44f6d169c94..de43588713d27688ea761f10a68f5c88420e28a6 100644 (file)
--- 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
@@ -4,13 +4,13 @@
 
   <div *ngFor="let section of rbdConfigurationService.sections"
        class="col-12">
-    <h4 class="cd-header">
+    <h5 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>
+    </h5>
     <div class="{{ section.class }}"
          [hidden]="!sectionVisibility[section.class]">
       <div class="form-group row"

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-form/rbd-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-form/rbd-form.component.html
index df0d0b8da3d0dee79adc6471b06d2e6f0aaf460a..690eb9c1282cc4b5ba4699149300fd07dee7287c 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-form/rbd-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-form/rbd-form.component.html
@@ -299,92 +299,76 @@
         </div>
 
         <!-- Advanced -->
-        <div class="row">
-          <div class="col-sm-12">
-            <a class="float-end margin-right-md"
-               (click)="advancedEnabled = true; false"
-               *ngIf="!advancedEnabled"
-               href=""
-               i18n>Advanced...</a>
-          </div>
-        </div>
-
-        <div [hidden]="!advancedEnabled">
+        <cd-form-advanced-fieldset>
+          <h4 class="cd-header"
+              i18n>Striping</h4>
 
-          <legend class="cd-header"
-                  i18n>Advanced</legend>
-
-          <div class="col-md-12">
-            <h4 class="cd-header"
-                i18n>Striping</h4>
-
-            <!-- Object Size -->
-            <div class="form-group row">
-              <label i18n
-                     class="cd-col-form-label"
-                     for="size">Object size<cd-helper>Objects in the Ceph Storage Cluster have a maximum configurable size (e.g., 2MB, 4MB, etc.). The object size should be large enough to accommodate many stripe units, and should be a multiple of the stripe unit.</cd-helper></label>
-              <div class="cd-col-form-input">
-                <select id="obj_size"
-                        name="obj_size"
-                        class="form-select"
-                        formControlName="obj_size">
-                  <option *ngFor="let objectSize of objectSizes"
-                          [value]="objectSize">{{ objectSize }}</option>
-                </select>
-              </div>
+          <!-- Object Size -->
+          <div class="form-group row">
+            <label i18n
+                   class="cd-col-form-label"
+                   for="size">Object size<cd-helper>Objects in the Ceph Storage Cluster have a maximum configurable size (e.g., 2MB, 4MB, etc.). The object size should be large enough to accommodate many stripe units, and should be a multiple of the stripe unit.</cd-helper></label>
+            <div class="cd-col-form-input">
+              <select id="obj_size"
+                      name="obj_size"
+                      class="form-select"
+                      formControlName="obj_size">
+                <option *ngFor="let objectSize of objectSizes"
+                        [value]="objectSize">{{ objectSize }}</option>
+              </select>
             </div>
+          </div>
 
-            <!-- stripingUnit -->
-            <div class="form-group row">
-              <label class="cd-col-form-label"
-                     [ngClass]="{'required': rbdForm.getValue('stripingCount')}"
-                     for="stripingUnit"
-                     i18n>Stripe unit<cd-helper>Stripes have a configurable unit size (e.g., 64kb). The Ceph Client divides the data it will write to objects into equally sized stripe units, except for the last stripe unit. A stripe width, should be a fraction of the Object Size so that an object may contain many stripe units.</cd-helper></label>
-              <div class="cd-col-form-input">
-                <select id="stripingUnit"
-                        name="stripingUnit"
-                        class="form-select"
-                        formControlName="stripingUnit">
-                  <option i18n
-                          [ngValue]="null">-- Select stripe unit --</option>
-                  <option *ngFor="let objectSize of objectSizes"
-                          [value]="objectSize">{{ objectSize }}</option>
-                </select>
-                <span class="invalid-feedback"
-                      *ngIf="rbdForm.showError('stripingUnit', formDir, 'required')"
-                      i18n>This field is required because stripe count is defined!</span>
-                <span class="invalid-feedback"
-                      *ngIf="rbdForm.showError('stripingUnit', formDir, 'invalidStripingUnit')"
-                      i18n>Stripe unit is greater than object size.</span>
-              </div>
+          <!-- stripingUnit -->
+          <div class="form-group row">
+            <label class="cd-col-form-label"
+                   [ngClass]="{'required': rbdForm.getValue('stripingCount')}"
+                   for="stripingUnit"
+                   i18n>Stripe unit<cd-helper>Stripes have a configurable unit size (e.g., 64kb). The Ceph Client divides the data it will write to objects into equally sized stripe units, except for the last stripe unit. A stripe width, should be a fraction of the Object Size so that an object may contain many stripe units.</cd-helper></label>
+            <div class="cd-col-form-input">
+              <select id="stripingUnit"
+                      name="stripingUnit"
+                      class="form-select"
+                      formControlName="stripingUnit">
+                <option i18n
+                        [ngValue]="null">-- Select stripe unit --</option>
+                <option *ngFor="let objectSize of objectSizes"
+                        [value]="objectSize">{{ objectSize }}</option>
+              </select>
+              <span class="invalid-feedback"
+                    *ngIf="rbdForm.showError('stripingUnit', formDir, 'required')"
+                    i18n>This field is required because stripe count is defined!</span>
+              <span class="invalid-feedback"
+                    *ngIf="rbdForm.showError('stripingUnit', formDir, 'invalidStripingUnit')"
+                    i18n>Stripe unit is greater than object size.</span>
             </div>
+          </div>
 
-            <!-- Stripe Count -->
-            <div class="form-group row">
-              <label class="cd-col-form-label"
-                     [ngClass]="{'required': rbdForm.getValue('stripingUnit')}"
-                     for="stripingCount"
-                     i18n>Stripe count<cd-helper>The Ceph Client writes a sequence of stripe units over a series of objects determined by the stripe count. The series of objects is called an object set. After the Ceph Client writes to the last object in the object set, it returns to the first object in the object set.</cd-helper></label>
-              <div class="cd-col-form-input">
-                <input id="stripingCount"
-                       name="stripingCount"
-                       formControlName="stripingCount"
-                       class="form-control"
-                       type="number">
-                <span class="invalid-feedback"
-                      *ngIf="rbdForm.showError('stripingCount', formDir, 'required')"
-                      i18n>This field is required because stripe unit is defined!</span>
-                <span class="invalid-feedback"
-                      *ngIf="rbdForm.showError('stripingCount', formDir, 'min')"
-                      i18n>Stripe count must be greater than 0.</span>
-              </div>
+          <!-- Stripe Count -->
+          <div class="form-group row">
+            <label class="cd-col-form-label"
+                   [ngClass]="{'required': rbdForm.getValue('stripingUnit')}"
+                   for="stripingCount"
+                   i18n>Stripe count<cd-helper>The Ceph Client writes a sequence of stripe units over a series of objects determined by the stripe count. The series of objects is called an object set. After the Ceph Client writes to the last object in the object set, it returns to the first object in the object set.</cd-helper></label>
+            <div class="cd-col-form-input">
+              <input id="stripingCount"
+                     name="stripingCount"
+                     formControlName="stripingCount"
+                     class="form-control"
+                     type="number">
+              <span class="invalid-feedback"
+                    *ngIf="rbdForm.showError('stripingCount', formDir, 'required')"
+                    i18n>This field is required because stripe unit is defined!</span>
+              <span class="invalid-feedback"
+                    *ngIf="rbdForm.showError('stripingCount', formDir, 'min')"
+                    i18n>Stripe count must be greater than 0.</span>
             </div>
           </div>
 
           <cd-rbd-configuration-form [form]="rbdForm"
                                      [initializeData]="initializeConfigData"
                                      (changes)="getDirtyConfigurationValues = $event"></cd-rbd-configuration-form>
-        </div>
+        </cd-form-advanced-fieldset>
 
       </div>
       <div class="card-footer">

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-form/rbd-form.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-form/rbd-form.component.spec.ts
index 33b512e4d9ee9231eb367aeca9a39da5fde7c652..7605348d406baf3c3a17958de49a22fc8f8538da 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-form/rbd-form.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-form/rbd-form.component.spec.ts
@@ -293,12 +293,24 @@ describe('RbdFormComponent', () => {
   });
 
   describe('test image configuration component', () => {
-    it('is visible', () => {
+    beforeEach(() => {
+      fixture.detectChanges();
+    });
+    it('is hidden by default under Advanced', () => {
+      fixture.detectChanges();
+      expect(
+        queryNativeElement('cd-rbd-configuration-form')
+          .closest('.accordion-collapse')
+          .classList.contains('show')
+      ).toBeFalsy();
+    });
+
+    it('is visible when Advanced is not collapsed', () => {
+      queryNativeElement('#advanced-fieldset').click();
       fixture.detectChanges();
       expect(
-        fixture.debugElement.query(By.css('cd-rbd-configuration-form')).nativeElement.parentElement
-          .hidden
-      ).toBe(true);
+        queryNativeElement('cd-rbd-configuration-form').closest('.accordion-collapse').classList
+      ).toContain('show');
     });
   });