Support for templates for Ethernet Hubs

src/app/app-routing.module.ts

@@ -21,6 +21,10 @@ import { VirtualBoxPreferencesComponent } from './components/preferences/virtual
 import { VirtualBoxTemplatesComponent } from './components/preferences/virtual-box/virtual-box-templates/virtual-box-templates.component';
 import { VirtualBoxTemplateDetailsComponent } from './components/preferences/virtual-box/virtual-box-template-details/virtual-box-template-details.component';
 import { AddVirtualBoxTemplateComponent } from './components/preferences/virtual-box/add-virtual-box-template/add-virtual-box-template.component';
+import { BuiltInPreferencesComponent } from './components/preferences/built-in/built-in-preferences.component';
+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';
 
 const routes: Routes = [
   {
@@ -35,6 +39,12 @@ const routes: Routes = [
       { 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/qemu', component: QemuPreferencesComponent },
       { path: 'server/:server_id/preferences/qemu/templates', component: QemuVmTemplatesComponent },

src/app/app.module.ts

@@ -108,6 +108,11 @@ import { VirtualBoxTemplatesComponent } from './components/preferences/virtual-b
 import { VirtualBoxService } from './services/virtual-box.service';
 import { VirtualBoxTemplateDetailsComponent } from './components/preferences/virtual-box/virtual-box-template-details/virtual-box-template-details.component';
 import { AddVirtualBoxTemplateComponent } from './components/preferences/virtual-box/add-virtual-box-template/add-virtual-box-template.component';
+import { BuiltInPreferencesComponent } from './components/preferences/built-in/built-in-preferences.component';
+import { EthernetHubsTemplatesComponent } from './components/preferences/built-in/ethernet-hubs/ethernet-hubs-templates/ethernet-hubs-templates.component';
+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';
 
 if (environment.production) {
   Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
@@ -173,7 +178,11 @@ if (environment.production) {
     VirtualBoxPreferencesComponent,
     VirtualBoxTemplatesComponent,
     VirtualBoxTemplateDetailsComponent,
-    AddVirtualBoxTemplateComponent
+    AddVirtualBoxTemplateComponent,
+    BuiltInPreferencesComponent,
+    EthernetHubsTemplatesComponent,
+    EthernetHubsAddTemplateComponent,
+    EthernetHubsTemplateDetailsComponent
   ],
   imports: [
     BrowserModule,
@@ -224,7 +233,8 @@ if (environment.production) {
     QemuService,
     VpcsService,
     TemplateMocksService,
-    VirtualBoxService
+    VirtualBoxService,
+    BuiltInTemplatesService
   ],
   entryComponents: [
     AddServerDialogComponent,

src/app/components/preferences/built-in/built-in-preferences.component.html

@@ -0,0 +1,28 @@
+<div class="content">
+    <div class="default-header">
+        <div class="row">
+            <h1 class="col">Built-in preferences</h1>
+        </div>
+    </div>
+    <div class="default-content">
+        <div class="container mat-elevation-z8">
+            <mat-nav-list>
+                <mat-list-item>
+                    <button mat-button routerLink="/server/{{serverId}}/preferences/builtin/ethernet-hubs">
+                        Ethernet hubs
+                    </button>
+                </mat-list-item>
+                <mat-list-item>
+                    <button mat-button routerLink="/server/{{serverId}}/preferences/builtin/ethernet-switches">
+                        Ethernet switches
+                    </button>
+                </mat-list-item>
+                <mat-list-item>
+                    <button mat-button routerLink="/server/{{serverId}}/preferences/builtin/cloud-nodes">
+                        Cloud nodes
+                    </button>
+                </mat-list-item>
+            </mat-nav-list>
+        </div>
+    </div>
+</div>

src/app/components/preferences/built-in/built-in-preferences.component.ts

@@ -0,0 +1,22 @@
+import { Component, OnInit } from "@angular/core";
+import { ActivatedRoute, ParamMap } from '@angular/router';
+import { ServerService } from '../../../services/server.service';
+import { switchMap } from 'rxjs/operators';
+
+
+@Component({
+    selector: 'app-built-in-preferences',
+    templateUrl: './built-in-preferences.component.html',
+    styleUrls: ['./built-in-preferences.component.scss']
+})
+export class BuiltInPreferencesComponent implements OnInit {
+    public serverId: string = "";
+
+    constructor(
+        private route: ActivatedRoute
+    ) {}
+
+    ngOnInit() {
+        this.serverId = this.route.snapshot.paramMap.get("server_id");
+    }
+}

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

@@ -0,0 +1,18 @@
+<div class="content">
+    <div class="default-header">
+        <div class="row">
+            <h1 class="col">New Ethernet hub 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-hubs/ethernet-hubs-add-template/ethernet-hubs-add-template.component.scss

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

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

@@ -0,0 +1,70 @@
+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 { EthernetHubTemplate } from '../../../../../models/templates/ethernet-hub-template';
+
+
+@Component({
+    selector: 'app-ethernet-hubs-add-template',
+    templateUrl: './ethernet-hubs-add-template.component.html',
+    styleUrls: ['./ethernet-hubs-add-template.component.scss']
+})
+export class EthernetHubsAddTemplateComponent 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 ethernetHubTemplate: EthernetHubTemplate;
+
+            this.templateMocksService.getEthernetHubTemplate().subscribe((template: EthernetHubTemplate) => {
+                ethernetHubTemplate = template;
+            });
+
+            ethernetHubTemplate.template_id = uuid();
+            ethernetHubTemplate.name = this.templateName;
+
+            for(let i=0; i<this.numberOfPorts; i++){
+                ethernetHubTemplate.ports_mapping.push({
+                    name: `Ethernet${i}`,
+                    port_number: i
+                });
+            }
+
+            this.builtInTemplatesService.addTemplate(this.server, ethernetHubTemplate).subscribe((ethernetHubTemplate) => {
+                this.router.navigate(['/server', this.server.id, 'preferences', 'builtin', 'ethernet-hubs']);
+            });
+        } else {
+            this.toasterService.error(`Fill all required fields`);
+        }
+    }
+}

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

@@ -0,0 +1,52 @@
+<div class="content">
+    <div class="default-header">
+        <div class="row">
+            <h1 class="col">Ethernet hub settings</h1>
+        </div>
+    </div>
+    <div class="default-content" *ngIf="ethernetHubTemplate">
+        <form [formGroup]="inputForm">
+            <mat-form-field class="row">
+                <input 
+                    matInput type="text" 
+                    [(ngModel)]="ethernetHubTemplate.name" 
+                    formControlName="templateName"
+                    placeholder="Template name">
+            </mat-form-field>
+            <mat-form-field class="row">
+                <input 
+                    matInput type="text" 
+                    [(ngModel)]="ethernetHubTemplate.default_name_format" 
+                    formControlName="defaultName"
+                    placeholder="Default name format">
+            </mat-form-field>
+            <mat-form-field class="row">
+                <input 
+                    matInput type="text" 
+                    [(ngModel)]="ethernetHubTemplate.symbol" 
+                    formControlName="symbol"
+                    placeholder="Symbol">
+            </mat-form-field>
+            <mat-form-field class="row">
+                <mat-select 
+                    placeholder="Category" 
+                    [ngModelOptions]="{standalone: true}" 
+                    [(ngModel)]="ethernetHubTemplate.category">
+                    <mat-option *ngFor="let category of categories" [value]="category[1]">
+                        {{category[0]}}
+                    </mat-option>
+                </mat-select>
+            </mat-form-field>
+            <mat-form-field class="row">
+                <input 
+                    matInput type="number" 
+                    [(ngModel)]="numberOfPorts" 
+                    [ngModelOptions]="{standalone: true}"
+                    placeholder="Number of ports">
+            </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-hubs/ethernet-hubs-template-details/ethernet-hubs-template-details.component.scss

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

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

@@ -0,0 +1,72 @@
+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 { EthernetHubTemplate } from '../../../../../models/templates/ethernet-hub-template';
+import { BuiltInTemplatesService } from '../../../../../services/built-in-templates.service';
+
+
+@Component({
+    selector: 'app-ethernet-hubs-template-details',
+    templateUrl: './ethernet-hubs-template-details.component.html',
+    styleUrls: ['./ethernet-hubs-template-details.component.scss']
+})
+export class EthernetHubsTemplateDetailsComponent implements OnInit {
+    server: Server;
+    ethernetHubTemplate: EthernetHubTemplate;
+    numberOfPorts: number;
+    inputForm: FormGroup;
+
+    categories = [["Default", "guest"],
+                    ["Routers", "router"],
+                    ["Switches", "switch"],
+                    ["End devices", "end_device"],
+                    ["Security devices", "security_device"]];
+
+    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((ethernetHubTemplate: EthernetHubTemplate) => {
+                this.ethernetHubTemplate = ethernetHubTemplate;
+                this.numberOfPorts =  this.ethernetHubTemplate.ports_mapping.length;
+            });
+        });
+    }
+
+    onSave() {
+        if (this.inputForm.invalid || ! this.numberOfPorts) {
+            this.toasterService.error(`Fill all required fields`);
+        } else {
+            this.ethernetHubTemplate.ports_mapping = [];
+            for(let i=0; i<this.numberOfPorts; i++){
+                this.ethernetHubTemplate.ports_mapping.push({
+                    name: `Ethernet${i}`,
+                    port_number: i
+                });
+            }
+
+            this.builtInTemplatesService.saveTemplate(this.server, this.ethernetHubTemplate).subscribe((ethernetHubTemplate: EthernetHubTemplate) => {
+                this.toasterService.success("Changes saved");
+            });
+        }
+    }
+}

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

@@ -0,0 +1,17 @@
+<div class="content">
+    <div class="default-header">
+        <div class="row">
+            <h1 class="col">Ethernet hubs templates</h1>
+            <button *ngIf="server" class="top-button" routerLink="/server/{{server.id}}/preferences/builtin/ethernet-hubs/addtemplate" mat-raised-button color="primary">Add Ethernet hub 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 ethernetHubsTemplates' routerLink="{{template.template_id}}">
+                    {{template.name}}
+                </mat-list-item>
+            </mat-nav-list>
+        </div>
+    </div>
+</div>

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

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

src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-templates/ethernet-hubs-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 { EthernetHubTemplate } from '../../../../../models/templates/ethernet-hub-template';
+import { BuiltInTemplatesService } from '../../../../../services/built-in-templates.service';
+
+
+@Component({
+    selector: 'app-ethernet-hubs-templates',
+    templateUrl: './ethernet-hubs-templates.component.html',
+    styleUrls: ['./ethernet-hubs-templates.component.scss']
+})
+export class EthernetHubsTemplatesComponent implements OnInit {
+    server: Server;
+    ethernetHubsTemplates: EthernetHubTemplate[];
+
+    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((ethernetHubsTemplates: EthernetHubTemplate[]) => {
+                this.ethernetHubsTemplates = ethernetHubsTemplates.filter((elem) => elem.template_type === "ethernet_hub" && !elem.builtin);
+            });
+        });
+    }
+}

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

