Merge pull request #578 from erwindon/auto-update-jobinfo

Showing output automatically upon completion and animated icon

Author: erwindon

saltgui/static/scripts/DropDown.js

@@ -24,7 +24,7 @@ export class DropDownMenu {
 
   // Creates an empty dropdown menu
   // The visual clue for the menu is added to the given element
-  constructor (pParentElement, pIsSmall) {
+  constructor (pParentElement, pStyle) {
 
     // allow reduced code on the caller side
     if (pParentElement.tagName === "TR") {
@@ -48,8 +48,8 @@ export class DropDownMenu {
       this.menuButton = Utils.createDiv("", Character.CH_HAMBURGER);
     }
     this.menuButton.classList.add("small-button", "small-button-for-hover", "menu-dropdown");
-    if (pIsSmall) {
-      this.menuButton.classList.add("small-small-button");
+    if (pStyle) {
+      this.menuButton.classList.add(pStyle + "-small-button");
     }
     this.menuButton.addEventListener("click", (pClickEvent) => {
       // better support for touch screens where user touch

saltgui/static/scripts/Utils.js

@@ -257,7 +257,7 @@ export class Utils {
 
     const menuAndFieldDiv = Utils.createDiv("search-menu-and-field", "");
 
-    const searchOptionsMenu = new DropDownMenu(menuAndFieldDiv, true);
+    const searchOptionsMenu = new DropDownMenu(menuAndFieldDiv, "smaller");
 
     const input = Utils.createElem("input", "filter-text");
     input.type = "text";

saltgui/static/scripts/issues/Issues.js

@@ -49,7 +49,7 @@ export class Issues {
 
     const theTr = Utils.createTr();
 
-    const menu = new DropDownMenu(theTr, true);
+    const menu = new DropDownMenu(theTr, "smaller");
     theTr.menu = menu;
 
     const descTd = Utils.createTd();

saltgui/static/scripts/panels/BeaconsMinion.js

@@ -141,7 +141,7 @@ export class BeaconsMinionPanel extends Panel {
     for (const beaconName of keys) {
       const tr = Utils.createTr("", "", "beacon-" + beaconName);
 
-      const beaconMenu = new DropDownMenu(tr, true);
+      const beaconMenu = new DropDownMenu(tr, "smaller");
 
       const nameTd = Utils.createTd("beacon-name", beaconName);
       tr.appendChild(nameTd);

saltgui/static/scripts/panels/GrainsMinion.js

@@ -69,7 +69,7 @@ export class GrainsMinionPanel extends Panel {
     for (const grainName of grainNames) {
       const grainTr = Utils.createTr();
 
-      const grainMenu = new DropDownMenu(grainTr, true);
+      const grainMenu = new DropDownMenu(grainTr, "smaller");
 
       const grainNameTd = Utils.createTd("grain-name", grainName);
       grainTr.appendChild(grainNameTd);

saltgui/static/scripts/panels/Job.js

@@ -19,6 +19,7 @@ export class JobPanel extends Panel {
     }
     this.addPanelMenu();
     this.addSearchButton();
+    this.addPlayPauseButton();
 
     // 1: re-run with original target pattern
     this._addPanelMenuItemJobRerunJob();
@@ -57,6 +58,31 @@ export class JobPanel extends Panel {
     this.div.append(this.output);
   }
 
+  updateFooter () {
+    // PlayPause uses this as call-back
+    if (this.playOrPause === "play" || this.playOrPause === "pause") {
+      // store the user preference for next time
+      Utils.setStorageItem("local", "jobrefresh", this.playOrPause);
+    }
+  }
+
+  _scheduleRefreshJob () {
+    const jobsActiveSpan = document.getElementById("summary-jobs-active");
+    if (jobsActiveSpan && jobsActiveSpan.innerText === "done") {
+      // no updates after "done"
+      this.setPlayPauseButton("none");
+      return;
+    }
+
+    window.setTimeout(() => {
+      if (this.playOrPause === "play") {
+        this.onShow();
+      } else {
+        this._scheduleRefreshJob();
+      }
+    }, 5000);
+  }
+
   onShow () {
     const jobId = decodeURIComponent(Utils.getQueryParam("id"));
     const minionId = decodeURIComponent(Utils.getQueryParam("minionid"));
@@ -70,17 +96,26 @@ export class JobPanel extends Panel {
       this._handleJobRunnerJobsListJob(pRunnerJobsListJobData, jobId, minionId);
       runnerJobsActivePromise.then((pRunnerJobsActiveData) => {
         this._handleRunnerJobsActive(jobId, pRunnerJobsActiveData);
+        this._scheduleRefreshJob();
         return true;
       }, (pRunnerJobsActiveMsg) => {
         this._handleRunnerJobsActive(jobId, JSON.stringify(pRunnerJobsActiveMsg));
+        this.setPlayPauseButton("none");
         return false;
       });
       return true;
     }, (pRunnerJobsListJobsMsg) => {
       this._handleJobRunnerJobsListJob(JSON.stringify(pRunnerJobsListJobsMsg), jobId, undefined);
       Utils.ignorePromise(runnerJobsActivePromise);
+      this.setPlayPauseButton("none");
       return false;
     });
+
+    let jobRefresh = Utils.getStorageItem("local", "jobrefresh", "pause");
+    if (jobRefresh !== "play" && jobRefresh !== "pause") {
+      jobRefresh = "pause";
+    }
+    this.setPlayPauseButton(jobRefresh);
   }
 
   static _isResultOk (result) {
@@ -488,6 +523,7 @@ export class JobPanel extends Panel {
     if (typeof pData !== "object") {
       summaryJobsActiveSpan.innerText = "(error)";
       Utils.addToolTip(summaryJobsActiveSpan, pData, "bottom-left");
+      this.setPlayPauseButton("none");
       return;
     }
 
@@ -497,6 +533,7 @@ export class JobPanel extends Panel {
     if (!info) {
       summaryJobsActiveSpan.innerText = "done";
       this.jobIsTerminated = true;
+      this.setPlayPauseButton("none");
       return;
     }
     this.jobIsTerminated = false;
@@ -525,7 +562,7 @@ export class JobPanel extends Panel {
         // show that this minion is still active on the request
         noResponseSpan.innerText = "(active) ";
 
-        const menu = new DropDownMenu(noResponseSpan, true);
+        const menu = new DropDownMenu(noResponseSpan, "verysmall");
         menu.addMenuItem("Show process info...", () => {
           const cmdArr = ["ps.proc_info", pid];
           this.runCommand("", minionId, cmdArr);

saltgui/static/scripts/panels/JobsDetails.js

@@ -337,7 +337,7 @@ export class JobsDetailsPanel extends JobsPanel {
     tr.id = Utils.getIdFromJobId(job.id);
     tr.dataset.jobid = job.id;
 
-    const menu = new DropDownMenu(tr, true);
+    const menu = new DropDownMenu(tr, "smaller");
 
     tr.appendChild(Utils.createTd("", job.id));
 

saltgui/static/scripts/panels/JobsSummary.js

@@ -37,7 +37,7 @@ export class JobsSummaryPanel extends JobsPanel {
     tr.id = Utils.getIdFromJobId(job.id);
 
     // menu on left side to prevent it from going past end of window
-    const menu = new DropDownMenu(tr, true);
+    const menu = new DropDownMenu(tr, "smaller");
 
     const td = Utils.createTd();
 

saltgui/static/scripts/panels/Nodegroups.js

@@ -148,7 +148,7 @@ export class NodegroupsPanel extends Panel {
         oldMenuButton.parentElement.remove();
         const newMenuButton = Utils.createTd();
         minionTr2.insertBefore(newMenuButton, minionTr2.firstChild);
-        minionTr2.dropdownmenu = new DropDownMenu(newMenuButton, true);
+        minionTr2.dropdownmenu = new DropDownMenu(newMenuButton, "smaller");
         if (minionIsOk) {
           this._addMenuItemStateApplyMinion(minionTr2.dropdownmenu, pMinionId);
           this._addMenuItemStateApplyTestMinion(minionTr2.dropdownmenu, pMinionId);
@@ -300,7 +300,7 @@ export class NodegroupsPanel extends Panel {
     tr.style.borderTop = "4px double #ddd";
 
     const menuTd = Utils.createTd();
-    tr.dropdownmenu = new DropDownMenu(menuTd, true);
+    tr.dropdownmenu = new DropDownMenu(menuTd, "smaller");
     tr.appendChild(menuTd);
 
     const titleTd = Utils.createTd();

saltgui/static/scripts/panels/Panel.js

@@ -394,7 +394,7 @@ export class Panel {
 
     // drop down menu
     const menuTd = Utils.createTd();
-    const menu = new DropDownMenu(menuTd, true);
+    const menu = new DropDownMenu(menuTd, "smaller");
     minionTr.dropdownmenu = menu;
     minionTr.appendChild(menuTd);
 
@@ -434,7 +434,7 @@ export class Panel {
 
     // drop down menu
     const menuTd = Utils.createTd();
-    const menu = new DropDownMenu(menuTd, true);
+    const menu = new DropDownMenu(menuTd, "smaller");
     minionTr.dropdownmenu = menu;
     minionTr.appendChild(menuTd);