zaphar/Heracles
1
0
Fork 0
mirror of https://github.com/zaphar/Heracles.git synced 2025-07-22 20:19:50 -04:00
Code Issues Packages Projects Releases Wiki Activity

ui: respect ansi colors in our log lines

Browse Source
This commit is contained in:
Jeremy Wall 2024-03-05 20:32:04 -05:00
parent 01cd54afa4
commit 6a503947d8
1 changed files with 39 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
static/lib.js
View File

@ -69,6 +69,41 @@
* @type {(TableTrace|GraphTrace)}
*/
/**
* Map ansi terminal codes to html color codes.
* @param {string} line
*/
function ansiToHtml(line) {
const ansiToHtmlMap = {
// Map ANSI color codes to HTML color names or hex values
// We don't necessarily handle all the colors but this is enough to start.
"30": "black",
"31": "red",
"32": "green",
"33": "yellow",
"34": "blue",
"35": "magenta",
"36": "cyan",
"37": "white",
"39": "initial"
};
// NOTE(zaphar): Yes this is gross and I should really do a better parser but I'm lazy.
// Replace ANSI codes with HTML span elements styled with the corresponding color
return line.replace(/\x1b\[([0-9;]*)m/g, (match, p1) => {
const parts = p1.split(';'); // ANSI codes can be compounded, e.g., "1;31" for bold red
let styles = '';
for (let part of parts) {
if (ansiToHtmlMap[part]) {
// If the code is a color, map it to a CSS color
styles += `color: ${ansiToHtmlMap[part]};`;
}
// TODO(zaphar): Add more conditions here to handle other styles like bold or underline?
}
return styles ? `<span style="${styles}">` : '</span>';
}) + '</span>';
}
/**
* Get's a css variable's value from the document.
* @param {string} variableName - Name of the variable to get `--var-name`
@ -485,7 +520,7 @@ export class GraphPlot extends HTMLElement {
// element.
const trace = /** @type TableTrace */({
type: "table",
columnwidth: [10, 20, 70],
columnwidth: [15, 20, 70],
headers: {
align: "left",
values: ["Timestamp","Label", "Log"],
@ -517,9 +552,10 @@ export class GraphPlot extends HTMLElement {
for (const line of lines) {
// For streams the timestamps are in nanoseconds
// TODO(zaphar): We should improve the timstamp formatting a bit
dateColumn.push(new Date(line.timestamp / 1000000));
let timestamp = new Date(line.timestamp / 1000000);
dateColumn.push(timestamp.toISOString());
metaColumn.push(labelsName);
logColumn.push(line.line);
logColumn.push(ansiToHtml(line.line));
}
}
trace.cells.values.push(dateColumn);