Merge pull request ceph#58648 from afreen23/wip-nvmeof-listener

Allow listeners creation and deletion

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

Author: nizamial09

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

@@ -43,6 +43,8 @@ import { NvmeofSubsystemsComponent } from './nvmeof-subsystems/nvmeof-subsystems
 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';
+import { NvmeofListenersFormComponent } from './nvmeof-listeners-form/nvmeof-listeners-form.component';
+import { NvmeofListenersListComponent } from './nvmeof-listeners-list/nvmeof-listeners-list.component';
 
 @NgModule({
   imports: [
@@ -87,7 +89,9 @@ import { NvmeofSubsystemsFormComponent } from './nvmeof-subsystems-form/nvmeof-s
     NvmeofSubsystemsComponent,
     NvmeofSubsystemsDetailsComponent,
     NvmeofTabsComponent,
-    NvmeofSubsystemsFormComponent
+    NvmeofSubsystemsFormComponent,
+    NvmeofListenersFormComponent,
+    NvmeofListenersListComponent
   ],
   exports: [RbdConfigurationListComponent, RbdConfigurationFormComponent]
 })
@@ -244,6 +248,11 @@ const routes: Routes = [
             path: `${URLVerbs.EDIT}/:subsystem_nqn`,
             component: NvmeofSubsystemsFormComponent,
             outlet: 'modal'
+          },
+          {
+            path: `${URLVerbs.CREATE}/:subsystem_nqn/listener`,
+            component: NvmeofListenersFormComponent,
+            outlet: 'modal'
           }
         ]
       },

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

