Merge pull request ceph#57864 from afreen23/wip-nvmeof-gateways

mgr/dashboard: Introduce NVMe/TCP navigation 

Reviewed-by: Ankush Behl <[email protected]>
Reviewed-by: Nizamudeen A <[email protected]>

Author: cloudbehl

src/pybind/mgr/dashboard/controllers/nvmeof.py

@@ -1,16 +1,27 @@
 # -*- coding: utf-8 -*-
-from typing import Optional
+import logging
+from typing import Any, Dict, Optional
 
+from .. import mgr
 from ..model import nvmeof as model
 from ..security import Scope
+from ..services.orchestrator import OrchClient
 from ..tools import str_to_bool
-from . import APIDoc, APIRouter, Endpoint, EndpointDoc, Param, ReadPermission, RESTController
+from . import APIDoc, APIRouter, BaseController, Endpoint, EndpointDoc, Param, \
+    ReadPermission, RESTController, UIRouter
+
+logger = logging.getLogger(__name__)
+
+NVME_SCHEMA = {
+    "available": (bool, "Is NVMe/TCP available?"),
+    "message": (str, "Descriptions")
+}
 
 try:
     from ..services.nvmeof_client import NVMeoFClient, empty_response, \
         handle_nvmeof_error, map_collection, map_model
-except ImportError:
-    pass
+except ImportError as e:
+    logger.error("Failed to import NVMeoFClient and related components: %s", e)
 else:
     @APIRouter("/nvmeof/gateway", Scope.NVME_OF)
     @APIDoc("NVMe-oF Gateway Management API", "NVMe-oF Gateway")
@@ -380,3 +391,24 @@ def list(self, nqn: str):
             return NVMeoFClient().stub.list_connections(
                 NVMeoFClient.pb2.list_connections_req(subsystem=nqn)
             )
+
+
+@UIRouter('/nvmeof', Scope.NVME_OF)
+@APIDoc("NVMe/TCP Management API", "NVMe/TCP")
+class NVMeoFStatus(BaseController):
+    @Endpoint()
+    @ReadPermission
+    @EndpointDoc("Display NVMe/TCP service Status",
+                 responses={200: NVME_SCHEMA})
+    def status(self) -> dict:
+        status: Dict[str, Any] = {'available': True, 'message': None}
+        orch_backend = mgr.get_module_option_ex('orchestrator', 'orchestrator')
+        if orch_backend == 'cephadm':
+            orch = OrchClient.instance()
+            orch_status = orch.status()
+            if not orch_status['available']:
+                return status
+            if not orch.services.list_daemons(daemon_type='nvmeof'):
+                status["available"] = False
+                status["message"] = 'Create an NVMe/TCP service to get started.'
+        return status

src/pybind/mgr/dashboard/frontend/src/app/app-routing.module.ts

@@ -179,6 +179,11 @@ const routes: Routes = [
             component: ServiceFormComponent,
             outlet: 'modal'
           },
+          {
+            path: `${URLVerbs.CREATE}/:type`,
+            component: ServiceFormComponent,
+            outlet: 'modal'
+          },
           {
             path: `${URLVerbs.EDIT}/:type/:name`,
             component: ServiceFormComponent,

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

@@ -38,6 +38,7 @@ import { RbdTrashListComponent } from './rbd-trash-list/rbd-trash-list.component
 import { RbdTrashMoveModalComponent } from './rbd-trash-move-modal/rbd-trash-move-modal.component';
 import { RbdTrashPurgeModalComponent } from './rbd-trash-purge-modal/rbd-trash-purge-modal.component';
 import { RbdTrashRestoreModalComponent } from './rbd-trash-restore-modal/rbd-trash-restore-modal.component';
+import { NvmeofGatewayComponent } from './nvmeof-gateway/nvmeof-gateway.component';
 
 @NgModule({
   imports: [
@@ -77,7 +78,8 @@ import { RbdTrashRestoreModalComponent } from './rbd-trash-restore-modal/rbd-tra
     RbdConfigurationListComponent,
     RbdConfigurationFormComponent,
     RbdTabsComponent,
-    RbdPerformanceComponent
+    RbdPerformanceComponent,
+    NvmeofGatewayComponent
   ],
   exports: [RbdConfigurationListComponent, RbdConfigurationFormComponent]
 })
@@ -198,6 +200,29 @@ const routes: Routes = [
         ]
       }
     ]
