ui: Show labels for the log line.

This commit is contained in:
Jeremy Wall 2024-03-05 20:11:01 -05:00
parent a7a6c99099
commit 01cd54afa4

View File

@ -36,6 +36,7 @@
* @property {{color: string}=} fill * @property {{color: string}=} fill
* @property {{width: number, color: string}=} line * @property {{width: number, color: string}=} line
* @property {{family: string, size: number, color: string }=} font * @property {{family: string, size: number, color: string }=} font
* @property {Array<number>=} columnwidth
*/ */
/** /**
@ -480,13 +481,14 @@ export class GraphPlot extends HTMLElement {
traces.push(trace); traces.push(trace);
} }
} else if (subplot.Stream) { } else if (subplot.Stream) {
// TODO(zaphar): subplot.Stream // log lines!!! // TODO(jwall): It's possible that this should actually be a separate custom
// element.
const trace = /** @type TableTrace */({ const trace = /** @type TableTrace */({
type: "table", type: "table",
// TODO(zaphar): Column width? columnwidth: [10, 20, 70],
headers: { headers: {
align: "left", align: "left",
values: ["Timestamp", "Log"], values: ["Timestamp","Label", "Log"],
fill: { color: layout.xaxis.gridColor } fill: { color: layout.xaxis.gridColor }
}, },
cells: { cells: {
@ -496,25 +498,32 @@ export class GraphPlot extends HTMLElement {
}, },
}); });
const dateColumn = []; const dateColumn = [];
const metaColumn = [];
const logColumn = []; const logColumn = [];
loopStream: for (const pair of subplot.Stream) { loopStream: for (const pair of subplot.Stream) {
const labels = pair[0]; const labels = pair[0];
var labelList = [];
for (var label in labels) { for (var label in labels) {
var show = this.#filteredLabelSets[label]; var show = this.#filteredLabelSets[label];
if (show && !show.includes(labels[label])) { if (show && !show.includes(labels[label])) {
continue loopStream; continue loopStream;
} }
labelList.push(`${label}:${labels[label]}`);
} }
const labelsName = labelList.join("<br>");
const lines = pair[1]; const lines = pair[1];
// TODO(jwall): Headers // TODO(jwall): Headers
for (const line of lines) { for (const line of lines) {
// For streams the timestamps are in nanoseconds // For streams the timestamps are in nanoseconds
// TODO(zaphar): We should improve the timstamp formatting a bit
dateColumn.push(new Date(line.timestamp / 1000000)); dateColumn.push(new Date(line.timestamp / 1000000));
metaColumn.push(labelsName);
logColumn.push(line.line); logColumn.push(line.line);
} }
} }
trace.cells.values.push(dateColumn); trace.cells.values.push(dateColumn);
trace.cells.values.push(metaColumn);
trace.cells.values.push(logColumn); trace.cells.values.push(logColumn);
traces.push(trace); traces.push(trace);
} }