Merge branch 'master' into adbutler-integration

.appveyor.yml

@@ -20,7 +20,7 @@ install:
 build_script:
   - yarn buildforelectron
   - "%PYTHON%\\python.exe -m pip install -r scripts\\requirements.txt"
-  - "%PYTHON%\\python.exe scripts\\build.py download"
+  - "%PYTHON%\\python.exe scripts\\build.py download -a"
   - "%PYTHON%\\python.exe scripts\\build.py build_exe -b dist/exe.gns3server -s"
   - "%PYTHON%\\python.exe scripts\\build.py validate -b dist"
   - "%PYTHON%\\python.exe scripts\\build.py download_dependencies -b dist"

.circleci/config.yml

@@ -47,7 +47,7 @@ jobs:
           command: |
             python3 -V
             pip3 install -r scripts/requirements.txt
-            python3 scripts/build.py download
+            python3 scripts/build.py download -a
             python3 scripts/build.py build_exe -b dist/exe.gns3server -s
             python3 scripts/build.py validate -b dist
 

.travis.yml

@@ -1,7 +1,7 @@
 language: node_js
 
 node_js:
-   - node
+   - '10' # use node for latest
 
 # Issue with Travis: https://github.com/travis-ci/travis-ci/issues/8836#issuecomment-356362524
 sudo: required
@@ -65,7 +65,7 @@ after_script:
   - yarn buildforelectron
   - |
     python3 -m pip install -r scripts/requirements.txt
-    python3 scripts/build.py download
+    python3 scripts/build.py download -a
     python3 scripts/build.py build_exe -b dist/exe.gns3server -s
     python3 scripts/build.py validate -b dist
   - yarn electron-builder --linux --x64 --publish always
@@ -73,7 +73,7 @@ after_script:
 # build sourcemaps and upload to Sentry
   # fix node issue with memory
   - |
-    if [ -n "$TRAVIS_TAG" ]; 
+    if [ -n "$TRAVIS_TAG" ]; then
       export NODE_OPTIONS=--max_old_space_size=4096
       export RELEASE_VERSION=$(node -e "const fs = require('fs'); let p = fs.readFileSync('package.json'); console.log(JSON.parse(p).version);")
       yarn ng build --configuration=production --base-href /static/web-ui/

console-executor.js

@@ -0,0 +1,65 @@
+const { spawn } = require('child_process');
+const { app } = require('electron');
+const path = require('path');
+
+async function setPATHEnv() {
+  const puttyLookup = [
+    path.join(__dirname, 'dist', 'putty'),
+    path.join(path.dirname(app.getPath('exe')), 'dist', 'putty')
+  ];
+
+  // prevent adding duplicates
+  let extra = [
+    ...puttyLookup,
+  ].filter((dir) => {
+    return process.env.PATH.indexOf(dir) < 0;
+  });
+  extra.push(process.env.PATH);
+  process.env.PATH = extra.join(";");
+}
+
+exports.openConsole = async (consoleRequest) => {
+  // const genericConsoleCommand = 'xfce4-terminal --tab -T "%d" -e "telnet %h %p"';
+  const genericConsoleCommand = 'putty.exe -telnet %h %p -loghost "%d"';
+
+  const command = prepareCommand(genericConsoleCommand, consoleRequest);
+  
+  console.log(`Setting up PATH`);
+  await setPATHEnv();
+  
+  console.log(`Starting console with command: '${command}'`);
+
+  let consoleProcess = spawn(command, [], {
+    shell :true
+  });
+
+  consoleProcess.stdout.on('data', (data) => {
+    console.log(`Console stdout is producing: ${data.toString()}`);
+  });
+
+  consoleProcess.stderr.on('data', (data) => {
+    console.log(`Console stderr is producing: ${data.toString()}`);
+  });
+
+  consoleProcess.on('close', (code) => {
+    console.log(`child process exited with code ${code}`);
+  });
+}
+
+
+function prepareCommand(consoleCommand, consoleRequest) {
+  const mapping = {
+    h: consoleRequest.host,
+    p: consoleRequest.port,
+    d: consoleRequest.name,
+    i: consoleRequest.project_id,
+    n: consoleRequest.node_id,
+    c: consoleRequest.server_url
+  };
+
+  for(var key in mapping) {
+    const regExp = new RegExp(`%${key}`, 'g');
+    consoleCommand = consoleCommand.replace(regExp, mapping[key]);
+  }
+  return consoleCommand;
+}

electron-builder.yml

@@ -16,6 +16,7 @@ files:
   - sentry.js
   - installed-software.js
   - local-server.js
+  - console-executor.js
   - package.json
 
 extraFiles:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gns3-web-ui",
