Merge pull request #575 from erwindon/visnav

add a navigation indicator for table rows
erwindon · May 1, 2024 · b6517b6 · b6517b6
2 parents bf2e523 + cc0fe32
commit b6517b6
Show file tree

Hide file tree

Showing 15 changed files with 34 additions and 16 deletions.
diff --git a/saltgui/static/scripts/panels/Beacons.js b/saltgui/static/scripts/panels/Beacons.js
@@ -13,7 +13,7 @@ export class BeaconsPanel extends Panel {
     this.addSearchButton();
     this.addTable(["Minion", "Status", "Beacons", "-menu-"]);
     this.setTableSortable("Minion", "asc");
-    this.setTableClickable();
+    this.setTableClickable("page");
     this.addMsg();
   }
 

diff --git a/saltgui/static/scripts/panels/BeaconsMinion.js b/saltgui/static/scripts/panels/BeaconsMinion.js
@@ -32,7 +32,7 @@ export class BeaconsMinionPanel extends Panel {
     ]);
     this.addTable(["Name", "-menu-", "Config", "Timestamp", "Value", "-help-"]);
     this.setTableSortable("Name", "asc");
-    this.setTableClickable();
+    this.setTableClickable("cmd");
     this.addMsg();
   }
 

diff --git a/saltgui/static/scripts/panels/Grains.js b/saltgui/static/scripts/panels/Grains.js
@@ -19,7 +19,6 @@ export class GrainsPanel extends Panel {
     ]);
     this.addWarningField();
     this.addTable(["Minion", "Status", "Salt version", "OS version", "Grains", "-menu-"]);
-    this.setTableClickable();
 
     // cannot initialize sorting before all columns are present
     // this.setTableSortable("Minion", "asc");
@@ -41,6 +40,7 @@ export class GrainsPanel extends Panel {
         tr.appendChild(th);
       }
       this.previewColumsAdded = true;
+      this.setTableClickable("page");
     }
 
     // initialize sorting after all columns are present

diff --git a/saltgui/static/scripts/panels/GrainsMinion.js b/saltgui/static/scripts/panels/GrainsMinion.js
@@ -23,7 +23,7 @@ export class GrainsMinionPanel extends Panel {
     this.addWarningField();
     this.addTable(["Name", "-menu-", "Value"]);
     this.setTableSortable("Name", "asc");
-    this.setTableClickable();
+    this.setTableClickable("cmd");
     this.addMsg();
   }
 

diff --git a/saltgui/static/scripts/panels/HighState.js b/saltgui/static/scripts/panels/HighState.js
@@ -38,7 +38,7 @@ export class HighStatePanel extends Panel {
     this.addWarningField();
     this.addTable(["Minion", "State", "Latest JID", "Target", "Function", "Start Time", "-menu-", "States"]);
     this.setTableSortable("Minion", "asc");
-    this.setTableClickable();
+    this.setTableClickable("cmd");
     this.addMsg();
 
     // collect the list of hidden/shown environments

diff --git a/saltgui/static/scripts/panels/Issues.js b/saltgui/static/scripts/panels/Issues.js
@@ -22,7 +22,7 @@ export class IssuesPanel extends Panel {
       "that are observed in various categories."
     ]);
     this.addTable(["-menu-", "Description"]);
-    this.setTableClickable();
+    this.setTableClickable("cmd");
     this.addMsg();
 
     // keep the list of "loading..." messages

diff --git a/saltgui/static/scripts/panels/JobsDetails.js b/saltgui/static/scripts/panels/JobsDetails.js
@@ -40,7 +40,7 @@ export class JobsDetailsPanel extends JobsPanel {
     ]);
     this.addTable(["JID", "Target", "Function", "Start Time", "-menu-", "Status", "Details"], "data-list-jobs");
     this.setTableSortable("JID", "desc");
-    this.setTableClickable();
+    this.setTableClickable("page");
     this.addMsg();
   }
 

diff --git a/saltgui/static/scripts/panels/JobsSummary.js b/saltgui/static/scripts/panels/JobsSummary.js
@@ -17,8 +17,8 @@ export class JobsSummaryPanel extends JobsPanel {
 
     this.addTitle("Recent Jobs");
     this.addSearchButton();
-    this.addTable(null);
-    this.setTableClickable();
+    this.addTable(["-dummy-", "-dummy-"]);
+    this.setTableClickable("page");
     this.addMsg();
   }
 

