Skip to content

Commit b3ad350

Browse files
Erwin Dondorperwindon
Erwin Dondorp
authored and
erwindon
committed
use highlightjs
1 parent 9d25844 commit b3ad350

File tree

18 files changed

+102
-66
lines changed

18 files changed

+102
-66
lines changed

‎saltgui/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
<link rel='stylesheet' type='text/css' href='static/stylesheets/options.css'/>
1919
<link rel='stylesheet' type='text/css' href='static/stylesheets/events.css'/>
2020
<link rel='stylesheet' type='text/css' href='static/sorttable/sorttable.css'/>
21+
<link rel='stylesheet' type='text/css' href='static/highlight/styles/default.min.css'/>
2122
<link rel='shortcut icon' href='static/images/icon.png'/>
2223
</head>
2324

‎saltgui/static/scripts/output/Output.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,12 @@ import {OutputNested} from "./OutputNested.js";
88
import {OutputYaml} from "./OutputYaml.js";
99
import {ParseCommandLine} from "../ParseCommandLine.js";
1010
import {Utils} from "../Utils.js";
11+
import hljs from "../../highlight/es/core.js";
12+
import json from "../../highlight/es/languages/json.js";
13+
import yaml from "../../highlight/es/languages/yaml.js";
14+
15+
hljs.registerLanguage("json", json);
16+
hljs.registerLanguage("yaml", yaml);
1117

1218
// Functions to turn responses from the salt system into visual information
1319
// The following variations exist:
@@ -108,6 +114,36 @@ export class Output {
108114
return OutputJson.formatJSON(pObject);
109115
}
110116

117+
static setHighlightObject (pParent, pObject, pStyleWhiteSpace = "pre-wrap", pLanguage = null) {
118+
const code = Utils.createElem("code");
119+
code.style.whiteSpace = pStyleWhiteSpace;
120+
// light-yellow, but lighter
121+
pParent.style.backgroundColor = "#FFFFF8";
122+
123+
if (pLanguage !== null) {
124+
const outputFormats = Utils.getStorageItem("session", "output_formats");
125+
Utils.setStorageItem("session", "output_formats", pLanguage);
126+
code.innerHTML = hljs.highlight(Output.formatObject(pObject), {language:pLanguage}).value;
127+
Utils.setStorageItem("session", "output_formats", outputFormats);
128+
} else if (Output.isOutputFormatAllowed("json")) {
129+
code.innerHTML = hljs.highlight(Output.formatObject(pObject), {language:'json'}).value;
130+
} else if (Output.isOutputFormatAllowed("nested")) {
131+
// yes, yaml
132+
code.innerHTML = hljs.highlight(Output.formatObject(pObject), {language:'yaml'}).value;
133+
} else if (Output.isOutputFormatAllowed("yaml")) {
134+
code.innerHTML = hljs.highlight(Output.formatObject(pObject), {language:'yaml'}).value;
135+
} else {
136+
code.innerText = Output.formatObject(pObject);
137+
}
138+
139+
if (pParent.firstElementChild) {
140+
pParent.replaceChild(code, pParent.firstElementChild);
141+
} else {
142+
// empty or only a text-node
143+
pParent.innerText = "";
144+
pParent.appendChild(code);
145+
}
146+
}
111147

112148
// this is the default output form
113149
// just format the returned objects

‎saltgui/static/scripts/panels/BeaconsMinion.js‎

