Merge branch 'master' into Export/import-project

src/app/app.module.ts

@@ -192,6 +192,9 @@ import { MapSettingService } from './services/mapsettings.service';
 import { ProjectMapMenuComponent } from './components/project-map/project-map-menu/project-map-menu.component';
 import { HelpComponent } from './components/help/help.component';
 import { SaveProjectDialogComponent } from './components/projects/save-project-dialog/save-project-dialog.component';
+import { ShowNodeActionComponent } from './components/project-map/context-menu/actions/show-node-action/show-node-action.component';
+import { InfoDialogComponent } from './components/project-map/info-dialog/info-dialog.component';
+import { InfoService } from './services/info.service';
 import { BringToFrontActionComponent } from './components/project-map/context-menu/actions/bring-to-front-action/bring-to-front-action.component';
 
 if (environment.production) {
@@ -311,11 +314,13 @@ if (environment.production) {
     NodesMenuComponent,
     AdbutlerComponent,
     ConsoleDeviceActionComponent,
+    ShowNodeActionComponent,
     ConsoleComponent,
     NodesMenuComponent,
     ProjectMapMenuComponent,
     HelpComponent,
     SaveProjectDialogComponent,
+    InfoDialogComponent,
     BringToFrontActionComponent
   ],
   imports: [
@@ -392,7 +397,8 @@ if (environment.production) {
     NodeCreatedLabelStylesFixer,
     NonNegativeValidator,
     RotationValidator,
-    MapSettingService
+    MapSettingService,
+    InfoService
   ],
   entryComponents: [
     AddServerDialogComponent,
@@ -409,7 +415,8 @@ if (environment.production) {
     DeleteConfirmationDialogComponent,
     HelpDialogComponent,
     StartCaptureDialogComponent,
-    SaveProjectDialogComponent
+    SaveProjectDialogComponent,
+    InfoDialogComponent
   ],
   bootstrap: [AppComponent]
 })

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

@@ -0,0 +1,4 @@
+<button mat-menu-item (click)="showNode()">
+    <mat-icon>info</mat-icon>
+    <span>Show node information</span>
+</button>

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

@@ -0,0 +1,26 @@
+import { Component, Input, OnInit, OnChanges } from '@angular/core';
+import { Node } from '../../../../../cartography/models/node';
+import { MatDialog } from '@angular/material';
+import { InfoDialogComponent } from '../../../info-dialog/info-dialog.component';
+import { Server } from '../../../../../models/server';
+
+@Component({
+  selector: 'app-show-node-action',
+  templateUrl: './show-node-action.component.html'
+})
+export class ShowNodeActionComponent {
+  @Input() node: Node;
+  @Input() server: Server
+
+  constructor(private dialog: MatDialog) {}
+
+  showNode() {
+    const dialogRef = this.dialog.open(InfoDialogComponent, {
+        width: '600px',
+        autoFocus: false
+    });
+    let instance = dialogRef.componentInstance;
+    instance.node = this.node;
+    instance.server = this.server;
+  }
+}

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

@@ -1,6 +1,10 @@
 <div class="context-menu" [style.left]="leftPosition" [style.top]="topPosition">
   <span [matMenuTriggerFor]="contextMenu"></span>
   <mat-menu #contextMenu="matMenu" class="context-menu-items">
+    <app-show-node-action *ngIf="nodes.length===1"
+      [server]="server"
+      [node]="nodes[0]"
+    ></app-show-node-action>
     <app-start-node-action *ngIf="nodes.length && labels.length===0" [server]="server" [nodes]="nodes"></app-start-node-action>
     <app-stop-node-action *ngIf="nodes.length && labels.length===0" [server]="server" [nodes]="nodes"></app-stop-node-action>
     <app-console-device-action

src/app/components/project-map/info-dialog/info-dialog.component.html

@@ -0,0 +1,25 @@
+<h1 mat-dialog-title>{{node.name}}</h1>
+
+<div class="modal-form-container">
+    <mat-tab-group>
+        <mat-tab label="General information">
+            <div class='textBox'>
+                <div *ngFor="let info of infoList">
+                    {{info}}
+                </div>
+            </div>
+        </mat-tab>
+        <mat-tab label="Command line">
+            <div *ngIf="node.status !== 'started'" class='textBox'>
+                Please start the node in order to get the command line information.
+            </div>
+            <div class="textBox">
+                {{commandLine}}
+            </div>
+        </mat-tab>
+    </mat-tab-group>
+</div>
+
+<div mat-dialog-actions>
+    <button mat-button (click)="onCloseClick()" color="accent">Close</button>
+</div>

src/app/components/project-map/info-dialog/info-dialog.component.scss

@@ -0,0 +1,3 @@
+.textBox {
+    margin-top: 10px;
+}

src/app/components/project-map/info-dialog/info-dialog.component.ts

@@ -0,0 +1,31 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { MatDialogRef } from '@angular/material';
+import { Node } from '../../../cartography/models/node';
+import { InfoService } from '../../../services/info.service';
+import { Server } from '../../../models/server';
+
+@Component({
+    selector: 'app-info-dialog',
+    templateUrl: './info-dialog.component.html',
+    styleUrls: ['./info-dialog.component.scss']
+})
+export class InfoDialogComponent implements OnInit {
+    @Input() server: Server;
+    @Input() node: Node;
+    infoList: string[] = [];
+    commandLine: string = '';
+
+    constructor(
+        public dialogRef: MatDialogRef<InfoDialogComponent>,
+        private infoService: InfoService
+    ) {}
+
+    ngOnInit() {
+        this.infoList = this.infoService.getInfoAboutNode(this.node, this.server);
+        this.commandLine = this.infoService.getCommandLine(this.node);
+    }
+
+    onCloseClick() {
+        this.dialogRef.close();
+    }
+}

src/app/components/template/template-list-dialog/template-list-dialog.component.html

@@ -1,4 +1,4 @@
-<div mat-dialog-content>
+<div mat-dialog-content class="content">
   <div class="header">
     <mat-form-field floatPlaceholder="never">
       <input matInput #filter placeholder="Filter templates" />

src/app/components/template/template-list-dialog/template-list-dialog.component.scss

@@ -16,3 +16,26 @@
   font-size: 16px;
   flex-grow: 1;
 }
