From 6b527cef6539a78113ae9c047266b5e48f045afd Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Thu, 18 Feb 2021 10:48:58 +0100 Subject: [PATCH] basic log viewer --- scripts/logviewer/file.js | 36 +++++++++++ scripts/logviewer/html.js | 110 ++++++++++++++++++++++++++++++++++ scripts/logviewer/index.html | 113 +++++++++++++++++++++++++++++++++++ scripts/logviewer/main.js | 109 +++++++++++++++++++++++++++++++++ 4 files changed, 368 insertions(+) create mode 100644 scripts/logviewer/file.js create mode 100644 scripts/logviewer/html.js create mode 100644 scripts/logviewer/index.html create mode 100644 scripts/logviewer/main.js diff --git a/scripts/logviewer/file.js b/scripts/logviewer/file.js new file mode 100644 index 00000000..11f4ef5a --- /dev/null +++ b/scripts/logviewer/file.js @@ -0,0 +1,36 @@ + +export function openFile(mimeType = null) { + const input = document.createElement("input"); + input.setAttribute("type", "file"); + input.className = "hidden"; + if (mimeType) { + input.setAttribute("accept", mimeType); + } + const promise = new Promise((resolve, reject) => { + const checkFile = () => { + input.removeEventListener("change", checkFile, true); + const file = input.files[0]; + document.body.removeChild(input); + if (file) { + resolve(file); + } else { + reject(new Error("no file picked")); + } + } + input.addEventListener("change", checkFile, true); + }); + // IE11 needs the input to be attached to the document + document.body.appendChild(input); + input.click(); + return promise; +} + +export function readFileAsText(file) { + const reader = new FileReader(); + const promise = new Promise((resolve, reject) => { + reader.addEventListener("load", evt => resolve(evt.target.result)); + reader.addEventListener("error", evt => reject(evt.target.error)); + }); + reader.readAsText(file); + return promise; +} \ No newline at end of file diff --git a/scripts/logviewer/html.js b/scripts/logviewer/html.js new file mode 100644 index 00000000..a965a6ee --- /dev/null +++ b/scripts/logviewer/html.js @@ -0,0 +1,110 @@ +/* +Copyright 2020 Bruno Windels + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +// DOM helper functions + +export function isChildren(children) { + // children should be an not-object (that's the attributes), or a domnode, or an array + return typeof children !== "object" || !!children.nodeType || Array.isArray(children); +} + +export function classNames(obj, value) { + return Object.entries(obj).reduce((cn, [name, enabled]) => { + if (typeof enabled === "function") { + enabled = enabled(value); + } + if (enabled) { + return cn + (cn.length ? " " : "") + name; + } else { + return cn; + } + }, ""); +} + +export function setAttribute(el, name, value) { + if (name === "className") { + name = "class"; + } + if (value === false) { + el.removeAttribute(name); + } else { + if (value === true) { + value = name; + } + el.setAttribute(name, value); + } +} + +export function el(elementName, attributes, children) { + return elNS(HTML_NS, elementName, attributes, children); +} + +export function elNS(ns, elementName, attributes, children) { + if (attributes && isChildren(attributes)) { + children = attributes; + attributes = null; + } + + const e = document.createElementNS(ns, elementName); + + if (attributes) { + for (let [name, value] of Object.entries(attributes)) { + if (name === "className" && typeof value === "object" && value !== null) { + value = classNames(value); + } + setAttribute(e, name, value); + } + } + + if (children) { + if (!Array.isArray(children)) { + children = [children]; + } + for (let c of children) { + if (!c.nodeType) { + c = text(c); + } + e.appendChild(c); + } + } + return e; +} + +export function text(str) { + return document.createTextNode(str); +} + +export const HTML_NS = "http://www.w3.org/1999/xhtml"; +export const SVG_NS = "http://www.w3.org/2000/svg"; + +export const TAG_NAMES = { + [HTML_NS]: [ + "br", "a", "ol", "ul", "li", "div", "h1", "h2", "h3", "h4", "h5", "h6", + "p", "strong", "em", "span", "img", "section", "main", "article", "aside", + "pre", "button", "time", "input", "textarea", "label", "form", "progress", "output"], + [SVG_NS]: ["svg", "circle"] +}; + +export const tag = {}; + + +for (const [ns, tags] of Object.entries(TAG_NAMES)) { + for (const tagName of tags) { + tag[tagName] = function(attributes, children) { + return elNS(ns, tagName, attributes, children); + } + } +} diff --git a/scripts/logviewer/index.html b/scripts/logviewer/index.html new file mode 100644 index 00000000..dbf54d70 --- /dev/null +++ b/scripts/logviewer/index.html @@ -0,0 +1,113 @@ + + + + + + + + +
+ + + + diff --git a/scripts/logviewer/main.js b/scripts/logviewer/main.js new file mode 100644 index 00000000..b2b8a399 --- /dev/null +++ b/scripts/logviewer/main.js @@ -0,0 +1,109 @@ +import {tag as t} from "./html.js"; +import {openFile, readFileAsText} from "./file.js"; + +const main = document.querySelector("main"); + +let selectedItemNode; +let rootItem; + +document.querySelector("main").addEventListener("click", event => { + if (selectedItemNode) { + selectedItemNode.classList.remove("selected"); + selectedItemNode = null; + } + const itemNode = event.target.closest(".item"); + if (itemNode) { + selectedItemNode = itemNode; + selectedItemNode.classList.add("selected"); + const path = selectedItemNode.dataset.path; + let item = rootItem; + let parent; + if (path.length) { + const indices = path.split("/").map(i => parseInt(i, 10)); + for(const i of indices) { + parent = item; + item = itemChildren(item)[i]; + } + } + showItemDetails(item, parent); + } +}); + +function showItemDetails(item, parent) { + const aside = t.aside([ + t.h3(itemCaption(item)), + t.ul({class: "values"}, Object.entries(itemValues(item)).map(([key, value]) => { + return t.li([ + t.span(normalizeValueKey(key)), + t.span(value) + ]); + })) + ]); + document.querySelector("aside").replaceWith(aside); +} + +document.getElementById("openFile").addEventListener("click", loadFile); + +async function loadFile() { + const file = await openFile(); + const json = await readFileAsText(file); + const logs = JSON.parse(json); + rootItem = {c: logs.items}; + const fragment = logs.items.reduce((fragment, item, i, items) => { + const prevItem = i === 0 ? null : items[i - 1]; + fragment.appendChild(t.section([ + t.h2(prevItem ? `+ ${itemStart(item) - itemEnd(prevItem)} ms` : new Date(itemStart(item)).toString()), + t.div({className: "timeline"}, t.ol(itemToNode(item, [i]))) + ])); + return fragment; + }, document.createDocumentFragment()); + main.replaceChildren(fragment); +} + +function itemChildren(item) { return item.c; } +function itemStart(item) { return item.s; } +function itemEnd(item) { return item.s + item.d; } +function itemDuration(item) { return item.d; } +function itemValues(item) { return item.v; } +function itemLevel(item) { return item.l; } +function itemLabel(item) { return item.v?.l; } +function itemType(item) { return item.v?.t; } +function itemError(item) { return item.e; } +function itemCaption(item) { + if (itemType(item) === "network") { + return `${itemValues(item)?.method} ${itemValues(item)?.url}`; + } else if (itemLabel(item) && itemValues(item)?.id) { + return `${itemLabel(item)} ${itemValues(item).id}`; + } else { + return itemLabel(item) || itemType(item); + } +} +function normalizeValueKey(key) { + switch (key) { + case "t": return "type"; + case "l": return "label"; + default: return key; + } +} + +// returns the node and the total range (recursively) occupied by the node +function itemToNode(item, path) { + const className = { + item: true, + error: itemError(item), + [`type-${itemType(item)}`]: !!itemType(item), + [`level-${itemLevel(item)}`]: true, + }; + const li = t.li([ + t.div({className, "data-path": path.join("/")}, [ + t.span({class: "caption"}, itemCaption(item)), + t.span({class: "duration"}, `(${itemDuration(item)}ms)`), + ]) + ]); + if (itemChildren(item) && itemChildren(item).length) { + li.appendChild(t.ol(itemChildren(item).map((item, i) => { + return itemToNode(item, path.concat(i)); + }))); + } + return li; +}