Fix for https://github.com/GNS3/gns3-web-ui/issues/1132

src/app/components/project-map/context-menu/actions/http-console-new-tab/http-console-new-tab-action.component.ts

@@ -1,8 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
+import { NodeConsoleService } from '../../../../../services/nodeConsole.service';
 import { Node } from '../../../../../cartography/models/node';
 import { Server } from '../../../../../models/server';
-import { ToasterService } from '../../../../../services/toaster.service';
 
 @Component({
   selector: 'app-http-console-new-tab-action',
@@ -12,19 +11,11 @@ export class HttpConsoleNewTabActionComponent implements OnInit {
   @Input() server: Server;
   @Input() nodes: Node[];
 
-  constructor(private toasterService: ToasterService, private router: Router) {}
+  constructor(private nodeConsoleService: NodeConsoleService) {}
 
   ngOnInit() {}
 
   openConsole() {
-    this.nodes.forEach((n) => {
+    this.nodeConsoleService.openConsolesForAllNodesInNewTabs(this.nodes);
-      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 {
-        this.toasterService.error('To open console please start the node ' + n.name);
-      }
-    });
   }
 }

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

@@ -1,9 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { Node } from '../../../../../cartography/models/node';
 import { Server } from '../../../../../models/server';
-import { MapSettingsService } from '../../../../../services/mapsettings.service';
 import { NodeConsoleService } from '../../../../../services/nodeConsole.service';
-import { ToasterService } from '../../../../../services/toaster.service';
 
 @Component({
   selector: 'app-http-console-action',
@@ -13,23 +11,11 @@ export class HttpConsoleActionComponent implements OnInit {
   @Input() server: Server;
   @Input() nodes: Node[];
 
-  constructor(
+  constructor(private nodeConsoleService: NodeConsoleService) {}
-    private consoleService: NodeConsoleService,
-    private toasterService: ToasterService,
-    private mapSettingsService: MapSettingsService
-  ) {}
 
   ngOnInit() {}
 
   openConsole() {
-    this.nodes.forEach((n) => {
+    this.nodeConsoleService.openConsolesForAllNodesInWidget(this.nodes);
-      if (n.status === 'started') {
-        this.mapSettingsService.logConsoleSubject.next(true);
-        // this timeout is required due to xterm.js implementation
-        setTimeout(() => { this.consoleService.openConsoleForNode(n); }, 500);
-      } else {
-        this.toasterService.error('To open console please start the node ' + n.name);
-      }
-    });
   }
 }

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

@@ -1,4 +1,5 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { MapSettingsService } from '../../../services/mapsettings.service';
 import { ElectronService } from 'ngx-electron';
 import { NodesDataSource } from '../../../cartography/datasources/nodes-datasource';
 import { Project } from '../../../models/project';
@@ -7,6 +8,7 @@ import { NodeService } from '../../../services/node.service';
 import { ServerService } from '../../../services/server.service';
 import { SettingsService } from '../../../services/settings.service';
 import { ToasterService } from '../../../services/toaster.service';
+import { NodeConsoleService } from '../../../services/nodeConsole.service';
 
 @Component({
   selector: 'app-nodes-menu',
@@ -20,10 +22,12 @@ export class NodesMenuComponent {
 
   constructor(
     private nodeService: NodeService,
+    private nodeConsoleService: NodeConsoleService,
     private nodesDataSource: NodesDataSource,
     private toasterService: ToasterService,
     private serverService: ServerService,
     private settingsService: SettingsService,
+    private mapSettingsService: MapSettingsService,
     private electronService: ElectronService
   ) {}
 
@@ -48,7 +52,11 @@ export class NodesMenuComponent {
         await this.electronService.remote.require('./console-executor.js').openConsole(request);
       }
     } else {
-      this.toasterService.error('Option to start all nodes not available in web browser.');
+      if (this.mapSettingsService.openConsolesInWidget) {
+        this.nodeConsoleService.openConsolesForAllNodesInWidget(this.nodesDataSource.getItems());
+      } else {
+        this.nodeConsoleService.openConsolesForAllNodesInNewTabs(this.nodesDataSource.getItems());
+      }
     }
   }
 

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

@@ -11,7 +11,8 @@
 
           <div>
             <mat-checkbox [(ngModel)]="settings.crash_reports">Send anonymous crash reports</mat-checkbox><br />
-            <mat-checkbox [(ngModel)]="integrateLinksLabelsToLinks">Integrate link labels to links</mat-checkbox>
+            <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>
 
           <!-- <div>

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

@@ -15,6 +15,7 @@ export class SettingsComponent implements OnInit {
   settings = { ...SettingsService.DEFAULTS };
   consoleCommand: string;
   integrateLinksLabelsToLinks: boolean;
+  openConsolesInWidget: boolean;
 
   constructor(
     private settingsService: SettingsService,
@@ -29,12 +30,14 @@ export class SettingsComponent implements OnInit {
     this.settings = this.settingsService.getAll();
     this.consoleCommand = this.consoleService.command;
     this.integrateLinksLabelsToLinks = this.mapSettingsService.integrateLinkLabelsToLinks;
+    this.openConsolesInWidget = this.mapSettingsService.openConsolesInWidget;
   }
 
   save() {
     this.settingsService.setAll(this.settings);
     this.toaster.success('Settings have been saved.');
     this.mapSettingsService.toggleIntegrateInterfaceLabels(this.integrateLinksLabelsToLinks);
+    this.mapSettingsService.toggleOpenConsolesInWidget(this.openConsolesInWidget);
   }
 
   setDarkMode(value: boolean) {

src/app/services/mapsettings.service.ts

@@ -17,12 +17,14 @@ export class MapSettingsService {
 
   public showInterfaceLabels: boolean = true;
   public integrateLinkLabelsToLinks: boolean = true;
+  public openConsolesInWidget: boolean = false;
 
   constructor() {
     this.isLayerNumberVisible = localStorage.getItem('layersVisibility') === 'true' ? true : false;
     if (localStorage.getItem('integrateLinkLabelsToLinks'))
       this.integrateLinkLabelsToLinks = localStorage.getItem('integrateLinkLabelsToLinks') === 'true' ? true : false;
-
+    if (localStorage.getItem('openConsolesInWidget'))
+      this.openConsolesInWidget = localStorage.getItem('openConsolesInWidget') === 'true' ? true : false;
     let isSymbolScalingEnabled = true;
     if (localStorage.getItem('symbolScaling')) {
       isSymbolScalingEnabled = localStorage.getItem('symbolScaling') === 'true' ? true : false;
@@ -81,4 +83,14 @@ export class MapSettingsService {
       localStorage.setItem('integrateLinkLabelsToLinks', 'false');
     }
   }
+
+  toggleOpenConsolesInWidget(value: boolean) {
+    this.openConsolesInWidget = value;
+    localStorage.removeItem('openConsolesInWidget');
+    if (value) {
+      localStorage.setItem('openConsolesInWidget', 'true');
+    } else {
+      localStorage.setItem('openConsolesInWidget', 'false');
+    }
+  }
 }

src/app/services/nodeConsole.service.ts

@@ -2,6 +2,10 @@ import { EventEmitter, Injectable } from '@angular/core';
 import { Server } from '../models/server';
 import { Subject } from 'rxjs';
 import { Node } from '../cartography/models/node';
+import { Router } from '@angular/router';
+import { ToasterService } from './toaster.service';
+import { MapSettingsService } from './mapsettings.service';
+import { node } from 'prop-types';
 
 @Injectable()
 export class NodeConsoleService {
@@ -19,7 +23,11 @@ export class NodeConsoleService {
   private lastNumberOfColumns: number;
   private lastNumberOfRows: number;
 
-  constructor() {}
+  constructor(
+    private router: Router,
+    private toasterService: ToasterService,
+    private mapSettingsService: MapSettingsService
+  ) {}
 
   getNumberOfColumns() {
     return this.lastNumberOfColumns;
@@ -65,6 +73,42 @@ export class NodeConsoleService {
 
     return `${protocol}://${server.host}:${server.port}/v2/projects/${node.project_id}/nodes/${node.node_id}/console/ws`
   }
+
+  openConsolesForAllNodesInWidget(nodes: Node[]) {
+    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 (nodesToStartCounter > 0) {
+      this.toasterService.error(nodesToStart);
+    }
+  }
+
+  openConsolesForAllNodesInNewTabs(nodes: Node[]) {
+    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') {
+        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) {
+      this.toasterService.error(nodesToStart);
+    }
+  }
 }
 
 export interface ConsoleResizedEvent {