+
+div {
+  scrollbar-color: darkgrey #263238;
+  scrollbar-width: thin;
+}
+
+mat-table {
+  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/services/info.service.ts

@@ -0,0 +1,77 @@
+import { Injectable } from "@angular/core";
+import { Node } from '../cartography/models/node';
+import { Port } from '../models/port';
+import { Server } from '../models/server';
+
+@Injectable()
+export class InfoService {
+    getInfoAboutNode(node: Node, server: Server): string[] {
+        let infoList: string[] = [];
+        if (node.node_type === 'cloud') {
+            infoList.push(`Cloud ${node.name} is always on.`);
+        } else if (node.node_type === 'nat') {
+            infoList.push(`NAT ${node.name} is always on.`);
+        } else if (node.node_type === 'ethernet-hub') {
+            infoList.push(`Ethernet hub ${node.name} is always on.`);
+        } else if (node.node_type === 'ethernet_switch') {
+            infoList.push(`Ethernet switch ${node.name} is always on.`);
+        } else if (node.node_type === 'frame_relay_switch') {
+            infoList.push(`Frame relay switch ${node.name} is always on.`);
+        } else if (node.node_type === 'atm_switch') {
+            infoList.push(`ATM switch ${node.name} is always on.`);
+        } else if (node.node_type === 'docker') {
+            infoList.push(`Docker ${node.name} is ${node.status}.`);
+        } else if (node.node_type === 'dynamips') {
+            infoList.push(`Dynamips ${node.name} is always on.`);
+        } else if (node.node_type === 'traceng') {
+            infoList.push(`TraceNG ${node.name} is always on.`);
+        } else if (node.node_type === 'virtualbox') {
+            infoList.push(`VirtualBox VM ${node.name} is ${node.status}.`);
+        } else if (node.node_type === 'vmware') {
+            infoList.push(`VMware VM ${node.name} is ${node.status}.`);
+        } else if (node.node_type === 'qemu') {
+            infoList.push(`QEMU VM ${node.name} is ${node.status}.`);
+        } else if (node.node_type === 'iou') {
+            infoList.push(`IOU ${node.name} is always on.`);
+        } else if (node.node_type === 'vpcs') {
+            infoList.push(`Node ${node.name} is ${node.status}.`);
+        }
+        infoList.push(`Running on server ${server.name} with port ${server.port}.`);
+        infoList.push(`Server ID is ${server.id}.`);
+        if (node.console_type !== 'none' && node.console_type !== 'null') {
+            infoList.push(`Console is on port ${node.console} and type is ${node.console_type}.`);
+        }
+        infoList = infoList.concat(this.getInfoAboutPorts(node.ports));
+        return infoList;
+    }
+
+    getInfoAboutPorts(ports: Port[]): string {
+        let response: string = `Ports: `
+        ports.forEach(port => {
+            response += `link_type: ${port.link_type}, 
+                        name: ${port.name}; `
+        });
+        response = response.substring(0, response.length - 2);
+        return response;
+    }
+
+    getCommandLine(node: Node): string {
+        if (node.node_type ===  "cloud" || 
+            node.node_type ===  "nat" || 
+            node.node_type ===  "ethernet_hub" || 
+            node.node_type ===  "ethernet_switch" || 
+            node.node_type ===  "frame_relay_switch" || 
+            node.node_type ===  "atm_switch" || 
+            node.node_type ===  "dynamips" || 
+            node.node_type ===  "traceng" || 
+            node.node_type ===  "iou") {
+            return 'Command line information is not supported for this type of node.';
+        } else {
+            if (node.status === 'started') {
+                return node.command_line;
+            } else {
+                return 'Please start the node in order to get the command line information.';
+            }
+        }
+    }
+}