From 257ba5a7a1e3135857e3c42b78fceeaad1fde996 Mon Sep 17 00:00:00 2001 From: Naman Munet Date: Fri, 31 Oct 2025 23:08:49 +0530 Subject: [PATCH] mgr/dashboard: Carbonize multisite sync policy forms Fixes: https://tracker.ceph.com/issues/73164 Signed-off-by: Naman Munet (cherry picked from commit 495f9b74965ea255776b9f4605f7a2df0016bcfd) Conflicts: src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-sync-flow-modal/rgw-multisite-sync-flow-modal.component.html src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-sync-pipe-modal/rgw-multisite-sync-pipe-modal.component.html src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-sync-pipe-modal/rgw-multisite-sync-pipe-modal.component.spec.ts --- .../frontend/cypress/e2e/rgw/multisite.po.ts | 7 +- ...w-multisite-sync-flow-modal.component.html | 226 ++++++++---------- ...ultisite-sync-flow-modal.component.spec.ts | 35 ++- ...rgw-multisite-sync-flow-modal.component.ts | 78 +++--- ...w-multisite-sync-pipe-modal.component.html | 221 ++++++++--------- ...ultisite-sync-pipe-modal.component.spec.ts | 59 +++-- ...rgw-multisite-sync-pipe-modal.component.ts | 112 +++++---- ...ltisite-sync-policy-details.component.html | 42 ++-- ...multisite-sync-policy-details.component.ts | 11 +- ...-multisite-sync-policy-form.component.html | 162 ++++++------- ...ltisite-sync-policy-form.component.spec.ts | 5 +- ...gw-multisite-sync-policy-form.component.ts | 11 +- 12 files changed, 496 insertions(+), 473 deletions(-) diff --git a/src/pybind/mgr/dashboard/frontend/cypress/e2e/rgw/multisite.po.ts b/src/pybind/mgr/dashboard/frontend/cypress/e2e/rgw/multisite.po.ts index 5240c8364244..1eefd77f7c72 100644 --- a/src/pybind/mgr/dashboard/frontend/cypress/e2e/rgw/multisite.po.ts +++ b/src/pybind/mgr/dashboard/frontend/cypress/e2e/rgw/multisite.po.ts @@ -38,14 +38,15 @@ export class MultisitePageHelper extends PageHelper { @PageHelper.restrictTo(pages.create.url) create(group_id: string, status: string, bucket_name: string) { // Enter in group_id - cy.get('#group_id').type(group_id); + cy.get('#group_id').type(group_id, { force: true }); // Show Status this.selectOption('status', status); cy.get('#status').should('have.class', 'ng-valid'); // Enter the bucket_name cy.get('#bucket_name').type(bucket_name); + cy.get('#bucket_name').should('have.class', 'ng-valid'); // Click the create button and wait for policy to be made - cy.contains('button', 'Create Sync Policy Group').wait(WAIT_TIMER).click(); + cy.contains('cd-submit-button button', 'Create').click(); this.getFirstTableCell(group_id).should('exist'); } @@ -55,7 +56,7 @@ export class MultisitePageHelper extends PageHelper { // Change the status field this.selectOption('status', status); - cy.contains('button', 'Edit Sync Policy Group').click(); + cy.contains('cd-submit-button button', 'Edit').click(); this.searchTable(group_id); cy.get(`[cdstabledata]:nth-child(${this.columnIndex.status})`) diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-sync-flow-modal/rgw-multisite-sync-flow-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-sync-flow-modal/rgw-multisite-sync-flow-modal.component.html index 5f13a0aedb1f..4a18e14b5f8d 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-sync-flow-modal/rgw-multisite-sync-flow-modal.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-sync-flow-modal/rgw-multisite-sync-flow-modal.component.html @@ -1,127 +1,113 @@ - - {{ action | titlecase }} {{ groupType | upperFirst }} Flow - - -
-
-
- -
- -
-
-
- -
- - The bucket with chosen name does not exist. -
-
- -
- -
- -
-
- - -
- -
- -
-
-
- -
- -
-
+ + +

{{ action | titlecase }} {{ groupType }} flow

