querysub 0.356.0 → 0.357.0

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

@@ -0,0 +1,702 @@
+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 { IndexedLogResults, 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";
+
+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);
+
+// Only auto-search if the string is long enough. Otherwise, we're going to get way too many results, which could slow down the server and won't be useful to us. 
+const MIN_AUTO_SEARCH_LENGTH = 7;
+
+const defaultSelectedFields = {
+    param0: true,
+    time: true,
+    __NAME__: true,
+    __machineId: true,
+    __threadId: true,
+    __entry: true,
+};
+
+function createTestLog(text: string, type: "log" | "warn" | "info" | "error"): LogDatum {
+    return {
+        time: 0,
+        message: text,
+        __LOG_TYPE: type,
+        __machineId: getOwnMachineId(),
+        __threadId: getOwnThreadId(),
+    };
+}
+
+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[]>([
+            { "time": 1771825252649.44, "__LOG_TYPE": "log", "__machineId": "1ed7a7340a015680", "__mountId": "1d590f0919b1f438.1ed7a7340a015680.querysubtest.com:7007", "__threadId": "1d590f0919b1f438", "__port": 7007, "__nodeId": "1d590f0919b1f438.1ed7a7340a015680.querysubtest.com:7007", "__entry": "D:\\repos\\qs-cyoa\\src\\server.ts", "__hostName": "DESKTOP-05MP449", "__accountName": "desktop-05mp449\\quent", "__externalIP": "99.250.124.91", "__os": "win32", "__pid": 75888, "param0": "new non-local WATCH", "path": ".,querysubtest._com.,PathFunctionRunner.,book.,Data.,edittingBooks.,hkwnmoiwhuyqenbi.,books.,bf0713806bf1c4338._querysubtest._com_1755390476654._5208_1.,nodes.,1770378259589._5535.,aiCalls.,", "watcher": "client:127.0.0.1:1771825250819.3994:0.634106584461968", "diskAudit": true },
+            { "time": 1771825252649.4397, "__LOG_TYPE": "log", "__machineId": "1ed7a7340a015680", "__mountId": "1d590f0919b1f438.1ed7a7340a015680.querysubtest.com:7007", "__threadId": "x1d590f0919b1f438", "__port": 7007, "__nodeId": "1d590f0919b1f438.1ed7a7340a015680.querysubtest.com:7007", "__entry": "D:\\repos\\qs-cyoa\\src\\server.ts", "__hostName": "DESKTOP-05MP449", "__accountName": "desktop-05mp449\\quent", "__externalIP": "99.250.124.91", "__os": "win32", "__pid": 75888, "param0": "new non-local WATCH", "path": ".,querysubtest._com.,PathFunctionRunner.,book.,Data.,edittingBooks.,hkwnmoiwhuyqenbi.,books.,bf0713806bf1c4338._querysubtest._com_1755390476654._5208_1.,nodes.,1770378259589._5535.,totalTime.,", "watcher": "client:127.0.0.1:1771825250819.3994:0.634106584461968", "diskAudit": true },
+        ]),
+        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),
+    });
+
+    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 uncachedSize = 0;
+        let uncachedCount = 0;
+        let uncachedRemoteSize = 0;
+        let uncachedRemoteCount = 0;
+        let totalSize = 0;
+
+        for (let read of stats.reads) {
+            totalSizeRead += read.size;
+            if (read.cached) {
+                cachedSize += read.size;
+            } else {
+                uncachedSize += read.size;
+                uncachedCount += read.count;
+                totalSize += 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(totalSize)}B`,
+            `pending ${formatNumber(stats.localFilesSearched)}`,
+        ];
+
+        const indexItems = [
+            `${formatTime(stats.indexSearchTime)} | ${formatNumber(stats.indexesSearched)} | ${formatNumber(stats.indexSize)}B`,
+        ];
+
+        const blockItems = [
+            `${formatTime(stats.blockSearchTime)} | ${formatNumber(stats.blockCheckedCount)} | ${formatNumber(stats.blocksCheckedCompressedSize)}B | ${formatNumber(stats.blocksCheckedDecompressedSize / stats.blocksCheckedCompressedSize)}X`,
+            `total blocks ${formatNumber(stats.totalBlockCount)}`,
+        ];
+        let cacheItems = [
+            `disk read ${formatNumber(uncachedSize)}B`,
+            `remote ${formatPercent(uncachedRemoteSize / totalSizeRead)} (${formatNumber(uncachedRemoteCount)})`,
+        ];
+
+        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("Cache", 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) {
+                        errorItems.push(<div title={stats.fileErrors.join("\n")}>{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 }> = {};
+
+        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 || path.startTime < existing.oldestTime) {
+                machineWarnings[path.machineId] = {
+                    machineId: path.machineId,
+                    oldestTime: path.startTime,
+                };
+            }
+        }
+
+        const warnings = Object.values(machineWarnings);
+        if (warnings.length === 0) return undefined;
+
+        return (
+            <div className={css.vbox(10).pad2(10).hsl(40, 50, 50).colorhsl(60, 50, 100)}>
+                <div className={css.fontWeight(600)}>Machines not moving logs to remote storage:</div>
+                {warnings.map((warning) => (
+                    <div key={warning.machineId} className={css.hbox(10)}>
+                        <MachineThreadInfo machineId={warning.machineId} />
+                        <span>is not moving logs to remote storage. Logs are {formatTime(now - warning.oldestTime)} old</span>
+                    </div>
+                ))}
+            </div>
+        );
+    }
+
+    async loadPaths() {
+        if (savedPathsURL.value) {
+            return;
+        }
+
+        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;
+        });
+    }
+
+
+    search = throttleFunction(200, async () => {
+        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 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;
+        }
+
+        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;
+            }
+        });
+
+        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 = {
+            matchCount: 0,
+            reads: [],
+            localFilesSearched: 0,
+            backblazeFilesSearched: 0,
+            totalBlockCount: 0,
+            blockCheckedCount: 0,
+            blocksCheckedCompressedSize: 0,
+            blocksCheckedDecompressedSize: 0,
+            blockErrors: [],
+            fileErrors: [],
+            indexesSearched: 0,
+            indexSize: 0,
+            timeToFirstMatch: 0,
+            fileFindTime: 0,
+            indexSearchTime: 0,
+            blockSearchTime: 0,
+            totalSearchTime: 0,
+        };
+        stats.fileFindTime += getFilesTime;
+
+        let paths = Querysub.localRead(() => this.getPaths());
+
+        let range = Querysub.localRead(() => getTimeRange());
+
+        let updateResults = throttleFunction(100, () => {
+            Querysub.commitLocal(() => {
+                this.state.results = results;
+            });
+        });
+
+        await Promise.all(selectedLoggers.map(async (logger) => {
+            let result = await 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();
+                },
+            });
+            stats.reads.push(...result.reads);
+            stats.matchCount += result.matchCount;
+            stats.localFilesSearched += result.localFilesSearched;
+            stats.backblazeFilesSearched += result.backblazeFilesSearched;
+            stats.totalBlockCount += result.totalBlockCount;
+            stats.blockCheckedCount += result.blockCheckedCount;
+            stats.blocksCheckedCompressedSize += result.blocksCheckedCompressedSize;
+            stats.blocksCheckedDecompressedSize += result.blocksCheckedDecompressedSize;
+            stats.indexesSearched += result.indexesSearched;
+            stats.indexSize += result.indexSize;
+            stats.timeToFirstMatch = Math.min(stats.timeToFirstMatch, result.timeToFirstMatch);
+            stats.fileFindTime += result.fileFindTime;
+            stats.indexSearchTime += result.indexSearchTime;
+            stats.blockSearchTime += result.blockSearchTime;
+            stats.totalSearchTime = Date.now() - startTime;
+            Querysub.commitLocal(() => {
+                this.state.results = results;
+                this.state.stats = stats;
+                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;
+            });
+        }));
+
+        stats.totalSearchTime = Date.now() - startTime;
+
+        Querysub.commitLocal(() => {
+            this.state.results = results;
+            this.state.searching = false;
+            this.state.stats = stats;
+        });
+    });
+
+    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 && <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}
+                        onChangeValue={(value) => {
+                            if (value.length >= MIN_AUTO_SEARCH_LENGTH) {
+                                void this.search();
+                            }
+                        }}
+                        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>
+                </div>
+
+                {this.state.loadingPaths && <div>Loading paths...</div>}
+                {this.state.searching && <div>Searching...</div>}
+
+                {this.getPaths().length > 0 && (
+                    <div className={css.hbox(10).fillWidth}>
+                        <FilePathSelector
+                            paths={this.getPaths()}
+                            onChange={(paths) => {
+                                this.state.paths = paths;
+                            }}
+                        />
+                        <Button
+                            onClick={() => this.freezePaths()}
+                            hue={180}
+                        >
+                            Freeze Files ({this.state.paths.length})
+                        </Button>
+                    </div>
+                )}
+
+                {this.renderPendingLogWarnings()}
+
+                {this.renderSearchStats()}
+
+                {this.renderResults()}
+            </div>
+        );
+    }
+}
+