Create protocol handler service

src/app/app.module.ts

@@ -238,6 +238,7 @@ import { NodeService } from './services/node.service';
 import { NodeConsoleService } from './services/nodeConsole.service';
 import { NotificationService } from './services/notification.service';
 import { PacketCaptureService } from './services/packet-capture.service';
+import { ProtocolHandlerService } from './services/protocol-handler.service';
 import { PlatformService } from './services/platform.service';
 import { ProjectService } from './services/project.service';
 import { QemuConfigurationService } from './services/qemu-configuration.service';
@@ -538,6 +539,7 @@ import { RotationValidator } from './validators/rotation-validator';
     ComputeService,
     TracengService,
     PacketCaptureService,
+    ProtocolHandlerService,
     NotificationService,
     Gns3vmService,
     ThemeService,

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

@@ -4,6 +4,8 @@ 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({
@@ -14,7 +16,7 @@ export class ConsoleDeviceActionBrowserComponent {
   @Input() server: Server;
   @Input() node: Node;
 
-  constructor(private toasterService: ToasterService, private nodeService: NodeService, private deviceService: DeviceDetectorService) {}
+  constructor(private toasterService: ToasterService, private nodeService: NodeService, private protocolHandlerService: ProtocolHandlerService) {}
 
   openConsole() {
     this.nodeService.getNode(this.server, this.node).subscribe((node: Node) => {
@@ -23,31 +25,6 @@ export class ConsoleDeviceActionBrowserComponent {
     });
   }
 
-  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');
-          }
-      }
-  }
-
   startConsole() {
     if (this.node.status !== 'started') {
       this.toasterService.error('This node must be started before a console can be opened');
@@ -60,8 +37,6 @@ export class ConsoleDeviceActionBrowserComponent {
         this.node.console_host = this.server.host;
       }
 
-      const device = this.deviceService.getDeviceInfo();
-
       try {
         var uri;
         var host = this.node.console_host;
@@ -81,13 +56,7 @@ export class ConsoleDeviceActionBrowserComponent {
           this.toasterService.error('Supported console types are: telnet, vnc, spice and spice+agent.');
         }
 
-        if (device.browser === "Firefox") {
+        this.protocolHandlerService.open(uri);
-            // 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);
-        }
 
       } catch (e) {
           this.toasterService.error(e);

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

@@ -23,6 +23,7 @@ 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';
@@ -70,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,
@@ -230,15 +232,15 @@ export class LogConsoleComponent implements OnInit, AfterViewInit, OnDestroy {
                host = `[${host}]`;
             }
             if (node.console_type === 'telnet') {
-              location.assign(
+              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(
+              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(
+              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')) {

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,6 +174,7 @@ 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 injector: Injector
@@ -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));
     }
   }
 

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}?protocol=${server.protocol.slice(0, -1)}&project_id=${project.project_id}&link_id=${link.link_id}&project=${project.name}&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);
+    }
+  }
+}