+  },
+  // NVMe/TCP
+  {
+    path: 'nvmeof',
+    canActivate: [ModuleStatusGuardService],
+    data: {
+      breadcrumbs: true,
+      text: 'NVMe/TCP',
+      path: 'nvmeof',
+      disableSplit: true,
+      moduleStatusGuardConfig: {
+        uiApiPath: 'nvmeof',
+        redirectTo: 'error',
+        header: $localize`NVMe/TCP Gateway not configured`,
+        button_name: $localize`Configure NVMe/TCP`,
+        button_route: ['/services', { outlets: { modal: ['create', 'nvmeof'] } }],
+        uiConfig: false
+      }
+    },
+    children: [
+      { path: '', redirectTo: 'gateways', pathMatch: 'full' },
+      { path: 'gateways', component: NvmeofGatewayComponent, data: { breadcrumbs: 'Gateways' } }
+    ]
   }
 ];
 

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

@@ -0,0 +1,22 @@
+<ul class="nav nav-tabs">
+  <li class="nav-item">
+    <a class="nav-link"
+       routerLink="/block/nvmeof/gateways"
+       routerLinkActive="active"
+       ariaCurrentWhenActive="page"
+       i18n>Gateways</a>
+  </li>
+</ul>
+
+<legend i18n>
+  Gateways
+  <cd-help-text>
+    The NVMe-oF gateway integrates Ceph with the NVMe over TCP (NVMe/TCP) protocol to provide an NVMe/TCP target that exports RADOS Block Device (RBD) images.
+  </cd-help-text>
+</legend>
+<div>
+  <cd-table [data]="gateways"
+            (fetchData)="getGateways()"
+            [columns]="gatewayColumns">
+  </cd-table>
+</div>

src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-gateway/nvmeof-gateway.component.scss

@@ -0,0 +1,53 @@
+import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
+import { of } from 'rxjs';
+import { NvmeofGatewayComponent } from './nvmeof-gateway.component';
+import { NvmeofService } from '../../../shared/api/nvmeof.service';
+import { HttpClientModule } from '@angular/common/http';
+import { SharedModule } from '~/app/shared/shared.module';
+
+const mockGateways = [
+  {
+    cli_version: '',
+    version: '1.2.5',
+    name: 'client.nvmeof.rbd.ceph-node-01.jnmnwa',
+    group: '',
+    addr: '192.168.100.101',
+    port: '5500',
+    load_balancing_group: 1,
+    spdk_version: '24.01'
+  }
+];
+
+class MockNvmeOfService {
+  listGateways() {
+    return of(mockGateways);
+  }
+}
+
+describe('NvmeofGatewayComponent', () => {
+  let component: NvmeofGatewayComponent;
+  let fixture: ComponentFixture<NvmeofGatewayComponent>;
+
+  beforeEach(fakeAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [NvmeofGatewayComponent],
+      imports: [HttpClientModule, SharedModule],
+      providers: [{ provide: NvmeofService, useClass: MockNvmeOfService }]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NvmeofGatewayComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should retrieve gateways', fakeAsync(() => {
+    component.getGateways();
+    tick();
+    expect(component.gateways).toEqual(mockGateways);
+  }));
+});

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

@@ -0,0 +1,47 @@
+import { Component, OnInit } from '@angular/core';
+
+import { ActionLabelsI18n } from '~/app/shared/constants/app.constants';
+import { ListWithDetails } from '~/app/shared/classes/list-with-details.class';
+import { CdTableSelection } from '~/app/shared/models/cd-table-selection';
+import { NvmeofGateway } from '~/app/shared/models/nvmeof';
+
+import { NvmeofService } from '../../../shared/api/nvmeof.service';
+
+@Component({
+  selector: 'cd-nvmeof-gateway',
+  templateUrl: './nvmeof-gateway.component.html',
+  styleUrls: ['./nvmeof-gateway.component.scss']
+})
+export class NvmeofGatewayComponent extends ListWithDetails implements OnInit {
+  gateways: NvmeofGateway[] = [];
+  gatewayColumns: any;
+  selection = new CdTableSelection();
+
+  constructor(private nvmeofService: NvmeofService, public actionLabels: ActionLabelsI18n) {
+    super();
+  }
+
+  ngOnInit() {
+    this.gatewayColumns = [
+      {
+        name: $localize`Name`,
+        prop: 'name'
+      },
+      {
+        name: $localize`Address`,
+        prop: 'addr'
+      },
+      {
+        name: $localize`Port`,
+        prop: 'port'
+      }
+    ];
+  }
+
+  getGateways() {
+    this.nvmeofService.listGateways().subscribe((gateways: NvmeofGateway[] | NvmeofGateway) => {
+      if (Array.isArray(gateways)) this.gateways = gateways;
+      else this.gateways = [gateways];
+    });
+  }
+}

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

