NAS-132095 / 25.04 / Add support for USB and GPU devices to containers (

#10987) * NAS-132095: Initial * NAS-132095: Add support for USB and GPU devices to containers * NAS-132095: Add support for USB and GPU devices to containers * NAS-132095: PR update * NAS-132095: PR update * NAS-132095: PR update --------- Co-authored-by: undsoft <[email protected]>
truenas · Nov 9, 2024 · daaea8e · daaea8e
1 parent 960c5c2
commit daaea8e
Show file tree

Hide file tree

Showing 98 changed files with 533 additions and 128 deletions.
diff --git a/src/app/pages/virtualization/components/all-instances/all-instances.component.scss b/src/app/pages/virtualization/components/all-instances/all-instances.component.scss
@@ -8,7 +8,7 @@
   display: flex;
   flex-direction: column;
   height: 100%;
-  
+
   .table-container {
     background: var(--bg2);
   }

diff --git a/.../virtualization/components/all-instances/instance-details/instance-details.component.scss b/.../virtualization/components/all-instances/instance-details/instance-details.component.scss
@@ -2,7 +2,6 @@
 @import 'scss-imports/variables';
 
 :host {
-
   display: block;
   width: 100%;
   width: 100%;

diff --git a/...omponents/all-instances/instance-details/instance-devices/instance-devices.component.html b/...omponents/all-instances/instance-details/instance-devices/instance-devices.component.html
@@ -6,6 +6,14 @@ <h3 mat-card-title>
   </mat-card-header>
 
   <mat-card-content>
-    <p>{{ 'Name' | translate }}: -</p>
+    @if (isLoading()) {
+      <mat-spinner [diameter]="40"></mat-spinner>
+    } @else {
+      @for (device of devices(); track device) {
+        <div>
+          <p>{{ 'Device Type' | translate }}: {{ device.dev_type | titlecase }}</p>
+        </div>
+      }
+    }
   </mat-card-content>
 </mat-card>
diff --git a/...omponents/all-instances/instance-details/instance-devices/instance-devices.component.scss b/...omponents/all-instances/instance-details/instance-devices/instance-devices.component.scss
@@ -1,15 +1,3 @@
-@import 'mixins/cards';
-@import 'scss-imports/variables';
-
-:host {
-  .card {
-    @include details-card();
-    margin: 0;
-
-    mat-card-header {
-      button {
-        margin-left: 8px;
-      }
-    }
-  }
+mat-card-content p {
+  margin: 0 0 6px;
 }
diff --git a/...onents/all-instances/instance-details/instance-devices/instance-devices.component.spec.ts b/...onents/all-instances/instance-details/instance-devices/instance-devices.component.spec.ts
@@ -0,0 +1,66 @@
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { createComponentFactory, Spectator } from '@ngneat/spectator/jest';
+import { MockComponents } from 'ng-mocks';
+import { mockCall, mockWebSocket } from 'app/core/testing/utils/mock-websocket.utils';
+import { VirtualizationDeviceType } from 'app/enums/virtualization.enum';
+import { VirtualizationDevice, VirtualizationInstance } from 'app/interfaces/virtualization.interface';
+import { InstanceDevicesComponent } from 'app/pages/virtualization/components/all-instances/instance-details/instance-devices/instance-devices.component';
+
+describe('InstanceDevicesComponent', () => {
+  let spectator: Spectator<InstanceDevicesComponent>;
+
+  const demoInstance = {
+    id: 'demo',
+    name: 'Demo',
+    type: 'CONTAINER',
+    status: 'RUNNING',
+    cpu: '525',
+    autostart: true,
+    image: {
+      architecture: 'amd64',
+      description: 'Almalinux 8 amd64 (20241030_23:38)',
+      os: 'Almalinux',
+      release: '8',
+    },
+    memory: 131072000,
+  } as unknown as VirtualizationInstance;
+
+  const devices = [
+    { dev_type: VirtualizationDeviceType.Gpu },
+    { dev_type: VirtualizationDeviceType.Usb },
+  ] as VirtualizationDevice[];
+
+  const createComponent = createComponentFactory({
+    component: InstanceDevicesComponent,
+    declarations: [
+      MockComponents(
+        MatProgressSpinner,
+      ),
+    ],
+    providers: [
+      mockWebSocket([
+        mockCall('virt.instance.device_list', devices),
+      ]),
+    ],
+  });
+
+  beforeEach(() => {
+    spectator = createComponent({
+      props: {
+        instance: demoInstance,
+      },
+    });
+  });
+
+  it('checks card title', () => {
+    const title = spectator.query('h3');
+    expect(title).toHaveText('Devices');
+  });
+
+  it('renders details in card', () => {
+    const chartExtra = spectator.query('mat-card-content').querySelectorAll('p');
+    expect(chartExtra).toHaveLength(2);
+    expect(chartExtra[0]).toHaveText('Device Type: Gpu');
+    expect(chartExtra[1]).toHaveText('Device Type: Usb');
+  });
+});
diff --git a/.../components/all-instances/instance-details/instance-devices/instance-devices.component.ts b/.../components/all-instances/instance-details/instance-devices/instance-devices.component.ts
@@ -1,9 +1,20 @@
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { TitleCasePipe } from '@angular/common';
+import {
+  ChangeDetectionStrategy, Component, input, OnChanges, signal,
+} from '@angular/core';
 import { MatButton } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
+import {
+  MatCardContent, MatCardModule,
+} from '@angular/material/card';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { TranslateModule } from '@ngx-translate/core';
-import { VirtualizationInstance } from 'app/interfaces/virtualization.interface';
+import { IxSimpleChanges } from 'app/interfaces/simple-changes.interface';
+import { VirtualizationDevice, VirtualizationInstance } from 'app/interfaces/virtualization.interface';
+import { ErrorHandlerService } from 'app/services/error-handler.service';
+import { WebSocketService } from 'app/services/ws.service';
 
+@UntilDestroy()
 @Component({
   selector: 'ix-instance-devices',
   templateUrl: './instance-devices.component.html',
@@ -14,8 +25,43 @@ import { VirtualizationInstance } from 'app/interfaces/virtualization.interface'
     MatButton,
     MatCardModule,
     TranslateModule,
+    MatCardContent,
+    MatProgressSpinner,
+    TitleCasePipe,
   ],
 })
-export class InstanceDevicesComponent {
+export class InstanceDevicesComponent implements OnChanges {
   instance = input.required<VirtualizationInstance>();
+
+  devices = signal<VirtualizationDevice[]>([]);
+  isLoading = signal<boolean>(false);
+
+  constructor(
+    private ws: WebSocketService,
+    private errorHandler: ErrorHandlerService,
+  ) {}
+
+  ngOnChanges(changes: IxSimpleChanges<this>): void {
+    if (!(changes.instance.currentValue as unknown as VirtualizationInstance).id) {
+      return;
+    }
+
+    this.loadDevices();
+  }
+
+  loadDevices(): void {
+    this.isLoading.set(true);
+    this.ws.call('virt.instance.device_list', [this.instance().id])
+      .pipe(untilDestroyed(this))
+      .subscribe({
+        next: (devices) => {
+          this.devices.set(devices);
+          this.isLoading.set(false);
+        },
+        error: (error: unknown) => {
+          this.errorHandler.showErrorModal(error);
+          this.isLoading.set(false);
+        },
+      });
+  }
 }
diff --git a/...all-instances/instance-details/instance-general-info/instance-general-info.component.scss b/...all-instances/instance-details/instance-general-info/instance-general-info.component.scss
@@ -1,4 +1,3 @@
-
 mat-card-content p {
   margin: 0 0 6px;
 }
diff --git a/.../pages/virtualization/components/create-instance-form/create-instance-form.component.html b/.../pages/virtualization/components/create-instance-form/create-instance-form.component.html
@@ -51,8 +51,35 @@
     <ix-fieldset [title]="'Network' | translate">
     </ix-fieldset>
 
-    <ix-fieldset [title]="'Other Devices' | translate">
-    </ix-fieldset>
+    @if ((usbDevices$ | async); as usbDevices) {
+      @if (usbDevices.length > 0) {
+        <ix-fieldset [title]="'USB Devices' | translate">
+          <div formGroupName="usb_devices">
+            @for (device of usbDevices; track device) {
+              <ix-checkbox
+                [formControlName]="device.value"
+                [label]="device.label"
+              ></ix-checkbox>
+            }
+          </div>
+        </ix-fieldset>
+      }
+    }
+
+    @if ((gpuDevices$ | async); as gpuDevices) {
+      @if (gpuDevices.length > 0) {
+        <ix-fieldset [title]="'GPU Devices' | translate">
+          <div formGroupName="gpu_devices">
+            @for (device of gpuDevices; track device) {
+              <ix-checkbox
+                [formControlName]="device.value"
+                [label]="device.label"
+              ></ix-checkbox>
+            }
+          </div>
+        </ix-fieldset>
+      }
+    }
 
     <div class="actions">
       <button
@@ -66,8 +93,4 @@
       </button>
     </div>
   </form>
-
-  <div class="glossary">
-
-  </div>
 </div>
diff --git a/...ges/virtualization/components/create-instance-form/create-instance-form.component.spec.ts b/...ges/virtualization/components/create-instance-form/create-instance-form.component.spec.ts
@@ -14,10 +14,11 @@ import { map } from 'rxjs/operators';
 import { GiB } from 'app/constants/bytes.constant';
 import { fakeSuccessfulJob } from 'app/core/testing/utils/fake-job.utils';
 import { mockCall, mockJob, mockWebSocket } from 'app/core/testing/utils/mock-websocket.utils';
-import { VirtualizationType } from 'app/enums/virtualization.enum';
+import { VirtualizationDeviceType, VirtualizationType } from 'app/enums/virtualization.enum';
 import { Job } from 'app/interfaces/job.interface';
 import { VirtualizationInstance } from 'app/interfaces/virtualization.interface';
 import { DialogService } from 'app/modules/dialog/dialog.service';
+import { IxCheckboxHarness } from 'app/modules/forms/ix-forms/components/ix-checkbox/ix-checkbox.harness';
 import { IxFormHarness } from 'app/modules/forms/ix-forms/testing/ix-form.harness';
 import { PageHeaderComponent } from 'app/modules/page-header/page-title-header/page-header.component';
 import { SnackbarService } from 'app/modules/snackbar/services/snackbar.service';
@@ -31,6 +32,7 @@ describe('InstanceFormComponent', () => {
   let spectator: SpectatorRouting<CreateInstanceFormComponent>;
   let loader: HarnessLoader;
   let form: IxFormHarness;
+
   const createComponent = createRoutingFactory({
     component: CreateInstanceFormComponent,
     declarations: [
@@ -46,6 +48,24 @@ describe('InstanceFormComponent', () => {
           cpu: 'Intel Xeon',
           memory: 2 * GiB,
         } as VirtualizationInstance]),
+        mockCall('virt.device.gpu_choices', {
+          pci_0000_01_00_0: {
+            bus: 1,
+            slot: 1,
+            description: 'NVIDIA GeForce GTX 1080',
+            vendor: 'NVIDIA Corporation',
+          },
+        }),
+        mockCall('virt.device.usb_choices', {
+          xhci: {
+            vendor_id: '1d6b',
+            product_id: '0003',
+            bus: 2,
+            dev: 1,
+            product: 'xHCI Host Controller',
+            manufacturer: 'Linux 6.6.44-production+truenas xhci-hcd',
+          },
+        }),
         mockJob('virt.instance.create', fakeSuccessfulJob({ id: 'new' } as VirtualizationInstance)),
         mockJob('virt.instance.update', fakeSuccessfulJob({ id: 'test' } as VirtualizationInstance)),
       ]),
@@ -84,7 +104,7 @@ describe('InstanceFormComponent', () => {
     });
   });
 
-  it('creates new instance when form is submitted', async () => {
+  it('creates new instance when form is submitted with selected USB and GPU devices', async () => {
     await form.fillForm({
       Name: 'new',
       Autostart: true,
@@ -95,13 +115,23 @@ describe('InstanceFormComponent', () => {
     const browseButton = await loader.getHarness(MatButtonHarness.with({ text: 'Browse' }));
     await browseButton.click();
 
+    const usbDeviceCheckbox = await loader.getHarness(IxCheckboxHarness.with({ label: 'xHCI Host Controller' }));
+    await usbDeviceCheckbox.setValue(true);
+
+    const gpuDeviceCheckbox = await loader.getHarness(IxCheckboxHarness.with({ label: 'NVIDIA GeForce GTX 1080' }));
+    await gpuDeviceCheckbox.setValue(true);
+
     const saveButton = await loader.getHarness(MatButtonHarness.with({ text: 'Save Instance' }));
     await saveButton.click();
 
     expect(spectator.inject(WebSocketService).job).toHaveBeenCalledWith('virt.instance.create', [{
       name: 'new',
       autostart: true,
       cpu: '1-2',
+      devices: [
+        { dev_type: VirtualizationDeviceType.Usb, product_id: '0003' },
+        { dev_type: VirtualizationDeviceType.Gpu, gpu_type: 'NVIDIA Corporation' },
+      ],
       image: 'almalinux/8/cloud',
       memory: GiB,
     }]);