Skip to content

Commit cde67a7

Browse files
nizamial09nizamial09
authored
Merge pull request ceph#56514 from afreen23/wip-advanced-pools
mgr/dashboard:Use advanced fieldset for rbd image Reviewed-by: Ankush Behl <[email protected]> Reviewed-by: Nizamudeen A <[email protected]>
2 parents 1fab5ce + 2555211 commit cde67a7

File tree

3 files changed

+77
-81
lines changed

3 files changed

+77
-81
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@
44

55
<div *ngFor="let section of rbdConfigurationService.sections"
66
class="col-12">
7-
<h4 class="cd-header">
7+
<h5 class="cd-header">
88
<span (click)="toggleSectionVisibility(section.class)"
99
class="collapsible">
1010
{{ section.heading }} <i [ngClass]="!sectionVisibility[section.class] ? icons.addCircle : icons.minusCircle"
1111
aria-hidden="true"></i>
1212
</span>
13-
</h4>
13+
</h5>
1414
<div class="{{ section.class }}"
1515
[hidden]="!sectionVisibility[section.class]">
1616
<div class="form-group row"

‎src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-form/rbd-form.component.html‎

Lines changed: 59 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -299,92 +299,76 @@
299299
</div>
300300

301301
<!-- Advanced -->
302-
<div class="row">
303-
<div class="col-sm-12">
304-
<a class="float-end margin-right-md"
305-
(click)="advancedEnabled = true; false"
306-
*ngIf="!advancedEnabled"
307-
href=""
308-
i18n>Advanced...</a>
309-
</div>
310-
</div>
311-
312-
<div [hidden]="!advancedEnabled">
302+
<cd-form-advanced-fieldset>
303+
<h4 class="cd-header"
304+
i18n>Striping</h4>
313305

314-
<legend class="cd-header"
315-
i18n>Advanced</legend>
316-
317-
<div class="col-md-12">
318-
<h4 class="cd-header"
319-
i18n>Striping</h4>
320-
321-
<!-- Object Size -->
322-
<div class="form-group row">
323-
<label i18n
324-
class="cd-col-form-label"
325-
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>
326-
<div class="cd-col-form-input">
327-
<select id="obj_size"
328-
name="obj_size"
329-
class="form-select"
330-
formControlName="obj_size">
331-
<option *ngFor="let objectSize of objectSizes"
332-
[value]="objectSize">{{ objectSize }}</option>
333-
</select>
334-
</div>
306+
<!-- Object Size -->
307+
<div class="form-group row">
308+
<label i18n
309+
class="cd-col-form-label"
310+
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>
311+
<div class="cd-col-form-input">
312+
<select id="obj_size"
313+
name="obj_size"
314+
class="form-select"
315+
formControlName="obj_size">
316+
<option *ngFor="let objectSize of objectSizes"
317+
[value]="objectSize">{{ objectSize }}</option>
318+
</select>
335319
</div>
320+
</div>
336321

337-
<!-- stripingUnit -->
338-
<div class="form-group row">
339-
<label class="cd-col-form-label"
340-
[ngClass]="{'required': rbdForm.getValue('stripingCount')}"
341-
for="stripingUnit"
342-
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>
343-
<div class="cd-col-form-input">
344-
<select id="stripingUnit"
345-
name="stripingUnit"
346-
class="form-select"
347-
formControlName="stripingUnit">
348-
<option i18n
349-
[ngValue]="null">-- Select stripe unit --</option>
350-
<option *ngFor="let objectSize of objectSizes"
351-
[value]="objectSize">{{ objectSize }}</option>
352-
</select>
353-
<span class="invalid-feedback"
354-
*ngIf="rbdForm.showError('stripingUnit', formDir, 'required')"
355-
i18n>This field is required because stripe count is defined!</span>
356-
<span class="invalid-feedback"
357-
*ngIf="rbdForm.showError('stripingUnit', formDir, 'invalidStripingUnit')"
358-
i18n>Stripe unit is greater than object size.</span>
359-
</div>
322+
<!-- stripingUnit -->
323+
<div class="form-group row">
324+
<label class="cd-col-form-label"
325+
[ngClass]="{'required': rbdForm.getValue('stripingCount')}"
326+
for="stripingUnit"
327+
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>
328+
<div class="cd-col-form-input">
329+
<select id="stripingUnit"
330+
name="stripingUnit"
331+
class="form-select"
332+
formControlName="stripingUnit">
333+
<option i18n
334+
[ngValue]="null">-- Select stripe unit --</option>
335+
<option *ngFor="let objectSize of objectSizes"
336+
[value]="objectSize">{{ objectSize }}</option>
337+
</select>
338+
<span class="invalid-feedback"
339+
*ngIf="rbdForm.showError('stripingUnit', formDir, 'required')"
340+
i18n>This field is required because stripe count is defined!</span>
341+
<span class="invalid-feedback"
342+
*ngIf="rbdForm.showError('stripingUnit', formDir, 'invalidStripingUnit')"
343+
i18n>Stripe unit is greater than object size.</span>
360344
</div>
345+
</div>
361346

