From: Sagar Gopale <sagar.gopale@ibm.com>
Date: Mon, 23 Mar 2026 06:08:44 +0000 (+0530)
Subject: mgr/dashboard: Add Hosts via CSV Upload
X-Git-Tag: testing/wip-yuri10-testing-20260526.155424-main~5^2
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=de23df56d1047055db2c3602893160513a42ca52;p=ceph-ci.git

mgr/dashboard: Add Hosts via CSV Upload

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

Signed-off-by: Sagar Gopale <sagar.gopale@ibm.com>
---

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 c575ca7d01b..085ae2f04de 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
@@ -61,6 +61,7 @@ import {
   CheckboxModule,
   ComboBoxModule,
   DatePickerModule,
+  FileUploaderModule,
   GridModule,
   IconModule,
   IconService,
@@ -127,6 +128,7 @@ import { NvmeofTabsComponent } from './nvmeof-tabs/nvmeof-tabs.component';
     NumberModule,
     ModalModule,
     DatePickerModule,
+    FileUploaderModule,
     ComboBoxModule,
     TabsModule,
     TagModule,
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-subsystems-form/nvmeof-subsystem-step-2/nvmeof-subsystem-step-2.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-subsystems-form/nvmeof-subsystem-step-2/nvmeof-subsystem-step-2.component.html
index b979d1c0fd5..a733709627f 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-subsystems-form/nvmeof-subsystem-step-2/nvmeof-subsystem-step-2.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-subsystems-form/nvmeof-subsystem-step-2/nvmeof-subsystem-step-2.component.html
@@ -60,7 +60,7 @@
            class="form-item">
         <h1
           class="cds--type-heading-compact-01"
-          i18n>Add hosts</h1>
+          i18n>Add host manually</h1>
         <label class="cds--label"
                for="hostname">
           <span i18n>Host name</span>
@@ -91,6 +91,33 @@
           </button>
         </div>
       </div>
+      <div cdsRow
+           class="form-item">
+        <h1
+          class="cds--type-heading-compact-01"
+          i18n>Upload CSV file</h1>
+        <p
+          class="cds--type-body-01 cds-mb-3 cd-nvmeof-subsystem-step-two-added-hosts-text"
+          i18n>Upload a CSV file containing a list of host names.</p>
+        <div class="cd-nvmeof-subsystem-step-two-csv-container">
+          <cds-file-uploader
+            [drop]="true"
+            [dropText]="csvDropText"
+            [accept]="['csv']"
+            [multiple]="false"
+            size="md"
+            class="cd-nvmeof-subsystem-step-two-csv-input"
+            (filesChange)="onCsvUpload($event)"
+            (removeFile)="onCsvUploadRemove()"></cds-file-uploader>
+          @if(csvUploadError) {
+          <cd-alert-panel
+            type="danger"
+            [showTitle]="false"
+            size="slim"
+            class="cds-mt-3 cd-nvmeof-subsystem-step-two-csv-error-panel">{{ csvUploadError }}</cd-alert-panel>
+          }
+        </div>
+      </div>
       }
     </div>
   </div>
@@ -125,7 +152,7 @@
     i18n>Added hosts ({{addedHostsLength}})</h1>
   <p
     i18n