@@ -7,6 +7,11 @@
     <div class="default-content">
         <div class="container mat-elevation-z8">
             <mat-nav-list>
+                <mat-list-item>
+                    <button mat-button routerLink="/server/{{serverId}}/preferences/builtin">
+                        Built-in
+                    </button>
+                </mat-list-item>
                 <mat-list-item>
                     <button mat-button routerLink="/server/{{serverId}}/preferences/vpcs/templates">
                         VPCS

src/app/components/preferences/virtual-box/add-virtual-box-template/add-virtual-box-template.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from "@angular/core";
 import { Server } from '../../../../models/server';
-import { ActivatedRoute, ParamMap, Router, Router, Router, Router, Router, Router } from '@angular/router';
+import { ActivatedRoute, ParamMap, Router } from '@angular/router';
 import { ServerService } from '../../../../services/server.service';
 import { switchMap } from 'rxjs/operators';
 import { VirtualBoxService } from '../../../../services/virtual-box.service';

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

@@ -0,0 +1,4 @@
+export interface PortsMappingEntity {
+    name: string;
+    port_number: number;
+}

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

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

src/app/services/built-in-templates.service.ts

@@ -0,0 +1,27 @@
+import { Injectable } from "@angular/core";
+import { HttpServer } from './http-server.service';
+import { Server } from '../models/server';
+import { Observable } from 'rxjs';
+import { EthernetHubTemplate } from '../models/templates/ethernet-hub-template';
+
+@Injectable()
+export class BuiltInTemplatesService {
+    constructor(private httpServer: HttpServer) {}
+
+    getTemplates(server: Server): Observable<any[]> {
+        return this.httpServer.get<any[]>(server, '/templates') as Observable<any[]>;
+    }
+
+    getTemplate(server: Server, template_id: string): Observable<any> {
+        return this.httpServer.get<any>(server, `/templates/${template_id}`) as Observable<any>;
+    }
+
+    addTemplate(server: Server, ethernetHubTemplate: any): Observable<any> {
+        return this.httpServer.post<any>(server, `/templates`, ethernetHubTemplate) as Observable<any>;
+    }
+
+    saveTemplate(server: Server, ethernetHubTemplate: any): Observable<any> {
+        return this.httpServer.put<any>(server, `/templates/${ethernetHubTemplate.template_id}`, ethernetHubTemplate) as Observable<any>;
+
+    }
+}

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

@@ -3,6 +3,7 @@ import { QemuTemplate } from '../models/templates/qemu-template';
 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';
 
 @Injectable()
 export class TemplateMocksService {
@@ -102,4 +103,20 @@ export class TemplateMocksService {
 
         return of(template);
     }
+
+    getEthernetHubTemplate() : Observable<EthernetHubTemplate> {
+        let template: EthernetHubTemplate = {
+            builtin: false,
+            category: 'switch',
+            compute_id: 'local',
+            default_name_format: 'Hub{0}',
+            name: '',
+            ports_mapping: [],
+            symbol: ':/symbols/hub.svg',
+            template_id: '',
+            template_type: 'ethernet_hub'
+        }
+
+        return of(template);
+    }
 }