Merge pull request #610 from GNS3/GNS3-VM-preferences

Support for GNS3 VM preferences

src/app/app-routing.module.ts

@@ -58,6 +58,7 @@ import { TracengTemplatesComponent } from './components/preferences/traceng/trac
 import { AddTracengTemplateComponent } from './components/preferences/traceng/add-traceng/add-traceng-template.component';
 import { TracengTemplateDetailsComponent } from './components/preferences/traceng/traceng-template-details/traceng-template-details.component';
 import { PageNotFoundComponent } from './components/page-not-found/page-not-found.component';
+import { Gns3vmComponent } from './components/preferences/gns3vm/gns3vm.component';
 
 const routes: Routes = [
   {
@@ -74,6 +75,7 @@ const routes: Routes = [
       { path: 'installed-software', component: InstalledSoftwareComponent },
       { path: 'server/:server_id/project/:project_id/snapshots', component: ListOfSnapshotsComponent },
       { path: 'server/:server_id/preferences', component: PreferencesComponent },
+      { path: 'server/:server_id/preferences/gns3vm', component: Gns3vmComponent },
       // { path: 'server/:server_id/preferences/general', component: GeneralPreferencesComponent },
       { path: 'server/:server_id/preferences/builtin', component: BuiltInPreferencesComponent},
 

src/app/app.module.ts

@@ -253,6 +253,8 @@ import { TemplateFilter } from './filters/templateFilter.pipe';
 import { NotificationService } from './services/notification.service';
 import { DeviceDetectorModule } from 'ngx-device-detector';
 import { ConfigDialogComponent } from './components/project-map/context-menu/dialogs/config-dialog/config-dialog.component';
+import { Gns3vmComponent } from './components/preferences/gns3vm/gns3vm.component';
+import { Gns3vmService } from './services/gns3vm.service';
 
 if (environment.production) {
   Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
@@ -426,7 +428,8 @@ if (environment.production) {
     AlignHorizontallyActionComponent,
     AlignVerticallyActionComponent,
     ConfirmationBottomSheetComponent,
-    ConfigDialogComponent
+    ConfigDialogComponent,
+    Gns3vmComponent
   ],
   imports: [
     BrowserModule,
@@ -512,7 +515,8 @@ if (environment.production) {
     ComputeService,
     TracengService,
     PacketCaptureService,
-    NotificationService
+    NotificationService,
+    Gns3vmService
   ],
   entryComponents: [
     AddServerDialogComponent,

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

@@ -0,0 +1,48 @@
+<div class="content">
+    <div class="default-header">
+        <div class="row">
+            <h1 class="col">GNS3 VM preferences</h1>
+        </div>
+    </div>
+    <div class="default-content">
+        <mat-card class="matCard" *ngIf="gns3vm">
+            <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="gns3vm.enable">
+                Enable the GNS3 VM
+            </mat-checkbox>
+            <mat-form-field class="select">
+                <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-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 *ngIf="gns3vm.engine !== 'remote'" [formGroup]="vmForm">
+                <mat-form-field class="form-field">
+                    <input matInput formControlName="ram" type="number" placeholder="RAM">
+                </mat-form-field>
+                <mat-form-field class="form-field">
+                    <input matInput formControlName="vcpus" type="number" placeholder="vCPUs">
+                </mat-form-field>
+            </form>
+            <mat-radio-group *ngIf="gns3vm.engine !== 'remote'" [(ngModel)]="gns3vm.when_exit"  aria-label="Actions when closing GNS3" class="radio-selection">
+                <mat-radio-button value="keep" (click)="setCloseAction('keep')">keep the GNS3 VM running</mat-radio-button>
+                <mat-radio-button value="suspend" (click)="setCloseAction('suspend')">suspend 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">
+            <button mat-button class="cancel-button" (click)="goBack()">Cancel</button>
+            <button mat-raised-button color="primary" (click)="save()">Save</button>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,12 @@
+.form-field {
+    width: 100%;
+}
+
+.select {
+    width: 100%;
+}
+
+.radio-selection {
+    display: flex;
+    justify-content: space-between;
+}

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

@@ -0,0 +1,87 @@
+import { Component, OnInit } from "@angular/core";
+import { ActivatedRoute, Router } from '@angular/router';
+import { Gns3vmService } from '../../../services/gns3vm.service';
+import { Gns3vm } from '../../../models/gns3vm/gns3vm';
+import { Server } from '../../../models/server';
+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({
+    selector: 'app-gns3vm',
+    templateUrl: './gns3vm.component.html',
+    styleUrls: ['./gns3vm.component.scss']
+})
+export class Gns3vmComponent implements OnInit {
+    public server: Server;
+    public gns3vm: Gns3vm;
+    public vmEngines: Gns3vmEngine[];
+    public vms: VM[] = [];
+    public vmForm: FormGroup;
+
+    constructor(
+        private route: ActivatedRoute,
+        private serverService: ServerService,
+        private gns3vmService: Gns3vmService,
+        private router: Router,
+        private formBuilder: FormBuilder,
+        private toasterService: ToasterService
+    ) {
+        this.vmForm = this.formBuilder.group({
+            ram: new FormControl(null, [Validators.required]),
+            vcpus: new FormControl(null, [Validators.required])
+        });
+    }
+
+    ngOnInit() {
+        const server_id = this.route.snapshot.paramMap.get("server_id");
+        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
+            this.server = server;
+            this.gns3vmService.getGns3vm(this.server).subscribe((vm: Gns3vm) => {
+                this.gns3vm = vm;
+                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;
+                });
+            });
+        });
+    }
+
+    goBack() {
+        this.router.navigate(['/server', this.server.id, 'preferences']);
+    }
+
+    setCloseAction(action: string) {
+        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 && this.gns3vm.vmname) || (this.gns3vm.engine==='remote' && this.gns3vm.vmname)) {
+            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/components/preferences/preferences.component.html

@@ -7,6 +7,9 @@
     <div class="default-content">
         <div class="listcontainer mat-elevation-z8">
             <mat-nav-list>
+                <mat-list-item routerLink="/server/{{serverId}}/preferences/gns3vm">
+                    GNS3 VM
+                </mat-list-item>
                 <mat-list-item routerLink="/server/{{serverId}}/preferences/builtin">
                     Built-in
                 </mat-list-item>

src/app/models/gns3vm/gns3vm.ts

@@ -0,0 +1,9 @@
+export interface Gns3vm {
+    enable: boolean;
+    engine: string;
+    headless: boolean;
+    ram: number;
+    vcpus: number;
+    vmname: string;
+    when_exit: string;
+}

src/app/models/gns3vm/gns3vmEngine.ts

@@ -0,0 +1,8 @@
+export interface Gns3vmEngine {
+    description: string;
+    engine_id: string;
+    name: string;
+    support_headless: boolean;
+    support_ram: boolean;
+    support_when_exit: boolean;
+}

src/app/models/gns3vm/vm.ts

@@ -0,0 +1,3 @@
+export interface VM {
+    vmname: string;
+}

src/app/services/gns3vm.service.ts

@@ -0,0 +1,28 @@
+import { Injectable } from '@angular/core';
+import { HttpServer } from './http-server.service';
+import { Server } from '../models/server';
+import { Observable } from 'rxjs';
+import { Gns3vm } from '../models/gns3vm/gns3vm';
+import { Gns3vmEngine } from '../models/gns3vm/gns3vmEngine';
+import { VM } from '../models/gns3vm/vm';
+
+@Injectable()
+export class Gns3vmService {
+    constructor(private httpServer: HttpServer) {}
+
+    getGns3vm(server: Server): Observable<Gns3vm> {
+        return this.httpServer.get<Gns3vm>(server, '/gns3vm') as Observable<Gns3vm>;
+    }
+
+    updateGns3vm(server: Server, gns3vm: Gns3vm): Observable<Gns3vm> {
+        return this.httpServer.put<Gns3vm>(server, `/gns3vm`, gns3vm) as Observable<Gns3vm>;
+    }
+
+    getGns3vmEngines(server: Server): Observable<Gns3vmEngine[]> {
+        return this.httpServer.get<Gns3vmEngine[]>(server, '/gns3vm/engines') as Observable<Gns3vmEngine[]>;
+    }
+
+    getVms(server: Server, engine: string): Observable<VM[]> {
+        return this.httpServer.get<VM[]>(server, `/gns3vm/engines/${engine}/vms`)
+    }
+}