Support for managing traceng templates added

src/app/app-routing.module.ts

@@ -53,6 +53,10 @@ import { CopyIouTemplateComponent } from './components/preferences/ios-on-unix/c
 import { ListOfSnapshotsComponent } from './components/snapshots/list-of-snapshots/list-of-snapshots.component';
 import { ConsoleComponent } from './components/settings/console/console.component';
 import { HelpComponent } from './components/help/help.component';
+import { TracengPreferencesComponent } from './components/preferences/traceng/traceng-preferences/traceng-preferences.component';
+import { TracengTemplatesComponent } from './components/preferences/traceng/traceng-templates/traceng-templates.component';
+import { AddTracengTemplateComponent } from './components/preferences/traceng/add-traceng/add-traceng-template.component';
+import { TracengTemplateDetailsComponent } from './components/preferences/traceng/traceng-template-details/traceng-template-details.component';
 
 const routes: Routes = [
   {
@@ -111,6 +115,11 @@ const routes: Routes = [
       { path: 'server/:server_id/preferences/vmware/templates/:template_id', component: VmwareTemplateDetailsComponent },
       { path: 'server/:server_id/preferences/vmware/addtemplate', component: AddVmwareTemplateComponent },
 
+      // { path: 'server/:server_id/preferences/traceng', component: TracengPreferencesComponent },
+      // { path: 'server/:server_id/preferences/traceng/templates', component: TracengTemplatesComponent },
+      // { path: 'server/:server_id/preferences/traceng/templates/:template_id', component: TracengTemplateDetailsComponent },
+      // { path: 'server/:server_id/preferences/traceng/addtemplate', component: AddTracengTemplateComponent },
+
       { path: 'server/:server_id/preferences/docker/templates', component: DockerTemplatesComponent },
       { path: 'server/:server_id/preferences/docker/templates/:template_id', component: DockerTemplateDetailsComponent },
       { path: 'server/:server_id/preferences/docker/templates/:template_id/copy', component: CopyDockerTemplateComponent },

src/app/app.module.ts

@@ -229,6 +229,11 @@ import { ConfiguratorDialogIosComponent } from './components/project-map/node-ed
 import { ConfiguratorDialogDockerComponent } from './components/project-map/node-editors/configurator/docker/configurator-docker.component';
 import { ConfiguratorDialogNatComponent } from './components/project-map/node-editors/configurator/nat/configurator-nat.component';
 import { ConfiguratorDialogTracengComponent } from './components/project-map/node-editors/configurator/traceng/configurator-traceng.component';
+import { AddTracengTemplateComponent } from './components/preferences/traceng/add-traceng/add-traceng-template.component';
+import { TracengPreferencesComponent } from './components/preferences/traceng/traceng-preferences/traceng-preferences.component';
+import { TracengTemplatesComponent } from './components/preferences/traceng/traceng-templates/traceng-templates.component';
+import { TracengService } from './services/traceng.service';
+import { TracengTemplateDetailsComponent } from './components/preferences/traceng/traceng-template-details/traceng-template-details.component';
 
 if (environment.production) {
   Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
@@ -385,7 +390,11 @@ if (environment.production) {
     ConfiguratorDialogIosComponent,
     ConfiguratorDialogDockerComponent,
     ConfiguratorDialogNatComponent,
-    ConfiguratorDialogTracengComponent
+    ConfiguratorDialogTracengComponent,
+    AddTracengTemplateComponent,
+    TracengPreferencesComponent,
+    TracengTemplatesComponent,
+    TracengTemplateDetailsComponent
   ],
   imports: [
     BrowserModule,
@@ -464,7 +473,8 @@ if (environment.production) {
     RotationValidator,
     MapSettingsService,
     InfoService,
-    ComputeService
+    ComputeService,
+    TracengService
   ],
   entryComponents: [
     AddServerDialogComponent,

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

@@ -31,6 +31,9 @@
                 <mat-list-item routerLink="/server/{{serverId}}/preferences/docker/templates">
                     Docker
                 </mat-list-item>
+                <!-- <mat-list-item routerLink="/server/{{serverId}}/preferences/traceng/templates">
+                    TraceNG
+                </mat-list-item> -->
             </mat-nav-list>
         </div>
     </div>

src/app/components/preferences/traceng/add-traceng/add-traceng-template.component.html

@@ -0,0 +1,23 @@
+<div class="content">
+    <div class="default-header">
+        <div class="row">
+            <h1 class="col">New VPCS node template</h1>
+        </div>
+    </div>
+    <div class="default-content">
+        <mat-card class="matCard">
+            <form [formGroup]="templateNameForm">
+                <mat-form-field class="form-field">
+                    <input matInput formControlName="templateName" type="text" placeholder="Template name">
+                </mat-form-field>
+                <mat-form-field class="form-field">
+                    <input matInput formControlName="ipAddress" type="text" placeholder="IP address">
+                </mat-form-field>
+            </form>
+        </mat-card>
+        <div class="buttons-bar">
+            <button mat-button class="cancel-button" (click)="goBack()">Cancel</button>
+            <button mat-raised-button color="primary" (click)="addTemplate()">Add template</button>
+        </div>
+    </div>
+</div>

src/app/components/preferences/traceng/add-traceng/add-traceng-template.component.ts

@@ -0,0 +1,67 @@
+import { Component, OnInit } from "@angular/core";
+import { Server } from '../../../../models/server';
+import { ActivatedRoute, Router } from '@angular/router';
+import { ServerService } from '../../../../services/server.service';
+import { ToasterService } from '../../../../services/toaster.service';
+import { v4 as uuid } from 'uuid';
+import { TemplateMocksService } from '../../../../services/template-mocks.service';
+import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
+import { TracengService } from '../../../../services/traceng.service';
+import { TracengTemplate } from '../../../../models/templates/traceng-template';
+
+
+@Component({
+    selector: 'app-add-traceng-template',
+    templateUrl: './add-traceng-template.component.html',
+    styleUrls: ['./add-traceng-template.component.scss', '../../preferences.component.scss']
+})
+export class AddTracengTemplateComponent implements OnInit {
+    server: Server;
+    templateName: string = '';
+    ipAddress: string = '';
+    templateNameForm: FormGroup
+    
+    constructor(
+        private route: ActivatedRoute,
+        private serverService: ServerService,
+        private tracengService: TracengService,
+        private router: Router,
+        private toasterService: ToasterService,
+        private templateMocksService: TemplateMocksService,
+        private formBuilder: FormBuilder
+    ) {
+        this.templateNameForm = this.formBuilder.group({
+            templateName: new FormControl(null, [Validators.required]),
+            ipAddress: new FormControl(null, [Validators.required])
+        });
+    }
+
+    ngOnInit() {
+        const server_id = this.route.snapshot.paramMap.get("server_id");
+        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
+            this.server = server;
+        });
+    }
+
+    goBack() {
+        this.router.navigate(['/server', this.server.id, 'preferences', 'traceng', 'templates']);
+    }
+
+    addTemplate() {
+        if (!this.templateNameForm.invalid) {
+            this.templateName = this.templateNameForm.get('templateName').value;
+            this.ipAddress = this.templateNameForm.get('ipAddress').value;
+            let tracengTemplate: TracengTemplate = this.templateMocksService.getTracengTemplate();
+
+            tracengTemplate.template_id = uuid();
+            tracengTemplate.name = this.templateName;
+            tracengTemplate.ip_address = this.ipAddress;
+
+            this.tracengService.addTemplate(this.server, tracengTemplate).subscribe(() => {
+                this.goBack();
+            });
+        } else {
+            this.toasterService.error(`Fill all required fields`);
+        }
+    }
+}

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

@@ -0,0 +1,12 @@
+<div class="content">
+    <div class="default-header">
+        <div class="row">
+            <h1 class="col">TraceNG preferences</h1>
+        </div>
+    </div>
+    <div class="default-content">
+        <mat-form-field class="form-field">
+            <input matInput type="text" [(ngModel)]="tracengExecutable" placeholder="Path to TraceNG executable"/>
+        </mat-form-field>
+    </div>
+</div>

src/app/components/preferences/traceng/traceng-preferences/traceng-preferences.component.scss

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

src/app/components/preferences/traceng/traceng-preferences/traceng-preferences.component.ts

@@ -0,0 +1,32 @@
+import { Component, OnInit } from "@angular/core";
+import { ActivatedRoute } from '@angular/router';
+import { Server } from '../../../../models/server';
+import { ServerService } from '../../../../services/server.service';
+
+
+@Component({
+    selector: 'app-traceng-preferences',
+    templateUrl: './traceng-preferences.component.html',
+    styleUrls: ['./traceng-preferences.component.scss']
+})
+export class TracengPreferencesComponent implements OnInit {
+    server: Server;
+    tracengExecutable: string;
+
+    constructor(
+        private route: ActivatedRoute,
+        private serverService: ServerService
+    ) {}
+
+    ngOnInit() {
+        const server_id = this.route.snapshot.paramMap.get("server_id");
+
+        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
+            this.server = server;
+        });
+    }
+
+    restoreDefaults(){
+        this.tracengExecutable = '';
+    }
+}

src/app/components/preferences/traceng/traceng-template-details/traceng-template-details.component.html

@@ -0,0 +1,40 @@
+<div class="content" [ngClass]="{ shadowed: isSymbolSelectionOpened }">
+    <div class="default-header">
+        <div class="row">
+            <h1 class="col">TraceNG device configuration</h1>
+        </div>
+    </div>
+    <div class="default-content" *ngIf="tracengTemplate">
+        <mat-card class="matCard">
+            <form [formGroup]="inputForm">
+                <mat-form-field class="form-field">
+                    <input 
+                        matInput type="text" 
+                        [(ngModel)]="tracengTemplate.name" 
+                        formControlName="templateName"
+                        placeholder="Template name">
+                </mat-form-field>
+                <mat-form-field class="form-field">
+                    <input 
+                        matInput type="text" 
+                        [(ngModel)]="tracengTemplate.default_name_format" 
+                        formControlName="defaultName"
+                        placeholder="Default name format">
+                </mat-form-field>
+                <mat-form-field class="form-field">
+                    <input 
+                        matInput type="text" 
+                        [(ngModel)]="tracengTemplate.symbol" 
+                        formControlName="symbol"
+                        placeholder="Symbol">
+                </mat-form-field>
+                <button mat-button class="symbolSelectionButton" (click)="chooseSymbol()">Choose symbol</button><br/><br/>
+            </form>
+        </mat-card>
+        <div class="buttons-bar">
+            <button class="cancel-button" (click)="goBack()" mat-button>Cancel</button>
+            <button mat-raised-button color="primary" (click)="onSave()">Save</button>
+        </div>
+    </div>
+</div>
+<app-symbols-menu *ngIf="isSymbolSelectionOpened && tracengTemplate" [server]="server" [symbol]="tracengTemplate.symbol" (symbolChangedEmitter)="symbolChanged($event)"></app-symbols-menu>

src/app/components/preferences/traceng/traceng-template-details/traceng-template-details.component.ts

@@ -0,0 +1,71 @@
+import { Component, OnInit } from "@angular/core";
+import { ActivatedRoute, Router } 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 { TracengService } from '../../../../services/traceng.service';
+import { TracengTemplate } from '../../../../models/templates/traceng-template';
+
+
+@Component({
+    selector: 'app-traceng-template-details',
+    templateUrl: './traceng-template-details.component.html',
+    styleUrls: ['./traceng-template-details.component.scss', '../../preferences.component.scss']
+})
+export class TracengTemplateDetailsComponent implements OnInit {
+    server: Server;
+    tracengTemplate: TracengTemplate;
+    inputForm: FormGroup;
+    isSymbolSelectionOpened: boolean = false;
+
+    constructor(
+        private route: ActivatedRoute,
+        private serverService: ServerService,
+        private tracengService: TracengService,
+        private toasterService: ToasterService,
+        private formBuilder: FormBuilder,
+        private router: Router
+    ) {
+        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.tracengService.getTemplate(this.server, template_id).subscribe((tracengTemplate: TracengTemplate) => {
+                this.tracengTemplate = tracengTemplate;
+            });
+        });
+    }
+
+    goBack() {
+        this.router.navigate(['/server', this.server.id, 'preferences', 'traceng', 'templates']);
+    }
+
+    onSave() {
+        if (this.inputForm.invalid) {
+            this.toasterService.error(`Fill all required fields`);
+        } else {
+            this.tracengService.saveTemplate(this.server, this.tracengTemplate).subscribe((tracengTemplate: TracengTemplate) => {
+                this.toasterService.success("Changes saved");
+            });
+        }
+    }
+
+    chooseSymbol() {
+        this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
+    }
+
+    symbolChanged(chosenSymbol: string) {
+        this.isSymbolSelectionOpened = !this.isSymbolSelectionOpened;
+        this.tracengTemplate.symbol = chosenSymbol;
+    }
+}

