NAS-134146: PR update

src/app/enums/virtualization.enum.ts

@@ -96,7 +96,7 @@ export enum VirtualizationNicType {
 
 export const virtualizationNicTypeLabels = new Map<VirtualizationNicType, string>([
   [VirtualizationNicType.Bridged, T('Bridged Adaptors')],
-  [VirtualizationNicType.Macvlan, T('MAC VLAN')],
+  [VirtualizationNicType.Macvlan, T('Macvlan')],
 ]);
 
 export enum VirtualizationSource {

src/app/helptext/virtualization/containers.ts

@@ -55,7 +55,7 @@ Choose a VM for full OS isolation, kernel independence, and running diverse OS t
 <br />\
 <b>Bridged NIC</b> uses an existing bridge on the host and creates a virtual device pair to connect the host bridge to the instance.<br />\
 <br />\
-<b>MACVLAN NIC</b> sets up a new network device based on an existing one, but using a different MAC address.'),
+<b>Macvlan NIC</b> sets up a new network device based on an existing network device, but using a different MAC address.'),
 
   network_use_default_placeholder: T('Use default network settings'),
   network_use_default_tooltip: T('Enable to apply default network configurations.'),

src/app/interfaces/ipmi.interface.ts

@@ -13,6 +13,7 @@ export interface Ipmi {
   mac_addresss: string;
   subnet_mask: string;
   vlan_id: number;
+  vlan_id_enable: boolean;
   vlan_priority: number;
 }
 
@@ -29,7 +30,7 @@ export interface IpmiUpdate {
   gateway: string;
   ipaddress: string;
   netmask: string;
-  vlan: unknown;
+  vlan: number;
   password: string;
   apply_remote: boolean;
 }

src/app/interfaces/virtualization.interface.ts

@@ -91,6 +91,7 @@ export interface UpdateVirtualizationInstance {
   vnc_port?: number | null;
   secure_boot?: boolean;
   vnc_password?: string | null;
+  root_disk_size?: number;
 }
 
 export type VirtualizationDevice =

src/app/modules/auth/auth.service.ts

@@ -191,8 +191,8 @@ export class AuthService {
       tap(() => {
         this.clearAuthToken();
         this.wasOneTimePasswordChanged$.next(false);
-        this.api.clearSubscriptions();
         this.wsStatus.setLoginStatus(false);
+        this.api.clearSubscriptions();
       }),
     );
   }

src/app/pages/dashboard/widgets/backup/widget-backup/backup-task-empty/backup-task-empty.component.html

@@ -53,7 +53,7 @@
       @for (item of [1,2,3]; track item) {
         <ngx-skeleton-loader
           class="skeleton"
-          [theme]="{ height: '103px', marginBottom: 0, background: 'var(--alt-bg2)', opacity: 0.25 }"
+          [theme]="{ height: '90px', marginBottom: 0, background: 'var(--alt-bg2)', opacity: 0.25 }"
         ></ngx-skeleton-loader>
       }
     </div>

src/app/pages/dashboard/widgets/cpu/widget-cpu-temperature-bar/widget-cpu-temperature-bar.component.scss

@@ -9,7 +9,7 @@
 
   .bar {
     display: flex;
-    height: 150px;
+    height: 149px;
     width: 100%;
   }
 

src/app/pages/dashboard/widgets/cpu/widget-cpu-usage-bar/widget-cpu-usage-bar.component.scss

@@ -9,7 +9,7 @@
 
   .bar {
     display: flex;
-    height: 150px;
+    height: 149px;
     width: 100%;
   }
 

src/app/pages/dashboard/widgets/cpu/widget-cpu-usage-gauge/widget-cpu-usage-gauge.component.scss

@@ -14,7 +14,7 @@
   }
 
   h3 {
-    padding: 16px 0 0;
+    padding: 15px 0 0;
     width: 100%;
   }
 }

src/app/pages/dashboard/widgets/cpu/widget-cpu-usage-recent/widget-cpu-usage-recent.component.scss

@@ -19,6 +19,6 @@
 
 .skeleton,
 .chart {
-  height: 150px;
+  height: 149px;
   width: 100%;
 }

src/app/pages/dashboard/widgets/help/widget-help/widget-help.component.scss

@@ -18,7 +18,7 @@
 
       &.enterprise {
         .lines {
-          padding: 32px 0;
+          padding: 24px 0;
         }
       }
 

src/app/pages/dashboard/widgets/system/common/widget-sys-info.scss

@@ -207,6 +207,10 @@
 
   .header {
     padding: 16px;
+
+    @media (max-width: $breakpoint-xs) {
+      padding: 16px 16px 0;
+    }
   }
 }
 

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