@@ -222,7 +222,8 @@
           <div class="cd-col-form-input">
             <select id="placement"
                     class="form-select"
-                    formControlName="placement">
+                    formControlName="placement"
+                    (change)="onPlacementChange($event.target.value)">
               <option i18n
                       value="hosts">Hosts</option>
               <option i18n

src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-form/service-form.component.html

@@ -424,10 +424,15 @@ export class ServiceFormComponent extends CdForm implements OnInit {
     });
   }
 
-  ngOnInit(): void {
-    this.action = this.actionLabels.CREATE;
+  resolveRoute() {
     if (this.router.url.includes('services/(modal:create')) {
       this.pageURL = 'services';
+      this.route.params.subscribe((params: { type: string }) => {
+        if (params?.type) {
+          this.serviceType = params.type;
+          this.serviceForm.get('service_type').setValue(this.serviceType);
+        }
+      });
     } else if (this.router.url.includes('services/(modal:edit')) {
       this.editing = true;
       this.pageURL = 'services';
@@ -436,6 +441,11 @@ export class ServiceFormComponent extends CdForm implements OnInit {
         this.serviceType = params.type;
       });
     }
+  }
+
+  ngOnInit(): void {
+    this.action = this.actionLabels.CREATE;
+    this.resolveRoute();
 
     this.cephServiceService
       .list(new HttpParams({ fromObject: { limit: -1, offset: 0 } }))
@@ -471,6 +481,9 @@ export class ServiceFormComponent extends CdForm implements OnInit {
     this.poolService.getList().subscribe((resp: Pool[]) => {
       this.pools = resp;
       this.rbdPools = this.pools.filter(this.rbdService.isRBDPool);
+      if (!this.editing && this.serviceType) {
+        this.onServiceTypeChange(this.serviceType);
+      }
     });
 
     if (this.editing) {
@@ -670,6 +683,8 @@ export class ServiceFormComponent extends CdForm implements OnInit {
       case 'smb':
         this.serviceForm.get('count').setValue(1);
         break;
+      default:
+        this.serviceForm.get('count').setValue(null);
     }
   }
 
@@ -759,7 +774,7 @@ export class ServiceFormComponent extends CdForm implements OnInit {
   }
 
   setNvmeofServiceId(): void {
-    const defaultRbdPool: string = this.rbdPools.find((p: Pool) => p.pool_name === 'rbd')
+    const defaultRbdPool: string = this.rbdPools?.find((p: Pool) => p.pool_name === 'rbd')
       ?.pool_name;
     if (defaultRbdPool) {
       this.serviceForm.get('pool').setValue(defaultRbdPool);
@@ -796,6 +811,12 @@ export class ServiceFormComponent extends CdForm implements OnInit {
     }
   }
 
+  onPlacementChange(selected: string) {
+    if (selected === 'label') {
+      this.serviceForm.get('count').setValue(null);
+    }
+  }
+
   onBlockPoolChange() {
     const selectedBlockPool = this.serviceForm.get('pool').value;
     if (selectedBlockPool) {

src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-form/service-form.component.ts

@@ -79,7 +79,7 @@ describe('BreadcrumbsComponent', () => {
     tick();
     expect(component.crumbs).toEqual([
       { path: null, text: 'Cluster' },
-      { path: '/hosts', text: 'Hosts' }
+      { path: '/hosts', text: 'Hosts', disableSplit: false }
     ]);
   }));
 
@@ -125,9 +125,9 @@ describe('BreadcrumbsComponent', () => {
     });
     tick();
     expect(component.crumbs).toEqual([
-      { path: null, text: 'Block' },
-      { path: '/block/rbd', text: 'Images' },
-      { path: '/block/rbd/add', text: 'Add' }
+      { path: null, text: 'Block', disableSplit: false },
+      { path: '/block/rbd', text: 'Images', disableSplit: false },
+      { path: '/block/rbd/add', text: 'Add', disableSplit: false }
     ]);
   }));