NAS-133383: PR update

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/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/two-factor-guard.service.spec.ts

@@ -11,8 +11,8 @@ describe('TwoFactorGuardService', () => {
   let spectator: SpectatorService<TwoFactorGuardService>;
 
   const isAuthenticated$ = new BehaviorSubject(false);
-  const userTwoFactorConfig$ = new BehaviorSubject(null as UserTwoFactorConfig);
-  const getGlobalTwoFactorConfig = jest.fn(() => of(null as GlobalTwoFactorConfig));
+  const userTwoFactorConfig$ = new BehaviorSubject<UserTwoFactorConfig | null>(null);
+  const getGlobalTwoFactorConfig = jest.fn(() => of(null as GlobalTwoFactorConfig | null));
   const hasRole$ = new BehaviorSubject(false);
 
   const createService = createServiceFactory({

src/app/modules/empty/empty.service.ts

@@ -9,7 +9,7 @@ import { EmptyConfig } from 'app/interfaces/empty-config.interface';
 export class EmptyService {
   constructor(private translate: TranslateService) { }
 
-  defaultEmptyConfig(type: EmptyType): EmptyConfig {
+  defaultEmptyConfig(type?: EmptyType | null): EmptyConfig {
     switch (type) {
       case EmptyType.Loading:
         return {

src/app/modules/forms/ix-forms/components/ix-combobox/ix-combobox.component.ts

@@ -74,7 +74,7 @@ export class IxComboboxComponent implements ControlValueAccessor, OnInit {
   });
 
   private readonly inputElementRef: Signal<ElementRef<HTMLInputElement>> = viewChild.required('ixInput', { read: ElementRef });
-  private readonly autoCompleteRef = viewChild('auto', { read: MatAutocomplete });
+  private readonly autoCompleteRef = viewChild.required('auto', { read: MatAutocomplete });
   private readonly autocompleteTrigger = viewChild(MatAutocompleteTrigger);
 
   options: Option[] = [];

src/app/modules/forms/ix-forms/components/ix-icon-group/icon-group-option.interface.ts

@@ -4,4 +4,5 @@ export interface IconGroupOption {
   icon: MarkedIcon;
   label: string;
   value: string;
+  description?: string;
 }

src/app/modules/forms/ix-forms/components/ix-icon-group/ix-icon-group.component.html

@@ -6,23 +6,37 @@
   ></ix-label>
 }
 
-<div class="icon-group" role="radiogroup" [attr.aria-label]="label()">
+<div
+  class="icon-group"
+  role="radiogroup"
+  [attr.aria-label]="label()"
+  [class.with-labels]="showLabels()"
+>
   @for (option of options(); track option) {
-    <button
-      mat-icon-button
-      role="radio"
-      type="button"
-      [disabled]="isDisabled"
-      [ixTest]="[controlDirective.name, option.label]"
-      [attr.aria-label]="option.label | translate"
-      [attr.data-value]="option.value"
-      [attr.aria-checked]="value === option.value"
-      [class.selected]="value === option.value"
-      (click)="onValueChanged(option.value)"
-      (blur)="onTouch()"
-    >
-      <ix-icon [name]="option.icon"></ix-icon>
-    </button>
+    <div>
+      <button
+        mat-icon-button
+        role="radio"
+        type="button"
+        [disabled]="isDisabled"
+        [ixTest]="[controlDirective.name, option.label]"
+        [attr.aria-label]="option.label | translate"
+        [attr.data-value]="option.value"
+        [attr.aria-checked]="value === option.value"
+        [class.selected]="value === option.value"
+        (click)="onValueChanged(option.value)"
+        (blur)="onTouch()"
+      >
+        <ix-icon [name]="option.icon"></ix-icon>
+      </button>
+
+      @if (showLabels()) {
+        <h5 class="title">{{ option.label | translate }}</h5>
+        @if (option.description) {
+          <small class="description">{{ option.description | translate }}</small>
+        }
+      }
+    </div>
   } @empty {
     <span>{{ 'No options are passed' | translate }}</span>
   }

src/app/modules/forms/ix-forms/components/ix-icon-group/ix-icon-group.component.scss

@@ -20,3 +20,51 @@
 .selected {
   color: var(--primary);
 }
+
+.title,
+.description {
+  display: block;
+  margin: 0;
+  text-align: center;
+}
+
+.title {
+  font-size: 14px;
+  margin-bottom: 2px;
+  margin-top: 8px;
+}
+
+.description {
+  color: var(--fg2);
+}
+
+.with-labels {
+  gap: 16px;
+
+  ::ng-deep .mdc-icon-button {
+    border: 2px solid var(--lines);
+    border-radius: 0;
+    height: 100px !important;
+    line-height: 100px;
+    width: 100px !important;
+
+    .mdc-icon-button__ripple,
+    .mat-ripple {
+      border-radius: 0 !important;
+      height: 100px !important;
+      width: 100px !important;
+    }
+
+    .ix-icon,
+    .ix-icon svg {
+      font-size: 40px;
+      height: 40px;
+      line-height: 1;
+      width: 40px;
+    }
+
+    &.selected {
+      border-color: var(--primary);
+    }
+  }
+}

src/app/modules/forms/ix-forms/components/ix-icon-group/ix-icon-group.component.spec.ts

@@ -28,6 +28,7 @@ describe('IxIconGroupComponent', () => {
         [tooltip]="tooltip"
         [required]="required"
         [formControl]="formControl"
+        [showLabels]="true"
       ></ix-icon-group>`,
       {
         hostProps: {
@@ -85,6 +86,14 @@ describe('IxIconGroupComponent', () => {
       formControl.setValue('edit');
       expect(await iconGroupHarness.getValue()).toBe('edit');
     });
+    it('shows labels when `showLabels` is set to true', async () => {
+      const icons = await iconGroupHarness.getIcons();
+      expect(icons).toHaveLength(2);
+
+      const labels = spectator.queryAll('h5.title').map((el) => el.textContent);
+      expect(labels[0]).toBe('Edit');
+      expect(labels[1]).toBe('Delete');
+    });
   });
 
   it('updates form control value when user presses the button', async () => {

src/app/modules/forms/ix-forms/components/ix-icon-group/ix-icon-group.component.ts

@@ -20,13 +20,13 @@ import { TestDirective } from 'app/modules/test-id/test.directive';
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    IxLabelComponent,
-    MatIconButton,
-    IxIconComponent,
     IxErrorsComponent,
+    IxIconComponent,
+    IxLabelComponent,
     ReactiveFormsModule,
-    TranslateModule,
     TestDirective,
+    TranslateModule,
+    MatIconButton,
   ],
   hostDirectives: [
     { ...registeredDirectiveConfig },
@@ -37,6 +37,7 @@ export class IxIconGroupComponent implements ControlValueAccessor {
   readonly label = input<string>();
   readonly tooltip = input<string>();
   readonly required = input<boolean>(false);
+  readonly showLabels = input<boolean>(false);
 
   protected isDisabled = false;
   protected value: IconGroupOption['value'];

src/app/modules/forms/ix-forms/components/ix-input/ix-input.component.ts

@@ -75,7 +75,7 @@ export class IxInputComponent implements ControlValueAccessor, OnInit, OnChanges
   /** If formatted value returned by parseAndFormatInput has non-numeric letters
    * and input 'type' is a number, the input will stay empty on the form */
   readonly format = input<(value: string | number) => string>();
-  readonly parse = input<(value: string | number) => string | number>();
+  readonly parse = input<(value: string | number) => string | number | null>();
 
   readonly inputElementRef: Signal<ElementRef<HTMLInputElement>> = viewChild.required('ixInput', { read: ElementRef });
 

src/app/modules/forms/ix-forms/services/form-error-handler.service.ts

@@ -72,6 +72,10 @@ export class FormErrorHandlerService {
     const extra = (error as ApiError).extra as string[][];
     for (const extraItem of extra) {
       const field = extraItem[0].split('.').pop();
+      if (!field) {
+        return;
+      }
+
       const errorMessage = extraItem[1];
 
       const control = this.getFormField(formGroup, field, fieldsMap);