Component fpor udp tunnels added

src/app/app.module.ts

@@ -220,6 +220,8 @@ import { ConfiguratorDialogSwitchComponent } from './components/project-map/node
 import { ConfiguratorDialogVirtualBoxComponent } from './components/project-map/node-editors/configurator/virtualbox/configurator-virtualbox.component';
 import { CustomAdaptersTableComponent } from './components/preferences/common/custom-adapters-table/custom-adapters-table.component';
 import { ConfiguratorDialogQemuComponent } from './components/project-map/node-editors/configurator/qemu/configurator-qemu.component';
+import { ConfiguratorDialogCloudComponent } from './components/project-map/node-editors/configurator/cloud/configurator-cloud.component';
+import { UdpTunnelsComponent } from './components/preferences/common/udp-tunnels/udp-tunnels.component';
 
 if (environment.production) {
   Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
@@ -367,7 +369,9 @@ if (environment.production) {
     ConfiguratorDialogSwitchComponent,
     ConfiguratorDialogVirtualBoxComponent,
     CustomAdaptersTableComponent,
-    ConfiguratorDialogQemuComponent
+    ConfiguratorDialogQemuComponent,
+    ConfiguratorDialogCloudComponent,
+    UdpTunnelsComponent
   ],
   imports: [
     BrowserModule,
@@ -473,7 +477,8 @@ if (environment.production) {
     ConfiguratorDialogEthernetSwitchComponent,
     ConfiguratorDialogSwitchComponent,
     ConfiguratorDialogVirtualBoxComponent,
-    ConfiguratorDialogQemuComponent
+    ConfiguratorDialogQemuComponent,
+    ConfiguratorDialogCloudComponent
   ],
   bootstrap: [AppComponent]
 })

src/app/cartography/models/node.ts

