Support for virtualbox

src/app/app.module.ts

@@ -216,6 +216,8 @@ import { ConfiguratorDialogVpcsComponent } from './components/project-map/node-e
 import { ConfiguratorDialogEthernetHubComponent } from './components/project-map/node-editors/configurator/ethernet_hub/configurator-ethernet-hub.component';
 import { ConfiguratorDialogEthernetSwitchComponent } from './components/project-map/node-editors/configurator/ethernet-switch/configurator-ethernet-switch.component';
 import { PortsComponent } from './components/preferences/common/ports/ports.component';
+import { ConfiguratorDialogSwitchComponent } from './components/project-map/node-editors/configurator/switch/configurator-switch.component';
+import { ConfiguratorDialogVirtualBoxComponent } from './components/project-map/node-editors/configurator/virtualbox/configurator-virtualbox.component';
 
 if (environment.production) {
   Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
@@ -359,7 +361,9 @@ if (environment.production) {
     ConfiguratorDialogVpcsComponent,
     ConfiguratorDialogEthernetHubComponent,
     ConfiguratorDialogEthernetSwitchComponent,
-    PortsComponent
+    PortsComponent,
+    ConfiguratorDialogSwitchComponent,
+    ConfiguratorDialogVirtualBoxComponent
   ],
   imports: [
     BrowserModule,
@@ -462,7 +466,9 @@ if (environment.production) {
     EditProjectDialogComponent,
     ConfiguratorDialogVpcsComponent,
     ConfiguratorDialogEthernetHubComponent,
-    ConfiguratorDialogEthernetSwitchComponent
+    ConfiguratorDialogEthernetSwitchComponent,
+    ConfiguratorDialogSwitchComponent,
+    ConfiguratorDialogVirtualBoxComponent
   ],
   bootstrap: [AppComponent]
 })

src/app/cartography/models/node.ts

