Merge pull request #1551 from GNS3/dependabot/pip/scripts/requests-2.32.4

Bump requests from 2.32.3 to 2.32.4 in /scripts

.github/workflows/add-new-issues-to-project.yml

@@ -0,0 +1,16 @@
+name: Add new issues to GNS3 project
+
+on:
+  issues:
+    types:
+      - opened
+
+jobs:
+  add-to-project:
+    name: Add issue to project
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/add-to-project@v0.4.0
+        with:
+          project-url: https://github.com/orgs/GNS3/projects/3
+          github-token: ${{ secrets.ADD_NEW_ISSUES_TO_PROJECT }}

.github/workflows/codeql.yml

@@ -0,0 +1,76 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: "CodeQL"
+
+on:
+  push:
+    branches: [ "master", "master-3.0" ]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [ "master", "master-3.0" ]
+  schedule:
+    - cron: '38 18 * * 6'
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: [ 'javascript', 'python' ]
+        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
+        # Use only 'java' to analyze code written in Java, Kotlin or both
+        # Use only 'javascript' to analyze code written in JavaScript, TypeScript or both
+        # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v3
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v2
+      with:
+        languages: ${{ matrix.language }}
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file.
+        # Prefix the list here with "+" to use these queries and those in the config file.
+
+        # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
+        # queries: security-extended,security-and-quality
+
+
+    # Autobuild attempts to build any compiled languages  (C/C++, C#, Go, or Java).
+    # If this step fails, then you should remove it and run the build manually (see below)
+    - name: Autobuild
+      uses: github/codeql-action/autobuild@v2
+
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
+
+    #   If the Autobuild fails above, remove it and uncomment the following three lines.
+    #   modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance.
+
+    # - run: |
+    #   echo "Run, Build Application using script"
+    #   ./location_of_script_within_repo/buildscript.sh
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v2
+      with:
+        category: "/language:${{matrix.language}}"

.whitesource

@@ -2,7 +2,8 @@
   "scanSettings": {
     "configMode": "AUTO",
     "configExternalURL": "",
-    "projectToken" : ""
+    "projectToken" : "",
+    "baseBranches": ["master", "master-3.0"]
   },
   "checkRunSettings": {
     "vulnerableCheckRunConclusionLevel": "failure"
@@ -10,4 +11,4 @@
   "issueSettings": {
     "minSeverityLevel": "LOW"
   }
-}
+}

SECURITY.md

@@ -0,0 +1,5 @@
+# Security Policy
+
+## Reporting a Vulnerability
+
+Please use GitHub's report a vulnerability feature. More information can be found in https://docs.github.com/en/code-security/security-advisories/guidance-on-reporting-and-writing/privately-reporting-a-security-vulnerability

angular.json

@@ -26,8 +26,9 @@
 							"rxjs/add/operator/map",
 							"rxjs-compat/add/operator/map",
 							"classnames",
-							"stylenames"
-						],
+							"stylenames",
+              "ipaddr.js"
+            ],
 						"outputPath": "dist",
 						"index": "src/index.html",
 						"main": "src/main.ts",
@@ -243,4 +244,4 @@
 	"cli": {
 		"analytics": false
 	}
