querysub 0.2.0

package/src/diagnostics/errorLogs/LogViewer.tsx

@@ -0,0 +1,757 @@
+
+import preact from "preact";
+import { qreact } from "../../../src/4-dom/qreact";
+import { SocketFunction } from "socket-function/SocketFunction";
+import { ErrorLogControllerBase } from "../../../src/diagnostics/errorLogs/ErrorLogController";
+import { getSyncedController } from "../../../src/library-components/SyncedController";
+import { getBrowserUrlNode } from "../../../src/-f-node-discovery/NodeDiscovery";
+import { LogBlock, LogBlockInfo, LogClass, LogClassSummary, LogRaw, LogType, getLogClassCategorizer, isClassifierMatch, isUngroupedClass, logBlockFromBuffer, sanitizeMessageForMatch, ungroupedPrefix } from "../../../src/diagnostics/errorLogs/ErrorLogCore";
+import { css } from "typesafecss";
+import { cacheShallowConfigArgEqual } from "socket-function/src/caching";
+import { nextId, sort } from "socket-function/src/misc";
+import { URLParam } from "../../../src/library-components/URLParam";
+import { ATag } from "../../../src/library-components/ATag";
+import { Button } from "../../../src/library-components/Button";
+import { doAtomicWrites } from "../../../src/2-proxy/PathValueProxyWatcher";
+import { formatNumber } from "socket-function/src/formatting/format";
+import { LogTimeSelector, TimelineInfo, getLogFilterRange } from "./LogTimeSelector";
+import { errorColor, fatalColor, filterMachineIdsURL, filterThreadIdsURL, getLogFilterClasses, getLogFilterMachineIds, getLogFilterThreadIds, getPathArrayLax, infoColor, showErrorURL, showFatalURL, showInfoURL, showLiveLogsURL, showOldestLogsFirstURL, showWarningURL, warnColor } from "./logFiltering";
+import { logErrors } from "../../../src/errors";
+import { Querysub } from "../../../src/4-querysub/Querysub";
+import { InputLabel } from "../../../src/library-components/InputLabel";
+import { LogFilterUI } from "./LogFilterUI";
+import { Table } from "../../../src/5-diagnostics/Table";
+import { JSXFormatter, toSpaceCase } from "../../../src/5-diagnostics/GenericFormat";
+import { SuppressUntil, logClassIdURL } from "./LogClassifiers";
+import { measureFnc } from "socket-function/src/profiling/measure";
+import { Icon } from "../../library-components/icons";
+import { assertIsManagementUser, managementPageURL } from "../managementPages";
+import { NodeViewerController } from "../NodeViewer";
+
+export const downloadLogsOnceURL = new URLParam("downloadLogsOnce", false);
+
+export type LogsParsed = {
+    class: LogClass;
+    count: number;
+    firstTime: number;
+    lastTime: number;
+};
+export type LogExample = {
+    message: string;
+    time: number;
+    threadId: string;
+    machineId: string;
+    class: LogClass;
+};
+export type LogProcessedData = {
+    examples: LogExample[];
+    parsed: LogsParsed[];
+    timeline: TimelineInfo[];
+};
+
+export class LogViewer extends qreact.Component {
+    state = {
+        allData: null as LogProcessedData | null,
+        ungroupedData: null as LogProcessedData | null,
+        unsuppressedData: null as LogProcessedData | null,
+
+        allMachineIds: null as Set<string> | null,
+        allThreadIds: null as Set<string> | null,
+        downloading: false,
+    };
+    blockBuffers: Buffer[] = [];
+
+    componentDidMount(): void {
+        if (downloadLogsOnceURL.value) {
+            downloadLogsOnceURL.value = false;
+            logErrors(this.download());
+        }
+    }
+
+    @measureFnc
+    async download() {
+        Querysub.localCommit(() => {
+            this.state.downloading = true;
+        });
+        try {
+
+            const logController = LogViewerController.nodes[getBrowserUrlNode()];
+
+            let timeFilter = getLogFilterRange();
+
+            let blockInfos = await logController.scanBlocks();
+
+            // Only blocks in the time range
+            blockInfos = blockInfos.filter(info =>
+                !(info.endTime <= timeFilter.startTime || info.startTime >= timeFilter.endTime)
+            );
+            // NOTE: We COULD filter blocks to only blocks which contain the types we want, but...
+            //  1) We might have reclassified the examples
+            //  2) Blocks are fairly small (for now), so downloading them isn't that big of a deal.
+
+            let blockBuffers = await logController.readBlocks({ files: blockInfos.map(info => info.fileName) });
+
+            if (showLiveLogsURL.value) {
+                let liveBlocks = await logController.readAllLiveBlocks();
+                blockBuffers.push(...liveBlocks);
+            }
+            this.blockBuffers = blockBuffers;
+            await this.parse();
+        } finally {
+            Querysub.localCommit(() => {
+                this.state.downloading = false;
+            });
+        }
+    }
+    @measureFnc
+    async parse() {
+        let timeFilter = getLogFilterRange();
+
+        let byClass = new Map<string, LogsParsed>();
+        function getByClass(classObj: LogClass) {
+            let obj = byClass.get(classObj.id);
+            if (!obj) {
+                obj = { class: classObj, count: 0, firstTime: Number.MAX_SAFE_INTEGER, lastTime: 0, };
+                byClass.set(classObj.id, obj);
+            }
+            return obj;
+        }
+        let examples: LogExample[] = [];
+        let timeline: (TimelineInfo & { class: LogClass })[] = [];
+
+        let byClassUnsuppressed = new Map<string, LogsParsed>();
+        function getByClassUnsuppressed(classObj: LogClass) {
+            let obj = byClassUnsuppressed.get(classObj.id);
+            if (!obj) {
+                obj = { class: classObj, count: 0, firstTime: Number.MAX_SAFE_INTEGER, lastTime: 0, };
+                byClassUnsuppressed.set(classObj.id, obj);
+            }
+            return obj;
+        }
+        let examplesUnsuppressed: LogExample[] = [];
+        let timelineUnsuppressed: (TimelineInfo & { class: LogClass })[] = [];
+
+        const blockBuffers = this.blockBuffers;
+        const logController = LogViewerController.nodes[getBrowserUrlNode()];
+
+        let classObjs = await logController.getClasses();
+        let classObjLookup = new Map(classObjs.map(obj => [obj.id, obj] as const));
+
+        let classIds = new Set(getLogFilterClasses());
+        let machineIds = new Set(getLogFilterMachineIds());
+        let threadIds = new Set(getLogFilterThreadIds());
+
+        let showFatal = showFatalURL.value;
+        let showError = showErrorURL.value;
+        let showWarning = showWarningURL.value;
+        let showInfo = showInfoURL.value;
+        function isClassInclude(classObj: LogClass) {
+            if (classIds.size > 0) {
+                if (!classIds.has(classObj.id)) {
+                    return false;
+                }
+            }
+            if (!showFatal && classObj.type === "fatal") return false;
+            if (!showError && classObj.type === "error") return false;
+            if (!showWarning && classObj.type === "warn") return false;
+            if (!showInfo && classObj.type === "info") return false;
+            return true;
+        }
+
+        let allMachineIds = new Set<string>();
+        let allThreadIds = new Set<string>();
+
+        let blocks: LogBlock[] = [];
+        for (let buffer of blockBuffers) {
+            let block = await logBlockFromBuffer(buffer);
+            allMachineIds.add(block.machineId);
+            allThreadIds.add(block.threadId);
+
+            if (machineIds.size > 0 && !machineIds.has(block.machineId)) {
+                continue;
+            }
+            if (threadIds.size > 0 && !threadIds.has(block.threadId)) {
+                continue;
+            }
+
+            blocks.push(block);
+        }
+
+        let classifier = getLogClassCategorizer(classObjs);
+
+        for (let block of blocks) {
+            // Only look at classes, ignore summary data (except for threadId/machineId)
+            const threadId = block.threadId;
+            const machineId = block.machineId;
+            function addToClass(classSummary: LogsParsed, config: {
+                count: number;
+                time: number;
+            }) {
+                classSummary.count += config.count;
+                classSummary.firstTime = Math.min(classSummary.firstTime, config.time);
+                classSummary.lastTime = Math.max(classSummary.lastTime, config.time);
+            }
+
+            function addRaw(classObj: LogClass, log: LogRaw) {
+                if (!isClassInclude(classObj)) return;
+                let example: LogExample = {
+                    class: classObj,
+                    message: log.message,
+                    threadId,
+                    machineId,
+                    time: log.time,
+                };
+                let timelineObj: TimelineInfo & { class: LogClass } = {
+                    count: 1,
+                    startTime: log.time,
+                    endTime: log.time,
+                    fatalCount: classObj.type === "fatal" ? 1 : 0,
+                    errorCount: classObj.type === "error" ? 1 : 0,
+                    warnCount: classObj.type === "warn" ? 1 : 0,
+                    infoCount: classObj.type === "info" ? 1 : 0,
+                    class: classObj,
+                };
+                examples.push(example);
+                timeline.push(timelineObj);
+                addToClass(getByClass(classObj), { count: 1, time: example.time });
+
+                if (example.time > classObj.suppressUntil) {
+                    examplesUnsuppressed.push(example);
+                    timelineUnsuppressed.push(timelineObj);
+                    addToClass(getByClassUnsuppressed(classObj), { count: 1, time: example.time });
+                }
+            }
+            function addClassSummary(classObj: LogClass, summary: LogClassSummary) {
+                if (!isClassInclude(classObj)) return;
+                let timelineObj: TimelineInfo & { class: LogClass } = {
+                    count: summary.count,
+                    startTime: summary.firstTime,
+                    endTime: summary.lastTime,
+                    fatalCount: classObj.type === "fatal" ? summary.count : 0,
+                    errorCount: classObj.type === "error" ? summary.count : 0,
+                    warnCount: classObj.type === "warn" ? summary.count : 0,
+                    infoCount: classObj.type === "info" ? summary.count : 0,
+                    class: classObj,
+                };
+                timeline.push(timelineObj);
+                addToClass(getByClass(classObj), { count: summary.count, time: summary.firstTime });
+                addToClass(getByClass(classObj), { count: 0, time: summary.lastTime });
+                // NOTE: If the user suppressed to the current moment, pending blocks will not be caught,
+                //  as their last time will keep increasing. BUT, users should suppress for at least a day,
+                //  so this shouldn't be an issue.
+                if (summary.lastTime > classObj.suppressUntil) {
+                    timelineUnsuppressed.push(timelineObj);
+                    addToClass(getByClassUnsuppressed(classObj), { count: summary.count, time: summary.firstTime });
+                    addToClass(getByClassUnsuppressed(classObj), { count: 0, time: summary.lastTime });
+                }
+            }
+
+            for (let classSummary of Object.values(block.classes)) {
+                let classObj: LogClass = classObjLookup.get(classSummary.logClassId) || {
+                    id: ungroupedPrefix + classSummary.logClassType,
+                    title: "missing Class",
+                    description: "missing class",
+                    createTime: 0,
+                    type: "fatal",
+                    match: [],
+                    suppressUntil: 0
+                };
+                // ALWAYS reclassify examples
+                {
+                    classSummary = { ...classSummary };
+                    for (let example of classSummary.examples) {
+                        if (!(timeFilter.startTime <= example.time && example.time < timeFilter.endTime)) {
+                            continue;
+                        }
+                        let newClass = classifier(example, classObj.type);
+                        addRaw(newClass, example);
+                    }
+
+                    classSummary.count -= classSummary.examples.length;
+                    if (classSummary.count <= 0) continue;
+                }
+                addClassSummary(classObj, classSummary);
+            }
+        }
+
+        let classList = Array.from(byClass.values());
+        let classListUnsuppressed = Array.from(byClassUnsuppressed.values());
+        if (showOldestLogsFirstURL.value) {
+            sort(classList, x => x.count);
+            sort(examples, x => x.time);
+            sort(timeline, x => x.startTime);
+
+            sort(classListUnsuppressed, x => x.firstTime);
+            sort(examplesUnsuppressed, x => x.time);
+            sort(timelineUnsuppressed, x => x.startTime);
+        } else {
+            sort(classList, x => -x.count);
+            sort(examples, x => -x.time);
+            sort(timeline, x => -x.startTime);
+
+            sort(classListUnsuppressed, x => -x.firstTime);
+            sort(examplesUnsuppressed, x => -x.time);
+            sort(timelineUnsuppressed, x => -x.startTime);
+        }
+
+
+        Querysub.localCommit(() => {
+            doAtomicWrites(() => {
+                this.state.allMachineIds = allMachineIds;
+                this.state.allThreadIds = allThreadIds;
+
+                this.state.allData = {
+                    examples,
+                    parsed: classList,
+                    timeline,
+                };
+                this.state.ungroupedData = {
+                    examples: examples.filter(a => isUngroupedClass(a.class)),
+                    parsed: classList.filter(a => isUngroupedClass(a.class)),
+                    timeline: timeline.filter(a => isUngroupedClass(a.class)),
+                };
+                this.state.unsuppressedData = {
+                    examples: examplesUnsuppressed.filter(a => !isUngroupedClass(a.class)),
+                    parsed: classListUnsuppressed.filter(a => !isUngroupedClass(a.class)),
+                    timeline: timelineUnsuppressed.filter(a => !isUngroupedClass(a.class)),
+                };
+            });
+        });
+    }
+    render() {
+        let blockInfos = LogViewerSynced(getBrowserUrlNode()).scanBlocks();
+        blockInfos = filterBlocks({
+            blockInfos,
+            machineIdsURL: filterMachineIdsURL.value,
+            threadIdsURL: filterThreadIdsURL.value,
+        });
+
+        const reparse = () => this.parse();
+
+        function divBorder(
+            outer: string,
+            borderColor: string,
+            content: preact.ComponentChild
+        ) {
+            let border = 10;
+            const fullMinusBorder = `calc(100% - ${border}px)` as const;
+            let createBorder = () => <div
+                class={
+                    css.fillBoth
+                        .backgroundImage(`
+                            repeating-linear-gradient(
+                                -45deg,
+                                ${borderColor},
+                                ${borderColor} 12px,
+                                transparent 10px,
+                                transparent 23px
+                            )
+                        `)
+                }
+            />;
+            return (
+                <div
+                    class={css.pad2(border).relative + outer}
+                >
+                    <div class={css.absolute.pos(0, 0).size("100%", border)}>
+                        {createBorder()}
+                    </div>
+                    <div class={css.absolute.pos(0, border).size(border, fullMinusBorder)}>
+                        {createBorder()}
+                    </div>
+                    <div class={css.absolute.pos(border, fullMinusBorder).size(fullMinusBorder, border)}>
+                        {createBorder()}
+                    </div>
+                    <div class={css.absolute.pos(fullMinusBorder, border).size(border, fullMinusBorder)}>
+                        {createBorder()}
+                    </div>
+                    <div class={css.pad2(5)}>
+                        {content}
+                    </div>
+                </div>
+            );
+        }
+
+        return (
+            <div class={css.pad2(10).vbox(10).fillWidth.center}>
+                <div class={css.fillWidth.hbox(10)}>
+                    <div class={css.marginAuto} />
+
+                    <h1>File Overview ({blockInfos?.length} files)</h1>
+
+                    <div class={css.marginAuto} />
+                </div>
+                <LogTimeSelector infos={blockInfos} hotkeys />
+
+                <div class={css.fillWidth.hbox(10).alignItems("start")}>
+                    <Button
+                        flavor="large"
+                        class={css.fontSize(40, "important").flexShrink0}
+                        showHotkeys
+                        hotkeys={["Enter", "Space"]}
+                        onClick={async () => this.download()}
+                    >
+                        Download
+                    </Button>
+                    <LogFilterUI
+                        allMachineIds={this.state.allMachineIds}
+                        allThreadIds={this.state.allThreadIds}
+                    />
+                </div>
+
+                <style>
+                    {`
+                        .loadingSpinner {
+                            animation: spin 3s linear infinite;
+                        }
+                        @keyframes spin {
+                            0% { transform: rotate(0deg); }
+                            100% { transform: rotate(360deg); }
+                        }
+                    `}
+                </style>
+                {this.state.downloading &&
+                    <div class={css.fillWidth.center.paddingTop(200) + " loadingSpinner"}>
+                        {Icon.loadingSymbol({ size: 300 })}
+                    </div>
+                }
+
+                {!!this.state.ungroupedData?.examples.length && (
+                    divBorder(
+                        css.hsl(-5, 40, 60),
+                        "hsl(-5, 60%, 50%)",
+                        <LogSection
+                            key="ungroupedData"
+                            reparse={reparse}
+                            title="Add accurate and specific classifiers for these immediately, don't worry about fixing them yet"
+                            data={this.state.ungroupedData}
+                            showExamplesByDefault
+                        />
+                    )
+                )}
+                {!!this.state.unsuppressedData?.examples.length && (
+                    divBorder(
+                        css.hsl(40, 40, 60),
+                        "hsl(40, 60%, 50%)",
+                        <LogSection
+                            key="unsuppressedData"
+                            reparse={reparse}
+                            title="Create tickets for these logs, and then suppress them"
+                            addSuppressColumns
+                            data={this.state.unsuppressedData}
+                        />
+                    )
+                )}
+                {this.state.allData && (
+                    divBorder(
+                        //css.hsl(210, 40, 60),
+                        "",
+                        "hsl(210, 60%, 50%)",
+                        <LogSection
+                            key="allData"
+                            reparse={reparse}
+                            title="All Data"
+                            data={this.state.allData}
+                        />
+                    )
+                )}
+            </div>
+        );
+    }
+}
+
+const filterBlocks = cacheShallowConfigArgEqual((
+    config: {
+        blockInfos: LogBlockInfo[] | undefined;
+        machineIdsURL: string;
+        threadIdsURL: string;
+    }
+): LogBlockInfo[] => {
+    const { blockInfos, machineIdsURL, threadIdsURL } = config;
+    let machineIds = new Set(getPathArrayLax(machineIdsURL));
+    let threadIds = new Set(getPathArrayLax(threadIdsURL));
+
+    return blockInfos?.filter(info =>
+        (!machineIds.size || machineIds.has(info.machineId)) &&
+        (!threadIds.size || threadIds.has(info.threadId))
+    ) || [];
+});
+
+let lastClassifierUpdated: LogClass | undefined;
+class LogSection extends qreact.Component<{
+    title: string;
+    data: LogProcessedData;
+    showExamplesByDefault?: boolean;
+    addSuppressColumns?: boolean;
+    reparse: () => void;
+}> {
+    state = {
+        previewFilter: "",
+        summaryExpanded: { value: true },
+        examplesExpanded: { value: !!this.props.showExamplesByDefault },
+    };
+    render() {
+        let { title, data } = this.props;
+        let previewFilter = this.state.previewFilter;
+        if (previewFilter) {
+            data = { ...data };
+            let tempClassifier: LogClass = {
+                id: "",
+                title: "",
+                createTime: 0,
+                description: "",
+                match: [{ type: "includes", value: previewFilter }],
+                suppressUntil: 0,
+                type: "info",
+            };
+            data.examples = data.examples.filter(example =>
+                isClassifierMatch(tempClassifier, example)
+            );
+        }
+        let { reparse } = this.props;
+        const createClassifier = async (type: LogType) => {
+            let previewFilter = this.state.previewFilter;
+            // Wait for the blur to finish before resetting previewFilter
+            Querysub.onCommitFinished(() => {
+                setImmediate(() => {
+                    Querysub.localCommit(() => {
+                        this.state.previewFilter = "";
+                    });
+                });
+            });
+            let newClass: LogClass = {
+                id: nextId(),
+                title: toSpaceCase(previewFilter),
+                createTime: Date.now(),
+                description: previewFilter,
+                match: [{ type: "includes", value: previewFilter }],
+                suppressUntil: 0,
+                type,
+            };
+            lastClassifierUpdated = newClass;
+            await LogViewerController.nodes[getBrowserUrlNode()].updateClass(newClass);
+            await reparse();
+        };
+        const classFormatter: JSXFormatter<LogClass> = (x) => {
+            return (
+                <div class={css.hbox(4).wrap}>
+                    {this.props.addSuppressColumns && (
+                        <SuppressUntil
+                            type={x.type}
+                            time={x.suppressUntil}
+                            updateClass={async newValue => {
+                                let newClass = { ...x, ...newValue };
+                                lastClassifierUpdated = newClass;
+                                await LogViewerController.nodes[getBrowserUrlNode()].updateClass(newClass);
+                                reparse();
+                            }}
+                        />
+                    )}
+                    <ATag
+                        target="_blank"
+                        class={css.button.textDecoration("none", "important").hbox(0)}
+                        values={[
+                            { param: logClassIdURL, value: x.id },
+                            { param: managementPageURL, value: "LogClassifiers" },
+                        ]}
+                    >
+                        (Edit {formatTypeColor(x.type, x.title)})
+                    </ATag>
+                </div>
+            );
+        };
+        let totalCount = data.parsed.reduce((sum, x) => sum + x.count, 0);
+        return (
+            <div class={css.fillWidth.vbox(10).maxHeight("80vh")}>
+                <h1>{title}</h1>
+                <LogTimeSelector infos={data.timeline} />
+                <SideCollapsible
+                    expanded={this.state.summaryExpanded}
+                    collapsedTitle={`Summary (${formatNumber(data.parsed.length)})`}
+                >
+                    <Table
+                        columns={{
+                            class: { formatter: classFormatter },
+                            count: {
+                                formatter: (x) => {
+                                    return (
+                                        <div class={css.relative}>
+                                            <div class={
+                                                css.absolute.pos(0, 0).size(`${x / totalCount * 100}%`, "100%")
+                                                    .hsla(0, 0, 100, 0.75)
+                                            } />
+                                            <span class={css.relative}>{formatNumber(x)}</span>
+                                        </div>
+                                    );
+                                }
+                            },
+                            firstTime: {},
+                            lastTime: {},
+                        }}
+                        rows={data.parsed}
+                    />
+                </SideCollapsible>
+                {lastClassifierUpdated &&
+                    <ATag
+                        // NOTE: Not only is this nice, but... without it we would need
+                        //  to explicitly invalidate our cache, which is annoying to do with ATag.
+                        target="_blank"
+                        values={[
+                            { param: logClassIdURL, value: lastClassifierUpdated.id },
+                            { param: managementPageURL, value: "LogClassifiers" },
+                        ]}
+                        class={css.hbox(4).marginLeft(10).hsla(0, 0, 100, 0.5).pad2(4, 1)}
+                    >
+                        View last updated classifier: {formatTypeColor(lastClassifierUpdated.type, lastClassifierUpdated.title)}
+                    </ATag>
+                }
+                {/* NOTE: We show classifiers for all views, as you might want to reclassify even classified data,
+                    by using a higher priority. */}
+                {this.state.examplesExpanded.value && <div class={css.hbox(10)}>
+                    <InputLabel
+                        label="Create Classifier"
+                        value={previewFilter}
+                        hot
+                        onChangeValue={(value) => {
+                            this.state.previewFilter = value;
+                        }}
+                        onKeyDown={async e => {
+                            if (e.key === "Enter") {
+                                await createClassifier(data.examples[0]?.class.type || "error");
+                            }
+                        }}
+                    />
+                    {previewFilter && (
+                        <div class={css.hbox(4).hsla(0, 0, 100, 0.5).pad2(4, 1)}>
+                            <span>Matches</span>
+                            <span>
+                                {formatNumber(data.examples.length)} / {formatNumber(this.props.data.examples.length)}
+                            </span>
+                            <Button class={css.hbox(6).hsl(fatalColor.h, fatalColor.s, fatalColor.l)} onClick={() => createClassifier("fatal")}>
+                                Fatal
+                            </Button>
+                            <Button class={css.hbox(6).hsl(errorColor.h, errorColor.s, errorColor.l)} onClick={() => createClassifier("error")}>
+                                Error
+                            </Button>
+                            <Button class={css.hbox(6).hsl(warnColor.h, warnColor.s, warnColor.l)} onClick={() => createClassifier("warn")}>
+                                Warning
+                            </Button>
+                            <Button class={css.hbox(6).hsl(infoColor.h, infoColor.s, infoColor.l)} onClick={() => createClassifier("info")}>
+                                Info
+                            </Button>
+                        </div>
+                    )}
+                </div>}
+
+                <SideCollapsible
+                    expanded={this.state.examplesExpanded}
+                    collapsedTitle={`Examples (${formatNumber(data.examples.length)})`}
+                    defaultCollapsed={!this.props.showExamplesByDefault}
+                >
+                    <Table
+                        columns={{
+                            class: {
+                                formatter: classFormatter,
+                            },
+                            time: {},
+                            machineId: {},
+                            threadId: {},
+                            message: {
+                                formatter: (x) => {
+                                    if (!previewFilter) return x;
+                                    let matchIndex = sanitizeMessageForMatch(x).indexOf(previewFilter.toLowerCase());
+                                    if (matchIndex === -1) return x;
+                                    let before = x.slice(0, matchIndex);
+                                    let match = x.slice(matchIndex, matchIndex + previewFilter.length);
+                                    let after = x.slice(matchIndex + previewFilter.length);
+                                    return (
+                                        <div>
+                                            {before}
+                                            <span class={css.hsl(60, 75, 50)}>{match}</span>
+                                            {after}
+                                        </div>
+                                    );
+                                },
+                            },
+                        }}
+                        rows={data.examples}
+                    />
+                </SideCollapsible>
+            </div>
+        );
+    }
+}
+class SideCollapsible extends qreact.Component<{
+    defaultCollapsed?: boolean;
+    collapsedTitle?: string;
+    expanded: { value: boolean }
+}> {
+    render() {
+        let expanded = this.props.expanded.value;
+        return (
+            <div class={
+                css.fillWidth.hbox(10).alignItems("start").overflowAuto
+                //+ css.minHeight(expanded ? 100 : 50)
+                + (expanded && css.minHeight(100).maxHeight("60%") || css.minHeight(50))
+            }>
+                <Button
+                    square
+                    flavor="noui"
+                    onClick={() => this.props.expanded.value = !expanded}
+                    class={
+                        (expanded && css.hsla(0, 0, 100, 0.5) || css.hsla(0, 0, 100, 0.25))
+                        + css.background(expanded ? "hsla(0, 0%, 100%, 0.25)" : "hsla(0, 0%, 100%, 0.5)", "hover")
+                        + css.button.borderWidth(0).flex
+                        + css.outline("none", "important")
+                    }
+                >
+                    {(expanded && Icon.chevronDown || Icon.chevronRight)({
+                        size: 30,
+                        style: {
+                            position: "relative",
+                            top: expanded ? -3 : 0,
+                            left: expanded ? 0 : 4,
+                        }
+                    })}
+                    {!expanded && <div class={css.fontSize(20).pad2(8, 2)}>{this.props.collapsedTitle}</div> || ""}
+                </Button>
+
+                {expanded && this.props.children}
+            </div>
+        );
+    }
+}
+
+export function formatTypeColor(type: LogType, contents: preact.ComponentChild) {
+    let color = (
+        (type === "fatal" && fatalColor) ||
+        (type === "error" && errorColor) ||
+        (type === "warn" && warnColor) ||
+        (type === "info" && infoColor) ||
+        fatalColor
+    );
+    return (
+        <div class={css.pad2(4, 1).color("white").hsl(color.h, color.s, color.l)}>
+            {contents}
+        </div>
+    );
+}
+
+export const LogViewerController = SocketFunction.register(
+    "LogViewerController-257d81a9-a170-441e-9ff3-7d9d86b6e80a",
+    new ErrorLogControllerBase(),
+    () => ({
+        scanBlocks: {},
+        readBlocks: {},
+        readAllLiveBlocks: {},
+        getClasses: {},
+        updateClass: {},
+        onClassesUpdated: {},
+    }),
+    () => ({
+        hooks: [assertIsManagementUser],
+    }),
+);
+
+export const LogViewerSynced = getSyncedController(LogViewerController);
+const NodeViewerSynced = getSyncedController(NodeViewerController);