+ + + +
+ +
+ + Name + + + + @if (currentFormGroupContext.showError('flow_id', formDir, 'required')) { + + This field is required. + + }
-
- + + @if (currentFormGroupContext.controls.bucket_name.value) { +
+ + Bucket name + +
- - - - - - - - - - {{name?.split('_').join(' ')}} selection is required! - - + } + + @if (groupType == flowType.symmetrical) { +
+ + + +
+ } @else { +
+ +
+
+ +
+ } + +
+ + + - - This field is required. + let-zones="zones" + let-formControl="formControl" + [formGroup]="currentFormGroupContext"> + + @if (zones.length == 0) { + + } + @if (zones.length > 0) { + + } + @for (zone of zones; track zone) { + + } + + + @if (currentFormGroupContext.showError(formControl, frm, 'required')) { + This field is required. + } + diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-sync-flow-modal/rgw-multisite-sync-flow-modal.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-sync-flow-modal/rgw-multisite-sync-flow-modal.component.spec.ts index 1aa21f437eac..82f42cc11217 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-sync-flow-modal/rgw-multisite-sync-flow-modal.component.spec.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-sync-flow-modal/rgw-multisite-sync-flow-modal.component.spec.ts @@ -1,6 +1,5 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { RgwMultisiteSyncFlowModalComponent } from './rgw-multisite-sync-flow-modal.component'; -import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; import { ToastrModule } from 'ngx-toastr'; import { PipesModule } from '~/app/shared/pipes/pipes.module'; import { HttpClientTestingModule } from '@angular/common/http/testing'; @@ -9,6 +8,7 @@ import { CommonModule } from '@angular/common'; import { RgwMultisiteService } from '~/app/shared/api/rgw-multisite.service'; import { of } from 'rxjs'; import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core'; +import { ComboBoxModule, ModalModule, SelectModule } from 'carbon-components-angular'; enum FlowType { symmetrical = 'symmetrical', @@ -32,16 +32,31 @@ describe('RgwMultisiteSyncFlowModalComponent', () => { ToastrModule.forRoot(), PipesModule, ReactiveFormsModule, - CommonModule + CommonModule, + SelectModule, + ModalModule, + ComboBoxModule ], schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA], - providers: [NgbActiveModal, { provide: RgwMultisiteService, useClass: MultisiteServiceMock }] + providers: [ + { provide: RgwMultisiteService, useClass: MultisiteServiceMock }, + { provide: 'groupType', useValue: FlowType.symmetrical }, + { provide: 'groupExpandedRow', useValue: { groupName: 'new', bucket: 'bucket1' } }, + { + provide: 'flowSelectedRow', + useValue: { id: 'symmetrical', zones: ['zone1-zg1-realm1'] } + }, + { provide: 'action', useValue: 'create' } + ] }).compileComponents(); fixture = TestBed.createComponent(RgwMultisiteSyncFlowModalComponent); multisiteServiceMock = (TestBed.inject(RgwMultisiteService) as unknown) as MultisiteServiceMock; component = fixture.componentInstance; component.groupType = FlowType.symmetrical; + component.groupExpandedRow = { groupName: 'new', bucket: 'bucket1' }; + component.flowSelectedRow = { id: 'symmetrical', zones: ['zone1-zg1-realm1'] }; + component.action = 'create'; fixture.detectChanges(); }); @@ -61,12 +76,12 @@ describe('RgwMultisiteSyncFlowModalComponent', () => { it('should call createEditSyncFlow for creating/editing symmetrical sync flow', () => { component.editing = false; + component.ngOnInit(); component.currentFormGroupContext.patchValue({ flow_id: 'symmetrical', group_id: 'new', - zones: { added: ['zone1-zg1-realm1'], removed: [] } + zones: ['zone1-zg1-realm1'] }); - component.zones.data.selected = ['zone1-zg1-realm1']; const spy = jest.spyOn(component, 'submit'); const putDataSpy = jest .spyOn(multisiteServiceMock, 'createEditSyncFlow') @@ -74,19 +89,21 @@ describe('RgwMultisiteSyncFlowModalComponent', () => { component.submit(); expect(spy).toHaveBeenCalled(); expect(putDataSpy).toHaveBeenCalled(); - expect(putDataSpy).toHaveBeenCalledWith(component.currentFormGroupContext.getRawValue()); + expect(putDataSpy).toHaveBeenCalledWith({ + ...component.currentFormGroupContext.getRawValue(), + zones: { added: ['zone1-zg1-realm1'], removed: [] } + }); }); it('should call createEditSyncFlow for creating/editing directional sync flow', () => { component.editing = false; component.groupType = FlowType.directional; component.ngOnInit(); - fixture.detectChanges(); component.currentFormGroupContext.patchValue({ flow_id: 'directional', group_id: 'new', - source_zone: { added: ['zone1-zg1-realm1'], removed: [] }, - destination_zone: { added: ['zone2-zg1-realm1'], removed: [] } + source_zone: ['zone1-zg1-realm1'], + destination_zone: ['zone2-zg1-realm1'] }); const spy = jest.spyOn(component, 'submit'); const putDataSpy = jest diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-sync-flow-modal/rgw-multisite-sync-flow-modal.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-sync-flow-modal/rgw-multisite-sync-flow-modal.component.ts index 1ab0705f53b2..f2b136e3e453 100755 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-sync-flow-modal/rgw-multisite-sync-flow-modal.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-sync-flow-modal/rgw-multisite-sync-flow-modal.component.ts @@ -1,6 +1,5 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, Inject, OnInit } from '@angular/core'; import { UntypedFormControl, Validators } from '@angular/forms'; -import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; import { RgwDaemonService } from '~/app/shared/api/rgw-daemon.service'; import { ActionLabelsI18n, SucceededActionLabelsI18n } from '~/app/shared/constants/app.constants'; import { CdFormGroup } from '~/app/shared/forms/cd-form-group'; @@ -15,36 +14,38 @@ import _ from 'lodash'; import { Icons } from '~/app/shared/enum/icons.enum'; import { RgwMultisiteService } from '~/app/shared/api/rgw-multisite.service'; import { NotificationType } from '~/app/shared/enum/notification-type.enum'; -import { ZoneData } from '../models/rgw-multisite-zone-selector'; +import { BaseModal } from 'carbon-components-angular'; +import { ComboBoxItem } from '~/app/shared/models/combo-box.model'; @Component({ selector: 'cd-rgw-multisite-sync-flow-modal', templateUrl: './rgw-multisite-sync-flow-modal.component.html', styleUrls: ['./rgw-multisite-sync-flow-modal.component.scss'] }) -export class RgwMultisiteSyncFlowModalComponent implements OnInit { - action: string; +export class RgwMultisiteSyncFlowModalComponent extends BaseModal implements OnInit { editing: boolean = false; - groupType: FlowType; - groupExpandedRow: any; - flowSelectedRow: any; syncPolicyDirectionalFlowForm: CdFormGroup; syncPolicySymmetricalFlowForm: CdFormGroup; syncPolicyPipeForm: CdFormGroup; currentFormGroupContext: CdFormGroup; flowType = FlowType; icons = Icons; - zones = new ZoneData(false, 'Filter Zones'); + zones: ComboBoxItem[] = []; constructor( - public activeModal: NgbActiveModal, + @Inject('groupType') public groupType: FlowType, + @Inject('groupExpandedRow') public groupExpandedRow: { groupName: string; bucket: string }, + @Inject('flowSelectedRow') public flowSelectedRow: { id: string; zones: string[] }, + @Inject('action') public action: string, public actionLabels: ActionLabelsI18n, public notificationService: NotificationService, private rgwDaemonService: RgwDaemonService, private rgwZonegroupService: RgwZonegroupService, private rgwMultisiteService: RgwMultisiteService, private succeededLabels: SucceededActionLabelsI18n - ) {} + ) { + super(); + } ngOnInit(): void { if (this.action === 'edit') { @@ -57,7 +58,6 @@ export class RgwMultisiteSyncFlowModalComponent implements OnInit { this.createDirectionalFlowForm(); this.currentFormGroupContext = _.cloneDeep(this.syncPolicyDirectionalFlowForm); } - this.currentFormGroupContext.get('bucket_name').disable(); if (this.editing) { this.currentFormGroupContext.patchValue({ flow_id: this.flowSelectedRow.id, @@ -82,18 +82,27 @@ export class RgwMultisiteSyncFlowModalComponent implements OnInit { } }) ) - .subscribe((zonegroupData: any) => { + .subscribe((zonegroupData: { zones: { name: string }[] }) => { if (zonegroupData && zonegroupData?.zones?.length > 0) { - const zones: any = []; - zonegroupData.zones.forEach((zone: any) => { + const zones: SelectOption[] = []; + zonegroupData.zones.forEach((zone: { name: string }) => { zones.push(new SelectOption(false, zone.name, '')); }); - this.zones.data.available = [...zones]; + this.zones = [...zones].map((zone: { name: string }) => { + return { name: zone.name, content: zone.name }; + }); if (this.editing) { + // @TODO: Editing/deletion of directional flow not supported yet. + // Integrate it once the backend supports it. if (this.groupType === FlowType.symmetrical) { - this.zones.data.selected = [...this.flowSelectedRow.zones]; + this.zones = [...zones].map((zone: { name: string }) => { + if (this.flowSelectedRow.zones.includes(zone.name)) { + return { name: zone.name, content: zone.name, selected: true }; + } + return { name: zone.name, content: zone.name }; + }); + this.currentFormGroupContext.patchValue({ zones: this.zones }); } - this.zoneSelection(); } } }); @@ -120,11 +129,6 @@ export class RgwMultisiteSyncFlowModalComponent implements OnInit { }); } - onChangeZoneDropdown(zoneType: string, event: Event) { - const selectedVal = (event.target as HTMLSelectElement).value; - this.currentFormGroupContext.get(zoneType).setValue(selectedVal); - } - commonFormControls(flowType: FlowType) { return { bucket_name: new UntypedFormControl(this.groupExpandedRow?.bucket), @@ -140,14 +144,6 @@ export class RgwMultisiteSyncFlowModalComponent implements OnInit { }; } - zoneSelection() { - if (this.groupType === FlowType.symmetrical) { - this.currentFormGroupContext.patchValue({ - zones: this.zones.data.selected - }); - } - } - getZoneData(zoneDataToFilter: string[], zoneDataForCondition: string[]) { return zoneDataToFilter.filter((zone: string) => !zoneDataForCondition.includes(zone)); } @@ -169,28 +165,30 @@ export class RgwMultisiteSyncFlowModalComponent implements OnInit { } if (this.groupType == FlowType.symmetrical) { + const selectedZones = this.currentFormGroupContext.get('zones').value; if (this.editing) { - zones.removed = this.getZoneData(this.flowSelectedRow.zones, this.zones.data.selected); - zones.added = this.getZoneData(this.zones.data.selected, this.flowSelectedRow.zones); + zones.removed = this.getZoneData(this.flowSelectedRow.zones, selectedZones); + zones.added = this.getZoneData(selectedZones, this.flowSelectedRow.zones); } - zones.added = this.assignZoneValue(zones.added, this.zones.data.selected); + zones.added = this.assignZoneValue(zones.added, selectedZones); } this.rgwMultisiteService .createEditSyncFlow({ ...this.currentFormGroupContext.getRawValue(), zones: zones }) - .subscribe( - () => { + .subscribe({ + next: () => { const action = this.editing ? this.succeededLabels.EDITED : this.succeededLabels.CREATED; this.notificationService.show( NotificationType.success, $localize`${action} Sync Flow '${this.currentFormGroupContext.getValue('flow_id')}'` ); - this.activeModal.close(NotificationType.success); }, - () => { + error: () => { // Reset the 'Submit' button. this.currentFormGroupContext.setErrors({ cdSubmitButton: true }); - this.activeModal.dismiss(); + }, + complete: () => { + this.closeModal(); } - ); + }); } } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-sync-pipe-modal/rgw-multisite-sync-pipe-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-sync-pipe-modal/rgw-multisite-sync-pipe-modal.component.html index 767305958d4c..95640b60ea3a 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-sync-pipe-modal/rgw-multisite-sync-pipe-modal.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-sync-pipe-modal/rgw-multisite-sync-pipe-modal.component.html @@ -1,121 +1,112 @@ - - {{ action | titlecase }} Pipe - - -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- - - {{ allBucketSelectedHelpText }} - -
-
-
- -
- - - {{ allBucketSelectedHelpText }} - -
-
+ + +

