Showing output automatically upon completion and animated icon

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

@@ -149,7 +149,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);
@@ -303,7 +303,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);
 

saltgui/static/scripts/panels/SchedulesMinion.js

@@ -95,7 +95,7 @@ export class SchedulesMinionPanel extends Panel {
 
  const tr = Utils.createTr();
 
- const scheduleMenu = new DropDownMenu(tr, true);
+ const scheduleMenu = new DropDownMenu(tr, "smaller");
 
  const nameTd = Utils.createTd("schedule-name", scheduleName);
  tr.appendChild(nameTd);

saltgui/static/scripts/panels/Templates.js

@@ -113,7 +113,7 @@ export class TemplatesPanel extends Panel {
  _addTemplate (pTemplateName, template) {
  const tr = Utils.createTr();
 
- const menu = new DropDownMenu(tr, true);
+ const menu = new DropDownMenu(tr, "smaller");
 
  tr.appendChild(Utils.createTd("name", pTemplateName));
 

saltgui/static/stylesheets/main.css

@@ -125,12 +125,21 @@ h1 {
  padding-right: 10px;
 }
 
-.small-small-button {
+.smaller-small-button {
  padding-left: 5px;
  padding-right: 5px;
  min-width: 0;
 }
 
+.verysmall-small-button {
+ padding-left: 5px;
+ padding-right: 5px;
+ min-width: 0;
+ display: inherit;
+ font-size: inherit;
+ height: inherit;
+}
+
 .small-button-left {
  margin-right: 10px;
 }