@@ -8,6 +8,7 @@ export class PortsMapping {
 
 export class Properties {
   ports_mapping: PortsMapping[];
+  mappings: any;
 }
 
 export class Node {

src/app/components/project-map/context-menu/actions/config-action/config-action.component.ts

@@ -5,6 +5,8 @@ import { MatDialog, MatDialogRef } from '@angular/material';
 import { ConfiguratorDialogVpcsComponent } from '../../../node-editors/configurator/vpcs/configurator-vpcs.component';
 import { ConfiguratorDialogEthernetHubComponent } from '../../../node-editors/configurator/ethernet_hub/configurator-ethernet-hub.component';
 import { ConfiguratorDialogEthernetSwitchComponent } from '../../../node-editors/configurator/ethernet-switch/configurator-ethernet-switch.component';
+import { ConfiguratorDialogSwitchComponent } from '../../../node-editors/configurator/switch/configurator-switch.component';
+import { ConfiguratorDialogVirtualBoxComponent } from '../../../node-editors/configurator/virtualbox/configurator-virtualbox.component';
 
 
 @Component({
@@ -38,7 +40,7 @@ export class ConfigActionComponent {
     } else if (this.node.node_type === 'qemu') {
 
     } else if (this.node.node_type === 'virtualbox') {
-
+      this.dialogRef = this.dialog.open(ConfiguratorDialogVirtualBoxComponent, this.conf);
     } else if (this.node.node_type === 'vmware') {
 
     } else if (this.node.node_type === 'docker') {
@@ -46,9 +48,9 @@ export class ConfigActionComponent {
     } else if (this.node.node_type === 'nat') {
 
     } else if (this.node.node_type === 'frame_relay_switch') {
-
+      this.dialogRef = this.dialog.open(ConfiguratorDialogSwitchComponent, this.conf);
     } else if (this.node.node_type === 'atm_switch') {
-
+      this.dialogRef = this.dialog.open(ConfiguratorDialogSwitchComponent, this.conf);
     } else if (this.node.node_type === 'traceng') {
 
     }

src/app/components/project-map/node-editors/configurator/switch/configurator-switch.component.html

@@ -0,0 +1,71 @@
+<h1 mat-dialog-title>Configurator for node {{name}}</h1>
+
+<div class="modal-form-container">
+    <div class="content">
+        <div class="default-content">
+            <mat-card>
+                <!-- <table class="table" mat-table [dataSource]="ethernetPorts">
+                    <ng-container matColumnDef="port_number">
+                        <th mat-header-cell *matHeaderCellDef> Port number </th>
+                        <td mat-cell *matCellDef="let element"> {{element.port_number}} </td>
+                    </ng-container>
+                
+                    <ng-container matColumnDef="vlan">
+                        <th mat-header-cell *matHeaderCellDef> VLAN </th>
+                        <td mat-cell *matCellDef="let element"> {{element.vlan}} </td>
+                    </ng-container>
+                
+                    <ng-container matColumnDef="action">
+                        <th mat-header-cell *matHeaderCellDef> Actions </th>
+                        <td mat-cell *matCellDef="let element">
+                            <button mat-icon-button matTooltip="Delete port" (click)="delete(element)">
+                                <mat-icon aria-label="Delete port">delete</mat-icon>
+                            </button>
+                        </td>
+                    </ng-container>
+                    
+                    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+                </table><br/> -->
+                <!-- <mat-form-field class="form-field">
+                    <input 
+                        matInput type="number" 
+                        [(ngModel)]="newPort.port_number" 
+                        placeholder="Port">
+                </mat-form-field>
+                <mat-form-field class="form-field">
+                    <input 
+                        matInput type="number" 
+                        [(ngModel)]="newPort.vlan" 
+                        placeholder="VLAN">
+                </mat-form-field>
+                <mat-form-field class="select">
+                    <mat-select 
+                        placeholder="Type" 
+                        [ngModelOptions]="{standalone: true}" 
+                        [(ngModel)]="newPort.type">
+                        <mat-option *ngFor="let type of portTypes" [value]="type">
+                            {{type}}
+                        </mat-option>
+                    </mat-select>
+                </mat-form-field>
+                <mat-form-field class="select">
+                    <mat-select 
+                        placeholder="EtherType" 
+                        [ngModelOptions]="{standalone: true}" 
+                        [(ngModel)]="newPort.ethertype">
+                            <mat-option *ngFor="let type of etherTypes" [value]="type">
+                                {{type}}
+                            </mat-option>
+                    </mat-select>
+                </mat-form-field>
+                <button mat-button class="form-field" (click)="onAdd()">Add</button> -->
+            </mat-card>
+        </div>
+    </div>
+</div>
+
+<div mat-dialog-actions>
+  <button mat-button (click)="onCancelClick()" color="accent">Cancel</button>
+  <button mat-button (click)="onSaveClick()" tabindex="2" mat-raised-button color="primary">Apply</button>
+</div>

src/app/components/project-map/node-editors/configurator/switch/configurator-switch.component.ts

@@ -0,0 +1,54 @@
+import { Component, OnInit, Input } from "@angular/core";
+import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
+import { Node } from '../../../../../cartography/models/node';
+import { Server } from '../../../../../models/server';
+import { NodeService } from '../../../../../services/node.service';
+import { ToasterService } from '../../../../../services/toaster.service';
+import { MatDialogRef } from '@angular/material';
+
+
+@Component({
+    selector: 'app-configurator-switch',
+    templateUrl: './configurator-switch.component.html',
+    styleUrls: ['../configurator.component.scss']
+})
+export class ConfiguratorDialogSwitchComponent implements OnInit {
+    server: Server;
+    node: Node;
+    name: string;
+    inputForm: FormGroup;
+    consoleTypes: string[] = [];
+
+    constructor(
+        public dialogRef: MatDialogRef<ConfiguratorDialogSwitchComponent>,
+        public nodeService: NodeService,
+        private toasterService: ToasterService,
+        private formBuilder: FormBuilder
+    ) {
+        this.inputForm = this.formBuilder.group({
+            name: new FormControl('', Validators.required)
+        });
+    }
+
+    ngOnInit() {
+        this.nodeService.getNode(this.server, this.node).subscribe((node: Node) => {
+            this.node = node;
+            this.name = node.name;
+        })
+    }
+
+    onSaveClick() {
+        if (this.inputForm.valid) {
+            this.nodeService.updateNode(this.server, this.node).subscribe(() => {
+                this.toasterService.success(`Node ${this.node.name} updated.`);
+                this.onCancelClick();
+            });
+        } else {
+            this.toasterService.error(`Fill all required fields.`);
+        }
+    }
+
+    onCancelClick() {
+        this.dialogRef.close();
+    }
+}

src/app/components/project-map/node-editors/configurator/virtualbox/configurator-virtualbox.component.html

@@ -0,0 +1,70 @@
+<h1 mat-dialog-title>Configurator for node {{name}}</h1>
+
+<div class="modal-form-container">
+    <div class="content">
+        <div class="default-content">
+            <mat-card class="matCard">
+                <mat-tab-group>
+                    <mat-tab label="General settings">
+                        <form [formGroup]="generalSettingsForm">
+                            <mat-form-field class="form-field">
+                                <input matInput formControlName="name" type="text" [(ngModel)]="node.name" placeholder="Name">
+                            </mat-form-field>
+                            <mat-form-field class="select">
+                                <mat-select [ngModelOptions]="{standalone: true}" placeholder="Console type" [(ngModel)]="node.console_type">
+                                    <mat-option *ngFor="let type of consoleTypes" [value]="type">
+                                        {{type}}
+                                    </mat-option>
+                                </mat-select>
+                            </mat-form-field>
+                            <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="node.console_auto_start">
+                                Auto start console
+                            </mat-checkbox>
+                            <mat-form-field class="form-field">
+                                <input matInput formControlName="ram" type="number" [(ngModel)]="node.ram" placeholder="RAM">
+                            </mat-form-field>
+                            <mat-form-field class="form-field">
+                                <mat-select [ngModelOptions]="{standalone: true}" placeholder="On close" [(ngModel)]="node.on_close">
+                                    <mat-option *ngFor="let option of onCloseOptions" [value]="option[1]">
+                                        {{option[0]}}
+                                    </mat-option>
+                                </mat-select>
+                            </mat-form-field>
+                        </form>
+                        <mat-checkbox [(ngModel)]="node.headless">
+                            Start VM in headless mode
+                        </mat-checkbox>
+                    </mat-tab>
+                    <mat-tab label="Network">
+                        <form [formGroup]="networkForm">
+                            <mat-form-field class="form-field">
+                                <input formControlName="adapters" matInput type="number" [(ngModel)]="node.adapters" placeholder="Adapters">
+                            </mat-form-field>
+                            <mat-form-field class="form-field">
+                                <mat-select [ngModelOptions]="{standalone: true}" placeholder="Type" [(ngModel)]="node.adapter_type">
+                                    <mat-option *ngFor="let type of networkTypes" [value]="type">
+                                        {{type}}
+                                    </mat-option>
+                                </mat-select>
+                            </mat-form-field>
+                        </form>
+                        <button mat-button class="configButton" (click)="setCustomAdaptersConfiguratorState(true)">Configure custom adapters</button><br/>
+                        <mat-checkbox [(ngModel)]="node.use_any_adapter">
+                            Allow GNS3 to use any configured VirtualBox adapter
+                        </mat-checkbox>
+                    </mat-tab>
+                    <mat-tab label="Usage">
+                        <mat-form-field class="form-field">
+                            <textarea matInput type="text" [(ngModel)]="node.usage"></textarea>
+                        </mat-form-field>
+                    </mat-tab>
+                </mat-tab-group>
+            </mat-card>
+        </div>
+    </div>
+</div>
+
+<div mat-dialog-actions>
+  <button mat-button (click)="onCancelClick()" color="accent">Cancel</button>
+  <button mat-button (click)="onSaveClick()" tabindex="2" mat-raised-button color="primary">Apply</button>
+</div>

src/app/components/project-map/node-editors/configurator/virtualbox/configurator-virtualbox.component.ts

@@ -0,0 +1,71 @@
+import { Component, OnInit, Input } from "@angular/core";
+import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
+import { Node } from '../../../../../cartography/models/node';
+import { Server } from '../../../../../models/server';
+import { NodeService } from '../../../../../services/node.service';
+import { ToasterService } from '../../../../../services/toaster.service';
+import { MatDialogRef } from '@angular/material';
+import { VirtualBoxConfigurationService } from '../../../../../services/virtual-box-configuration.service';
+
+
+@Component({
+    selector: 'app-configurator-virtualbox',
+    templateUrl: './configurator-virtualbox.component.html',
+    styleUrls: ['../configurator.component.scss']
+})
+export class ConfiguratorDialogVirtualBoxComponent implements OnInit {
+    server: Server;
+    node: Node;
+    name: string;
+    generalSettingsForm: FormGroup;
+    networkForm: FormGroup;
+    consoleTypes: string[] = [];
+    onCloseOptions = [];
+    networkTypes = [];
+
+    constructor(
+        public dialogRef: MatDialogRef<ConfiguratorDialogVirtualBoxComponent>,
+        public nodeService: NodeService,
+        private toasterService: ToasterService,
+        private formBuilder: FormBuilder,
+        private virtualBoxConfigurationService: VirtualBoxConfigurationService
+    ) {
+        this.generalSettingsForm = this.formBuilder.group({
+            name: new FormControl('', Validators.required),
+            ram: new FormControl('', Validators.required)
+        });
+
+        this.networkForm = this.formBuilder.group({
+            adapters: new FormControl('', Validators.required)
+        });
+    }
+
+    ngOnInit() {
+        this.nodeService.getNode(this.server, this.node).subscribe((node: Node) => {
+            this.node = node;
+            this.name = node.name;
+            this.getConfiguration();
+        })
+    }
+
+    getConfiguration() {
+        this.consoleTypes = this.virtualBoxConfigurationService.getConsoleTypes();
+        this.onCloseOptions = this.virtualBoxConfigurationService.getOnCloseoptions();
+        this.networkTypes = this.virtualBoxConfigurationService.getNetworkTypes();
+    }
+
+    onSaveClick() {
+        if (this.generalSettingsForm.valid) {
+            this.nodeService.updateNode(this.server, this.node).subscribe(() => {
+                this.toasterService.success(`Node ${this.node.name} updated.`);
+                this.onCancelClick();
+            });
+        } else {
+            this.toasterService.error(`Fill all required fields.`);
+        }
+    }
+
+    onCancelClick() {
+        this.dialogRef.close();
+    }
+}