src/app/components/preferences/traceng/traceng-templates/traceng-templates.component.html

@@ -0,0 +1,32 @@
+<div class="content">
+    <div class="default-header">
+        <div class="row">
+            <h1 class="col">TraceNG node templates</h1>
+            <button *ngIf="server" class="top-button" class="cancel-button" routerLink="/server/{{server.id}}/preferences" mat-button>Back</button>
+            <button *ngIf="server" class="top-button" routerLink="/server/{{server.id}}/preferences/traceng/addtemplate" mat-raised-button color="primary">Add TraceNG template</button>
+        </div>
+    </div>
+    <app-empty-templates-list *ngIf="!tracengTemplates.length"></app-empty-templates-list>
+    <div class="default-content" *ngIf="tracengTemplates.length">
+        <div class="listcontainer mat-elevation-z8">
+            <mat-nav-list *ngIf="server">
+                <div class="list-item" *ngFor='let template of tracengTemplates'>
+                    <mat-list-item class="template-name" routerLink="{{template.template_id}}">{{template.name}}</mat-list-item>
+                    <button mat-button class="menu-button" [matMenuTriggerFor]="menu">
+                        <mat-icon>more_vert</mat-icon>
+                    </button>
+                    <mat-menu #menu="matMenu">
+                        <button mat-menu-item (click)="deleteTemplate(template)">
+                            <mat-icon>delete</mat-icon><span>Delete</span>
+                        </button>
+                    </mat-menu>
+                </div>
+            </mat-nav-list>
+        </div>
+    </div>
+</div>
+<app-delete-template
+    #deleteComponent
+    [server]="server"
+    (deleteEvent)="onDeleteEvent()">
+</app-delete-template>

