NAS-132721 / 25.04 / Support for NICs in containers

src/app/enums/virtualization.enum.ts

@@ -72,3 +72,13 @@ export enum VirtualizationGlobalState {
   Error = 'ERROR',
   Initialized = 'INITIALIZED',
 }
+
+export enum VirtualizationNicType {
+  Bridged = 'BRIDGED',
+  Macvlan = 'MACVLAN',
+}
+
+export const virtualizationNicTypeLabels = new Map<VirtualizationNicType, string>([
+  [VirtualizationNicType.Bridged, T('Bridged')],
+  [VirtualizationNicType.Macvlan, T('Macvlan')],
+]);

src/app/interfaces/api/api-call-directory.interface.ts

@@ -11,7 +11,7 @@ import { ProductType } from 'app/enums/product-type.enum';
 import { RdmaProtocolName, ServiceName } from 'app/enums/service-name.enum';
 import { SmbInfoLevel } from 'app/enums/smb-info-level.enum';
 import { TransportMode } from 'app/enums/transport-mode.enum';
-import { VirtualizationGpuType, VirtualizationType } from 'app/enums/virtualization.enum';
+import { VirtualizationGpuType, VirtualizationNicType, VirtualizationType } from 'app/enums/virtualization.enum';
 import {
   Acl,
   AclQueryParams,
@@ -859,6 +859,7 @@ export interface ApiCallDirectory {
     response: AvailableGpus;
   };
   'virt.device.usb_choices': { params: []; response: Record<string, AvailableUsb> };
+  'virt.device.nic_choices': { params: [nicType: VirtualizationNicType]; response: Record<string, string> };
 
   'virt.global.bridge_choices': { params: []; response: Choices };
   'virt.global.config': { params: []; response: VirtualizationGlobalConfig };

src/app/interfaces/virtualization.interface.ts

@@ -5,6 +5,7 @@ import {
   VirtualizationGlobalState,
   VirtualizationGpuType,
   VirtualizationNetworkType,
+  VirtualizationNicType,
   VirtualizationProxyProtocol,
   VirtualizationRemote,
   VirtualizationStatus,
@@ -112,6 +113,8 @@ export interface VirtualizationNic {
   name: string;
   description: string;
   dev_type: VirtualizationDeviceType.Nic;
+  nic_type: VirtualizationNicType;
+  parent: string;
   readonly: boolean;
   network: string;
   product_id: string;

src/app/pages/virtualization/components/all-instances/instance-details/instance-details.component.html

@@ -3,6 +3,7 @@
     <ix-instance-general-info [instance]="instance()"></ix-instance-general-info>
     <ix-instance-devices></ix-instance-devices>
     <ix-instance-disks></ix-instance-disks>
+    <ix-instance-nics></ix-instance-nics>
     <ix-instance-proxies></ix-instance-proxies>
     <ix-instance-tools [instance]="instance()"></ix-instance-tools>
     <ix-instance-metrics [instance]="instance()"></ix-instance-metrics>

src/app/pages/virtualization/components/all-instances/instance-details/instance-details.component.spec.ts

@@ -13,6 +13,7 @@ import {
 import {
   InstanceGeneralInfoComponent,
 } from 'app/pages/virtualization/components/all-instances/instance-details/instance-general-info/instance-general-info.component';
+import { InstanceNicsComponent } from 'app/pages/virtualization/components/all-instances/instance-details/instance-nics/instance-nics.component';
 import {
   InstanceProxiesComponent,
 } from 'app/pages/virtualization/components/all-instances/instance-details/instance-proxies/instance-proxies.component';
@@ -27,6 +28,7 @@ describe('InstanceDetailsComponent', () => {
         InstanceDevicesComponent,
         InstanceDisksComponent,
         InstanceProxiesComponent,
+        InstanceNicsComponent,
       ),
     ],
   });
@@ -45,6 +47,7 @@ describe('InstanceDetailsComponent', () => {
     expect(spectator.query(InstanceGeneralInfoComponent)).toExist();
     expect(spectator.query(InstanceDevicesComponent)).toExist();
     expect(spectator.query(InstanceDisksComponent)).toExist();
+    expect(spectator.query(InstanceNicsComponent)).toExist();
     expect(spectator.query(InstanceProxiesComponent)).toExist();
   });
 });

