Open a row/link in a new tab

docs/README.md

@@ -34,6 +34,7 @@ such as `yubico_client`, or execution modules such as `boto3_sns`.
 - View internal documentation for any salt command
 - View external documentation for any salt command
 - View minions organized by node-group
+- View details optionally in a separate windows
 - Define your own custom documentation for commands
 - Match list of minions against reference list
 - Match status of minions against reference list
@@ -116,6 +117,16 @@ This is because the salt-api can only read the file after login.
 See the [EAUTH documentation](https://docs.saltstack.com/en/latest/topics/eauth/index.html) and the [Salt auth source code](https://github.com/saltstack/salt/tree/master/salt/auth) for more information.
 
 
+## Browser tabs
+SaltGUI is a single page web-application.
+In cases where you would zoom in on details, it is possible to open a new browser tab with the requested details.
+Use CTRL-click to open the page in a new tab.
+Use ALT-click to open the page in a new tab and also make that the current tab.
+This works for clicks on table-rows and for clicks on popup-menu items.
+These functions are a bit browser-dependent, but all major browsers seem to follow this behavior.
+When a new tab is opened by SaltGUI, it does not contain the menu bar items, secondary panels or a close-button inside the page.
+
+
 ## Command Box
 SaltGUI supports entry of commands using the "command-box". Click on `>_` in the top right corner to open it.
 

saltgui/static/scripts/Router.js

@@ -278,6 +278,18 @@ export class Router {
     }
   }
 
