Merge remote-tracking branch 'origin/master'

Bump loader-utils from 1.4.0 to 1.4.1

.github/workflows/main.yml

@@ -14,10 +14,10 @@ jobs:
     
     steps:
       - uses: actions/checkout@v2
-      - name: Setup node 12
+      - name: Setup node 14
         uses: actions/setup-node@v2
         with:
-          node-version: 12.x
+          node-version: 14.x
       - uses: c-hive/gha-yarn-cache@v1
       - name: Install JS dependencies
         run: yarn install

.gitignore

@@ -1,6 +1,7 @@
 # See http://help.github.com/ignore-files/ for more about ignoring files.
 
 # compiled output
+/.angular
 /dist
 /tmp
 /out-tsc

angular.json

@@ -47,10 +47,11 @@
 						"scripts": [],
 						"vendorChunk": true,
 						"extractLicenses": false,
-						"buildOptimizer": false,
+						"buildOptimizer": true,
 						"sourceMap": true,
 						"optimization": false,
-						"namedChunks": true
+						"namedChunks": true,
+						"aot": true
 					},
 					"configurations": {
 						"production": {
@@ -176,6 +177,7 @@
 							"src/styles.scss",
 							"src/theme.scss"
 						],
+						"sourceMap": false,
 						"assets": [
 							"src/assets",
 							"src/favicon.ico"

karma.conf.js

@@ -25,7 +25,7 @@ module.exports = function (config) {
     colors: true,
     logLevel: config.LOG_INFO,
     autoWatch: true,
-    browsers: ['ChromeHeadless'],
+    browsers: ['Chrome'],
     singleRun: true
   });
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gns3-web-ui",
-  "version": "2.2.22",
+  "version": "2.2.35",
   "author": {
     "name": "GNS3 Technology Inc.",
     "email": "developers@gns3.com"
@@ -36,31 +36,33 @@
     "generate-licenses-file": "yarn license-checker --production --csv --out licenses.csv",
     "prebuildforelectron": "node set-variables-in-env.js --set src/environments/environment.electron.prod.ts",
     "postbuildforelectron": "node set-variables-in-env.js --unset src/environments/environment.electron.prod.ts",
+    "postinstall": "ngcc --properties es5 browser module main --first-only --create-ivy-entry-points && ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points",
     "snyk-protect": "snyk protect",
     "prepare": "yarn run snyk-protect"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^12.0.2",
-    "@angular/cdk": "^12.0.2",
-    "@angular/common": "^12.0.2",
-    "@angular/compiler": "^12.0.2",
-    "@angular/core": "^12.0.2",
-    "@angular/forms": "^12.0.2",
-    "@angular/material": "^12.0.2",
-    "@angular/platform-browser": "^12.0.2",
-    "@angular/platform-browser-dynamic": "^12.0.2",
-    "@angular/router": "^12.0.2",
-    "@sentry/browser": "^6.3.6",
-    "@types/jest": "^26.0.23",
-    "@types/mocha": "^8.2.2",
-    "@types/react": "^17.0.5",
-    "@types/react-dom": "^17.0.3",
-    "angular-draggable-droppable": "^4.6.0",
-    "angular-resizable-element": "^3.3.5",
-    "bootstrap": "^5.0.0",
+    "@angular/animations": "^12.2.12",
+    "@angular/cdk": "^12.2.12",
+    "@angular/common": "^12.2.12",
+    "@angular/compiler": "^12.2.12",
+    "@angular/core": "^12.2.12",
+    "@angular/forms": "^12.2.12",
+    "@angular/material": "^12.2.12",
+    "@angular/platform-browser": "^12.2.12",
+    "@angular/platform-browser-dynamic": "^12.2.12",
+    "@angular/router": "^12.2.12",
+    "@sentry/browser": "^6.14.1",
+    "@types/jest": "^27.0.2",
+    "@types/mocha": "^9.0.0",
+    "@types/react": "^17.0.34",
+    "@types/react-dom": "^17.0.11",
+    "angular-draggable-droppable": "^5.0.0",
+    "angular-resizable-element": "^3.4.0",
+    "bootstrap": "^5.1.3",
     "command-exists": "^1.2.9",
-    "core-js": "^3.12.1",
+    "core-js": "^3.19.1",
+    "css-tree": "^1.1.3",
     "d3-ng2-service": "^2.2.0",
     "eev": "^0.1.5",
     "ini": "^2.0.0",
@@ -69,61 +71,61 @@
     "ng-circle-progress": "^1.6.0",
     "ng2-file-upload": "^1.4.0",
     "ngx-childprocess": "^0.0.6",
-    "ngx-device-detector": "^2.0.9",
+    "ngx-device-detector": "^2.1.1",
     "ngx-electron": "^2.2.0",
-    "node-fetch": "^2.6.1",
+    "node-fetch": "^3.2.10",
     "notosans-fontface": "1.2.2",
-    "prettier-plugin-organize-imports": "^2.0.0",
-    "rxjs": "^6.5.3",
-    "rxjs-compat": "^6.5.3",
+    "prettier-plugin-organize-imports": "^2.3.4",
+    "rxjs": "^6.6.7",
+    "rxjs-compat": "^6.6.7",
     "save-svg-as-png": "^1.4.17",
-    "snyk": "^1.589.0",
-    "spark-md5": "^3.0.1",
-    "svg-crowbar": "^0.6.5",
+    "snyk": "^1.996.0",
+    "spark-md5": "^3.0.2",
+    "svg-crowbar": "^0.7.0",
     "tree-kill": "^1.2.2",
-    "tslib": "^2.2.0",
+    "tslib": "^2.3.1",
     "typeface-roboto": "^1.1.13",
-    "xterm": "^4.11.0",
+    "xterm": "^4.15.0",
     "xterm-addon-attach": "^0.6.0",
     "xterm-addon-fit": "^0.5.0",
-    "yargs": "^17.0.1",
+    "yargs": "^17.2.1",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^12.0.2",
-    "@angular/cli": "^12.0.2",
-    "@angular/compiler-cli": "^12.0.2",
-    "@angular/language-service": "^12.0.2",
-    "@sentry/cli": "^1.64.2",
-    "@sentry/electron": "^2.4.1",
-    "@types/jasmine": "^3.7.1",
-    "@types/jasminewd2": "^2.0.9",
-    "@types/node": "15.6.1",
+    "@angular-devkit/build-angular": "^12.2.12",
+    "@angular/cli": "^12.2.12",
+    "@angular/compiler-cli": "^12.2.12",
+    "@angular/language-service": "^12.2.12",
+    "@sentry/cli": "^1.71.0",
+    "@sentry/electron": "^2.5.4",
+    "@types/jasmine": "^3.10.2",
+    "@types/jasminewd2": "^2.0.10",
+    "@types/node": "16.11.6",
     "codelyzer": "^6.0.2",
-    "electron": "^13.0.1",
-    "electron-builder": "22.10.5",
+    "electron": "^13.6.6",
+    "electron-builder": "^22.9.1",
     "file-loader": "^6.2.0",
-    "jasmine-core": "~3.7.1",
+    "jasmine-core": "~3.10.1",
     "jasmine-spec-reporter": "~7.0.0",
     "jquery": "^3.6.0",
-    "karma": "^6.3.2",
+    "karma": "^6.3.16",
     "karma-chrome-launcher": "~3.1.0",
     "karma-cli": "^2.0.0",
     "karma-coverage-istanbul-reporter": "~3.0.3",
     "karma-jasmine": "~4.0.1",
-    "karma-jasmine-html-reporter": "^1.6.0",
+    "karma-jasmine-html-reporter": "^1.7.0",
     "license-checker": "^25.0.1",
     "popper.js": "^1.16.1",
-    "prettier": "^2.3.0",
+    "prettier": "^2.4.1",
     "protractor": "^7.0.0",
     "replace": "^1.2.1",
     "rxjs-tslint": "^0.1.8",
     "ts-mockito": "^2.6.1",
-    "ts-node": "~10.0.0",
+    "ts-node": "~10.4.0",
     "tslint": "^6.1.3",
     "tslint-config-prettier": "^1.18.0",
-    "typescript": "4.2.4",
-    "webpack": "5.38.0",
+    "typescript": "4.2.3",
+    "webpack": "5.62.1",
     "yarn-upgrade-all": "^0.5.4"
   },
   "greenkeeper": {
@@ -132,4 +134,4 @@
     ]
   },
   "snyk": true
