made play/pause more generic

Author: Erwin Dondorp

saltgui/static/scripts/Utils.js

@@ -446,7 +446,13 @@ export class Utils {
     } else {
       txt = pManyText;
     }
-    txt = txt.replace("{0}", pCnt.toLocaleString());
+    if (pCnt === undefined) {
+      // just in case
+      txt = txt.replace("{0}", pCnt);
+      console.log(pCnt, pZeroText, pOneText, pManyText);
+    } else {
+      txt = txt.replace("{0}", pCnt.toLocaleString());
+    }
     return txt;
   }
 

saltgui/static/scripts/issues/State.js

@@ -38,7 +38,8 @@ export class StateIssues extends Issues {
     }
 
     this.jobs = jobs;
-    pPanel.setPlayPauseButton("play");
+    // this is good only while "State" is the only issue-provider
+    pPanel.setPlayPauseButton(jobs.length === 0 ? "none" : "play");
 
     this._updateNextJob(pPanel, pMsg);
   }
@@ -48,11 +49,20 @@ export class StateIssues extends Issues {
       return;
     }
     if (!this.jobs.length) {
+      // this is good only while "State" is the only issue-provider
       pPanel.setPlayPauseButton("none");
       this.jobs = null;
       Issues.readyCategory(pPanel, pMsg);
       return;
     }
+
+    if (pPanel.playOrPause !== "play") {
+      window.setTimeout(() => {
+        this._updateNextJob(pPanel, pMsg);
+      }, 1000);
+      return;
+    }
+
     const job = this.jobs.pop();
 
     const runnerJobsListJobPromise = this.api.getRunnerJobsListJob(job.id);

saltgui/static/scripts/panels/BeaconsMinion.js

