querysub 0.356.0 → 0.358.0

package/src/diagnostics/logs/IndexedLogs/LogViewer3.tsx

@@ -0,0 +1,901 @@
+module.hotreload = true;
+import { qreact } from "../../../4-dom/qreact";
+import { css } from "../../../4-dom/css";
+import { t } from "../../../2-proxy/schema2";
+import { Button } from "../../../library-components/Button";
+import { InputLabel, InputLabelURL } from "../../../library-components/InputLabel";
+import { getLoggers2, getLoggers2Async, LogDatum } from "../diskLogger";
+import { list, timeInDay, keyByArray, sort, throttleFunction } from "socket-function/src/misc";
+import { formatDateTime, formatDateTimeDetailed, formatNumber, formatTime, formatPercent } from "socket-function/src/formatting/format";
+import { IndexedLogs, TimeFilePathWithSize } from "./IndexedLogs";
+import { Querysub } from "../../../4-querysub/QuerysubController";
+import { URLParam } from "../../../library-components/URLParam";
+import { getOwnMachineId, getOwnThreadId } from "../../../-f-node-discovery/NodeDiscovery";
+import { FilePathSelector, FilePathsByMachine } from "./FilePathSelector";
+import { MachineThreadInfo } from "../../MachineThreadInfo";
+import { TimeRangeSelector, getTimeRange } from "../TimeRangeSelector";
+import { LZ4 } from "../../../storage/LZ4";
+import { ColumnType, Table, TableType } from "../../../5-diagnostics/Table";
+import { InputPicker } from "../../../library-components/InputPicker";
+import { ObjectDisplay } from "../ObjectDisplay";
+import { formatDateJSX } from "../../../misc/formatJSX";
+import { PUBLIC_MOVE_THRESHOLD } from "./BufferIndexLogsOptimizationConstants";
+import { atomic } from "../../../2-proxy/PathValueProxyWatcher";
+import { errorToUndefined } from "querysub/src/errors";
+import { IndexedLogResults, createEmptyIndexedLogResults } from "./BufferIndexHelpers";
+
+let searchText = new URLParam("searchText", "");
+let readLiveData = new URLParam("readLiveData", false);
+let excludePendingResults = new URLParam("excludePendingResults", false);
+let limitURL = new URLParam("limit", 100);
+
+let savedPathsURL = new URLParam("savedPaths", "");
+let selectedFieldsURL = new URLParam("selectedFields", {} as Record<string, boolean>);
+let useRelativeTimeURL = new URLParam("useRelativeTime", true);
+
+const defaultSelectedFields = {
+    param0: true,
+    time: true,
+    __NAME__: true,
+    __machineId: true,
+    __threadId: true,
+    __entry: true,
+};
+
+function mergeIndexedLogResults(existing: IndexedLogResults, incoming: IndexedLogResults): IndexedLogResults {
+    let readsByKey = new Map<string, typeof existing.reads[0]>();
+
+    for (let read of existing.reads) {
+        let key = `${read.cached}-${read.remote}`;
+        let existingRead = readsByKey.get(key);
+        if (existingRead) {
+            existingRead.count += read.count;
+            existingRead.size += read.size;
+            existingRead.totalSize = Math.max(existingRead.totalSize, read.totalSize);
+            existingRead.totalCount = Math.max(existingRead.totalCount, read.totalCount);
+        } else {
+            readsByKey.set(key, { ...read });
+        }
+    }
+
+    for (let read of incoming.reads) {
+        let key = `${read.cached}-${read.remote}`;
+        let existingRead = readsByKey.get(key);
+        if (existingRead) {
+            existingRead.count += read.count;
+            existingRead.size += read.size;
+            existingRead.totalSize = Math.max(existingRead.totalSize, read.totalSize);
+            existingRead.totalCount = Math.max(existingRead.totalCount, read.totalCount);
+        } else {
+            readsByKey.set(key, { ...read });
+        }
+    }
+
+    return {
+        matchCount: existing.matchCount + incoming.matchCount,
+        totalLocalFiles: existing.totalLocalFiles + incoming.totalLocalFiles,
+        totalBackblazeFiles: existing.totalBackblazeFiles + incoming.totalBackblazeFiles,
+        reads: Array.from(readsByKey.values()),
+        localFilesSearched: existing.localFilesSearched + incoming.localFilesSearched,
+        backblazeFilesSearched: existing.backblazeFilesSearched + incoming.backblazeFilesSearched,
+        totalBlockCount: existing.totalBlockCount + incoming.totalBlockCount,
+        blockCheckedCount: existing.blockCheckedCount + incoming.blockCheckedCount,
+        blocksCheckedCompressedSize: existing.blocksCheckedCompressedSize + incoming.blocksCheckedCompressedSize,
+        blocksCheckedDecompressedSize: existing.blocksCheckedDecompressedSize + incoming.blocksCheckedDecompressedSize,
+        blockErrors: [...existing.blockErrors, ...incoming.blockErrors],
+        fileErrors: [...existing.fileErrors, ...incoming.fileErrors],
+        remoteIndexesSearched: existing.remoteIndexesSearched + incoming.remoteIndexesSearched,
+        remoteIndexSize: existing.remoteIndexSize + incoming.remoteIndexSize,
+        localIndexesSearched: existing.localIndexesSearched + incoming.localIndexesSearched,
+        localIndexSize: existing.localIndexSize + incoming.localIndexSize,
+        timeToFirstMatch: Math.min(existing.timeToFirstMatch === 0 ? Infinity : existing.timeToFirstMatch, incoming.timeToFirstMatch === 0 ? Infinity : incoming.timeToFirstMatch),
+        fileFindTime: existing.fileFindTime + incoming.fileFindTime,
+        indexSearchTime: existing.indexSearchTime + incoming.indexSearchTime,
+        blockSearchTime: existing.blockSearchTime + incoming.blockSearchTime,
+        totalSearchTime: Math.max(existing.totalSearchTime, incoming.totalSearchTime),
+        remoteBlockCount: existing.remoteBlockCount + incoming.remoteBlockCount,
+        localBlockCount: existing.localBlockCount + incoming.localBlockCount,
+        remoteBlockCheckedCount: existing.remoteBlockCheckedCount + incoming.remoteBlockCheckedCount,
+        localBlockCheckedCount: existing.localBlockCheckedCount + incoming.localBlockCheckedCount,
+    };
+}
+
+export class LogViewer3 extends qreact.Component {
+    static renderInProgress = true;
+    state = t.state({
+        enableLogs: t.boolean(true),
+        enableInfos: t.boolean(true),
+        enableWarnings: t.boolean(true),
+        enableErrors: t.boolean(true),
+        results: t.atomic<LogDatum[]>([]),
+        searching: t.boolean,
+        searchingLogs: t.boolean,
+        searchingInfos: t.boolean,
+        searchingWarnings: t.boolean,
+        searchingErrors: t.boolean,
+        paths: t.atomic<TimeFilePathWithSize[]>([]),
+        loadingPaths: t.boolean,
+        stats: t.atomic<IndexedLogResults | undefined>(undefined),
+        hasSearched: t.boolean(false),
+        forceMoveStartTime: t.atomic<number | undefined>(undefined),
+        forceMoveEndTime: t.atomic<number | undefined>(undefined),
+    });
+
+    private searchSequenceNumber = 0;
+
+    componentDidMount(): void {
+        void this.loadPaths();
+    }
+
+    getPaths(): TimeFilePathWithSize[] {
+        let paths: TimeFilePathWithSize[] = [];
+        if (savedPathsURL.value) {
+            const compressed = Buffer.from(savedPathsURL.value, "base64");
+            const decompressed = LZ4.decompress(compressed);
+            paths = JSON.parse(decompressed.toString("utf8"));
+        } else {
+            paths = this.state.paths;
+        }
+        if (excludePendingResults.value) {
+            paths = paths.filter(x => x.logCount !== undefined);
+        }
+        return paths;
+    }
+
+    clearPaths() {
+        this.state.paths = [];
+        this.state.searchingLogs = false;
+        this.state.searchingInfos = false;
+        this.state.searchingWarnings = false;
+        this.state.searchingErrors = false;
+    }
+
+    freezePaths() {
+        const json = JSON.stringify(this.state.paths);
+        const buffer = Buffer.from(json, "utf8");
+        const compressed = LZ4.compress(buffer);
+        savedPathsURL.value = compressed.toString("base64");
+    }
+
+    clearFrozenPaths() {
+        savedPathsURL.value = "";
+    }
+
+    renderSearchStats() {
+        const stats = this.state.stats;
+        if (!stats) return undefined;
+
+        let totalSizeRead = 0;
+        let cachedSize = 0;
+        let cachedCount = 0;
+        let uncachedSize = 0;
+        let uncachedCount = 0;
+        let uncachedRemoteSize = 0;
+        let uncachedRemoteCount = 0;
+        let totalSize = 0;
+        let remoteTotalSize = 0;
+        let localTotalSize = 0;
+
+        for (let read of stats.reads) {
+            totalSizeRead += read.size;
+            if (read.cached) {
+                cachedSize += read.size;
+                cachedCount += read.count;
+            } else {
+                uncachedSize += read.size;
+                uncachedCount += read.count;
+                totalSize += read.totalSize;
+                if (read.remote) {
+                    remoteTotalSize += read.totalSize;
+                } else {
+                    localTotalSize += read.totalSize;
+                }
+            }
+            if (read.remote && !read.cached) {
+                uncachedRemoteSize += read.size;
+                uncachedRemoteCount += read.count;
+            }
+        }
+
+        const renderStage = (title: string, items: preact.ComponentChild[], hue: number | undefined, isFirst: boolean, isLast: boolean) => {
+            const triangleWidth = 20;
+
+            let color = hue ? css.hsl(hue, 70, 80) : css.hsl(0, 0, 100);
+            let colorhsl = hue ? css.hslcolor(hue, 80, 30) : css;
+
+            return (
+                <div className={css.vbox(2).relative.minWidth(200).paddingTop(8).paddingBottom(8).paddingRight(10).paddingLeft(isFirst ? 10 : 10 + triangleWidth) + color}>
+                    <div className={css.fontWeight(600) + colorhsl}>{title}</div>
+                    {items.map((item, i) => (
+                        <div key={i}>{item}</div>
+                    ))}
+                    {!isLast && (
+                        <svg width={triangleWidth} height="100" viewBox="0 0 20 100" preserveAspectRatio="none" className={css.absolute.right(-triangleWidth).top(0).fillHeight.zIndex(1)}>
+                            <polygon points="0,0 20,50 0,100" fill={`hsl(${hue}, 70%, 80%)`} />
+                        </svg>
+                    )}
+                </div>
+            );
+        };
+
+        const fileItems = [
+            `${formatTime(stats.fileFindTime)} | ${formatNumber(stats.localFilesSearched + stats.backblazeFilesSearched)} / ${formatNumber(stats.totalLocalFiles + stats.totalBackblazeFiles)} | ${formatNumber(totalSize)}B`,
+            `remote ${formatNumber(stats.backblazeFilesSearched)} / ${formatNumber(stats.totalBackblazeFiles)} | ${formatNumber(remoteTotalSize)}B`,
+            `pending ${formatNumber(stats.localFilesSearched)} / ${formatNumber(stats.totalLocalFiles)} | ${formatNumber(localTotalSize)}B`,
+        ];
+
+        const totalIndexesSearched = stats.remoteIndexesSearched + stats.localIndexesSearched;
+        const totalIndexSize = stats.remoteIndexSize + stats.localIndexSize;
+        const indexItems = [
+            `${formatTime(stats.indexSearchTime)} | ${formatNumber(totalIndexesSearched)} | ${formatNumber(totalIndexSize)}B | ${formatNumber(totalSize / totalIndexSize)}X`,
+            `remote ${formatNumber(stats.remoteIndexesSearched)} | ${formatNumber(stats.remoteIndexSize)}B | ${formatNumber(remoteTotalSize / stats.remoteIndexSize)}X`,
+            `local ${formatNumber(stats.localIndexesSearched)} | ${formatNumber(stats.localIndexSize)}B | ${formatNumber(localTotalSize / stats.localIndexSize)}X`,
+        ];
+
+        const blockItems = [
+            <div title={`Scanned size = ${formatNumber(stats.blocksCheckedCompressedSize)}B, Decompressed size = ${formatNumber(stats.blocksCheckedDecompressedSize)}B, Compression ratio = ${formatNumber(stats.blocksCheckedDecompressedSize / stats.blocksCheckedCompressedSize)}X`}>{formatTime(stats.blockSearchTime)} | {formatNumber(stats.blockCheckedCount)} | {formatNumber(stats.blocksCheckedCompressedSize)}B | {formatNumber(stats.blocksCheckedDecompressedSize / stats.blocksCheckedCompressedSize)}X</div>,
+            `total scanned ${formatNumber(stats.totalBlockCount)} (${formatPercent(stats.blockCheckedCount / stats.totalBlockCount)})`,
+            `remote ${formatNumber(stats.remoteBlockCheckedCount)} / ${formatNumber(stats.remoteBlockCount)} (${formatPercent(stats.remoteBlockCheckedCount / stats.remoteBlockCount)}) | local ${formatNumber(stats.localBlockCheckedCount)} / ${formatNumber(stats.localBlockCount)} (${formatPercent(stats.localBlockCheckedCount / stats.localBlockCount)})`,
+        ];
+        let cacheItems = [
+            `disk read ${formatNumber(uncachedSize)}B (${formatNumber(uncachedCount)})`,
+            `remote ${formatPercent(uncachedRemoteSize / totalSizeRead)} (${formatNumber(uncachedRemoteCount)})`,
+            `cached ${formatNumber(cachedSize)} (${formatNumber(cachedCount)})`,
+        ];
+
+        const resultItems = [
+            `${formatTime(stats.timeToFirstMatch)} until first result`,
+            `${formatNumber(stats.matchCount)} results / ${limitURL.value} limit`,
+        ];
+
+        const doneItems = [
+            `${formatTime(stats.totalSearchTime)} total search time`,
+        ];
+
+        let hasErrors = stats.fileErrors.length > 0 || stats.blockErrors.length > 0;
+
+        return (
+            <div className={css.hbox(0).alignItems("stretch")}>
+                {renderStage("Files", fileItems, 290, true, false)}
+                {renderStage("Indexes", indexItems, 250, false, false)}
+                {renderStage("Blocks", blockItems, 210, false, false)}
+                {renderStage("Reads", cacheItems, 160, false, false)}
+                {renderStage("Results", resultItems, 120, false, false)}
+                {renderStage("Done", doneItems, undefined, false, !hasErrors)}
+                {(() => {
+                    if (!hasErrors) return undefined;
+                    let errorItems: preact.ComponentChild[] = [];
+                    if (stats.fileErrors.length > 0) {
+                        const errorTitle = stats.fileErrors.map(e => `${e.path}:\n${e.error}`).join("\n\n");
+                        errorItems.push(<div title={errorTitle}>{stats.fileErrors.length} files failed</div>);
+                    }
+                    if (stats.blockErrors.length > 0) {
+                        errorItems.push(<div title={stats.blockErrors.join("\n")}>{stats.blockErrors.length} blocks failed</div>);
+                    }
+                    return renderStage("Errors", errorItems, 0, false, true);
+                })()}
+            </div>
+        );
+    }
+
+    renderPendingLogWarnings() {
+        const paths = this.getPaths();
+        const now = Date.now();
+        const threshold = now - (2 * PUBLIC_MOVE_THRESHOLD);
+
+        const machineWarnings: Record<string, { machineId: string; oldestTime: number; count: number; totalSize: number }> = {};
+
+        for (const path of paths) {
+            if (path.logCount !== undefined) continue;
+
+            if (path.startTime >= threshold) continue;
+
+            if (!path.machineId) continue;
+
+            const existing = machineWarnings[path.machineId];
+            if (!existing) {
+                machineWarnings[path.machineId] = {
+                    machineId: path.machineId,
+                    oldestTime: path.startTime,
+                    count: 1,
+                    totalSize: path.size || 0,
+                };
+            } else {
+                if (path.startTime < existing.oldestTime) {
+                    existing.oldestTime = path.startTime;
+                }
+                existing.count++;
+                existing.totalSize += path.size || 0;
+            }
+        }
+
+        const warnings = Object.values(machineWarnings);
+        if (warnings.length === 0) return undefined;
+
+        const isFrozen = !!savedPathsURL.value;
+
+        return (
+            <div className={css.vbox(10).pad2(10).hsl(0, 50, 50).colorhsl(60, 50, 100)}>
+                {isFrozen && (
+                    <>
+                        <div className={css.fontWeight(600)}>Frozen files are too old:</div>
+                        {warnings.map((warning) => (
+                            <div key={warning.machineId} className={css.hbox(10)}>
+                                <MachineThreadInfo machineId={warning.machineId} />
+                                <span>has {formatNumber(warning.count)} pending files ({formatNumber(warning.totalSize)}B) that are {formatTime(now - warning.oldestTime)} old</span>
+                            </div>
+                        ))}
+                        <Button
+                            onClick={() => {
+                                this.clearFrozenPaths();
+                                void this.loadPaths();
+                            }}
+                            hue={180}
+                        >
+                            Clear Frozen Files and Reload
+                        </Button>
+                    </>
+                )}
+                {!isFrozen && (
+                    <>
+                        <div className={css.fontWeight(600)}>FIX pending logs not being merged!</div>
+                        {warnings.map((warning) => (
+                            <div key={warning.machineId} className={css.hbox(10)}>
+                                <MachineThreadInfo machineId={warning.machineId} />
+                                <span>is not moving logs to remote storage. {formatNumber(warning.count)} files ({formatNumber(warning.totalSize)}B) are {formatTime(now - warning.oldestTime)} old</span>
+                            </div>
+                        ))}
+                        <Button
+                            onClick={async () => {
+                                Querysub.commitLocal(() => {
+                                    this.state.forceMoveStartTime = Date.now();
+                                    this.state.forceMoveEndTime = undefined;
+                                });
+
+                                let forceMoveInterval = setInterval(() => {
+                                    this.forceUpdate();
+                                }, 100);
+
+                                try {
+                                    let loggers = await getLoggers2Async();
+                                    for (let logger of Object.values(loggers)) {
+                                        await logger.clientForceMoveLogsToPublic();
+                                    }
+                                    await this.loadPaths();
+                                } finally {
+                                    if (forceMoveInterval) {
+                                        clearInterval(forceMoveInterval);
+                                    }
+
+                                    Querysub.commitLocal(() => {
+                                        this.state.forceMoveEndTime = Date.now();
+                                    });
+                                }
+                            }}
+                            hue={180}
+                        >
+                            Force Move Logs to Public
+                        </Button>
+                        {(() => {
+                            if (this.state.forceMoveStartTime !== undefined && this.state.forceMoveEndTime === undefined) {
+                                const elapsed = Date.now() - this.state.forceMoveStartTime;
+                                return <div>Moving logs... {formatTime(elapsed)}</div>;
+                            }
+                            if (this.state.forceMoveStartTime !== undefined && this.state.forceMoveEndTime !== undefined) {
+                                const duration = this.state.forceMoveEndTime - this.state.forceMoveStartTime;
+                                return <div>Moved logs in {formatTime(duration)}</div>;
+                            }
+                            return undefined;
+                        })()}
+                    </>
+                )}
+            </div>
+        );
+    }
+
+    async loadPaths() {
+        if (savedPathsURL.value) {
+            return;
+        }
+
+        Querysub.commitLocal(() => {
+            this.state.loadingPaths = true;
+        });
+
+        let loggers = await getLoggers2Async();
+        let selectedLoggers: typeof loggers.logLogs[] = [];
+        Querysub.localRead(() => {
+            if (this.state.enableLogs) selectedLoggers.push(loggers.logLogs);
+            if (this.state.enableInfos) selectedLoggers.push(loggers.infoLogs);
+            if (this.state.enableWarnings) selectedLoggers.push(loggers.warnLogs);
+            if (this.state.enableErrors) selectedLoggers.push(loggers.errorLogs);
+        });
+
+        if (selectedLoggers.length === 0) {
+            console.error("No log sources selected");
+            Querysub.commitLocal(() => {
+                this.state.loadingPaths = false;
+            });
+            return;
+        }
+
+        let allPaths: TimeFilePathWithSize[] = [];
+        let range = Querysub.localRead(() => getTimeRange());
+
+        for (let logger of selectedLoggers) {
+            let paths = await logger.clientGetPaths({
+                startTime: range.startTime,
+                endTime: range.endTime,
+            });
+            allPaths.push(...paths);
+        }
+        sort(allPaths, x => -x.startTime);
+
+        Querysub.commitLocal(() => {
+            this.state.paths = allPaths;
+            this.state.loadingPaths = false;
+        });
+    }
+
+    cancel = async () => {
+        this.searchSequenceNumber++;
+        let loggers = await getLoggers2Async();
+        for (let logger of Object.values(loggers)) {
+            logger.clientCancelAllCallbacks();
+        }
+        Querysub.commitLocal(() => {
+            this.state.searching = false;
+            this.state.hasSearched = false;
+        });
+    };
+
+
+    search = async () => {
+        await this.cancel();
+        Querysub.commitLocal(() => {
+            this.state.searching = true;
+            this.state.results = [];
+            this.state.stats = undefined;
+            this.state.searchingLogs = false;
+            this.state.searchingInfos = false;
+            this.state.searchingWarnings = false;
+            this.state.searchingErrors = false;
+        });
+
+
+        let loggers = await getLoggers2Async();
+
+        let selectedLoggers: typeof loggers.logLogs[] = [];
+        Querysub.localRead(() => {
+            if (this.state.enableLogs) {
+                selectedLoggers.push(loggers.logLogs);
+                this.state.searchingLogs = true;
+            }
+            if (this.state.enableInfos) {
+                selectedLoggers.push(loggers.infoLogs);
+                this.state.searchingInfos = true;
+            }
+            if (this.state.enableWarnings) {
+                selectedLoggers.push(loggers.warnLogs);
+                this.state.searchingWarnings = true;
+            }
+            if (this.state.enableErrors) {
+                selectedLoggers.push(loggers.errorLogs);
+                this.state.searchingErrors = true;
+            }
+        });
+
+        this.searchSequenceNumber++;
+        let currentSequenceNumber = this.searchSequenceNumber;
+
+        let startTime = Date.now();
+
+        let hasPaths = Querysub.localRead(() => this.getPaths().length > 0);
+        let getFilesTime = 0;
+        if (readLiveData.value || !hasPaths) {
+            let startTime = Date.now();
+            await this.loadPaths();
+            getFilesTime = Date.now() - startTime;
+        }
+
+
+        if (selectedLoggers.length === 0) {
+            console.error("No log sources selected");
+            Querysub.commitLocal(() => {
+                this.state.searching = false;
+            });
+            return;
+        }
+
+        let searchBuffer = Querysub.localRead(() => Buffer.from(searchText.value, "utf8"));
+        let results: LogDatum[] = [];
+        let stats: IndexedLogResults = createEmptyIndexedLogResults();
+        stats.fileFindTime += getFilesTime;
+
+        let paths = Querysub.localRead(() => this.getPaths());
+
+        let range = Querysub.localRead(() => getTimeRange());
+
+        let updateResults = throttleFunction(100, () => {
+            if (this.searchSequenceNumber !== currentSequenceNumber) return;
+            Querysub.commitLocal(() => {
+                this.state.results = results;
+            });
+        });
+
+        let loggerResults = new Map<typeof loggers.logLogs, IndexedLogResults>();
+
+        let updateStats = () => {
+            if (this.searchSequenceNumber !== currentSequenceNumber) return;
+
+            let mergedStats: IndexedLogResults = createEmptyIndexedLogResults();
+
+            for (let loggerResult of loggerResults.values()) {
+                mergedStats = mergeIndexedLogResults(mergedStats, loggerResult);
+            }
+
+            mergedStats.totalSearchTime = Date.now() - startTime;
+
+            Querysub.commitLocal(() => {
+                this.state.stats = mergedStats;
+            });
+        };
+
+        await Promise.all(selectedLoggers.map(async (logger) => {
+            let done = false;
+            let result = await errorToUndefined(logger.clientFind({
+                params: {
+                    startTime: range.startTime,
+                    endTime: range.endTime,
+                    limit: limitURL.value,
+                    findBuffer: searchBuffer,
+                    pathOverrides: paths,
+                },
+                onResult: (match: LogDatum) => {
+                    console.log("onResult", match);
+                    results.push(match);
+                    void updateResults();
+                },
+                onResults: (loggerStats: IndexedLogResults) => {
+                    if (done) return;
+                    loggerResults.set(logger, loggerStats);
+                    updateStats();
+                },
+            }));
+            done = true;
+
+            if (result) {
+                loggerResults.set(logger, result);
+                updateStats();
+            }
+
+            Querysub.commitLocal(() => {
+                if (logger === loggers.logLogs) this.state.searchingLogs = false;
+                if (logger === loggers.infoLogs) this.state.searchingInfos = false;
+                if (logger === loggers.warnLogs) this.state.searchingWarnings = false;
+                if (logger === loggers.errorLogs) this.state.searchingErrors = false;
+            });
+        }));
+
+
+        Querysub.commitLocal(() => {
+            this.state.results = results;
+            this.state.searching = false;
+            this.state.hasSearched = true;
+        });
+    };
+
+    renderResults() {
+        let fieldNames = new Set<string>();
+        for (let i = 0; i < Math.min(1000, this.state.results.length); i++) {
+            let result = this.state.results[i];
+            for (let key of Object.keys(result)) {
+                fieldNames.add(key);
+            }
+        }
+
+        let selectedFields: string[] = [];
+        for (let field of Object.keys(defaultSelectedFields)) {
+            if (atomic(selectedFieldsURL.value[field]) === undefined) {
+                selectedFields.push(field);
+            }
+        }
+        for (let [key, value] of Object.entries(selectedFieldsURL.value)) {
+            if (value && !selectedFields.includes(key)) {
+                selectedFields.splice(1, 0, key);
+            }
+        }
+
+        let columns: TableType<LogDatum>["columns"] = {};
+        columns["log"] = {
+            title: "Log",
+            formatter: (x, context) => {
+                return <Button onClick={() => console.log(context?.row)}>
+                    Log
+                </Button>;
+            }
+        };
+
+        for (let field of selectedFields) {
+            let column: ColumnType<unknown, LogDatum> = {};
+            if (field === "time") {
+                column.formatter = (x: unknown) => useRelativeTimeURL.value ? formatDateJSX(Number(x)) : <span title={formatDateTimeDetailed(Number(x))}>{formatDateTime(Number(x))}</span>;
+            } else if (field === "__machineId") {
+                column.formatter = (x: unknown, context) => {
+                    if (!context?.row || !context.row.__machineId) return <ObjectDisplay value={x} />;
+                    return <MachineThreadInfo machineId={context.row.__machineId} threadId={context.row.__threadId || undefined} />;
+                };
+            }
+            if (!column.formatter) {
+                column.formatter = (x: unknown) => <ObjectDisplay value={x} />;
+            }
+            columns[field] = column;
+        }
+
+        columns["fields"] = {
+            title: "Fields",
+            formatter: (x, context) => {
+                if (!context?.row) return undefined;
+                let datum = context.row;
+                let fields = Object.keys(datum);
+                fields = fields.filter(x => !(x in columns) && !x.startsWith("_"));
+                return <div className={css.hbox(4, 4).wrap}>
+                    {fields.map(x => <div
+                        key={x}
+                        className={css.pad2(4, 0).hsl(0, 0, 80).button}
+                        onClick={() => {
+                            let newValues = { ...selectedFieldsURL.value };
+                            newValues[x] = true;
+                            selectedFieldsURL.value = newValues;
+                        }}
+                    >
+                        {x}
+                    </div>)}
+                </div>;
+            }
+        };
+
+        return <>
+            <div className={css.hbox(10)}>
+                <InputPicker
+                    label={<div className={css.hbox(10)}>
+                        <div className={css.flexShrink0}>
+                            Selected Fields
+                        </div>
+                        <Button onClick={() => {
+                            let newValues = { ...selectedFieldsURL.value };
+                            for (let key of Object.keys(newValues)) {
+                                newValues[key] = key in defaultSelectedFields;
+                            }
+                            selectedFieldsURL.value = newValues;
+                        }}>
+                            Reset
+                        </Button>
+                    </div>}
+                    picked={selectedFields}
+                    options={Array.from(fieldNames).map(x => ({ value: x, label: x }))}
+                    addPicked={x => {
+                        let newValues = { ...selectedFieldsURL.value };
+                        newValues[x] = true;
+                        selectedFieldsURL.value = newValues;
+                    }}
+                    removePicked={x => {
+                        let newValues = { ...selectedFieldsURL.value };
+                        newValues[x] = false;
+                        selectedFieldsURL.value = newValues;
+                    }}
+                />
+                <InputLabelURL
+                    label="Use Relative Time"
+                    checkbox
+                    url={useRelativeTimeURL}
+                />
+            </div>
+
+            {this.state.results.length === 0 && !this.state.searching && this.state.hasSearched && <div className={css.hsl(40, 50, 50).colorhsl(60, 50, 100).boldStyle.pad2(10).ellipsis}>
+                No logs matched, try adjusting your search or time range.
+            </div>}
+
+            <Table
+                rows={this.state.results}
+                columns={columns}
+                lineLimit={4}
+                initialLimit={10}
+                characterLimit={400}
+                getRowAttributes={row => {
+                    let hue = -1;
+                    if (row.__LOG_TYPE === "warn") hue = 40;
+                    if (row.__LOG_TYPE === "error") hue = 0;
+                    if (row.__LOG_TYPE === "info") hue = 200;
+                    return {
+                        className: hue !== -1 && css.hsl(hue, 40, 50).colorhsl(hue, 0, 100) || undefined,
+                    };
+                }}
+            />
+        </>;
+    }
+
+    render() {
+        return (
+            <div className={css.vbox(20).pad2(20).fillBoth}>
+                <div className={css.hbox(20)}>
+                    <div>Log Viewer 3</div>
+                    <InputLabelURL
+                        checkbox
+                        label="Always Read Live Data"
+                        url={readLiveData}
+                    />
+                    <InputLabelURL
+                        checkbox
+                        label="Exclude Pending Results"
+                        url={excludePendingResults}
+                    />
+                    <InputLabelURL
+                        label="Limit"
+                        number
+                        url={limitURL}
+                    />
+                </div>
+
+                <div className={css.hbox(10)}>
+                    <Button
+                        onClick={() => {
+                            this.state.enableLogs = !this.state.enableLogs;
+                            this.clearPaths();
+                        }}
+                        hue={this.state.enableLogs && 210 || undefined}
+                        className={this.state.searchingLogs && css.opacity(0.5) || undefined}
+                    >
+                        Logs
+                    </Button>
+                    <Button
+                        onClick={() => {
+                            this.state.enableInfos = !this.state.enableInfos;
+                            this.clearPaths();
+                        }}
+                        hue={this.state.enableInfos && 200 || undefined}
+                        className={this.state.searchingInfos && css.opacity(0.5) || undefined}
+                    >
+                        Infos
+                    </Button>
+                    <Button
+                        onClick={() => {
+                            this.state.enableWarnings = !this.state.enableWarnings;
+                            this.clearPaths();
+                        }}
+                        hue={this.state.enableWarnings && 40 || undefined}
+                        className={this.state.searchingWarnings && css.opacity(0.5) || undefined}
+                    >
+                        Warnings
+                    </Button>
+                    <Button
+                        onClick={() => {
+                            this.state.enableErrors = !this.state.enableErrors;
+                            this.clearPaths();
+                        }}
+                        hue={this.state.enableErrors ? 0 : undefined}
+                        className={this.state.searchingErrors && css.opacity(0.5) || undefined}
+                    >
+                        Errors
+                    </Button>
+                    <TimeRangeSelector />
+                </div>
+
+                <div className={css.hbox(10).fillWidth}>
+                    <InputLabelURL
+                        flavor="large"
+                        fillWidth
+                        focusOnMount
+                        url={searchText}
+                        onKeyDown={(e) => {
+                            if (e.key === "Enter") {
+                                searchText.value = e.currentTarget.value;
+                                void this.search();
+                            }
+                        }}
+                    />
+                    {!savedPathsURL.value && (
+                        <Button
+                            flavor="large"
+                            onClick={() => void this.loadPaths()}
+                            hue={120}
+                        >
+                            Preview Files
+                        </Button>
+                    )}
+                    {savedPathsURL.value && (
+                        <Button
+                            flavor="large"
+                            onClick={() => this.clearFrozenPaths()}
+                            hue={0}
+                        >
+                            Clear Frozen Files ({this.getPaths().length})
+                        </Button>
+                    )}
+                    <Button
+                        flavor="large"
+                        hotkeys={["enter"]}
+                        showHotkeys
+                        onClick={() => void this.search()}
+                        hue={210}
+                    >
+                        Search
+                    </Button>
+                    {this.state.searching && (
+                        <Button
+                            flavor="large"
+                            onClick={() => void this.cancel()}
+                            hue={60}
+                        >
+                            Cancel
+                        </Button>
+                    )}
+                </div>
+
+                <div className={css.hbox(10).fillWidth}>
+                    <FilePathSelector
+                        paths={this.getPaths()}
+                        onChange={(paths) => {
+                            this.state.paths = paths;
+                            this.freezePaths();
+                        }}
+                        fileErrors={this.state.stats?.fileErrors}
+                    />
+                    <Button
+                        onClick={() => {
+                            if (savedPathsURL.value) {
+                                this.clearFrozenPaths();
+                                void this.loadPaths();
+                            } else {
+                                this.freezePaths();
+                            }
+                        }}
+                        hue={savedPathsURL.value ? 0 : 180}
+                    >
+                        {savedPathsURL.value ? `Clear Frozen Files (${this.getPaths().length})` : `Freeze Files (${this.state.paths.length})`}
+                    </Button>
+                    {(() => {
+                        if (!savedPathsURL.value) return undefined;
+                        const paths = this.getPaths();
+                        const pendingCount = paths.filter(x => x.logCount === undefined).length;
+                        if (pendingCount === 0) return undefined;
+                        return (
+                            <Button
+                                onClick={() => {
+                                    const paths = this.getPaths();
+                                    const nonPendingPaths = paths.filter(x => x.logCount !== undefined);
+                                    const json = JSON.stringify(nonPendingPaths);
+                                    const buffer = Buffer.from(json, "utf8");
+                                    const compressed = LZ4.compress(buffer);
+                                    savedPathsURL.value = compressed.toString("base64");
+                                }}
+                                hue={40}
+                            >
+                                Remove Pending ({pendingCount})
+                            </Button>
+                        );
+                    })()}
+
+                    {this.state.loadingPaths && <div>Loading paths...</div>}
+                    {this.state.searching && (() => {
+                        let searchingSources: string[] = [];
+                        if (this.state.searchingLogs) searchingSources.push("Logs");
+                        if (this.state.searchingInfos) searchingSources.push("Infos");
+                        if (this.state.searchingWarnings) searchingSources.push("Warnings");
+                        if (this.state.searchingErrors) searchingSources.push("Errors");
+                        return <div className={css.pad2(4, 2).hsl(120, 40, 50).colorhsl(120, 0, 100)}>
+                            Searching: {searchingSources.join(", ")}
+                        </div>;
+                    })()}
+                </div>
+
+                {this.renderPendingLogWarnings()}
+
+                {this.renderSearchStats()}
+
+                {this.renderResults()}
+            </div>
+        );
+    }
+}
+