{{ action | titlecase }} pipe

+ + + +
+ +
+ + Name + + + + @if (pipeForm.showError('pipe_id', formDir, 'required')) { + + This field is required. + + } + +
+ +
+ +
+
+ +
+ + @if (pipeForm.controls.bucket_name.value) { +
+ + Bucket name + + +
+ } + +
+ + Source bucket + +
-
- - + +
+ + Destination bucket + +
- - - +
+ + + + - - - - - {{ name?.split('_').join(' ') }} selection is required! - + let-zone="zone" + let-formControl="formControl" + [formGroup]="pipeForm"> + + + diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-sync-pipe-modal/rgw-multisite-sync-pipe-modal.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-sync-pipe-modal/rgw-multisite-sync-pipe-modal.component.spec.ts index faf382b78028..1e476ce91744 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-sync-pipe-modal/rgw-multisite-sync-pipe-modal.component.spec.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-sync-pipe-modal/rgw-multisite-sync-pipe-modal.component.spec.ts @@ -10,6 +10,9 @@ import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; import { of } from 'rxjs'; import { RgwMultisiteService } from '~/app/shared/api/rgw-multisite.service'; import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core'; +import { USER } from '~/app/shared/constants/app.constants'; +import { FlowType } from '../models/rgw-multisite'; +import { ComboBoxModule } from 'carbon-components-angular'; class MultisiteServiceMock { createEditSyncPipe = jest.fn().mockReturnValue(of(null)); @@ -28,10 +31,26 @@ describe('RgwMultisiteSyncPipeModalComponent', () => { ToastrModule.forRoot(), PipesModule, ReactiveFormsModule, - CommonModule + CommonModule, + ComboBoxModule ], schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA], - providers: [NgbActiveModal, { provide: RgwMultisiteService, useClass: MultisiteServiceMock }] + providers: [ + NgbActiveModal, + { provide: RgwMultisiteService, useClass: MultisiteServiceMock }, + { provide: 'groupType', useValue: FlowType.symmetrical }, + { provide: 'groupExpandedRow', useValue: { groupName: 'new', bucket: 'bucket1' } }, + { + provide: 'pipeSelectedRow', + useValue: { + source: { zones: ['zone1-zg1-realm1'], bucket: 'bucket1' }, + dest: { zones: ['zone2-zg1-realm1'], bucket: 'bucket1' }, + id: 'pipe1', + params: { user: 'dashboard', mode: USER } + } + }, + { provide: 'action', useValue: 'create' } + ] }).compileComponents(); fixture = TestBed.createComponent(RgwMultisiteSyncPipeModalComponent); @@ -76,16 +95,21 @@ describe('RgwMultisiteSyncPipeModalComponent', () => { it('should call createEditSyncPipe for creating/editing sync pipe', () => { component.editing = false; + component.ngOnInit(); component.pipeForm.patchValue({ pipe_id: 'pipe1', group_id: 'new', source_bucket: '', - source_zones: { added: ['zone1-zg1-realm1'], removed: [] }, + source_zones: ['zone1-zg1-realm1'], destination_bucket: '', - destination_zones: { added: ['zone2-zg1-realm1'], removed: [] } + destination_zones: ['zone2-zg1-realm1'] }); - component.sourceZones.data.selected = ['zone1-zg1-realm1']; - component.destZones.data.selected = ['zone2-zg1-realm1']; + component.sourceZones = [ + { name: 'zone1-zg1-realm1', content: 'zone1-zg1-realm1', selected: true } + ]; + component.destZones = [ + { name: 'zone2-zg1-realm1', content: 'zone2-zg1-realm1', selected: true } + ]; const spy = jest.spyOn(component, 'submit'); const putDataSpy = jest.spyOn(multisiteServiceMock, 'createEditSyncPipe'); component.submit(); @@ -93,6 +117,8 @@ describe('RgwMultisiteSyncPipeModalComponent', () => { expect(putDataSpy).toHaveBeenCalled(); expect(putDataSpy).toHaveBeenCalledWith({ ...component.pipeForm.getRawValue(), + source_zones: { added: ['zone1-zg1-realm1'], removed: [] }, + destination_zones: { added: ['zone2-zg1-realm1'], removed: [] }, mode: '', user: '' }); @@ -104,25 +130,26 @@ describe('RgwMultisiteSyncPipeModalComponent', () => { pipe_id: 'pipe1', group_id: 's3-bucket-replication:enabled', source_bucket: '', - source_zones: { added: ['zone1-zg1-realm1'], removed: [] }, + source_zones: ['zone1-zg1-realm1'], destination_bucket: '', - destination_zones: { added: ['zone2-zg1-realm1'], removed: [] } + destination_zones: ['zone2-zg1-realm1'] }); component.pipeSelectedRow = { dest: { bucket: '*', zones: ['zone2-zg1-realm1'] }, id: 'pipi1', params: { - dest: {}, - mode: 'user', - priority: 0, - source: { filter: { tags: [] } }, + mode: USER, user: 'dashboard' }, source: { bucket: '*', zones: ['zone1-zg1-realm1'] } }; - component.sourceZones.data.selected = ['zone1-zg1-realm1']; - component.destZones.data.selected = ['zone2-zg1-realm1']; + component.sourceZones = [ + { name: 'zone1-zg1-realm1', content: 'zone1-zg1-realm1', selected: true } + ]; + component.destZones = [ + { name: 'zone2-zg1-realm1', content: 'zone2-zg1-realm1', selected: true } + ]; const spy = jest.spyOn(component, 'submit'); const putDataSpy = jest.spyOn(multisiteServiceMock, 'createEditSyncPipe'); component.submit(); @@ -130,7 +157,9 @@ describe('RgwMultisiteSyncPipeModalComponent', () => { expect(putDataSpy).toHaveBeenCalled(); expect(putDataSpy).toHaveBeenCalledWith({ ...component.pipeForm.getRawValue(), - mode: 'user', + source_zones: { added: ['zone1-zg1-realm1'], removed: [] }, + destination_zones: { added: ['zone2-zg1-realm1'], removed: [] }, + mode: USER, user: 'dashboard' }); }); diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-sync-pipe-modal/rgw-multisite-sync-pipe-modal.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-sync-pipe-modal/rgw-multisite-sync-pipe-modal.component.ts index 43742ef60b83..aeaf66b3d3e1 100755 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-sync-pipe-modal/rgw-multisite-sync-pipe-modal.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-sync-pipe-modal/rgw-multisite-sync-pipe-modal.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, Inject, OnInit } from '@angular/core'; import { UntypedFormControl, Validators } from '@angular/forms'; import { CdFormGroup } from '~/app/shared/forms/cd-form-group'; import { RgwZonegroup, Zone } from '../models/rgw-multisite'; @@ -8,43 +8,56 @@ import { of } from 'rxjs'; import { RgwDaemon } from '../models/rgw-daemon'; import { RgwDaemonService } from '~/app/shared/api/rgw-daemon.service'; import { RgwZonegroupService } from '~/app/shared/api/rgw-zonegroup.service'; -import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; import _ from 'lodash'; import { Icons } from '~/app/shared/enum/icons.enum'; import { RgwMultisiteService } from '~/app/shared/api/rgw-multisite.service'; import { NotificationType } from '~/app/shared/enum/notification-type.enum'; import { NotificationService } from '~/app/shared/services/notification.service'; -import { ZoneData } from '../models/rgw-multisite-zone-selector'; import { SucceededActionLabelsI18n } from '~/app/shared/constants/app.constants'; +import { BaseModal } from 'carbon-components-angular'; +import { ComboBoxItem } from '~/app/shared/models/combo-box.model'; const ALL_ZONES = $localize`All zones (*)`; const ALL_BUCKET_SELECTED_HELP_TEXT = 'If no value is provided, all the buckets in the zone group will be selected.'; +interface PipeParams { + source: { zones: string[]; bucket: string }; + dest: { zones: string[]; bucket: string }; + id: string; + params: { user: string; mode: string }; +} + +interface GroupParams { + groupName: string; + bucket: string; +} + @Component({ selector: 'cd-rgw-multisite-sync-pipe-modal', templateUrl: './rgw-multisite-sync-pipe-modal.component.html', styleUrls: ['./rgw-multisite-sync-pipe-modal.component.scss'] }) -export class RgwMultisiteSyncPipeModalComponent implements OnInit { - groupExpandedRow: any; - pipeSelectedRow: any; +export class RgwMultisiteSyncPipeModalComponent extends BaseModal implements OnInit { pipeForm: CdFormGroup; - action: string; editing: boolean; - sourceZones = new ZoneData(false, 'Filter Zones'); - destZones = new ZoneData(false, 'Filter Zones'); + sourceZones: ComboBoxItem[] = []; + destZones: ComboBoxItem[] = []; icons = Icons; allBucketSelectedHelpText = ALL_BUCKET_SELECTED_HELP_TEXT; constructor( - public activeModal: NgbActiveModal, + @Inject('groupExpandedRow') public groupExpandedRow: GroupParams, + @Inject('pipeSelectedRow') public pipeSelectedRow: PipeParams, + @Inject('action') public action: string, private rgwDaemonService: RgwDaemonService, private rgwZonegroupService: RgwZonegroupService, private rgwMultisiteService: RgwMultisiteService, private notificationService: NotificationService, private succeededLabels: SucceededActionLabelsI18n - ) {} + ) { + super(); + } ngOnInit(): void { if (this.pipeSelectedRow) { @@ -73,7 +86,6 @@ export class RgwMultisiteSyncPipeModalComponent implements OnInit { validators: [Validators.required] }) }); - this.pipeForm.get('bucket_name').disable(); this.rgwDaemonService.selectedDaemon$ .pipe( switchMap((daemon: RgwDaemon) => { @@ -90,19 +102,33 @@ export class RgwMultisiteSyncPipeModalComponent implements OnInit { } }) ) - .subscribe((zonegroupData: any) => { + .subscribe((zonegroupData: { zones: { name: string }[] }) => { if (zonegroupData && zonegroupData?.zones?.length > 0) { - let zones: any[] = []; + let zones: SelectOption[] = []; zones.push(new SelectOption(false, ALL_ZONES, '')); - zonegroupData.zones.forEach((zone: any) => { + zonegroupData.zones.forEach((zone: { name: string }) => { zones.push(new SelectOption(false, zone.name, '')); }); - this.sourceZones.data.available = JSON.parse(JSON.stringify(zones)); - this.destZones.data.available = JSON.parse(JSON.stringify(zones)); + this.sourceZones = JSON.parse(JSON.stringify(zones)).map((zone: { name: string }) => { + return { name: zone.name, content: zone.name }; + }); + this.destZones = JSON.parse(JSON.stringify(zones)).map((zone: { name: string }) => { + return { name: zone.name, content: zone.name }; + }); if (this.editing) { this.pipeForm.get('pipe_id').disable(); - this.sourceZones.data.selected = [...this.pipeSelectedRow.source.zones]; - this.destZones.data.selected = [...this.pipeSelectedRow.dest.zones]; + this.sourceZones = [...this.sourceZones].map((zone: { name: string }) => { + if (this.pipeSelectedRow.source.zones.includes(zone.name)) { + return { name: zone.name, content: zone.name, selected: true }; + } + return { name: zone.name, content: zone.name }; + }); + this.destZones = [...this.destZones].map((zone: { name: string }) => { + if (this.pipeSelectedRow.dest.zones.includes(zone.name)) { + return { name: zone.name, content: zone.name, selected: true }; + } + return { name: zone.name, content: zone.name }; + }); const availableDestZone: SelectOption[] = []; this.pipeSelectedRow.dest.zones.forEach((zone: string) => { availableDestZone.push(new SelectOption(true, zone, '')); @@ -127,18 +153,6 @@ export class RgwMultisiteSyncPipeModalComponent implements OnInit { return zones.map((str) => str.replace('*', ALL_ZONES)); } - onZoneSelection(zoneType: string) { - if (zoneType === 'source_zones') { - this.pipeForm.patchValue({ - source_zones: this.sourceZones.data.selected - }); - } else { - this.pipeForm.patchValue({ - destination_zones: this.destZones.data.selected - }); - } - } - getZoneData(zoneDataToFilter: string[], zoneDataForCondition: string[]) { return zoneDataToFilter.filter((zone: string) => !zoneDataForCondition.includes(zone)); } @@ -162,26 +176,19 @@ export class RgwMultisiteSyncPipeModalComponent implements OnInit { return; } + const selectedSourceZones = this.pipeForm.getValue('source_zones'); + const selectedDestZones = this.pipeForm.getValue('destination_zones'); if (this.editing) { - destZones.removed = this.getZoneData( - this.pipeSelectedRow.dest.zones, - this.destZones.data.selected - ); - destZones.added = this.getZoneData( - this.destZones.data.selected, - this.pipeSelectedRow.dest.zones - ); + destZones.removed = this.getZoneData(this.pipeSelectedRow.dest.zones, selectedDestZones); + destZones.added = this.getZoneData(selectedDestZones, this.pipeSelectedRow.dest.zones); sourceZones.removed = this.getZoneData( this.pipeSelectedRow.source.zones, - this.sourceZones.data.selected - ); - sourceZones.added = this.getZoneData( - this.sourceZones.data.selected, - this.pipeSelectedRow.source.zones + selectedSourceZones ); + sourceZones.added = this.getZoneData(selectedSourceZones, this.pipeSelectedRow.source.zones); } - sourceZones.added = this.assignZoneValue(sourceZones.added, this.sourceZones.data.selected); - destZones.added = this.assignZoneValue(destZones.added, this.destZones.data.selected); + sourceZones.added = this.assignZoneValue(sourceZones.added, selectedSourceZones); + destZones.added = this.assignZoneValue(destZones.added, selectedDestZones); sourceZones.removed = this.replaceWithAsterisk(sourceZones.removed); destZones.removed = this.replaceWithAsterisk(destZones.removed); @@ -194,20 +201,21 @@ export class RgwMultisiteSyncPipeModalComponent implements OnInit { user: this.editing ? this.pipeSelectedRow?.params?.user : '', mode: this.editing ? this.pipeSelectedRow?.params?.mode : '' }) - .subscribe( - () => { + .subscribe({ + next: () => { const action = this.editing ? this.succeededLabels.EDITED : this.succeededLabels.CREATED; this.notificationService.show( NotificationType.success, $localize`${action} Sync Pipe '${this.pipeForm.getValue('pipe_id')}'` ); - this.activeModal.close(NotificationType.success); }, - () => { + error: () => { // Reset the 'Submit' button. this.pipeForm.setErrors({ cdSubmitButton: true }); - this.activeModal.dismiss(); + }, + complete: () => { + this.closeModal(); } - ); + }); } } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-sync-policy-details/rgw-multisite-sync-policy-details.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-sync-policy-details/rgw-multisite-sync-policy-details.component.html index fb3ad7236915..e7cd302431b2 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-sync-policy-details/rgw-multisite-sync-policy-details.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-sync-policy-details/rgw-multisite-sync-policy-details.component.html @@ -1,4 +1,4 @@ - +@if (expandedRow) {
- +} - {{ action | titlecase }} {{ resource | upperFirst }} - -
-
+ + +

