mgr/dashboard: Configure subsystems from dashboard

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

- adds subsytems tab
- adds subsystem listing view
- adds create subsystem modal
- adds delete subsystem
- adds unit tests

Signed-off-by: Afreen Misbah <[email protected]>

Author: afreen23

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

@@ -39,6 +39,10 @@ import { RbdTrashMoveModalComponent } from './rbd-trash-move-modal/rbd-trash-mov
 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';
+import { NvmeofSubsystemsComponent } from './nvmeof-subsystems/nvmeof-subsystems.component';
+import { NvmeofSubsystemsDetailsComponent } from './nvmeof-subsystems-details/nvmeof-subsystems-details.component';
+import { NvmeofTabsComponent } from './nvmeof-tabs/nvmeof-tabs.component';
+import { NvmeofSubsystemsFormComponent } from './nvmeof-subsystems-form/nvmeof-subsystems-form.component';
 
 @NgModule({
   imports: [
@@ -79,7 +83,11 @@ import { NvmeofGatewayComponent } from './nvmeof-gateway/nvmeof-gateway.componen
     RbdConfigurationFormComponent,
     RbdTabsComponent,
     RbdPerformanceComponent,
-    NvmeofGatewayComponent
+    NvmeofGatewayComponent,
+    NvmeofSubsystemsComponent,
+    NvmeofSubsystemsDetailsComponent,
+    NvmeofTabsComponent,
+    NvmeofSubsystemsFormComponent
   ],
   exports: [RbdConfigurationListComponent, RbdConfigurationFormComponent]
 })
@@ -220,7 +228,25 @@ const routes: Routes = [
       }
     },
     children: [
-      { path: '', redirectTo: 'gateways', pathMatch: 'full' },
+      { path: '', redirectTo: 'subsystems', pathMatch: 'full' },
+      {
+        path: 'subsystems',
+        component: NvmeofSubsystemsComponent,
+        data: { breadcrumbs: 'Subsystems' },
+        children: [
+          { path: '', component: NvmeofSubsystemsComponent },
+          {
+            path: URLVerbs.CREATE,
+            component: NvmeofSubsystemsFormComponent,
+            outlet: 'modal'
+          },
+          {
+            path: `${URLVerbs.EDIT}/:subsystem_nqn`,
+            component: NvmeofSubsystemsFormComponent,
+            outlet: 'modal'
+          }
+        ]
+      },
       { path: 'gateways', component: NvmeofGatewayComponent, data: { breadcrumbs: 'Gateways' } }
     ]
   }

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

@@ -1,12 +1,4 @@
-<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>
+<cd-nvmeof-tabs></cd-nvmeof-tabs>
 
 <legend i18n>
   Gateways

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

@@ -1,7 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } 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';
 
@@ -12,14 +11,12 @@ import { NvmeofService } from '../../../shared/api/nvmeof.service';
   templateUrl: './nvmeof-gateway.component.html',
   styleUrls: ['./nvmeof-gateway.component.scss']
 })
