Support for ethernet switches

src/app/app.module.ts

@@ -214,6 +214,8 @@ import { SuspendNodeActionComponent } from './components/project-map/context-men
 import { ConfigActionComponent } from './components/project-map/context-menu/actions/config-action/config-action.component';
 import { ConfiguratorDialogVpcsComponent } from './components/project-map/node-editors/configurator/vpcs/configurator-vpcs.component';
 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';
 
 if (environment.production) {
   Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
@@ -355,7 +357,9 @@ if (environment.production) {
     SuspendNodeActionComponent,
     ConfigActionComponent,
     ConfiguratorDialogVpcsComponent,
-    ConfiguratorDialogEthernetHubComponent
+    ConfiguratorDialogEthernetHubComponent,
+    ConfiguratorDialogEthernetSwitchComponent,
+    PortsComponent
   ],
   imports: [
     BrowserModule,
@@ -457,7 +461,8 @@ if (environment.production) {
     ChangeSymbolDialogComponent,
     EditProjectDialogComponent,
     ConfiguratorDialogVpcsComponent,
-    ConfiguratorDialogEthernetHubComponent
+    ConfiguratorDialogEthernetHubComponent,
+    ConfiguratorDialogEthernetSwitchComponent
   ],
   bootstrap: [AppComponent]
 })

src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-template-details/ethernet-switches-template-details.component.html

@@ -57,69 +57,13 @@
                     </mat-form-field>
                 </form>
             </mat-expansion-panel>
-            <mat-expansion-panel *ngIf="newPort">
+            <mat-expansion-panel>
                 <mat-expansion-panel-header>
                     <mat-panel-title>
                         Port settings
                     </mat-panel-title>
                 </mat-expansion-panel-header>
-                <table class="table" mat-table [dataSource]="dataSource">
-                    <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="type">
-                        <th mat-header-cell *matHeaderCellDef> Type </th>
-                        <td mat-cell *matCellDef="let element"> {{element.type}} </td>
-                    </ng-container>
-
-                    <ng-container matColumnDef="ethertype">
-                        <th mat-header-cell *matHeaderCellDef> EtherType </th>
-                        <td mat-cell *matCellDef="let element"> {{element.ethertype}} </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>
+            <app-ports #ports [ethernetPorts]="ethernetSwitchTemplate.ports_mapping"></app-ports>
             </mat-expansion-panel>
         </mat-accordion>
         <div class="buttons-bar">

src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-template-details/ethernet-switches-template-details.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit, ViewChild } from "@angular/core";
 import { ActivatedRoute, Router } from '@angular/router';
 import { ServerService } from '../../../../../services/server.service';
 import { Server } from '../../../../../models/server';
@@ -6,8 +6,8 @@ import { ToasterService } from '../../../../../services/toaster.service';
 import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
 import { BuiltInTemplatesService } from '../../../../../services/built-in-templates.service';
 import { EthernetSwitchTemplate } from '../../../../../models/templates/ethernet-switch-template';
-import { PortsMappingEntity } from '../../../../../models/ethernetHub/ports-mapping-enity';
 import { BuiltInTemplatesConfigurationService } from '../../../../../services/built-in-templates-configuration.service';
+import { PortsComponent } from '../../../common/ports/ports.component';
 
 
 @Component({
@@ -16,20 +16,13 @@ import { BuiltInTemplatesConfigurationService } from '../../../../../services/bu
     styleUrls: ['./ethernet-switches-template-details.component.scss', '../../../preferences.component.scss']
 })
 export class EthernetSwitchesTemplateDetailsComponent implements OnInit {
+    @ViewChild(PortsComponent, {static: false}) portsComponent: PortsComponent;
     server: Server;
     ethernetSwitchTemplate: EthernetSwitchTemplate;
     inputForm: FormGroup;
-    ethernetPorts: PortsMappingEntity[] = [];
-    dataSource: PortsMappingEntity[] = [];
-    newPort: PortsMappingEntity;
-
     isSymbolSelectionOpened: boolean = false;
-
     categories = [];
     consoleTypes: string[] = [];
-    portTypes: string[] = [];
-    etherTypes: string[] = [];
-    displayedColumns: string[] = ['port_number', 'vlan', 'type', 'ethertype'];
 
     constructor(
         private route: ActivatedRoute,
@@ -45,11 +38,6 @@ export class EthernetSwitchesTemplateDetailsComponent implements OnInit {
             defaultName: new FormControl('', Validators.required),
             symbol: new FormControl('', Validators.required)
         });
-
-        this.newPort = {
-            name: '',
-            port_number: 0,
-        };
     }
 
     ngOnInit() {
@@ -61,8 +49,6 @@ export class EthernetSwitchesTemplateDetailsComponent implements OnInit {
             this.getConfiguration();
             this.builtInTemplatesService.getTemplate(this.server, template_id).subscribe((ethernetSwitchTemplate: EthernetSwitchTemplate) => {
                 this.ethernetSwitchTemplate = ethernetSwitchTemplate;
-                this.ethernetPorts = this.ethernetSwitchTemplate.ports_mapping;
-                this.dataSource =  this.ethernetSwitchTemplate.ports_mapping;
             });
         });
     }
