NAS-114389: Updated feedback

src/app/helpers/options.helper.ts

 import { OperatorFunction } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { Choices } from 'app/interfaces/choices.interface';
-import { Option } from 'app/interfaces/option.interface';
+import { MapOption, Option } from 'app/interfaces/option.interface';
 
 export function mapToOptions(map: Map<string, string>): Option[] {
   return Array.from(map.entries()).map(([value, label]) => ({ label, value }));
@@ -12,3 +12,9 @@ export function choicesToOptions(): OperatorFunction<Choices, Option[]> {
     return Object.entries(choices).map(([value, label]) => ({ label, value }));
   });
 }
+
+export function arrayToOptions(): OperatorFunction<MapOption[], Option[]> {
+  return map((choices) => {
+    return choices.map(([value, label]) => ({ label, value }));
+  });
+}

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

@@ -144,7 +144,6 @@ import { LdapConfig, LdapConfigUpdate, LdapConfigUpdateResult } from 'app/interf
 import { LldpConfig, LldpConfigUpdate } from 'app/interfaces/lldp-config.interface';
 import { MailConfig, MailConfigUpdate, SendMailParams } from 'app/interfaces/mail-config.interface';
 import {
-  NetworkActivityChoice,
   NetworkConfiguration,
   NetworkConfigurationUpdate,
 } from 'app/interfaces/network-configuration.interface';
@@ -155,6 +154,7 @@ import { NfsShare, NfsShareUpdate } from 'app/interfaces/nfs-share.interface';
 import { CreateNtpServer, NtpServer } from 'app/interfaces/ntp-server.interface';
 import { OpenvpnClientConfig, OpenvpnClientConfigUpdate } from 'app/interfaces/openvpn-client-config.interface';
 import { OpenvpnServerConfig, OpenvpnServerConfigUpdate } from 'app/interfaces/openvpn-server-config.interface';
+import { MapOption } from 'app/interfaces/option.interface';
 import { PeriodicSnapshotTask, PeriodSnapshotTaskUpdate } from 'app/interfaces/periodic-snapshot-task.interface';
 import { PoolAttachment } from 'app/interfaces/pool-attachment.interface';
 import { PoolExportParams } from 'app/interfaces/pool-export.interface';