-    class="cds--type-body-01 cd-nvmeof-subsystem-step-two-added-hosts-text">No hosts added yet.</p>
+    class="cds--type-body-01 cd-nvmeof-subsystem-step-two-added-hosts-text">No hosts added yet. Add hosts manually or upload a CSV file.</p>
   } @else {
   <cds-contained-list
     label="Added hosts ({{addedHostsLength}})"
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-subsystems-form/nvmeof-subsystem-step-2/nvmeof-subsystem-step-2.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-subsystems-form/nvmeof-subsystem-step-2/nvmeof-subsystem-step-2.component.scss
index 36fe955b7e9..3d614e49bf2 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-subsystems-form/nvmeof-subsystem-step-2/nvmeof-subsystem-step-2.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-subsystems-form/nvmeof-subsystem-step-2/nvmeof-subsystem-step-2.component.scss
@@ -1,16 +1,21 @@
+@use '@carbon/layout';
+
 .cd-nvmeof-subsystem-step-two {
   // Full width of the tearsheet content column; min-inline-size allows nested
   // Carbon grid rows to shrink instead of bleeding into the right influencer.
   min-inline-size: 0;
   inline-size: 100%;
 
+  // Aligns with exactly 10 columns of the standard 16-column Carbon grid layout (10/16).
+  --host-input-width: #{percentage(10 / 16)};
+
   &-manual-hosts {
     display: flex;
     align-items: flex-start;
   }
 
   &-manual-hosts-input {
-    flex: 0.5;
+    flex: 0 0 var(--host-input-width);
     margin-right: var(--cds-spacing-05);
   }
 
@@ -22,6 +27,26 @@
     max-inline-size: 17rem;
   }
 
+  &-csv-container {
+    inline-size: var(--host-input-width);
+  }
+
+  &-csv-input {
+    .cds--file__drop-container {
+      min-block-size: layout.$spacing-12 !important;
+    }
+  }
+
+  &-csv-error-panel {
+    display: block;
+    width: 100%;
+
+    .cds--inline-notification,
+    .cds--actionable-notification {
+      width: 100%;
+    }
+  }
+
   &-influencer {
     .cds--contained-list-item__content {
       max-inline-size: 18rem !important;
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-subsystems-form/nvmeof-subsystem-step-2/nvmeof-subsystem-step-2.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-subsystems-form/nvmeof-subsystem-step-2/nvmeof-subsystem-step-2.component.spec.ts
index 11fc45c4eaf..ee04e2af07e 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-subsystems-form/nvmeof-subsystem-step-2/nvmeof-subsystem-step-2.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-subsystems-form/nvmeof-subsystem-step-2/nvmeof-subsystem-step-2.component.spec.ts
@@ -8,7 +8,13 @@ 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 { NvmeofSubsystemsStepTwoComponent } from './nvmeof-subsystem-step-2.component';
-import { GridModule, InputModule, RadioModule, TagModule } from 'carbon-components-angular';
+import {
+  FileUploaderModule,
+  GridModule,
+  InputModule,
+  RadioModule,
+  TagModule
+} from 'carbon-components-angular';
 
 describe('NvmeofSubsystemsStepTwoComponent', () => {
   let component: NvmeofSubsystemsStepTwoComponent;
@@ -26,6 +32,7 @@ describe('NvmeofSubsystemsStepTwoComponent', () => {
         ReactiveFormsModule,
         RouterTestingModule,
         SharedModule,
+        FileUploaderModule,
         InputModule,
         GridModule,
         RadioModule,
@@ -111,4 +118,82 @@ describe('NvmeofSubsystemsStepTwoComponent', () => {
       expect(component.addedHostsLength).toBe(0);
     });
   });
+
+  describe('processCsvContent', () => {
+    it('should import valid host NQNs from CSV', () => {
+      const csvContent = `
+host_nqn
+nqn.2023-01.com.example:host1
+nqn.2023-01.com.example:host2
+`;
+
+      component.processCsvContent(csvContent);
+
+      expect(form.get('addedHosts')?.value).toEqual([
+        'nqn.2023-01.com.example:host1',
+        'nqn.2023-01.com.example:host2'
+      ]);
+      expect(component.addedHostsLength).toBe(2);
+      expect(component.csvUploadError).toBe('');
+    });
+
+    it('should skip duplicates and invalid values from CSV', () => {
+      form.get('addedHosts')?.setValue(['nqn.2023-01.com.example:existing']);
+      component.existingHosts = ['nqn.2023-01.com.example:already-there'];
+
+      const csvContent = `
+host_nqn
+nqn.2023-01.com.example:existing
+nqn.2023-01.com.example:new-host
+invalid-host
+nqn.2023-01.com.example:already-there
+nqn.2023-01.com.example:new-host
+`;
+
+      component.processCsvContent(csvContent);
+
+      expect(form.get('addedHosts')?.value).toEqual([
+        'nqn.2023-01.com.example:existing',
+        'nqn.2023-01.com.example:new-host'
+      ]);
+      expect(component.addedHostsLength).toBe(2);
+      expect(component.csvUploadError).toBe('');
+    });
+
+    it('should show error when csv has no valid hosts', () => {
+      const csvContent = `
+host_nqn
+invalid-host
+another-invalid-host
+`;
+
+      component.processCsvContent(csvContent);
+
+      expect(form.get('addedHosts')?.value).toEqual([]);
+      expect(component.csvUploadError).toBe('No valid hosts found in the CSV file.');
+    });
+
+    it('should not show invalid-csv error when all uploaded hosts are duplicates', () => {
+      form
+        .get('addedHosts')
+        ?.setValue(['nqn.2023-01.com.example:host1', 'nqn.2023-01.com.example:host2']);
+      component.addedHostsLength = 2;
+
+      const csvContent = `
+host_nqn
+nqn.2023-01.com.example:host1
+nqn.2023-01.com.example:host2
+`;
+
+      component.processCsvContent(csvContent);
+
+      expect(form.get('addedHosts')?.value).toEqual([
+        'nqn.2023-01.com.example:host1',
+        'nqn.2023-01.com.example:host2'
+      ]);
+      expect(component.csvUploadError).toBe(
+        'No new hosts were found. Provided hosts are already in place.'
+      );
+    });
+  });
 });
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-subsystems-form/nvmeof-subsystem-step-2/nvmeof-subsystem-step-2.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-subsystems-form/nvmeof-subsystem-step-2/nvmeof-subsystem-step-2.component.ts
index f90b0fa2757..70cfbd75a31 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-subsystems-form/nvmeof-subsystem-step-2/nvmeof-subsystem-step-2.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-subsystems-form/nvmeof-subsystem-step-2/nvmeof-subsystem-step-2.component.ts
@@ -2,6 +2,8 @@ import { Component, Input, OnInit, TemplateRef, ViewChild, ViewEncapsulation } f
 import { FormControl, UntypedFormControl } from '@angular/forms';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 
+import { FileUploaderService } from '~/app/shared/services/file-uploader.service';
+
 import { ActionLabelsI18n } from '~/app/shared/constants/app.constants';
 import { CdFormGroup } from '~/app/shared/forms/cd-form-group';
 import { CdValidators } from '~/app/shared/forms/cd-validators';
@@ -30,11 +32,18 @@ export class NvmeofSubsystemsStepTwoComponent implements OnInit, TearsheetStep {
   };
   HOST_TYPE = HOST_TYPE;
   addedHostsLength: number = 0;
+  csvUploadError = '';
+  csvDropText: string = $localize`Drag and drop files here or click to upload`;
   NQN_REGEX = /^nqn\.(19|20)\d\d-(0[1-9]|1[0-2])\.\D{2,3}(\.[A-Za-z0-9-]+)+(:[A-Za-z0-9-\.]+(:[A-Za-z0-9-\.]+)*)$/;
   NQN_REGEX_UUID = /^nqn\.2014-08\.org\.nvmexpress:uuid:[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$/;
   ALLOW_ALL_HOST = '*';
+  uploadedHosts = new Set<string>();
 
-  constructor(public actionLabels: ActionLabelsI18n, public activeModal: NgbActiveModal) {}
+  constructor(
+    public actionLabels: ActionLabelsI18n,
+    public activeModal: NgbActiveModal,
+    private fileUploaderService: FileUploaderService
+  ) {}
 
   ngOnInit() {
     this.createForm();
@@ -100,6 +109,82 @@ export class NvmeofSubsystemsStepTwoComponent implements OnInit, TearsheetStep {
     }
   }
 
+  onCsvUpload(files: Set<Object>) {
+    this.fileUploaderService.readAsText(files, { accept: ['.csv'] }).subscribe({
+      next: ({ content }) => this.processCsvContent(content),
+      error: (err: Error) => (this.csvUploadError = err.message)
+    });
+  }
+
+  onCsvUploadRemove() {
+    this.csvUploadError = '';
+    if (this.uploadedHosts.size > 0) {
+      const currentAddedHosts = this.formGroup.get('addedHosts')?.value ?? [];
+      const newHostList = currentAddedHosts.filter((host: string) => !this.uploadedHosts.has(host));
+      this.addedHostsLength = newHostList.length;
+      this.formGroup.patchValue({ addedHosts: newHostList });
+      this.formGroup.get('hostname')?.updateValueAndValidity();
+      this.uploadedHosts.clear();
+    }
+  }
+
+  processCsvContent(csvContent: string) {
+    const lines = csvContent.split(/\r?\n/);
+    const currentAddedHosts = this.formGroup.get('addedHosts').value || [];
+    const currentHostsSet = new Set<string>([...currentAddedHosts, ...this.existingHosts]);
+    const importedHosts = new Set<string>();
+    let validHostRows = 0;
+
+    for (const line of lines) {
+      const host = this.extractHostFromCsvLine(line);
+      if (!host) {
+        continue;
+      }
+      if (!this.isHostNqnValid(host)) {
+        continue;
+      }
+      validHostRows++;
+      if (currentHostsSet.has(host) || importedHosts.has(host)) {
+        continue;
+      }
+      importedHosts.add(host);
+      this.uploadedHosts.add(host);
+    }
+
+    if (!importedHosts.size) {
+      this.csvUploadError =
+        validHostRows > 0
+          ? $localize`No new hosts were found. Provided hosts are already in place.`
+          : $localize`No valid hosts found in the CSV file.`;
+      this.formGroup.get('hostname').updateValueAndValidity();
+      return;
+    }
+
+    const newHostList = [...currentAddedHosts, ...importedHosts];
+    this.addedHostsLength = newHostList.length;
+    this.formGroup.patchValue({ addedHosts: newHostList });
+    this.formGroup.get('hostname').updateValueAndValidity();
+    this.csvUploadError = '';
+  }
+
+  private extractHostFromCsvLine(line: string): string {
+    const trimmedLine = line?.trim();
+    if (!trimmedLine) {
+      return '';
+    }
+
+    // Support both "host_nqn" header and "host_nqn,dhchap_key" style rows.
+    const host = trimmedLine.split(',')[0]?.trim().replace(/^"|"$/g, '');
+    if (!host || host.toLowerCase() === 'host_nqn') {
+      return '';
+    }
+    return host;
+  }
+
+  private isHostNqnValid(host: string): boolean {
+    return this.NQN_REGEX.test(host) || this.NQN_REGEX_UUID.test(host);
+  }
+
   removeHost(removedHost: string) {
     const currentAddedHosts = this.formGroup.get('addedHosts')?.value ?? [];
     const newHostList = currentAddedHosts.filter((currentHost) => currentHost !== removedHost);
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-subsystems-form/nvmeof-subsystems-form.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-subsystems-form/nvmeof-subsystems-form.component.spec.ts
index 0ea20095816..dc98d870f4d 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-subsystems-form/nvmeof-subsystems-form.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/nvmeof-subsystems-form/nvmeof-subsystems-form.component.spec.ts
@@ -3,7 +3,6 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { NgbActiveModal, NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
 
 import { SharedModule } from '~/app/shared/shared.module';
@@ -15,6 +14,7 @@ import { NvmeofService } from '~/app/shared/api/nvmeof.service';
 import { NvmeofSubsystemsStepOneComponent } from './nvmeof-subsystem-step-1/nvmeof-subsystem-step-1.component';
 import {
   ComboBoxModule,
+  FileUploaderModule,
   GridModule,
   InputModule,
   RadioModule,
@@ -72,6 +72,7 @@ describe('NvmeofSubsystemsFormComponent', () => {
         GridModule,
         RadioModule,
         TagModule,
+        FileUploaderModule,
         ComboBoxModule
       ]
     }).compileComponents();
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/file-uploader.service.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/file-uploader.service.ts
new file mode 100644
index 00000000000..d16c8c6133d
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/file-uploader.service.ts
@@ -0,0 +1,56 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+
+export interface FileReadOptions {
+  accept?: string[];
+  maxBytes?: number;
+}
+
+export interface FileReadResult {
+  content: string;
+  file: File;
+}
+
+@Injectable({ providedIn: 'root' })
+export class FileUploaderService {
+  readAsText(files: Set<any>, options: FileReadOptions = {}): Observable<FileReadResult> {
+    const { accept = [], maxBytes = 1_000_000 } = options;
+    return new Observable((observer) => {
+      const file: File = files?.values()?.next()?.value?.file;
+      if (!file) {
+        observer.error(new Error($localize`No file selected.`));
+        return undefined;
+      }
+
+      if (maxBytes && file.size > maxBytes) {
+        observer.error(new Error($localize`File exceeds the maximum size of ${maxBytes} bytes.`));
+        return undefined;
+      }
+
+      if (accept.length) {
+        const name = file.name.toLowerCase();
+        const valid = accept.some((ext) =>
+          ext.startsWith('.') ? name.endsWith(ext) : file.type === ext
+        );
+        if (!valid) {
+          observer.error(new Error($localize`Invalid file type. Accepted: ${accept.join(', ')}.`));
+          return undefined;
+        }
+      }
+
+      const reader = new FileReader();
+      reader.onload = (event: ProgressEvent<FileReader>) => {
+        const result = event.target?.result;
+        if (typeof result !== 'string') {
+          observer.error(new Error($localize`Unable to read the file.`));
+        } else {
+          observer.next({ content: result, file });
+          observer.complete();
+        }
+      };
+      reader.onerror = () => observer.error(new Error($localize`Unable to read the file.`));
+      reader.readAsText(file);
+      return () => reader.abort();
+    });
+  }
+}