-  "version": "2019.1.0-alpha.4dev",
+  "version": "2019.2.0-alpha.3dev",
   "author": {
     "name": "GNS3 Technology Inc.",
     "email": "developers@gns3.com"
@@ -38,23 +38,23 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^7.2.7",
-    "@angular/cdk": "^7.3.3",
-    "@angular/common": "^7.2.7",
-    "@angular/compiler": "^7.2.7",
-    "@angular/core": "^7.2.7",
-    "@angular/forms": "^7.2.7",
-    "@angular/http": "^7.2.7",
-    "@angular/material": "^7.3.3",
-    "@angular/platform-browser": "^7.2.7",
-    "@angular/platform-browser-dynamic": "^7.2.7",
-    "@angular/router": "^7.2.7",
+    "@angular/animations": "^7.2.14",
+    "@angular/cdk": "^7.3.7",
+    "@angular/common": "^7.2.14",
+    "@angular/compiler": "^7.2.14",
+    "@angular/core": "^7.2.14",
+    "@angular/forms": "^7.2.14",
+    "@angular/http": "^7.2.14",
+    "@angular/material": "^7.3.7",
+    "@angular/platform-browser": "^7.2.14",
+    "@angular/platform-browser-dynamic": "^7.2.14",
+    "@angular/router": "^7.2.14",
     "angular-persistence": "^1.0.1",
     "angular2-hotkeys": "^2.1.4",
     "angular2-indexeddb": "^1.2.3",
     "bootstrap": "4.3.1",
     "command-exists": "^1.2.8",
-    "core-js": "^2.6.5",
+    "core-js": "^3.0.1",
     "css-tree": "^1.0.0-alpha.29",
     "d3-ng2-service": "^2.1.0",
     "hammerjs": "^2.0.8",
@@ -62,47 +62,47 @@
     "material-design-icons": "^3.0.1",
     "ng2-file-upload": "^1.3.0",
     "ngx-electron": "^2.1.1",
-    "node-fetch": "^2.3.0",
+    "node-fetch": "^2.4.1",
     "notosans-fontface": "^1.1.0",
     "raven-js": "^3.27.0",
-    "rxjs": "^6.4.0",
-    "rxjs-compat": "^6.4.0",
+    "rxjs": "^6.5.1",
+    "rxjs-compat": "^6.5.1",
     "tree-kill": "^1.2.1",
     "typeface-roboto": "^0.0.54",
-    "yargs": "^13.2.1",
-    "zone.js": "^0.8.29"
+    "yargs": "^13.2.2",
+    "zone.js": "^0.9.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.13.3",
-    "@angular/cli": "^7.3.3",
-    "@angular/compiler-cli": "^7.2.7",
-    "@angular/language-service": "^7.2.7",
-    "@sentry/cli": "^1.40.0",
-    "@sentry/electron": "^0.16.0",
-    "@types/jasmine": "~3.3.9",
+    "@angular-devkit/build-angular": "~0.13.8",
+    "@angular/cli": "^7.3.8",
+    "@angular/compiler-cli": "^7.2.14",
+    "@angular/language-service": "^7.2.14",
+    "@sentry/cli": "^1.41.2",
+    "@sentry/electron": "^0.17.1",
+    "@types/jasmine": "~3.3.12",
     "@types/jasminewd2": "~2.0.6",
-    "@types/node": "~11.9.5",
-    "codelyzer": "~4.5.0",
-    "electron": "4.0.6",
-    "electron-builder": "20.38.2",
-    "jasmine-core": "~3.3.0",
+    "@types/node": "~11.13.8",
+    "codelyzer": "~5.0.1",
+    "electron": "5.0.0",
+    "electron-builder": "20.39.0",
+    "jasmine-core": "~3.4.0",
     "jasmine-spec-reporter": "~4.2.1",
-    "jquery": "^3.3.1",
-    "karma": "~4.0.0",
+    "jquery": "^3.4.0",
+    "karma": "~4.1.0",
     "karma-chrome-launcher": "~2.2.0",
     "karma-cli": "~2.0.0",
     "karma-coverage-istanbul-reporter": "^2.0.5",
     "karma-jasmine": "~2.0.1",
-    "karma-jasmine-html-reporter": "^1.4.0",
+    "karma-jasmine-html-reporter": "^1.4.2",
     "license-checker": "^25.0.1",
-    "node-sass": "^4.11.0",
-    "popper.js": "^1.14.7",
-    "prettier": "^1.16.4",
+    "node-sass": "^4.12.0",
+    "popper.js": "^1.15.0",
+    "prettier": "^1.17.0",
     "protractor": "~5.4.2",
-    "replace": "^1.0.1",
+    "replace": "^1.1.0",
     "ts-mockito": "^2.3.1",
-    "ts-node": "~8.0.2",
-    "tslint": "~5.13.0",
+    "ts-node": "~8.1.0",
+    "tslint": "~5.16.0",
     "tslint-config-prettier": "^1.18.0",
     "typescript": "<3.3.0"
   },

scripts/build.py

@@ -31,6 +31,7 @@ from multiprocessing.queues import Empty
 
 from cx_Freeze import setup, Executable
 
+DEFAULT_GNS3_SERVER_DEV_BRANCH = '2.2'
 
 FILE_DIR = os.path.dirname(os.path.realpath(__file__))
 WORKING_DIR = os.path.join(FILE_DIR, 'tmp')
