Skip to content

Commit 8d77f5e

Browse files
Erwin Dondorperwindon
Erwin Dondorp
authored and
erwindon
committed
use highlightjs
1 parent eab112e commit 8d77f5e

18 files changed

Lines changed: 103 additions & 66 deletions

‎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
@@ -164,31 +164,44 @@ export class BeaconsMinionPanel extends Panel {
164164
this._addMenuItemBeaconsEnableBeaconWhenNeeded(beaconMenu, pMinionId, beaconName, beacon);
165165
this._addMenuItemBeaconsDelete(beaconMenu, pMinionId, beaconName);
166166

167-
// menu comes before this data on purpose
168-
const beaconConfig = Output.formatObject(beacon);
169-
const beaconConfigTd = Utils.createTd("beacon-config", beaconConfig);
170-
let initialTimestamp = "(waiting)";
171-
let initialValue = "(waiting)";
167+
const beaconConfigTd = Utils.createTd();
168+
Output.setHighlightObject(beaconConfigTd, beacon, "pre");
169+
tr.appendChild(beaconConfigTd);
170+
171+
let initialTimestamp;
172+
let initialValue;
173+
let initialClass;
172174
if (beacon.enabled === false) {
173-
beaconConfigTd.classList.add("beacon-disabled");
175+
initialClass = "beacon-disabled";
174176
initialTimestamp = Character.EM_DASH;
175177
initialValue = "(beacon" + Character.NO_BREAK_SPACE + "disabled)";
176178
} else if (beacons.enabled === false) {
177-
beaconConfigTd.classList.add("beacon-disabled");
179+
initialClass = "beacon-disabled";
178180
initialTimestamp = Character.EM_DASH;
179181
initialValue = "(beacons" + Character.NO_BREAK_SPACE + "disabled)";
182+
} else {
183+
initialClass = "beacon-waiting";
184+
initialTimestamp = "(waiting)";
185+
initialValue = "(waiting)";
180186
}
181-
tr.appendChild(beaconConfigTd);
182187

183188
const beaconTimestampTd = Utils.createTd();
184-
const beaconTimestampSpan = Utils.createSpan(["beacon-timestamp", "beacon-waiting"], initialTimestamp);
189+
const beaconTimestampSpan = Utils.createSpan(["beacon-timestamp", initialClass], initialTimestamp);
185190
beaconTimestampTd.appendChild(beaconTimestampSpan);
186191
tr.appendChild(beaconTimestampTd);
187192
tr.beaconTimestampSpan = beaconTimestampSpan;
188193

189-
const beaconValueTd = Utils.createTd(["beacon-value", "beacon-waiting"], initialValue);
194+
const beaconValueTd = Utils.createTd();
195+
const beaconValueLabelDiv = Utils.createDiv();
196+
beaconValueLabelDiv.style.display = "none";
197+
beaconValueTd.appendChild(beaconValueLabelDiv);
198+
const beaconValueValueDiv = Utils.createDiv();
199+
beaconValueValueDiv.innerText = initialValue;
200+
beaconValueValueDiv.classList.add("beacon-value", initialClass);
201+
beaconValueTd.appendChild(beaconValueValueDiv);
190202
tr.appendChild(beaconValueTd);
191-
tr.beaconValueTd = beaconValueTd;
203+
tr.beaconValueLabelDiv = beaconValueLabelDiv;
204+
tr.beaconValueValueDiv = beaconValueValueDiv;
192205

193206
const tbody = this.table.tBodies[0];
194207
tbody.appendChild(tr);
@@ -313,7 +326,6 @@ export class BeaconsMinionPanel extends Panel {
313326
return;
314327
}
315328

316-
let value = "";
317329
let stamp = "";
318330
if (pData["_stamp"]) {
319331
// keep timestamp for further logic
@@ -325,13 +337,13 @@ export class BeaconsMinionPanel extends Panel {
325337

326338
if (pTag !== prefix + beaconName + "/") {
327339
// Show the tag when it has extra information
328-
value = pTag + "\n";
340+
tr.beaconValueLabelDiv.style.display = "";
341+
tr.beaconValueLabelDiv.innerText = pTag;
329342
}
330343
if (pData["id"] === minionId) {
331344
delete pData["id"];
332345
}
333-
value += Output.formatObject(pData);
334-
tr.beaconValueTd.classList.remove("beacon-waiting");
346+
tr.beaconValueValueDiv.classList.remove("beacon-waiting");
335347

336348
// round down to 0.1 second
337349
// secondary events are close, but rarely exact on the same time
@@ -370,7 +382,7 @@ export class BeaconsMinionPanel extends Panel {
370382
tr.helpButtonSpan.style.display = "none";
371383
}
372384

373-
tr.beaconValueTd.innerText = value;
385+
Output.setHighlightObject(tr.beaconValueValueDiv, pData, "pre");
374386

375387
tr.prevStamp = stamp;
376388
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: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -143,8 +143,9 @@ 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+
// jsonpath returns array when result is skalar
147+
// compensate by taking the first item
148+
Output.setHighlightObject(td, obj[0]);
148149
}
149150
} else {
150151
// a plain grain-name or a path in the grains.get style
@@ -156,8 +157,7 @@ export class GrainsPanel extends Panel {
156157
}
157158
}
158159
if (obj) {
159-
td.innerText = Output.formatObject(obj);
160-
td.classList.add("grain-value");
160+
Output.setHighlightObject(td, obj);
161161
}
162162
}
163163
} 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";
@@ -316,11 +315,12 @@ export class OptionsPanel extends Panel {
316315
} else if (category === "session" && name === "expire") {
317316
OptionsPanel._enhanceSessionExpire(td, value, sessionStart);
318317
} else if (category === "session" && name === "perms") {
319-
td.innerText = OutputYaml.formatYAML(value);
318+
// because the "master" file is also in YAML
319+
Output.setHighlightObject(td, value, null, "yaml");
320320
} else if (category === "session") {
321321
td.innerText = value;
322322
} else {
323-
td.innerText = this._parseAndFormat(name, value);
323+
this._parseAndFormat(td, name, value);
324324
}
325325

326326
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)