NAS-132334 / 25.04 / Add environment variables to containers (#11015)

* NAS-132334: Add environment variables to containers * NAS-132334: Add environment variables to containers * NAS-132334: PR Update * NAS-132334: PR update * NAS-132334: PR update * NAS-132334: PR update
truenas · Nov 15, 2024 · 33fd4dc · 33fd4dc
1 parent 92ec97a
commit 33fd4dc
Show file tree

Hide file tree

Showing 102 changed files with 346 additions and 25 deletions.
diff --git a/src/app/interfaces/virtualization.interface.ts b/src/app/interfaces/virtualization.interface.ts
@@ -1,3 +1,4 @@
+import { FormControl, FormGroup } from '@angular/forms';
 import { NetworkInterfaceAliasType } from 'app/enums/network-interface.enum';
 import {
   VirtualizationDeviceType,
@@ -178,3 +179,8 @@ export interface AvailableUsb {
   product: string;
   manufacturer: string;
 }
+
+export type InstanceEnvVariablesFormGroup = FormGroup<{
+  name: FormControl<string>;
+  value: FormControl<string>;
+}>;
diff --git a/src/app/modules/forms/ix-forms/components/ix-list/ix-list.component.scss b/src/app/modules/forms/ix-forms/components/ix-list/ix-list.component.scss
@@ -1,6 +1,6 @@
 :host {
+  color: var(--fg1);
   display: block;
-
   margin-bottom: 12px;
   margin-top: 18px;
 }

diff --git a/.../virtualization/components/all-instances/instance-details/instance-details.component.html b/.../virtualization/components/all-instances/instance-details/instance-details.component.html
@@ -20,11 +20,8 @@ <h3 class="title">
 <div class="cards">
   <div class="scroll-window">
     <ix-instance-general-info [instance]="instance()"></ix-instance-general-info>
-
     <ix-instance-devices></ix-instance-devices>
-
     <ix-instance-disks></ix-instance-disks>
-
     <ix-instance-proxies></ix-instance-proxies>
   </div>
 </div>
diff --git a/...es/virtualization/components/all-instances/instance-details/instance-details.component.ts b/...es/virtualization/components/all-instances/instance-details/instance-details.component.ts
@@ -4,7 +4,6 @@ import {
 import { TranslateModule } from '@ngx-translate/core';
 import { VirtualizationInstance } from 'app/interfaces/virtualization.interface';
 import { MobileBackButtonComponent } from 'app/modules/buttons/mobile-back-button/mobile-back-button.component';
-import { DatasetIconComponent } from 'app/pages/datasets/components/dataset-icon/dataset-icon.component';
 import {
   InstanceDevicesComponent,
 } from 'app/pages/virtualization/components/all-instances/instance-details/instance-devices/instance-devices.component';
@@ -31,7 +30,6 @@ import { VirtualizationInstancesStore } from 'app/pages/virtualization/stores/vi
     InstanceGeneralInfoComponent,
     InstanceProxiesComponent,
     InstanceDisksComponent,
-    DatasetIconComponent,
     MobileBackButtonComponent,
   ],
 })

diff --git a/.../components/all-instances/instance-details/instance-devices/instance-devices.component.ts b/.../components/all-instances/instance-details/instance-devices/instance-devices.component.ts
@@ -1,7 +1,6 @@
 import {
   ChangeDetectionStrategy, Component, computed,
 } from '@angular/core';
-import { MatIconButton } from '@angular/material/button';
 import { MatCard, MatCardContent, MatCardHeader } from '@angular/material/card';
 import { UntilDestroy } from '@ngneat/until-destroy';
 import { TranslateModule } from '@ngx-translate/core';
@@ -10,8 +9,6 @@ import { VirtualizationDeviceType, virtualizationDeviceTypeLabels } from 'app/en
 import {
   VirtualizationDevice,
 } from 'app/interfaces/virtualization.interface';
-import { IxIconComponent } from 'app/modules/ix-icon/ix-icon.component';
-import { TestDirective } from 'app/modules/test-id/test.directive';
 import {
   DeleteDeviceButtonComponent,
 } from 'app/pages/virtualization/components/common/delete-device-button/delete-device-button.component';