+  static _cancelSelections () {
+    // see https://stackoverflow.com/questions/3169786/clear-text-selection-with-javascript
+    const sel = window.getSelection ? window.getSelection() : document.selection;
+    if (sel) {
+      if (sel.removeAllRanges) {
+        sel.removeAllRanges();
+      } else if (sel.empty) {
+        sel.empty();
+      }
+    }
+  }
+
   static updateMainMenu () {
     const pages = Router._getPagesList();
 
@@ -300,7 +312,7 @@ export class Router {
   // pForward = 0 --> normal navigation
   // pForward = 1 --> back navigation using regular gui
   // pForward = 2 --> back navigation using browser
-  goTo (pHash, pQuery = {}, pForward = 0) {
+  goTo (pHash, pQuery = {}, pForward = 0, pEvent = null) {
 
     // close the command-box when it is stil open
     CommandBox.hideManualRun();
@@ -335,6 +347,11 @@ export class Router {
     const parentQuery = Object.fromEntries(new URLSearchParams(search));
     /* eslint-enable compat/compat */
 
+    let inNewWindow = false;
+    if (pEvent) {
+      inNewWindow = pEvent.altKey || pEvent.ctrlKey;
+    }
+
     for (const route of this.pages) {
       if (route.path !== pHash) {
         continue;
@@ -351,6 +368,10 @@ export class Router {
         url += sep + key + "=" + encodeURIComponent(value);
         sep = "&";
       }
+      if (inNewWindow) {
+        url += sep + "popup=true";
+        sep = "&";
+      }
       url += "#" + pHash;
       if (parentHash === route.path) {
         // page refresh
@@ -359,6 +380,12 @@ export class Router {
         window.history.replaceState({}, undefined, url);
       } else if (pForward === 0) {
         // forward navigation
+        if (inNewWindow) {
+          // in a new window
+          Router._cancelSelections();
+          window.open(url);
+          return;
+        }
         window.history.pushState({}, undefined, url);
         route.parentHash = parentHash;
         route.parentQuery = parentQuery;

saltgui/static/scripts/issues/Issues.js

@@ -98,8 +98,8 @@ export class Issues {
     } else {
       title = "Go to " + pPage + " page";
     }
-    pTr.menu.addMenuItem(title, () => {
-      pTr.panel.router.goTo(pPage, pArgs);
+    pTr.menu.addMenuItem(title, (pClickEvent) => {
+      pTr.panel.router.goTo(pPage, pArgs, undefined, pClickEvent);
     });
 
     if (pTr.hasClick !== true) {

saltgui/static/scripts/pages/Beacons.js

@@ -3,6 +3,7 @@
 import {BeaconsPanel} from "../panels/Beacons.js";
 import {JobsSummaryPanel} from "../panels/JobsSummary.js";
 import {Page} from "./Page.js";
+import {Utils} from "../Utils.js";
 
 export class BeaconsPage extends Page {
 
@@ -11,11 +12,15 @@ export class BeaconsPage extends Page {
 
     this.beacons = new BeaconsPanel();
     super.addPanel(this.beacons);
-    this.jobs = new JobsSummaryPanel();
-    super.addPanel(this.jobs);
+    if (Utils.getQueryParam("popup") !== "true") {
+      this.jobs = new JobsSummaryPanel();
+      super.addPanel(this.jobs);
+    }
   }
 
   handleSaltJobRetEvent (pData) {
-    this.jobs.handleSaltJobRetEvent(pData);
+    if (this.jobs) {
+      this.jobs.handleSaltJobRetEvent(pData);
+    }
   }
 }

saltgui/static/scripts/pages/BeaconsMinion.js

@@ -3,6 +3,7 @@
 import {BeaconsMinionPanel} from "../panels/BeaconsMinion.js";
 import {JobsSummaryPanel} from "../panels/JobsSummary.js";
 import {Page} from "./Page.js";
+import {Utils} from "../Utils.js";
 
 export class BeaconsMinionPage extends Page {
 
@@ -11,15 +12,19 @@ export class BeaconsMinionPage extends Page {
 
     this.beaconsminion = new BeaconsMinionPanel();
     super.addPanel(this.beaconsminion);
-    this.jobs = new JobsSummaryPanel();
-    super.addPanel(this.jobs);
+    if (Utils.getQueryParam("popup") !== "true") {
+      this.jobs = new JobsSummaryPanel();
+      super.addPanel(this.jobs);
+    }
   }
 
   handleSaltBeaconEvent (pTag, pData) {
     this.beaconsminion.handleSaltBeaconEvent(pTag, pData);
   }
 
   handleSaltJobRetEvent (pData) {
-    this.jobs.handleSaltJobRetEvent(pData);
+    if (this.jobs) {
+      this.jobs.handleSaltJobRetEvent(pData);
+    }
   }
 }

saltgui/static/scripts/pages/Grains.js

@@ -3,6 +3,7 @@
 import {GrainsPanel} from "../panels/Grains.js";
 import {JobsSummaryPanel} from "../panels/JobsSummary.js";
 import {Page} from "./Page.js";
+import {Utils} from "../Utils.js";
 
 export class GrainsPage extends Page {
 
@@ -11,11 +12,15 @@ export class GrainsPage extends Page {
 
     this.grains = new GrainsPanel();
     super.addPanel(this.grains);
-    this.jobs = new JobsSummaryPanel();
-    super.addPanel(this.jobs);
+    if (Utils.getQueryParam("popup") !== "true") {
+      this.jobs = new JobsSummaryPanel();
+      super.addPanel(this.jobs);
+    }
   }
 
   handleSaltJobRetEvent (pData) {
-    this.jobs.handleSaltJobRetEvent(pData);
+    if (this.jobs) {
+      this.jobs.handleSaltJobRetEvent(pData);
+    }
   }
 }

saltgui/static/scripts/pages/GrainsMinion.js

@@ -3,6 +3,7 @@
 import {GrainsMinionPanel} from "../panels/GrainsMinion.js";
 import {JobsSummaryPanel} from "../panels/JobsSummary.js";
 import {Page} from "./Page.js";
+import {Utils} from "../Utils.js";
 
 export class GrainsMinionPage extends Page {
 
@@ -11,11 +12,15 @@ export class GrainsMinionPage extends Page {
 
     this.grainsminion = new GrainsMinionPanel();
     super.addPanel(this.grainsminion);
-    this.jobs = new JobsSummaryPanel();
-    super.addPanel(this.jobs);
+    if (Utils.getQueryParam("popup") !== "true") {
+      this.jobs = new JobsSummaryPanel();
+      super.addPanel(this.jobs);
+    }
   }
 
   handleSaltJobRetEvent (pData) {
-    this.jobs.handleSaltJobRetEvent(pData);
+    if (this.jobs) {
+      this.jobs.handleSaltJobRetEvent(pData);
+    }
   }
 }

saltgui/static/scripts/pages/HighState.js

@@ -3,6 +3,7 @@
 import {HighStatePanel} from "../panels/HighState.js";
 import {JobsSummaryPanel} from "../panels/JobsSummary.js";
 import {Page} from "./Page.js";
+import {Utils} from "../Utils.js";
 
 export class HighStatePage extends Page {
 
@@ -11,11 +12,15 @@ export class HighStatePage extends Page {
 
     this.highstate = new HighStatePanel();
     super.addPanel(this.highstate);
-    this.jobs = new JobsSummaryPanel();
-    super.addPanel(this.jobs);
+    if (Utils.getQueryParam("popup") !== "true") {
+      this.jobs = new JobsSummaryPanel();
+      super.addPanel(this.jobs);
+    }
   }
 
   handleSaltJobRetEvent (pData) {
-    this.jobs.handleSaltJobRetEvent(pData);
+    if (this.jobs) {
+      this.jobs.handleSaltJobRetEvent(pData);
+    }
   }
 }

saltgui/static/scripts/pages/Issues.js

@@ -3,6 +3,7 @@
 import {IssuesPanel} from "../panels/Issues.js";
 import {JobsSummaryPanel} from "../panels/JobsSummary.js";
 import {Page} from "./Page.js";
+import {Utils} from "../Utils.js";
 
 export class IssuesPage extends Page {
 
@@ -11,11 +12,15 @@ export class IssuesPage extends Page {
 
     this.issues = new IssuesPanel();
     super.addPanel(this.issues);
-    this.jobs = new JobsSummaryPanel();
-    super.addPanel(this.jobs);
+    if (Utils.getQueryParam("popup") !== "true") {
+      this.jobs = new JobsSummaryPanel();
+      super.addPanel(this.jobs);
+    }
   }
 
   handleSaltJobRetEvent (pData) {
-    this.jobs.handleSaltJobRetEvent(pData);
+    if (this.jobs) {
+      this.jobs.handleSaltJobRetEvent(pData);
+    }
   }
 }

saltgui/static/scripts/pages/Keys.js

@@ -3,6 +3,7 @@
 import {JobsSummaryPanel} from "../panels/JobsSummary.js";
 import {KeysPanel} from "../panels/Keys.js";
 import {Page} from "./Page.js";
+import {Utils} from "../Utils.js";
 
 export class KeysPage extends Page {
 
@@ -11,8 +12,10 @@ export class KeysPage extends Page {
 
     this.keys = new KeysPanel();
     super.addPanel(this.keys);
-    this.jobs = new JobsSummaryPanel();
-    super.addPanel(this.jobs);
+    if (Utils.getQueryParam("popup") !== "true") {
+      this.jobs = new JobsSummaryPanel();
+      super.addPanel(this.jobs);
+    }
   }
 
   handleSaltAuthEvent (pData) {
@@ -24,7 +27,9 @@ export class KeysPage extends Page {
   }
 
   handleSaltJobRetEvent (pData) {
-    this.jobs.handleSaltJobRetEvent(pData);
+    if (this.jobs) {
+      this.jobs.handleSaltJobRetEvent(pData);
+    }
   }
 
   handleSyndicEvent () {

saltgui/static/scripts/pages/Minions.js

@@ -3,6 +3,7 @@
 import {JobsSummaryPanel} from "../panels/JobsSummary.js";
 import {MinionsPanel} from "../panels/Minions.js";
 import {Page} from "./Page.js";
+import {Utils} from "../Utils.js";
 
 export class MinionsPage extends Page {
 
@@ -11,11 +12,15 @@ export class MinionsPage extends Page {
 
     this.minions = new MinionsPanel();
     super.addPanel(this.minions);
-    this.jobs = new JobsSummaryPanel();
-    super.addPanel(this.jobs);
+    if (Utils.getQueryParam("popup") !== "true") {
+      this.jobs = new JobsSummaryPanel();
+      super.addPanel(this.jobs);
+    }
   }
 
   handleSaltJobRetEvent (pData) {
-    this.jobs.handleSaltJobRetEvent(pData);
+    if (this.jobs) {
+      this.jobs.handleSaltJobRetEvent(pData);
+    }
   }
 }

saltgui/static/scripts/pages/Nodegroups.js

@@ -12,12 +12,16 @@ export class NodegroupsPage extends Page {
 
     this.nodegroups = new NodegroupsPanel();
     super.addPanel(this.nodegroups);
-    this.jobs = new JobsSummaryPanel();
-    super.addPanel(this.jobs);
+    if (Utils.getQueryParam("popup") !== "true") {
+      this.jobs = new JobsSummaryPanel();
+      super.addPanel(this.jobs);
+    }
   }
 
   handleSaltJobRetEvent (pData) {
-    this.jobs.handleSaltJobRetEvent(pData);
+    if (this.jobs) {
+      this.jobs.handleSaltJobRetEvent(pData);
+    }
   }
 
   /* eslint-disable class-methods-use-this */

saltgui/static/scripts/pages/Options.js

@@ -3,6 +3,7 @@
 import {OptionsPanel} from "../panels/Options.js";
 import {Page} from "./Page.js";
 import {StatsPanel} from "../panels/Stats.js";
+import {Utils} from "../Utils.js";
 
 export class OptionsPage extends Page {
 
@@ -11,12 +12,16 @@ export class OptionsPage extends Page {
 
     this.options = new OptionsPanel();
     super.addPanel(this.options);
-    this.stats = new StatsPanel();
-    super.addPanel(this.stats);
+    if (Utils.getQueryParam("popup") !== "true") {
+      this.stats = new StatsPanel();
+      super.addPanel(this.stats);
+    }
   }
 
   onHide () {
     this.options.onHide();
-    this.stats.onHide();
+    if (this.stats) {
+      this.stats.onHide();
+    }
   }
 }

saltgui/static/scripts/pages/Page.js

@@ -32,6 +32,13 @@ export class Page {
     this.panels = [];
     this.api = pRouter.api;
 
+    if (Utils.getQueryParam("popup") === "true") {
+      const fullmenu = document.querySelector(".fullmenu");
+      fullmenu.style.display = "none";
+      const minimenu = document.querySelector(".minimenu");
+      minimenu.style.display = "none";
+    }
+
     const body = document.querySelector("body");
     body.onkeyup = (keyUpEvent) => {
       if (!Utils.isValidKeyUpEvent(keyUpEvent)) {