@@ -40,6 +41,7 @@ SOURCE_DESTINATION = os.path.join(WORKING_DIR, 'source')
 BINARIES_EXTENSION = platform.system() == "Windows" and ".exe" or ""
 DEPENDENCIES = {
     'ubridge': {
+        'type': 'github',
         'releases': 'https://api.github.com/repos/GNS3/ubridge/releases',
         'version': 'LATEST',
         'files': {
@@ -50,8 +52,9 @@ DEPENDENCIES = {
         }
     },
     'vpcs': {
+        'type': 'github',
         'releases': 'https://api.github.com/repos/GNS3/vpcs/releases',
-        'version': '0.6.1',
+        'version': '0.6.2',
         'files': {
             'windows': [
                 'cygwin1.dll',
@@ -60,6 +63,7 @@ DEPENDENCIES = {
         }
     },
     'dynamips': {
+        'type': 'github',
         'releases': 'https://api.github.com/repos/GNS3/dynamips/releases',
         'version': '0.2.17',
         'files': {
@@ -69,6 +73,16 @@ DEPENDENCIES = {
                 'nvram_export.exe'
             ]
         }
+    },
+    'putty': {
+        'type': 'http',
+        'url': 'https://the.earth.li/~sgtatham/putty/{version}/w64/putty.exe',
+        'version': '0.71',
+        'files': {
+            'windows': [
+                'putty.exe',
+            ]
+        }
     }
 }
 
@@ -113,39 +127,93 @@ def prepare():
     os.makedirs(WORKING_DIR, exist_ok=True)
 
 
+def download_from_github(name, definition, output_directory):
+    response = requests.get(definition['releases'])
+    response.raise_for_status()
+    releases = response.json()
+
+    if definition['version'] == 'LATEST':
+        release = releases[0]
+    else:
+        release = list(filter(lambda x: x['tag_name'] == "v{}".format(definition['version']), releases))[0]
+
+    dependency_dir = os.path.join(output_directory, name)
+    os.makedirs(dependency_dir, exist_ok=True)
+
+    files = []
+    if platform.system() == "Windows":
+        files = definition['files']['windows']
+    
+    for filename in files:
+        dependency_file = os.path.join(dependency_dir, filename)
+        dependency_url = list(filter(lambda x: x['name'] == filename, release['assets']))[0]['browser_download_url']
+        download(dependency_url, dependency_file)
+        print('Downloaded {} to {}'.format(filename, dependency_file))
+
+
+def download_from_http(name, definition, output_directory):
+    url = definition['url'].format(version=definition['version'])
+
+    dependency_dir = os.path.join(output_directory, name)
+    os.makedirs(dependency_dir, exist_ok=True)
+
+    files = []
+    if platform.system() == "Windows":
+        files = definition['files']['windows']
+    
+    for filename in files:
+        dependency_file = os.path.join(dependency_dir, filename)
+        download(url, dependency_file)
+        print('Downloaded {} to {}'.format(filename, dependency_file))
+
+
 def download_dependencies_command(arguments):
     output_directory = os.path.join(os.getcwd(), arguments.b)
 
     for name, definition in DEPENDENCIES.items():
-        response = requests.get(definition['releases'])
-        response.raise_for_status()
-        releases = response.json()
+        if definition['type'] == 'github':
+            download_from_github(name, definition, output_directory)
+        if definition['type'] == 'http':
+            download_from_http(name, definition, output_directory)
 
-        if definition['version'] == 'LATEST':
-            release = releases[0]
-        else:
-            release = list(filter(lambda x: x['tag_name'] == "v{}".format(definition['version']), releases))[0]
 
-        dependency_dir = os.path.join(output_directory, name)
-        os.makedirs(dependency_dir, exist_ok=True)
+def get_latest_version():
+    response = requests.get('https://api.github.com/repos/GNS3/gns3-server/releases')
+    response.raise_for_status()
+    releases = response.json()
+    latest = list(filter(lambda r: r['tag_name'].startswith('v'.format(DEFAULT_GNS3_SERVER_DEV_BRANCH)), releases))[0]
+    return latest['tag_name'].replace('v', '')
 
-        files = []
-        if platform.system() == "Windows":
-            files = definition['files']['windows']
-        
-        for filename in files:
-            dependency_file = os.path.join(dependency_dir, filename)
-            dependency_url = list(filter(lambda x: x['name'] == filename, release['assets']))[0]['browser_download_url']
-            download(dependency_url, dependency_file)
-            print('Downloaded {} to {}'.format(filename, dependency_file))
 
+def is_tagged():
+    if 'TRAVIS_TAG' in os.environ.keys():
+      return True
+    if 'CIRCLE_TAG' in os.environ.keys():
+      return True
+    if os.environ.get('APPVEYOR_REPO_TAG', False) in (1, "True", "true"):
+      return True
+    
+
+def auto_ci_detection(arguments):
+    if is_tagged():
+      arguments.l = True
 
 
 def download_command(arguments):
+    if arguments.a:
+      auto_ci_detection(arguments)
+
     shutil.rmtree(SOURCE_DESTINATION, ignore_errors=True)
     os.makedirs(SOURCE_DESTINATION)
 
-    download("https://github.com/GNS3/gns3-server/archive/2.2.zip", SOURCE_ZIP)
+    if arguments.l:
+      version = get_latest_version()
+      download_url = "https://api.github.com/repos/GNS3/gns3-server/zipball/v{version}"
+    else:
+      version = DEFAULT_GNS3_SERVER_DEV_BRANCH
+      download_url = "https://github.com/GNS3/gns3-server/archive/{version}.zip"
+
+    download(download_url.format(version=version), SOURCE_ZIP)
 
     files = unzip(SOURCE_ZIP, SOURCE_DESTINATION)
     source_directory = os.path.join(SOURCE_DESTINATION, files[0].filename)
@@ -297,6 +365,9 @@ if __name__ == '__main__':
 
     parser_download = subparsers.add_parser(
         'download', help='Downloads source code of gns3server')
+    parser_download.add_argument('-l', action='store_true', help="Use the latest released version (incl. alpha), if not specified then dev version will be taken.")
+    parser_download.add_argument('-a', action='store_true', help="Automatically choose version based on CI/CD pipeline")
+
 
     parser_build = subparsers.add_parser('build_exe', help='Build gns3server')
     parser_build.add_argument('-b', help='Output directory')

src/app/app-routing.module.ts

@@ -51,6 +51,7 @@ import { CopyIosTemplateComponent } from './components/preferences/dynamips/copy
 import { CopyDockerTemplateComponent } from './components/preferences/docker/copy-docker-template/copy-docker-template.component';
 import { CopyIouTemplateComponent } from './components/preferences/ios-on-unix/copy-iou-template/copy-iou-template.component';
 import { ListOfSnapshotsComponent } from './components/snapshots/list-of-snapshots/list-of-snapshots.component';
+import { ConsoleComponent } from './components/settings/console/console.component';
 
 const routes: Routes = [
   {
@@ -62,6 +63,7 @@ const routes: Routes = [
       { path: 'bundled', component: BundledServerFinderComponent },
       { path: 'server/:server_id/projects', component: ProjectsComponent },
       { path: 'settings', component: SettingsComponent },
+      { path: 'settings/console', component: ConsoleComponent },
       { path: 'installed-software', component: InstalledSoftwareComponent },
       { path: 'server/:server_id/project/:project_id/snapshots', component: ListOfSnapshotsComponent },
       { path: 'server/:server_id/preferences', component: PreferencesComponent },

src/app/app.module.ts

@@ -168,6 +168,9 @@ import { ListOfSnapshotsComponent } from './components/snapshots/list-of-snapsho
 import { DateFilter } from './filters/dateFilter.pipe';
 import { NameFilter } from './filters/nameFilter.pipe';
 import { CustomAdaptersComponent } from './components/preferences/common/custom-adapters/custom-adapters.component';
+
+import { ConsoleDeviceActionComponent } from './components/project-map/context-menu/actions/console-device-action/console-device-action.component';
+import { ConsoleComponent } from './components/settings/console/console.component';
 import { NodesMenuComponent } from './components/project-map/nodes-menu/nodes-menu.component';
 import { PacketFiltersActionComponent } from './components/project-map/context-menu/actions/packet-filters-action/packet-filters-action.component';
 import { PacketFiltersDialogComponent } from './components/project-map/packet-capturing/packet-filters/packet-filters.component';
@@ -178,6 +181,9 @@ import { SuspendLinkActionComponent } from './components/project-map/context-men
 import { ResumeLinkActionComponent } from './components/project-map/context-menu/actions/resume-link-action/resume-link-action.component';
 import { StopCaptureActionComponent } from './components/project-map/context-menu/actions/stop-capture/stop-capture-action.component';
 import { AdbutlerComponent } from './components/adbutler/adbutler.component';
+import { ConsoleService } from './services/settings/console.service';
+import { DefaultConsoleService } from './services/settings/default-console.service';
+import { NodeCreatedLabelStylesFixer } from './components/project-map/helpers/node-created-label-styles-fixer';
 
 if (environment.production) {
   Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
@@ -293,7 +299,10 @@ if (environment.production) {
     ListOfSnapshotsComponent,
     CustomAdaptersComponent,
     NodesMenuComponent,
-    AdbutlerComponent
+    AdbutlerComponent,
+    ConsoleDeviceActionComponent,
+    ConsoleComponent,
+    NodesMenuComponent
   ],
   imports: [
     BrowserModule,
@@ -362,7 +371,10 @@ if (environment.production) {
     IouService,
     IouConfigurationService,
     RecentlyOpenedProjectService,
-    ServerManagementService
+    ServerManagementService,
+    ConsoleService,
+    DefaultConsoleService,
+    NodeCreatedLabelStylesFixer
   ],
   entryComponents: [
     AddServerDialogComponent,

src/app/components/drawings-listeners/drawing-added/drawing-added.component.spec.ts

@@ -58,7 +58,7 @@ describe('DrawingAddedComponent', () => {
     component.project = { project_id: 'sampleId' } as Project;
     component.selectedDrawing = 'rectangle';
     const pointToAddSelectedDataEvent = new AddedDataEvent(0, 0);
-    spyOn(mockedDrawingService, 'add').and.returnValue(Observable.of({}));
+    spyOn(mockedDrawingService, 'add').and.returnValue(Observable.of());
 
     mockedDrawingsEventSource.pointToAddSelected.emit(pointToAddSelectedDataEvent);
 

src/app/components/drawings-listeners/drawing-dragged/drawing-dragged.component.spec.ts

@@ -57,7 +57,7 @@ describe('DrawingDraggedComponent', () => {
       element: mapDrawingElement
     };
     const drawingDraggedDataEvent = new DraggedDataEvent<MapDrawing>(mapDrawing, 0, 0);
-    spyOn(mockedDrawingService, 'updatePosition').and.returnValue(Observable.of({}));
+    spyOn(mockedDrawingService, 'updatePosition').and.returnValue(Observable.of());
 
     mockedDrawingsEventSource.dragged.emit(drawingDraggedDataEvent);
 

src/app/components/drawings-listeners/drawing-resized/drawing-resized.component.spec.ts

@@ -60,7 +60,7 @@ describe('DrawingResizedComponent', () => {
       element: mapDrawingElement
     };
     const drawingResizedDataEvent = new ResizedDataEvent<MapDrawing>(mapDrawing, 0, 0, 100, 100);
-    spyOn(mockedDrawingService, 'updateSizeAndPosition').and.returnValue(Observable.of({}));
+    spyOn(mockedDrawingService, 'updateSizeAndPosition').and.returnValue(Observable.of());
 
     mockedDrawingsEventSource.resized.emit(drawingResizedDataEvent);
 

src/app/components/drawings-listeners/node-dragged/node-dragged.component.spec.ts

@@ -68,7 +68,7 @@ describe('NodeDraggedComponent', () => {
       z: 0
     };
     const draggedDataEvent = new DraggedDataEvent<MapNode>(mapNode, 0, 0);
-    spyOn(mockedNodeService, 'updatePosition').and.returnValue(Observable.of({}));
+    spyOn(mockedNodeService, 'updatePosition').and.returnValue(Observable.of());
 
     mockedNodesEventSource.dragged.emit(draggedDataEvent);
 

src/app/components/drawings-listeners/node-label-dragged/node-label-dragged.component.spec.ts

@@ -63,7 +63,7 @@ describe('NodeLabelDraggedComponent', () => {
       nodeId: 'node id'
     };
     const nodeDraggedDataEvent = new DraggedDataEvent<MapLabel>(mapLabel, 0, 0);
-    spyOn(mockedNodeService, 'updateLabel').and.returnValue(Observable.of({}));
+    spyOn(mockedNodeService, 'updateLabel').and.returnValue(Observable.of());
 
     mockedNodesEventSource.labelDragged.emit(nodeDraggedDataEvent);
 

src/app/components/drawings-listeners/text-added/text-added.component.spec.ts

@@ -59,7 +59,7 @@ describe('TextAddedComponent', () => {
   it('should call drawing service when text added', () => {
     component.project = { project_id: 'sampleId' } as Project;
     const textAddedDataEvent = new TextAddedDataEvent('savedText', 0, 0);
-    spyOn(mockedDrawingService, 'add').and.returnValue(Observable.of({}));
+    spyOn(mockedDrawingService, 'add').and.returnValue(Observable.of());
 
     mockedDrawingsEventSource.textAdded.emit(textAddedDataEvent);
 

src/app/components/drawings-listeners/text-edited/text-edited.component.spec.ts

@@ -55,7 +55,7 @@ describe('TextEditedComponent', () => {
       text_decoration: 'sample decoration'
     };
     const textEditedDataEvent = new TextEditedDataEvent('id', 'edited text', textElement);
-    spyOn(mockedDrawingService, 'updateText').and.returnValue(Observable.of({}));
+    spyOn(mockedDrawingService, 'updateText').and.returnValue(Observable.of());
 
     mockedDrawingsEventSource.textEdited.emit(textEditedDataEvent);
 

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

@@ -0,0 +1,4 @@
+<button mat-menu-item (click)="console()">
+  <mat-icon>web_asset</mat-icon>
+  <span>Console</span>
+</button>

src/app/components/project-map/context-menu/actions/console-device-action/console-device-action.component.spec.ts

@@ -0,0 +1,126 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatIconModule } from '@angular/material';
+import { ElectronService } from 'ngx-electron';
+
+import { ConsoleDeviceActionComponent } from './console-device-action.component';
+import { ServerService } from '../../../../../services/server.service';
+import { MockedServerService } from '../../../../../services/server.service.spec';
+import { ToasterService } from '../../../../../services/toaster.service';
+import { MockedToasterService } from '../../../../../services/toaster.service.spec';
+import { SettingsService } from '../../../../../services/settings.service';
+import { MockedSettingsService } from '../../../../../services/settings.service.spec';
+import { Node } from '../../../../../cartography/models/node';
+import { Server } from '../../../../../models/server';
+
+
+describe('ConsoleDeviceActionComponent', () => {
+  let component: ConsoleDeviceActionComponent;
+  let fixture: ComponentFixture<ConsoleDeviceActionComponent>;
+  let electronService;
+  let server: Server;
+  let mockedSettingsService: MockedSettingsService;
+  let mockedServerService: MockedServerService;
+  let mockedToaster: MockedToasterService
+
+  beforeEach(() => {
+    electronService = {
+      isElectronApp: true,
+      remote: {
+        require: (file) => {
+          return {
+            openConsole() {}
+          }
+        }
+      }
+    };
+
+    mockedSettingsService = new MockedSettingsService();
+    mockedServerService = new MockedServerService();
+    mockedToaster = new MockedToasterService();
+
+    server = { host: 'localhost', 'port': 222} as Server;
+  })
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      providers: [
+        { provide: ElectronService, useValue: electronService },
+        { provide: ServerService, useValue: mockedServerService },
+        { provide: SettingsService, useValue: mockedSettingsService },
+        { provide: ToasterService, useValue: mockedToaster }
+      ],
+      imports: [
+        MatIconModule
+      ],
+      declarations: [ ConsoleDeviceActionComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ConsoleDeviceActionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('console to nodes', () => {
+    let nodes: Node[];
+    
+    beforeEach(() => {
+      nodes = [{
+        status: 'started',
+        console_type: 'telnet',
+        console_host: 'host',
+        console: 999,
+        name: 'Node 1',
+        project_id: '1111',
+        node_id: '2222',
+      } as Node];
+      
+      component.nodes = nodes;
+      component.server = server;
+
+      mockedSettingsService.set('console_command', 'command');
+      spyOn(component, 'openConsole');
+    });
+
+    it('should console to device', async () => {
+      await component.console();
+
+      expect(component.openConsole).toHaveBeenCalledWith({
+        command: 'command',
+        type: 'telnet',
+        host: 'host',
+        port: 999,
+        name: 'Node 1',
+        project_id: '1111',
+        node_id: '2222',
+        server_url: 'localhost:222'
+      });
+    });
+
+    it('should show message when command is not defined', async () => {
+      mockedSettingsService.set('console_command', undefined);
+      await component.console();
+      expect(component.openConsole).not.toHaveBeenCalled();
+    });
+
+    it('should show message when there is no started nodes', async () => {
+      nodes[0]['status'] = 'stopped';
+      await component.console();
+      expect(component.openConsole).not.toHaveBeenCalled();
+    });
+
+    it('should only start running nodes', async () => {
+      nodes.push({
+        status: 'stopped'
+      } as Node);
+      await component.console();
+      expect(component.openConsole).toHaveBeenCalledTimes(1);
+    });
+  });
+});

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

@@ -0,0 +1,64 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { Node } from '../../../../../cartography/models/node';
+import { Server } from '../../../../../models/server';
+import { ElectronService } from 'ngx-electron';
+import { ServerService } from '../../../../../services/server.service';
+import { SettingsService } from '../../../../../services/settings.service';
+import { ToasterService } from '../../../../../services/toaster.service';
+
+@Component({
+  selector: 'app-console-device-action',
+  templateUrl: './console-device-action.component.html'
+})
+export class ConsoleDeviceActionComponent implements OnInit {
+  @Input() server: Server;
+  @Input() nodes: Node[];
+
+  constructor(
+    private electronService: ElectronService,
+    private serverService: ServerService,
+    private settingsService: SettingsService,
+    private toasterService: ToasterService
+  ) { }
+
+  ngOnInit() {
+  }
+
+  async console() {
+    const consoleCommand = this.settingsService.get<string>('console_command');
+
+    if(consoleCommand === undefined) {
+      this.toasterService.error('Console command is not defined. Please change it in the Settings.');
+      return;
+    }
+
+    const startedNodes = this.nodes.filter(node => node.status === 'started');
+
+    if(startedNodes.length === 0) {
+      this.toasterService.error('Device needs to be started in order to console to it.');
+      return;
+    }
+
+    for(var node of this.nodes) {
+      if(node.status !== 'started') {
+        continue;
+      }
+
+      const consoleRequest = {
+        command: consoleCommand,
+        type: node.console_type,
+        host: node.console_host,
+        port: node.console,
+        name: node.name,
+        project_id: node.project_id,
+        node_id: node.node_id,
+        server_url: this.serverService.getServerUrl(this.server)
+      };
+      await this.openConsole(consoleRequest);
+    }
+  }
+
+  async openConsole(request) {
+    return await this.electronService.remote.require('./console-executor.js').openConsole(request);
+  }
+}

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

@@ -3,6 +3,11 @@
   <mat-menu #contextMenu="matMenu" class="context-menu-items">
     <app-start-node-action *ngIf="nodes.length" [server]="server" [nodes]="nodes"></app-start-node-action>
     <app-stop-node-action *ngIf="nodes.length" [server]="server" [nodes]="nodes"></app-stop-node-action>
+    <app-console-device-action
+      *ngIf="!projectService.isReadOnly(project) && nodes.length && isElectronApp"
+      [server]="server"
+      [nodes]="nodes"
+    ></app-console-device-action>
     <app-edit-style-action *ngIf="drawings.length===1 && !hasTextCapabilities"
       [server]="server"
       [project]="project"

src/app/components/project-map/context-menu/context-menu.component.spec.ts

@@ -9,17 +9,23 @@ import { Drawing } from '../../../cartography/models/drawing';
 import { RectElement } from '../../../cartography/models/drawings/rect-element';
 import { TextElement } from '../../../cartography/models/drawings/text-element';
 import { Server } from '../../../models/server';
+import { ElectronService } from 'ngx-electron';
 
 describe('ContextMenuComponent', () => {
   let component: ContextMenuComponent;
   let fixture: ComponentFixture<ContextMenuComponent>;
 
   beforeEach(async(() => {
+    const electronMock = {
+      isElectronApp: true
+    };
+
     TestBed.configureTestingModule({
       imports: [MatMenuModule, BrowserModule],
       providers: [
         { provide: ChangeDetectorRef }, 
-        { provide: ProjectService, useClass: MockedProjectService }
+        { provide: ProjectService, useClass: MockedProjectService },
+        { provide: ElectronService, useValue: electronMock}
       ],
       declarations: [ContextMenuComponent],
       schemas: [NO_ERRORS_SCHEMA]
@@ -37,6 +43,10 @@ describe('ContextMenuComponent', () => {
     expect(component).toBeTruthy();
   });
 
+  it('should define property if running in electron ', () => {
+    expect(component.isElectronApp).toBeTruthy();
+  });
+
   it('should reset capabilities while opening menu for node', () => {
     component.contextMenu = { openMenu() {} } as MatMenuTrigger;
     var spy = spyOn<any>(component, 'resetCapabilities');

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

@@ -9,6 +9,7 @@ import { Drawing } from '../../../cartography/models/drawing';
 import { TextElement } from '../../../cartography/models/drawings/text-element';
 import { Label } from '../../../cartography/models/label';
 import { Link } from '../../../models/link';
+import { ElectronService } from 'ngx-electron';
 
 
 @Component({
@@ -30,17 +31,21 @@ export class ContextMenuComponent implements OnInit {
   labels: Label[] = [];
   links: Link[] = [];
 
-  hasTextCapabilities: boolean = false;
+  hasTextCapabilities = false;
+  isElectronApp = false;
   isBundledServer: boolean = false;
 
   constructor(
     private sanitizer: DomSanitizer,
     private changeDetector: ChangeDetectorRef,
+    private electronService: ElectronService,
     public projectService: ProjectService
   ) {}
 
   ngOnInit() {
     this.setPosition(0, 0);
+
+    this.isElectronApp = this.electronService.isElectronApp;
     this.isBundledServer = this.server.location === 'bundled';
   }
 

src/app/components/project-map/helpers/node-created-label-styles-fixer.spec.ts

@@ -0,0 +1,37 @@
+import { NodeCreatedLabelStylesFixer } from "./node-created-label-styles-fixer";
+import { Node } from '../../../cartography/models/node';
+import { Label } from '../../../cartography/models/label';
+
+describe('NodeCreatedLabelStylesFixer', () => {
+  let fixer: NodeCreatedLabelStylesFixer;
+  let calculator;
+
+  beforeEach(() => {
+    calculator = {
+      calculate: (text, styles) => {
+        return {
+          width: 50,
+          height: 10
+        };
+      }
+    };
+
+    fixer = new NodeCreatedLabelStylesFixer(
+      calculator
+    );
+  });
+
+  it('should fix label styles and position', () => {
+    const node = new Node();
+    node.width = 100;
+    node.height = 100;
+    node.label = new Label();
+    node.label.text = "my new label";
+
+    const fixed = fixer.fix(node);
+
+    expect(fixed.label.style).toEqual('font-family: TypeWriter;font-size: 10.0;font-weight: bold;fill: #000000;fill-opacity: 1.0;');
+    expect(fixed.label.x).toEqual(25);
+    expect(fixed.label.y).toEqual(-18);
+  });
+});

src/app/components/project-map/helpers/node-created-label-styles-fixer.ts

@@ -0,0 +1,24 @@
+import { Injectable } from '@angular/core';
+import { Node } from '../../../cartography/models/node';
+import { FontBBoxCalculator } from '../../../cartography/helpers/font-bbox-calculator';
+
+@Injectable()
+export class NodeCreatedLabelStylesFixer {
+  MARGIN_BETWEEN_NODE_AND_LABEL = 8;
+
+  constructor(
+    private fontBBCalculator: FontBBoxCalculator
+  ) {}
+
+  fix(node: Node): Node {
+    node.label.style = 'font-family: TypeWriter;font-size: 10.0;font-weight: bold;fill: #000000;fill-opacity: 1.0;';
+    const bb = this.fontBBCalculator.calculate(node.label.text, node.label.style);
+
+    // center label
+    node.label.x = node.width / 2 - bb.width / 2;
+
+    // move above the node
+    node.label.y = -bb.height - this.MARGIN_BETWEEN_NODE_AND_LABEL;
+    return node;
+  }
+}

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

@@ -103,6 +103,21 @@
     >
       <mat-icon>create</mat-icon>
     </button>
+    <input
+      type="file"
+      accept=".svg, .bmp, .jpeg, .jpg, .gif, .png"
+      class="non-visible"
+      #file
+      (change)="uploadImageFile($event)"
+    />
+    <button
+      matTooltip="Insert a picture"
+      mat-icon-button
+      class="menu-button"
+      (click)="file.click()"
+    >
+      <mat-icon>image</mat-icon>
+    </button>
     <button
       matTooltip="Draw a rectangle"
       mat-icon-button

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

@@ -39,6 +39,10 @@ g.node:hover {
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 
+.non-visible {
+  display: none;
+}
+
 #menu-wrapper {
   position: fixed;
   background: transparent;
@@ -76,7 +80,7 @@ g.node:hover {
 }
 
 .extended {
-  width: 570px !important;
+  width: 640px !important;
   height: 100%;
   overflow: hidden;
 }

src/app/components/project-map/project-map.component.spec.ts

@@ -42,6 +42,7 @@ import { Link } from '../../models/link';
 import { Project } from '../../models/project';
 import { CapturingSettings } from '../../models/capturingSettings';
 import { LinkWidget } from '../../cartography/widgets/link';
+import { NodeCreatedLabelStylesFixer } from './helpers/node-created-label-styles-fixer';
 
 export class MockedProgressService {
   public activate() {}
@@ -182,8 +183,13 @@ describe('ProjectMapComponent', () => {
   let drawingsDataSource = new MockedDrawingsDataSource();
   let nodesDataSource = new MockedNodesDataSource();
   let linksDataSource = new MockedLinksDataSource();
+  let nodeCreatedLabelStylesFixer;
 
   beforeEach(async(() => {
+    nodeCreatedLabelStylesFixer = {
+      fix: (node) => node
+    };
+
     TestBed.configureTestingModule({
       imports: [MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule],
       providers: [
@@ -214,6 +220,7 @@ describe('ProjectMapComponent', () => {
           provide: RecentlyOpenedProjectService,
           useClass: RecentlyOpenedProjectService
         },
+        { provide: NodeCreatedLabelStylesFixer, useValue: nodeCreatedLabelStylesFixer}
       ],
       declarations: [ProjectMapComponent, D3MapComponent, ...ANGULAR_MAP_DECLARATIONS],
       schemas: [NO_ERRORS_SCHEMA]

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

@@ -43,6 +43,7 @@ import { RecentlyOpenedProjectService } from '../../services/recentlyOpenedProje
 import { MapLink } from '../../cartography/models/map/map-link';
 import { MapLinkToLinkConverter } from '../../cartography/converters/map/map-link-to-link-converter';
 import { LinkWidget } from '../../cartography/widgets/link';
+import { NodeCreatedLabelStylesFixer } from './helpers/node-created-label-styles-fixer';
 
 
 @Component({
@@ -108,7 +109,8 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     private toolsService: ToolsService,
     private selectionManager: SelectionManager,
     private selectionTool: SelectionTool,
-    private recentlyOpenedProjectService: RecentlyOpenedProjectService
+    private recentlyOpenedProjectService: RecentlyOpenedProjectService,
+    private nodeCreatedLabelStylesFixer: NodeCreatedLabelStylesFixer
   ) {}
 
   ngOnInit() {
@@ -274,6 +276,12 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     
     this.nodeService.createFromTemplate(this.server, this.project, template, 0, 0, 'local').subscribe(() => {
       this.projectService.nodes(this.server, this.project.project_id).subscribe((nodes: Node[]) => {
+
+        nodes.filter((node) => node.label.style === null).forEach((node) => {
+          const fixedNode = this.nodeCreatedLabelStylesFixer.fix(node);
+          this.nodeService.updateLabel(this.server, node, fixedNode.label).subscribe();
+        });
+
         this.nodesDataSource.set(nodes);
       });
     });
@@ -366,6 +374,27 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     this.drawTools.visibility = true;
   }
 
+  public uploadImageFile(event) {
+    this.readImageFile(event.target);
+  }
+
+  private readImageFile(fileInput) {
+    let file: File = fileInput.files[0];
+    let fileReader: FileReader = new FileReader();
+    let imageToUpload = new Image();
+
+    fileReader.onloadend = () => {
+      let image = fileReader.result;
+      let svg = `<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" 
+                height=\"${imageToUpload.height}\" width=\"${imageToUpload.width}\">\n<image height=\"${imageToUpload.height}\" width=\"${imageToUpload.width}\" 
+                xlink:href=\"${image}\"/>\n</svg>`;
+      this.drawingService.add(this.server, this.project.project_id, -(imageToUpload.width/2), -(imageToUpload.height/2), svg).subscribe(() => {});
+    }
+        
+    imageToUpload.onload = () => { fileReader.readAsDataURL(file) };
+    imageToUpload.src = window.URL.createObjectURL(file);
+  }
+
   public ngOnDestroy() {
     this.drawingsDataSource.clear();
     this.nodesDataSource.clear();

src/app/components/settings/console/console.component.html

@@ -0,0 +1,28 @@
+<div class="content">
+  <div class="default-header">
+      <div class="row">
+          <h1 class="col">Console settings</h1>
+      </div>
+  </div>
+  <div class="default-content">
+      <mat-card>
+          <form [formGroup]="consoleForm">
+            <mat-form-field class="form-field full-width-field">
+              <textarea matInput formControlName="command" placeholder="Command"></textarea>
+            </mat-form-field>
+            <div class="help">The following variables are replaced by GNS3:<br />
+              %h: console IP or hostname<br />
+              %p: console port<br />
+              %s: path of the serial connection<br />
+              %d: title of the console<br />
+              %i: Project UUID<br />
+              %c: server URL (http://user:password@server:port)
+            </div>
+          </form>
+      </mat-card>
+      <div class="buttons-bar">
+          <button class="cancel-button" (click)="goBack()" mat-button>Cancel</button>
+          <button mat-raised-button color="primary" (click)="save()">Save</button><br/>
+      </div>
+  </div>
+</div>

src/app/components/settings/console/console.component.scss

@@ -0,0 +1,3 @@
+.help {
+  font-size: 14px;
+}

src/app/components/settings/console/console.component.spec.ts

@@ -0,0 +1,72 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ConsoleComponent } from './console.component';
+import { MatFormFieldModule, MatCardModule, MatInputModule } from '@angular/material';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { ConsoleService } from '../../../services/settings/console.service';
+import { ToasterService } from '../../../services/toaster.service';
+import { MockedToasterService } from '../../../services/toaster.service.spec';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { Router } from '@angular/router';
+
+
+describe('ConsoleComponent', () => {
+  let component: ConsoleComponent;
+  let fixture: ComponentFixture<ConsoleComponent>;
+  let consoleService;
+  let router;
+  let toaster: MockedToasterService;
+
+  beforeEach(async(() => {
+    consoleService = {
+      command: 'command'
+    };
+
+    router = {
+      navigate: jasmine.createSpy('navigate')
+    };
+
+    toaster = new MockedToasterService();
+
+    TestBed.configureTestingModule({
+      providers: [
+        { provide: ConsoleService, useValue: consoleService },
+        { provide: ToasterService, useValue: toaster },
+        { provide: Router, useValue: router}
+      ],
+      imports: [ FormsModule, ReactiveFormsModule, MatFormFieldModule, MatCardModule, MatInputModule, NoopAnimationsModule ],
+      declarations: [ ConsoleComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ConsoleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should set default command', () => {
+    component.ngOnInit();
+    expect(component.consoleForm.value.command).toEqual('command');
+  })
+
+  it('should go back', () => {
+    component.goBack();
+    expect(router.navigate).toHaveBeenCalledWith(['/settings']);
+  });
+
+
+  it('should update console command', () => {
+    component.consoleForm.get('command').setValue('newCommand');
+    spyOn(component, 'goBack');
+    component.save();
+    expect(toaster.success.length).toEqual(1);
+    expect(component.goBack).toHaveBeenCalled();
+  });
+
+});

src/app/components/settings/console/console.component.ts

@@ -0,0 +1,40 @@
+import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormControl, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+import { ConsoleService } from '../../../services/settings/console.service';
+import { ToasterService } from '../../../services/toaster.service';
+
+@Component({
+  selector: 'app-console',
+  templateUrl: './console.component.html',
+  styleUrls: ['./console.component.scss']
+})
+export class ConsoleComponent implements OnInit {
+
+  consoleForm = new FormGroup({
+    'command': new FormControl(''),
+  });
+  
+  constructor(
+    private router: Router,
+    private consoleService: ConsoleService,
+    private toasterService: ToasterService
+  ) { }
+
+  ngOnInit() {
+    const commandControl = this.consoleForm.get('command');
+    commandControl.setValue(this.consoleService.command);
+  }
+
+  goBack() {
+    this.router.navigate(['/settings']);
+  }
+
+  save() {
+    const formValue = this.consoleForm.value;
+    this.consoleService.command = formValue.command;
+    this.toasterService.success("Console command has been updated.");
+    this.goBack();
+  }
+
+}

src/app/components/settings/settings.component.html

@@ -27,6 +27,21 @@
             >
           </div> -->
         </mat-expansion-panel>
+
+        <mat-expansion-panel [expanded]="false">
+          <mat-expansion-panel-header>
+            <mat-panel-title> Console settings </mat-panel-title>
+            <mat-panel-description> Customize console settings </mat-panel-description>
+          </mat-expansion-panel-header>
+
+          <div>
+            <mat-form-field class="full-width-field">
+              <input matInput placeholder="console" [value]="consoleCommand" readonly="true">
+              <a mat-icon-button matSuffix routerLink="/settings/console"><mat-icon>mode_edit</mat-icon></a>
+            </mat-form-field>
+          </div>
+
+        </mat-expansion-panel>
       </mat-accordion>
     </div>
 

src/app/components/settings/settings.component.spec.ts

@@ -1,5 +1,5 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { MatCheckboxModule, MatExpansionModule } from '@angular/material';
+import { MatCheckboxModule, MatExpansionModule, MatIconModule, MatFormFieldModule, MatInputModule } from '@angular/material';
 import { FormsModule } from '@angular/forms';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
@@ -9,16 +9,26 @@ import { SettingsComponent } from './settings.component';
 import { SettingsService } from '../../services/settings.service';
 import { ToasterService } from '../../services/toaster.service';
 import { MockedToasterService } from '../../services/toaster.service.spec';
+import { ConsoleService } from '../../services/settings/console.service';
 
 describe('SettingsComponent', () => {
   let component: SettingsComponent;
   let fixture: ComponentFixture<SettingsComponent>;
   let settingsService: SettingsService;
+  let consoleService;
 
   beforeEach(async(() => {
+    consoleService = {
+      command: 'command'
+    };
+
     TestBed.configureTestingModule({
-      imports: [MatExpansionModule, MatCheckboxModule, FormsModule, PersistenceModule, BrowserAnimationsModule],
-      providers: [SettingsService, { provide: ToasterService, useClass: MockedToasterService }],
+      imports: [MatExpansionModule, MatCheckboxModule, FormsModule, PersistenceModule, BrowserAnimationsModule, MatIconModule, MatFormFieldModule, MatInputModule],
+      providers: [
+        SettingsService,
+        { provide: ToasterService, useClass: MockedToasterService },
+        { provide: ConsoleService, useValue: consoleService}
+      ],
       declarations: [SettingsComponent]
     }).compileComponents();
 
@@ -39,7 +49,8 @@ describe('SettingsComponent', () => {
     const settings = {
       crash_reports: true,
       experimental_features: true,
-      angular_map: false
+      angular_map: false,
+      console_command: ''
     };
     const getAll = spyOn(settingsService, 'getAll').and.returnValue(settings);
     const setAll = spyOn(settingsService, 'setAll');
@@ -50,4 +61,5 @@ describe('SettingsComponent', () => {
     component.save();
     expect(setAll).toHaveBeenCalledWith(settings);
   });
+
 });

src/app/components/settings/settings.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { SettingsService } from '../../services/settings.service';
 import { ToasterService } from '../../services/toaster.service';
+import { ConsoleService } from '../../services/settings/console.service';
 
 @Component({
   selector: 'app-settings',
@@ -9,11 +10,16 @@ import { ToasterService } from '../../services/toaster.service';
 })
 export class SettingsComponent implements OnInit {
   settings = { ...SettingsService.DEFAULTS };
+  consoleCommand: string;
 
-  constructor(private settingsService: SettingsService, private toaster: ToasterService) {}
+  constructor(
+    private settingsService: SettingsService,
+    private toaster: ToasterService,
+    private consoleService: ConsoleService) {}
 
   ngOnInit() {
     this.settings = this.settingsService.getAll();
+    this.consoleCommand = this.consoleService.command;
   }
 
   save() {

src/app/services/server.service.spec.ts

@@ -35,6 +35,10 @@ export class MockedServerService {
       resolve(this.servers);
     });
   }
+
+  public getServerUrl(server: Server) {
+    return `${server.host}:${server.port}`;
+  }
 }
 
 describe('ServerService', () => {

src/app/services/server.service.ts

@@ -55,6 +55,10 @@ export class ServerService {
     return this.onReady(() => this.indexedDbService.get().delete(this.tablename, server.id));
   }
 
+  public getServerUrl(server: Server) {
+    return `http://${server.host}:${server.port}/`;
+  }
+
   public getLocalServer(host: string, port: number) {
     const promise = new Promise((resolve, reject) => {
       this.findAll().then((servers: Server[]) => {

src/app/services/settings.service.spec.ts

@@ -4,10 +4,20 @@ import { PersistenceService, StorageType } from 'angular-persistence';
 import { Settings, SettingsService } from './settings.service';
 
 export class MockedSettingsService {
+  settings = {};
+
   isExperimentalEnabled() {
     return true;
   }
   getAll() {}
+
+  get(key: string) {
+    return this.settings[key];
+  }
+
+  set(key: string, value: any) {
+    this.settings[key] = value;
+  }
 }
 
 describe('SettingsService', () => {
@@ -50,7 +60,8 @@ describe('SettingsService', () => {
     expect(service.getAll()).toEqual({
       crash_reports: true,
       experimental_features: false,
-      angular_map: false
+      angular_map: false,
+      console_command: undefined
     });
   }));
 
@@ -63,7 +74,8 @@ describe('SettingsService', () => {
     expect(service.getAll()).toEqual({
       crash_reports: false,
       experimental_features: false,
-      angular_map: false
+      angular_map: false,
+      console_command: undefined
     });
   }));
 

src/app/services/settings.service.ts

@@ -6,6 +6,7 @@ export interface Settings {
   crash_reports: boolean;
   experimental_features: boolean;
   angular_map: boolean;
+  console_command: string;
 }
 
 @Injectable()
@@ -13,7 +14,8 @@ export class SettingsService {
   static DEFAULTS: Settings = {
     crash_reports: true,
     experimental_features: false,
-    angular_map: false
+    angular_map: false,
+    console_command: undefined
   };
 
   private settingsSubject: BehaviorSubject<Settings>;

src/app/services/settings/console.service.spec.ts

@@ -0,0 +1,29 @@
+import { ConsoleService } from './console.service';
+import { MockedSettingsService } from '../settings.service.spec';
+
+describe('ConsoleService', () => {
+  let service: ConsoleService;
+  let settings: MockedSettingsService;
+
+  beforeEach(() => {
+    let defaultConsoleService = {
+      get: () => 'default'
+    };
+    settings = new MockedSettingsService();
+    service = new ConsoleService(defaultConsoleService as any, settings as any);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  it('should get command from settings if defined', () => {
+    settings.set('console_command', 'from_settings');
+    expect(service.command).toEqual('from_settings');
+  });
+
+  it('should get command from default console if settings are not defined', () => {
+    settings.set('console_command', undefined);
+    expect(service.command).toEqual('default');
+  });
+});

src/app/services/settings/console.service.ts

@@ -0,0 +1,24 @@
+import { Injectable } from '@angular/core';
+import { DefaultConsoleService } from './default-console.service';
+import { SettingsService } from '../settings.service';
+
+@Injectable()
+export class ConsoleService {
+
+  constructor(
+    private defaultConsoleService: DefaultConsoleService,
+    private settingsService: SettingsService
+  ) { }
+
+  get command(): string {
+    const command = this.settingsService.get<string>('console_command');
+    if(command === undefined) {
+      return this.defaultConsoleService.get();
+    }
+    return command;
+  }
+
+  set command(command: string) {
+    this.settingsService.set<string>('console_command', command);
+  }
+}

src/app/services/settings/default-console.service.spec.ts

@@ -0,0 +1,45 @@
+
+import { DefaultConsoleService } from './default-console.service';
+
+describe('DefaultConsoleService', () => {
+  let electronService;
+  let service: DefaultConsoleService;
+  beforeEach(() => {
+    electronService = {
+      isElectronApp: false,
+      isWindows: false,
+      isLinux: false
+    };
+  });
+ 
+  beforeEach(() => {
+    service = new DefaultConsoleService(electronService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  it('should return undefined when not running in electron', () => {
+    electronService.isElectronApp = false;
+    expect(service.get()).toBeUndefined();
+  });
+
+  it('should return console for windows', () => {
+    electronService.isElectronApp = true;
+    electronService.isWindows = true;
+    expect(service.get()).toEqual('putty.exe -telnet %h %p -loghost "%d"');
+  })
+
+  it('should return console for linux', () => {
+    electronService.isElectronApp = true;
+    electronService.isLinux = true;
+    expect(service.get()).toEqual('xfce4-terminal --tab -T "%d" -e "telnet %h %p"');
+  })
+
+  it('should return undefined for other platforms', () => {
+    electronService.isElectronApp = true;
+    expect(service.get()).toBeUndefined();
+  })
+
+});

src/app/services/settings/default-console.service.ts

@@ -0,0 +1,26 @@
+import { Injectable } from '@angular/core';
+import { ElectronService } from 'ngx-electron';
+
+@Injectable()
+export class DefaultConsoleService {
+
+  constructor(
+    private electronService: ElectronService
+  ) { }
+
+  get() {
+    if(!this.electronService.isElectronApp) {
+      return undefined;
+    }
+
+    if(this.electronService.isLinux) {
+      return 'xfce4-terminal --tab -T "%d" -e "telnet %h %p"'
+    }
+
+    if(this.electronService.isWindows) {
+      return 'putty.exe -telnet %h %p -loghost "%d"'
+    }
+
+    return undefined;
+  }
+}

src/styles.css

@@ -26,6 +26,10 @@ a.table-link {
   }
 }
 
+.full-width-field {
+  width: 100%;
+}
+
 app-root {
   width: 100%;
 }

tsconfig.json

@@ -14,6 +14,11 @@
     "typeRoots": [
       "node_modules/@types"
     ],
+    // below is fix for angular-cli to support core-js >= 3.0
+    "paths": {
+      "core-js/es7/reflect": ["../node_modules/core-js/proposals/reflect-metadata"],
+      "core-js/es6/*": ["../node_modules/core-js/es/*"]
+    },
     "lib": [
       "es2018",
       "dom"