From 442346f0efbb5d7d3af3ebdf847586bbe3f93f6d Mon Sep 17 00:00:00 2001
From: Afreen <afreen23.git@gmail.com>
Date: Fri, 31 May 2024 13:24:27 +0530
Subject: [PATCH] mgr/dashboard: Introduce NVMe/TCP navigation

Fixes https://tracker.ceph.com/issues/66346

- adds NVMe/TCP tab under Block nav
- adds overview page for NVMe/TCP nav
- overview page lists gateways
- add default error page when no nvmeof service running
- added unit tests
- fixes service page e2e test

Signed-off-by: Afreen <afreen23.git@gmail.com>
---
 .../mgr/dashboard/controllers/nvmeof.py       | 40 ++++++++++++--
 .../frontend/src/app/app-routing.module.ts    |  5 ++
 .../src/app/ceph/block/block.module.ts        | 27 +++++++++-
 .../nvmeof-gateway.component.html             | 22 ++++++++
 .../nvmeof-gateway.component.scss             |  0
 .../nvmeof-gateway.component.spec.ts          | 53 +++++++++++++++++++
 .../nvmeof-gateway.component.ts               | 47 ++++++++++++++++
 .../service-form/service-form.component.html  |  3 +-
 .../service-form/service-form.component.ts    | 21 ++++++--
 .../breadcrumbs/breadcrumbs.component.spec.ts |  8 +--
 .../breadcrumbs/breadcrumbs.component.ts      |  2 +-
 .../navigation/navigation.component.html      |  8 +++
 .../src/app/shared/api/nvmeof.service.spec.ts | 33 ++++++++++++
 .../src/app/shared/api/nvmeof.service.ts      | 15 ++++++
 .../src/app/shared/models/breadcrumbs.ts      |  4 +-
 .../frontend/src/app/shared/models/nvmeof.ts  | 10 ++++
 .../src/app/shared/models/permission.spec.ts  |  3 ++
 .../src/app/shared/models/permissions.ts      |  2 +
 18 files changed, 288 insertions(+), 15 deletions(-)
 create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-gateway/nvmeof-gateway.component.html
 create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-gateway/nvmeof-gateway.component.scss
 create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-gateway/nvmeof-gateway.component.spec.ts
 create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-gateway/nvmeof-gateway.component.ts
 create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/shared/api/nvmeof.service.spec.ts
 create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/shared/api/nvmeof.service.ts
 create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/shared/models/nvmeof.ts

diff --git a/src/pybind/mgr/dashboard/controllers/nvmeof.py b/src/pybind/mgr/dashboard/controllers/nvmeof.py
index 3d9e337870271..84d7a37952e72 100644
--- a/src/pybind/mgr/dashboard/controllers/nvmeof.py
+++ b/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 @@ else:
             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
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/app-routing.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/app-routing.module.ts
index 8b09a5fc27d6b..2316896863e47 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/app-routing.module.ts
+++ b/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,
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/block.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/block.module.ts
index b9995ac029de9..30a8d21d2c3f3 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/block.module.ts
+++ b/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' } }
+    ]
   }
 ];
 
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-gateway/nvmeof-gateway.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-gateway/nvmeof-gateway.component.html
new file mode 100644
index 0000000000000..3d27a77b1a846
--- /dev/null
+++ b/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>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-gateway/nvmeof-gateway.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-gateway/nvmeof-gateway.component.scss
new file mode 100644
index 0000000000000..e69de29bb2d1d
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-gateway/nvmeof-gateway.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-gateway/nvmeof-gateway.component.spec.ts
new file mode 100644
index 0000000000000..53187cd0f8d8c
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-gateway/nvmeof-gateway.component.spec.ts
@@ -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);
+  }));
+});
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-gateway/nvmeof-gateway.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-gateway/nvmeof-gateway.component.ts
new file mode 100644
index 0000000000000..7d5b3fbe9fe9e
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-gateway/nvmeof-gateway.component.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];
+    });
+  }
+}
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-form/service-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-form/service-form.component.html
index 62333d3391b74..7a439e23dfe70 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-form/service-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-form/service-form.component.html
@@ -222,7 +222,8 @@
           <div class="cd-col-form-input">
             <select id="placement"
                     class="form-select"