{{ action | titlecase }} {{ resource }}

+ + + + +
-
- -
- - This field is required. -
+
+ + Group name + + + + @if (syncPolicyForm.showError('group_id', frm, 'required')) { + + This field is required. + + } +
-
- -
- - This field is required. -
+
+ + Status + + + + + + @if (syncPolicyForm.showError('status', frm, 'required')) { + This field is required. + } +
-
- -
- - The bucket with chosen name does not exist. -
-
-
- -
-
- +
+ + Bucket name + + + + @if (syncPolicyForm.showError('bucket_name', frm, 'bucketNameNotAllowed')) { + The bucket with chosen name does not exist. + } +
+ - + diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-sync-policy-form/rgw-multisite-sync-policy-form.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-sync-policy-form/rgw-multisite-sync-policy-form.component.spec.ts index d3c2a3227e13..64ad562ef53a 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-sync-policy-form/rgw-multisite-sync-policy-form.component.spec.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-sync-policy-form/rgw-multisite-sync-policy-form.component.spec.ts @@ -8,6 +8,7 @@ import { ComponentsModule } from '~/app/shared/components/components.module'; import { RouterTestingModule } from '@angular/router/testing'; import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core'; import { SharedModule } from '~/app/shared/shared.module'; +import { ModalModule, SelectModule } from 'carbon-components-angular'; describe('RgwMultisiteSyncPolicyFormComponent', () => { let component: RgwMultisiteSyncPolicyFormComponent; @@ -23,7 +24,9 @@ describe('RgwMultisiteSyncPolicyFormComponent', () => { PipesModule, ComponentsModule, SharedModule, - RouterTestingModule + RouterTestingModule, + ModalModule, + SelectModule ], schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA], providers: [] diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-sync-policy-form/rgw-multisite-sync-policy-form.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-sync-policy-form/rgw-multisite-sync-policy-form.component.ts index dda1671e531f..da9508cd0e8b 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-sync-policy-form/rgw-multisite-sync-policy-form.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-sync-policy-form/rgw-multisite-sync-policy-form.component.ts @@ -33,6 +33,7 @@ export class RgwMultisiteSyncPolicyFormComponent extends CdForm implements OnIni resource: string; syncPolicyStatus = RgwMultisiteSyncPolicyStatus; pageURL: string; + open: boolean = false; bucketDataSource = (text$: Observable) => { return text$.pipe( debounceTime(200), @@ -53,13 +54,14 @@ export class RgwMultisiteSyncPolicyFormComponent extends CdForm implements OnIni super(); this.editing = this.router.url.includes('(modal:edit'); this.action = this.editing ? this.actionLabels.EDIT : this.actionLabels.CREATE; - this.resource = $localize`Sync Policy Group`; + this.resource = $localize`sync policy group`; this.createForm(); this.loadingReady(); this.pageURL = 'rgw/multisite/sync-policy'; } ngOnInit(): void { + this.open = this.route.outlet === 'modal'; if (this.editing) { this.route.paramMap.subscribe((params: any) => { const groupName = params.get('groupName'); @@ -71,7 +73,6 @@ export class RgwMultisiteSyncPolicyFormComponent extends CdForm implements OnIni .subscribe((syncPolicy: any) => { this.loadingReady(); if (syncPolicy) { - this.syncPolicyForm.get('bucket_name').disable(); this.syncPolicyForm.patchValue({ group_id: syncPolicy.id, status: syncPolicy.status, @@ -145,7 +146,7 @@ export class RgwMultisiteSyncPolicyFormComponent extends CdForm implements OnIni bucketExistence(requiredExistenceResult: boolean): AsyncValidatorFn { return (control: AbstractControl): Observable => { - if (control.dirty) { + if (control.dirty && control.value) { return observableTimer(500).pipe( switchMapTo(this.rgwBucketService.exists(control.value)), map((existenceResult: boolean) => @@ -171,4 +172,8 @@ export class RgwMultisiteSyncPolicyFormComponent extends CdForm implements OnIni return of([]); } } + + closeModal(): void { + this.router.navigate([this.pageURL, { outlets: { modal: null } }]); + } } -- 2.47.3