@@ -2,8 +2,11 @@ import { createComponentFactory, mockProvider, Spectator } from '@ngneat/spectat
 import { provideMockStore } from '@ngrx/store/testing';
 import { MockComponents } from 'ng-mocks';
 import { NgxSkeletonLoaderComponent } from 'ngx-skeleton-loader';
+import { of } from 'rxjs';
 import { mockAuth } from 'app/core/testing/utils/mock-auth.utils';
+import { WINDOW } from 'app/helpers/window.helper';
 import { VirtualizationInstance } from 'app/interfaces/virtualization.interface';
+import { DialogService } from 'app/modules/dialog/dialog.service';
 import { MockMasterDetailViewComponent } from 'app/modules/master-detail-view/testing/mock-master-detail-view.component';
 import { AllInstancesHeaderComponent } from 'app/pages/instances/components/all-instances/all-instances-header/all-instances-header.component';
 import { AllInstancesComponent } from 'app/pages/instances/components/all-instances/all-instances.component';
@@ -12,10 +15,15 @@ import { InstanceListComponent } from 'app/pages/instances/components/all-instan
 import { VirtualizationConfigStore } from 'app/pages/instances/stores/virtualization-config.store';
 import { VirtualizationDevicesStore } from 'app/pages/instances/stores/virtualization-devices.store';
 import { VirtualizationInstancesStore } from 'app/pages/instances/stores/virtualization-instances.store';
-import { selectSystemConfigState } from 'app/store/system-config/system-config.selectors';
+import { selectAdvancedConfig, selectSystemConfigState } from 'app/store/system-config/system-config.selectors';
 
 describe('AllInstancesComponent', () => {
   let spectator: Spectator<AllInstancesComponent>;
+  const mockLocalStorage = {
+    getItem: jest.fn(),
+    setItem: jest.fn(),
+  };
+
   const createComponent = createComponentFactory({
     component: AllInstancesComponent,
     imports: [
@@ -34,9 +42,16 @@ describe('AllInstancesComponent', () => {
             selector: selectSystemConfigState,
             value: {},
           },
+          {
+            selector: selectAdvancedConfig,
+            value: {},
+          },
         ],
       }),
       mockAuth(),
+      mockProvider(DialogService, {
+        warn: jest.fn(() => of(true)),
+      }),
       mockProvider(VirtualizationConfigStore, {
         initialize: jest.fn(),
       }),
@@ -47,15 +62,51 @@ describe('AllInstancesComponent', () => {
         selectedInstance: jest.fn(() => ({ id: 'instance1' } as VirtualizationInstance)),
         resetInstance: jest.fn(),
       }),
+      {
+        provide: WINDOW,
+        useValue: {
+          localStorage: mockLocalStorage,
+          document: {
+            querySelector: jest.fn(),
+          },
+          addEventListener: jest.fn(),
+        },
+      },
     ],
   });
 
   beforeEach(() => {
     spectator = createComponent();
+    jest.clearAllMocks();
   });
 
   it('initializes config store on init', () => {
+    spectator.component.ngOnInit();
     expect(spectator.inject(VirtualizationConfigStore).initialize).toHaveBeenCalled();
     expect(spectator.inject(VirtualizationInstancesStore).initialize).toHaveBeenCalled();
   });
+
+  it('shows warning dialog and updates localStorage if warning has not been shown before', () => {
+    mockLocalStorage.getItem.mockReturnValue(null);
+
+    spectator.component.ngOnInit();
+
+    const dialogService = spectator.inject(DialogService);
+    expect(dialogService.warn).toHaveBeenCalledWith(
+      'Warning',
+      'Containers and virtual machines powered by Incus are experimental and only recommended for advanced users. Make all configuration changes using the TrueNAS UI. Operations using the command line are not supported.',
+    );
+    expect(dialogService.warn).toHaveBeenCalledTimes(1);
+
+    expect(mockLocalStorage.setItem).toHaveBeenCalledWith('showNewVmInstancesWarning', 'true');
+  });
+
+  it('does not show warning dialog if it has been shown before', () => {
+    mockLocalStorage.getItem.mockReturnValue('true');
+
+    spectator.component.ngOnInit();
+
+    const dialogService = spectator.inject(DialogService);
+    expect(dialogService.warn).not.toHaveBeenCalled();
+  });
 });

src/app/pages/instances/components/all-instances/all-instances.component.ts

@@ -1,11 +1,13 @@
 import {
-  ChangeDetectionStrategy, Component, OnInit,
+  ChangeDetectionStrategy, Component, Inject, OnInit,
 } from '@angular/core';
 import { Router, NavigationStart } from '@angular/router';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { TranslateModule } from '@ngx-translate/core';
 import { filter } from 'rxjs';
 import { UiSearchDirective } from 'app/directives/ui-search.directive';