-                    formControlName="placement">
+                    formControlName="placement"
+                    (change)="onServiceTypeChange($event.target.value)">
               <option i18n
                       value="hosts">Hosts</option>
               <option i18n
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-form/service-form.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-form/service-form.component.ts
index 6142f7457c224..85a8d4df8e445 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-form/service-form.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-form/service-form.component.ts
@@ -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);
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/breadcrumbs/breadcrumbs.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/breadcrumbs/breadcrumbs.component.spec.ts
index f10c6a56d8549..b92b2ae497eb3 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/breadcrumbs/breadcrumbs.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/breadcrumbs/breadcrumbs.component.spec.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 }
     ]);
   }));
 
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/breadcrumbs/breadcrumbs.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/breadcrumbs/breadcrumbs.component.ts
index 860b89ec90b4c..82d69fbf5d1f5 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/breadcrumbs/breadcrumbs.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/breadcrumbs/breadcrumbs.component.ts
@@ -115,7 +115,7 @@ export class BreadcrumbsComponent implements OnDestroy {
     const result: IBreadcrumb[] = [];
     breadcrumbs.forEach((element) => {
       const split = element.text.split('/');
-      if (split.length > 1) {
+      if (!element.disableSplit && split.length > 1) {
         element.text = split[split.length - 1];
         for (let i = 0; i < split.length - 1; i++) {
           result.push({ text: split[i], path: null });
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html
index f238946963d58..7a05299e1828a 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html
@@ -185,6 +185,10 @@
                             i18n-title
                             *ngIf="permissions.iscsi.read && enabledFeature.iscsi"
                             class="tc_submenuitem tc_submenuitem_block_iscsi"><span i18n>iSCSI</span></cds-sidenav-item>
+          <cds-sidenav-item route="/block/nvmeof"
+                            [useRouter]="true"
+                            title="NVMe/TCP"
+                            i18n-title><span i18n>NVMe/TCP</span></cds-sidenav-item>
         </cds-sidenav-menu>
         <!-- Object Storage -->
         <cds-sidenav-menu title="Object"
@@ -319,4 +323,8 @@
     </div>
     </ng-container>
   </ng-template>
+<<<<<<< HEAD
+  </div>
+=======
   </div>
+>>>>>>> 851da7eae8e (mgr/dashboard: Introduce NVMe/TCP navigation)
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/api/nvmeof.service.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/api/nvmeof.service.spec.ts
new file mode 100644
index 0000000000000..dd6aba7cf6c28
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/api/nvmeof.service.spec.ts
@@ -0,0 +1,33 @@
+import { TestBed } from '@angular/core/testing';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+import { configureTestBed } from '~/testing/unit-test-helper';
+import { NvmeofService } from '../../shared/api/nvmeof.service';
+
+describe('NvmeofService', () => {
+  let service: NvmeofService;
+  let httpTesting: HttpTestingController;
+
+  configureTestBed({
+    providers: [NvmeofService],
+    imports: [HttpClientTestingModule]
+  });
+
+  beforeEach(() => {
+    service = TestBed.inject(NvmeofService);
+    httpTesting = TestBed.inject(HttpTestingController);
+  });
+
+  afterEach(() => {
+    httpTesting.verify();
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  it('should call listGateways', () => {
+    service.listGateways().subscribe();
+    const req = httpTesting.expectOne('api/nvmeof/gateway');
+    expect(req.request.method).toBe('GET');
+  });
+});
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/api/nvmeof.service.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/api/nvmeof.service.ts
new file mode 100644
index 0000000000000..b1d4bace97de1
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/api/nvmeof.service.ts
@@ -0,0 +1,15 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+
+const BASE_URL = 'api/nvmeof';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class NvmeofService {
+  constructor(private http: HttpClient) {}
+
+  listGateways() {
+    return this.http.get(`${BASE_URL}/gateway`);
+  }
+}
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/models/breadcrumbs.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/models/breadcrumbs.ts
index 10e799929da2b..9f0fc49786db5 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/models/breadcrumbs.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/models/breadcrumbs.ts
@@ -32,13 +32,14 @@ export class BreadcrumbsResolver implements Resolve<IBreadcrumb[]> {
   ): Observable<IBreadcrumb[]> | Promise<IBreadcrumb[]> | IBreadcrumb[] {
     const data = route.routeConfig.data;
     const path = data.path === null ? null : this.getFullPath(route);
+    const disableSplit = data.disableSplit || false;
 
     const text =
       typeof data.breadcrumbs === 'string'
         ? data.breadcrumbs
         : data.breadcrumbs.text || data.text || path;
 
-    const crumbs: IBreadcrumb[] = [{ text: text, path: path }];
+    const crumbs: IBreadcrumb[] = [{ text: text, path: path, disableSplit: disableSplit }];
 
     return of(crumbs);
   }
@@ -56,4 +57,5 @@ export class BreadcrumbsResolver implements Resolve<IBreadcrumb[]> {
 export interface IBreadcrumb {
   text: string;
   path: string;
+  disableSplit?: boolean;
 }
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/models/nvmeof.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/models/nvmeof.ts
new file mode 100644
index 0000000000000..f2a92ea9fb594
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/models/nvmeof.ts
@@ -0,0 +1,10 @@
+export interface NvmeofGateway {
+  cli_version: string;
+  version: string;
+  name: string;
+  group: string;
+  addr: string;
+  port: string;
+  load_balancing_group: string;
+  spdk_version: string;
+}
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/models/permission.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/models/permission.spec.ts
index fb2c90469ccc2..213fb416ea5fb 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/models/permission.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/models/permission.spec.ts
@@ -8,6 +8,7 @@ describe('cd-notification classes', () => {
       grafana: { create: false, delete: false, read: false, update: false },
       hosts: { create: false, delete: false, read: false, update: false },
       iscsi: { create: false, delete: false, read: false, update: false },
+      nvmeof: { create: false, delete: false, read: false, update: false },
       log: { create: false, delete: false, read: false, update: false },
       manager: { create: false, delete: false, read: false, update: false },
       monitor: { create: false, delete: false, read: false, update: false },
@@ -29,6 +30,7 @@ describe('cd-notification classes', () => {
       grafana: ['create', 'read', 'update', 'delete'],
       hosts: ['create', 'read', 'update', 'delete'],
       iscsi: ['create', 'read', 'update', 'delete'],
+      'nvme-of': ['create', 'read', 'update', 'delete'],
       log: ['create', 'read', 'update', 'delete'],
       manager: ['create', 'read', 'update', 'delete'],
       monitor: ['create', 'read', 'update', 'delete'],
@@ -46,6 +48,7 @@ describe('cd-notification classes', () => {
       grafana: { create: true, delete: true, read: true, update: true },
       hosts: { create: true, delete: true, read: true, update: true },
       iscsi: { create: true, delete: true, read: true, update: true },
+      nvmeof: { create: true, delete: true, read: true, update: true },
       log: { create: true, delete: true, read: true, update: true },
       manager: { create: true, delete: true, read: true, update: true },
       monitor: { create: true, delete: true, read: true, update: true },
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/models/permissions.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/models/permissions.ts
index 3f2c87ed1a0fe..5e9fe4aae47a6 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/models/permissions.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/models/permissions.ts
@@ -19,6 +19,7 @@ export class Permissions {
   monitor: Permission;
   rbdImage: Permission;
   iscsi: Permission;
+  nvmeof: Permission;
   rbdMirroring: Permission;
   rgw: Permission;
   cephfs: Permission;
@@ -37,6 +38,7 @@ export class Permissions {
     this.monitor = new Permission(serverPermissions['monitor']);
     this.rbdImage = new Permission(serverPermissions['rbd-image']);
     this.iscsi = new Permission(serverPermissions['iscsi']);
+    this.nvmeof = new Permission(serverPermissions['nvme-of']);
     this.rbdMirroring = new Permission(serverPermissions['rbd-mirroring']);
     this.rgw = new Permission(serverPermissions['rgw']);
     this.cephfs = new Permission(serverPermissions['cephfs']);
-- 
2.39.5