From: Afreen <afreen23.git@gmail.com>
Date: Wed, 27 Mar 2024 09:35:58 +0000 (+0530)
Subject: mgr/dashboard:Use advanced fieldset for rbd image
X-Git-Tag: v18.2.4~61^2
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=6fd300dd62dc5fa861b4fb5d0981aaebad5f081d;p=ceph.git

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>
(cherry picked from commit 25552117b433dbe39bf245aeda99761def5749eb)
---

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 62707db34996..de43588713d2 100644
--- 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 df0d0b8da3d0..690eb9c1282c 100644
--- 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 33b512e4d9ee..7605348d406b 100644
--- 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');
     });
   });