Merge pull request ceph#59807 from afreen23/wip-group-switcher

mgr/dashboard: Add group selector in subsystems views

Reviewed-by: Afreen Misbah <[email protected]>

Author: afreen23

src/pybind/mgr/dashboard/frontend/src/app/ceph/block/block.module.ts

@@ -53,6 +53,7 @@ import { NvmeofInitiatorsFormComponent } from './nvmeof-initiators-form/nvmeof-i
 import {
   ButtonModule,
   CheckboxModule,
+  ComboBoxModule,
   DatePickerModule,
   GridModule,
   IconModule,
@@ -95,7 +96,8 @@ import Reset from '@carbon/icons/es/reset/32';
     SelectModule,
     NumberModule,
     ModalModule,
-    DatePickerModule
+    DatePickerModule,
+    ComboBoxModule
   ],
   declarations: [
     RbdListComponent,

src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-listeners-form/nvmeof-listeners-form.component.ts

@@ -13,9 +13,9 @@ import { FormatterService } from '~/app/shared/services/formatter.service';
 import { CdValidators } from '~/app/shared/forms/cd-validators';
 import { DimlessBinaryPipe } from '~/app/shared/pipes/dimless-binary.pipe';
 import { HostService } from '~/app/shared/api/host.service';
-import { DaemonService } from '~/app/shared/api/daemon.service';
 import { map } from 'rxjs/operators';
 import { forkJoin } from 'rxjs';
+import { CephServiceSpec } from '~/app/shared/models/service.interface';
 
 @Component({
   selector: 'cd-nvmeof-listeners-form',
@@ -31,6 +31,7 @@ export class NvmeofListenersFormComponent implements OnInit {
   listenerForm: CdFormGroup;
   subsystemNQN: string;
   hosts: Array<object> = null;
+  group: string;
 
   constructor(
     public actionLabels: ActionLabelsI18n,
@@ -42,8 +43,7 @@ export class NvmeofListenersFormComponent implements OnInit {
     private route: ActivatedRoute,
     public activeModal: NgbActiveModal,
     public formatterService: FormatterService,
-    public dimlessBinaryPipe: DimlessBinaryPipe,
-    private daemonService: DaemonService
+    public dimlessBinaryPipe: DimlessBinaryPipe
   ) {
     this.permission = this.authStorageService.getPermissions().nvmeof;
     this.hostPermission = this.authStorageService.getPermissions().hosts;
@@ -53,13 +53,20 @@ export class NvmeofListenersFormComponent implements OnInit {
 
   setHosts() {
     forkJoin({
-      daemons: this.daemonService.list(['nvmeof']),
+      gwGroups: this.nvmeofService.listGatewayGroups(),
       hosts: this.hostService.getAllHosts()
     })
       .pipe(
-        map(({ daemons, hosts }) => {
-          const hostNamesFromDaemon = daemons.map((daemon: any) => daemon.hostname);
-          return hosts.filter((host: any) => hostNamesFromDaemon.includes(host.hostname));
+        map(({ gwGroups, hosts }) => {
+          // Find the gateway hosts in current group
+          const selectedGwGroup: CephServiceSpec = gwGroups?.[0]?.find(
+            (gwGroup: CephServiceSpec) => gwGroup?.spec?.group === this.group
+          );
+          const gatewayHosts: string[] = selectedGwGroup?.placement?.hosts;
+          // Return the gateway hosts in current group with their metadata
+          return gatewayHosts
+            ? hosts.filter((host: any) => gatewayHosts.includes(host.hostname))
+            : [];
         })
       )
       .subscribe((nvmeofHosts: any[]) => {
@@ -71,7 +78,10 @@ export class NvmeofListenersFormComponent implements OnInit {
     this.createForm();
     this.action = this.actionLabels.CREATE;
     this.route.params.subscribe((params: { subsystem_nqn: string }) => {
-      this.subsystemNQN = params.subsystem_nqn;
+      this.subsystemNQN = params?.subsystem_nqn;
+    });
+    this.route.queryParams.subscribe((params) => {
+      this.group = params?.['group'];
     });
     this.setHosts();
   }
@@ -118,7 +128,9 @@ export class NvmeofListenersFormComponent implements OnInit {
           component.listenerForm.setErrors({ cdSubmitButton: true });
         },
         complete: () => {
-          this.router.navigate([this.pageURL, { outlets: { modal: null } }]);
+          this.router.navigate([this.pageURL, { outlets: { modal: null } }], {
+            queryParams: { group: this.group }
+          });
         }
       });
   }

src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-listeners-list/nvmeof-listeners-list.component.ts

@@ -24,6 +24,8 @@ const BASE_URL = 'block/nvmeof/subsystems';
 export class NvmeofListenersListComponent implements OnInit, OnChanges {
   @Input()
   subsystemNQN: string;
+  @Input()
+  group: string;
 
   listenerColumns: any;
   tableActions: CdTableAction[];
@@ -64,10 +66,10 @@ export class NvmeofListenersListComponent implements OnInit, OnChanges {
         permission: 'create',
         icon: Icons.add,
         click: () =>
-          this.router.navigate([
-            BASE_URL,
-            { outlets: { modal: [URLVerbs.CREATE, this.subsystemNQN, 'listener'] } }
-          ]),
+          this.router.navigate(
+            [BASE_URL, { outlets: { modal: [URLVerbs.CREATE, this.subsystemNQN, 'listener'] } }],
+            { queryParams: { group: this.group } }
+          ),
         canBePrimary: (selection: CdTableSelection) => !selection.hasSelection
       },
       {

src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-subsystems-details/nvmeof-subsystems-details.component.html

@@ -15,7 +15,8 @@
       <a ngbNavLink
          i18n>Listeners</a>
       <ng-template ngbNavContent>
-        <cd-nvmeof-listeners-list [subsystemNQN]="subsystemNQN">
+        <cd-nvmeof-listeners-list [subsystemNQN]="subsystemNQN"
+                                  [group]="group">
         </cd-nvmeof-listeners-list>
       </ng-template>
     </ng-container>

src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-subsystems-details/nvmeof-subsystems-details.component.ts

@@ -9,6 +9,8 @@ import { NvmeofSubsystem } from '~/app/shared/models/nvmeof';
 export class NvmeofSubsystemsDetailsComponent implements OnChanges {
   @Input()
   selection: NvmeofSubsystem;
+  @Input()
+  group: NvmeofSubsystem;
 
   selectedItem: any;
   data: any;

src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-subsystems-form/nvmeof-subsystems-form.component.spec.ts

@@ -20,6 +20,7 @@ describe('NvmeofSubsystemsFormComponent', () => {
   let form: CdFormGroup;
   let formHelper: FormHelper;
   const mockTimestamp = 1720693470789;
+  const mockGroupName = 'default';
 
   beforeEach(async () => {
     spyOn(Date, 'now').and.returnValue(mockTimestamp);
@@ -42,6 +43,7 @@ describe('NvmeofSubsystemsFormComponent', () => {
     form = component.subsystemForm;
     formHelper = new FormHelper(form);
     fixture.detectChanges();
+    component.group = mockGroupName;
   });
 
   it('should create', () => {
@@ -60,7 +62,8 @@ describe('NvmeofSubsystemsFormComponent', () => {
       expect(nvmeofService.createSubsystem).toHaveBeenCalledWith({
         nqn: expectedNqn,
         max_namespaces: MAX_NAMESPACE,
-        enable_ha: true
+        enable_ha: true,
+        gw_group: mockGroupName
       });
     });
 

src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-subsystems-form/nvmeof-subsystems-form.component.ts

@@ -9,7 +9,7 @@ import { Permission } from '~/app/shared/models/permissions';
 import { AuthStorageService } from '~/app/shared/services/auth-storage.service';
 import { TaskWrapperService } from '~/app/shared/services/task-wrapper.service';
 import { FinishedTask } from '~/app/shared/models/finished-task';
-import { Router } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { MAX_NAMESPACE, NvmeofService } from '~/app/shared/api/nvmeof.service';
 
 @Component({
@@ -24,14 +24,16 @@ export class NvmeofSubsystemsFormComponent implements OnInit {
   resource: string;
   pageURL: string;
   defaultMaxNamespace: number = MAX_NAMESPACE;
+  group: string;
 
   constructor(
     private authStorageService: AuthStorageService,
     public actionLabels: ActionLabelsI18n,
     public activeModal: NgbActiveModal,
     private nvmeofService: NvmeofService,
     private taskWrapperService: TaskWrapperService,
-    private router: Router
+    private router: Router,
+    private route: ActivatedRoute
   ) {
     this.permission = this.authStorageService.getPermissions().nvmeof;
     this.resource = $localize`Subsystem`;
@@ -49,6 +51,9 @@ export class NvmeofSubsystemsFormComponent implements OnInit {
   );
 
   ngOnInit() {
+    this.route.queryParams.subscribe((params) => {
+      this.group = params?.['group'];
+    });
     this.createForm();
     this.action = this.actionLabels.CREATE;
   }
@@ -66,7 +71,13 @@ export class NvmeofSubsystemsFormComponent implements OnInit {
           )
         ],
         asyncValidators: [
-          CdValidators.unique(this.nvmeofService.isSubsystemPresent, this.nvmeofService)
+          CdValidators.unique(
+            this.nvmeofService.isSubsystemPresent,
+            this.nvmeofService,
+            null,
+            null,
+            this.group
+          )
         ]
       }),
       max_namespaces: new UntypedFormControl(this.defaultMaxNamespace, {
@@ -87,8 +98,9 @@ export class NvmeofSubsystemsFormComponent implements OnInit {
 
     const request = {
       nqn,
-      max_namespaces,
-      enable_ha: true
+      enable_ha: true,
+      gw_group: this.group,
+      max_namespaces
     };
 
     if (!max_namespaces) {
@@ -106,7 +118,9 @@ export class NvmeofSubsystemsFormComponent implements OnInit {
           component.subsystemForm.setErrors({ cdSubmitButton: true });
         },
         complete: () => {
-          this.router.navigate([this.pageURL, { outlets: { modal: null } }]);
+          this.router.navigate([this.pageURL, { outlets: { modal: null } }], {
+            queryParams: { group: this.group }
+          });
         }
       });
   }

src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-subsystems/nvmeof-subsystems.component.html

@@ -1,4 +1,20 @@
 <cd-nvmeof-tabs></cd-nvmeof-tabs>
+
+<div class="pb-3"
+     cdsCol
+     [columnNumbers]="{md: 4}">
+  <cds-combo-box
+      type="single"
+      label="Selected Gateway Group"
+      i18n-placeholder
+      placeholder="Enter group"
+      [items]="gwGroups"
+      (selected)="onGroupSelection($event)"
+      (clear)="onGroupClear()">
+    <cds-dropdown-list></cds-dropdown-list>
+  </cds-combo-box>
+</div>
+
 <legend i18n>
   Subsystems
   <cd-help-text>
@@ -23,7 +39,8 @@
   </div>
 
   <cd-nvmeof-subsystems-details *cdTableDetail
-                                [selection]="expandedRow">
+                                [selection]="expandedRow"
+                                [group]="group">
   </cd-nvmeof-subsystems-details>
 </cd-table>
 <router-outlet name="modal"></router-outlet>

src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-subsystems/nvmeof-subsystems.component.spec.ts

@@ -11,6 +11,7 @@ import { TaskWrapperService } from '~/app/shared/services/task-wrapper.service';
 import { NvmeofSubsystemsComponent } from './nvmeof-subsystems.component';
 import { NvmeofTabsComponent } from '../nvmeof-tabs/nvmeof-tabs.component';
 import { NvmeofSubsystemsDetailsComponent } from '../nvmeof-subsystems-details/nvmeof-subsystems-details.component';
+import { ComboBoxModule, GridModule } from 'carbon-components-angular';
 
 const mockSubsystems = [
   {
@@ -26,10 +27,36 @@ const mockSubsystems = [
   }
 ];
 
+const mockGroups = [
+  [
+    {
+      service_name: 'nvmeof.rbd.default',
+      service_type: 'nvmeof',
+      unmanaged: false,
+      spec: {
+        group: 'default'
+      }
+    },
+    {
+      service_name: 'nvmeof.rbd.foo',
+      service_type: 'nvmeof',
+      unmanaged: false,
+      spec: {
+        group: 'foo'
+      }
+    }
+  ],
+  2
+];
+
 class MockNvmeOfService {
   listSubsystems() {
     return of(mockSubsystems);
   }
+
+  listGatewayGroups() {
+    return of(mockGroups);
+  }
 }
 
 class MockAuthStorageService {
@@ -53,7 +80,7 @@ describe('NvmeofSubsystemsComponent', () => {
         NvmeofTabsComponent,
         NvmeofSubsystemsDetailsComponent
       ],
-      imports: [HttpClientModule, RouterTestingModule, SharedModule],
+      imports: [HttpClientModule, RouterTestingModule, SharedModule, ComboBoxModule, GridModule],
       providers: [
         { provide: NvmeofService, useClass: MockNvmeOfService },
         { provide: AuthStorageService, useClass: MockAuthStorageService },
@@ -77,4 +104,12 @@ describe('NvmeofSubsystemsComponent', () => {
     tick();
     expect(component.subsystems).toEqual(mockSubsystems);
   }));
+
+  it('should load gateway groups correctly', () => {
+    expect(component.gwGroups.length).toBe(2);
+  });
+
+  it('should set first group as default initially', () => {
+    expect(component.group).toBe(mockGroups[0][0].spec.group);
+  });
 });