@@ -30,9 +27,6 @@ import { VirtualizationInstancesStore } from 'app/pages/virtualization/stores/vi
     TranslateModule,
     MatCardContent,
     NgxSkeletonLoaderModule,
-    MatIconButton,
-    TestDirective,
-    IxIconComponent,
     DeleteDeviceButtonComponent,
   ],
 })

diff --git a/...all-instances/instance-details/instance-general-info/instance-general-info.component.html b/...all-instances/instance-details/instance-general-info/instance-general-info.component.html
@@ -23,6 +23,17 @@ <h3 mat-card-title>
       <p>{{ 'Base Image' | translate }}: {{ instance.image.description || '-' }}</p>
       <p>{{ 'CPU' | translate }}: {{ instance.cpu || '-' }}</p>
       <p>{{ 'Memory' | translate }}: {{ formatter.memorySizeFormatting(instance.memory) || '-' }}</p>
+
+      @if (instance.environment && (instance.environment | keyvalue)?.length) {
+        <p>{{ 'Environment' | translate }}:</p>
+        <ul>
+          @for (env of (instance.environment | keyvalue); track env) {
+            <li>
+              <strong>{{ env.key }}:</strong> {{ env.value }}
+            </li>
+          }
+        </ul>
+      }
     }
   </mat-card-content>
 

diff --git a/...-instances/instance-details/instance-general-info/instance-general-info.component.spec.ts b/...-instances/instance-details/instance-general-info/instance-general-info.component.spec.ts
@@ -32,7 +32,11 @@ const demoInstance = {
     release: '8',
   },
   memory: 131072000,