diff --git a/saltgui/static/scripts/panels/Minions.js b/saltgui/static/scripts/panels/Minions.js
@@ -25,7 +25,7 @@ export class MinionsPanel extends Panel {
     this.addWarningField();
     this.addTable(["Minion", "Status", "Salt version", "OS version", "-menu-"]);
     this.setTableSortable("Minion", "asc");
-    this.setTableClickable();
+    this.setTableClickable("cmd");
     this.addMsg();
   }
 

diff --git a/saltgui/static/scripts/panels/Nodegroups.js b/saltgui/static/scripts/panels/Nodegroups.js
@@ -18,7 +18,7 @@ export class NodegroupsPanel extends Panel {
     this.addPlayPauseButton();
     this.addWarningField();
     this.addTable(["Minion", "Status", "Salt version", "OS version", "-menu-"]);
-    this.setTableClickable();
+    this.setTableClickable("cmd");
     this.addMsg();
   }
 

diff --git a/saltgui/static/scripts/panels/Panel.js b/saltgui/static/scripts/panels/Panel.js
@@ -224,9 +224,27 @@ export class Panel {
     }
   }
 
-  setTableClickable () {
+  setTableClickable (pType) {
     // this function is only called when the table is clickable
+    // pType is "cmd" or "page"
     this.table.classList.add("highlight-rows");
+    if (!this.table.tHead) {
+      return;
+    }
+    const tr = this.table.tHead.children[0];
+    const nrColumns = tr.children.length;
+    const th = tr.children[nrColumns - 1];
+    th.innerHTML = "<span id='tableinfo' style='float:right'>" + Character.CIRCLED_INFORMATION_SOURCE + "</span>" + th.innerHTML;
+    const tableinfo = this.table.querySelector("#tableinfo");
+    switch (pType) {
+    case "cmd":
+      Utils.addToolTip (tableinfo, "Click row to show Manual Run for that row", "bottom-right");
+      break;
+    case "page":
+      Utils.addToolTip (tableinfo, "Click row to navigate to details page\nCTRL-click to open in a new tab and stay here\nALT-click to open in a new tab and go to it", "bottom-right");
+      break;
+    default:
+    }
   }
 
   setTableSortable (pColumnName, pDirection = "asc") {

diff --git a/saltgui/static/scripts/panels/Pillars.js b/saltgui/static/scripts/panels/Pillars.js
@@ -14,7 +14,7 @@ export class PillarsPanel extends Panel {
     this.addWarningField();
     this.addTable(["Minion", "Status", "Pillars", "-menu-"]);
     this.setTableSortable("Minion", "asc");
-    this.setTableClickable();
+    this.setTableClickable("page");
     this.addMsg();
   }
 

diff --git a/saltgui/static/scripts/panels/Schedules.js b/saltgui/static/scripts/panels/Schedules.js
@@ -13,7 +13,7 @@ export class SchedulesPanel extends Panel {
     this.addSearchButton();
     this.addTable(["Minion", "Status", "Schedules", "-menu-"]);
     this.setTableSortable("Minion", "asc");
-    this.setTableClickable();
+    this.setTableClickable("page");
     this.addMsg();
   }
 

diff --git a/saltgui/static/scripts/panels/SchedulesMinion.js b/saltgui/static/scripts/panels/SchedulesMinion.js
@@ -25,7 +25,7 @@ export class SchedulesMinionPanel extends Panel {
     }
     this.addTable(["Name", "-menu-", "Details"]);
     this.setTableSortable("Name", "asc");
-    this.setTableClickable();
+    this.setTableClickable("cmd");
     this.addMsg();
   }
 

diff --git a/saltgui/static/scripts/panels/Templates.js b/saltgui/static/scripts/panels/Templates.js
@@ -14,7 +14,7 @@ export class TemplatesPanel extends Panel {
     this.addSearchButton();
     this.addTable(["Name", "Category", "Key", "Description", "Target", "Command", "-menu-"], "data-list-templates");
     this.setTableSortable("Name", "asc");
-    this.setTableClickable();
+    this.setTableClickable("cmd");
     this.addMsg();
   }