src/app/pages/virtualization/components/all-instances/instance-details/instance-details.component.ts

@@ -13,6 +13,7 @@ import {
   InstanceGeneralInfoComponent,
 } from 'app/pages/virtualization/components/all-instances/instance-details/instance-general-info/instance-general-info.component';
 import { InstanceMetricsComponent } from 'app/pages/virtualization/components/all-instances/instance-details/instance-metrics/instance-metrics.component';
+import { InstanceNicsComponent } from 'app/pages/virtualization/components/all-instances/instance-details/instance-nics/instance-nics.component';
 import {
   InstanceProxiesComponent,
 } from 'app/pages/virtualization/components/all-instances/instance-details/instance-proxies/instance-proxies.component';
@@ -33,6 +34,7 @@ import {
     InstanceDisksComponent,
     InstanceToolsComponent,
     InstanceMetricsComponent,
+    InstanceNicsComponent,
   ],
 })
 export class InstanceDetailsComponent {

src/app/pages/virtualization/components/all-instances/instance-details/instance-nics/add-nic-menu/add-nic-menu.component.html

@@ -0,0 +1,40 @@
+@if (isLoadingDevices()) {
+  <ngx-skeleton-loader class="loader"></ngx-skeleton-loader>
+} @else if (hasNicsToAdd()) {
+  <button
+    mat-button
+    ixTest="add-nic"
+    [disabled]=""
+    [matMenuTriggerFor]="addNicMenu"
+  >
+    {{ 'Add' | translate }}
+  </button>
+
+  <mat-menu #addNicMenu="matMenu">
+    @if (availableBridgedNics().length) {
+      <h4 class="menu-header">{{ bridgedNicTypeLabel | translate }}</h4>
+      @for (nic of availableBridgedNics(); track nic) {
+        <button
+          mat-menu-item
+          [ixTest]="['add-bridged-nic', nic]"
+          (click)="addBridgedNic(nic)"
+        >
+          {{ nic }}
+        </button>
+      }
+    }
+
+    @if (availableMacVlanNics().length) {
+      <h4 class="menu-header">{{ macVlanNicTypeLabel | translate }}</h4>
+      @for (nic of availableMacVlanNics(); track nic) {
+        <button
+          mat-menu-item
+          [ixTest]="['add-mac-vlan-nic', nic]"
+          (click)="addMacVlanNic(nic)"
+        >
+          {{ nic }}
+        </button>
+      }
+    }
+  </mat-menu>
+}

src/app/pages/virtualization/components/all-instances/instance-details/instance-nics/add-nic-menu/add-nic-menu.component.scss

@@ -0,0 +1,18 @@
+.menu-header {
+  border-bottom: 1px solid var(--lines);
+  font-size: 12px;
+  margin-top: 12px;
+  padding-bottom: 6px;
+  padding-left: 15px;
+}
+
+:host .loader {
+  display: block;
+  flex: unset;
+  width: 80px;
+
+  ::ng-deep .loader {
+    margin-bottom: -6px;
+  }
+}
+

src/app/pages/virtualization/components/all-instances/instance-details/instance-nics/add-nic-menu/add-nic-menu.component.spec.ts

@@ -0,0 +1,71 @@
+import { HarnessLoader } from '@angular/cdk/testing';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { MatMenuHarness } from '@angular/material/menu/testing';
+import { createComponentFactory, mockProvider, Spectator } from '@ngneat/spectator/jest';
+import { mockApi, mockCall } from 'app/core/testing/utils/mock-api.utils';
+import { VirtualizationDeviceType, VirtualizationNicType } from 'app/enums/virtualization.enum';
+import { VirtualizationDevice } from 'app/interfaces/virtualization.interface';
+import { SnackbarService } from 'app/modules/snackbar/services/snackbar.service';
+import { AddNicMenuComponent } from 'app/pages/virtualization/components/all-instances/instance-details/instance-nics/add-nic-menu/add-nic-menu.component';
+import { VirtualizationDevicesStore } from 'app/pages/virtualization/stores/virtualization-devices.store';
+import { ApiService } from 'app/services/websocket/api.service';
+
+describe('AddNicMenuComponent', () => {
+  let spectator: Spectator<AddNicMenuComponent>;
+  let loader: HarnessLoader;
+  const createComponent = createComponentFactory({
+    component: AddNicMenuComponent,
+    providers: [
+      mockApi([
+        mockCall('virt.device.nic_choices', {
+          nic1: 'Intel E1000',
+          nic2: 'Realtek RTL8139',
+        }),
+        mockCall('virt.instance.device_add'),
+      ]),
+      mockProvider(VirtualizationDevicesStore, {
+        selectedInstance: () => ({ id: 'my-instance' }),
+        devices: () => [
+          {
+            dev_type: VirtualizationDeviceType.Nic,
+            nic_type: VirtualizationNicType.Macvlan,
+            parent: 'already-added',
+          },
+        ] as VirtualizationDevice[],
+        loadDevices: jest.fn(),
+        isLoading: () => false,
+      }),
+      mockProvider(SnackbarService),
+    ],
+  });
+
+  beforeEach(() => {
+    spectator = createComponent();
+    loader = TestbedHarnessEnvironment.loader(spectator.fixture);
+  });
+
+  it('shows available NIC devices that have not been already added to this system', async () => {
+    const menu = await loader.getHarness(MatMenuHarness.with({ triggerText: 'Add' }));
+    await menu.open();
+
+    const menuItems = await menu.getItems();
+    expect(menuItems).toHaveLength(4);
+    expect(await menuItems[0].getText()).toContain('Intel E1000');
+    expect(await menuItems[1].getText()).toContain('Realtek RTL8139');
+  });
+
+  it('adds a NIC device when it is selected', async () => {
+    const menu = await loader.getHarness(MatMenuHarness.with({ triggerText: 'Add' }));
+    await menu.open();
+
+    await menu.clickItem({ text: 'Intel E1000' });
+
+    expect(spectator.inject(ApiService).call).toHaveBeenCalledWith('virt.instance.device_add', ['my-instance', {
+      dev_type: VirtualizationDeviceType.Nic,
+      nic_type: VirtualizationNicType.Bridged,
+      parent: 'Intel E1000',
+    } as VirtualizationDevice]);
+    expect(spectator.inject(VirtualizationDevicesStore).loadDevices).toHaveBeenCalled();
+    expect(spectator.inject(SnackbarService).success).toHaveBeenCalledWith('NIC was added');
+  });
+});

src/app/pages/virtualization/components/all-instances/instance-details/instance-nics/add-nic-menu/add-nic-menu.component.ts

@@ -0,0 +1,114 @@
+import { ChangeDetectionStrategy, Component, computed } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { MatButton } from '@angular/material/button';
+import { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
+import { Observable } from 'rxjs';
+import {
+  VirtualizationDeviceType, VirtualizationNicType,
+  virtualizationNicTypeLabels,
+} from 'app/enums/virtualization.enum';
+import {
+  VirtualizationDevice,
+  VirtualizationNic,
+} from 'app/interfaces/virtualization.interface';
+import { AppLoaderService } from 'app/modules/loader/app-loader.service';
+import { SnackbarService } from 'app/modules/snackbar/services/snackbar.service';
+import { TestDirective } from 'app/modules/test-id/test.directive';
+import { VirtualizationDevicesStore } from 'app/pages/virtualization/stores/virtualization-devices.store';
+import { ErrorHandlerService } from 'app/services/error-handler.service';
+import { ApiService } from 'app/services/websocket/api.service';
+
+@UntilDestroy()
+@Component({
+  selector: 'ix-add-nic-menu',
+  templateUrl: './add-nic-menu.component.html',
+  styleUrls: ['./add-nic-menu.component.scss'],
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    MatButton,
+    MatMenu,
+    MatMenuItem,
+    TestDirective,
+    TranslateModule,
+    MatMenuTrigger,
+    NgxSkeletonLoaderModule,
+  ],
+})
+export class AddNicMenuComponent {
+  private readonly bridgedChoices = toSignal(this.getNicChoices(VirtualizationNicType.Bridged), { initialValue: {} });
+  private readonly macVlanChoices = toSignal(this.getNicChoices(VirtualizationNicType.Macvlan), { initialValue: {} });
+
+  protected readonly bridgedNicTypeLabel = virtualizationNicTypeLabels.get(VirtualizationNicType.Bridged);
+  protected readonly macVlanNicTypeLabel = virtualizationNicTypeLabels.get(VirtualizationNicType.Macvlan);
+
+  protected readonly isLoadingDevices = this.deviceStore.isLoading;
+
+  protected readonly availableBridgedNics = computed(() => {
+    const choices = Object.values(this.bridgedChoices());
+    const existingItems = this.deviceStore.devices()
+      .filter((device) => device.dev_type === VirtualizationDeviceType.Nic
+        && device.nic_type === VirtualizationNicType.Bridged) as VirtualizationNic[];
+
+    return choices.filter((nic) => !existingItems.find((device) => device.parent === nic));
+  });
+
+  protected readonly availableMacVlanNics = computed(() => {
+    const choices = Object.values(this.macVlanChoices());
+    const existingItems = this.deviceStore.devices()
+      .filter((device) => device.dev_type === VirtualizationDeviceType.Nic
+        && device.nic_type === VirtualizationNicType.Macvlan) as VirtualizationNic[];
+
+    return choices.filter((nic) => !existingItems.find((device) => device.parent === nic));
+  });
+
+  protected readonly hasNicsToAdd = computed(() => {
+    return this.availableBridgedNics().length > 0 || Object.keys(this.availableMacVlanNics()).length > 0;
+  });
+
+  constructor(
+    private api: ApiService,
+    private errorHandler: ErrorHandlerService,
+    private loader: AppLoaderService,
+    private snackbar: SnackbarService,
+    private translate: TranslateService,
+    private deviceStore: VirtualizationDevicesStore,
+  ) {}
+
+  protected addBridgedNic(nic: string): void {
+    this.addDevice({
+      dev_type: VirtualizationDeviceType.Nic,
+      nic_type: VirtualizationNicType.Bridged,
+      parent: nic,
+    } as VirtualizationNic);
+  }
+
+  protected addMacVlanNic(nic: string): void {
+    this.addDevice({
+      dev_type: VirtualizationDeviceType.Nic,
+      nic_type: VirtualizationNicType.Macvlan,
+      parent: nic,
+    } as VirtualizationNic);
+  }
+
+  private getNicChoices(nicType: VirtualizationNicType): Observable<Record<string, string>> {
+    return this.api.call('virt.device.nic_choices', [nicType]);
+  }
+
+  private addDevice(payload: VirtualizationDevice): void {
+    const instanceId = this.deviceStore.selectedInstance().id;
+    this.api.call('virt.instance.device_add', [instanceId, payload])
+      .pipe(
+        this.loader.withLoader(),
+        this.errorHandler.catchError(),
+        untilDestroyed(this),
+      )
+      .subscribe(() => {
+        this.snackbar.success(this.translate.instant('NIC was added'));
+        this.deviceStore.loadDevices();
+      });
+  }
+}

src/app/pages/virtualization/components/all-instances/instance-details/instance-nics/instance-nics.component.html

@@ -0,0 +1,38 @@
+<mat-card class="card">
+  <mat-card-header>
+    <h3 mat-card-title>
+      {{ 'NIC' | translate }}
+    </h3>
+
+    @if (!hasPendingInterfaceChanges()) {
+      <ix-add-nic-menu></ix-add-nic-menu>
+    }
+  </mat-card-header>
+
+  <mat-card-content>
+    @if (hasPendingInterfaceChanges()) {
+      <p class="warning">
+        {{ 'NIC modifications are currently restricted due to pending network changes.' | translate }}
+      </p>
+    }
+
+    @if (isLoadingDevices()) {
+      <ngx-skeleton-loader></ngx-skeleton-loader>
+    } @else {
+      @for (device of shownDevices(); track device.name) {
+        <div class="device">
+          <span>{{ getDeviceDescription(device) }}</span>
+
+          @if (!hasPendingInterfaceChanges()) {
+            <ix-device-actions-menu
+              [device]="device"
+              [showEdit]="false"
+            ></ix-device-actions-menu>
+          }
+        </div>
+      } @empty {
+         {{ 'No NICs added.' | translate }}
+      }
+    }
+  </mat-card-content>
+</mat-card>

src/app/pages/virtualization/components/all-instances/instance-details/instance-nics/instance-nics.component.scss

@@ -0,0 +1,5 @@
+.device {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+}