Dialog for VPCS added

src/app/app.module.ts

@@ -211,6 +211,8 @@ import { ProjectsFilter } from './filters/projectsFilter.pipe';
 import { ComputeService } from './services/compute.service';
 import { ReloadNodeActionComponent } from './components/project-map/context-menu/actions/reload-node-action/reload-node-action.component';
 import { SuspendNodeActionComponent } from './components/project-map/context-menu/actions/suspend-node-action/suspend-node-action.component';
+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';
 
 if (environment.production) {
   Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
@@ -349,7 +351,9 @@ if (environment.production) {
     ChangeSymbolActionComponent,
     EditProjectDialogComponent,
     ReloadNodeActionComponent,
-    SuspendNodeActionComponent
+    SuspendNodeActionComponent,
+    ConfigActionComponent,
+    ConfiguratorDialogVpcsComponent
   ],
   imports: [
     BrowserModule,
@@ -449,7 +453,8 @@ if (environment.production) {
     SaveProjectDialogComponent,
     InfoDialogComponent,
     ChangeSymbolDialogComponent,
-    EditProjectDialogComponent
+    EditProjectDialogComponent,
+    ConfiguratorDialogVpcsComponent
   ],
   bootstrap: [AppComponent]
 })

src/app/cartography/models/node.ts

@@ -5,6 +5,7 @@ export class Node {
   command_line: string;
   compute_id: string;
   console: number;
+  console_auto_start: boolean;
   console_host: string;
   console_type: string;
   first_port_name: string;

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

@@ -0,0 +1,4 @@
+<button mat-menu-item (click)="configureNode()">
+    <mat-icon>settings_applications</mat-icon>
+    <span>Configure</span>
+</button>

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

@@ -0,0 +1,58 @@
+import { Component, Input, OnInit, OnChanges } from '@angular/core';
+import { Server } from '../../../../../models/server';
+import { Node } from '../../../../../cartography/models/node';
+import { MatDialog, MatDialogRef } from '@angular/material';
+import { ConfiguratorDialogVpcsComponent } from '../../../node-editors/configurator/vpcs/configurator-vpcs.component';
+
+
+@Component({
+  selector: 'app-config-node-action',
+  templateUrl: './config-action.component.html'
+})
+export class ConfigActionComponent {
+  @Input() server: Server;
+  @Input() node: Node;
+  private conf = {
+    width: '600px',
+    autoFocus: false
+  };
+  dialogRef;
+
+  constructor(private dialog: MatDialog) {}
+
+  configureNode() {
+    if (this.node.node_type === 'vpcs') {
+      this.dialogRef = this.dialog.open(ConfiguratorDialogVpcsComponent, this.conf);
+    } else if (this.node.node_type === 'ethernet_hub') {
+
+    } else if (this.node.node_type === 'ethernet_switch') {
+
+    } else if (this.node.node_type === 'cloud') {
+
+    } else if (this.node.node_type === 'dynamips') {
+
+    } else if (this.node.node_type === 'iou') {
+
+    } else if (this.node.node_type === 'qemu') {
+
+    } else if (this.node.node_type === 'virtualbox') {
+
+    } else if (this.node.node_type === 'vmware') {
+
+    } else if (this.node.node_type === 'docker') {
+
+    } else if (this.node.node_type === 'nat') {
+
+    }  else if (this.node.node_type === 'frame_relay_switch') {
+
+    }  else if (this.node.node_type === 'atm_switch') {
+
+    }  else if (this.node.node_type === 'traceng') {
+
+    }
+
+    let instance = this.dialogRef.componentInstance;
+    instance.server = this.server;
+    instance.node = this.node;
+  }
+}

src/app/components/project-map/context-menu/context-menu.component.html

@@ -5,6 +5,10 @@
       [server]="server"
       [node]="nodes[0]"
     ></app-show-node-action>
+    <app-config-node-action *ngIf="nodes.length===1"
+      [server]="server"
+      [node]="nodes[0]"
+    ></app-config-node-action>
     <app-start-node-action *ngIf="nodes.length && labels.length===0" [server]="server" [nodes]="nodes"></app-start-node-action>
     <app-suspend-node-action *ngIf="nodes.length && labels.length===0" [server]="server" [nodes]="nodes"></app-suspend-node-action>
     <app-stop-node-action *ngIf="nodes.length && labels.length===0" [server]="server" [nodes]="nodes"></app-stop-node-action>

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

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

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

@@ -0,0 +1,39 @@
+<h1 mat-dialog-title>Configurator for node {{node.name}}</h1>
+
+<div class="modal-form-container">
+    <div class="content">
+        <div class="default-content">
+            <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>
+                    <mat-checkbox 
+                        [ngModelOptions]="{standalone: true}" 
+                        [(ngModel)]="node.console_auto_start">
+                        Auto start console
+                    </mat-checkbox>
+                </form>
+            </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/vpcs/configurator-vpcs.component.ts

@@ -0,0 +1,58 @@
+import { Component, OnInit, Input } from "@angular/core";
+import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
+import { VpcsConfigurationService } from '../../../../../services/vpcs-configuration.service';
+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';
+
+
+@Component({
+    selector: 'app-configurator-vpcs',
+    templateUrl: './configurator-vpcs.component.html',
+    styleUrls: ['../configurator.component.scss']
+})
+export class ConfiguratorDialogVpcsComponent implements OnInit {
+    server: Server;
+    node: Node;
+
+    inputForm: FormGroup;
+    consoleTypes: string[] = [];
+    categories = [];
+
+    constructor(
+        public dialogRef: MatDialogRef<ConfiguratorDialogVpcsComponent>,
+        public nodeService: NodeService,
+        private toasterService: ToasterService,
+        private formBuilder: FormBuilder,
+        private vpcsConfigurationService: VpcsConfigurationService
+    ) {
+        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.vpcsConfigurationService.getConsoleTypes();
+        this.categories = this.vpcsConfigurationService.getCategories();
+    }
+
+    onSaveClick() {
+        this.nodeService.updateNode(this.server, this.node).subscribe(() => {
+            this.toasterService.success(`Node ${this.node.name} updated.`);
+            this.onCancelClick();
+        });
+    }
+
+    onCancelClick() {
+        this.dialogRef.close();
+    }
+}

src/app/services/node.service.ts

@@ -86,6 +86,13 @@ export class NodeService {
     });
   }
 
+  updateNode(server: Server, node: Node): Observable<Node> {
+    return this.httpServer.put<Node>(server, `/projects/${node.project_id}/nodes/${node.node_id}`, {
+      console_type: node.console_type,
+      name: node.name
+    });
+  }
+
   delete(server: Server, node: Node) {
     return this.httpServer.delete<Node>(server, `/projects/${node.project_id}/nodes/${node.node_id}`);
   }
@@ -99,6 +106,10 @@ export class NodeService {
     });
   }
 
+  getNode(server: Server, node: Node) {
+    return this.httpServer.get(server, `/projects/${node.project_id}/nodes/${node.node_id}`)
+  }
+
   getConfiguration(server: Server, node: Node) {
     let urlPath: string = `/projects/${node.project_id}/nodes/${node.node_id}`