Support for managing GNS3 VM preferences enabled

src/app/components/preferences/gns3vm/gns3vm.component.html

@@ -10,19 +10,23 @@
                 Enable the GNS3 VM
             </mat-checkbox>
             <mat-form-field class="select">
-                <mat-select [ngModelOptions]="{standalone: true}" placeholder="Virtualization engine" [(ngModel)]="gns3vm.engine">
+                <mat-select (selectionChange)="changeVmEngine($event)" [ngModelOptions]="{standalone: true}" placeholder="Virtualization engine" [(ngModel)]="gns3vm.engine">
                     <mat-option *ngFor="let engine of vmEngines" [value]="engine.engine_id">
                         {{engine.name}}
                     </mat-option>
                 </mat-select>
             </mat-form-field>
-            <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="gns3vm.headless">
+            <mat-form-field class="select">
+                <mat-select [ngModelOptions]="{standalone: true}" placeholder="VM name" [(ngModel)]="gns3vm.vmname">
+                    <mat-option *ngFor="let vm of vms" [value]="vm.vmname">
+                        {{vm.vmname}}
+                    </mat-option>
+                </mat-select>
+            </mat-form-field>
+            <mat-checkbox *ngIf="gns3vm.engine === 'virtualbox' || gns3vm.engine === 'vmware'" [ngModelOptions]="{standalone: true}" [(ngModel)]="gns3vm.headless">
                 Run the VM in headless mode
             </mat-checkbox>
-            <form [formGroup]="vmForm">
+            <form *ngIf="gns3vm.engine !== 'remote'" [formGroup]="vmForm">
-                <mat-form-field class="form-field">
-                    <input matInput formControlName="vmname" type="text" placeholder="VM name">
-                </mat-form-field>
                 <mat-form-field class="form-field">
                     <input matInput formControlName="ram" type="number" placeholder="RAM">
                 </mat-form-field>
@@ -30,10 +34,10 @@
                     <input matInput formControlName="vcpus" type="number" placeholder="vCPUs">
                 </mat-form-field>
             </form>
-            <mat-radio-group aria-label="Actions when closing GNS3" class="radio-selection">
+            <mat-radio-group *ngIf="gns3vm.engine !== 'remote'" [(ngModel)]="gns3vm.when_exit"  aria-label="Actions when closing GNS3" class="radio-selection">
-                <mat-radio-button value="1" (click)="setCloseAction('keep')" checked>keep the GNS3 VM running</mat-radio-button>
+                <mat-radio-button value="keep" (click)="setCloseAction('keep')">keep the GNS3 VM running</mat-radio-button>
-                <mat-radio-button value="2" (click)="setCloseAction('suspend')">suspend the GNS3 VM</mat-radio-button>
+                <mat-radio-button value="suspend" (click)="setCloseAction('suspend')">suspend the GNS3 VM</mat-radio-button>
-                <mat-radio-button value="3" (click)="setCloseAction('stop')">stop the GNS3 VM</mat-radio-button>
+                <mat-radio-button value="stop" (click)="setCloseAction('stop')">stop the GNS3 VM</mat-radio-button>
             </mat-radio-group>
         </mat-card>
         <div class="buttons-bar">

src/app/components/preferences/gns3vm/gns3vm.component.scss

@@ -5,3 +5,8 @@
 .select {
     width: 100%;
 }
+
+.radio-selection {
+    display: flex;
+    justify-content: space-between;
+}

src/app/components/preferences/gns3vm/gns3vm.component.ts

@@ -7,6 +7,7 @@ import { ServerService } from '../../../services/server.service';
 import { Gns3vmEngine } from '../../../models/gns3vm/gns3vmEngine';
 import { FormBuilder, FormControl, Validators, FormGroup } from '@angular/forms';
 import { ToasterService } from '../../../services/toaster.service';
+import { VM } from '../../../models/gns3vm/vm';
 
 
 @Component({
@@ -18,6 +19,7 @@ export class Gns3vmComponent implements OnInit {
     public server: Server;
     public gns3vm: Gns3vm;
     public vmEngines: Gns3vmEngine[];
+    public vms: VM[] = [];
     public vmForm: FormGroup;
 
     constructor(
@@ -29,7 +31,6 @@ export class Gns3vmComponent implements OnInit {
         private toasterService: ToasterService
     ) {
         this.vmForm = this.formBuilder.group({
-            vmname: new FormControl(null, [Validators.required]),
             ram: new FormControl(null, [Validators.required]),
             vcpus: new FormControl(null, [Validators.required])
         });
@@ -41,12 +42,14 @@ export class Gns3vmComponent implements OnInit {
             this.server = server;
             this.gns3vmService.getGns3vm(this.server).subscribe((vm: Gns3vm) => {
                 this.gns3vm = vm;
-                this.vmForm.controls['vmname'].setValue(this.gns3vm.vmname);
                 this.vmForm.controls['ram'].setValue(this.gns3vm.ram);
                 this.vmForm.controls['vcpus'].setValue(this.gns3vm.vcpus);
                 this.gns3vmService.getGns3vmEngines(this.server).subscribe((vmEngines: Gns3vmEngine[]) => {
                     this.vmEngines = vmEngines;
                 });
+                this.gns3vmService.getVms(this.server, this.gns3vm.engine).subscribe((vms: VM[]) => {
+                    this.vms = vms;
+                });
             });
         });
     }
@@ -59,15 +62,24 @@ export class Gns3vmComponent implements OnInit {
         this.gns3vm.when_exit = action;
     }
 
+    changeVmEngine(event) {
+        this.gns3vmService.getVms(this.server, event.value).subscribe(
+            (vms: VM[]) => {
+                this.vms = vms;
+            },
+            error => {}
+        );
+    }
+
     save() {
-        if (this.vmForm.valid) {
+        if ((this.vmForm.valid && this.gns3vm.vmname) || (this.gns3vm.engine==='remote' && this.gns3vm.vmname)) {
-            this.gns3vm.vmname = this.vmForm.get('vmname').value;
             this.gns3vm.ram = this.vmForm.get('ram').value;
             this.gns3vm.vcpus= this.vmForm.get('vcpus').value;
 
             this.gns3vmService.updateGns3vm(this.server, this.gns3vm).subscribe(() => {
                 this.toasterService.success('GNS3 VM updated.');
             });
+            this.goBack();
         } else {
             this.toasterService.error('Fill all required fields with correct values.');
         }

src/app/services/gns3vm.service.ts

@@ -22,7 +22,7 @@ export class Gns3vmService {
         return this.httpServer.get<Gns3vmEngine[]>(server, '/gns3vm/engines') as Observable<Gns3vmEngine[]>;
     }
 
-    getVms(server: Server, engine: Gns3vmEngine): Observable<VM[]> {
+    getVms(server: Server, engine: string): Observable<VM[]> {
-        return this.httpServer.get<VM[]>(server, `/gns3vm/engines/${engine.engine_id}/vms`)
+        return this.httpServer.get<VM[]>(server, `/gns3vm/engines/${engine}/vms`)
     }
 }