+import { WINDOW } from 'app/helpers/window.helper';
+import { DialogService } from 'app/modules/dialog/dialog.service';
 import { MasterDetailViewComponent } from 'app/modules/master-detail-view/master-detail-view.component';
 import { PageHeaderComponent } from 'app/modules/page-header/page-title-header/page-header.component';
 import {
@@ -44,6 +46,8 @@ export class AllInstancesComponent implements OnInit {
     private instancesStore: VirtualizationInstancesStore,
     private deviceStore: VirtualizationDevicesStore,
     private router: Router,
+    private dialogService: DialogService,
+    @Inject(WINDOW) private window: Window,
   ) {
     this.router.events
       .pipe(filter((event) => event instanceof NavigationStart), untilDestroyed(this))
@@ -57,5 +61,18 @@ export class AllInstancesComponent implements OnInit {
   ngOnInit(): void {
     this.configStore.initialize();
     this.instancesStore.initialize();
+
+    const showVmInstancesWarning = !this.window.localStorage.getItem('showNewVmInstancesWarning');
+
+    if (showVmInstancesWarning) {
+      this.dialogService.closeAllDialogs();
+
+      this.dialogService.warn(
+        'Warning',
+        'Containers and virtual machines powered by Incus are experimental and only recommended for advanced users. Make all configuration changes using the TrueNAS UI. Operations using the command line are not supported.',
+      ).pipe(untilDestroyed(this)).subscribe(() => {
+        this.window.localStorage.setItem('showNewVmInstancesWarning', 'true');
+      });
+    }
   }
 }

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

@@ -18,6 +18,13 @@ <h3 mat-card-title>
         <span class="value">
           {{ +instance().root_disk_size | ixFileSize }}
         </span>
+        <a
+          class="action"
+          ixTest="increase-root-disk-size"
+          (click)="showRootDiskIncreaseDialog()"
+        >
+          {{ 'Increase' | translate }}
+        </a>
       </div>
     }
 

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

@@ -5,7 +5,15 @@
 }
 
 .root-disk-size {
+  display: flex;
   margin-bottom: 6px;
+
+  .action {
+    color: var(--primary);
+    cursor: pointer;
+    margin-left: auto;
+    text-decoration: underline;
+  }
 }
 
 .label {

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

@@ -1,6 +1,7 @@
 import { HarnessLoader } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { MatButtonHarness } from '@angular/material/button/testing';
+import { MatDialog } from '@angular/material/dialog';
 import { createComponentFactory, mockProvider, Spectator } from '@ngneat/spectator/jest';
 import { MockComponent } from 'ng-mocks';
 import { of } from 'rxjs';
@@ -18,6 +19,10 @@ import {
   DeviceActionsMenuComponent,
 } from 'app/pages/instances/components/common/device-actions-menu/device-actions-menu.component';
 import { VirtualizationDevicesStore } from 'app/pages/instances/stores/virtualization-devices.store';
+import { VirtualizationInstancesStore } from 'app/pages/instances/stores/virtualization-instances.store';
+import {
+  IncreaseRootDiskSizeComponent,
+} from 'app/pages/virtualization/components/all-instances/instance-details/instance-disks/increase-root-disk-size/increase-root-disk-size.component';
 
 describe('InstanceDisksComponent', () => {
   let spectator: Spectator<InstanceDisksComponent>;
@@ -49,11 +54,19 @@ describe('InstanceDisksComponent', () => {
         devices: () => disks,
         loadDevices: jest.fn(),
       }),
+      mockProvider(VirtualizationInstancesStore, {
+        instanceUpdated: jest.fn(),
+      }),
       mockProvider(SlideIn, {
         open: jest.fn(() => of({
           response: true,
         })),
       }),
+      mockProvider(MatDialog, {
+        open: jest.fn(() => ({
+          afterClosed: () => of(true),
+        })),
+      }),
     ],
   });
 
@@ -100,6 +113,7 @@ describe('InstanceDisksComponent', () => {
       );
     });
   });
+
   describe('vm', () => {
     const vm = {
       id: 'my-instance',
@@ -135,5 +149,17 @@ describe('InstanceDisksComponent', () => {
 
       expect(rootDisk).toHaveText('Root Disk: 10 GiB');
     });
+
+    it('opens dialog to increase root disk size when Increase link is pressed', () => {
+      const link = spectator.query('.root-disk-size .action');
+      expect(link).toHaveText('Increase');
+
+      spectator.click(link);
+
+      expect(spectator.inject(MatDialog).open).toHaveBeenCalledWith(IncreaseRootDiskSizeComponent, {
+        data: vm,
+      });
+      expect(spectator.inject(VirtualizationInstancesStore).instanceUpdated).toHaveBeenCalled();
+    });
   });
 });