@@ -4,7 +4,9 @@ import { CustomAdapter } from '../../models/qemu/qemu-custom-adapter';
 
 export class PortsMapping {
   name: string;
+  interface?: string;
   port_number: number;
+  type?: string;
 }
 
 export class Properties {

src/app/components/preferences/common/udp-tunnels/udp-tunnels.component.html

@@ -0,0 +1,59 @@
+<table *ngIf="dataSourceUdp.length" class="table" mat-table [dataSource]="dataSourceUdp">
+    <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef> Name </th>
+        <td mat-cell *matCellDef="let element"> {{element.name}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="rport">
+        <th mat-header-cell *matHeaderCellDef> Local port </th>
+        <td mat-cell *matCellDef="let element"> {{element.rport}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="rhost">
+        <th mat-header-cell *matHeaderCellDef> Type </th>
+        <td mat-cell *matCellDef="let element"> {{element.rhost}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="lport">
+        <th mat-header-cell *matHeaderCellDef> Remote port </th>
+        <td mat-cell *matCellDef="let element"> {{element.lport}} </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 *ngIf="dataSourceUdp.length"/>
+<mat-form-field class="form-field">
+    <input 
+        matInput type="text" 
+        [(ngModel)]="newPort.name" 
+        placeholder="Name">
+</mat-form-field>
+<mat-form-field class="form-field">
+    <input 
+        matInput type="number" 
+        [(ngModel)]="newPort.lport" 
+        placeholder="Local port">
+</mat-form-field>
+<mat-form-field class="form-field">
+    <input 
+        matInput type="text" 
+        [(ngModel)]="newPort.rhost" 
+        placeholder="Remote host">
+</mat-form-field>
+<mat-form-field class="form-field">
+    <input 
+        matInput type="number" 
+        [(ngModel)]="newPort.rport" 
+        placeholder="Remote port">
+</mat-form-field>
+<button mat-button class="form-field" (click)="onAddUdpInterface()">Add</button>

src/app/components/preferences/common/udp-tunnels/udp-tunnels.component.ts

@@ -0,0 +1,47 @@
+import { Component, OnInit, Input, Output, EventEmitter } from "@angular/core";
+import { Server } from '../../../../models/server';
+import { PortsMappingEntity } from '../../../../models/ethernetHub/ports-mapping-enity';
+import { BuiltInTemplatesConfigurationService } from '../../../../services/built-in-templates-configuration.service';
+
+
+@Component({
+    selector: 'app-udp-tunnels',
+    templateUrl: './udp-tunnels.component.html',
+    styleUrls: ['../../preferences.component.scss']
+})
+export class UdpTunnelsComponent implements OnInit {
+    @Input() dataSourceUdp: PortsMappingEntity[] = [];
+    displayedColumns: string[] = ['name', 'lport', 'rhost', 'rport', 'action'];
+    newPort: PortsMappingEntity = {
+        name: '',
+        port_number: 0,
+    };
+    portTypes: string[] = [];
+    etherTypes: string[] = [];
+
+    constructor(
+        private builtInTemplatesConfigurationService: BuiltInTemplatesConfigurationService
+    ) {}
+
+    ngOnInit() {
+        this.getConfiguration();
+    }
+
+    getConfiguration() {
+        this.etherTypes = this.builtInTemplatesConfigurationService.getEtherTypesForEthernetSwitches();
+        this.portTypes = this.builtInTemplatesConfigurationService.getPortTypesForEthernetSwitches();
+    }
+
+    onAddUdpInterface() {
+        this.dataSourceUdp = this.dataSourceUdp.concat([this.newPort]);
+
+        this.newPort = {
+            name: '',
+            port_number: 0,
+        };
+    }
+
+    delete(port: PortsMappingEntity) {
+        this.dataSourceUdp = this.dataSourceUdp.filter(n => n !== port);
+    }
+}

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

@@ -8,6 +8,7 @@ import { ConfiguratorDialogEthernetSwitchComponent } from '../../../node-editors
 import { ConfiguratorDialogSwitchComponent } from '../../../node-editors/configurator/switch/configurator-switch.component';
 import { ConfiguratorDialogVirtualBoxComponent } from '../../../node-editors/configurator/virtualbox/configurator-virtualbox.component';
 import { ConfiguratorDialogQemuComponent } from '../../../node-editors/configurator/qemu/configurator-qemu.component';
+import { ConfiguratorDialogCloudComponent } from '../../../node-editors/configurator/cloud/configurator-cloud.component';
 
 
 @Component({
@@ -18,7 +19,6 @@ export class ConfigActionComponent {
   @Input() server: Server;
   @Input() node: Node;
   private conf = {
-    width: '600px',
     autoFocus: false
   };
   dialogRef;
@@ -33,7 +33,7 @@ export class ConfigActionComponent {
     } else if (this.node.node_type === 'ethernet_switch') {
       this.dialogRef = this.dialog.open(ConfiguratorDialogEthernetSwitchComponent, this.conf);
     } else if (this.node.node_type === 'cloud') {
-
+      this.dialogRef = this.dialog.open(ConfiguratorDialogCloudComponent, this.conf);
     } else if (this.node.node_type === 'dynamips') {
 
     } else if (this.node.node_type === 'iou') {

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

@@ -0,0 +1,67 @@
+<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 *ngIf="name">
+                    <mat-tab label="Ethernet interfaces">
+
+                    </mat-tab>
+
+                    <mat-tab label="TAP interfaces">
+
+                    </mat-tab>
+
+                    <mat-tab label="UDP tunnels">
+                        <app-udp-tunnels #udpTunnels [dataSourceUdp]="portsMappingUdp" ></app-udp-tunnels>
+                    </mat-tab>
+
+                    <mat-tab label="Miscellaneous">
+                        <form [formGroup]="generalSettingsForm">
+                            <mat-form-field class="form-field">
+                                <input 
+                                    matInput type="text" 
+                                    [(ngModel)]="node.name"
+                                    formControlName="name"
+                                    placeholder="Name">
+                            </mat-form-field>
+                        </form>
+                        <mat-form-field class="select">
+                            <mat-select 
+                                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-form-field class="form-field">
+                            <input 
+                                matInput type="text" 
+                                [(ngModel)]="node.properties.remote_console_host" 
+                                placeholder="Console host">
+                        </mat-form-field>
+                        <mat-form-field class="form-field">
+                            <input 
+                                matInput type="text" 
+                                [(ngModel)]="node.properties.remote_console_port" 
+                                placeholder="Console port">
+                        </mat-form-field>
+                        <mat-form-field class="form-field">
+                            <input 
+                                matInput type="text" 
+                                [(ngModel)]="node.properties.remote_console_http_path" 
+                                placeholder="Console HTTP path">
+                        </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/cloud/configurator-cloud.component.ts

@@ -0,0 +1,101 @@
+import { Component, OnInit, Input, ViewChild } 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 { CustomAdaptersTableComponent } from '../../../../../components/preferences/common/custom-adapters-table/custom-adapters-table.component';
+import { QemuBinary } from '../../../../../models/qemu/qemu-binary';
+import { BuiltInTemplatesConfigurationService } from '../../../../../services/built-in-templates-configuration.service';
+import { PortsMappingEntity } from '../../../../../models/ethernetHub/ports-mapping-enity';
+import { UdpTunnelsComponent } from '../../../../../components/preferences/common/udp-tunnels/udp-tunnels.component';
+
+
+@Component({
+    selector: 'app-configurator-cloud',
+    templateUrl: './configurator-cloud.component.html',
+    styleUrls: ['../configurator.component.scss']
+})
+export class ConfiguratorDialogCloudComponent implements OnInit {
+    server: Server;
+    node: Node;
+    name: string;
+    generalSettingsForm: FormGroup;
+    consoleTypes: string[] = [];
+    binaries: QemuBinary[] = [];
+    onCloseOptions = [];
+    bootPriorities = [];
+    diskInterfaces: string[] = [];
+
+    portsMappingEthernet: PortsMappingEntity[] = [];
+    portsMappingTap: PortsMappingEntity[] = [];
+    portsMappingUdp: PortsMappingEntity[] = [];
+
+    displayedColumns: string[] = ['adapter_number', 'port_name', 'adapter_type', 'actions'];
+    networkTypes = [];
+
+    @ViewChild("udpTunnels", {static: false}) udpTunnels: UdpTunnelsComponent;
+
+    constructor(
+        public dialogRef: MatDialogRef<ConfiguratorDialogCloudComponent>,
+        public nodeService: NodeService,
+        private toasterService: ToasterService,
+        private formBuilder: FormBuilder,
+        private builtInTemplatesConfigurationService: BuiltInTemplatesConfigurationService,
+    ) {
+        this.generalSettingsForm = 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;
+            this.getConfiguration();
+
+            this.portsMappingEthernet = this.node.properties.ports_mapping
+                .filter((elem) => elem.type === 'ethernet');
+
+            this.portsMappingTap = this.node.properties.ports_mapping
+                .filter((elem) => elem.type === 'tap');
+            
+            this.portsMappingUdp = this.node.properties.ports_mapping
+                .filter((elem) => elem.type === 'udp');
+        })
+    }
+
+    getConfiguration() {
+        this.consoleTypes = this.builtInTemplatesConfigurationService.getConsoleTypesForCloudNodes();
+    }
+
+    onSaveClick() {
+        if (this.generalSettingsForm.valid) {
+            this.portsMappingUdp = this.udpTunnels.dataSourceUdp;
+
+            this.node.properties.ports_mapping = this.portsMappingUdp.concat(this.portsMappingEthernet).concat(this.portsMappingTap);
+
+            // this.node.custom_adapters = [];
+            // this.customAdapters.adapters.forEach(n => {
+            //     this.node.custom_adapters.push({
+            //         adapter_number: n.adapter_number,
+            //         adapter_type: n.adapter_type
+            //     })
+            // });
+
+            // this.node.properties.adapters = this.node.custom_adapters.length;
+
+            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();
+    }
+}