@@ -583,7 +583,7 @@ export type ApiDirectory = {
 
   // Network
   'network.general.summary': { params: void; response: NetworkSummary };
-  'network.configuration.activity_choices': { params: void; response: NetworkActivityChoice[] };
+  'network.configuration.activity_choices': { params: void; response: MapOption[] };
   'network.configuration.update': { params: [NetworkConfigurationUpdate]; response: NetworkConfiguration };
   'network.configuration.config': { params: void; response: NetworkConfiguration };
 

src/app/interfaces/network-configuration.interface.ts

@@ -22,6 +22,28 @@ export interface NetworkConfiguration {
   state: NetworkConfigurationState;
 }
 
+export interface NetworkConfigurationConfig {
+  domain: string;
+  domains: string[];
+  hostname: string;
+  hostname_b: string;
+  hostname_virtual: string;
+  hosts: string[];
+  httpproxy: string;
+  ipv4gateway: string;
+  ipv6gateway: string;
+  nameserver1: string;
+  nameserver2: string;
+  nameserver3: string;
+  netwait_enabled: boolean;
+  netwait_ip: string[];
+  netbios: false;
+  mdns: true;
+  wsd: true;
+  outbound_network_activity: NetworkActivityType;
+  outbound_network_value: string[];
+}
+
 export interface NetworkConfigurationState {
   ipv4gateway: string;
   ipv6gateway: string;
@@ -41,11 +63,6 @@ export interface NetworkConfigurationActivity {
   activities: string[];
 }
 
-export type NetworkActivityChoice = [
-  value: string,
-  label: string,
-];
-
 export interface NetworkConfigurationUpdate {
   activity: NetworkConfigurationActivity;
   domain: string;

src/app/interfaces/option.interface.ts

@@ -3,6 +3,11 @@ export interface Option {
   value: string | number;
 }
 
+export type MapOption = [
+  value: string,
+  label: string,
+];
+
 export interface RadioOption extends Option {
   tooltip: string;
 }

src/app/modules/ix-forms/components/ix-slide-in/ix-slide-in.component.html

-<div class="ix-{{id}} ix-slide-in-form {{wide ? 'wide' : ''}}" [class.open]="isSlideInOpen">
+<div class="ix-{{id}} ix-slide-in-form" [class.open]="isSlideInOpen" [class.wide]="wide">
   <div class="ix-slide-in-body">
     <ng-template #body></ng-template>
   </div>

src/app/pages/network/configuration/configuration.component.ts

@@ -5,12 +5,12 @@ import { Validators } from '@angular/forms';
 import { FormBuilder } from '@ngneat/reactive-forms';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { of } from 'rxjs';
-import { map } from 'rxjs/operators';
 import { NetworkActivityType } from 'app/enums/network-activity-type.enum';
 import { ProductType } from 'app/enums/product-type.enum';
+import { arrayToOptions } from 'app/helpers/options.helper';
 import helptext from 'app/helptext/network/configuration/configuration';
 import {
-  NetworkConfiguration, NetworkConfigurationActivity, NetworkConfigurationUpdate,
+  NetworkConfiguration, NetworkConfigurationActivity, NetworkConfigurationConfig, NetworkConfigurationUpdate,
 } from 'app/interfaces/network-configuration.interface';
 import { ipv4Validator, ipv6Validator } from 'app/modules/entity/entity-form/validators/ip-validation';
 import { EntityUtils } from 'app/modules/entity/utils';
@@ -41,7 +41,7 @@ export class NetworkConfigurationComponent implements OnInit {
     nameserver3: [''],
     ipv4gateway: ['', ipv4Validator()],
     ipv6gateway: ['', ipv6Validator()],
-    outbound_network_activity: ['DENY'],
+    outbound_network_activity: [NetworkActivityType.Deny],
     outbound_network_value: [[] as string[]],
     httpproxy: [''],
     netwait_enabled: [false],
@@ -160,11 +160,7 @@ export class NetworkConfigurationComponent implements OnInit {
     fcName: 'outbound_network_value',
     label: '',
     tooltip: helptext.outbound_network_value.tooltip,
-    options: this.ws.call('network.configuration.activity_choices').pipe(
-      map((choices) => {
-        return choices.map(([value, label]) => ({ label, value }));
-      }),
-    ),
+    options: this.ws.call('network.configuration.activity_choices').pipe(arrayToOptions()),
     hidden: true,
   };
 
@@ -208,10 +204,7 @@ export class NetworkConfigurationComponent implements OnInit {
 
     this.form.controls.outbound_network_activity.valueChanges.pipe(untilDestroyed(this)).subscribe(
       (value: NetworkActivityType) => {
-        if (
-          value === NetworkActivityType.Allow
-          || value === NetworkActivityType.Deny
-        ) {
+        if ([NetworkActivityType.Allow, NetworkActivityType.Deny].includes(value)) {
           this.outbound_network_value.hidden = true;
         } else {
           this.outbound_network_value.hidden = false;
@@ -241,24 +234,38 @@ export class NetworkConfigurationComponent implements OnInit {
       .pipe(untilDestroyed(this))
       .subscribe(
         (config: NetworkConfiguration) => {
-          const transformed: any = { ...config };
-
-          if (transformed.hosts && transformed.hosts !== '') {
-            transformed.hosts = transformed.hosts.split('\n');
-          } else {
-            transformed.hosts = [];
+          const transformed: NetworkConfigurationConfig = {
+            hostname: config.hostname,
+            hostname_b: config.hostname_b,
+            hostname_virtual: config.hostname_virtual,
+            domain: config.domain,
+            domains: config.domains,
+            nameserver1: config.nameserver1,
+            nameserver2: config.nameserver2,
+            nameserver3: config.nameserver3,
+            ipv4gateway: config.ipv4gateway,
+            ipv6gateway: config.ipv6gateway,
+            outbound_network_activity: NetworkActivityType.Allow,
+            outbound_network_value: [],
+            httpproxy: config.httpproxy,
+            netwait_enabled: config.netwait_enabled,
+            netwait_ip: config.netwait_ip,
+            hosts: [],
+            netbios: config.service_announcement.netbios,
+            mdns: config.service_announcement.mdns,
+            wsd: config.service_announcement.wsd,
+          };
+
+          if (config.hosts && config.hosts !== '') {
+            transformed.hosts = config.hosts.split('\n');
           }
 
-          transformed.netbios = transformed.service_announcement.netbios;
-          transformed.mdns = transformed.service_announcement.mdns;
-          transformed.wsd = transformed.service_announcement.wsd;
-
-          if (transformed.activity) {
-            if (transformed.activity.activities.length === 0) {
-              transformed.outbound_network_activity = transformed.activity.type;
-            } else if (transformed.activity.type === NetworkActivityType.Allow) {
-              transformed.outbound_network_activity = 'SPECIFIC';
-              transformed.outbound_network_value = transformed.activity.activities;
+          if (config.activity) {
+            if (config.activity.activities.length === 0) {
+              transformed.outbound_network_activity = config.activity.type;
+            } else if (config.activity.type === NetworkActivityType.Allow) {
+              transformed.outbound_network_activity = 'SPECIFIC' as NetworkActivityType;
+              transformed.outbound_network_value = config.activity.activities;
             }
           }
 
@@ -278,10 +285,7 @@ export class NetworkConfigurationComponent implements OnInit {
     const values = this.form.value;
     let activity: NetworkConfigurationActivity;
 
-    if (
-      values.outbound_network_activity === NetworkActivityType.Allow
-      || values.outbound_network_activity === NetworkActivityType.Deny
-    ) {
+    if ([NetworkActivityType.Allow, NetworkActivityType.Deny].includes(values.outbound_network_activity)) {
       activity = { type: values.outbound_network_activity, activities: [] };
     } else {
       activity = { type: NetworkActivityType.Allow, activities: values.outbound_network_value };