-} as VirtualizationInstance;
+  environment: {
+    TEST_ENV: 'value1',
+    SAMPLE_ENV: 'value2',
+  },
+} as unknown as VirtualizationInstance;
 
 describe('InstanceGeneralInfoComponent', () => {
   let spectator: Spectator<InstanceGeneralInfoComponent>;
@@ -79,12 +83,20 @@ describe('InstanceGeneralInfoComponent', () => {
 
   it('renders details in card', () => {
     const chartExtra = spectator.query('mat-card-content').querySelectorAll('p');
-    expect(chartExtra).toHaveLength(5);
+    expect(chartExtra).toHaveLength(6);
     expect(chartExtra[0]).toHaveText('Status: Running');
     expect(chartExtra[1]).toHaveText('Autostart: Yes');
     expect(chartExtra[2]).toHaveText('Base Image: Almalinux 8 amd64 (20241030_23:38)');
     expect(chartExtra[3]).toHaveText('CPU: 525');
     expect(chartExtra[4]).toHaveText('Memory: 125 MiB');
+    expect(chartExtra[5]).toHaveText('Environment:');
+  });
+
+  it('renders environment variables', () => {
+    const envContainer = spectator.query('mat-card-content').querySelectorAll('ul li');
+    expect(envContainer).toHaveLength(2);
+    expect(envContainer[0]).toHaveText('SAMPLE_ENV: value2');
+    expect(envContainer[1]).toHaveText('TEST_ENV: value1');
   });
 
   it('deletes instance when "Delete" button is pressed', async () => {

diff --git a/...s/all-instances/instance-details/instance-general-info/instance-general-info.component.ts b/...s/all-instances/instance-details/instance-general-info/instance-general-info.component.ts
@@ -1,4 +1,4 @@
-import { TitleCasePipe } from '@angular/common';
+import { KeyValuePipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { MatButton } from '@angular/material/button';
 import {
@@ -40,8 +40,8 @@ import { SlideInService } from 'app/services/slide-in.service';
     TranslateModule,
     MatCardContent,
     YesNoPipe,
-    TitleCasePipe,
     RequiresRolesDirective,
+    KeyValuePipe,
     TestDirective,
     MapValuePipe,
   ],

diff --git a/src/app/pages/virtualization/components/instance-edit-form/instance-edit-form.component.html b/src/app/pages/virtualization/components/instance-edit-form/instance-edit-form.component.html
@@ -25,6 +25,37 @@
       ></ix-input>
     </ix-fieldset>
 
+    <ix-fieldset [title]="'Environment' | translate">
+      <ix-list
+        formArrayName="environmentVariables"
+        [empty]="form.controls.environmentVariables.controls.length === 0"
+        [label]="'Environment Variables' | translate"
+        (add)="addEnvironmentVariable()"
+      >
+        @for (envControl of form.controls.environmentVariables.controls; track envControl; let i = $index) {
+          <ix-list-item
+            [formGroupName]="i"
+            [label]="'Environment Variable' | translate"
+            (delete)="removeEnvironmentVariable(i)"
+          >
+            <div class="environment-variable">
+              <ix-input
+                formControlName="name"
+                [label]="'Name' | translate"
+                [required]="true"
+              ></ix-input>
+
+              <ix-input
+                formControlName="value"
+                [label]="'Value' | translate"
+                [required]="true"
+              ></ix-input>
+            </div>
+          </ix-list-item>
+        }
+      </ix-list>
+    </ix-fieldset>
+
     <div class="actions">
       <button
         mat-button

diff --git a/...p/pages/virtualization/components/instance-edit-form/instance-edit-form.component.spec.ts b/...p/pages/virtualization/components/instance-edit-form/instance-edit-form.component.spec.ts
@@ -35,6 +35,7 @@ describe('InstanceEditFormComponent', () => {
     autostart: false,
     cpu: '1-3',
     memory: 2 * GiB,
+    environment: null,
   } as VirtualizationInstance;
 
   const createComponent = createComponentFactory({
@@ -88,7 +89,7 @@ describe('InstanceEditFormComponent', () => {
       autostart: true,
       cpu: '2-5',
       memory: GiB,
-      environment: null,
+      environment: {},
     }]);
     expect(spectator.inject(DialogService).jobDialog).toHaveBeenCalled();
     expect(spectator.inject(SnackbarService).success).toHaveBeenCalled();

diff --git a/src/app/pages/virtualization/components/instance-edit-form/instance-edit-form.component.ts b/src/app/pages/virtualization/components/instance-edit-form/instance-edit-form.component.ts
@@ -2,20 +2,24 @@ import {
   ChangeDetectionStrategy, Component, Inject, signal,
 } from '@angular/core';
 import {
+  FormArray,
   FormBuilder, ReactiveFormsModule, Validators,
 } from '@angular/forms';
 import { MatButton } from '@angular/material/button';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { Role } from 'app/enums/role.enum';
 import {
+  InstanceEnvVariablesFormGroup,
   UpdateVirtualizationInstance,
   VirtualizationInstance,
 } from 'app/interfaces/virtualization.interface';
 import { DialogService } from 'app/modules/dialog/dialog.service';
 import { IxCheckboxComponent } from 'app/modules/forms/ix-forms/components/ix-checkbox/ix-checkbox.component';
 import { IxFieldsetComponent } from 'app/modules/forms/ix-forms/components/ix-fieldset/ix-fieldset.component';
 import { IxInputComponent } from 'app/modules/forms/ix-forms/components/ix-input/ix-input.component';
+import { IxListItemComponent } from 'app/modules/forms/ix-forms/components/ix-list/ix-list-item/ix-list-item.component';
+import { IxListComponent } from 'app/modules/forms/ix-forms/components/ix-list/ix-list.component';
 import { FormErrorHandlerService } from 'app/modules/forms/ix-forms/services/form-error-handler.service';
 import { IxFormatterService } from 'app/modules/forms/ix-forms/services/ix-formatter.service';
 import { cpuValidator } from 'app/modules/forms/ix-forms/validators/cpu-validation/cpu-validation';
@@ -39,7 +43,8 @@ import { ApiService } from 'app/services/api.service';
     MatButton,
     TestDirective,
     IxFieldsetComponent,
-
+    IxListComponent,
+    IxListItemComponent,
   ],
   templateUrl: './instance-edit-form.component.html',
   styleUrls: ['./instance-edit-form.component.scss'],
@@ -56,6 +61,7 @@ export class InstanceEditFormComponent {
     cpu: ['', [Validators.required, cpuValidator()]],
     autostart: [false],
     memory: [null as number, Validators.required],
+    environmentVariables: new FormArray<InstanceEnvVariablesFormGroup>([]),
   });
 
   constructor(
@@ -74,11 +80,14 @@ export class InstanceEditFormComponent {
       autostart: instance.autostart,
       memory: instance.memory,
     });
+
+    Object.keys(instance.environment || {}).forEach((key) => {
+      this.addEnvironmentVariable(key, instance.environment[key]);
+    });
   }
 
   protected onSubmit(): void {
     const payload = this.getSubmissionPayload();
-
     const job$ = this.ws.job('virt.instance.update', [this.editingInstanceId, payload]);
 
     this.dialogService.jobDialog(job$, {
@@ -97,14 +106,39 @@ export class InstanceEditFormComponent {
       });
   }
 
+  addEnvironmentVariable(name = '', value = ''): void {
+    const control = this.formBuilder.group({
+      name: [name, Validators.required],
+      value: [value, Validators.required],
+    });
+
+    this.form.controls.environmentVariables.push(control);
+  }
+
+  removeEnvironmentVariable(index: number): void {
+    this.form.controls.environmentVariables.removeAt(index);
+  }
+
   private getSubmissionPayload(): UpdateVirtualizationInstance {
     const values = this.form.value;
 
     return {
-      environment: null,
+      environment: this.environmentVariablesPayload,
       autostart: values.autostart,
       cpu: values.cpu,
       memory: values.memory,
     } as UpdateVirtualizationInstance;
   }
+
+  private get environmentVariablesPayload(): Record<string, string> {
+    return this.form.controls.environmentVariables.controls.reduce((env: Record<string, string>, control) => {
+      const name = control.get('name')?.value;
+      const value = control.get('value')?.value;
+
+      if (name && value) {
+        env[name] = value;
+      }
+      return env;
+    }, {});
+  }
 }
diff --git a/src/app/pages/virtualization/components/instance-wizard/instance-wizard.component.html b/src/app/pages/virtualization/components/instance-wizard/instance-wizard.component.html
@@ -53,6 +53,37 @@
       ></ix-input>
     </ix-fieldset>
 
+    <ix-fieldset [title]="'Environment' | translate">
+      <ix-list
+        formArrayName="environmentVariables"
+        [empty]="form.controls.environmentVariables.controls.length === 0"
+        [label]="'Environment Variables' | translate"
+        (add)="addEnvironmentVariable()"
+      >
+        @for (envControl of form.controls.environmentVariables.controls; track envControl; let i = $index) {
+          <ix-list-item
+            [formGroupName]="i"
+            [label]="'Environment Variable' | translate"
+            (delete)="removeEnvironmentVariable(i)"
+          >
+            <div class="environment-variable">
+              <ix-input
+                formControlName="name"
+                [label]="'Name' | translate"
+                [required]="true"
+              ></ix-input>
+
+              <ix-input
+                formControlName="value"
+                [label]="'Value' | translate"
+                [required]="true"
+              ></ix-input>
+            </div>
+          </ix-list-item>
+        }
+      </ix-list>
+    </ix-fieldset>
+
     <ix-fieldset [title]="'Disks' | translate">
       <ix-list
         formArrayName="disks"

diff --git a/src/app/pages/virtualization/components/instance-wizard/instance-wizard.component.spec.ts b/src/app/pages/virtualization/components/instance-wizard/instance-wizard.component.spec.ts
@@ -111,7 +111,7 @@ describe('InstanceWizardComponent', () => {
     });
   });
 
-  it('creates new instance with selected devices when form is submitted', async () => {
+  it('creates new instance when form is submitted', async () => {
     await form.fillForm({
       Name: 'new',
       Autostart: true,
@@ -171,6 +171,7 @@ describe('InstanceWizardComponent', () => {
       ],
       image: 'almalinux/8/cloud',
       memory: GiB,
+      environment: {},
     }]);
     expect(spectator.inject(DialogService).jobDialog).toHaveBeenCalled();
     expect(spectator.inject(SnackbarService).success).toHaveBeenCalled();