Creating templates for ethernet switches

src/app/app-routing.module.ts

@@ -25,6 +25,12 @@ import { BuiltInPreferencesComponent } from './components/preferences/built-in/b
 import { EthernetHubsTemplatesComponent } from './components/preferences/built-in/ethernet-hubs/ethernet-hubs-templates/ethernet-hubs-templates.component';
 import { EthernetHubsAddTemplateComponent } from './components/preferences/built-in/ethernet-hubs/ethernet-hubs-add-template/ethernet-hubs-add-template.component';
 import { EthernetHubsTemplateDetailsComponent } from './components/preferences/built-in/ethernet-hubs/ethernet-hubs-template-details/ethernet-hubs-template-details.component';
+import { CloudNodesTemplatesComponent } from './components/preferences/built-in/cloud-nodes/cloud-nodes-templates/cloud-nodes-templates.component';
+import { CloudNodesAddTemplateComponent } from './components/preferences/built-in/cloud-nodes/cloud-nodes-add-template/cloud-nodes-add-template.component';
+import { CloudNodesTemplateDetailsComponent } from './components/preferences/built-in/cloud-nodes/cloud-nodes-template-details/cloud-nodes-template-details.component';
+import { EthernetSwitchesTemplatesComponent } from './components/preferences/built-in/ethernet-switches/ethernet-switches-templates/ethernet-switches-templates.component';
+import { EthernetSwitchesAddTemplateComponent } from './components/preferences/built-in/ethernet-switches/ethernet-switches-add-template/ethernet-switches-add-template.component';
+import { EthernetSwitchesTemplateDetailsComponent } from './components/preferences/built-in/ethernet-switches/ethernet-switches-template-details/ethernet-switches-template-details.component';
 
 const routes: Routes = [
   {
@@ -37,25 +43,31 @@ const routes: Routes = [
       { path: 'server/:server_id/projects', component: ProjectsComponent },
       { path: 'settings', component: SettingsComponent },
       { path: 'server/:server_id/preferences', component: PreferencesComponent },
-      // temporary disabled
       // { path: 'server/:server_id/preferences/general', component: GeneralPreferencesComponent },
       { path: 'server/:server_id/preferences/builtin', component: BuiltInPreferencesComponent},
+
       { path: 'server/:server_id/preferences/builtin/ethernet-hubs', component: EthernetHubsTemplatesComponent },
       { path: 'server/:server_id/preferences/builtin/ethernet-hubs/addtemplate', component: EthernetHubsAddTemplateComponent },
       { path: 'server/:server_id/preferences/builtin/ethernet-hubs/:template_id', component: EthernetHubsTemplateDetailsComponent },
-      { path: 'server/:server_id/preferences/builtin/ethernet-switches', component: EthernetHubsTemplatesComponent },
-      { path: 'server/:server_id/preferences/builtin/cloud-nodes', component: EthernetHubsTemplatesComponent },
-      // temporary disabled
+
+      { path: 'server/:server_id/preferences/builtin/ethernet-switches', component: EthernetSwitchesTemplatesComponent },
+      { path: 'server/:server_id/preferences/builtin/ethernet-switches/addtemplate', component: EthernetSwitchesAddTemplateComponent },
+      { path: 'server/:server_id/preferences/builtin/ethernet-switches/:template_id', component: EthernetSwitchesTemplateDetailsComponent },
+
+      { path: 'server/:server_id/preferences/builtin/cloud-nodes', component: CloudNodesTemplatesComponent },
+      { path: 'server/:server_id/preferences/builtin/cloud-nodes/addtemplate', component: CloudNodesAddTemplateComponent },
+      { path: 'server/:server_id/preferences/builtin/cloud-nodes/:template_id', component: CloudNodesTemplateDetailsComponent },
+
       // { path: 'server/:server_id/preferences/qemu', component: QemuPreferencesComponent },
       { path: 'server/:server_id/preferences/qemu/templates', component: QemuVmTemplatesComponent },
       { path: 'server/:server_id/preferences/qemu/templates/:template_id', component: QemuVmTemplateDetailsComponent },
       { path: 'server/:server_id/preferences/qemu/addtemplate', component: AddQemuVmTemplateComponent },
-      // temporary disabled
+
       // { path: 'server/:server_id/preferences/vpcs', component: VpcsPreferencesComponent },
       { path: 'server/:server_id/preferences/vpcs/templates', component: VpcsTemplatesComponent },
       { path: 'server/:server_id/preferences/vpcs/templates/:template_id', component: VpcsTemplateDetailsComponent},
       { path: 'server/:server_id/preferences/vpcs/addtemplate', component: AddVpcsTemplateComponent },
-      // temporary disabled
+
       // { path: 'server/:server_id/preferences/virtualbox', component: VirtualBoxPreferencesComponent }
       { path: 'server/:server_id/preferences/virtualbox/templates', component: VirtualBoxTemplatesComponent },
       { path: 'server/:server_id/preferences/virtualbox/templates/:template_id', component: VirtualBoxTemplateDetailsComponent },

src/app/app.module.ts

@@ -113,6 +113,12 @@ import { EthernetHubsTemplatesComponent } from './components/preferences/built-i
 import { BuiltInTemplatesService } from './services/built-in-templates.service';
 import { EthernetHubsAddTemplateComponent } from './components/preferences/built-in/ethernet-hubs/ethernet-hubs-add-template/ethernet-hubs-add-template.component';
 import { EthernetHubsTemplateDetailsComponent } from './components/preferences/built-in/ethernet-hubs/ethernet-hubs-template-details/ethernet-hubs-template-details.component';
+import { CloudNodesTemplatesComponent } from './components/preferences/built-in/cloud-nodes/cloud-nodes-templates/cloud-nodes-templates.component';
+import { CloudNodesAddTemplateComponent } from './components/preferences/built-in/cloud-nodes/cloud-nodes-add-template/cloud-nodes-add-template.component';
+import { CloudNodesTemplateDetailsComponent } from './components/preferences/built-in/cloud-nodes/cloud-nodes-template-details/cloud-nodes-template-details.component';
+import { EthernetSwitchesTemplatesComponent } from './components/preferences/built-in/ethernet-switches/ethernet-switches-templates/ethernet-switches-templates.component';
+import { EthernetSwitchesAddTemplateComponent } from './components/preferences/built-in/ethernet-switches/ethernet-switches-add-template/ethernet-switches-add-template.component';
+import { EthernetSwitchesTemplateDetailsComponent } from './components/preferences/built-in/ethernet-switches/ethernet-switches-template-details/ethernet-switches-template-details.component';
 
 if (environment.production) {
   Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
@@ -182,7 +188,13 @@ if (environment.production) {
     BuiltInPreferencesComponent,
     EthernetHubsTemplatesComponent,
     EthernetHubsAddTemplateComponent,
-    EthernetHubsTemplateDetailsComponent
+    EthernetHubsTemplateDetailsComponent,
+    CloudNodesTemplatesComponent,
+    CloudNodesAddTemplateComponent,
+    CloudNodesTemplateDetailsComponent,
+    EthernetSwitchesTemplatesComponent,
+    EthernetSwitchesAddTemplateComponent,
+    EthernetSwitchesTemplateDetailsComponent
   ],
   imports: [
     BrowserModule,

src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-add-template/cloud-nodes-add-template.component.html

@@ -0,0 +1,15 @@
+<div class="content">
+    <div class="default-header">
+        <div class="row">
+            <h1 class="col">New cloud node template</h1>
+        </div>
+    </div>
+    <div class="default-content">
+        <mat-form-field class="row">
+            <input matInput type="text" [(ngModel)]="templateName" placeholder="Template name">
+        </mat-form-field>
+        <div class="buttons-bar">
+            <button mat-raised-button color="primary" (click)="addTemplate()">Add template</button>
+        </div>
+    </div>
+</div>

src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-add-template/cloud-nodes-add-template.component.scss

@@ -0,0 +1,3 @@
+.row {
+    width: 100%;
+}

src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-add-template/cloud-nodes-add-template.component.ts

@@ -0,0 +1,62 @@
+import { Component, OnInit } from "@angular/core";
+import { Server } from '../../../../../models/server';
+import { ActivatedRoute, ParamMap, Router } from '@angular/router';
+import { ServerService } from '../../../../../services/server.service';
+import { switchMap } from 'rxjs/operators';
+import { ToasterService } from '../../../../../services/toaster.service';
+import { v4 as uuid } from 'uuid';
+import { TemplateMocksService } from '../../../../../services/template-mocks.service';
+import { BuiltInTemplatesService } from '../../../../../services/built-in-templates.service';
+import { CloudTemplate } from '../../../../../models/templates/cloud-template';
+
+
+@Component({
+    selector: 'app-cloud-nodes-add-template',
+    templateUrl: './cloud-nodes-add-template.component.html',
+    styleUrls: ['./cloud-nodes-add-template.component.scss']
+})
+export class CloudNodesAddTemplateComponent implements OnInit {
+    server: Server;
+    templateName: string = '';
+    
+    constructor(
+        private route: ActivatedRoute,
+        private serverService: ServerService,
+        private builtInTemplatesService: BuiltInTemplatesService,
+        private router: Router,
+        private toasterService: ToasterService,
+        private templateMocksService: TemplateMocksService
+    ) {}
+
+    ngOnInit() {
+        this.route.paramMap
+        .pipe(
+          switchMap((params: ParamMap) => {
+            const server_id = params.get('server_id');
+            return this.serverService.get(parseInt(server_id, 10));
+          })
+        )
+        .subscribe((server: Server) => {
+            this.server = server;
+        });
+    }
+
+    addTemplate() {
+        if (this.templateName) {
+            let cloudTemplate: CloudTemplate;
+
+            this.templateMocksService.getCloudNodeTemplate().subscribe((template: CloudTemplate) => {
+                cloudTemplate = template;
+            });
+
+            cloudTemplate.template_id = uuid();
+            cloudTemplate.name = this.templateName;
+
+            this.builtInTemplatesService.addTemplate(this.server, cloudTemplate).subscribe((cloudNodeTemplate) => {
+                this.router.navigate(['/server', this.server.id, 'preferences', 'builtin', 'cloud-nodes']);
+            });
+        } else {
+            this.toasterService.error(`Fill all required fields`);
+        }
+    }
+}

src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-template-details/cloud-nodes-template-details.component.html

@@ -0,0 +1,14 @@
+<div class="content">
+    <div class="default-header">
+        <div class="row">
+            <h1 class="col">Cloud configuration</h1>
+        </div>
+    </div>
+    <div class="default-content" *ngIf="ethernetHubTemplate">
+        <form [formGroup]="inputForm">
+        </form>
+        <div class="buttons-bar">
+            <button mat-raised-button color="primary" (click)="onSave()">Save</button><br/>
+        </div>
+    </div>
+</div>

src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-template-details/cloud-nodes-template-details.component.scss

@@ -0,0 +1,8 @@
+.row {
+    width: 100%;
+    margin-left: 0px;
+}
+
+.select {
+    width: 100%;
+}

src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-template-details/cloud-nodes-template-details.component.ts

@@ -0,0 +1,54 @@
+import { Component, OnInit } from "@angular/core";
+import { ActivatedRoute } from '@angular/router';
+import { ServerService } from '../../../../../services/server.service';
+import { Server } from '../../../../../models/server';
+import { ToasterService } from '../../../../../services/toaster.service';
+import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
+import { BuiltInTemplatesService } from '../../../../../services/built-in-templates.service';
+import { CloudTemplate } from '../../../../../models/templates/cloud-template';
+
+
+@Component({
+    selector: 'app-cloud-nodes-template-details',
+    templateUrl: './cloud-nodes-template-details.component.html',
+    styleUrls: ['./cloud-nodes-template-details.component.scss']
+})
+export class CloudNodesTemplateDetailsComponent implements OnInit {
+    server: Server;
+    cloudNodeTemplate: CloudTemplate;
+    inputForm: FormGroup;
+
+    constructor(
+        private route: ActivatedRoute,
+        private serverService: ServerService,
+        private builtInTemplatesService: BuiltInTemplatesService,
+        private toasterService: ToasterService,
+        private formBuilder: FormBuilder
+    ) {
+        this.inputForm = this.formBuilder.group({
+            templateName: new FormControl('', Validators.required)
+        });
+    }
+
+    ngOnInit() {
+        const server_id = this.route.snapshot.paramMap.get("server_id");
+        const template_id = this.route.snapshot.paramMap.get("template_id");
+        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
+            this.server = server;
+
+            this.builtInTemplatesService.getTemplate(this.server, template_id).subscribe((cloudNodeTemplate: CloudTemplate) => {
+                this.cloudNodeTemplate = cloudNodeTemplate;
+            });
+        });
+    }
+
+    onSave() {
+        if (this.inputForm.invalid) {
+            this.toasterService.error(`Fill all required fields`);
+        } else {
+            this.builtInTemplatesService.saveTemplate(this.server, this.cloudNodeTemplate).subscribe((cloudNodeTemplate: CloudTemplate) => {
+                this.toasterService.success("Changes saved");
+            });
+        }
+    }
+}

src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-templates/cloud-nodes-templates.component.html

@@ -0,0 +1,17 @@
+<div class="content">
+    <div class="default-header">
+        <div class="row">
+            <h1 class="col">Cloud nodes templates</h1>
+            <button *ngIf="server" class="top-button" routerLink="/server/{{server.id}}/preferences/builtin/cloud-nodes/addtemplate" mat-raised-button color="primary">Add cloud node template</button>
+        </div>
+    </div>
+    <div class="default-content">
+        <div class="container mat-elevation-z8">
+            <mat-nav-list *ngIf="server">
+                <mat-list-item *ngFor='let template of cloudNodesTemplates' routerLink="{{template.template_id}}">
+                    {{template.name}}
+                </mat-list-item>
+            </mat-nav-list>
+        </div>
+    </div>
+</div>

src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-templates/cloud-nodes-templates.component.scss

@@ -0,0 +1,4 @@
+.top-button {
+    height: 36px;
+    margin-top: 22px
+}

src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-templates/cloud-nodes-templates.component.ts

@@ -0,0 +1,41 @@
+import { Component, OnInit } from "@angular/core";
+import { Server } from '../../../../../models/server';
+import { ActivatedRoute, ParamMap } from '@angular/router';
+import { ServerService } from '../../../../../services/server.service';
+import { switchMap } from 'rxjs/operators';
+import { BuiltInTemplatesService } from '../../../../../services/built-in-templates.service';
+import { CloudTemplate } from '../../../../../models/templates/cloud-template';
+
+
+@Component({
+    selector: 'app-cloud-nodes-templates',
+    templateUrl: './cloud-nodes-templates.component.html',
+    styleUrls: ['./cloud-nodes-templates.component.scss']
+})
+export class CloudNodesTemplatesComponent implements OnInit {
+    server: Server;
+    cloudNodesTemplates: CloudTemplate[];
+
+    constructor(
+        private route: ActivatedRoute,
+        private serverService: ServerService,
+        private builtInTemplatesService: BuiltInTemplatesService
+    ) {}
+
+    ngOnInit() {
+        this.route.paramMap
+        .pipe(
+          switchMap((params: ParamMap) => {
+            const server_id = params.get('server_id');
+            return this.serverService.get(parseInt(server_id, 10));
+          })
+        )
+        .subscribe((server: Server) => {
+            this.server = server;
+
+            this.builtInTemplatesService.getTemplates(this.server).subscribe((cloudNodesTemplates: CloudTemplate[]) => {
+                this.cloudNodesTemplates = cloudNodesTemplates.filter((elem) => elem.template_type === "cloud" && !elem.builtin);
+            });
+        });
+    }
+}

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

@@ -0,0 +1,18 @@
+<div class="content">
+    <div class="default-header">
+        <div class="row">
+            <h1 class="col">New Ethernet switch template</h1>
+        </div>
+    </div>
+    <div class="default-content">
+        <mat-form-field class="row">
+            <input matInput type="text" [(ngModel)]="templateName" placeholder="Template name">
+        </mat-form-field>
+        <mat-form-field class="row">
+            <input matInput type="text" [(ngModel)]="numberOfPorts" placeholder="Number of ports">
+        </mat-form-field>
+        <div class="buttons-bar">
+            <button mat-raised-button color="primary" (click)="addTemplate()">Add template</button>
+        </div>
+    </div>
+</div>

src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-add-template/ethernet-switches-add-template.component.scss

@@ -0,0 +1,3 @@
+.row {
+    width: 100%;
+}

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

@@ -0,0 +1,73 @@
+import { Component, OnInit } from "@angular/core";
+import { Server } from '../../../../../models/server';
+import { ActivatedRoute, ParamMap, Router } from '@angular/router';
+import { ServerService } from '../../../../../services/server.service';
+import { switchMap } from 'rxjs/operators';
+import { ToasterService } from '../../../../../services/toaster.service';
+import { v4 as uuid } from 'uuid';
+import { TemplateMocksService } from '../../../../../services/template-mocks.service';
+import { BuiltInTemplatesService } from '../../../../../services/built-in-templates.service';
+import { EthernetSwitchTemplate } from '../../../../../models/templates/ethernet-switch-template';
+
+
+@Component({
+    selector: 'app-ethernet-switches-add-template',
+    templateUrl: './ethernet-switches-add-template.component.html',
+    styleUrls: ['./ethernet-switches-add-template.component.scss']
+})
+export class EthernetSwitchesAddTemplateComponent implements OnInit {
+    server: Server;
+    numberOfPorts: number;
+    templateName: string = '';
+    
+    constructor(
+        private route: ActivatedRoute,
+        private serverService: ServerService,
+        private builtInTemplatesService: BuiltInTemplatesService,
+        private router: Router,
+        private toasterService: ToasterService,
+        private templateMocksService: TemplateMocksService
+    ) {}
+
+    ngOnInit() {
+        this.route.paramMap
+        .pipe(
+          switchMap((params: ParamMap) => {
+            const server_id = params.get('server_id');
+            return this.serverService.get(parseInt(server_id, 10));
+          })
+        )
+        .subscribe((server: Server) => {
+            this.server = server;
+        });
+    }
+
+    addTemplate() {
+        if (this.templateName && this.numberOfPorts) {
+            let ethernetSwitchTemplate: EthernetSwitchTemplate;
+
+            this.templateMocksService.getEthernetSwitchTemplate().subscribe((template: EthernetSwitchTemplate) => {
+                ethernetSwitchTemplate = template;
+            });
+
+            ethernetSwitchTemplate.template_id = uuid();
+            ethernetSwitchTemplate.name = this.templateName;
+
+            for(let i=0; i<this.numberOfPorts; i++){
+                ethernetSwitchTemplate.ports_mapping.push({
+                    ethertype: '',
+                    name: `Ethernet${i}`,
+                    port_number: i,
+                    type: 'access',
+                    vlan: 1
+                });
+            }
+
+            this.builtInTemplatesService.addTemplate(this.server, ethernetSwitchTemplate).subscribe((ethernetSwitchTemplate) => {
+                this.router.navigate(['/server', this.server.id, 'preferences', 'builtin', 'ethernet-switches']);
+            });
+        } else {
+            this.toasterService.error(`Fill all required fields`);
+        }
+    }
+}

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

@@ -0,0 +1,55 @@
+<div class="content">
+    <div class="default-header">
+        <div class="row">
+            <h1 class="col">Ethernet switch configuration</h1>
+        </div>
+    </div>
+    <div class="default-content" *ngIf="ethernetSwitchTemplate">
+        <form [formGroup]="inputForm">
+            <mat-form-field class="row">
+                <input 
+                    matInput type="text" 
+                    [(ngModel)]="ethernetSwitchTemplate.name" 
+                    formControlName="templateName"
+                    placeholder="Template name">
+            </mat-form-field>
+            <mat-form-field class="row">
+                <input 
+                    matInput type="text" 
+                    [(ngModel)]="ethernetSwitchTemplate.default_name_format" 
+                    formControlName="defaultName"
+                    placeholder="Default name format">
+            </mat-form-field>
+            <mat-form-field class="row">
+                <input 
+                    matInput type="text" 
+                    [(ngModel)]="ethernetSwitchTemplate.symbol" 
+                    formControlName="symbol"
+                    placeholder="Symbol">
+            </mat-form-field>
+            <mat-form-field class="row">
+                <mat-select 
+                    placeholder="Category" 
+                    [ngModelOptions]="{standalone: true}" 
+                    [(ngModel)]="ethernetSwitchTemplate.category">
+                    <mat-option *ngFor="let category of categories" [value]="category[1]">
+                        {{category[0]}}
+                    </mat-option>
+                </mat-select>
+            </mat-form-field>
+            <mat-form-field class="select">
+                <mat-select 
+                placeholder="Console type" 
+                [ngModelOptions]="{standalone: true}" 
+                [(ngModel)]="ethernetSwitchTemplate.console_type">
+                    <mat-option *ngFor="let type of consoleTypes" [value]="type">
+                        {{type}}
+                    </mat-option>
+                </mat-select>
+            </mat-form-field>
+        </form>
+        <div class="buttons-bar">
+            <button mat-raised-button color="primary" (click)="onSave()">Save</button><br/>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,8 @@
+.row {
+    width: 100%;
+    margin-left: 0px;
+}
+
+.select {
+    width: 100%;
+}

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

@@ -0,0 +1,63 @@
+import { Component, OnInit } from "@angular/core";
+import { ActivatedRoute } from '@angular/router';
+import { ServerService } from '../../../../../services/server.service';
+import { Server } from '../../../../../models/server';
+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';
+
+
+@Component({
+    selector: 'app-ethernet-switches-template-details',
+    templateUrl: './ethernet-switches-template-details.component.html',
+    styleUrls: ['./ethernet-switches-template-details.component.scss']
+})
+export class EthernetSwitchesTemplateDetailsComponent implements OnInit {
+    server: Server;
+    ethernetSwitchTemplate: EthernetSwitchTemplate;
+    inputForm: FormGroup;
+
+    categories = [["Default", "guest"],
+                    ["Routers", "router"],
+                    ["Switches", "switch"],
+                    ["End devices", "end_device"],
+                    ["Security devices", "security_device"]];
+    consoleTypes: string[] = ['telnet', 'none'];
+
+    constructor(
+        private route: ActivatedRoute,
+        private serverService: ServerService,
+        private builtInTemplatesService: BuiltInTemplatesService,
+        private toasterService: ToasterService,
+        private formBuilder: FormBuilder
+    ) {
+        this.inputForm = this.formBuilder.group({
+            templateName: new FormControl('', Validators.required),
+            defaultName: new FormControl('', Validators.required),
+            symbol: new FormControl('', Validators.required)
+        });
+    }
+
+    ngOnInit() {
+        const server_id = this.route.snapshot.paramMap.get("server_id");
+        const template_id = this.route.snapshot.paramMap.get("template_id");
+        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
+            this.server = server;
+
+            this.builtInTemplatesService.getTemplate(this.server, template_id).subscribe((ethernetSwitchTemplate: EthernetSwitchTemplate) => {
+                this.ethernetSwitchTemplate = ethernetSwitchTemplate;
+            });
+        });
+    }
+
+    onSave() {
+        if (this.inputForm.invalid) {
+            this.toasterService.error(`Fill all required fields`);
+        } else {
+            this.builtInTemplatesService.saveTemplate(this.server, this.ethernetSwitchTemplate).subscribe((ethernetSwitchTemplate: EthernetSwitchTemplate) => {
+                this.toasterService.success("Changes saved");
+            });
+        }
+    }
+}

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

@@ -0,0 +1,17 @@
+<div class="content">
+    <div class="default-header">
+        <div class="row">
+            <h1 class="col">Ethernet switches templates</h1>
+            <button *ngIf="server" class="top-button" routerLink="/server/{{server.id}}/preferences/builtin/ethernet-switches/addtemplate" mat-raised-button color="primary">Add Ethernet switch template</button>
+        </div>
+    </div>
+    <div class="default-content">
+        <div class="container mat-elevation-z8">
+            <mat-nav-list *ngIf="server">
+                <mat-list-item *ngFor='let template of ethernetSwitchesTemplates' routerLink="{{template.template_id}}">
+                    {{template.name}}
+                </mat-list-item>
+            </mat-nav-list>
+        </div>
+    </div>
+</div>

src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-templates/ethernet-switches-templates.component.scss

@@ -0,0 +1,4 @@
+.top-button {
+    height: 36px;
+    margin-top: 22px
+}

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

@@ -0,0 +1,41 @@
+import { Component, OnInit } from "@angular/core";
+import { Server } from '../../../../../models/server';
+import { ActivatedRoute, ParamMap } from '@angular/router';
+import { ServerService } from '../../../../../services/server.service';
+import { switchMap } from 'rxjs/operators';
+import { BuiltInTemplatesService } from '../../../../../services/built-in-templates.service';
+import { EthernetSwitchTemplate } from '../../../../../models/templates/ethernet-switch-template';
+
+
+@Component({
+    selector: 'app-ethernet-switches-templates',
+    templateUrl: './ethernet-switches-templates.component.html',
+    styleUrls: ['./ethernet-switches-templates.component.scss']
+})
+export class EthernetSwitchesTemplatesComponent implements OnInit {
+    server: Server;
+    ethernetSwitchesTemplates: EthernetSwitchTemplate[];
+
+    constructor(
+        private route: ActivatedRoute,
+        private serverService: ServerService,
+        private builtInTemplatesService: BuiltInTemplatesService
+    ) {}
+
+    ngOnInit() {
+        this.route.paramMap
+        .pipe(
+          switchMap((params: ParamMap) => {
+            const server_id = params.get('server_id');
+            return this.serverService.get(parseInt(server_id, 10));
+          })
+        )
+        .subscribe((server: Server) => {
+            this.server = server;
+
+            this.builtInTemplatesService.getTemplates(this.server).subscribe((ethernetSwitchesTemplates: EthernetSwitchTemplate[]) => {
+                this.ethernetSwitchesTemplates = ethernetSwitchesTemplates.filter((elem) => elem.template_type === "ethernet_switch" && !elem.builtin);
+            });
+        });
+    }
+}

src/app/components/preferences/virtual-box/virtual-box-preferences/virtual-box-preferences.component.html

@@ -6,7 +6,7 @@
     </div>
     <div class="default-content">
         <mat-form-field class="form-field">
-            <input matInput type="text" [(ngModel)]="vpcsExecutable" placeholder="Path to VPCS executable"/>
+            <input matInput type="text" [(ngModel)]="vboxManagePath" placeholder="Path to VirtualBox manage"/>
         </mat-form-field>
     </div>
 </div>

src/app/models/ethernetHub/ports-mapping-enity.ts

@@ -1,4 +1,7 @@
 export interface PortsMappingEntity {
+    ethertype?: string;
     name: string;
     port_number: number;
+    type?: string;
+    vlan?: number;
 }

src/app/models/templates/cloud-template.ts

@@ -0,0 +1,17 @@
+import { PortsMappingEntity } from '../ethernetHub/ports-mapping-enity';
+
+export interface CloudTemplate {
+    builtin: boolean;
+    category: string;
+    compute_id: string;
+    default_name_format: string;
+    name: string;
+    ports_mapping?: PortsMappingEntity[];
+    remote_console_host: string;
+    remote_console_http_path: string;
+    remote_console_port: number;
+    remote_console_type: string;
+    symbol: string;
+    template_id: string;
+    template_type: string;
+}

src/app/models/templates/ethernet-switch-template.ts

@@ -0,0 +1,14 @@
+import { PortsMappingEntity } from '../ethernetHub/ports-mapping-enity';
+
+export interface EthernetSwitchTemplate {
+    builtin: boolean;
+    category: string;
+    compute_id: string;
+    console_type: string;
+    default_name_format: string;
+    name: string;
+    ports_mapping: PortsMappingEntity[];
+    symbol: string;
+    template_id: string;
+    template_type: string;
+}

src/app/services/template-mocks.service.ts

@@ -4,6 +4,8 @@ import { VpcsTemplate } from '../models/templates/vpcs-template';
 import { Observable, of } from 'rxjs';
 import { VirtualBoxTemplate } from '../models/templates/virtualbox-template';
 import { EthernetHubTemplate } from '../models/templates/ethernet-hub-template';
+import { CloudTemplate } from '../models/templates/cloud-template';
+import { EthernetSwitchTemplate } from '../models/templates/ethernet-switch-template';
 
 @Injectable()
 export class TemplateMocksService {
@@ -104,6 +106,23 @@ export class TemplateMocksService {
         return of(template);
     }
 
+    getCloudNodeTemplate() : Observable<CloudTemplate> {
+        let template = {
+            builtin: false,
+            category: 'guest',
+            compute_id: 'local',
+            default_name_format: 'Cloud{0}',
+            name: '',
+            ports_mapping: [],
+            remote_console_type: 'none',
+            symbol: ':/symbols/cloud.svg',
+            template_id: '',
+            template_type: 'cloud'
+        } as CloudTemplate;
+
+        return of(template);
+    }
+
     getEthernetHubTemplate() : Observable<EthernetHubTemplate> {
         let template: EthernetHubTemplate = {
             builtin: false,
@@ -119,4 +138,21 @@ export class TemplateMocksService {
 
         return of(template);
     }
+
+    getEthernetSwitchTemplate() : Observable<EthernetSwitchTemplate> {
+        let template: EthernetSwitchTemplate = {
+            builtin: false,
+            category: 'switch',
+            compute_id: 'local',
+            console_type: 'telnet',
+            default_name_format: 'Switch{0}',
+            name: '',
+            ports_mapping: [],
+            symbol: ':/symbols/ethernet_switch.svg',
+            template_id: '',
+            template_type: 'ethernet_switch'
+        }
+
+        return of(template);
+    }
 }