@@ -70,18 +56,6 @@ export class EthernetSwitchesTemplateDetailsComponent implements OnInit {
     getConfiguration() {
         this.categories = this.builtInTemplatesConfigurationService.getCategoriesForEthernetSwitches();
         this.consoleTypes = this.builtInTemplatesConfigurationService.getConsoleTypesForEthernetSwitches();
-        this.portTypes = this.builtInTemplatesConfigurationService.getPortTypesForEthernetSwitches();
-        this.etherTypes = this.builtInTemplatesConfigurationService.getEtherTypesForEthernetSwitches();
-    }
-
-    onAdd() {
-        this.ethernetPorts.push(this.newPort);
-        this.dataSource = [...this.ethernetPorts];
-        
-        this.newPort = {
-            name: '',
-            port_number: 0,
-        };
     }
 
     goBack() {
@@ -92,6 +66,7 @@ export class EthernetSwitchesTemplateDetailsComponent implements OnInit {
         if (this.inputForm.invalid) {
             this.toasterService.error(`Fill all required fields`);
         } else {
+            this.ethernetSwitchTemplate.ports_mapping = this.portsComponent.ethernetPorts;
             this.builtInTemplatesService.saveTemplate(this.server, this.ethernetSwitchTemplate).subscribe((ethernetSwitchTemplate: EthernetSwitchTemplate) => {
                 this.toasterService.success("Changes saved");
             });

src/app/components/preferences/common/ports/ports.component.html

@@ -0,0 +1,66 @@
+<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="type">
+        <th mat-header-cell *matHeaderCellDef> Type </th>
+        <td mat-cell *matCellDef="let element"> {{element.type}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="ethertype">
+        <th mat-header-cell *matHeaderCellDef> EtherType </th>
+        <td mat-cell *matCellDef="let element"> {{element.ethertype}} </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>

src/app/components/preferences/common/ports/ports.component.ts

@@ -0,0 +1,48 @@
+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-ports',
+    templateUrl: './ports.component.html',
+    styleUrls: ['../../preferences.component.scss']
+})
+export class PortsComponent implements OnInit {
+    @Input() ethernetPorts: PortsMappingEntity[] = [];
+    newPort: PortsMappingEntity = {
+        name: '',
+        port_number: 0,
+    };
+
+    portTypes: string[] = [];
+    etherTypes: string[] = [];
+    displayedColumns: string[] = ['port_number', 'vlan', 'type', 'ethertype', 'action'];
+
+    constructor(
+        private builtInTemplatesConfigurationService: BuiltInTemplatesConfigurationService
+    ) {}
+
+    ngOnInit() {
+        this.getConfiguration();
+    }
+
+    getConfiguration() {
+        this.etherTypes = this.builtInTemplatesConfigurationService.getEtherTypesForEthernetSwitches();
+        this.portTypes = this.builtInTemplatesConfigurationService.getPortTypesForEthernetSwitches();
+    }
+
+    onAdd() {
+        this.ethernetPorts.push(this.newPort);
+        
+        this.newPort = {
+            name: '',
+            port_number: 0,
+        };
+    }
+
+    delete(port: PortsMappingEntity) {
+        this.ethernetPorts = this.ethernetPorts.filter(n => n !== port);
+    }
+}

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

@@ -4,6 +4,7 @@ import { Node } from '../../../../../cartography/models/node';
 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';
 
 
 @Component({
@@ -27,7 +28,7 @@ export class ConfigActionComponent {
     } else if (this.node.node_type === 'ethernet_hub') {
       this.dialogRef = this.dialog.open(ConfiguratorDialogEthernetHubComponent, this.conf);
     } else if (this.node.node_type === 'ethernet_switch') {
-
+      this.dialogRef = this.dialog.open(ConfiguratorDialogEthernetSwitchComponent, this.conf);
     } else if (this.node.node_type === 'cloud') {
 
     } else if (this.node.node_type === 'dynamips') {

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

@@ -5,3 +5,23 @@
 .select {
     width: 100%;
 }
+
+.default-content {
+    max-height: 400px;
+    overflow-y: scroll;
+    scrollbar-color: darkgrey #263238;
+    scrollbar-width: thin;
+}
+
+::-webkit-scrollbar {
+    width: 0.5em;
+}
+ 
+::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+}
+ 
+::-webkit-scrollbar-thumb {
+  background-color: darkgrey;
+  outline: 1px solid #263238;
+}

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

@@ -0,0 +1,35 @@
+<h1 mat-dialog-title>Configurator for node {{node.name}}</h1>
+
+<div class="modal-form-container">
+    <div class="content">
+        <div class="default-content" *ngIf="node">
+            <mat-card class="matCard">
+                <form [formGroup]="inputForm">
+                    <mat-form-field class="form-field">
+                        <input 
+                            matInput type="text" 
+                            [(ngModel)]="node.name" 
+                            formControlName="name"
+                            placeholder="Name">
+                    </mat-form-field>
+                    <mat-form-field class="select">
+                        <mat-select 
+                            placeholder="Console type" 
+                            [ngModelOptions]="{standalone: true}" 
+                            [(ngModel)]="node.console_type">
+                            <mat-option *ngFor="let type of consoleTypes" [value]="type">
+                                {{type}}
+                            </mat-option>
+                        </mat-select>
+                    </mat-form-field>
+                </form>
+                <app-ports *ngIf="node.properties" #ports [ethernetPorts]="node.properties.ports_mapping"></app-ports>
+            </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/ethernet-switch/configurator-ethernet-switch.component.ts

@@ -0,0 +1,63 @@
+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 { BuiltInTemplatesConfigurationService } from '../../../../../services/built-in-templates-configuration.service';
+import { PortsComponent } from '../../../../../components/preferences/common/ports/ports.component';
+
+
+@Component({
+    selector: 'app-configurator-ethernet-switch',
+    templateUrl: './configurator-ethernet-switch.component.html',
+    styleUrls: ['../configurator.component.scss']
+})
+export class ConfiguratorDialogEthernetSwitchComponent implements OnInit {
+    @ViewChild(PortsComponent, {static: false}) portsComponent: PortsComponent;
+    server: Server;
+    node: Node;
+
+    inputForm: FormGroup;
+    consoleTypes: string[] = [];
+
+    constructor(
+        public dialogRef: MatDialogRef<ConfiguratorDialogEthernetSwitchComponent>,
+        public nodeService: NodeService,
+        private toasterService: ToasterService,
+        private formBuilder: FormBuilder,
+        private ethernetSwitchesConfigurationService: BuiltInTemplatesConfigurationService
+    ) {
+        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.getConfiguration();
+        })
+    }
+
+    getConfiguration() {
+        this.consoleTypes = this.ethernetSwitchesConfigurationService.getConsoleTypesForEthernetSwitches();
+    }
+
+    onSaveClick() {
+        if (this.inputForm.valid) {
+            this.node.properties.ports_mapping = this.portsComponent.ethernetPorts;
+            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/vpcs/configurator-vpcs.component.ts

@@ -19,7 +19,6 @@ export class ConfiguratorDialogVpcsComponent implements OnInit {
 
     inputForm: FormGroup;
     consoleTypes: string[] = [];
-    categories = [];
 
     constructor(
         public dialogRef: MatDialogRef<ConfiguratorDialogVpcsComponent>,
@@ -42,7 +41,6 @@ export class ConfiguratorDialogVpcsComponent implements OnInit {
 
     getConfiguration() {
         this.consoleTypes = this.vpcsConfigurationService.getConsoleTypes();
-        this.categories = this.vpcsConfigurationService.getCategories();
     }
 
     onSaveClick() {