src/app/components/preferences/traceng/traceng-templates/traceng-templates.component.ts

@@ -0,0 +1,46 @@
+import { Component, OnInit, ViewChild } from "@angular/core";
+import { Server } from '../../../../models/server';
+import { ActivatedRoute } from '@angular/router';
+import { ServerService } from '../../../../services/server.service';
+import { DeleteTemplateComponent } from '../../common/delete-template-component/delete-template.component';
+import { TracengTemplate } from '../../../../models/templates/traceng-template';
+import { TracengService } from '../../../../services/traceng.service';
+
+@Component({
+    selector: 'app-traceng-templates',
+    templateUrl: './traceng-templates.component.html',
+    styleUrls: ['./traceng-templates.component.scss', '../../preferences.component.scss']
+})
+export class TracengTemplatesComponent implements OnInit {
+    server: Server;
+    tracengTemplates: TracengTemplate[] = [];
+    @ViewChild(DeleteTemplateComponent, {static: false}) deleteComponent: DeleteTemplateComponent;
+
+    constructor(
+        private route: ActivatedRoute,
+        private serverService: ServerService,
+        private tracengService: TracengService
+    ) {}
+
+    ngOnInit() {
+        const server_id = this.route.snapshot.paramMap.get("server_id");
+        this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
+            this.server = server;
+            this.getTemplates();
+        });
+    }
+
+    getTemplates() {
+        this.tracengService.getTemplates(this.server).subscribe((tracengTemplates: TracengTemplate[]) => {
+            this.tracengTemplates = tracengTemplates.filter((elem) => elem.template_type === 'traceng' && !elem.builtin);
+        });
+    }
+
+    deleteTemplate(template: TracengTemplate) {
+        this.deleteComponent.deleteItem(template.name, template.template_id);
+    }
+
+    onDeleteEvent() {
+        this.getTemplates();
+    }
+}

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

