mystiq/hydrogen-web
Archived
4
1
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity

finish log viewer details panel

Browse source
This commit is contained in:
Bruno Windels 2021-02-18 11:08:43 +01:00
parent 6b527cef65
commit 17c2fad4b4
2 changed files with 29 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
scripts/logviewer/index.html
View file

@ -27,12 +27,17 @@
aside {
grid-area: details;
padding: 8px;
}
aside h3 {
word-wrap: anywhere;
}
aside p {
margin: 2px 0;
}
aside .values li span {
word-wrap: ;
word-wrap: anywhere;
@ -41,17 +46,26 @@
aside .values {
list-style: none;
padding: 0;
border: 1px solid lightgray;
}
aside .values span {
width: 50%;
aside .values span.key {
width: 30%;
display: block;
}
aside .values span.value {
width: 70%;
display: block;
padding-left: 10px;
}
aside .values li {
display: flex;
border: ;
border-bottom: 1px solid lightgray;
}
aside .values li:not(:first-child) {
border-top: 1px solid lightgray;
}
nav {

14
scripts/logviewer/main.js
View file

@ -6,7 +6,9 @@ const main = document.querySelector("main");
let selectedItemNode;
let rootItem;
document.querySelector("main").addEventListener("click", event => {
const logLevels = [undefined, "All", "Debug", "Detail", "Info", "Warn", "Error", "Fatal", "Off"];
main.addEventListener("click", event => {
if (selectedItemNode) {
selectedItemNode.classList.remove("selected");
selectedItemNode = null;
@ -30,12 +32,18 @@ document.querySelector("main").addEventListener("click", event => {
});
function showItemDetails(item, parent) {
const parentOffset = itemStart(parent) ? `${itemStart(item) - itemStart(parent)}ms` : "none";
const aside = t.aside([
t.h3(itemCaption(item)),
t.p([t.strong("Parent offset: "), parentOffset]),
t.p([t.strong("Log level: "), logLevels[itemLevel(item)]]),
t.p([t.strong("Error: "), itemError(item) ? `${itemError(item).name} ${itemError(item).stack}` : "none"]),
t.p([t.strong("Child count: "), itemChildren(item) ? `${itemChildren(item).length}` : "none"]),
t.p(t.strong("Values:")),
t.ul({class: "values"}, Object.entries(itemValues(item)).map(([key, value]) => {
return t.li([
t.span(normalizeValueKey(key)),
t.span(value)
t.span({className: "key"}, normalizeValueKey(key)),
t.span({className: "value"}, value)
]);
}))
]);