Lines changed: 28 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -160,31 +160,44 @@ export class BeaconsMinionPanel extends Panel {
160160
this._addMenuItemBeaconsEnableBeaconWhenNeeded(beaconMenu, pMinionId, beaconName, beacon);
161161
this._addMenuItemBeaconsDelete(beaconMenu, pMinionId, beaconName);
162162

163-
// menu comes before this data on purpose
164-
const beaconConfig = Output.formatObject(beacon);
165-
const beaconConfigTd = Utils.createTd("beacon-config", beaconConfig);
166-
let initialTimestamp = "(waiting)";
167-
let initialValue = "(waiting)";
163+
const beaconConfigTd = Utils.createTd();
164+
Output.setHighlightObject(beaconConfigTd, beacon, "pre");
165+
tr.appendChild(beaconConfigTd);
166+
167+
let initialTimestamp;
168+
let initialValue;
169+
let initialClass;
168170
if (beacon.enabled === false) {
169-
beaconConfigTd.classList.add("beacon-disabled");
171+
initialClass = "beacon-disabled";
170172
initialTimestamp = Character.EM_DASH;
171173
initialValue = "(beacon" + Character.NO_BREAK_SPACE + "disabled)";
172174
} else if (beacons.enabled === false) {
173-
beaconConfigTd.classList.add("beacon-disabled");
175+
initialClass = "beacon-disabled";
174176
initialTimestamp = Character.EM_DASH;
175177
initialValue = "(beacons" + Character.NO_BREAK_SPACE + "disabled)";
178+
} else {
179+
initialClass = "beacon-waiting";
180+
initialTimestamp = "(waiting)";
181+
initialValue = "(waiting)";
176182
}
177-
tr.appendChild(beaconConfigTd);
178183

179184
const beaconTimestampTd = Utils.createTd();
180-
const beaconTimestampSpan = Utils.createSpan(["beacon-timestamp", "beacon-waiting"], initialTimestamp);
185+
const beaconTimestampSpan = Utils.createSpan(["beacon-timestamp", initialClass], initialTimestamp);
181186
beaconTimestampTd.appendChild(beaconTimestampSpan);
182187
tr.appendChild(beaconTimestampTd);
183188
tr.beaconTimestampSpan = beaconTimestampSpan;
184189

185-
const beaconValueTd = Utils.createTd(["beacon-value", "beacon-waiting"], initialValue);
190+
const beaconValueTd = Utils.createTd();
191+
const beaconValueLabelDiv = Utils.createDiv();
192+
beaconValueLabelDiv.style.display = "none";
193+
beaconValueTd.appendChild(beaconValueLabelDiv);
194+
const beaconValueValueDiv = Utils.createDiv();
195+
beaconValueValueDiv.innerText = initialValue;
196+
beaconValueValueDiv.classList.add("beacon-value", initialClass);
197+
beaconValueTd.appendChild(beaconValueValueDiv);
186198
tr.appendChild(beaconValueTd);
187-
tr.beaconValueTd = beaconValueTd;
199+
tr.beaconValueLabelDiv = beaconValueLabelDiv;
200+
tr.beaconValueValueDiv = beaconValueValueDiv;
188201

189202
const tbody = this.table.tBodies[0];
190203
tbody.appendChild(tr);
@@ -309,7 +322,6 @@ export class BeaconsMinionPanel extends Panel {
309322
return;
310323
}
311324

312-
let value = "";
313325
let stamp = "";
314326
if (pData["_stamp"]) {
315327
// keep timestamp for further logic
@@ -321,13 +333,13 @@ export class BeaconsMinionPanel extends Panel {
321333

322334
if (pTag !== prefix + beaconName + "/") {
323335
// Show the tag when it has extra information
324-
value = pTag + "\n";
336+
tr.beaconValueLabelDiv.style.display = "";
337+
tr.beaconValueLabelDiv.innerText = pTag;
325338
}
326339
if (pData["id"] === minionId) {
327340
delete pData["id"];
328341
}
329-
value += Output.formatObject(pData);
330-
tr.beaconValueTd.classList.remove("beacon-waiting");
342+
tr.beaconValueValueDiv.classList.remove("beacon-waiting");
331343

332344
// round down to 0.1 second
333345
// secondary events are close, but rarely exact on the same time
@@ -366,7 +378,7 @@ export class BeaconsMinionPanel extends Panel {
366378
tr.helpButtonSpan.style.display = "none";
367379
}
368380

369-
tr.beaconValueTd.innerText = value;
381+
Output.setHighlightObject(tr.beaconValueValueDiv, pData, "pre");
370382

371383
tr.prevStamp = stamp;
372384
tr.prevTag = pTag;

‎saltgui/static/scripts/panels/Events.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,8 @@ export class EventsPanel extends Panel {
7474
const pDataObj = {};
7575
Object.assign(pDataObj, pData);
7676
delete pDataObj._stamp;
77-
const dataTd = Utils.createTd("event-data", Output.formatObject(pDataObj));
77+
const dataTd = Utils.createTd();
78+
Output.setHighlightObject(dataTd, pDataObj);
7879
tr.append(dataTd);
7980

8081
tbody.prepend(tr);

‎saltgui/static/scripts/panels/Grains.js‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -143,8 +143,8 @@ export class GrainsPanel extends Panel {
143143
// it is a json path
144144
const obj = jsonPath(pMinionData, previewGrainValue);
145145
if (Array.isArray(obj)) {
146-
td.innerText = Output.formatObject(obj[0]);
147-
td.classList.add("grain-value");
146+
// TODO: why [0]
147+
Output.setHighlightObject(td, obj[0]);
148148
}
149149
} else {
150150
// a plain grain-name or a path in the grains.get style
@@ -156,8 +156,7 @@ export class GrainsPanel extends Panel {
156156
}
157157
}
158158
if (obj) {
159-
td.innerText = Output.formatObject(obj);
160-
td.classList.add("grain-value");
159+
Output.setHighlightObject(td, obj);
161160
}
162161
}
163162
} else {

‎saltgui/static/scripts/panels/GrainsMinion.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,8 @@ export class GrainsMinionPanel extends Panel {
8282
this._addMenuItemGrainsDelVal(grainMenu, pMinionId, grainName, grains[grainName]);
8383

8484
// menu comes before this data on purpose
85-
const grainValueTd = Utils.createTd("grain-value", grainValue);
85+
const grainValueTd = Utils.createTd();
86+
Output.setHighlightObject(grainValueTd, grains[grainName]);
8687
grainTr.appendChild(grainValueTd);
8788

8889
const tbody = this.table.tBodies[0];

‎saltgui/static/scripts/panels/Options.js‎

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
import {Character} from "../Character.js";
44
import {LoginPanel} from "../panels/Login.js";
55
import {Output} from "../output/Output.js";
6-
import {OutputYaml} from "../output/OutputYaml.js";
76
import {Panel} from "./Panel.js";
87
import {Router} from "../Router.js";
98
import {Utils} from "../Utils.js";
@@ -324,11 +323,12 @@ export class OptionsPanel extends Panel {
324323
} else if (category === "session" && name === "expire") {
325324
OptionsPanel._enhanceSessionExpire(td, value, sessionStart);
326325
} else if (category === "session" && name === "perms") {
327-
td.innerText = OutputYaml.formatYAML(value);
326+
// because the "master" file is also in YAML
327+
Output.setHighlightObject(td, value, null, "yaml");
328328
} else if (category === "session") {
329329
td.innerText = value;
330330
} else {
331-
td.innerText = this._parseAndFormat(name, value);
331+
this._parseAndFormat(td, name, value);
332332
}
333333

334334
if (category === "session" && name === "expire") {
@@ -377,31 +377,40 @@ export class OptionsPanel extends Panel {
377377
}
378378
}
379379

380-
_parseAndFormat (id, valueStr) {
380+
_parseAndFormat (pTd, id, valueStr) {
381381
/* eslint-disable curly */
382382
if (valueStr === null) valueStr = undefined;
383383
if (valueStr === "undefined") valueStr = undefined;
384384
/* eslint-enable curly */
385+
385386
if (valueStr === undefined) {
386387
const tr = this.div.querySelector("#option-" + id);
387388
if (tr.dataset.defaultValue) {
388-
return "(undefined) " + Character.RIGHTWARDS_ARROW + " " + tr.dataset.defaultValue;
389+
pTd.innerText = "(undefined) " + Character.RIGHTWARDS_ARROW + " " + tr.dataset.defaultValue;
390+
return;
389391
}
390-
return "(undefined)";
392+
pTd.innerText = "(undefined)";
393+
return;
391394
}
395+
392396
if (valueStr.length === 0) {
393-
return "(empty string)";
397+
pTd.innerText = "(empty string)";
398+
return;
394399
}
400+
395401
if (valueStr[0] !== "{" && valueStr[0] !== "[") {
396-
return valueStr;
402+
pTd.innerText = valueStr;
403+
return;
397404
}
405+
398406
let value;
399407
try {
400408
value = JSON.parse(valueStr);
401409
} catch (err) {
402410
value = err + " in \"" + valueStr + "\"";
403411
}
404-
return OutputYaml.formatYAML(value);
412+
// because the "master" file is also in YAML
413+
Output.setHighlightObject(pTd, value, null, "yaml");
405414
}
406415

407416
_isSelected (pCategory, pRow, pName) {

‎saltgui/static/scripts/panels/Orchestrations.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -195,8 +195,9 @@ export class OrchestrationsPanel extends Panel {
195195
// nothing more to show
196196
tr1.appendChild(Utils.createTd("details value-none", "(none)"));
197197
} else {
198-
const formattedStep = Output.formatObject(step);
199-
tr1.appendChild(Utils.createTd("grain-value", formattedStep));
198+
const td = Utils.createTd();
199+
Output.setHighlightObject(td, step);
200+
tr1.appendChild(td);
200201
}
201202

202203
this.table.tBodies[0].appendChild(tr1);

‎saltgui/static/scripts/panels/PillarsMinion.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -97,8 +97,8 @@ export class PillarsMinionPanel extends Panel {
9797
// initially use the hidden view
9898
pillarValueTd.appendChild(pillarHiddenDiv);
9999

100-
const pillarValueShown = Output.formatObject(pillars[pillarName]);
101-
const pillarShownDiv = Utils.createDiv("pillar-shown", pillarValueShown);
100+
const pillarShownDiv = Utils.createDiv("pillar-shown");
101+
Output.setHighlightObject(pillarShownDiv, pillars[pillarName]);
102102
// initially hide the normal view
103103
pillarShownDiv.style.display = "none";
104104
Utils.addToolTip(pillarShownDiv, "Click to hide");

‎saltgui/static/scripts/panels/Reactors.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,9 @@ export class ReactorsPanel extends Panel {
6666
_addReactor (pEvent, pReactor) {
6767
const tr = Utils.createTr();
6868
tr.appendChild(Utils.createTd("", pEvent));
69-
tr.appendChild(Utils.createTd("", Output.formatObject(pReactor)));
69+
const td = Utils.createTd();
70+
Output.setHighlightObject(td, pReactor);
71+
tr.appendChild(td);
7072

7173
const tbody = this.table.tBodies[0];
7274
tbody.appendChild(tr);

0 commit comments

Comments
 (0)