-}
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gns3-web-ui",
-  "version": "2.2.35",
+  "version": "2.2.54",
   "author": {
     "name": "GNS3 Technology Inc.",
     "email": "developers@gns3.com"
@@ -66,6 +66,7 @@
     "d3-ng2-service": "^2.2.0",
     "eev": "^0.1.5",
     "ini": "^2.0.0",
+    "ipaddr.js": "^2.1.0",
     "material-design-icons": "^3.0.1",
     "mousetrap": "^1.6.5",
     "ng-circle-progress": "^1.6.0",
@@ -79,7 +80,7 @@
     "rxjs": "^6.6.7",
     "rxjs-compat": "^6.6.7",
     "save-svg-as-png": "^1.4.17",
-    "snyk": "^1.996.0",
+    "snyk": "^1.1064.0",
     "spark-md5": "^3.0.2",
     "svg-crowbar": "^0.7.0",
     "tree-kill": "^1.2.2",
@@ -125,7 +126,7 @@
     "tslint": "^6.1.3",
     "tslint-config-prettier": "^1.18.0",
     "typescript": "4.2.3",
-    "webpack": "5.62.1",
+    "webpack": "5.76.0",
     "yarn-upgrade-all": "^0.5.4"
   },
   "greenkeeper": {

scripts/requirements.txt

@@ -1,6 +1,6 @@
-setuptools==54.2.0
+setuptools==78.1.1
 cx_Freeze==5.1.1
-requests==2.25.1
+requests==2.32.4
 packaging==20.9
 appdirs==1.4.4
 psutil==5.8.0

src/app/app.component.html

@@ -1,4 +1,4 @@
 <div [ngClass]="{ dark: darkThemeEnabled, light: !darkThemeEnabled }">
   <router-outlet></router-outlet>
-  <app-adbutler></app-adbutler>
+  <!-- <app-adbutler></app-adbutler> -->
 </div>

src/app/app.module.ts

@@ -215,6 +215,7 @@ import { DefaultLayoutComponent } from './layouts/default-layout/default-layout.
 import { MATERIAL_IMPORTS } from './material.imports';
 import { ServerResolve } from './resolvers/server-resolve';
 import { ApplianceService } from './services/appliances.service';
+import { ProtocolHandlerService } from './services/protocol-handler.service';
 import { BuiltInTemplatesConfigurationService } from './services/built-in-templates-configuration.service';
 import { BuiltInTemplatesService } from './services/built-in-templates.service';
 import { ComputeService } from './services/compute.service';
@@ -538,6 +539,7 @@ import { RotationValidator } from './validators/rotation-validator';
     ComputeService,
     TracengService,
     PacketCaptureService,
+    ProtocolHandlerService,
     NotificationService,
     Gns3vmService,
     ThemeService,

src/app/cartography/components/experimental-map/drawing/drawings/rect/rect.component.html

@@ -7,4 +7,6 @@
   [attr.stroke-dasharray]="stroke_dasharray"
   [attr.width]="rect.width"
   [attr.height]="rect.height"
+  [attr.rx]="rect.rx"
+  [attr.ry]="rect.ry"
 />

src/app/cartography/converters/map/map-drawing-to-svg-converter.ts

@@ -14,7 +14,7 @@ export class MapDrawingToSvgConverter implements Converter<MapDrawing, string> {
     let elem = ``;
 
     if (mapDrawing.element instanceof RectElement) {
-      elem = `<rect fill=\"${mapDrawing.element.fill}\" fill-opacity=\"${mapDrawing.element.fill_opacity}\" height=\"${mapDrawing.element.height}\" width=\"${mapDrawing.element.width}\" stroke=\"${mapDrawing.element.stroke}\" stroke-width=\"${mapDrawing.element.stroke_width}\" />`;
+      elem = `<rect fill=\"${mapDrawing.element.fill}\" fill-opacity=\"${mapDrawing.element.fill_opacity}\" height=\"${mapDrawing.element.height}\" width=\"${mapDrawing.element.width}\" stroke=\"${mapDrawing.element.stroke}\" stroke-width=\"${mapDrawing.element.stroke_width}\" rx=\"${mapDrawing.element.rx}\" ry=\"${mapDrawing.element.ry}\" />`;
     } else if (mapDrawing.element instanceof EllipseElement) {
       elem = `<ellipse fill=\"${mapDrawing.element.fill}\" fill-opacity=\"${mapDrawing.element.fill_opacity}\" cx=\"${mapDrawing.element.cx}\" cy=\"${mapDrawing.element.cy}\" rx=\"${mapDrawing.element.rx}\" ry=\"${mapDrawing.element.ry}\" stroke=\"${mapDrawing.element.stroke}\" stroke-width=\"${mapDrawing.element.stroke_width}\" />`;
     } else if (mapDrawing.element instanceof LineElement) {

src/app/cartography/helpers/drawings-factory/rectangle-element-factory.ts

@@ -13,6 +13,8 @@ export class RectangleElementFactory implements DrawingElementFactory {
     rectElement.stroke_width = 2;
     rectElement.width = 200;
     rectElement.height = 100;
+    rectElement.rx = 0;
+    rectElement.ry = 0;
     return rectElement;
   }
 }

src/app/cartography/helpers/svg-to-drawing-converter/rect-converter.spec.ts

@@ -17,6 +17,8 @@ describe('RectConverter', () => {
 
     element.setAttribute('width', '100px');
     element.setAttribute('height', '200px');
+    element.setAttribute('rx', '0');
+    element.setAttribute('ry', '0');
 
     const drawing = rectConverter.convert(element);
     expect(drawing.fill).toEqual('#ffffff');
@@ -25,6 +27,8 @@ describe('RectConverter', () => {
     expect(drawing.stroke_dasharray).toEqual('5,25,25');
     expect(drawing.width).toEqual(100);
     expect(drawing.height).toEqual(200);
+    expect(drawing.rx).toEqual(0);
+    expect(drawing.ry).toEqual(0);
   });
 
   it('should parse with no attributes', () => {
@@ -37,5 +41,7 @@ describe('RectConverter', () => {
     expect(drawing.stroke_dasharray).toBeUndefined();
     expect(drawing.width).toBeUndefined();
     expect(drawing.height).toBeUndefined();
+    expect(drawing.rx).toBeUndefined();
+    expect(drawing.ry).toBeUndefined();
   });
 });

src/app/cartography/helpers/svg-to-drawing-converter/rect-converter.ts

@@ -40,6 +40,16 @@ export class RectConverter implements SvgConverter {
       drawing.height = parseInt(height.value, 10);
     }
 
+    const rx = element.attributes.getNamedItem('rx');
+    if (rx) {
+      drawing.rx = parseInt(rx.value, 0);
+    }
+
+    const ry = element.attributes.getNamedItem('ry');
+    if (ry) {
+      drawing.ry = parseInt(ry.value, 0);
+    }
+
     return drawing;
   }
 }

src/app/cartography/models/drawings/rect-element.ts

@@ -8,4 +8,6 @@ export class RectElement implements DrawingElement {
   stroke: string;
   stroke_width: number;
   stroke_dasharray: string;
+  rx: number;
+  ry: number;
 }

src/app/cartography/models/node.ts

@@ -14,6 +14,7 @@ export class Properties {
   headless: boolean;
   linked_clone: boolean;
   on_close: string;
+  aux: number;
   ram: number;
   nvram: number;
   usage: string;
@@ -55,6 +56,8 @@ export class Properties {
   extra_hosts: string;
   extra_volumes: string[];
   replicate_network_connection_state: boolean;
+  tpm: boolean;
+  uefi: boolean;
 }
 
 export class Node {

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

@@ -28,6 +28,8 @@ describe('RectDrawingWidget', () => {
     rect.stroke_dasharray = '5,25,25';
     rect.width = 100;
     rect.height = 200;
+    rect.rx = 0;
+    rect.ry = 0;
     drawing.element = rect;
 
     const drawings = svg.canvas.selectAll<SVGGElement, MapDrawing>('g.drawing').data([drawing]);
@@ -46,5 +48,7 @@ describe('RectDrawingWidget', () => {
     expect(rect_element.getAttribute('stroke-dasharray')).toEqual('5,25,25');
     expect(rect_element.getAttribute('width')).toEqual('100');
     expect(rect_element.getAttribute('height')).toEqual('200');
+    expect(rect_element.getAttribute('rx')).toEqual('0');
+    expect(rect_element.getAttribute('ry')).toEqual('0');
   });
 });

src/app/cartography/widgets/drawings/rect-drawing.ts

@@ -33,7 +33,9 @@ export class RectDrawingWidget implements DrawingShapeWidget {
       .attr('stroke-width', (rect) => rect.stroke_width)
       .attr('stroke-dasharray', (rect) => this.qtDasharrayFixer.fix(rect.stroke_dasharray))
       .attr('width', (rect) => rect.width)
-      .attr('height', (rect) => rect.height);
+      .attr('height', (rect) => rect.height)
+      .attr('rx', (rect) => rect.rx)
+      .attr('ry', (rect) => rect.ry);
 
     drawing.exit().remove();
   }

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

@@ -90,7 +90,7 @@ export class InterfaceStatusWidget implements Widget {
           .merge(status_started_enter)
           .attr('class', 'status_started')
           .attr('width', (ls: LinkStatus) => {
-            return ls.port.length * 8 + 10;
+            return ls.port.length * 10 + 5;
           })
           .attr('height', 20)
           .attr('x', (ls: LinkStatus) => ls.x - 30)
@@ -122,7 +122,7 @@ export class InterfaceStatusWidget implements Widget {
           .merge(status_stopped_enter)
           .attr('class', 'status_stopped')
           .attr('width', (ls: LinkStatus) => {
-            return ls.port.length * 8 + 10;
+            return ls.port.length * 10 + 5;
           })
           .attr('height', 20)
           .attr('x', (ls: LinkStatus) => ls.x - 30)
@@ -154,7 +154,7 @@ export class InterfaceStatusWidget implements Widget {
           .merge(status_suspended_enter)
           .attr('class', 'status_suspended')
           .attr('width', (ls: LinkStatus) => {
-            return ls.port.length * 8 + 10;
+            return ls.port.length * 10 + 5;
           })
           .attr('height', 20)
           .attr('x', (ls: LinkStatus) => ls.x - 30)

src/app/cartography/widgets/link.ts

@@ -87,6 +87,7 @@ export class LinkWidget implements Widget {
       .filter((l) => {
         return (
           !l.capturing &&
+          !l.suspend &&
           (l.filters.bpf || l.filters.corrupt || l.filters.delay || l.filters.frequency_drop || l.filters.packet_loss)
         );
       })
@@ -113,9 +114,7 @@ export class LinkWidget implements Widget {
     link_body
       .filter((l) => {
         return (
-          l.capturing &&
-          l.suspend &&
-          !(l.filters.bpf || l.filters.corrupt || l.filters.delay || l.filters.frequency_drop || l.filters.packet_loss)
+          l.suspend
         );
       })
       .append<SVGGElement>('g')

src/app/components/preferences/common/custom-adapters-table/custom-adapters-table.component.html

@@ -13,8 +13,8 @@
     <th mat-header-cell *matHeaderCellDef>Adapter type</th>
     <td mat-cell *matCellDef="let element; let i = index">
       <mat-select placeholder="Type" [(ngModel)]="element.adapter_type">
-        <mat-option *ngFor="let type of networkTypes" [value]="type">
-          {{ type }}
+        <mat-option *ngFor="let type of networkTypes" [value]="type.value">
+          {{ type.name }}
         </mat-option>
       </mat-select>
     </td>

src/app/components/preferences/common/ports/ports.component.ts

@@ -30,6 +30,7 @@ export class PortsComponent implements OnInit {
   }
 
   onAdd() {
+    this.newPort.name = "Ethernet" + this.newPort.port_number;
     this.ethernetPorts.push(this.newPort);
 
     this.newPort = {

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

@@ -59,6 +59,15 @@
               placeholder="Start command"
             />
           </mat-form-field>
+          <mat-form-field class="form-field">
+            <input
+              matInput
+              type="text"
+              [ngModelOptions]="{ standalone: true }"
+              [(ngModel)]="dockerTemplate.mac_address"
+              placeholder="Base MAC"
+            />
+          </mat-form-field>
           <mat-form-field class="form-field">
             <input
               formControlName="adapter"

src/app/components/preferences/ios-on-unix/add-iou-template/add-iou-template.component.html

@@ -61,7 +61,7 @@
             <div *ngIf="newImageSelected">
               <input
                 type="file"
-                accept=".bin"
+                accept=".bin, .image, .iol"
                 #file
                 class="nonvisible"
                 (change)="uploadImageFile($event)"

src/app/components/preferences/ios-on-unix/iou-template-details/iou-template-details.component.html

@@ -52,7 +52,7 @@
           </mat-form-field>
           <input
             type="file"
-            accept=".bin"
+            accept=".bin, .image, .iol"
             #file
             class="nonvisible"
             (change)="uploadImageFile($event)"
@@ -98,14 +98,14 @@
         <mat-checkbox [(ngModel)]="iouTemplate.l1_keepalives">
           Enable layer 1 keepalive messages (non-functional) </mat-checkbox
         ><br />
-        <mat-checkbox [(ngModel)]="defaultSettings"> Use default IOU values for memories </mat-checkbox>
-        <mat-form-field class="form-field" *ngIf="!defaultSettings">
+        <mat-checkbox [(ngModel)]="iouTemplate.use_default_iou_values"> Use default IOU values for memories </mat-checkbox>
+        <mat-form-field class="form-field" *ngIf="!iouTemplate.use_default_iou_values">
           <input matInput type="number" [(ngModel)]="iouTemplate.ram" placeholder="RAM size" />
           <span matSuffix>MB</span>
         </mat-form-field>
-        <mat-form-field class="form-field" *ngIf="!defaultSettings">
+        <mat-form-field class="form-field" *ngIf="!iouTemplate.use_default_iou_values">
           <input matInput type="number" [(ngModel)]="iouTemplate.nvram" placeholder="NVRAM size" />
-          <span matSuffix>MB</span>
+          <span matSuffix>KB</span>
         </mat-form-field>
       </mat-expansion-panel>
       <mat-expansion-panel>

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

@@ -186,13 +186,15 @@
         </mat-form-field>
         <mat-form-field class="form-field">
           <mat-select placeholder="Type" [(ngModel)]="qemuTemplate.adapter_type">
-            <mat-option *ngFor="let type of networkTypes" [value]="type[0]"> {{ type[1] }} ({{ type[0] }}) </mat-option>
+            <mat-option *ngFor="let type of networkTypes" [value]="type.value">{{type.name}} ({{type.value}}) </mat-option>
           </mat-select>
         </mat-form-field>
         <button mat-button class="configButton" (click)="setCustomAdaptersConfiguratorState(true)">
           Configure custom adapters</button
-        ><br />
-        <mat-checkbox [(ngModel)]="qemuTemplate.legacy_networking"> Use the legacy networking mode </mat-checkbox>
+        >
+        <br /><mat-checkbox [(ngModel)]="qemuTemplate.legacy_networking"> Use the legacy networking mode </mat-checkbox>
+        <br /><mat-checkbox [(ngModel)]="qemuTemplate.replicate_network_connection_state"> Replicate network connection state </mat-checkbox>
+
       </mat-expansion-panel>
       <mat-expansion-panel>
         <mat-expansion-panel-header>
@@ -271,6 +273,8 @@
               <input matInput type="text" [(ngModel)]="qemuTemplate.options" placeholder="Options" />
             </mat-form-field>
             <mat-checkbox [(ngModel)]="qemuTemplate.linked_clone"> Use as a linked base VM </mat-checkbox>
+            <br /><mat-checkbox [(ngModel)]="qemuTemplate.tpm"> Enable the Trusted Platform Module (TPM)</mat-checkbox>
+            <br /><mat-checkbox [(ngModel)]="qemuTemplate.uefi"> Enable the UEFI boot mode </mat-checkbox>
           </mat-card-content>
         </mat-card>
       </mat-expansion-panel>

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

@@ -2,3 +2,11 @@
   <mat-icon>web_asset</mat-icon>
   <span>Console</span>
 </button>
+<button
+  mat-menu-item
+  *ngIf="node.node_type === 'docker' || node.node_type === 'dynamips' || node.node_type === 'qemu'"
+  (click)="openConsole(auxiliary=true)"
+>
+  <mat-icon>web_asset</mat-icon>
+  <span>Auxiliary console</span>
+</button>

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

@@ -1,8 +1,12 @@
 import { Component, Input } from '@angular/core';
+import { DeviceDetectorService } from 'ngx-device-detector';
 import { Node } from '../../../../../cartography/models/node';
 import { Server } from '../../../../../models/server';
 import { NodeService } from '../../../../../services/node.service';
 import { ToasterService } from '../../../../../services/toaster.service';
+import { ProtocolHandlerService } from '../../../../../services/protocol-handler.service';
+
+import * as ipaddr from 'ipaddr.js';
 
 @Component({
   selector: 'app-console-device-action-browser',
@@ -12,16 +16,16 @@ export class ConsoleDeviceActionBrowserComponent {
   @Input() server: Server;
   @Input() node: Node;
 
-  constructor(private toasterService: ToasterService, private nodeService: NodeService) {}
+  constructor(private toasterService: ToasterService, private nodeService: NodeService, private protocolHandlerService: ProtocolHandlerService) {}
 
-  openConsole() {
+  openConsole(auxiliary: boolean = false) {
     this.nodeService.getNode(this.server, this.node).subscribe((node: Node) => {
       this.node = node;
-      this.startConsole();
+      this.startConsole(auxiliary);
     });
   }
 
-  startConsole() {
+  startConsole(auxiliary: boolean) {
     if (this.node.status !== 'started') {
       this.toasterService.error('This node must be started before a console can be opened');
     } else {
@@ -34,21 +38,38 @@ export class ConsoleDeviceActionBrowserComponent {
       }
 
       try {
+        var uri;
+        var host = this.node.console_host;
+        if (ipaddr.IPv6.isValid(host)) {
+           host = `[${host}]`;
+        }
         if (this.node.console_type === 'telnet') {
-          location.assign(
-            `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}`
-          );
+
+          var console_port;
+          if (auxiliary === true) {
+            console_port = this.node.properties.aux;
+            if (console_port === undefined) {
+              this.toasterService.error('Auxiliary console port is not set.');
+              return;
+            }
+          } else {
+            console_port = this.node.console;
+          }
+          uri = `gns3+telnet://${host}:${console_port}?name=${this.node.name}&project_id=${this.node.project_id}&node_id=${this.node.node_id}`;
         } 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}`
-          );
+          uri = `gns3+vnc://${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}`
-          );
+          uri = `gns3+spice://${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('http')) {
+          uri = `${this.node.console_type}://${host}:${this.node.console}`
+          return window.open(uri);  // open an http console directly in a new window/tab
         } else {
           this.toasterService.error('Supported console types are: telnet, vnc, spice and spice+agent.');
+          return;
         }
+
+        this.protocolHandlerService.open(uri);
+
       } catch (e) {
           this.toasterService.error(e);
       }

src/app/components/project-map/drawings-editors/style-editor/style-editor.component.html

@@ -2,7 +2,7 @@
 
 <div class="modal-form-container">
   <form [formGroup]="formGroup">
-    <mat-form-field class="form-field">
+    <mat-form-field class="form-field" *ngIf="element.fill !== undefined">
       <input
         matInput
         [ngModelOptions]="{ standalone: true }"
@@ -23,7 +23,13 @@
     </mat-form-field>
 
     <mat-form-field class="form-field">
-      <input matInput formControlName="borderWidth" placeholder="Border width" type="number" />
+      <input
+        matInput formControlName="borderWidth"
+        placeholder="Border width"
+        type="number"
+        min="0"
+        max="100"
+      />
     </mat-form-field>
 
     <mat-form-field class="form-field" *ngIf="element.stroke_dasharray">
@@ -36,6 +42,41 @@
       />
     </mat-form-field>
 
+    <mat-form-field class="form-field" *ngIf="element.width !== undefined">
+      <input
+        matInput
+        [ngModelOptions]="{ standalone: true }"
+        placeholder="Width"
+        min="0"
+        type="number"
+        [(ngModel)]="element.width"
+      />
+    </mat-form-field>
+
+    <mat-form-field class="form-field" *ngIf="element.height !== undefined">
+      <input
+        matInput
+        [ngModelOptions]="{ standalone: true }"
+        placeholder="Height"
+        min="0"
+        type="number"
+        [(ngModel)]="element.height"
+      />
+    </mat-form-field>
+
+
+    <mat-form-field class="form-field" *ngIf="element.rx !== undefined">
+      <input
+        matInput
+        [ngModelOptions]="{ standalone: true }"
+        placeholder="Corner radius"
+        type="number"
+        min="0"
+        max="100"
+        [(ngModel)]="element.rx"
+      />
+    </mat-form-field>
+
     <mat-form-field class="form-field">
       <input matInput formControlName="rotation" placeholder="Rotation" type="number" />
     </mat-form-field>

src/app/components/project-map/drawings-editors/style-editor/style-editor.component.ts

@@ -49,6 +49,8 @@ export class StyleEditorDialogComponent implements OnInit {
 
     if (this.drawing.element instanceof RectElement || this.drawing.element instanceof EllipseElement) {
       this.element.fill = this.drawing.element.fill;
+      this.element.width = this.drawing.element.width;
+      this.element.height = this.drawing.element.height;
       this.element.stroke = this.drawing.element.stroke;
       this.element.stroke_dasharray = this.drawing.element.stroke_dasharray;
       this.element.stroke_width = this.drawing.element.stroke_width;
@@ -58,6 +60,11 @@ export class StyleEditorDialogComponent implements OnInit {
       this.element.stroke_width = this.drawing.element.stroke_width;
     }
 
+    if (this.drawing.element instanceof RectElement) {
+        this.element.rx = this.drawing.element.rx;
+        this.element.ry = this.drawing.element.ry;
+      }
+
     if (this.element.stroke_width === undefined) this.element.stroke_width = 0;
     this.formGroup.controls['borderWidth'].setValue(this.element.stroke_width);
     this.formGroup.controls['rotation'].setValue(this.drawing.rotation);
@@ -74,6 +81,8 @@ export class StyleEditorDialogComponent implements OnInit {
 
       if (this.drawing.element instanceof RectElement || this.drawing.element instanceof EllipseElement) {
         this.drawing.element.fill = this.element.fill;
+        this.drawing.element.width = this.element.width;
+        this.drawing.element.height = this.element.height;
         this.drawing.element.stroke = this.element.stroke;
         this.drawing.element.stroke_dasharray = this.element.stroke_dasharray;
         this.drawing.element.stroke_width = this.element.stroke_width;
@@ -83,6 +92,11 @@ export class StyleEditorDialogComponent implements OnInit {
         this.drawing.element.stroke_width = this.element.stroke_width;
       }
 
+      if (this.drawing.element instanceof RectElement) {
+        this.drawing.element.rx = this.element.rx;
+        this.drawing.element.ry = this.element.rx;  // set ry with rx because we don't have ry in the form
+      }
+
       let mapDrawing = this.drawingToMapDrawingConverter.convert(this.drawing);
       mapDrawing.element = this.drawing.element;
 
@@ -100,7 +114,11 @@ export class StyleEditorDialogComponent implements OnInit {
 
 export class ElementData {
   fill: string;
+  width: number;
+  height: number;
   stroke: string;
   stroke_width: number;
   stroke_dasharray: string;
+  rx: number;
+  ry: number;
 }

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

@@ -91,6 +91,7 @@ export class ImportApplianceComponent implements OnInit {
         template.console_auto_start = appliance.iou.console_auto_start;
         template.ethernet_adapters = appliance.iou.ethernet_adapters;
         template.l1_keepalives = appliance.iou.l1_keepalives;
+        template.use_default_iou_values = appliance.iou.use_default_iou_values;
         template.nvram = appliance.iou.nvram;
         template.ram = appliance.iou.ram;
         template.serial_adapters = appliance.iou.serial_adapters;

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

@@ -6,6 +6,7 @@ import { MatMenuModule } from '@angular/material/menu';
 import { BrowserModule } from '@angular/platform-browser';
 import { RouterTestingModule } from '@angular/router/testing';
 import { ToasterService } from '../../../services/toaster.service';
+import { ProtocolHandlerService } from '../../../services/protocol-handler.service';
 import { of } from 'rxjs';
 import { NodesDataSource } from '../../../cartography/datasources/nodes-datasource';
 import { ProjectWebServiceHandler, WebServiceMessage } from '../../../handlers/project-web-service-handler';
@@ -38,6 +39,7 @@ describe('LogConsoleComponent', () => {
   let nodeConsoleService: NodeConsoleService;
   let mapSettingsService: MapSettingsService;
   let toasterService: ToasterService;
+  let protocolHandlerService: ProtocolHandlerService;
 
   let httpServer = new HttpServer({} as HttpClient, {} as ServerErrorHandler);
 
@@ -52,6 +54,7 @@ describe('LogConsoleComponent', () => {
         { provide: HttpServer, useValue: httpServer },
         NodeConsoleService,
         ToasterService,
+        ProtocolHandlerService,
         MapSettingsService
       ],
       declarations: [LogConsoleComponent],
@@ -59,6 +62,7 @@ describe('LogConsoleComponent', () => {
     }).compileComponents();
 
     toasterService = TestBed.inject(ToasterService);
+    protocolHandlerService = TestBed.inject(ProtocolHandlerService);
     mapSettingsService = TestBed.inject(MapSettingsService);
     nodeConsoleService = TestBed.inject(NodeConsoleService);
   }));

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

@@ -23,9 +23,11 @@ import { Server } from '../../../models/server';
 import { HttpServer } from '../../../services/http-server.service';
 import { NodeService } from '../../../services/node.service';
 import { NodeConsoleService } from '../../../services/nodeConsole.service';
+import { ProtocolHandlerService } from '../../../services/protocol-handler.service';
 import { ThemeService } from '../../../services/theme.service';
 import { version } from '../../../version';
 import { LogEventsDataSource } from './log-events-datasource';
+import * as ipaddr from 'ipaddr.js';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -69,6 +71,7 @@ export class LogConsoleComponent implements OnInit, AfterViewInit, OnDestroy {
     private projectWebServiceHandler: ProjectWebServiceHandler,
     private nodeService: NodeService,
     private nodesDataSource: NodesDataSource,
+    private protocolHandlerService: ProtocolHandlerService,
     private logEventsDataSource: LogEventsDataSource,
     private httpService: HttpServer,
     private themeService: ThemeService,
@@ -224,18 +227,24 @@ export class LogConsoleComponent implements OnInit, AfterViewInit, OnDestroy {
         } else if (this.regexConsole.test(this.command)) {
           if (node.status === 'started') {
             this.showCommand(`Launching console for node ${splittedCommand[1]}...`);
+            var host = node.console_host;
+            if (ipaddr.IPv6.isValid(host)) {
+               host = `[${host}]`;
+            }
             if (node.console_type === 'telnet') {
-              location.assign(
-                `gns3+telnet://${node.console_host}:${node.console}?name=${node.name}&project_id=${node.project_id}&node_id=${node.node_id}`
+              this.protocolHandlerService.open(
+                `gns3+telnet://${host}:${node.console}?name=${node.name}&project_id=${node.project_id}&node_id=${node.node_id}`
               );
             } else if (node.console_type === 'vnc') {
-              location.assign(
-                `gns3+vnc://${node.console_host}:${node.console}?name=${node.name}&project_id=${node.project_id}&node_id=${node.node_id}`
+              this.protocolHandlerService.open(
+                `gns3+vnc://${host}:${node.console}?name=${node.name}&project_id=${node.project_id}&node_id=${node.node_id}`
               );
             } 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}`
+              this.protocolHandlerService.open(
+                `gns3+spice://${host}:${node.console}?name=${node.name}&project_id=${node.project_id}&node_id=${node.node_id}`
               );
+            } else if (node.console_type.startsWith('http')) {
+               window.open(`${node.console_type}://${host}:${node.console}`);
             } else {
               this.showCommand('Supported console types are: telnet, vnc, spice and spice+agent');
             }

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

@@ -77,7 +77,7 @@
         </ng-container>
 
         <!-- <ng-container matColumnDef="expandedDetail">
-                    <mat-cell *matCellDef="let detail"> 
+                    <mat-cell *matCellDef="let detail">
                         The symbol for {{detail.element}}
                     </mat-cell>
                 </ng-container> -->
@@ -85,14 +85,14 @@
         <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
         <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
 
-        <!-- <mat-row 
+        <!-- <mat-row
                     *matRowDef="let row; columns: displayedColumns;"
-                    matRipple 
-                    class="element-row" 
+                    matRipple
+                    class="element-row"
                     [class.expanded]="expandedElement == row"
                     (click)="expandedElement = row">
                 </mat-row>
-                <mat-row 
+                <mat-row
                     *matRowDef="let row; columns: ['expandedDetail']; when: isExpansionDetailRow"
                     [@detailExpand]="row.element == expandedElement ? 'expanded' : 'collapsed'"
                     style="overflow: hidden">
@@ -170,7 +170,7 @@
           </mat-select>
         </div>
         <div>
-          Install required files
+          Install the required files
           <button
             mat-icon-button
             matTooltip="Refresh list of images"
@@ -292,6 +292,70 @@
                 </div>
               </div>
 
+              <div class="list-item-inside" *ngIf="version.images.hdc_disk_image">
+                <span>
+                  {{ version.images.hdb_disk_image }}
+                </span>
+
+                <div>
+                  <span *ngIf="checkImageFromVersion(version.images.hdc_disk_image)"
+                    ><mat-icon matTooltip="Ready to install" matTooltipClass="custom-tooltip">check</mat-icon></span
+                  >
+                  <span *ngIf="!checkImageFromVersion(version.images.hdc_disk_image)"
+                    ><mat-icon matTooltip="Missing" matTooltipClass="custom-tooltip">close</mat-icon></span
+                  >
+
+                  <input
+                    type="file"
+                    class="non-visible"
+                    #file4
+                    (change)="importImage($event, version.images.hdc_disk_image)"
+                    ng2FileSelect
+                    [uploader]="uploaderImage"
+                  />
+                  <button class="button" mat-raised-button (click)="file4.click()">Import</button>
+                  <button
+                    class="button"
+                    mat-raised-button
+                    (click)="downloadImageFromVersion(version.images.hdc_disk_image)"
+                  >
+                    Download
+                  </button>
+                </div>
+              </div>
+
+              <div class="list-item-inside" *ngIf="version.images.hdd_disk_image">
+                <span>
+                  {{ version.images.hdd_disk_image }}
+                </span>
+
+                <div>
+                  <span *ngIf="checkImageFromVersion(version.images.hdd_disk_image)"
+                    ><mat-icon matTooltip="Ready to install" matTooltipClass="custom-tooltip">check</mat-icon></span
+                  >
+                  <span *ngIf="!checkImageFromVersion(version.images.hdd_disk_image)"
+                    ><mat-icon matTooltip="Missing" matTooltipClass="custom-tooltip">close</mat-icon></span
+                  >
+
+                  <input
+                    type="file"
+                    class="non-visible"
+                    #file5
+                    (change)="importImage($event, version.images.hdd_disk_image)"
+                    ng2FileSelect
+                    [uploader]="uploaderImage"
+                  />
+                  <button class="button" mat-raised-button (click)="file5.click()">Import</button>
+                  <button
+                    class="button"
+                    mat-raised-button
+                    (click)="downloadImageFromVersion(version.images.hdd_disk_image)"
+                  >
+                    Download
+                  </button>
+                </div>
+              </div>
+
               <div class="list-item-inside" *ngIf="version.images.cdrom_image">
                 <span>
                   {{ version.images.cdrom_image}}
@@ -308,12 +372,12 @@
                   <input
                     type="file"
                     class="non-visible"
-                    #file4
+                    #file6
                     (change)="importImage($event, version.images.cdrom_image)"
                     ng2FileSelect
                     [uploader]="uploaderImage"
                   />
-                  <button class="button" mat-raised-button (click)="file4.click()">Import</button>
+                  <button class="button" mat-raised-button (click)="file6.click()">Import</button>
                   <button
                     class="button"
                     mat-raised-button
@@ -377,7 +441,7 @@
           </mat-radio-group>
         </div>
         <div>
-          Install required files
+          Install the required images
           <button
             mat-icon-button
             matTooltip="Refresh list of images"
@@ -389,10 +453,16 @@
           <mat-list>
             <mat-list-item *ngFor="let image of applianceToInstall.images">
               <div class="list-item">
-                <div>
+                <span>
                   {{ image.filename }}
-                </div>
+                </span>
                 <div>
+                  <span *ngIf="checkImageFromVersion(image.filename)">
+                    <mat-icon matTooltip="Ready to install" matTooltipClass="custom-tooltip">check</mat-icon>
+                  </span>
+                  <span *ngIf="!checkImageFromVersion(image.filename)">
+                    <mat-icon matTooltip="Missing" matTooltipClass="custom-tooltip">close</mat-icon>
+                  </span>
                   <input
                     type="file"
                     class="non-visible"
@@ -435,7 +505,7 @@
           </mat-radio-group>
         </div>
         <div>
-          Install required files
+          Install the required images
           <button
             mat-icon-button
             matTooltip="Refresh list of images"
@@ -447,9 +517,15 @@
           <mat-list>
             <mat-list-item *ngFor="let image of applianceToInstall.images">
               <div class="list-item">
-                <div>
+                <span>
                   {{ image.filename }}
-                </div>
+                </span>
+                <span *ngIf="checkImageFromVersion(image.filename)">
+                  <mat-icon matTooltip="Ready to install" matTooltipClass="custom-tooltip">check</mat-icon>
+                </span>
+                <span *ngIf="!checkImageFromVersion(image.filename)">
+                  <mat-icon matTooltip="Missing" matTooltipClass="custom-tooltip">close</mat-icon>
+                </span>
                 <div>
                   <input
                     type="file"

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

@@ -143,7 +143,7 @@ export class NewTemplateDialogComponent implements OnInit {
       this.qemuBinaries = binaries;
     });
 
-    this.uploader = new FileUploader({});
+    this.uploader = new FileUploader({url: ''});
     this.uploader.onAfterAddingFile = (file) => {
       file.withCredentials = false;
     };
@@ -162,7 +162,7 @@ export class NewTemplateDialogComponent implements OnInit {
       this.getAppliance(item.url);
     };
 
-    this.uploaderImage = new FileUploader({});
+    this.uploaderImage = new FileUploader({url: ''});
     this.uploaderImage.onAfterAddingFile = (file) => {
       file.withCredentials = false;
     };
@@ -320,17 +320,17 @@ export class NewTemplateDialogComponent implements OnInit {
         setTimeout(() => {
           if (this.qemuBinaries.length) {
             if (this.applianceToInstall.qemu.arch === 'x86_64') {
-              let filtered_binaries = this.qemuBinaries.filter((n) => n.path.includes('qemu-system-x86_64'));
+              let filtered_binaries = this.qemuBinaries.filter((n) => n.path.endsWith('qemu-system-x86_64'));
               if (filtered_binaries.length) {
                 this.selectedBinary = filtered_binaries[0];
               }
             } else if (this.applianceToInstall.qemu.arch === 'i386') {
-              let filtered_binaries = this.qemuBinaries.filter((n) => n.path.includes('qemu-system-i386'));
+              let filtered_binaries = this.qemuBinaries.filter((n) => n.path.endsWith('qemu-system-i386'));
               if (filtered_binaries.length) {
                 this.selectedBinary = filtered_binaries[0];
               }
-            } else if (this.applianceToInstall.qemu.arch === 'x86_64') {
-              let filtered_binaries = this.qemuBinaries.filter((n) => n.path.includes('qemu-system-arm'));
+            } else if (this.applianceToInstall.qemu.arch === 'arm') {
+              let filtered_binaries = this.qemuBinaries.filter((n) => n.path.endsWith('qemu-system-arm'));
               if (filtered_binaries.length) {
                 this.selectedBinary = filtered_binaries[0];
               }
@@ -364,7 +364,7 @@ export class NewTemplateDialogComponent implements OnInit {
           autoFocus: false,
           disableClose: true,
         });
-        dialogRef.componentInstance.confirmationMessage = `This is not the correct file. 
+        dialogRef.componentInstance.confirmationMessage = `This is not the correct file.
                     The MD5 sum is ${output} and should be ${imageToInstall.md5sum}. Do you want to accept it at your own risks?`;
         dialogRef.afterClosed().subscribe((answer: boolean) => {
           if (answer) {
@@ -401,7 +401,8 @@ export class NewTemplateDialogComponent implements OnInit {
       this.progressService.activate();
     };
 
-    fileReader.readAsText(file);
+    //fileReader.readAsText(file); //web browser out ouf memory when upload large image file
+    fileReader.onloadend(undefined);
   }
 
   checkImageFromVersion(image: string): boolean {
@@ -485,7 +486,7 @@ export class NewTemplateDialogComponent implements OnInit {
     iouTemplate.startup_config = this.applianceToInstall.iou.startup_config;
     iouTemplate.builtin = this.applianceToInstall.builtin;
     iouTemplate.category = this.getCategory();
-    iouTemplate.default_name_format = this.applianceToInstall.port_name_format;
+    iouTemplate.default_name_format = this.applianceToInstall.default_name_format;
     iouTemplate.symbol = this.applianceToInstall.symbol;
     iouTemplate.compute_id = this.isGns3VmChosen ? 'vm' : 'local';
     iouTemplate.template_id = uuid();
@@ -534,7 +535,7 @@ export class NewTemplateDialogComponent implements OnInit {
     iosTemplate.slot7 = this.applianceToInstall.dynamips.slot7;
     iosTemplate.builtin = this.applianceToInstall.builtin;
     iosTemplate.category = this.getCategory();
-    iosTemplate.default_name_format = this.applianceToInstall.port_name_format;
+    iosTemplate.default_name_format = this.applianceToInstall.default_name_format;
     iosTemplate.symbol = this.applianceToInstall.symbol;
     iosTemplate.compute_id = this.isGns3VmChosen ? 'vm' : 'local';
     iosTemplate.template_id = uuid();
@@ -572,7 +573,7 @@ export class NewTemplateDialogComponent implements OnInit {
     dockerTemplate.console_type = this.applianceToInstall.docker.console_type;
     dockerTemplate.builtin = this.applianceToInstall.builtin;
     dockerTemplate.category = this.getCategory();
-    dockerTemplate.default_name_format = this.applianceToInstall.port_name_format;
+    dockerTemplate.default_name_format = this.applianceToInstall.default_name_format;
     dockerTemplate.symbol = this.applianceToInstall.symbol;
     dockerTemplate.compute_id = this.isGns3VmChosen ? 'vm' : 'local';
     dockerTemplate.template_id = uuid();
@@ -629,12 +630,17 @@ export class NewTemplateDialogComponent implements OnInit {
     qemuTemplate.category = this.getCategory();
     qemuTemplate.first_port_name = this.applianceToInstall.first_port_name;
     qemuTemplate.port_name_format = this.applianceToInstall.port_name_format;
+    qemuTemplate.port_segment_size = this.applianceToInstall.port_segment_size;
+    qemuTemplate.default_name_format = this.applianceToInstall.default_name_format
     qemuTemplate.symbol = this.applianceToInstall.symbol;
     qemuTemplate.qemu_path = this.selectedBinary.path;
     qemuTemplate.compute_id = this.isGns3VmChosen ? 'vm' : 'local';
     qemuTemplate.template_id = uuid();
     qemuTemplate.hda_disk_image = version.images.hda_disk_image;
     qemuTemplate.hdb_disk_image = version.images.hdb_disk_image;
+    qemuTemplate.hdc_disk_image = version.images.hdc_disk_image;
+    qemuTemplate.hdd_disk_image = version.images.hdd_disk_image;
+    qemuTemplate.cdrom_image = version.images.cdrom_image;
     qemuTemplate.template_type = 'qemu';
     qemuTemplate.usage = this.applianceToInstall.usage;
 

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

@@ -20,13 +20,14 @@
               </mat-select>
             </mat-form-field>
             <mat-checkbox [(ngModel)]="node.console_auto_start"> Auto start console </mat-checkbox><br />
-            <mat-form-field class="form-field">
+            <mat-checkbox [(ngModel)]="node.properties.use_default_iou_values"> Use default IOU values for memories </mat-checkbox>
+            <mat-form-field class="form-field" *ngIf="!node.properties.use_default_iou_values">
               <input matInput type="number" [(ngModel)]="node.properties.ram" placeholder="RAM size" />
               <span matSuffix>MB</span>
             </mat-form-field>
-            <mat-form-field class="form-field">
+            <mat-form-field class="form-field" *ngIf="!node.properties.use_default_iou_values">
               <input matInput type="number" [(ngModel)]="node.properties.nvram" placeholder="NVRAM size" />
-              <span matSuffix>MB</span>
+              <span matSuffix>KB</span>
             </mat-form-field>
           </mat-tab>
 
@@ -38,7 +39,7 @@
                   matInput
                   formControlName="ethernetAdapters"
                   type="number"
-                  [(ngModel)]="node.ethernet_adapters"
+                  [(ngModel)]="node.properties.ethernet_adapters"
                   placeholder="Ethernet adapters"
                 />
               </mat-form-field>
@@ -47,7 +48,7 @@
                   matInput
                   formControlName="serialAdapters"
                   type="number"
-                  [(ngModel)]="node.serial_adapters"
+                  [(ngModel)]="node.properties.serial_adapters"
                   placeholder="Serial adapters"
                 />
               </mat-form-field>

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

@@ -238,6 +238,12 @@
                 <mat-form-field class="form-field">
                   <input matInput type="text" [(ngModel)]="node.properties.options" placeholder="Options" />
                 </mat-form-field>
+                <br /><mat-checkbox [(ngModel)]="node.properties.tpm">
+                   Enable the Trusted Platform Module (TPM)
+                 </mat-checkbox>
+                <br /><mat-checkbox [(ngModel)]="node.properties.uefi">
+                   Enable the UEFI boot mode
+                 </mat-checkbox>
               </mat-card-content>
             </mat-card>
           </mat-tab>

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

@@ -17,6 +17,7 @@ import { ToasterService } from '../../../../services/toaster.service';
 import { MockedToasterService } from '../../../../services/toaster.service.spec';
 import { MockedLinkService, MockedNodesDataSource } from '../../project-map.component.spec';
 import { StartCaptureDialogComponent } from './start-capture.component';
+import { ProtocolHandlerService } from '../../../../services/protocol-handler.service';
 
 describe('StartCaptureDialogComponent', () => {
   let component: StartCaptureDialogComponent;
@@ -25,6 +26,8 @@ describe('StartCaptureDialogComponent', () => {
   let mockedToasterService = new MockedToasterService();
   let mockedLinkService = new MockedLinkService();
   let mockedNodesDataSource = new MockedNodesDataSource();
+  let protocolHandlerService: ProtocolHandlerService;
+
   let dialogRef = {
     close: jasmine.createSpy('close'),
   };
@@ -49,10 +52,13 @@ describe('StartCaptureDialogComponent', () => {
         { provide: LinkService, useValue: mockedLinkService },
         { provide: NodesDataSource, useValue: mockedNodesDataSource },
         { provide: PacketCaptureService },
+         ProtocolHandlerService,
       ],
       declarations: [StartCaptureDialogComponent],
       schemas: [NO_ERRORS_SCHEMA],
     }).compileComponents();
+
+    protocolHandlerService = TestBed.inject(ProtocolHandlerService);
   }));
 
   beforeEach(() => {

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

@@ -67,6 +67,7 @@ import { SymbolService } from '../../services/symbol.service';
 import { ThemeService } from '../../services/theme.service';
 import { ToasterService } from '../../services/toaster.service';
 import { ToolsService } from '../../services/tools.service';
+import { ProtocolHandlerService } from '../../services/protocol-handler.service';
 import { AddBlankProjectDialogComponent } from '../projects/add-blank-project-dialog/add-blank-project-dialog.component';
 import { ConfirmationBottomSheetComponent } from '../projects/confirmation-bottomsheet/confirmation-bottomsheet.component';
 import { EditProjectDialogComponent } from '../projects/edit-project-dialog/edit-project-dialog.component';
@@ -173,8 +174,9 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     private title: Title,
     private nodeConsoleService: NodeConsoleService,
     private symbolService: SymbolService,
+    private protocolHandlerService: ProtocolHandlerService,
     private cd: ChangeDetectorRef,
-    private cfr: ComponentFactoryResolver, 
+    private cfr: ComponentFactoryResolver,
     private injector: Injector
   ) {}
 
@@ -229,7 +231,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
         this.instance.instance.ngOnDestroy();
         this.instance.destroy();
       }
-    } 
+    }
   }
 
   addSubscriptions() {
@@ -975,7 +977,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     ) {
       this.toasterService.error('Project with running nodes cannot be exported.');
     } else {
-      location.assign(this.projectService.getExportPath(this.server, this.project));
+      this.protocolHandlerService.open(this.projectService.getExportPath(this.server, this.project));
     }
   }
 
@@ -990,8 +992,8 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
 
     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}\" 
+      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)

src/app/components/projects/models/projectNameValidator.ts

@@ -3,7 +3,7 @@ import { Injectable } from '@angular/core';
 @Injectable()
 export class ProjectNameValidator {
   get(projectName) {
-    var pattern = new RegExp(/[~`!#$%\^&*+=\[\]\\';,/{}|\\":<>\?]/);
+    var pattern = new RegExp(/[~`!#$%\^&*+=\[\]\\';,/{}|\\"<>\?]/);
 
     if (!pattern.test(projectName.value)) {
       return null;

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

@@ -61,7 +61,7 @@
                 {{ node.name }}
               </div>
               <div *ngIf="node.console != null && node.console != undefined && node.console_type != 'none'">
-                {{ node.console_type }} {{ node.console_host }}:{{ node.console }}
+                {{ node.console_type }}://{{ node.console_host }}:{{ node.console }}
               </div>
               <div *ngIf="node.console === null || node.console === undefined || node.console_type === 'none'">
                 none

src/app/layouts/default-layout/default-layout.component.html

@@ -39,4 +39,4 @@
 
 <app-progress></app-progress>
 
-<footer class="footer mat-app-background">GNS3 Web UI &copy; 2020 - v{{ uiVersion }}</footer>
+<footer class="footer mat-app-background">GNS3 Web-UI &copy;2018-{{ currentYear }} v{{ uiVersion }}</footer>

src/app/layouts/default-layout/default-layout.component.ts

@@ -17,6 +17,7 @@ import { version } from './../../version';
 export class DefaultLayoutComponent implements OnInit, OnDestroy {
   public isInstalledSoftwareAvailable = false;
   public uiVersion = version;
+  public currentYear = new Date().getFullYear();
 
   serverStatusSubscription: Subscription;
   shouldStopServersOnClosing = true;

src/app/models/appliance.ts

@@ -55,6 +55,9 @@ export interface Iou {
 export interface Images {
   hda_disk_image: string;
   hdb_disk_image: string;
+  hdc_disk_image: string;
+  hdd_disk_image: string;
+  cdrom_image: string;
 }
 
 export interface Version {
@@ -74,11 +77,13 @@ export interface Appliance {
   maintainer_email: string;
   name: string;
   port_name_format: string;
+  port_segment_size: number;
   product_name: string;
   product_url: string;
   registry_version: number;
   status: string;
   symbol: string;
+  default_name_format: string;
   usage: string;
   vendor_name: string;
   vendor_url: string;

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

@@ -10,6 +10,7 @@ export class DockerTemplate {
   console_http_port: number;
   console_resolution: string;
   console_type: string;
+  mac_address: string;
   custom_adapters: CustomAdapter[];
   default_name_format: string;
   environment: string;

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

@@ -43,4 +43,7 @@ export class QemuTemplate {
   template_id: string;
   template_type: string;
   usage: string;
+  replicate_network_connection_state: boolean;
+  tpm: boolean;
+  uefi: boolean;
 }

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

@@ -149,7 +149,7 @@ describe('DrawingService', () => {
     drawing.z = 1;
     drawing.rotation = 0;
     drawing.svg =
-      '<svg height="100" width="200"><rect fill="#ffffff" fill-opacity="1.0" height="100" stroke="#000000" stroke-width="2" width="200" /></svg>';
+      '<svg height="100" width="200"><rect fill="#ffffff" fill-opacity="1.0" height="100" stroke="#000000" stroke-width="2" width="200" rx="0" ry="0" /></svg>';
 
     service.duplicate(server, drawing.project_id, drawing).subscribe();
 

src/app/services/link.service.ts

@@ -63,9 +63,6 @@ export class LinkService {
   }
 
   updateLink(server: Server, link: Link) {
-    link.x = Math.round(link.x);
-    link.y = Math.round(link.y);
-
     return this.httpServer.put<Link>(server, `/projects/${link.project_id}/links/${link.link_id}`, link);
   }
 

src/app/services/mapsettings.service.ts

@@ -31,6 +31,11 @@ export class MapSettingsService {
     } else {
       localStorage.setItem('symbolScaling', 'true');
     }
+    if (localStorage.getItem('showInterfaceLabels')) {
+      this.showInterfaceLabels = localStorage.getItem('showInterfaceLabels') === 'true' ? true : false;
+    } else {
+      localStorage.setItem('showInterfaceLabels', 'true');
+    }
   }
 
   public getSymbolScaling(): boolean {
@@ -72,6 +77,12 @@ export class MapSettingsService {
 
   toggleShowInterfaceLabels(value: boolean) {
     this.showInterfaceLabels = value;
+    localStorage.removeItem('showInterfaceLabels');
+    if (value) {
+      localStorage.setItem('showInterfaceLabels', 'true');
+    } else {
+      localStorage.setItem('showInterfaceLabels', 'false');
+    }
   }
 
   toggleIntegrateInterfaceLabels(value: boolean) {

src/app/services/packet-capture.service.ts

@@ -2,14 +2,17 @@ import { Injectable } from '@angular/core';
 import { Link } from '../models/link';
 import { Project } from '../models/project';
 import { Server } from '../models/server';
+import { ProtocolHandlerService } from './protocol-handler.service';
 
 @Injectable()
 export class PacketCaptureService {
-  constructor() {}
+
+  constructor(private protocolHandlerService: ProtocolHandlerService) {}
 
   startCapture(server: Server, project: Project, link: Link, name: string) {
-    location.assign(
-      `gns3+pcap://${server.host}:${server.port}?project_id=${project.project_id}&link_id=${link.link_id}&name=${name}`
-    );
+
+    const uri = `gns3+pcap://${server.host}:${server.port}?protocol=${server.protocol.slice(0, -1)}&project_id=${project.project_id}&link_id=${link.link_id}&project=${project.name}&name=${name}`;
+    this.protocolHandlerService.open(uri);
+
   }
 }

src/app/services/protocol-handler.service.ts

@@ -0,0 +1,48 @@
+import { Injectable } from '@angular/core';
+import { DeviceDetectorService } from 'ngx-device-detector';
+import { ToasterService } from './toaster.service';
+
+@Injectable()
+export class ProtocolHandlerService {
+
+  constructor(private toasterService: ToasterService, private deviceService: DeviceDetectorService) {}
+
+  createHiddenIframe(target: Element, uri: string) {
+    const iframe = document.createElement("iframe");
+    iframe.src = uri;
+    iframe.id = "hiddenIframe";
+    iframe.style.display = "none";
+    target.appendChild(iframe);
+    return iframe;
+  }
+
+  openUriUsingFirefox(uri: string) {
+      var iframe = (document.querySelector("#hiddenIframe") as HTMLIFrameElement);
+
+      if (!iframe) {
+          iframe = this.createHiddenIframe(document.body, "about:blank");
+      }
+
+      try {
+          iframe.contentWindow.location.href = uri;
+      } catch (e) {
+          if (e.name === "NS_ERROR_UNKNOWN_PROTOCOL") {
+              this.toasterService.error('Protocol handler does not exist');
+          }
+      }
+  }
+
+  open(uri: string) {
+
+    const device = this.deviceService.getDeviceInfo();
+
+    console.log("Launching external protocol handler with " + device.browser + ": " + uri)
+    if (device.browser === "Firefox") {
+        // Use a hidden iframe otherwise Firefox will disconnect
+        // from the GNS3 controller websocket if we use location.assign()
+        this.openUriUsingFirefox(uri);
+    } else {
+        location.assign(uri);
+    }
+  }
+}

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

@@ -12,53 +12,31 @@ export class QemuConfigurationService {
 
   getNetworkTypes() {
     // needs extending of custom adapter component
-    // let networkTypes = [["e1000", "Intel Gigabit Ethernet"],
-    //     ["i82550", "Intel i82550 Ethernet"],
-    //     ["i82551", "Intel i82551 Ethernet"],
-    //     ["i82557a", "Intel i82557A Ethernet"],
-    //     ["i82557b", "Intel i82557B Ethernet"],
-    //     ["i82557c", "Intel i82557C Ethernet"],
-    //     ["i82558a", "Intel i82558A Ethernet"],
-    //     ["i82558b", "Intel i82558B Ethernet"],
-    //     ["i82559a", "Intel i82559A Ethernet"],
-    //     ["i82559b", "Intel i82559B Ethernet"],
-    //     ["i82559c", "Intel i82559C Ethernet"],
-    //     ["i82559er", "Intel i82559ER Ethernet"],
-    //     ["i82562", "Intel i82562 Ethernet"],
-    //     ["i82801", "Intel i82801 Ethernet"],
-    //     ["ne2k_pci", "NE2000 Ethernet"],
-    //     ["pcnet", "AMD PCNet Ethernet"],
-    //     ["rtl8139", "Realtek 8139 Ethernet"],
-    //     ["virtio", "Legacy paravirtualized Network I/O"],
-    //     ["virtio-net-pci", "Paravirtualized Network I/O"],
-    //     ["vmxnet3", "VMWare Paravirtualized Ethernet v3"]];
-
     let networkTypes = [
-      'e1000',
-      'e1000-82544gc',
-      'e1000-82545em',
-      'e1000e',
-      'rocker',
-      'Intel Gigabit Ethernet',
-      'i82550',
-      'i82551',
-      'i82557a',
-      'i82557b',
-      'i82557c',
-      'i82558a',
-      'i82558b',
-      'i82559a',
-      'i82559b',
-      'i82559c',
-      'i82559er',
-      'i82562',
-      'i82801',
-      'ne2k_pci',
-      'pcnet',
-      'rtl8139',
-      'virtio',
-      'virtio-net-pci',
-      'vmxnet3',
+      { value: 'e1000', name: 'Intel Gigabit Ethernet' },
+      { value: 'e1000-82544gc', name: 'Intel 82544GC Gigabit Ethernet' },
+      { value: 'e1000-82545em', name: 'Intel 82545EM Gigabit Ethernet' },
+      { value: 'e1000e', name: 'Intel PCIe Gigabit Ethernet' },
+      { value: 'i82550', name: 'Intel i82550 Ethernet' },
+      { value: 'i82551', name: 'Intel i82551 Ethernet' },
+      { value: 'i82557a', name: 'Intel i82557A Ethernet' },
+      { value: 'i82557b', name: 'Intel i82557B Ethernet' },
+      { value: 'i82557c', name: 'Intel i82557C Ethernet' },
+      { value: 'i82558a', name: 'Intel i82558A Ethernet' },
+      { value: 'i82558b', name: 'Intel i82558B Ethernet' },
+      { value: 'i82559a', name: 'Intel i82559A Ethernet' },
+      { value: 'i82559b', name: 'Intel i82559B Ethernet' },
+      { value: 'i82559c', name: 'Intel i82559C Ethernet' },
+      { value: 'i82559er', name: 'Intel i82559ER Ethernet' },
+      { value: 'i82562', name: 'Intel i82562 Ethernet' },
+      { value: 'i82801', name: 'Intel i82801 Ethernet' },
+      { value: 'igb', name: 'Intel 82576 Gigabit Ethernet' },
+      { value: 'ne2k_pci', name: 'NE2000 Ethernet' },
+      { value: 'pcnet', name: 'AMD PCNet Ethernet' },
+      { value: 'rocker', name: 'Rocker L2 switch device' },
+      { value: 'rtl8139', name: 'Realtek 8139 Ethernet' },
+      { value: 'virtio-net-pci', name: 'Paravirtualized Network I/O' },
+      { value: 'vmxnet3', name: 'VMWare Paravirtualized Ethernet v3' },
     ];
 
     return networkTypes;

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

@@ -78,6 +78,9 @@ describe('QemuService', () => {
       template_id: '1',
       template_type: 'qemu',
       usage: '',
+      replicate_network_connection_state: true,
+      tpm: false,
+      uefi: false,
     };
 
     service.saveTemplate(server, template).subscribe();
@@ -131,6 +134,9 @@ describe('QemuService', () => {
       template_id: '',
       template_type: 'qemu',
       usage: '',
+      replicate_network_connection_state: true,
+      tpm: false,
+      uefi: false,
     };
 
     service.addTemplate(server, template).subscribe();

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

@@ -75,6 +75,9 @@ export class TemplateMocksService {
       template_id: '',
       template_type: 'qemu',
       usage: '',
+      replicate_network_connection_state: true,
+      tpm: false,
+      uefi: false,
     };
 
     return of(template);
@@ -253,6 +256,7 @@ export class TemplateMocksService {
       console_http_port: 80,
       console_resolution: '1024x768',
       console_type: 'telnet',
+      mac_address: '',
       custom_adapters: [],
       default_name_format: '{name}-{0}',
       environment: '',

src/index.html

@@ -38,7 +38,7 @@
   <body class="mat-app-background" oncontextmenu="return false;">
     <app-root></app-root>
     <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-5D6FZL9923"></script>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-0BT7QQV1W1"></script>
     <script>
       window.dataLayer = window.dataLayer || [];
       function gtag() {
@@ -46,7 +46,7 @@
       }
       gtag('js', new Date());
 
-      gtag('config', 'G-5D6FZL9923');
+      gtag('config', 'G-0BT7QQV1W1');
     </script>
   </body>
 </html>