NAS-133358: PR Update

scripts/ui-search/extract-ui-search-elements.ts

@@ -8,6 +8,10 @@
  * 2️⃣. Create .elements.ts config file near the .component.html file ~ [pools-dashboard.elements.ts]
  *
  * Example of creating a new searchable element:
+ *
+ * !! It's required to add anchor to the element where you do not specify hierarchy explicitly !!
+ * You will get TS error if it's not provided correctly
+ *
 
   export const customSearchableElements = {
     hierarchy: [T('System'), T('Advanced Settings'), T('Access')],

scripts/ui-search/parse-ui-search-elements.ts

@@ -61,14 +61,16 @@ export function parseUiSearchElements(
 function createUiSearchElement(
   cheerioRoot$: (selector: CheerioElement | string) => { attr: (attr: string) => string },
   element: CheerioElement,
-  elementConfig: UiSearchableElement,
+  elementConfig: Record<string, UiSearchableElement>,
   parentKey: keyof UiSearchableElement,
   childKey: keyof UiSearchableElement,
   componentProperties: Record<string, string>,
 ): UiSearchableElement {
   try {
     const parent = (elementConfig?.[parentKey] || elementConfig) as UiSearchableElement;
-    const child = parent?.elements?.[childKey] || parent?.manualRenderElements?.[childKey] || {};
+    const child = parent?.elements?.[childKey]
+      || parent?.manualRenderElements?.[childKey]
+      || {} as UiSearchableElement;
 
     const hierarchy = [...parent?.hierarchy || [], ...child?.hierarchy || []];
     const visibleTokens = [...parent?.visibleTokens || [], ...child?.visibleTokens || []];

src/app/app.component.ts

@@ -6,10 +6,10 @@ import { Router, NavigationEnd, RouterOutlet } from '@angular/router';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { filter, tap } from 'rxjs';
 import { WINDOW } from 'app/helpers/window.helper';
-import { AuthService } from 'app/modules/auth/auth.service';
 import { LayoutService } from 'app/modules/layout/layout.service';
 import { PingService } from 'app/modules/websocket/ping.service';
 import { DetectBrowserService } from 'app/services/detect-browser.service';
+import { WebSocketStatusService } from 'app/services/websocket-status.service';
 
 @UntilDestroy()
 @Component({
@@ -24,13 +24,13 @@ export class AppComponent implements OnInit {
   constructor(
     public title: Title,
     private router: Router,
-    private authService: AuthService,
+    private wsStatus: WebSocketStatusService,
     private detectBrowser: DetectBrowserService,
     private layoutService: LayoutService,
     private pingService: PingService,
     @Inject(WINDOW) private window: Window,
   ) {
-    this.authService.isAuthenticated$.pipe(untilDestroyed(this)).subscribe((isAuthenticated) => {
+    this.wsStatus.isAuthenticated$.pipe(untilDestroyed(this)).subscribe((isAuthenticated) => {
       this.isAuthenticated = isAuthenticated;
     });
     this.title.setTitle('TrueNAS - ' + this.window.location.hostname);

src/app/core/testing/classes/mock-api.service.ts

@@ -22,6 +22,7 @@ import { Job } from 'app/interfaces/job.interface';
 import { ApiService } from 'app/modules/websocket/api.service';
 import { SubscriptionManagerService } from 'app/modules/websocket/subscription-manager.service';
 import { WebSocketHandlerService } from 'app/modules/websocket/websocket-handler.service';
+import { WebSocketStatusService } from 'app/services/websocket-status.service';
 
 /**
  * Better than just expect.anything() because it allows null and undefined.
@@ -47,10 +48,11 @@ export class MockApiService extends ApiService {
 
   constructor(
     wsHandler: WebSocketHandlerService,
+    wsStatus: WebSocketStatusService,
     subscriptionManager: SubscriptionManagerService,
     translate: TranslateService,
   ) {
-    super(wsHandler, subscriptionManager, translate);
+    super(wsHandler, wsStatus, subscriptionManager, translate);
 
     this.call = jest.fn();
     this.job = jest.fn();

src/app/core/testing/mock-enclosure/mock-enclosure-api.service.ts

@@ -10,6 +10,7 @@ import { SystemInfo } from 'app/interfaces/system-info.interface';
 import { ApiService } from 'app/modules/websocket/api.service';
 import { SubscriptionManagerService } from 'app/modules/websocket/subscription-manager.service';
 import { WebSocketHandlerService } from 'app/modules/websocket/websocket-handler.service';
+import { WebSocketStatusService } from 'app/services/websocket-status.service';
 
 @Injectable({
   providedIn: 'root',
@@ -20,10 +21,11 @@ export class MockEnclosureApiService extends ApiService {
 
   constructor(
     wsManager: WebSocketHandlerService,
+    wsStatus: WebSocketStatusService,
     subscriptionManager: SubscriptionManagerService,
     translate: TranslateService,
   ) {
-    super(wsManager, subscriptionManager, translate);
+    super(wsManager, wsStatus, subscriptionManager, translate);
 
     console.warn('MockEnclosureApiService is in effect. Some calls will be mocked');
   }

src/app/core/testing/utils/empty-auth.service.ts

@@ -3,7 +3,6 @@ import { AuthService } from 'app/modules/auth/auth.service';
 
 export class EmptyAuthService {
   readonly authToken$ = getMissingInjectionErrorObservable(AuthService.name);
-  readonly isAuthenticated$ = getMissingInjectionErrorObservable(AuthService.name);
   readonly user$ = getMissingInjectionErrorObservable(AuthService.name);
   readonly isSysAdmin$ = getMissingInjectionErrorObservable(AuthService.name);
   readonly userTwoFactorConfig$ = getMissingInjectionErrorObservable(AuthService.name);

src/app/core/testing/utils/mock-api.utils.ts

@@ -14,6 +14,7 @@ import { Job } from 'app/interfaces/job.interface';
 import { ApiService } from 'app/modules/websocket/api.service';
 import { SubscriptionManagerService } from 'app/modules/websocket/subscription-manager.service';
 import { WebSocketHandlerService } from 'app/modules/websocket/websocket-handler.service';
+import { WebSocketStatusService } from 'app/services/websocket-status.service';
 
 /**
  * This is a sugar syntax for creating simple api mocks.
@@ -49,11 +50,12 @@ export function mockApi(
     {
       provide: ApiService,
       useFactory: (
+        wsStatus: WebSocketStatusService,
         wsHandler: WebSocketHandlerService,
         translate: TranslateService,
       ) => {
         const subscriptionManager = {} as SubscriptionManagerService;
-        const mockApiService = new MockApiService(wsHandler, subscriptionManager, translate);
+        const mockApiService = new MockApiService(wsHandler, wsStatus, subscriptionManager, translate);
         (mockResponses || []).forEach((mockResponse) => {
           if (mockResponse.type === MockApiResponseType.Call) {
             mockApiService.mockCall(mockResponse.method, mockResponse.response);
@@ -66,7 +68,11 @@ export function mockApi(
         });
         return mockApiService;
       },
-      deps: [WebSocketHandlerService, TranslateService],
+      deps: [WebSocketStatusService, WebSocketHandlerService, TranslateService],
+    },
+    {
+      provide: WebSocketStatusService,
+      useValue: ({} as WebSocketStatusService),
     },
     {
       provide: MockApiService,

src/app/core/testing/utils/mock-auth.utils.ts

@@ -11,8 +11,8 @@ import { Role } from 'app/enums/role.enum';
 import { LoggedInUser } from 'app/interfaces/ds-cache.interface';
 import { AuthService } from 'app/modules/auth/auth.service';
 import { ApiService } from 'app/modules/websocket/api.service';
-import { WebSocketHandlerService } from 'app/modules/websocket/websocket-handler.service';
 import { TokenLastUsedService } from 'app/services/token-last-used.service';
+import { WebSocketStatusService } from 'app/services/websocket-status.service';
 
 export const dummyUser = {
   privilege: {
@@ -40,13 +40,14 @@ export function mockAuth(
       provide: AuthService,
       useFactory: () => {
         const mockService = new MockAuthService(
-          createSpyObject(WebSocketHandlerService, {
-            isConnected$: of(true),
-          }),
           createSpyObject(Store),
           createSpyObject(ApiService),
           createSpyObject(TokenLastUsedService),
           createSpyObject(Window),
+          createSpyObject(WebSocketStatusService, {
+            isConnected$: of(true),
+            isAuthenticated$: of(false),
+          }),
         );
 
         mockService.setUser(user as LoggedInUser);

src/app/enums/virtualization.enum.ts

@@ -1,4 +1,5 @@
 import { marker as T } from '@biesbjerg/ngx-translate-extract-marker';
+import { iconMarker } from 'app/modules/ix-icon/icon-marker.util';
 
 export enum VirtualizationType {
   Container = 'CONTAINER',
@@ -10,6 +11,21 @@ export const virtualizationTypeLabels = new Map<VirtualizationType, string>([
   [VirtualizationType.Vm, T('VM')],
 ]);
 
+export const virtualizationTypeIcons = [
+  {
+    value: VirtualizationType.Container,
+    icon: iconMarker('mdi-linux'),
+    label: T('Container'),
+    description: T('Linux Only'),
+  },
+  {
+    value: VirtualizationType.Vm,
+    icon: iconMarker('mdi-laptop'),
+    label: T('VM'),
+    description: T('Any OS'),
+  },
+];
+
 export enum VirtualizationStatus {
   Running = 'RUNNING',
   Stopped = 'STOPPED',
@@ -82,3 +98,7 @@ export const virtualizationNicTypeLabels = new Map<VirtualizationNicType, string
   [VirtualizationNicType.Bridged, T('Bridged Adaptors')],
   [VirtualizationNicType.Macvlan, T('MAC VLAN')],
 ]);
+
+export enum VirtualizationSource {
+  Image = 'IMAGE',
+}

src/app/helpers/get-credentials-creation-source.utils.ts

@@ -1,11 +1,15 @@
 import { CredentialType, Credentials } from 'app/interfaces/credential-type.interface';
 
-export function getCredentialsCreationSource(credentials: Credentials): string {
+export function getCredentialsCreationSource(credentials: Credentials | null): string {
+  if (!credentials?.type) {
+    return '';
+  }
+
   if ([CredentialType.UnixSocket, CredentialType.LoginPassword, CredentialType.Token].includes(credentials.type)) {
-    return credentials.data.username;
+    return credentials.data?.username || '';
   }
   if (credentials.type === CredentialType.ApiKey) {
-    return credentials.data.api_key;
+    return credentials.data?.api_key || '';
   }
   return '';
 }

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

@@ -10,7 +10,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, VirtualizationNicType, VirtualizationType } from 'app/enums/virtualization.enum';
+import { VirtualizationGpuType, VirtualizationNicType } from 'app/enums/virtualization.enum';
 import {
   Acl,
   AclQueryParams,
@@ -199,7 +199,7 @@ import {
   ReplicationTask,
 } from 'app/interfaces/replication-task.interface';
 import {
-  CreateReportingExporter, ReportingExporter, ReportingExporterSchema, UpdateReportingExporter,
+  ReportingExporter, ReportingExporterSchema, UpdateReportingExporter,
 } from 'app/interfaces/reporting-exporters.interface';
 import { ReportingGraph } from 'app/interfaces/reporting-graph.interface';
 import {
@@ -695,7 +695,7 @@ export interface ApiCallDirectory {
   'replication.update': { params: [id: number, update: Partial<ReplicationCreate>]; response: ReplicationTask };
 
   // Reporting
-  'reporting.exporters.create': { params: [CreateReportingExporter]; response: ReportingExporter };
+  'reporting.exporters.create': { params: [UpdateReportingExporter]; response: ReportingExporter };
   'reporting.exporters.delete': { params: [id: number]; response: boolean };
   'reporting.exporters.exporter_schemas': { params: void; response: ReportingExporterSchema[] };
   'reporting.exporters.query': { params: QueryParams<ReportingExporter>; response: ReportingExporter[] };
@@ -864,7 +864,7 @@ export interface ApiCallDirectory {
 
   'virt.device.disk_choices': { params: []; response: Choices };
   'virt.device.gpu_choices': {
-    params: [instanceType: VirtualizationType, gpuType: VirtualizationGpuType];
+    params: [gpuType: VirtualizationGpuType];
     response: AvailableGpus;
   };
   'virt.device.usb_choices': { params: []; response: Record<string, AvailableUsb> };

src/app/interfaces/dialog.interface.ts

@@ -7,7 +7,7 @@ export interface ConfirmOptions {
   cancelText?: string;
   disableClose?: boolean;
   confirmationCheckboxText?: string;
-  buttonColor?: 'primary' | 'red';
+  buttonColor?: 'primary' | 'warn';
 }
 
 export interface ConfirmOptionsWithSecondaryCheckbox extends ConfirmOptions {

src/app/interfaces/enclosure.interface.ts

@@ -80,17 +80,17 @@ export interface DashboardEnclosureSlot {
   descriptor: string;
   status: EnclosureStatus;
   dev: string | null;
-  supports_identify_light?: boolean;
+  supports_identify_light: boolean;
   drive_bay_light_status: DriveBayLightStatus | null;
-  size?: number | null;
-  model?: string | null;
+  size: number | null;
+  model: string | null;
   is_top: boolean;
   is_front: boolean;
   is_rear: boolean;
   is_internal: boolean;
-  serial?: string | null;
-  type?: DiskType | null;
-  rotationrate?: number | null;
+  serial: string | null;
+  type: DiskType | null;
+  rotationrate: number | null;
   pool_info: EnclosureSlotPoolInfo | null;
 }
 

src/app/interfaces/reporting-exporters.interface.ts

@@ -17,10 +17,8 @@ export interface ReportingExporterList {
 export interface ReportingExporter {
   name: string;
   id: number;
-  type: string;
   enabled: boolean;
   attributes: Record<string, unknown>;
 }
 
-export type CreateReportingExporter = Omit<ReportingExporter, 'id'>;
-export type UpdateReportingExporter = Omit<ReportingExporter, 'id' | 'type'>;
+export type UpdateReportingExporter = Partial<Omit<ReportingExporter, 'id'>>;

src/app/interfaces/schema.interface.ts

@@ -12,7 +12,7 @@ export interface OldSchema {
   type: SchemaType | SchemaType[];
   _name_: string;
   _required_: boolean;
-
+  const?: string;
 }
 
 export interface SchemaProperties {

src/app/interfaces/virtualization.interface.ts

@@ -8,6 +8,7 @@ import {
   VirtualizationNicType,
   VirtualizationProxyProtocol,
   VirtualizationRemote,
+  VirtualizationSource,
   VirtualizationStatus,
   VirtualizationType,
 } from 'app/enums/virtualization.enum';
@@ -49,11 +50,20 @@ export interface CreateVirtualizationInstance {
   image: string;
   remote: VirtualizationRemote;
   instance_type: VirtualizationType;
+  source_type?: VirtualizationSource;
   environment?: Record<string, string>;
   autostart?: boolean;
   cpu: string;
+  /**
+   * Value must be greater or equal to 33554432
+   */
   memory: number;
   devices: VirtualizationDevice[];
+  enable_vnc?: boolean;
+  /**
+   * Value must be greater or equal to 5900 and lesser or equal to 65535
+   */
+  vnc_port?: number | null;
 }
 
 export interface UpdateVirtualizationInstance {
@@ -148,6 +158,7 @@ export interface VirtualizationImage {
   os: string;
   release: string;
   variant: string;
+  instance_types: VirtualizationType[];
 }
 
 export interface VirtualizationStopParams {

src/app/modules/auth/auth-guard.service.spec.ts

@@ -6,7 +6,7 @@ import {
 } from '@ngneat/spectator/jest';
 import { BehaviorSubject } from 'rxjs';
 import { AuthGuardService } from 'app/modules/auth/auth-guard.service';
-import { AuthService } from 'app/modules/auth/auth.service';
+import { WebSocketStatusService } from 'app/services/websocket-status.service';
 
 describe('AuthGuardService', () => {
   const redirectUrl = 'storage/disks';
@@ -17,7 +17,7 @@ describe('AuthGuardService', () => {
   let spectator: SpectatorService<AuthGuardService>;
   const createService = createServiceFactory({
     service: AuthGuardService,
-    providers: [mockProvider(AuthService, { isAuthenticated$ })],
+    providers: [mockProvider(WebSocketStatusService, { isAuthenticated$ })],
   });
 
   beforeEach(() => {

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

@@ -2,7 +2,7 @@ import { Inject, Injectable } from '@angular/core';
 import { ActivatedRouteSnapshot, Router, RouterStateSnapshot } from '@angular/router';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { WINDOW } from 'app/helpers/window.helper';
-import { AuthService } from 'app/modules/auth/auth.service';
+import { WebSocketStatusService } from 'app/services/websocket-status.service';
 
 @UntilDestroy()
 @Injectable({
@@ -12,10 +12,10 @@ export class AuthGuardService {
   isAuthenticated = false;
   constructor(
     private router: Router,
-    private authService: AuthService,
+    private wsStatus: WebSocketStatusService,
     @Inject(WINDOW) private window: Window,
   ) {
-    this.authService.isAuthenticated$.pipe(untilDestroyed(this)).subscribe((isLoggedIn) => {
+    this.wsStatus.isAuthenticated$.pipe(untilDestroyed(this)).subscribe((isLoggedIn) => {
       this.isAuthenticated = isLoggedIn;
     });
   }