@@ -0,0 +1,76 @@
+<cd-modal [pageURL]="pageURL">
+  <span class="modal-title"
+        i18n>{{ action | titlecase }} {{ resource | upperFirst }}</span>
+  <ng-container class="modal-content">
+    <form name="listenerForm"
+          #formDir="ngForm"
+          [formGroup]="listenerForm"
+          novalidate>
+      <div class="modal-body">
+        <!-- Host -->
+        <div class="form-group row">
+          <label class="cd-col-form-label"
+                 for="host">
+            <span class="required"
+                  i18n>Host Name</span>
+          </label>
+          <div class="cd-col-form-input">
+            <select id="host"
+                    name="host"
+                    class="form-select"
+                    formControlName="host">
+              <option *ngIf="hosts === null"
+                      [ngValue]="null"
+                      i18n>Loading...</option>
+              <option *ngIf="hosts && hosts.length === 0"
+                      [ngValue]="null"
+                      i18n>-- No hosts available --</option>
+              <option *ngIf="hosts && hosts.length > 0"
+                      [ngValue]="null"
+                      i18n>-- Select a host --</option>
+              <option *ngFor="let hostsItem of hosts"
+                      [ngValue]="hostsItem">{{ hostsItem.hostname }}</option>
+            </select>
+            <cd-help-text i18n>
+                This hostname uniquely identifies the gateway on which the listener is being set up.
+            </cd-help-text>
+            <span class="invalid-feedback"
+                  *ngIf="listenerForm.showError('host', formDir, 'required')"
+                  i18n>This field is required.</span>
+          </div>
+        </div>
+        <!-- Transport Service ID -->
+        <div class="form-group row">
+          <label class="cd-col-form-label"
+                 for="trsvcid">
+            <span i18n>Transport Service ID</span>
+          </label>
+          <div class="cd-col-form-input">
+            <input id="trsvcid"
+                   class="form-control"
+                   type="text"
+                   name="trsvcid"
+                   formControlName="trsvcid">
+            <cd-help-text i18n>The IP port to use. Default is 4420.</cd-help-text>
+            <span class="invalid-feedback"
+                  *ngIf="listenerForm.showError('trsvcid', formDir, 'required')"
+                  i18n>This field is required.</span>
+            <span class="invalid-feedback"
+                  *ngIf="listenerForm.showError('trsvcid', formDir, 'max')"
+                  i18n>The value cannot be greated than 65535.</span>
+            <span class="invalid-feedback"
+                  *ngIf="listenerForm.showError('trsvcid', 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]="listenerForm"
+                                [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-listeners-form/nvmeof-listeners-form.component.scss

@@ -0,0 +1,48 @@
+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 { SharedModule } from '~/app/shared/shared.module';
+import { NvmeofService } from '~/app/shared/api/nvmeof.service';
+import { NvmeofListenersFormComponent } from './nvmeof-listeners-form.component';
+
+describe('NvmeofListenersFormComponent', () => {
+  let component: NvmeofListenersFormComponent;
+  let fixture: ComponentFixture<NvmeofListenersFormComponent>;
+  let nvmeofService: NvmeofService;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [NvmeofListenersFormComponent],
+      providers: [NgbActiveModal],
+      imports: [
+        HttpClientTestingModule,
+        NgbTypeaheadModule,
+        ReactiveFormsModule,
+        RouterTestingModule,
+        SharedModule,
+        ToastrModule.forRoot()
+      ]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(NvmeofListenersFormComponent);
+    component = fixture.componentInstance;
+    component.ngOnInit();
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('should test form', () => {
+    beforeEach(() => {
+      nvmeofService = TestBed.inject(NvmeofService);
+      spyOn(nvmeofService, 'createListener').and.stub();
+    });
+  });
+});

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

@@ -0,0 +1,115 @@
+import { Component, OnInit } from '@angular/core';
+import { UntypedFormControl, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { ListenerRequest, NvmeofService } from '~/app/shared/api/nvmeof.service';
+import { ActionLabelsI18n, URLVerbs } from '~/app/shared/constants/app.constants';
+import { CdFormGroup } from '~/app/shared/forms/cd-form-group';
+import { FinishedTask } from '~/app/shared/models/finished-task';
+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 { 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 { CdTableFetchDataContext } from '~/app/shared/models/cd-table-fetch-data-context';
+@Component({
+  selector: 'cd-nvmeof-listeners-form',
+  templateUrl: './nvmeof-listeners-form.component.html',
+  styleUrls: ['./nvmeof-listeners-form.component.scss']
+})
+export class NvmeofListenersFormComponent implements OnInit {
+  action: string;
+  permission: Permission;
+  hostPermission: Permission;
+  resource: string;
+  pageURL: string;
+  listenerForm: CdFormGroup;
+  subsystemNQN: string;
+  hosts: Array<object> = null;
+
+  constructor(
+    public actionLabels: ActionLabelsI18n,
+    private authStorageService: AuthStorageService,
+    private taskWrapperService: TaskWrapperService,
+    private nvmeofService: NvmeofService,
+    private hostService: HostService,
+    private router: Router,
+    private route: ActivatedRoute,
+    public activeModal: NgbActiveModal,
+    public formatterService: FormatterService,
+    public dimlessBinaryPipe: DimlessBinaryPipe
+  ) {
+    this.permission = this.authStorageService.getPermissions().nvmeof;
+    this.hostPermission = this.authStorageService.getPermissions().hosts;
+    this.resource = $localize`Listener`;
+    this.pageURL = 'block/nvmeof/subsystems';
+  }
+
+  setHosts() {
+    const hostContext = new CdTableFetchDataContext(() => undefined);
+    this.hostService.list(hostContext.toParams(), 'false').subscribe((resp: any[]) => {
+      const nvmeofHosts = resp.filter((r) =>
+        r.service_instances.some((si: any) => si.type === 'nvmeof')
+      );
+      this.hosts = nvmeofHosts.map((h) => ({ hostname: h.hostname, addr: h.addr }));
+    });
+  }
+
+  ngOnInit() {
+    this.createForm();
+    this.action = this.actionLabels.CREATE;
+    this.route.params.subscribe((params: { subsystem_nqn: string }) => {
+      this.subsystemNQN = params.subsystem_nqn;
+    });
+    this.setHosts();
+  }
+
+  createForm() {
+    this.listenerForm = new CdFormGroup({
+      host: new UntypedFormControl(null, {
+        validators: [Validators.required]
+      }),
+      trsvcid: new UntypedFormControl(4420, [
+        Validators.required,
+        CdValidators.number(false),
+        Validators.max(65535)
+      ])
+    });
+  }
+
+  buildRequest(): ListenerRequest {
+    const host = this.listenerForm.getValue('host');
+    let trsvcid = Number(this.listenerForm.getValue('trsvcid'));
+    if (!trsvcid) trsvcid = 4420;
+    const request = {
+      host_name: host.hostname,
+      traddr: host.addr,
+      trsvcid
+    };
+    return request;
+  }
+
+  onSubmit() {
+    const component = this;
+    const taskUrl: string = `nvmeof/listener/${URLVerbs.CREATE}`;
+    const request = this.buildRequest();
+    this.taskWrapperService
+      .wrapTaskAroundCall({
+        task: new FinishedTask(taskUrl, {
+          nqn: this.subsystemNQN,
+          host_name: request.host_name
+        }),
+        call: this.nvmeofService.createListener(this.subsystemNQN, request)
+      })
+      .subscribe({
+        error() {
+          component.listenerForm.setErrors({ cdSubmitButton: true });
+        },
+        complete: () => {
+          this.router.navigate([this.pageURL, { outlets: { modal: null } }]);
+        }
+      });
+  }
+}

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

@@ -0,0 +1,21 @@
+<legend>
+  <cd-help-text>
+    A listener defines the IP port on the gateway that is to process NVMe/TCP commands and I/O operations.
+  </cd-help-text>
+</legend>
+<cd-table [data]="listeners"
+          columnMode="flex"
+          (fetchData)="listListeners()"
+          [columns]="listenerColumns"
+          identifier="id"
+          forceIdentifier="true"
+          selectionType="single"
+          (updateSelection)="updateSelection($event)">
+  <div class="table-actions btn-toolbar">
+    <cd-table-actions [permission]="permission"
+                      [selection]="selection"
+                      class="btn-group"
+                      [tableActions]="tableActions">
+    </cd-table-actions>
+  </div>
+</cd-table>

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

@@ -0,0 +1,70 @@
+import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
+
+import { NvmeofListenersListComponent } from './nvmeof-listeners-list.component';
+import { HttpClientModule } from '@angular/common/http';
+import { RouterTestingModule } from '@angular/router/testing';
+import { SharedModule } from '~/app/shared/shared.module';
+import { NvmeofService } from '~/app/shared/api/nvmeof.service';
+import { AuthStorageService } from '~/app/shared/services/auth-storage.service';
+import { ModalService } from '~/app/shared/services/modal.service';
+import { TaskWrapperService } from '~/app/shared/services/task-wrapper.service';
+import { of } from 'rxjs';
+
+const mockListeners = [
+  {
+    host_name: 'ceph-node-02',
+    trtype: 'TCP',
+    traddr: '192.168.100.102',
+    adrfam: 0,
+    trsvcid: 4421
+  }
+];
+
+class MockNvmeOfService {
+  listListeners() {
+    return of(mockListeners);
+  }
+}
+
+class MockAuthStorageService {
+  getPermissions() {
+    return { nvmeof: {} };
+  }
+}
+
+class MockModalService {}
+
+class MockTaskWrapperService {}
+
+describe('NvmeofListenersListComponent', () => {
+  let component: NvmeofListenersListComponent;
+  let fixture: ComponentFixture<NvmeofListenersListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [NvmeofListenersListComponent],
+      imports: [HttpClientModule, RouterTestingModule, SharedModule],
+      providers: [
+        { provide: NvmeofService, useClass: MockNvmeOfService },
+        { provide: AuthStorageService, useClass: MockAuthStorageService },
+        { provide: ModalService, useClass: MockModalService },
+        { provide: TaskWrapperService, useClass: MockTaskWrapperService }
+      ]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(NvmeofListenersListComponent);
+    component = fixture.componentInstance;
+    component.ngOnInit();
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should retrieve subsystems', fakeAsync(() => {
+    component.listListeners();
+    tick();
+    expect(component.listeners).toEqual(mockListeners);
+  }));
+});