-export class NvmeofGatewayComponent extends ListWithDetails implements OnInit {
+export class NvmeofGatewayComponent {
   gateways: NvmeofGateway[] = [];
   gatewayColumns: any;
   selection = new CdTableSelection();
 
-  constructor(private nvmeofService: NvmeofService, public actionLabels: ActionLabelsI18n) {
-    super();
-  }
+  constructor(private nvmeofService: NvmeofService, public actionLabels: ActionLabelsI18n) {}
 
   ngOnInit() {
     this.gatewayColumns = [

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

@@ -0,0 +1,17 @@
+<ng-container *ngIf="selection">
+  <nav ngbNav
+       #nav="ngbNav"
+       class="nav-tabs"
+       cdStatefulTab="subsystem-details">
+    <ng-container ngbNavItem="details">
+      <a ngbNavLink
+         i18n>Details</a>
+      <ng-template ngbNavContent>
+        <cd-table-key-value [data]="data">
+        </cd-table-key-value>
+      </ng-template>
+    </ng-container>
+  </nav>
+
+  <div [ngbNavOutlet]="nav"></div>
+</ng-container>

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

@@ -0,0 +1,49 @@
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
+
+import { SharedModule } from '~/app/shared/shared.module';
+import { NvmeofSubsystemsDetailsComponent } from './nvmeof-subsystems-details.component';
+
+describe('NvmeofSubsystemsDetailsComponent', () => {
+  let component: NvmeofSubsystemsDetailsComponent;
+  let fixture: ComponentFixture<NvmeofSubsystemsDetailsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [NvmeofSubsystemsDetailsComponent],
+      imports: [BrowserAnimationsModule, SharedModule, HttpClientTestingModule, NgbNavModule]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(NvmeofSubsystemsDetailsComponent);
+    component = fixture.componentInstance;
+    component.selection = {
+      serial_number: 'Ceph30487186726692',
+      model_number: 'Ceph bdev Controller',
+      min_cntlid: 1,
+      max_cntlid: 2040,
+      subtype: 'NVMe',
+      nqn: 'nqn.2001-07.com.ceph:1720603703820',
+      namespace_count: 1,
+      max_namespaces: 256
+    };
+    component.ngOnChanges();
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should prepare data', () => {
+    expect(component.data).toEqual({
+      'Serial Number': 'Ceph30487186726692',
+      'Model Number': 'Ceph bdev Controller',
+      'Minimum Controller Identifier': 1,
+      'Maximum Controller Identifier': 2040,
+      'Subsystem Type': 'NVMe'
+    });
+  });
+});

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

@@ -0,0 +1,27 @@
+import { Component, Input, OnChanges } from '@angular/core';
+import { NvmeofSubsystem } from '~/app/shared/models/nvmeof';
+
+@Component({
+  selector: 'cd-nvmeof-subsystems-details',
+  templateUrl: './nvmeof-subsystems-details.component.html',
+  styleUrls: ['./nvmeof-subsystems-details.component.scss']
+})
+export class NvmeofSubsystemsDetailsComponent implements OnChanges {
+  @Input()
+  selection: NvmeofSubsystem;
+
+  selectedItem: any;
+  data: any;
+
+  ngOnChanges() {
+    if (this.selection) {
+      this.selectedItem = this.selection;
+      this.data = {};
+      this.data[$localize`Serial Number`] = this.selectedItem.serial_number;
+      this.data[$localize`Model Number`] = this.selectedItem.model_number;
+      this.data[$localize`Minimum Controller Identifier`] = this.selectedItem.min_cntlid;
+      this.data[$localize`Maximum Controller Identifier`] = this.selectedItem.max_cntlid;
+      this.data[$localize`Subsystem Type`] = this.selectedItem.subtype;
+    }
+  }
+}

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

@@ -0,0 +1,74 @@
+<cd-modal [pageURL]="pageURL"
+          [modalRef]="activeModal">
+  <span class="modal-title"
+        i18n>{{ action | titlecase }} {{ resource | upperFirst }}</span>
+  <ng-container class="modal-content">
+    <form name="subsystemForm"
+          #formDir="ngForm"
+          [formGroup]="subsystemForm"
+          novalidate>
+      <div class="modal-body">
+        <!-- NQN -->
+        <div class="form-group row">
+          <label class="cd-col-form-label"
+                 for="nqn">
+            <span class="required"
+                  i18n>NQN</span>
+          </label>
+          <div class="cd-col-form-input">
+            <input name="nqn"
+                   class="form-control"
+                   type="text"
+                   formControlName="nqn">
+              <cd-help-text>
+                The NVMe Qualified Name (NQN) is a unique and permanent name for the lifetime of the subsystem.
+              </cd-help-text>
+            <span class="invalid-feedback"
+                  *ngIf="subsystemForm.showError('nqn', formDir, 'required')"
+                  i18n>This field is required.</span>
+            <span class="invalid-feedback"
+                  *ngIf="subsystemForm.showError('nqn', formDir, 'unique')"
+                  i18n>This NQN is already in use.</span>
+            <span class="invalid-feedback"
+                  *ngIf="subsystemForm.showError('nqn', formDir, 'pattern')"
+                  i18n>An NQN should follow the format of<br/>&lt;<code>nqn.$year-$month.$reverseDomainName:$definedName</code>".&gt;</span>
+            <span class="invalid-feedback"
+                  *ngIf="subsystemForm.showError('nqn', formDir, 'maxLength')"
+                  i18n>An NQN should not be more than 223 bytes in length.</span>
+          </div>
+        </div>
+        <!-- Maximum Namespaces -->
+        <div class="form-group row">
+          <label class="cd-col-form-label"
+                 for="max_namespaces">
+            <span i18n>Maximum Namespaces</span>
+          </label>
+          <div class="cd-col-form-input">
+            <input id="max_namespaces"
+                   class="form-control"
+                   type="text"
+                   name="max_namespaces"
+                   formControlName="max_namespaces">
+            <cd-help-text i18n>The maximum namespaces per subsystem. Default is 256.</cd-help-text>
+            <span class="invalid-feedback"
+                  *ngIf="subsystemForm.showError('max_namespaces', formDir, 'min')"
+                  i18n>The value must be at least 1.</span>
+            <span class="invalid-feedback"
+                  *ngIf="subsystemForm.showError('max_namespaces', formDir, 'max')"
+                  i18n>The value cannot be greated than 256.</span>
+            <span class="invalid-feedback"
+                  *ngIf="subsystemForm.showError('max_namespaces', formDir, 'pattern')"
+                  i18n>The value must be  a positive integer.</span>
+          </div>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <div class="text-right">
+          <cd-form-button-panel (submitActionEvent)="onSubmit()"
+                                [form]="subsystemForm"
+                                [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"></cd-form-button-panel>
+        </div>
+      </div>
+    </form>
+  </ng-container>
+</cd-modal>

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

@@ -0,0 +1,91 @@
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { ReactiveFormsModule } from '@angular/forms';
+import { RouterTestingModule } from '@angular/router/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ToastrModule } from 'ngx-toastr';
+
+import { NgbActiveModal, NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
+
+import { CdFormGroup } from '~/app/shared/forms/cd-form-group';
+import { SharedModule } from '~/app/shared/shared.module';
+import { NvmeofSubsystemsFormComponent } from './nvmeof-subsystems-form.component';
+import { FormHelper } from '~/testing/unit-test-helper';
+import { NvmeofService } from '~/app/shared/api/nvmeof.service';
+
+describe('NvmeofSubsystemsFormComponent', () => {
+  let component: NvmeofSubsystemsFormComponent;
+  let fixture: ComponentFixture<NvmeofSubsystemsFormComponent>;
+  let nvmeofService: NvmeofService;
+  let form: CdFormGroup;
+  let formHelper: FormHelper;
+  const mockTimestamp = 1720693470789;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [NvmeofSubsystemsFormComponent],
+      providers: [NgbActiveModal],
+      imports: [
+        HttpClientTestingModule,
+        NgbTypeaheadModule,
+        ReactiveFormsModule,
+        RouterTestingModule,
+        SharedModule,
+        ToastrModule.forRoot()
+      ]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(NvmeofSubsystemsFormComponent);
+    component = fixture.componentInstance;
+    component.ngOnInit();
+    form = component.subsystemForm;
+    formHelper = new FormHelper(form);
+    spyOn(Date, 'now').and.returnValue(mockTimestamp);
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('should test form', () => {
+    beforeEach(() => {
+      nvmeofService = TestBed.inject(NvmeofService);
+      spyOn(nvmeofService, 'createSubsystem').and.stub();
+    });
+
+    it('should be creating request correctly', () => {
+      const expectedNqn = 'nqn.2001-07.com.ceph:' + mockTimestamp;
+      component.onSubmit();
+      expect(nvmeofService.createSubsystem).toHaveBeenCalledWith({
+        nqn: expectedNqn,
+        max_namespaces: 256,
+        enable_ha: true
+      });
+    });
+
+    it('should give error on invalid nqn', () => {
+      formHelper.setValue('nqn', 'nqn:2001-07.com.ceph:');
+      component.onSubmit();
+      formHelper.expectError('nqn', 'pattern');
+    });
+
+    it('should give error on invalid max_namespaces', () => {
+      formHelper.setValue('max_namespaces', -56);
+      component.onSubmit();
+      formHelper.expectError('max_namespaces', 'pattern');
+    });
+
+    it('should give error on max_namespaces greater than 256', () => {
+      formHelper.setValue('max_namespaces', 300);
+      component.onSubmit();
+      formHelper.expectError('max_namespaces', 'max');
+    });
+
+    it('should give error on max_namespaces lesser than 1', () => {
+      formHelper.setValue('max_namespaces', 0);
+      component.onSubmit();
+      formHelper.expectError('max_namespaces', 'min');
+    });
+  });
+});