@@ -0,0 +1,12 @@
+export interface TracengTemplate {
+    builtin: boolean;
+    category: string;
+    compute_id: string;
+    console_type: string;
+    default_name_format: string;
+    ip_address: string;
+    name: string;
+    symbol: string;
+    template_id: string;
+    template_type: string;
+}

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

@@ -11,9 +11,27 @@ import { VmwareTemplate } from '../models/templates/vmware-template';
 import { DockerTemplate } from '../models/templates/docker-template';
 import { CustomAdapter } from '../models/qemu/qemu-custom-adapter';
 import { IouTemplate } from '../models/templates/iou-template';
+import { TracengTemplate } from '../models/templates/traceng-template';
 
 @Injectable()
 export class TemplateMocksService {
+    getTracengTemplate() : TracengTemplate {
+        let template: TracengTemplate = {
+            builtin: false,
+            category: 'guest',
+            compute_id: 'local',
+            console_type: 'none',
+            default_name_format: 'TraceNG{0}',
+            ip_address: '',
+            name: '',
+            symbol: ':/symbols/classic/traceng.svg',
+            template_id: '',
+            template_type: 'traceng'
+        };
+
+        return template;
+    }
+
     getQemuTemplate() : Observable<QemuTemplate> {
         let template : QemuTemplate = {
             adapter_type: 'e1000',

src/app/services/traceng.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 { HttpHeaders } from '@angular/common/http';
+import { TracengTemplate } from '../models/templates/traceng-template';
+
+@Injectable()
+export class TracengService {
+    constructor(private httpServer: HttpServer) {}
+
+    getTemplates(server: Server): Observable<TracengTemplate[]> {
+        return this.httpServer.get<TracengTemplate[]>(server, '/templates') as Observable<TracengTemplate[]>;
+    }
+
+    getTemplate(server: Server, template_id: string): Observable<TracengTemplate> {
+        return this.httpServer.get<TracengTemplate>(server, `/templates/${template_id}`) as Observable<TracengTemplate>;
+    }
+
+    addTemplate(server: Server, vpcsTemplate: TracengTemplate): Observable<TracengTemplate> {
+        return this.httpServer.post<TracengTemplate>(server, `/templates`, vpcsTemplate) as Observable<TracengTemplate>;
+    }
+
+    saveTemplate(server: Server, vpcsTemplate: TracengTemplate): Observable<TracengTemplate> {
+        return this.httpServer.put<TracengTemplate>(server, `/templates/${vpcsTemplate.template_id}`, vpcsTemplate) as Observable<TracengTemplate>;
+    }
+}