-}
+}

src/ReleaseNotes.txt

@@ -1,6 +1,10 @@
 GNS3 WebUI is web implementation of user interface for GNS3 software.
 
-Current version: 2.2.22
+Current version: 2.2.32
+
+Bug Fixes & enhancements
+- Fixed generated capture file is not valid
+- Fixed Docker additional directories
 
 Current version: 2020.4.0-beta.1
 

src/app/cartography/components/text-editor/text-editor.component.ts

@@ -87,6 +87,7 @@ export class TextEditorComponent implements OnInit, OnDestroy {
         `scale(${this.mapScaleService.getScale()})`
       );
       this.temporaryTextElement.nativeElement.focus();
+      document.documentElement.style.cursor = "default";
 
       let textListener = () => {
         this.drawingsEventSource.textAdded.emit(

src/app/cartography/helpers/font-fixer.spec.ts

@@ -16,8 +16,8 @@ describe('FontFixer', () => {
     };
 
     expect(fixer.fix(font)).toEqual({
-      font_family: 'Noto Sans',
-      font_size: 11,
+      font_family: 'Arial',
+      font_size: 12,
       font_weight: 'bold',
     });
   });
@@ -39,12 +39,12 @@ describe('FontFixer', () => {
   it('should fix TypeWriter font and 10px size in styles', () => {
     const styles = 'font-family: TypeWriter; font-size: 10px; font-weight: bold';
 
-    expect(fixer.fixStyles(styles)).toEqual('font-family:Noto Sans;font-size:11px;font-weight:bold');
+    expect(fixer.fixStyles(styles)).toEqual('font-family:Arial;font-size:12px;font-weight:bold');
   });
 
   it('should fix TypeWriter font and 10px size in styles with quotes', () => {
     const styles = 'font-family: "TypeWriter"; font-size: 10px; font-weight: bold';
 
-    expect(fixer.fixStyles(styles)).toEqual('font-family:Noto Sans;font-size:11px;font-weight:bold');
+    expect(fixer.fixStyles(styles)).toEqual('font-family:Arial;font-size:12px;font-weight:bold');
   });
 });

src/app/cartography/helpers/font-fixer.ts

@@ -9,8 +9,8 @@ import { Font } from '../models/font';
 export class FontFixer {
   static DEFAULT_FONT = 'TypeWriter';
   static DEFAULT_SIZE = 10;
-  static REPLACE_BY_FONT = 'Noto Sans';
-  static REPLACE_BY_SIZE = 11;
+  static REPLACE_BY_FONT = 'Arial';
+  static REPLACE_BY_SIZE = 12;
 
   public fix(font: Font): Font {
     if (font.font_family === FontFixer.DEFAULT_FONT && font.font_size === FontFixer.DEFAULT_SIZE) {

src/app/cartography/models/node.ts

@@ -53,6 +53,7 @@ export class Properties {
   qemu_path: string;
   environment: string;
   extra_hosts: string;
+  extra_volumes: string[];
   replicate_network_connection_state: boolean;
 }
 

src/app/cartography/widgets/drawings/text-drawing.spec.ts

@@ -42,7 +42,7 @@ describe('TextDrawingWidget', () => {
     const text_element = drew.nodes()[0];
     expect(text_element.innerHTML).toEqual('<tspan xml:space="preserve" x="0" dy="0em">THIS IS TEXT</tspan>');
     expect(text_element.getAttribute('fill')).toEqual('#000000');
-    expect(text_element.getAttribute('style')).toEqual('font-family: "Noto Sans"; font-size: 11pt; font-weight: bold');
+    expect(text_element.getAttribute('style')).toEqual('font-family: "Arial"; font-size: 12pt; font-weight: bold');
     expect(text_element.getAttribute('text-decoration')).toEqual('line-through');
   });
 

src/app/cartography/widgets/interface-status.ts

@@ -97,9 +97,9 @@ export class InterfaceStatusWidget implements Widget {
           .attr('y', (ls: LinkStatus) => ls.y - 10)
           .attr('rx', 8)
           .attr('ry', 8)
-          .style('fill', 'white')
+          .style('fill', '#c7ffdf')
           .attr('stroke', '#2ecc71')
-          .attr('stroke-width', 3);
+          .attr('stroke-width', 2);
         status_started.exit().remove();
         const status_started_label = link_group
           .selectAll<SVGTextElement, LinkStatus>('text.status_started_label')
@@ -111,7 +111,7 @@ export class InterfaceStatusWidget implements Widget {
           .text((ls: LinkStatus) => ls.port)
           .attr('x', (ls: LinkStatus) => ls.x - 25)
           .attr('y', (ls: LinkStatus) => ls.y + 5)
-          .attr('fill', `black`);
+          .attr('fill', `#0e9647`);
         status_started_label.exit().remove();
 
         const status_stopped = link_group
@@ -129,9 +129,9 @@ export class InterfaceStatusWidget implements Widget {
           .attr('y', (ls: LinkStatus) => ls.y - 10)
           .attr('rx', 8)
           .attr('ry', 8)
-          .style('fill', 'white')
+          .style('fill', '#ffe3e3')
           .attr('stroke', 'red')
-          .attr('stroke-width', 3);
+          .attr('stroke-width', 2);
         status_stopped.exit().remove();
         const status_stopped_label = link_group
           .selectAll<SVGTextElement, LinkStatus>('text.status_stopped_label')
@@ -143,7 +143,7 @@ export class InterfaceStatusWidget implements Widget {
           .text((ls: LinkStatus) => ls.port)
           .attr('x', (ls: LinkStatus) => ls.x - 25)
           .attr('y', (ls: LinkStatus) => ls.y + 5)
-          .attr('fill', `black`);
+          .attr('fill', `red`);
         status_stopped_label.exit().remove();
 
         const status_suspended = link_group
@@ -162,8 +162,8 @@ export class InterfaceStatusWidget implements Widget {
           .attr('rx', 8)
           .attr('ry', 8)
           .style('fill', 'white')
-          .attr('stroke', '#FFFF00')
-          .attr('stroke-width', 3);
+          .attr('stroke', '#fffbc3')
+          .attr('stroke-width', 2);
         status_suspended.exit().remove();
         const status_suspended_label = link_group
           .selectAll<SVGTextElement, LinkStatus>('text.status_suspended_label')
@@ -175,7 +175,7 @@ export class InterfaceStatusWidget implements Widget {
           .text((ls: LinkStatus) => ls.port)
           .attr('x', (ls: LinkStatus) => ls.x - 25)
           .attr('y', (ls: LinkStatus) => ls.y + 5)
-          .attr('fill', `black`);
+          .attr('fill', `#6b5633`);
         status_suspended_label.exit().remove();
       } else {
         const status_started = link_group

src/app/components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component.html

@@ -110,6 +110,9 @@
                   placeholder="Please enter name"
                 />
               </mat-form-field>
+              <div *ngIf="uploadedFile">
+                <mat-progress-bar mode="determinate" [value]="uploadProgress" aria-valuemin="0" aria-valuemax="100"></mat-progress-bar>
+              </div>
             </div>
           </form>
         </mat-step>

src/app/components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component.ts

@@ -32,6 +32,8 @@ export class AddQemuVmTemplateComponent implements OnInit {
   chosenImage: string = '';
   qemuTemplate: QemuTemplate;
   uploader: FileUploader;
+  uploadedFile: boolean = false;
+  uploadProgress: number = 0;
 
   nameForm: FormGroup;
   memoryForm: FormGroup;
@@ -86,6 +88,9 @@ export class AddQemuVmTemplateComponent implements OnInit {
       });
       this.toasterService.success('Image uploaded');
     };
+    this.uploader.onProgressItem = (progress: any) => {
+      this.uploadProgress = progress['progress'];
+    };
 
     const server_id = this.route.snapshot.paramMap.get('server_id');
     this.serverService.get(parseInt(server_id, 10)).then((server: Server) => {
@@ -127,6 +132,7 @@ export class AddQemuVmTemplateComponent implements OnInit {
   }
 
   uploadImageFile(event) {
+    this.uploadedFile = true;
     let name = event.target.files[0].name;
     this.diskForm.controls['fileName'].setValue(name);
 

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

@@ -33,20 +33,24 @@ export class ConsoleDeviceActionBrowserComponent {
         this.node.console_host = this.server.host;
       }
 
-      if (
-        this.node.console_type === 'telnet' ||
-        this.node.console_type === 'vnc' ||
-        this.node.console_type === 'spice'
-      ) {
-        try {
+      try {
+        if (this.node.console_type === 'telnet') {
           location.assign(
-            `gns3+${this.node.console_type}://${this.node.console_host}:${this.node.console}?name=${this.node.name}&project_id=${this.node.project_id}&node_id=${this.node.node_id}`
+            `gns3+telnet://${this.node.console_host}:${this.node.console}?name=${this.node.name}&project_id=${this.node.project_id}&node_id=${this.node.node_id}`
           );
-        } catch (e) {
-          this.toasterService.error(e);
+        } else if (this.node.console_type === 'vnc') {
+          location.assign(
+            `gns3+vnc://${this.node.console_host}:${this.node.console}?name=${this.node.name}&project_id=${this.node.project_id}&node_id=${this.node.node_id}`
+          );
+        } else if (this.node.console_type.startsWith('spice')) {
+          location.assign(
+            `gns3+spice://${this.node.console_host}:${this.node.console}?name=${this.node.name}&project_id=${this.node.project_id}&node_id=${this.node.node_id}`
+          );
+        } else {
+          this.toasterService.error('Supported console types are: telnet, vnc, spice and spice+agent.');
         }
-      } else {
-        this.toasterService.error('Supported console types: telnet, vnc, spice.');
+      } catch (e) {
+          this.toasterService.error(e);
       }
     }
   }

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

@@ -29,7 +29,7 @@ export class ConsoleDeviceActionComponent implements OnInit {
     let consoleCommand = this.settingsService.getConsoleSettings()
       ? this.settingsService.getConsoleSettings()
       : this.nodeService.getDefaultCommand();
-    const startedNodes = this.nodes.filter((node) => node.status === 'started');
+    const startedNodes = this.nodes.filter((node) => node.status === 'started' && node.console_type !== 'none');
 
     if (startedNodes.length === 0) {
       this.toasterService.error('Device needs to be started in order to console to it.');
@@ -37,7 +37,7 @@ export class ConsoleDeviceActionComponent implements OnInit {
     }
 
     for (var node of this.nodes) {
-      if (node.status !== 'started') {
+      if (node.status !== 'started' && node.console_type !== 'none') {
         continue;
       }
 

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

@@ -232,12 +232,12 @@ export class LogConsoleComponent implements OnInit, AfterViewInit, OnDestroy {
               location.assign(
                 `gns3+vnc://${node.console_host}:${node.console}?name=${node.name}&project_id=${node.project_id}&node_id=${node.node_id}`
               );
-            } else if (node.console_type === 'spice') {
+            } else if (node.console_type.startsWith('spice')) {
               location.assign(
                 `gns3+spice://${node.console_host}:${node.console}?name=${node.name}&project_id=${node.project_id}&node_id=${node.node_id}`
               );
             } else {
-              this.showCommand('Supported console types: telnet, vnc, spice.');
+              this.showCommand('Supported console types are: telnet, vnc, spice and spice+agent');
             }
           } else {
             this.showCommand(`This node must be started before a console can be opened.`);
@@ -297,28 +297,28 @@ export class LogConsoleComponent implements OnInit, AfterViewInit, OnDestroy {
 
   printNode(node: Node): string {
     return (
-      `command_line: ${node.command_line}, 
-            compute_id: ${node.compute_id}, 
-            console: ${node.console}, 
-            console_host: ${node.console_host}, 
-            console_type: ${node.console_type}, 
-            first_port_name: ${node.first_port_name}, 
-            height: ${node.height}, 
-            label: ${node.label.text}, 
-            name: ${node.name}, 
-            node_directory: ${node.node_directory}, 
-            node_id: ${node.node_id}, 
-            node_type: ${node.node_type}, 
-            port_name_format: ${node.port_name_format}, 
+      `command_line: ${node.command_line},
+            compute_id: ${node.compute_id},
+            console: ${node.console},
+            console_host: ${node.console_host},
+            console_type: ${node.console_type},
+            first_port_name: ${node.first_port_name},
+            height: ${node.height},
+            label: ${node.label.text},
+            name: ${node.name},
+            node_directory: ${node.node_directory},
+            node_id: ${node.node_id},
+            node_type: ${node.node_type},
+            port_name_format: ${node.port_name_format},
             port_segment_size: ${node.port_segment_size}, ` +
       this.printPorts(node.ports) +
-      `project_id: ${node.project_id}, 
-            status: ${node.status}, 
-            symbol: ${node.symbol}, 
-            symbol_url: ${node.symbol_url}, 
-            width: ${node.width}, 
-            x: ${node.x}, 
-            y: ${node.y}, 
+      `project_id: ${node.project_id},
+            status: ${node.status},
+            symbol: ${node.symbol},
+            symbol_url: ${node.symbol_url},
+            width: ${node.width},
+            x: ${node.x},
+            y: ${node.y},
             z: ${node.z}`
     );
   }
@@ -328,31 +328,31 @@ export class LogConsoleComponent implements OnInit, AfterViewInit, OnDestroy {
     ports.forEach((port) => {
       response =
         response +
-        `adapter_number: ${port.adapter_number}, 
-            link_type: ${port.link_type}, 
-            name: ${port.name}, 
-            port_number: ${port.port_number}, 
+        `adapter_number: ${port.adapter_number},
+            link_type: ${port.link_type},
+            name: ${port.name},
+            port_number: ${port.port_number},
             short_name: ${port.short_name}, `;
     });
     return response;
   }
 
   printLink(link: Link): string {
-    return `capture_file_name: ${link.capture_file_name}, 
-            capture_file_path: ${link.capture_file_path}, 
-            capturing: ${link.capturing}, 
-            link_id: ${link.link_id}, 
-            link_type: ${link.link_type}, 
-            project_id: ${link.project_id}, 
+    return `capture_file_name: ${link.capture_file_name},
+            capture_file_path: ${link.capture_file_path},
+            capturing: ${link.capturing},
+            link_id: ${link.link_id},
+            link_type: ${link.link_type},
+            project_id: ${link.project_id},
             suspend: ${link.suspend}, `;
   }
 
   printDrawing(drawing: Drawing): string {
-    return `drawing_id: ${drawing.drawing_id}, 
-            project_id: ${drawing.project_id}, 
-            rotation: ${drawing.rotation}, 
-            x: ${drawing.x}, 
-            y: ${drawing.y}, 
+    return `drawing_id: ${drawing.drawing_id},
+            project_id: ${drawing.project_id},
+            rotation: ${drawing.rotation},
+            x: ${drawing.x},
+            y: ${drawing.y},
             z: ${drawing.z}`;
   }
 }

src/app/components/project-map/new-template-dialog/new-template-dialog.component.html

@@ -196,6 +196,38 @@
                 </div>
               </div>
 
+              <div class="list-item-inside" *ngIf="version.images.bios_image">
+                <span>
+                  {{ version.images.bios_image }}
+                </span>
+
+                <div>
+                  <span *ngIf="checkImageFromVersion(version.images.bios_image)"
+                    ><mat-icon matTooltip="Ready to install" matTooltipClass="custom-tooltip">check</mat-icon></span
+                  >
+                  <span *ngIf="!checkImageFromVersion(version.images.bios_image)"
+                    ><mat-icon matTooltip="Missing" matTooltipClass="custom-tooltip">close</mat-icon></span
+                  >
+
+                  <input
+                    type="file"
+                    class="non-visible"
+                    #fileBios
+                    (change)="importImage($event, version.images.bios_image)"
+                    ng2FileSelect
+                    [uploader]="uploaderImage"
+                  />
+                  <button class="button" mat-raised-button (click)="fileBios.click()">Import</button>
+                  <button
+                    class="button"
+                    mat-raised-button
+                    (click)="downloadImageFromVersion(version.images.bios_image)"
+                  >
+                    Download
+                  </button>
+                </div>
+              </div>
+
               <div class="list-item-inside" *ngIf="version.images.hda_disk_image">
                 <span>
                   {{ version.images.hda_disk_image }}

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

@@ -101,7 +101,7 @@
 
             <h6>Additional directories</h6>
             <mat-form-field class="form-field">
-              <textarea matInput type="text" [(ngModel)]="node.properties.extra_volumes"></textarea>
+              <textarea matInput type="text" [(ngModel)]="additionalDirectories"></textarea>
             </mat-form-field>
           </mat-tab>
 

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

@@ -20,13 +20,14 @@ export class ConfiguratorDialogDockerComponent implements OnInit {
   name: string;
   generalSettingsForm: FormGroup;
   consoleTypes: string[] = [];
-  consoleResolutions: string[] = ['640x480', '800x600', '1024x768', '1280x800', '1280x1024', '1366x768', '1920x1080'];
+  consoleResolutions: string[] = ['2560x1440', '1920x1080', '1680x1050', '1440x900', '1366x768', '1280x1024', '1280x800', '1024x768', '800x600', '640x480'];
   private conf = {
     autoFocus: false,
     width: '800px',
     disableClose: true,
   };
   dialogRef;
+  additionalDirectories: string = "";
 
   constructor(
     public dialogReference: MatDialogRef<ConfiguratorDialogDockerComponent>,
@@ -39,7 +40,7 @@ export class ConfiguratorDialogDockerComponent implements OnInit {
     this.generalSettingsForm = this.formBuilder.group({
       name: new FormControl('', Validators.required),
       adapter: new FormControl('', Validators.required),
-      startCommand: new FormControl('', Validators.required),
+      startCommand: new FormControl(''),
       consoleHttpPort: new FormControl('', Validators.required),
       consoleHttpPath: new FormControl('', Validators.required),
     });
@@ -50,6 +51,12 @@ export class ConfiguratorDialogDockerComponent implements OnInit {
       this.node = node;
       this.name = node.name;
       this.getConfiguration();
+      if (this.node.properties.extra_volumes && this.node.properties.extra_volumes.length>0) {
+        for (let index = 0; index < this.node.properties.extra_volumes.length - 1; index++) {
+          this.additionalDirectories = this.additionalDirectories + this.node.properties.extra_volumes[index] + "\n";
+        }
+        this.additionalDirectories = this.additionalDirectories + this.node.properties.extra_volumes[this.node.properties.extra_volumes.length - 1];
+      }
     });
   }
 
@@ -72,7 +79,16 @@ export class ConfiguratorDialogDockerComponent implements OnInit {
   }
 
   onSaveClick() {
+    var extraVolumes = this.additionalDirectories.split("\n").filter(elem => elem != "");
+    for (const item of extraVolumes) {
+      console.log(item);
+      if (!item.startsWith("/")) {
+        this.toasterService.error(`Wrong format for additional directories.`);
+        return;
+      }
+    }
     if (this.generalSettingsForm.valid) {
+      this.node.properties.extra_volumes = extraVolumes;
       this.nodeService.updateNode(this.server, this.node).subscribe(() => {
         this.toasterService.success(`Node ${this.node.name} updated.`);
         this.onCancelClick();

src/app/components/project-map/packet-capturing/start-capture/start-capture.component.ts

@@ -56,7 +56,7 @@ export class StartCaptureDialogComponent implements OnInit {
     const sourcePort = sourceNode.ports[this.link.nodes[0].port_number];
     const targetPort = targetNode.ports[this.link.nodes[1].port_number];
     this.inputForm.controls['fileName'].setValue(
-      `${sourceNode.name}_${sourcePort.name}_to_${targetNode.name}_${targetPort.name}`
+      `${sourceNode.name}_${sourcePort.name}_to_${targetNode.name}_${targetPort.name}`.replace(new RegExp('[^0-9A-Za-z_-]', 'g'), '')
     );
   }
 

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

@@ -104,6 +104,13 @@ export class ProjectMapMenuComponent implements OnInit, OnDestroy {
   }
 
   public addDrawing(selectedObject: string) {
+    if ((selectedObject === 'rectangle' && this.drawTools.isRectangleChosen) || (selectedObject === 'ellipse' && this.drawTools.isEllipseChosen) ||
+    (selectedObject === 'line' && this.drawTools.isLineChosen) || (selectedObject === 'text' && this.drawTools.isTextChosen)) {
+      document.documentElement.style.cursor = "default";
+    } else {
+      document.documentElement.style.cursor = "crosshair";
+    }
+
     switch (selectedObject) {
       case 'rectangle':
         this.drawTools.isTextChosen = false;
@@ -140,6 +147,8 @@ export class ProjectMapMenuComponent implements OnInit, OnDestroy {
   }
 
   public resetDrawToolChoice() {
+    document.documentElement.style.cursor = "default";
+
     this.drawTools.isRectangleChosen = false;
     this.drawTools.isEllipseChosen = false;
     this.drawTools.isLineChosen = false;

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

@@ -67,6 +67,14 @@
       </div>
     </div>
     <div>
+      <button
+        class="map-settings-button"
+        matTooltip="Project Map Settings"
+        matTooltipClass="custom-tooltip"
+        mat-icon-button
+        [matMenuTriggerFor]="viewMenu">
+        <mat-icon>view_module</mat-icon>
+      </button>
       <button
         matTooltip="Toggle topology/servers summary"
         matTooltipClass="custom-tooltip"
@@ -83,39 +91,27 @@
 
     <!-- GNS3 menu -->
     <mat-menu #mainMenu="matMenu" [overlapTrigger]="false">
+      <button mat-menu-item [matMenuTriggerFor]="projectMenu">
+        <mat-icon>insert_drive_file</mat-icon>
+        <span>Project settings</span>
+      </button>
       <button mat-menu-item [routerLink]="['/server', server.id, 'projects']">
         <mat-icon>work</mat-icon>
-        <span>Go to projects</span>
+        <span>Projects</span>
       </button>
       <button mat-menu-item [routerLink]="['/servers']">
         <mat-icon>developer_board</mat-icon>
-        <span>Go to servers</span>
-      </button>
-      <button mat-menu-item routerLink="/server/{{ server.id }}/preferences">
-        <mat-icon>settings_applications</mat-icon>
-        <span>Go to preferences</span>
+        <span>Servers</span>
       </button>
       <button mat-menu-item routerLink="/server/{{ server.id }}/systemstatus">
-        <mat-icon>info</mat-icon>
-        <span>Go to system status</span>
+        <mat-icon>data_usage</mat-icon>
+        <span>System Status</span>
       </button>
       <button mat-menu-item routerLink="/settings">
         <mat-icon>settings</mat-icon>
-        <span>Go to settings</span>
-      </button>
-      <button mat-menu-item (click)="addNewTemplate()">
-        <mat-icon>control_point</mat-icon>
-        <span>New template</span>
+        <span>Settings</span>
       </button>
       <app-import-appliance [server]="server" [project]="project"></app-import-appliance>
-      <button mat-menu-item [matMenuTriggerFor]="projectMenu">
-        <mat-icon>settings</mat-icon>
-        <span>Project settings</span>
-      </button>
-      <button mat-menu-item [matMenuTriggerFor]="viewMenu">
-        <mat-icon>view_module</mat-icon>
-        <span>Map settings</span>
-      </button>
     </mat-menu>
 
     <!-- Project Settings sub-menu -->
@@ -256,4 +252,4 @@
   </div>
 </div>
 
-<ng-template #topologySummaryContainer></ng-template>
+<ng-template #topologySummaryContainer></ng-template>

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

@@ -73,6 +73,10 @@ g.node:hover {
     font-size: 28px !important;
   }
 
+  .map-settings-button mat-icon {
+    font-size: 22px !important;
+  }
+
   .selected {
     background: rgba(0, 151, 167, 0.1);
 

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

@@ -334,7 +334,6 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
             this.toggleShowTopologySummary(this.mapSettingsService.isTopologySummaryVisible);
 
             this.recentlyOpenedProjectService.setServerId(this.server.id.toString());
-            this.recentlyOpenedProjectService.setProjectId(this.project.project_id);
 
             if (this.project.status === 'opened') {
               return new Observable<Project>((observer) => {
@@ -423,12 +422,22 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
               this.toasterService.success('Node has been deleted');
             });
           });
-        }
+
+        selected
+          .filter((item) => item instanceof MapDrawing)
+          .forEach((item: MapDrawing) => {
+            const drawing = this.mapDrawingToDrawing.convert(item);
+            this.drawingService.delete(this.server, drawing).subscribe((data) => {
+              this.toasterService.success('Drawing has been deleted');
+            });
+          });
+      }
     });
   }
 
   onProjectLoad(project: Project) {
     this.readonly = this.projectService.isReadOnly(project);
+    this.recentlyOpenedProjectService.setProjectId(this.project.project_id);
 
     const subscription = this.projectService
       .nodes(this.server, project.project_id)
@@ -476,27 +485,27 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
 
     const onLinkContextMenu = this.linkWidget.onContextMenu.subscribe((eventLink: LinkContextMenu) => {
       const link = this.mapLinkToLink.convert(eventLink.link);
-      this.contextMenu.openMenuForListOfElements([], [], [], [link], eventLink.event.screenY - 60, eventLink.event.screenX);
+      this.contextMenu.openMenuForListOfElements([], [], [], [link], eventLink.event.pageY, eventLink.event.pageX);
     });
 
     const onEthernetLinkContextMenu = this.ethernetLinkWidget.onContextMenu.subscribe((eventLink: LinkContextMenu) => {
       const link = this.mapLinkToLink.convert(eventLink.link);
-      this.contextMenu.openMenuForListOfElements([], [], [], [link], eventLink.event.screenY - 60, eventLink.event.screenX);
+      this.contextMenu.openMenuForListOfElements([], [], [], [link], eventLink.event.pageY, eventLink.event.pageX);
     });
 
     const onSerialLinkContextMenu = this.serialLinkWidget.onContextMenu.subscribe((eventLink: LinkContextMenu) => {
       const link = this.mapLinkToLink.convert(eventLink.link);
-      this.contextMenu.openMenuForListOfElements([], [], [], [link], eventLink.event.screenY - 60, eventLink.event.screenX);
+      this.contextMenu.openMenuForListOfElements([], [], [], [link], eventLink.event.pageY, eventLink.event.pageX);
     });
 
     const onNodeContextMenu = this.nodeWidget.onContextMenu.subscribe((eventNode: NodeContextMenu) => {
       const node = this.mapNodeToNode.convert(eventNode.node);
-      this.contextMenu.openMenuForNode(node, eventNode.event.screenY - 60, eventNode.event.screenX);
+      this.contextMenu.openMenuForNode(node, eventNode.event.pageY, eventNode.event.pageX);
     });
 
     const onDrawingContextMenu = this.drawingsWidget.onContextMenu.subscribe((eventDrawing: DrawingContextMenu) => {
       const drawing = this.mapDrawingToDrawing.convert(eventDrawing.drawing);
-      this.contextMenu.openMenuForDrawing(drawing, eventDrawing.event.screenY - 60, eventDrawing.event.screenX);
+      this.contextMenu.openMenuForDrawing(drawing, eventDrawing.event.pageY, eventDrawing.event.pageX);
     });
 
     const onLabelContextMenu = this.labelWidget.onContextMenu.subscribe((eventLabel: LabelContextMenu) => {
@@ -512,8 +521,8 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
         this.contextMenu.openMenuForInterfaceLabel(
           linkNode,
           link,
-          eventInterfaceLabel.event.screenY - 60,
-          eventInterfaceLabel.event.screenX
+          eventInterfaceLabel.event.pageY,
+          eventInterfaceLabel.event.pageX
         );
       }
     );

src/app/components/projects/projects.component.html

@@ -2,6 +2,7 @@
   <div class="default-header">
     <div class="row">
       <h1 class="col">Projects</h1>
+      <button class="col" mat-raised-button (click)="goToSystemStatus()" class="add-button">Go to system status</button>
       <button class="col" mat-raised-button (click)="goToPreferences()" class="add-button">Go to preferences</button>
       <button class="col" mat-raised-button color="primary" (click)="addBlankProject()" class="add-button">
         Add blank project

src/app/components/projects/projects.component.ts

@@ -89,6 +89,12 @@ export class ProjectsComponent implements OnInit {
       .catch((error) => this.toasterService.error('Cannot navigate to the preferences'));
   }
 
+  goToSystemStatus() {
+    this.router
+      .navigate(['/server', this.server.id, 'systemstatus'])
+      .catch((error) => this.toasterService.error('Cannot navigate to the system status'));
+  }
+
   refresh() {
     this.projectService.list(this.server).subscribe(
       (projects: Project[]) => {

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

@@ -11,6 +11,7 @@
 
           <div>
             <mat-checkbox [(ngModel)]="settings.crash_reports">Send anonymous crash reports</mat-checkbox><br />
+            <mat-checkbox [(ngModel)]="settings.anonymous_statistics">Send anonymous usage statistics</mat-checkbox><br />
             <mat-checkbox [(ngModel)]="integrateLinksLabelsToLinks">Integrate link labels to links</mat-checkbox><br />
             <mat-checkbox [(ngModel)]="openConsolesInWidget">Open consoles in the widget instead of in new tabs after clicking start consoles for all nodes</mat-checkbox>
           </div>

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

@@ -69,6 +69,7 @@ describe('SettingsComponent', () => {
     const settings = {
       crash_reports: true,
       experimental_features: true,
+      anonymous_statistics: true,
       angular_map: false,
       console_command: '',
     };

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

@@ -1,5 +1,5 @@
 <div class="title-container">
-  <h1 mat-dialog-title>Add a node</h1>
+  <h1 mat-dialog-title>Insert New Node</h1>
   <button
     mat-button
     class="top-button"

src/app/components/template/template.component.html

@@ -10,63 +10,95 @@
 </button>
 
 <mat-menu #mainMenu="matMenu">
-  <button mat-menu-item (click)="openDialog()">
-    <mat-icon>add_to_queue</mat-icon>
-    <span>Open dialog to configure</span>
-  </button>
+   <div class="templateMenu">
+     <div class="templateMenuHeader">
+        <button mat-menu-item (click)="openDialog()">
+         <mat-icon>add_to_queue</mat-icon>
+         <span>
+            Insert New Node...
+         </span>
+        </button>
+        <button mat-menu-item (click)="addNewTemplate()">
+         <mat-icon>library_add</mat-icon>
+         <span>
+            New Template...
+         </span>
+        </button>
+     </div>
 
-  <mat-form-field (click)="$event.stopPropagation()" class="form-field" floatPlaceholder="never">
-    <input
-      matInput
-      placeholder="Search by name"
-      (keyup)="filterTemplates($event)"
-      [(ngModel)]="searchText"
-      [ngModelOptions]="{ standalone: true }"
-    />
-  </mat-form-field>
-  <mat-form-field (click)="$event.stopPropagation()" class="form-field">
-    <mat-select
-      [ngModelOptions]="{ standalone: true }"
-      placeholder="Filter templates by type"
-      (selectionChange)="filterTemplates($event)"
-      [(ngModel)]="selectedType"
-    >
-      <mat-option *ngFor="let type of templateTypes" [value]="type">
-        {{ type }}
-      </mat-option>
-    </mat-select>
-  </mat-form-field>
+     <div class="templateFilterBar">
+        <mat-form-field (click)="$event.stopPropagation()" class="form-field" floatPlaceholder="never">
+         <input
+           matInput
+           placeholder="Filter by name"
+           search="search"
+           (keyup)="filterTemplates($event)"
+           [(ngModel)]="searchText"
+           [ngModelOptions]="{ standalone: true }"
+         />
+         <mat-icon class="searchIcon" matSuffix>search</mat-icon>
+       </mat-form-field>
+       <mat-form-field (click)="$event.stopPropagation()" class="form-field">
+         <mat-select
+           [ngModelOptions]="{ standalone: true }"
+           placeholder="Filter by type"
+           (selectionChange)="filterTemplates($event)"
+           [(ngModel)]="selectedType"
+         >
+           <mat-option *ngFor="let type of templateTypes" [value]="type">
+             {{ type }}
+           </mat-option>
+         </mat-select>
+       </mat-form-field>
+     </div>
 
-  <div class="menu">
-    <div class="templateList">
-      <mat-list-item *ngFor="let template of filteredTemplates; let i = index">
-        <span *ngIf="i % 4 === 0" class="templateRow">
-          <span class="templateIcon">
-            <div mwlDraggable (dragStart)="dragStart($event)" (dragEnd)="dragEnd($event, filteredTemplates[i])">
-              <img class="image" [src]="getImageSourceForTemplate(filteredTemplates[i])" />
-            </div>
-            <div class="templateText">{{ filteredTemplates[i].name }}</div>
-          </span>
-          <span *ngIf="filteredTemplates[i + 1]" class="templateIcon">
-            <div mwlDraggable (dragStart)="dragStart($event)" (dragEnd)="dragEnd($event, filteredTemplates[i + 1])">
-              <img class="image" [src]="getImageSourceForTemplate(filteredTemplates[i + 1])" />
-            </div>
-            <div class="templateText">{{ filteredTemplates[i + 1].name }}</div>
-          </span>
-          <span *ngIf="filteredTemplates[i + 2]" class="templateIcon">
-            <div mwlDraggable (dragStart)="dragStart($event)" (dragEnd)="dragEnd($event, filteredTemplates[i + 2])">
-              <img class="image" [src]="getImageSourceForTemplate(filteredTemplates[i + 2])" />
-            </div>
-            <div class="templateText">{{ filteredTemplates[i + 2].name }}</div>
-          </span>
-          <span *ngIf="filteredTemplates[i + 3]" class="templateIcon">
-            <div mwlDraggable (dragStart)="dragStart($event)" (dragEnd)="dragEnd($event, filteredTemplates[i + 3])">
-              <img class="image" [src]="getImageSourceForTemplate(filteredTemplates[i + 3])" />
-            </div>
-            <div class="templateText">{{ filteredTemplates[i + 3].name }}</div>
-          </span>
-        </span>
-      </mat-list-item>
-    </div>
-  </div>
-</mat-menu>
+     <div class="menu">
+       <div class="templateList">
+         <mat-list-item *ngFor="let template of filteredTemplates; let i = index">
+           <span *ngIf="i % 4 === 0" class="templateRow">
+             <span class="templateIcon">
+               <div
+                 mwlDraggable
+                 (dragStart)="dragStart($event)"
+                 (dragEnd)="dragEnd($event, filteredTemplates[i])"
+                 class="iconContainer">
+                 <img class="image" [src]="getImageSourceForTemplate(filteredTemplates[i])" />
+               </div>
+               <div class="templateText">{{ filteredTemplates[i].name }}</div>
+             </span>
+             <span *ngIf="filteredTemplates[i + 1]" class="templateIcon">
+               <div
+                 mwlDraggable
+                 (dragStart)="dragStart($event)"
+                 (dragEnd)="dragEnd($event, filteredTemplates[i + 1])"
+                 class="iconContainer">
+                 <img class="image" [src]="getImageSourceForTemplate(filteredTemplates[i + 1])" />
+               </div>
+               <div class="templateText">{{ filteredTemplates[i + 1].name }}</div>
+             </span>
+             <span *ngIf="filteredTemplates[i + 2]" class="templateIcon">
+               <div
+                 mwlDraggable
+                 (dragStart)="dragStart($event)"
+                 (dragEnd)="dragEnd($event, filteredTemplates[i + 2])"
+                 class="iconContainer">
+                 <img class="image" [src]="getImageSourceForTemplate(filteredTemplates[i + 2])" />
+               </div>
+               <div class="templateText">{{ filteredTemplates[i + 2].name }}</div>
+             </span>
+             <span *ngIf="filteredTemplates[i + 3]" class="templateIcon">
+               <div
+                 mwlDraggable
+                 (dragStart)="dragStart($event)"
+                 (dragEnd)="dragEnd($event, filteredTemplates[i + 3])"
+                 class="iconContainer">
+                 <img class="image" [src]="getImageSourceForTemplate(filteredTemplates[i + 3])" />
+               </div>
+               <div class="templateText">{{ filteredTemplates[i + 3].name }}</div>
+             </span>
+           </span>
+         </mat-list-item>
+       </div>
+     </div>
+   </div>
+</mat-menu>

src/app/components/template/template.component.scss

@@ -1,6 +1,7 @@
 ::ng-deep .mat-menu-panel {
   max-width: 400px;
-  max-height: 500px;
+  max-height: 640px;
+  border-radius: 8px;
 }
 
 .menu {
@@ -8,6 +9,26 @@
   overflow-y: scroll;
   scrollbar-color: darkgrey #263238;
   scrollbar-width: thin;
+  font-size: 12px;
+}
+
+.templateMenuHeader {
+   border-bottom: 1px solid rgba(255,255,255,0.05);
+}
+
+.templateFilterBar {
+   padding: 10px 2%;
+   background-color: rgba(0,0,0,0.2);
+   margin-bottom: 10px;
+}
+
+.templateFilterBar > .form-field {
+   font-size: 12px;
+}
+
+.templateFilterBar .searchIcon {
+   position: relative;
+   top: 5px;
 }
 
 ::-webkit-scrollbar {
@@ -24,20 +45,22 @@
 }
 
 .form-field {
-  width: 90%;
-  margin-left: 5%;
-  margin-right: 5%;
+  width: 44%;
+  margin-left: 3%;
+  margin-right: 3%;
 }
 
 .image {
-  width: 65px;
-  height: 65px;
+  display: inline-block;
+  width: 55px;
+  height: 55px;
   filter: invert(0);
   --webkit-filter: invert(0) !important;
 }
 
 .templateList {
   width: 100%;
+  padding: 10px;
 }
 
 .templateRow {
@@ -50,6 +73,23 @@
 }
 
 .templateIcon {
-  width: 80px !important;
-  padding: 10px;
+  width: 90px !important;
+  padding: 2px 5px;
+  text-align: center;
+  margin: 3px;
+}
+
+.templateIcon > .iconContainer {
+   display: inline-flex;
+   align-items: center;
+   justify-content: center;
+   width: 70px;
+   height: 70px;
+   margin-bottom: 10px;
+   border-radius: 50%;
+   cursor: move;
+}
+
+.templateIcon > .iconContainer:hover {
+   background-color: rgba(237, 246, 231, 0.08);
 }

src/app/components/template/template.component.ts

@@ -8,6 +8,7 @@ import { MapScaleService } from '../../services/mapScale.service';
 import { SymbolService } from '../../services/symbol.service';
 import { TemplateService } from '../../services/template.service';
 import { NodeAddedEvent, TemplateListDialogComponent } from './template-list-dialog/template-list-dialog.component';
+import { NewTemplateDialogComponent } from '../project-map/new-template-dialog/new-template-dialog.component';
 
 @Component({
   selector: 'app-template',
@@ -127,6 +128,19 @@ export class TemplateComponent implements OnInit, OnDestroy {
     });
   }
 
+  addNewTemplate() {
+    const dialogRef = this.dialog.open(NewTemplateDialogComponent, {
+      width: '1000px',
+      maxHeight: '700px',
+      autoFocus: false,
+      disableClose: true,
+    });
+
+    let instance = dialogRef.componentInstance;
+    instance.server = this.server;
+    instance.project = this.project;
+  }
+
   getImageSourceForTemplate(template: Template) {
     return `${this.server.protocol}//${this.server.host}:${this.server.port}/v2/symbols/${template.symbol}/raw`;
   }
@@ -134,4 +148,4 @@ export class TemplateComponent implements OnInit, OnDestroy {
   ngOnDestroy() {
     this.subscription.unsubscribe();
   }
-}
+}

src/app/components/topology-summary/topology-summary.component.ts

@@ -78,7 +78,28 @@ export class TopologySummaryComponent implements OnInit, OnDestroy {
       this.computes = computes;
     });
 
-    this.style = { top: '60px', right: '0px', width: '320px', height: '400px' };
+    this.revertPosition();
+  }
+
+  revertPosition(){
+    let leftPosition = localStorage.getItem('leftPosition');
+    let rightPosition = localStorage.getItem('rightPosition');
+    let topPosition = localStorage.getItem('topPosition');
+    let widthOfWidget = localStorage.getItem('widthOfWidget');
+    let heightOfWidget = localStorage.getItem('heightOfWidget');
+
+    if (!topPosition) {
+      this.style = { top: '60px', right: '0px', width: '320px', height: '400px' };
+    } else {
+      this.style = {
+        position: 'fixed',
+        left: `${+leftPosition}px`,
+        right: `${+rightPosition}px`,
+        top: `${+topPosition}px`,
+        width: `${+widthOfWidget}px`,
+        height: `${+heightOfWidget}px`,
+      };
+    }
   }
 
   toggleDragging(value: boolean) {
@@ -101,6 +122,12 @@ export class TopologySummaryComponent implements OnInit, OnDestroy {
         width: `${width}px`,
         height: `${height}px`,
       };
+
+      localStorage.setItem('leftPosition', left.toString());
+      localStorage.setItem('topPosition', top.toString());
+      localStorage.setItem('widthOfWidget', width.toString());
+      localStorage.setItem('heightOfWidget', height.toString());
+
     } else {
       let right: number = Number(this.style['right'].split('px')[0]) - x;
       this.style = {
@@ -110,6 +137,11 @@ export class TopologySummaryComponent implements OnInit, OnDestroy {
         width: `${width}px`,
         height: `${height}px`,
       };
+
+      localStorage.setItem('rightPosition', right.toString());
+      localStorage.setItem('topPosition', top.toString());
+      localStorage.setItem('widthOfWidget', width.toString());
+      localStorage.setItem('heightOfWidget', height.toString());
     }
   }
 
@@ -140,6 +172,7 @@ export class TopologySummaryComponent implements OnInit, OnDestroy {
 
   toggleTopologyVisibility(value: boolean) {
     this.isTopologyVisible = value;
+    this.revertPosition();
   }
 
   compareAsc(first: Node, second: Node) {

src/app/services/docker-configuration.service.ts

@@ -19,7 +19,7 @@ export class DockerConfigurationService {
   }
 
   getConsoleResolutions() {
-    let consoleResolutions = ['1920x1080', '1366x768', '1280x1024', '1280x800', '1024x768', '800x600', '640x480'];
+    let consoleResolutions = ['2560x1440', '1920x1080', '1680x1050', '1440x900', '1366x768', '1280x1024', '1280x800', '1024x768', '800x600', '640x480'];
 
     return consoleResolutions;
   }

src/app/services/google-analytics.service.ts

@@ -1,14 +1,17 @@
 import { Injectable } from '@angular/core';
 import { NavigationEnd, Router } from '@angular/router';
 import { environment } from '../../environments/environment';
+import { SettingsService } from './settings.service';
 declare var gtag: Function;
 
 @Injectable()
 export class GoogleAnalyticsService {
-  constructor(router: Router) {
+  private settingsService: SettingsService;
+
+  constructor(router: Router, settingsService: SettingsService) {
     if (!environment.production) return;
     router.events.subscribe((event) => {
-      if (event instanceof NavigationEnd) {
+      if (settingsService.getStatisticsSettings() && event instanceof NavigationEnd) {
         gtag('set', 'page', event.url);
         gtag('send', 'pageview');
       }

src/app/services/nodeConsole.service.ts

@@ -78,13 +78,15 @@ export class NodeConsoleService {
     let nodesToStart = 'Please start the following nodes if you want to open consoles for them: ';
     let nodesToStartCounter = 0;
     nodes.forEach((n) => {
-      if (n.status === 'started') {
-        this.mapSettingsService.logConsoleSubject.next(true);
-        // this timeout is required due to xterm.js implementation
-        setTimeout(() => { this.openConsoleForNode(n); }, 500);
-      } else {
-        nodesToStartCounter++;
-        nodesToStart += n.name + ' '
+      if (n.console_type !== "none") {
+        if (n.status === 'started') {
+          this.mapSettingsService.logConsoleSubject.next(true);
+          // this timeout is required due to xterm.js implementation
+          setTimeout(() => { this.openConsoleForNode(n); }, 500);
+        } else {
+          nodesToStartCounter++;
+          nodesToStart += n.name + ' '
+        }
       }
     });
     if (nodesToStartCounter > 0) {
@@ -93,16 +95,19 @@ export class NodeConsoleService {
   }
 
   openConsolesForAllNodesInNewTabs(nodes: Node[]) {
-    let nodesToStart = 'Please start the following nodes if you want to open consoles for them: ';
+    let nodesToStart = 'Please start the following nodes if you want to open consoles in tabs for them: ';
     let nodesToStartCounter = 0;
     nodes.forEach((n) => {
-      if (n.status === 'started') {
-        let url = this.router.url.split('/');
-        let urlString = `/static/web-ui/${url[1]}/${url[2]}/${url[3]}/${url[4]}/nodes/${n.node_id}`;
-        window.open(urlString);
-      } else {
-        nodesToStartCounter++;
-        nodesToStart += n.name + ' '
+      // opening a console in tab is only supported for telnet type
+      if (n.console_type === "telnet") {
+        if (n.status === 'started') {
+          let url = this.router.url.split('/');
+          let urlString = `/static/web-ui/${url[1]}/${url[2]}/${url[3]}/${url[4]}/nodes/${n.node_id}`;
+          window.open(urlString);
+        } else {
+          nodesToStartCounter++;
+          nodesToStart += n.name + ' '
+        }
       }
     });
     if (nodesToStartCounter > 0) {

src/app/services/settings.service.ts

@@ -4,6 +4,7 @@ import { BehaviorSubject } from 'rxjs';
 export interface Settings {
   crash_reports: boolean;
   console_command: string;
+  anonymous_statistics: boolean;
 }
 
 @Injectable({
@@ -13,10 +14,12 @@ export class SettingsService {
   private settings: Settings = {
     crash_reports: true,
     console_command: undefined,
+    anonymous_statistics: true
   };
 
   private readonly reportsSettings: string = 'crash_reports';
   private readonly consoleSettings: string = 'console_command';
+  private readonly statisticsSettings: string = 'statistics_command';
 
   constructor() {
     if (this.getItem(this.reportsSettings))
@@ -24,6 +27,9 @@ export class SettingsService {
 
     if (this.getItem(this.consoleSettings))
       this.settings.console_command = this.getItem(this.consoleSettings);
+
+    if (this.getItem(this.statisticsSettings))
+      this.settings.anonymous_statistics = this.getItem(this.statisticsSettings) === 'true' ? true : false;
   }
 
   setReportsSettings(value: boolean) {
@@ -36,10 +42,24 @@ export class SettingsService {
     }
   }
 
+  setStatisticsSettings(value: boolean) {
+    this.settings.anonymous_statistics = value;
+    this.removeItem(this.statisticsSettings);
+    if (value) {
+      this.setItem(this.statisticsSettings, 'true');
+    } else {
+      this.setItem(this.statisticsSettings, 'false');
+    }
+  }
+
   getReportsSettings() {
     return this.getItem(this.reportsSettings) === 'true' ? true : false;
   }
 
+  getStatisticsSettings() {
+    return this.getItem(this.statisticsSettings) === 'true' ? true : false;
+  }
+
   setConsoleSettings(value: string) {
     this.settings.console_command = value;
     this.removeItem(this.consoleSettings);
@@ -70,5 +90,6 @@ export class SettingsService {
     this.settings = settings;
     this.setConsoleSettings(settings.console_command);
     this.setReportsSettings(settings.crash_reports);
+    this.setStatisticsSettings(settings.anonymous_statistics);
   }
 }

src/test.ts

@@ -5,7 +5,9 @@ import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@ang
 declare const require: any;
 
 // First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {
+    teardown: { destroyAfterEach: false }
+});
 // Then we find all the tests.
 const context = require.context('./', true, /\.spec\.ts$/);
 // And load the modules.

src/theme.scss

@@ -1,4 +1,4 @@
-@import '~@angular/material/theming';
+@import '@angular/material/theming';
 @import '~material-design-icons/iconfont/material-icons.css';
 @import '~typeface-roboto/index.css';
 @include mat-core();