@@ -20,7 +20,7 @@ export class BeaconsMinionPanel extends Panel {
     this._addPanelMenuItemBeaconsReset();
     this._addPanelMenuItemBeaconsSave();
     this.addSearchButton();
-    this.addPlayPauseButton("play");
+    this.addPlayPauseButton();
     this.addCloseButton();
     this.addHelpButton([
       "The content of column 'Value' is automatically refreshed.",
@@ -93,19 +93,15 @@ export class BeaconsMinionPanel extends Panel {
   updateFooter () {
     // update the footer
     const tbody = this.table.tBodies[0];
-    let txt = Utils.txtZeroOneMany(tbody.rows.length,
+    const txt = Utils.txtZeroOneMany(tbody.rows.length,
       "No beacons", "{0} beacon", "{0} beacons");
-
-    if (this.playOrPause === "pause") {
-      txt += ", press " + Character.buttonInText(Character.CH_PLAY) + " to continue";
-    }
-
-    this.setMsg(txt, true);
+    this.setMsg(txt);
   }
 
   _handleLocalBeaconsList (pLocalBeaconsListData, pMinionId) {
     if (this.showErrorRowInstead(pLocalBeaconsListData)) {
       this.setPlayPauseButton("none");
+      this.updateFooter();
       return;
     }
 
@@ -194,6 +190,8 @@ export class BeaconsMinionPanel extends Panel {
       tr.appendChild(helpButtonTd);
     }
 
+    this.setPlayPauseButton(keys.length === 0 ? "none" : "play");
+
     this.updateFooter();
   }
 

saltgui/static/scripts/panels/Events.js

@@ -1,6 +1,5 @@
 /* global document */
 
-import {Character} from "../Character.js";
 import {Output} from "../output/Output.js";
 import {Panel} from "./Panel.js";
 import {Utils} from "../Utils.js";
@@ -14,14 +13,16 @@ export class EventsPanel extends Panel {
 
     this.addTitle("Recent Events");
     this.addSearchButton();
-    this.addPlayPauseButton("pause");
+    this.addPlayPauseButton();
     this.addHelpButton([
       "The content of this page is",
       "automatically refreshed.",
       "Display is limited to " + MAX_EVENTS_IN_VIEW + " events."
     ]);
     this.addTable(["Timestamp", "Tag", "Data"]);
     this.addMsg();
+
+    this.setPlayPauseButton("pause");
   }
 
   onShow () {
@@ -32,26 +33,18 @@ export class EventsPanel extends Panel {
     // update the footer
     const tbody = this.table.tBodies[0];
     // when there are more than a screen-ful of events, the user
-    // will not see the "press play" message. but ths user already
-    // knows that because that cause the events to be shown...
+    // will not see the "press play" message. but the user already
+    // knows that because that caused the events to be shown...
     let txt = Utils.txtZeroOneMany(tbody.rows.length,
       "No events", "{0} event", "{0} events");
-    /* eslint-disable no-lonely-if */
     if (this.playOrPause === "play") {
       if (tbody.rows.length) {
         txt += ", waiting for more events";
       } else {
         txt += ", waiting for events";
       }
-    } else {
-      if (tbody.rows.length) {
-        txt += ", press " + Character.buttonInText(Character.CH_PLAY) + " to continue";
-      } else {
-        txt += ", press " + Character.buttonInText(Character.CH_PLAY) + " to begin";
-      }
     }
-    /* eslint-enable no-lonely-if */
-    this.setMsg(txt, true);
+    this.setMsg(txt);
   }
 
   handleAnyEvent (pTag, pData) {

saltgui/static/scripts/panels/HighState.js

@@ -21,7 +21,7 @@ export class HighStatePanel extends Panel {
     this._addMenuItemStateApply(this.panelMenu, "*");
     this._addMenuItemStateApplyTest(this.panelMenu, "*");
     this.addSearchButton();
-    this.addPlayPauseButton("none");
+    this.addPlayPauseButton();
     this.addHelpButton([
       "This panel shows the latest state.highstate or state.apply job for each minion.",
       "Only the latest " + MAX_HIGHSTATE_JOBS + " jobs are verified.",
@@ -104,13 +104,9 @@ export class HighStatePanel extends Panel {
 
   updateFooter () {
     const tbody = this.table.tBodies[0];
-    let txt = Utils.txtZeroOneMany(tbody.rows.length,
+    const txt = Utils.txtZeroOneMany(tbody.rows.length,
       "No minions", "{0} minion", "{0} minions");
-
-    if (this.playOrPause === "pause") {
-      txt += ", press " + Character.buttonInText(Character.CH_PLAY) + " to continue";
-    }
-    this.setMsg(txt, true);
+    this.setMsg(txt);
   }
 
   _handleHighstateRunnerJobsListJobs (pData) {
@@ -134,7 +130,7 @@ export class HighStatePanel extends Panel {
 
     this.jobs = jobs;
 
-    this.setPlayPauseButton("play");
+    this.setPlayPauseButton(jobs.length === 0 ? "none" : "play");
 
     this._updateNextJob();
   }

saltgui/static/scripts/panels/Issues.js

@@ -16,7 +16,7 @@ export class IssuesPanel extends Panel {
 
     this.addTitle("Issues (beta)");
     this.addSearchButton();
-    this.addPlayPauseButton("none");
+    this.addPlayPauseButton();
     this.addHelpButton([
       "This page contains an overview of problems",
       "that are observed in various categories.",
@@ -44,6 +44,10 @@ export class IssuesPanel extends Panel {
     this.lowStateIssues = new StateIssues();
   }
 
+  updateFooter () {
+    this.setMsg("(loading)");
+  }
+
   onShow () {
     const p1 = this.keysIssues.onGetIssues(this);
     const p2 = this.jobsIssues.onGetIssues(this);
@@ -60,7 +64,7 @@ export class IssuesPanel extends Panel {
       this.setMsg("");
     }, (pErrorMsg) => {
       this.setMsg("(error)");
-      Utils.addToolTip(this.msg, pErrorMsg);
+      Utils.addToolTip(this.msgDiv, pErrorMsg);
     });
   }
 }

saltgui/static/scripts/panels/Jobs.js

@@ -1,6 +1,5 @@
 /* global */
 
-import {Character} from "../Character.js";
 import {Panel} from "./Panel.js";
 import {Utils} from "../Utils.js";
 
@@ -210,9 +209,7 @@ export class JobsPanel extends Panel {
     this.numberOfJobsEligible = numberOfJobsEligible;
     this.numberOfJobsPresent = numberOfJobsPresent;
 
-    // an intermediate timer event may have caused
-    // the button to be hidden
-    this.setPlayPauseButton("play");
+    this.setPlayPauseButton(numberOfJobsShown === 0 ? "none" : "play");
 
     this.updateFooter();
 
@@ -228,12 +225,7 @@ export class JobsPanel extends Panel {
     }
     txt += Utils.txtZeroOneMany(this.numberOfJobsPresent,
       "", ", {0} job present", ", {0} jobs present");
-
-    if (this.playOrPause === "pause") {
-      txt += ", press " + Character.buttonInText(Character.CH_PLAY) + " to continue";
-    }
-
-    this.setMsg(txt, true);
+    this.setMsg(txt);
   }
 
   static _jobsToArray (jobs) {

saltgui/static/scripts/panels/JobsDetails.js

@@ -19,7 +19,7 @@ export class JobsDetailsPanel extends JobsPanel {
     this._addPanelMenuItemShowEligible();
     this._addPanelMenuItemShowAll();
     this.addSearchButton();
-    this.addPlayPauseButton("play");
+    this.addPlayPauseButton();
     this.addHelpButton([
       "Entries for jobs that are primarily used by SaltGUI are normally hidden.",
       "It is possible to define exceptions on that, and also to define additions to that.",

saltgui/static/scripts/panels/Keys.js

@@ -1,6 +1,5 @@
 /* global window */
 
-import {Character} from "../Character.js";
 import {DropDownMenu} from "../DropDown.js";
 import {Panel} from "./Panel.js";
 import {Utils} from "../Utils.js";
@@ -22,7 +21,7 @@ export class KeysPanel extends Panel {
     this._addPanelMenuItemWheelKeyRejectAllUnacceptedAcceptedDenied();
     this._addPanelMenuItemWheelKeyDeleteAll();
     this.addSearchButton();
-    this.addPlayPauseButton("play");
+    this.addPlayPauseButton();
     this.addHelpButton([
       "The content of this page is",
       "automatically refreshed."
@@ -32,6 +31,8 @@ export class KeysPanel extends Panel {
     this.addMsg();
 
     this.fingerprintPattern = /^[0-9a-f:]+$/i;
+
+    this.setPlayPauseButton("play");
   }
 
   onShow () {
@@ -173,16 +174,12 @@ export class KeysPanel extends Panel {
     // capitalize the first word (can only be "no")
     txt = txt.replace(/^no/, "No");
 
-    if (this.playOrPause === "pause") {
-      txt += ", press " + Character.buttonInText(Character.CH_PLAY) + " to continue";
-    }
-
     KeysPanel.cntUnaccepted = cnt["unaccepted"];
     KeysPanel.cntAccepted = cnt["accepted"];
     KeysPanel.cntDenied = cnt["denied"];
     KeysPanel.cntRejected = cnt["rejected"];
 
-    this.setMsg(txt, true);
+    this.setMsg(txt);
   }
 
   static _flagMinion (pMinionId, pMinionTr, pMinionsDict) {

saltgui/static/scripts/panels/Panel.js

@@ -67,7 +67,7 @@ export class Panel {
     this.searchButton = span;
   }
 
-  addPlayPauseButton (pInitialStatus) {
+  addPlayPauseButton () {
     const playButton = document.createElement("span");
     playButton.innerText = Character.CH_PLAY;
     playButton.classList.add("small-button");
@@ -102,7 +102,7 @@ export class Panel {
       pClickEvent.stopPropagation();
     });
 
-    this.setPlayPauseButton(pInitialStatus);
+    this.setPlayPauseButton("none");
   }
 
   setPlayPauseButton (pStatus) {
@@ -113,6 +113,7 @@ export class Panel {
     if (this.pauseButton) {
       this.pauseButton.style.display = pStatus === "play" ? "" : "none";
     }
+    this._updateMsg();
   }
 
   addHelpButton (pHelpTextArr, pUrl) {
@@ -238,19 +239,52 @@ export class Panel {
   }
 
   addMsg () {
-    const msg = document.createElement("div");
-    msg.id = this.key + "-msg";
-    msg.classList.add("msg");
-    msg.innerText = "(loading)";
-    this.div.appendChild(msg);
-    this.msg = msg;
+    const msgDiv = document.createElement("div");
+    msgDiv.id = this.key + "-msg";
+    msgDiv.classList.add("msg");
+    this.div.appendChild(msgDiv);
+    this.msgDiv = msgDiv;
+    this.setMsg("(loading)");
   }
 
-  setMsg (pText, isHTML = false) {
+  setMsg (pText) {
+    this.msgTxt = pText;
+    this._updateMsg();
+  }
+
+  _updateMsg () {
+    if (!this.msgDiv) {
+      // the div is not created yet
+      return;
+    }
+
+    let txt = this.msgTxt;
+    let isHTML = false;
+
+    if (this.playOrPause === "pause" && this.pauseButton) {
+      if (txt) {
+        txt += ", ";
+      }
+      if (this.table && this.table.tBodies[0].rows.length) {
+        txt += "press " + Character.buttonInText(Character.CH_PLAY) + " to continue";
+      } else {
+        txt += "press " + Character.buttonInText(Character.CH_PLAY) + " to begin";
+      }
+      isHTML = true;
+    }
+
+    if (this.playOrPause === "play" && this.playButton) {
+      if (txt) {
+        txt += ", ";
+      }
+      txt += "press " + Character.buttonInText(Character.CH_PAUSE) + " to pause";
+      isHTML = true;
+    }
+
     if (isHTML) {
-      this.msg.innerHTML = pText;
+      this.msgDiv.innerHTML = txt;
     } else {
-      this.msg.innerText = pText;
+      this.msgDiv.innerText = txt;
     }
   }
 
@@ -315,8 +349,8 @@ export class Panel {
     this.table.tFoot.appendChild(tr);
 
     // hide the "(loading)" message
-    if (this.msg !== null) {
-      this.msg.style.display = "none";
+    if (this.msgDiv) {
+      this.msgDiv.style.display = "none";
     }
 
     return true;
@@ -725,8 +759,8 @@ export class Panel {
     if (this.table) {
       this.clearTable();
     }
-    if (this.msg) {
-      this.msg.innerText = "(loading)";
+    if (this.msgDiv) {
+      this.setMsg("(loading)");
     }
     if (this.timeField) {
       this.timeField.innerHTML = " ";