Skip to content

Commit 821314a

Browse files
author
Chris Maunder
committed
Colouring in server logs fixed
1 parent cca34b2 commit 821314a

File tree

2 files changed

+96
-26
lines changed

2 files changed

+96
-26
lines changed

‎src/server/wwwroot/assets/dashboard.js‎

Lines changed: 68 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -673,6 +673,7 @@ function addLogEntry(id, date, logLevel, label, entry, refreshDisplay = true) {
673673

674674
// unicode gets messed up. TODO: Fix this!
675675
logText = logText.replace("✔️", "✅");
676+
logText = logText.replace("✅", "✅");
676677

677678
const html = id
678679
? `<div id='log${id}' class='${logLevel} ${label} ${className}'>${idText}${dateText}:${requestIdMarker}${logText}${logMessage}</div>`
@@ -1277,45 +1278,86 @@ function setModuleUpdateStatus(text, variant) {
12771278

12781279
/**
12791280
* Transform xterm colour escapes into HTML.
1281+
* **CAVEAT** This assume there is ONE format code at the start, and ONE reset
1282+
* code at the end of the string. This is what the setup scripts will
1283+
* output.
12801284
* @param text The input text
12811285
* @returns The text with colour codes converted to HTML
12821286
*/
12831287
function convertXtermToCss(text) {
12841288

1285-
// TODO: Process, rather than strip, background
1286-
text = text.replace(/\033\[(4|10)\dm/g, ""); // strip background
1287-
text = text.replace(/\033\[0m/g, "</span>"); // convert reset code
1289+
let spanCount = 0;
12881290

1289-
text = text.replace(/\033\[(((0|1);)?(3|9)\d)m/g, (match, p1, p2, p3) => { // convert foreground
1291+
// Process background
1292+
// text = text.replace(/\033\[(4|10)\dm/g, ""); // strip background
1293+
text = text.replace(/\033\[((4|10)\dm)/g, (match, p1, p2, p3) => { // convert background
12901294
let code = p1;
1291-
if (p2) code = code.substring(p2.length); // trim 'intensity' bit
12921295

1293-
let colour = null;
1296+
spanCount++;
1297+
1298+
var textClass = "";
12941299
switch (code) {
1295-
case '39': colour = 'default'; break;
1296-
case '30': colour = 'black'; break;
1297-
case '31': colour = 'darkred'; break;
1298-
case '32': colour = 'darkgreen'; break;
1299-
case '33': colour = 'darkyellow'; break;
1300-
case '34': colour = 'darkblue'; break;
1301-
case '35': colour = 'darkmagenta'; break;
1302-
case '36': colour = 'darkCyan'; break;
1303-
case '37': colour = 'gray'; break;
1304-
case '90': colour = 'darkgrey'; break;
1305-
case '91': colour = 'red'; break;
1306-
case '92': colour = 'green'; break;
1307-
case '93': colour = 'yellow'; break;
1308-
case '94': colour = 'blue'; break;
1309-
case '95': colour = 'magenta'; break;
1310-
case '96': colour = 'cyan'; break;
1311-
case '30': colour = 'white'; break;
1300+
case '49m': textClass += 'bg-default'; break;
1301+
case '40m': textClass += 'bg-black'; break;
1302+
case '41m': textClass += 'bg-darkred'; break;
1303+
case '42m': textClass += 'bg-darkgreen'; break;
1304+
case '43m': textClass += 'bg-darkyellow'; break;
1305+
case '44m': textClass += 'bg-darkblue'; break;
1306+
case '45m': textClass += 'bg-darkmagenta'; break;
1307+
case '46m': textClass += 'bg-darkCyan'; break;
1308+
case '47m': textClass += 'bg-gray'; break;
1309+
case '100m': textClass += 'bg-darkgrey'; break;
1310+
case '101m': textClass += 'bg-red'; break;
1311+
case '102m': textClass += 'bg-green'; break;
1312+
case '103m': textClass += 'bg-yellow'; break;
1313+
case '104m': textClass += 'bg-blue'; break;
1314+
case '105m': textClass += 'bg-magenta'; break;
1315+
case '106m': textClass += 'bg-cyan'; break;
1316+
case '107m': textClass += 'bg-white'; break;
13121317
}
13131318

1314-
if (colour)
1315-
return `<span class='text-${colour}'>`;
1319+
return `<span class='${textClass}'>`;
1320+
})
1321+
1322+
text = text.replace(/\033\[(((0|1);)?(3|9)\dm)/g, (match, p1, p2, p3) => { // convert foreground
1323+
let code = p1;
1324+
if (p2) code = code.substring(p2.length); // trim 'intensity' bit
1325+
1326+
spanCount++;
13161327

1317-
return "<span>";
1328+
var textClass = "";
1329+
switch (code) {
1330+
case '39m': textClass += 'text-default'; break;
1331+
case '30m': textClass += 'text-black'; break;
1332+
case '31m': textClass += 'text-darkred'; break;
1333+
case '32m': textClass += 'text-darkgreen'; break;
1334+
case '33m': textClass += 'text-darkyellow'; break;
1335+
case '34m': textClass += 'text-darkblue'; break;
1336+
case '35m': textClass += 'text-darkmagenta'; break;
1337+
case '36m': textClass += 'text-darkCyan'; break;
1338+
case '37m': textClass += 'text-gray'; break;
1339+
case '90m': textClass += 'text-darkgrey'; break;
1340+
case '91m': textClass += 'text-red'; break;
1341+
case '92m': textClass += 'text-green'; break;
1342+
case '93m': textClass += 'text-yellow'; break;
1343+
case '94m': textClass += 'text-blue'; break;
1344+
case '95m': textClass += 'text-magenta'; break;
1345+
case '96m': textClass += 'text-cyan'; break;
1346+
case '30m': textClass += 'text-white'; break;
1347+
}
1348+
1349+
return `<span class='${textClass}'>`;
13181350
})
13191351

1352+
// convert reset code
1353+
text = text.replace(/\033\[0m/g, (match, p1, p2, p3) => { // convert background
1354+
spanCount--;
1355+
return "</span>";
1356+
});
1357+
1358+
// cap off open span tags
1359+
for (let i = 0; i < spanCount; i++)
1360+
text += "</span>";
1361+
13201362
return text;
13211363
}

‎src/server/wwwroot/assets/server.css‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,26 @@ a {
7171
.logs .text-cyan { color: #00cfcf; }
7272
.logs .text-white { color: white !important; }
7373

74+
.logs .bg-default { background-color: inherit;}
75+
.logs .bg-black { background-color: black !important; }
76+
.logs .bg-darkred { background-color: darkred; }
77+
.logs .bg-darkgreen { background-color: #15a815; }
78+
.logs .bg-darkyellow { background-color: #c7c700; }
79+
.logs .bg-darkblue { background-color: darkblue; }
80+
.logs .bg-darkmagenta { background-color: #c000c0; }
81+
.logs .bg-darkcyan { background-color: darkcyan; }
82+
.logs .bg-darkgrey { background-color: grey; }
83+
.logs .bg-grey { background-color: lightgrey; }
84+
.logs .bg-white { background-color: white; }
85+
.logs .bg-red { background-color: red; }
86+
.logs .bg-green { background-color: #00d300; }
87+
.logs .bg-yellow { background-color: #eeee00; }
88+
.logs .bg-blue { background-color: #0077ff; }
89+
.logs .bg-magenta { background-color: magenta; }
90+
.logs .bg-cyan { background-color: #00cfcf; }
91+
.logs .bg-white { background-color: white !important; }
92+
93+
7494
.dark-mode .logs .text-black { color: white !important; }
7595
.dark-mode .logs .text-darkred { color: #c30000 !important; }
7696
.dark-mode .logs .text-darkblue { color: blue !important; }
@@ -79,6 +99,14 @@ a {
7999
.dark-mode .logs .text-white { color: black !important; }
80100
.dark-mode .logs .text-blue { color: deepskyblue !important; }
81101

102+
.dark-mode .logs .bg-black { background-color: white !important; }
103+
.dark-mode .logs .bg-darkred { background-color: #c30000 !important; }
104+
.dark-mode .logs .bg-darkblue { background-color: blue !important; }
105+
.dark-mode .logs .bg-darkmagenta { background-color: #e300e3 !important; }
106+
.dark-mode .logs .bg-cyan { background-color: cyan !important; }
107+
.dark-mode .logs .bg-white { background-color: black !important; }
108+
.dark-mode .logs .bg-blue { background-color: deepskyblue !important; }
109+
82110
.dot {
83111
height: 0.65em;
84112
width: 0.65em;

0 commit comments

Comments
 (0)