From ca4759b8f48fc62ff61fd290657586abd75c293c Mon Sep 17 00:00:00 2001 From: Naman Munet Date: Wed, 17 Jul 2024 15:34:55 +0530 Subject: [PATCH] mgr/dashboard: rgw sync policy routing fixes Fixes: https://tracker.ceph.com/issues/66977 Signed-off-by: Naman Munet --- .../cypress/e2e/rgw/multisite.e2e.spec.ts | 25 +- .../frontend/cypress/e2e/rgw/multisite.po.ts | 19 +- .../rgw-multisite-details.component.html | 259 ++++++++---------- .../rgw-multisite-details.component.ts | 26 +- ...w-multisite-sync-flow-modal.component.html | 123 ++++----- ...rgw-multisite-sync-flow-modal.component.ts | 1 + ...w-multisite-sync-pipe-modal.component.html | 165 +++++------ ...rgw-multisite-sync-pipe-modal.component.ts | 1 + ...-multisite-sync-policy-form.component.html | 50 ++-- ...gw-multisite-sync-policy-form.component.ts | 22 +- .../rgw-multisite-sync-policy.component.html | 4 + .../rgw-multisite-sync-policy.component.ts | 35 +-- .../rgw-multisite-tabs.component.html | 16 ++ .../rgw-multisite-tabs.component.scss | 0 .../rgw-multisite-tabs.component.spec.ts | 22 ++ .../rgw-multisite-tabs.component.ts | 8 + .../rgw-multisite-wizard.component.ts | 2 +- .../frontend/src/app/ceph/rgw/rgw.module.ts | 51 ++-- 18 files changed, 410 insertions(+), 419 deletions(-) create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-tabs/rgw-multisite-tabs.component.html create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-tabs/rgw-multisite-tabs.component.scss create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-tabs/rgw-multisite-tabs.component.spec.ts create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-tabs/rgw-multisite-tabs.component.ts diff --git a/src/pybind/mgr/dashboard/frontend/cypress/e2e/rgw/multisite.e2e.spec.ts b/src/pybind/mgr/dashboard/frontend/cypress/e2e/rgw/multisite.e2e.spec.ts index a0306f126b321..9110f723d5dc3 100644 --- a/src/pybind/mgr/dashboard/frontend/cypress/e2e/rgw/multisite.e2e.spec.ts +++ b/src/pybind/mgr/dashboard/frontend/cypress/e2e/rgw/multisite.e2e.spec.ts @@ -5,20 +5,12 @@ describe('Multisite page', () => { beforeEach(() => { cy.login(); - multisite.navigateTo(); }); - describe('tabs and table tests', () => { - it('should show two tabs', () => { - multisite.getTabsCount().should('eq', 2); - }); - - it('should show Configuration tab as a first tab', () => { - multisite.getTabText(0).should('eq', 'Configuration'); - }); - - it('should show sync policy tab as a second tab', () => { - multisite.getTabText(1).should('eq', 'Sync Policy'); + describe('table tests', () => { + it('should show table on sync-policy page', () => { + multisite.navigateTo(); + multisite.tableExist(); }); }); @@ -30,11 +22,12 @@ describe('Multisite page', () => { }); it('should edit policy status', () => { + multisite.navigateTo(); multisite.edit('test', 'Forbidden'); }); it('should delete policy', () => { - multisite.getTab('Sync Policy').click(); + multisite.navigateTo(); multisite.delete('test'); }); }); @@ -47,7 +40,7 @@ describe('Multisite page', () => { }); describe('symmetrical Flow creation started', () => { beforeEach(() => { - multisite.getTab('Sync Policy').click(); + multisite.navigateTo(); multisite.getExpandCollapseElement().click(); }); @@ -67,7 +60,7 @@ describe('Multisite page', () => { describe('create, edit & delete directional sync Flow', () => { beforeEach(() => { - multisite.getTab('Sync Policy').click(); + multisite.navigateTo(); multisite.getExpandCollapseElement().click(); }); @@ -82,7 +75,7 @@ describe('Multisite page', () => { describe('create, edit, delete pipe', () => { beforeEach(() => { - multisite.getTab('Sync Policy').click(); + multisite.navigateTo(); multisite.getExpandCollapseElement().click(); }); 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 11a43a7b8b30b..ffcae7197aaf8 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 @@ -2,9 +2,12 @@ import { PageHelper } from '../page-helper.po'; const WAIT_TIMER = 1000; const pages = { - index: { url: '#/rgw/multisite', id: 'cd-rgw-multisite-details' }, - create: { url: '#/rgw/multisite/sync-policy/create', id: 'cd-rgw-multisite-sync-policy-form' }, - edit: { url: '#/rgw/multisite/sync-policy/edit', id: 'cd-rgw-multisite-sync-policy-form' } + index: { url: '#/rgw/multisite/sync-policy', id: 'cd-rgw-multisite-sync-policy' }, + create: { + url: '#/rgw/multisite/sync-policy/(modal:create)', + id: 'cd-rgw-multisite-sync-policy-form' + }, + edit: { url: '#/rgw/multisite/sync-policy/(modal:edit', id: 'cd-rgw-multisite-sync-policy-form' } }; export class MultisitePageHelper extends PageHelper { pages = pages; @@ -13,6 +16,11 @@ export class MultisitePageHelper extends PageHelper { status: 4 }; + tableExist() { + cy.get('cd-rgw-multisite-sync-policy cd-table').should('exist'); + cy.get('cd-rgw-multisite-sync-policy cd-table-actions').should('exist'); + } + @PageHelper.restrictTo(pages.create.url) create(group_id: string, status: string) { // Enter in group_id @@ -28,7 +36,7 @@ export class MultisitePageHelper extends PageHelper { @PageHelper.restrictTo(pages.index.url) edit(group_id: string, status: string) { - cy.visit(`${pages.edit.url}/${group_id}`); + cy.visit(`${pages.edit.url}/${group_id})`); // Change the status field this.selectOption('status', status); @@ -42,9 +50,6 @@ export class MultisitePageHelper extends PageHelper { @PageHelper.restrictTo(pages.index.url) createSymmetricalFlow(flow_id: string, zones: string[]) { - cy.get('cd-rgw-multisite-sync-policy-details').should('exist'); - this.getTab('Flow').should('exist'); - this.getTab('Flow').click(); cy.request({ method: 'GET', url: '/api/rgw/daemon', diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-details/rgw-multisite-details.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-details/rgw-multisite-details.component.html index 0acf38b345348..5890ea45bdc6d 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-details/rgw-multisite-details.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-details/rgw-multisite-details.component.html @@ -1,144 +1,125 @@ - + + + -
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-details/rgw-multisite-details.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-details/rgw-multisite-details.component.ts index 1c7ab210d6b5d..ad39b0ebae743 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-details/rgw-multisite-details.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-details/rgw-multisite-details.component.ts @@ -6,7 +6,7 @@ import { TreeNode, TREE_ACTIONS } from '@circlon/angular-tree-component'; -import { NgbActiveModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'; +import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap'; import _ from 'lodash'; import { forkJoin, Subscription, timer as observableTimer } from 'rxjs'; @@ -38,8 +38,9 @@ import { MgrModuleService } from '~/app/shared/api/mgr-module.service'; import { BlockUI, NgBlockUI } from 'ng-block-ui'; import { Router } from '@angular/router'; import { RgwMultisiteWizardComponent } from '../rgw-multisite-wizard/rgw-multisite-wizard.component'; +import { RgwMultisiteSyncPolicyComponent } from '../rgw-multisite-sync-policy/rgw-multisite-sync-policy.component'; -const BASE_URL = 'rgw/multisite'; +const BASE_URL = 'rgw/multisite/configuration'; @Component({ selector: 'cd-rgw-multisite-details', @@ -50,6 +51,7 @@ export class RgwMultisiteDetailsComponent implements OnDestroy, OnInit { private sub = new Subscription(); @ViewChild('tree') tree: TreeComponent; + @ViewChild(RgwMultisiteSyncPolicyComponent) syncPolicyComp: RgwMultisiteSyncPolicyComponent; messages = { noDefaultRealm: $localize`Please create a default realm first to enable this feature`, @@ -106,7 +108,6 @@ export class RgwMultisiteDetailsComponent implements OnDestroy, OnInit { activeId: string; constructor( - public activeModal: NgbActiveModal, private modalService: ModalService, private timerService: TimerService, private authStorageService: AuthStorageService, @@ -121,10 +122,6 @@ export class RgwMultisiteDetailsComponent implements OnDestroy, OnInit { private notificationService: NotificationService ) { this.permission = this.authStorageService.getPermissions().rgw; - const activeId = this.router.getCurrentNavigation()?.extras?.state?.activeId; - if (activeId) { - this.activeId = activeId; - } } openModal(entity: any, edit = false) { @@ -617,19 +614,4 @@ export class RgwMultisiteDetailsComponent implements OnDestroy, OnInit { } ); } - - onNavChange(event: any) { - if (event.nextId == 'configuration') { - this.metadata = null; - /* - It is a known issue with angular2-tree package when tree is hidden (for example inside tab or modal), - it is not rendered when it becomes visible. Solution is to call this.tree.sizeChanged() which recalculates - the rendered nodes according to the actual viewport size. (https://angular2-tree.readme.io/docs/common-issues) - */ - setTimeout(() => { - this.tree.sizeChanged(); - this.onUpdateData(); - }, 200); - } - } } 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 974474c593878..b7f614ef16b6f 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,29 +1,24 @@ - {{ action | titlecase }} {{ groupType | upperFirst }} Flow + {{ action | titlecase }} {{ groupType | upperFirst }} Flow -
+
- +
- +
@@ -31,25 +26,22 @@ for="bucket" i18n>Bucket Name
- - The bucket with chosen name does not exist. + + The bucket with chosen name does not exist.
-
- +
- - + + - + - {{ name }} selection is required! + {{ name?.split('_').join(' ') }} selection is required! 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 29d32ea967adf..73bca12ece3aa 100644 --- 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 @@ -83,6 +83,7 @@ export class RgwMultisiteSyncPipeModalComponent implements OnInit { }); this.sourceZones.data.available = [...zones]; 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.pipeForm.patchValue({ diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-sync-policy-form/rgw-multisite-sync-policy-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-sync-policy-form/rgw-multisite-sync-policy-form.component.html index f1c2af06fe5a5..b9c6b2c96513f 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-sync-policy-form/rgw-multisite-sync-policy-form.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-sync-policy-form/rgw-multisite-sync-policy-form.component.html @@ -1,24 +1,19 @@ -
-
-
-
- {{ action | titlecase }} {{ resource | upperFirst }} -
- -
+ + {{ action | titlecase }} {{ resource | upperFirst }} + + +
+ i18n>Group Name
This field is required.
-
-
-
- +
+
+ +
-
- -
+ + + 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 300f61712353a..dda1671e531f7 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 @@ -12,7 +12,7 @@ import { } from 'rxjs/operators'; import { RgwBucketService } from '~/app/shared/api/rgw-bucket.service'; import { RgwMultisiteService } from '~/app/shared/api/rgw-multisite.service'; -import { ActionLabelsI18n, URLVerbs } from '~/app/shared/constants/app.constants'; +import { ActionLabelsI18n } from '~/app/shared/constants/app.constants'; import { NotificationType } from '~/app/shared/enum/notification-type.enum'; import { CdFormBuilder } from '~/app/shared/forms/cd-form-builder'; import { CdFormGroup } from '~/app/shared/forms/cd-form-group'; @@ -32,7 +32,7 @@ export class RgwMultisiteSyncPolicyFormComponent extends CdForm implements OnIni action: string; resource: string; syncPolicyStatus = RgwMultisiteSyncPolicyStatus; - + pageURL: string; bucketDataSource = (text$: Observable) => { return text$.pipe( debounceTime(200), @@ -51,11 +51,12 @@ export class RgwMultisiteSyncPolicyFormComponent extends CdForm implements OnIni private rgwBucketService: RgwBucketService ) { super(); - this.editing = this.router.url.startsWith(`/rgw/multisite/sync-policy/${URLVerbs.EDIT}`); + 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.createForm(); this.loadingReady(); + this.pageURL = 'rgw/multisite/sync-policy'; } ngOnInit(): void { @@ -70,6 +71,7 @@ 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, @@ -84,6 +86,11 @@ export class RgwMultisiteSyncPolicyFormComponent extends CdForm implements OnIni } } + goToListView() { + // passing state in order to return to same tab on details page + this.router.navigate([this.pageURL, { outlets: { modal: null }, state: { reload: true } }]); + } + createForm() { this.syncPolicyForm = this.fb.group({ group_id: ['', Validators.required], @@ -92,11 +99,6 @@ export class RgwMultisiteSyncPolicyFormComponent extends CdForm implements OnIni }); } - goToListView() { - // passing state in order to return to same tab on details page - this.router.navigate(['/rgw/multisite'], { state: { activeId: 'syncPolicy' } }); - } - submit() { if (this.syncPolicyForm.pristine) { this.goToListView(); @@ -111,7 +113,7 @@ export class RgwMultisiteSyncPolicyFormComponent extends CdForm implements OnIni if (!this.editing) { // Add - this.rgwMultisiteService.createSyncPolicyGroup(this.syncPolicyForm.value).subscribe( + this.rgwMultisiteService.createSyncPolicyGroup(this.syncPolicyForm.getRawValue()).subscribe( () => { this.notificationService.show( NotificationType.success, @@ -125,7 +127,7 @@ export class RgwMultisiteSyncPolicyFormComponent extends CdForm implements OnIni } ); } else { - this.rgwMultisiteService.modifySyncPolicyGroup(this.syncPolicyForm.value).subscribe( + this.rgwMultisiteService.modifySyncPolicyGroup(this.syncPolicyForm.getRawValue()).subscribe( () => { this.notificationService.show( NotificationType.success, diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-sync-policy/rgw-multisite-sync-policy.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-sync-policy/rgw-multisite-sync-policy.component.html index 2dd4e239cf57f..6a5cf899b10c8 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-sync-policy/rgw-multisite-sync-policy.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-sync-policy/rgw-multisite-sync-policy.component.html @@ -1,3 +1,5 @@ + + Multisite Sync Policy @@ -41,3 +43,5 @@ Are you sure you want to delete these policy groups? + diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-sync-policy/rgw-multisite-sync-policy.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-sync-policy/rgw-multisite-sync-policy.component.ts index 422e796671b38..3606e0387c594 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-sync-policy/rgw-multisite-sync-policy.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-sync-policy/rgw-multisite-sync-policy.component.ts @@ -1,10 +1,12 @@ import { TitleCasePipe } from '@angular/common'; import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core'; +import { Router } from '@angular/router'; import { forkJoin as observableForkJoin, Observable, Subscriber } from 'rxjs'; +import { RgwDaemonService } from '~/app/shared/api/rgw-daemon.service'; import { RgwMultisiteService } from '~/app/shared/api/rgw-multisite.service'; import { ListWithDetails } from '~/app/shared/classes/list-with-details.class'; import { CriticalConfirmationModalComponent } from '~/app/shared/components/critical-confirmation-modal/critical-confirmation-modal.component'; -import { ActionLabelsI18n } from '~/app/shared/constants/app.constants'; +import { ActionLabelsI18n, URLVerbs } from '~/app/shared/constants/app.constants'; import { TableComponent } from '~/app/shared/datatable/table/table.component'; import { CellTemplate } from '~/app/shared/enum/cell-template.enum'; import { Icons } from '~/app/shared/enum/icons.enum'; @@ -43,10 +45,11 @@ export class RgwMultisiteSyncPolicyComponent extends ListWithDetails implements private rgwMultisiteService: RgwMultisiteService, private titleCasePipe: TitleCasePipe, private actionLabels: ActionLabelsI18n, - private urlBuilder: URLBuilderService, private authStorageService: AuthStorageService, private modalService: ModalService, - private taskWrapper: TaskWrapperService + private taskWrapper: TaskWrapperService, + private router: Router, + private rgwDaemonService: RgwDaemonService ) { super(); } @@ -92,28 +95,26 @@ export class RgwMultisiteSyncPolicyComponent extends ListWithDetails implements flexGrow: 1 } ]; - const getSyncGroupName = () => { - if (this.selection.first() && this.selection.first().groupName) { - if (this.selection.first().bucket) { - return `${encodeURIComponent(this.selection.first().groupName)}/${encodeURIComponent( - this.selection.first().bucket - )}`; - } - return `${encodeURIComponent(this.selection.first().groupName)}`; + this.rgwDaemonService.list().subscribe(); + const getEditURL = () => { + if (this.selection.first().groupName && this.selection.first().bucket) { + return `${URLVerbs.EDIT}/${this.selection.first().groupName}/${ + this.selection.first().bucket + }`; } - return ''; + return `${URLVerbs.EDIT}/${this.selection.first().groupName}`; }; const addAction: CdTableAction = { permission: 'create', icon: Icons.add, - routerLink: () => this.urlBuilder.getCreate(), + click: () => this.router.navigate([BASE_URL, { outlets: { modal: URLVerbs.CREATE } }]), name: this.actionLabels.CREATE, canBePrimary: (selection: CdTableSelection) => !selection.hasSelection }; const editAction: CdTableAction = { permission: 'update', icon: Icons.edit, - routerLink: () => this.urlBuilder.getEdit(getSyncGroupName()), + click: () => this.router.navigate([BASE_URL, { outlets: { modal: getEditURL() } }]), name: this.actionLabels.EDIT }; const deleteAction: CdTableAction = { @@ -146,14 +147,16 @@ export class RgwMultisiteSyncPolicyComponent extends ListWithDetails implements this.selection = selection; } - getPolicyList(context: CdTableFetchDataContext) { + getPolicyList(context?: CdTableFetchDataContext) { this.rgwMultisiteService.getSyncPolicy('', '', true).subscribe( (resp: object[]) => { this.syncPolicyData = []; this.transformSyncPolicyData(resp); }, () => { - context.error(); + if (context) { + context.error(); + } } ); } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-tabs/rgw-multisite-tabs.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-tabs/rgw-multisite-tabs.component.html new file mode 100644 index 0000000000000..8cc420b39b3d4 --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-tabs/rgw-multisite-tabs.component.html @@ -0,0 +1,16 @@ + diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-tabs/rgw-multisite-tabs.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-tabs/rgw-multisite-tabs.component.scss new file mode 100644 index 0000000000000..e69de29bb2d1d diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-tabs/rgw-multisite-tabs.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-tabs/rgw-multisite-tabs.component.spec.ts new file mode 100644 index 0000000000000..a22a49801a156 --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-tabs/rgw-multisite-tabs.component.spec.ts @@ -0,0 +1,22 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { RgwMultisiteTabsComponent } from './rgw-multisite-tabs.component'; + +describe('RgwMultisiteTabsComponent', () => { + let component: RgwMultisiteTabsComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [RgwMultisiteTabsComponent] + }).compileComponents(); + + fixture = TestBed.createComponent(RgwMultisiteTabsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-tabs/rgw-multisite-tabs.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-tabs/rgw-multisite-tabs.component.ts new file mode 100644 index 0000000000000..369f26722fb17 --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-tabs/rgw-multisite-tabs.component.ts @@ -0,0 +1,8 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'cd-rgw-multisite-tabs', + templateUrl: './rgw-multisite-tabs.component.html', + styleUrls: ['./rgw-multisite-tabs.component.scss'] +}) +export class RgwMultisiteTabsComponent {} diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-wizard/rgw-multisite-wizard.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-wizard/rgw-multisite-wizard.component.ts index f84419dd7a838..673d8daefbea0 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-wizard/rgw-multisite-wizard.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-wizard/rgw-multisite-wizard.component.ts @@ -52,7 +52,7 @@ export class RgwMultisiteWizardComponent implements OnInit { public notificationService: NotificationService, private router: Router ) { - this.pageURL = 'rgw/multisite'; + this.pageURL = 'rgw/multisite/configuration'; this.currentStepSub = this.wizardStepsService .getCurrentStep() .subscribe((step: WizardStepModel) => { diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw.module.ts index 4cf3d2a549d5f..3c7dc088d2f85 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw.module.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw.module.ts @@ -62,6 +62,7 @@ import { RgwMultisiteWizardComponent } from './rgw-multisite-wizard/rgw-multisit import { RgwMultisiteSyncPolicyDetailsComponent } from './rgw-multisite-sync-policy-details/rgw-multisite-sync-policy-details.component'; import { RgwMultisiteSyncFlowModalComponent } from './rgw-multisite-sync-flow-modal/rgw-multisite-sync-flow-modal.component'; import { RgwMultisiteSyncPipeModalComponent } from './rgw-multisite-sync-pipe-modal/rgw-multisite-sync-pipe-modal.component'; +import { RgwMultisiteTabsComponent } from './rgw-multisite-tabs/rgw-multisite-tabs.component'; @NgModule({ imports: [ @@ -128,7 +129,8 @@ import { RgwMultisiteSyncPipeModalComponent } from './rgw-multisite-sync-pipe-mo RgwMultisiteWizardComponent, RgwMultisiteSyncPolicyDetailsComponent, RgwMultisiteSyncFlowModalComponent, - RgwMultisiteSyncPipeModalComponent + RgwMultisiteSyncPipeModalComponent, + RgwMultisiteTabsComponent ], providers: [TitleCasePipe] }) @@ -219,29 +221,40 @@ const routes: Routes = [ }, { path: 'multisite', - component: RgwMultisiteDetailsComponent, data: { breadcrumbs: 'Multi-site' }, children: [ - { path: '', component: RgwMultisiteDetailsComponent }, + { path: '', redirectTo: 'configuration', pathMatch: 'full' }, { - path: `sync-policy/${URLVerbs.CREATE}`, - component: RgwMultisiteSyncPolicyFormComponent, - data: { breadcrumbs: `${ActionLabels.CREATE} Sync Policy` } + path: 'configuration', + component: RgwMultisiteDetailsComponent, + children: [ + { + path: 'setup-multisite-replication', + component: RgwMultisiteWizardComponent, + outlet: 'modal' + } + ] }, { - path: `sync-policy/${URLVerbs.EDIT}/:groupName`, - component: RgwMultisiteSyncPolicyFormComponent, - data: { breadcrumbs: `${ActionLabels.EDIT} Sync Policy` } - }, - { - path: `sync-policy/${URLVerbs.EDIT}/:groupName/:bucketName`, - component: RgwMultisiteSyncPolicyFormComponent, - data: { breadcrumbs: `${ActionLabels.EDIT} Sync Policy` } - }, - { - path: 'setup-multisite-replication', - component: RgwMultisiteWizardComponent, - outlet: 'modal' + path: 'sync-policy', + component: RgwMultisiteSyncPolicyComponent, + children: [ + { + path: `${URLVerbs.CREATE}`, + component: RgwMultisiteSyncPolicyFormComponent, + outlet: 'modal' + }, + { + path: `${URLVerbs.EDIT}/:groupName`, + component: RgwMultisiteSyncPolicyFormComponent, + outlet: 'modal' + }, + { + path: `${URLVerbs.EDIT}/:groupName/:bucketName`, + component: RgwMultisiteSyncPolicyFormComponent, + outlet: 'modal' + } + ] } ] }, -- 2.47.3