362-
<!-- Stripe Count -->
363-
<div class="form-group row">
364-
<label class="cd-col-form-label"
365-
[ngClass]="{'required': rbdForm.getValue('stripingUnit')}"
366-
for="stripingCount"
367-
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>
368-
<div class="cd-col-form-input">
369-
<input id="stripingCount"
370-
name="stripingCount"
371-
formControlName="stripingCount"
372-
class="form-control"
373-
type="number">
374-
<span class="invalid-feedback"
375-
*ngIf="rbdForm.showError('stripingCount', formDir, 'required')"
376-
i18n>This field is required because stripe unit is defined!</span>
377-
<span class="invalid-feedback"
378-
*ngIf="rbdForm.showError('stripingCount', formDir, 'min')"
379-
i18n>Stripe count must be greater than 0.</span>
380-
</div>
347+
<!-- Stripe Count -->
348+
<div class="form-group row">
349+
<label class="cd-col-form-label"
350+
[ngClass]="{'required': rbdForm.getValue('stripingUnit')}"
351+
for="stripingCount"
352+
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>
353+
<div class="cd-col-form-input">
354+
<input id="stripingCount"
355+
name="stripingCount"
356+
formControlName="stripingCount"
357+
class="form-control"
358+
type="number">
359+
<span class="invalid-feedback"
360+
*ngIf="rbdForm.showError('stripingCount', formDir, 'required')"
361+
i18n>This field is required because stripe unit is defined!</span>
362+
<span class="invalid-feedback"
363+
*ngIf="rbdForm.showError('stripingCount', formDir, 'min')"
364+
i18n>Stripe count must be greater than 0.</span>
381365
</div>
382366
</div>
383367

384368
<cd-rbd-configuration-form [form]="rbdForm"
385369
[initializeData]="initializeConfigData"
386370
(changes)="getDirtyConfigurationValues = $event"></cd-rbd-configuration-form>
387-
</div>
371+
</cd-form-advanced-fieldset>
388372

389373
</div>
390374
<div class="card-footer">

‎src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-form/rbd-form.component.spec.ts‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -293,12 +293,24 @@ describe('RbdFormComponent', () => {
293293
});
294294

295295
describe('test image configuration component', () => {
296-
it('is visible', () => {
296+
beforeEach(() => {
297+
fixture.detectChanges();
298+
});
299+
it('is hidden by default under Advanced', () => {
300+
fixture.detectChanges();
301+
expect(
302+
queryNativeElement('cd-rbd-configuration-form')
303+
.closest('.accordion-collapse')
304+
.classList.contains('show')
305+
).toBeFalsy();
306+
});
307+
308+
it('is visible when Advanced is not collapsed', () => {
309+
queryNativeElement('#advanced-fieldset').click();
297310
fixture.detectChanges();
298311
expect(
299-
fixture.debugElement.query(By.css('cd-rbd-configuration-form')).nativeElement.parentElement
300-
.hidden
301-
).toBe(true);
312+
queryNativeElement('cd-rbd-configuration-form').closest('.accordion-collapse').classList
313+
).toContain('show');
302314
});
303315
});
304316

0 commit comments

Comments
 (0)