Skip to content

Commit

Permalink
use new menus
Browse files Browse the repository at this point in the history
  • Loading branch information
Erwin Dondorp authored and erwindon committed Sep 5, 2021
1 parent bdb5bfb commit 8535af0
Show file tree
Hide file tree
Showing 9 changed files with 154 additions and 90 deletions.
17 changes: 9 additions & 8 deletions saltgui/static/scripts/CommandBox.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

import {Character} from "./Character.js";
import {Documentation} from "./Documentation.js";
import {DropDownMenu} from "./DropDown.js";
import {DropDownMenuCmd} from "./DropDownCmd.js";
import {Output} from "./output/Output.js";
import {ParseCommandLine} from "./ParseCommandLine.js";
import {Router} from "./Router.js";
Expand All @@ -17,14 +17,15 @@ export class CommandBox {
this.api = pApi;

const cmdbox = document.getElementById("cmd-box");
this.cmdmenu = new DropDownMenu(cmdbox);
this.cmdmenu = new DropDownMenuCmd(cmdbox);

this.documentation = new Documentation(this.router, this);
this._registerCommandBoxEventListeners();

RunType.createMenu();
TargetType.createMenu();

this.documentation = new Documentation(pRouter, this);

const manualRun = document.getElementById("popup-run-command");
Utils.addTableHelp(manualRun, "Click for help", "bottom-center");
const helpButton = manualRun.querySelector("#help");
Expand All @@ -41,7 +42,7 @@ export class CommandBox {
// since the storage-item is then not populated yet.
return;
}
const menu = new DropDownMenu(titleElement);
const menu = new DropDownMenuCmd(titleElement);
const templatesText = Utils.getStorageItem("session", "templates", "{}");
const templates = JSON.parse(templatesText);
const keys = Object.keys(templates).sort();
Expand All @@ -51,7 +52,7 @@ export class CommandBox {
if (!description) {
description = "(" + key + ")";
}
menu.addMenuItem(
menu.addMenuItemCmd(
description,
() => {
CommandBox._applyTemplate(template);
Expand Down Expand Up @@ -164,7 +165,7 @@ export class CommandBox {
TargetType.setTargetType(targetType);
} else {
// not in the template, revert to default
TargetType.setTargetTypeDefault();
TargetType.setTargetType(null);
}

if (template.target) {
Expand Down Expand Up @@ -222,7 +223,7 @@ export class CommandBox {
const commandField = document.getElementById("command");
const commandValue = commandField.value;

const targetType = TargetType.menuTargetType._value;
const targetType = TargetType.menuTargetType.getValue();

const patWhitespaceAll = /\s/g;
const commandValueNoTabs = commandValue.replace(patWhitespaceAll, " ");
Expand Down Expand Up @@ -380,7 +381,7 @@ export class CommandBox {

// reset to default, so that its value is initially hidden
RunType.setRunTypeDefault();
TargetType.setTargetTypeDefault();
TargetType.setTargetType(null);

if (Router.currentPage) {
Router.currentPage.refreshPage();
Expand Down
2 changes: 1 addition & 1 deletion saltgui/static/scripts/Documentation.js
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ export class Documentation {
dummyCommand = "sys.doc " + cmd;
}

const targetType = TargetType.menuTargetType._value;
const targetType = TargetType.menuTargetType.getValue();

const func = this.commandbox.getRunParams(targetType, target, docCommand, true);
if (func === null) {
Expand Down
15 changes: 6 additions & 9 deletions saltgui/static/scripts/DropDown.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@ import {Utils} from "./Utils.js";
// the menu. when at least one item is visible, the menu is visible
// remember to call verifyApp() when that is potentially the case

// superclass for DropDownMenuRadio, DropDownMenuCheckbox and DropDownMenuCmd

export class DropDownMenu {

// Creates an empty dropdown menu
Expand Down Expand Up @@ -83,6 +85,7 @@ export class DropDownMenu {
visibleCount += 1;
}
}

// hide the menu when it has no visible menu-items
const displayVisible = this.menuDropdown.tagName === "TD" ? "table-cell" : "inline-block";
const displayInvisible = "none";
Expand All @@ -102,7 +105,7 @@ export class DropDownMenu {
// function is called each time the menu opens
// This allows dynamic menuitem titles (use menuitem.innerText)
// or visibility (use menuitem.style.display = "none"/"inline-block")
addMenuItem (pTitle, pCallBack, pValue) {
addMenuItem (pTitle, pCallBack = null, pValue = null) {
const button = Utils.createDiv("run-command-button", "...");
if (pValue) {
button._value = pValue;
Expand All @@ -124,9 +127,9 @@ export class DropDownMenu {
return button;
}

_callback (pClickEvent, pCallBack, pValue) {
this._value = pValue;
_callback (pClickEvent, pCallBack) {
pCallBack(pClickEvent);
this.verifyAll();
pClickEvent.stopPropagation();
}

Expand All @@ -148,10 +151,4 @@ export class DropDownMenu {
__hideMenu () {
this.menuDropdown.style.display = "none";
}

clearMenu () {
while (this.menuDropdownContent.firstChild) {
this.menuDropdownContent.removeChild(this.menuDropdownContent.firstChild);
}
}
}
18 changes: 18 additions & 0 deletions saltgui/static/scripts/DropDownCheckbox.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import {DropDownMenu} from "./DropDown.js";

export class DropDownMenuCheckbox extends DropDownMenu {
// constructor (pParentElement) {
// super(pParentElement);
// }

/*
addMenuItemCheckbox (pTitle, pCallback) {
const menuItem = super.addMenuItem(pTitle, () => {
this._selectCallback(pValue, pTitle, pMenuTitle);
}, (pMenuItem) => {
return this._verifyMenuItem(pMenuItem);
pCallback(ev);
});
}
*/
}
24 changes: 24 additions & 0 deletions saltgui/static/scripts/DropDownCmd.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import {DropDownMenu} from "./DropDown.js";

export class DropDownMenuCmd extends DropDownMenu {
// constructor (pParentElement) {
// super(pParentElement);
// }

_selectCallback (pMenuItem, pTitle) {
// show the chosen value
if (typeof pTitle !== "string") {
pTitle = pTitle(pMenuItem);
}
this.setTitle(pTitle);
}

addMenuItemCmd (pTitle, pCallback) {
const menuItem = super.addMenuItem(pTitle, (pMenuItem) => {
this._selectCallback(pMenuItem, pTitle);
}, (pMenuItem) => {
pCallback(pMenuItem);
});
return menuItem;
}
}
69 changes: 69 additions & 0 deletions saltgui/static/scripts/DropDownRadio.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
import {DropDownMenu} from "./DropDown.js";

export class DropDownMenuRadio extends DropDownMenu {
constructor (pParentElement) {
super(pParentElement);
this.value = null;
this.defaultValue = null;
}

getValue () {
if (this.value === null) {
return this.defaultValue;
}
return this.value;
}

setValue (pValue) {
this.value = pValue;
}

setDefaultValue (pDefaultValue) {
this.defaultValue = pDefaultValue;
}

_verifyMenuItem (pMenuItem) {
let title;
if (typeof pMenuItem._title === "string") {
title = pMenuItem._title;
} else {
title = pMenuItem._title(pMenuItem);
}

if (title === null) {
// menu item will be hidden
} else if (pMenuItem._value === this.value) {
// 25CF = BLACK CIRCLE
title = "\u25CF " + title;
} else if (this.value === null && pMenuItem._value === this.defaultValue) {
// 25CB = WHITE CIRCLE
title = "\u25CB " + title;
}
return title;
}

_selectCallback (pValue, pTitle, pMenuTitle) {

this.value = pValue;

// show the chosen value
if (pMenuTitle === null) {
// caller can specify a more specific menu title
// usually an abbreviation of the chosen menu item
if (typeof pTitle !== "string") {
pTitle = pTitle();
}
this.setTitle(pTitle);
} else {
this.setTitle(pMenuTitle);
}
}

addMenuItemRadio (pValue, pTitle, pMenuTitle = null) {
const menuItem = super.addMenuItem(pTitle, () => {
this._selectCallback(pValue, pTitle, pMenuTitle);
}, (pMenuItem) => this._verifyMenuItem(pMenuItem));

menuItem._value = pValue;
}
}
48 changes: 7 additions & 41 deletions saltgui/static/scripts/RunType.js
Original file line number Diff line number Diff line change
@@ -1,60 +1,26 @@
/* global document */

import {Character} from "./Character.js";
import {DropDownMenu} from "./DropDown.js";
import {Utils} from "./Utils.js";
import {DropDownMenuRadio} from "./DropDownRadio.js";

export class RunType {

static createMenu () {
const runblock = document.getElementById("run-block");
RunType.menuRunType = new DropDownMenu(runblock);
// do not show the menu title at first
RunType.menuRunType.setTitle("");
RunType.menuRunType.addMenuItem("Normal", RunType._updateRunTypeText, "normal");
RunType.menuRunType.addMenuItem("Async", RunType._updateRunTypeText, "async");
RunType._updateRunTypeText();
}

static _updateRunTypeText () {
const runType = RunType.getRunType();

switch (runType) {
case "normal":
// now that the menu is used show the menu title
RunType.menuRunType.setTitle("Normal");
break;
case "async":
RunType.menuRunType.setTitle("Async");
break;
default:
Utils.error("runType", runType);
}

const menuItems = RunType.menuRunType.menuDropdownContent.children;
for (let i = 0; i < menuItems.length; i++) {
let menuItemText = menuItems[i].innerText;
menuItemText = menuItemText.replace(/^. /, "");
if (menuItems[i]._value === runType) {
menuItemText = Character.BLACK_CIRCLE + " " + menuItemText;
}
menuItems[i].innerText = menuItemText;
}
RunType.menuRunType = new DropDownMenuRadio(runblock);
RunType.menuRunType.setDefaultValue("normal");
RunType.menuRunType.addMenuItemRadio("normal", "Normal");
RunType.menuRunType.addMenuItemRadio("async", "Async");
}

static setRunTypeDefault () {
RunType.menuRunType._value = "normal";
RunType._updateRunTypeText();
RunType.menuRunType.setValue(null);
// reset the title to the absolute minimum
// so that the menu does not stand out in trivial situations
RunType.menuRunType.setTitle("");
}

static getRunType () {
const runType = RunType.menuRunType._value;
if (runType === undefined || runType === "") {
return "normal";
}
const runType = RunType.menuRunType.getValue();
return runType;
}
}
41 changes: 15 additions & 26 deletions saltgui/static/scripts/TargetType.js
Original file line number Diff line number Diff line change
@@ -1,20 +1,21 @@
/* global document */

import {Character} from "./Character.js";
import {DropDownMenu} from "./DropDown.js";
import {DropDownMenuRadio} from "./DropDownRadio.js";
import {Utils} from "./Utils.js";

export class TargetType {

static createMenu () {
const targetbox = document.getElementById("target-box");
TargetType.menuTargetType = new DropDownMenu(targetbox);
TargetType.menuTargetType = new DropDownMenuRadio(targetbox);
// do not show the menu title at first
TargetType.menuTargetType.addMenuItem("Normal", TargetType._manualUpdateTargetTypeText, "glob");
TargetType.menuTargetType.addMenuItem("List", TargetType._manualUpdateTargetTypeText, "list");
TargetType.menuTargetType.addMenuItem(TargetType._targetTypeNodeGroupPrepare, TargetType._manualUpdateTargetTypeText, "nodegroup");
TargetType.menuTargetType.addMenuItem("Compound", TargetType._manualUpdateTargetTypeText, "compound");
TargetType.setTargetTypeDefault();
TargetType.menuTargetType.setTitle("");
TargetType.menuTargetType.addMenuItemRadio("glob", "Normal");
TargetType.menuTargetType.addMenuItemRadio("list", "List");
TargetType.menuTargetType.addMenuItemRadio("nodegroup", (pMenuItem) => TargetType._targetTypeNodeGroupPrepare(pMenuItem));
TargetType.menuTargetType.addMenuItemRadio("compound", "Compound");
TargetType.autoSelectTargetType("");
}

// It takes a while before we known the list of nodegroups
Expand Down Expand Up @@ -85,46 +86,34 @@ export class TargetType {
}
menuItems[i].innerText = menuItemText;
}
return null;
}

static autoSelectTargetType (pTarget) {

if (!TargetType.menuTargetType._system) {
// user has selected the value, do not touch it
return;
}

if (pTarget.includes("@") || pTarget.includes(" ") ||
pTarget.includes("(") || pTarget.includes(")")) {
// "@" is a strong indicator for compound target
// but "space", "(" and ")" are also typical for compound target
TargetType.menuTargetType._value = "compound";
TargetType.menuTargetType.setDefaultValue("compound");
} else if (pTarget.includes(",")) {
// "," is a strong indicator for list target (when it is also not compound)
TargetType.menuTargetType._value = "list";
TargetType.menuTargetType.setDefaultValue("list");
} else if (pTarget.startsWith("#")) {
// "#" at the start of a line is a strong indicator for nodegroup target
// this is not a SALTSTACK standard, but our own invention
TargetType.menuTargetType._value = "nodegroup";
TargetType.menuTargetType.setDefaultValue("nodegroup");
} else {
TargetType.menuTargetType._value = "glob";
TargetType.menuTargetType.setDefaultValue("glob");
}

// show the new title
TargetType._updateTargetTypeText();
}

static setTargetType (pTargetType) {
TargetType.menuTargetType._value = pTargetType;
TargetType.menuTargetType._system = true;
TargetType._updateTargetTypeText();
TargetType.menuTargetType.setValue(pTargetType);
}

static _getTargetType () {
const targetType = TargetType.menuTargetType._value;
if (targetType === undefined || targetType === "") {
return "glob";
}
const targetType = TargetType.menuTargetType.getValue();
return targetType;
}

Expand Down
Loading

0 comments on commit 8535af0

Please sign in to comment.