querysub 0.374.0 → 0.376.0

package/src/diagnostics/logs/errorNotifications/ErrorDigestPage.tsx

@@ -1,409 +0,0 @@
-module.noserverhotreload = false;
-module.hotreload = true;
-
-
-import { SocketFunction } from "socket-function/SocketFunction";
-import { qreact } from "../../../4-dom/qreact";
-import { getSyncedController } from "../../../library-components/SyncedController";
-import { ErrorDigestController, errorDigestHistory, ErrorDigestInfo } from "./errorDigests";
-import { isManagementUser } from "../../../-0-hooks/hooks";
-import { assertIsManagementUser } from "../../managementPages";
-import { URLParam } from "../../../library-components/URLParam";
-import { tabURL } from "../../../library-components/urlResetGroups";
-import { Anchor, ATag } from "../../../library-components/ATag";
-import { css } from "../../../4-dom/css";
-import { list, sort } from "socket-function/src/misc";
-import { formatDateTime, formatVeryNiceDateTime, formatNumber } from "socket-function/src/formatting/format";
-import { Table } from "../../../5-diagnostics/Table";
-import { Histogram } from "../../../library-components/Histogram";
-import { TabbedUI } from "../../../library-components/TabbedUI";
-import { LogDatum } from "../diskLogger";
-import { t } from "../../../2-proxy/schema2";
-import { getErrorLogsLink } from "./ErrorWarning";
-
-export const digestKeyURL = new URLParam("digestKey", "");
-export const fileDetailTabURL = new URLParam("fileDetailTab", "errors");
-
-export class ErrorDigestPage extends qreact.Component {
-    state = t.state({
-        selectedFile: t.string("")
-    });
-    render() {
-        // Get the current tab mode
-        let currentTab = tabURL.value;
-        let selectedDigestKey = digestKeyURL.value;
-
-        if (currentTab === "detail" && selectedDigestKey) {
-            return this.renderDigestDetail(selectedDigestKey);
-        }
-
-        return this.renderDigestList();
-    }
-
-    renderDigestList() {
-        let controller = ErrorDigestController(SocketFunction.browserNodeId());
-
-        let keys = controller.getDigestKeys();
-
-        if (!keys || keys.length === 0) {
-            return (
-                <div className={css.vbox(16).pad2(24)}>
-                    <div className={css.fontSize(24).fontWeight(600)}>
-                        Error Digest History
-                    </div>
-                    <div>No digest data available</div>
-                </div>
-            );
-        }
-
-        // Sort lexicographically (highest = newest) and take latest 100
-        let sortedKeys = sort(keys as string[], key => key).reverse().slice(0, 100);
-
-        return (
-            <div className={css.vbox(16).paddingTop(24).paddingLeft(24).fillHeight.fillWidth}>
-                <div className={css.fontSize(24).fontWeight(600)}>
-                    Error Digest History
-                </div>
-                <div className={css.fontSize(14).color("gray")}>
-                    Showing latest {Math.min(sortedKeys.length, 100)} digests (sorted by creation time, newest first)
-                </div>
-
-                <div className={css.vbox(8).overflowAuto.fillWidth}>
-                    {sortedKeys.map(key => (
-                        <ATag
-                            key={key}
-                            values={[
-                                tabURL.getOverride("detail"),
-                                digestKeyURL.getOverride(key)
-                            ]}
-                            className={css.pad2(12).hsla(0, 0, 0, 0.1).pointer.hslahover(0, 0, 0, 0.15)}
-                        >
-                            {formatVeryNiceDateTime(+key.split(".")[0])}
-                        </ATag>
-                    ))}
-                </div>
-            </div>
-        );
-    }
-
-    renderDigestDetail(digestKey: string) {
-        let controller = ErrorDigestController(SocketFunction.browserNodeId());
-
-        let digestData = controller.getDigest(digestKey);
-
-        if (!digestData) {
-            return (
-                <div className={css.vbox(16).pad2(24)}>
-                    <div className={css.hbox(16)}>
-                        <ATag
-                            values={[
-                                tabURL.getOverride(""),
-                                digestKeyURL.getOverride("")
-                            ]}
-                        >
-                            ← Back to Digest List
-                        </ATag>
-                    </div>
-                    <div>Loading digest data...</div>
-                </div>
-            );
-        }
-
-        // If a file is selected, show file details
-        if (this.state.selectedFile) {
-            return this.renderFileDetail(digestData, digestKey);
-        }
-
-        return (
-            <div className={css.vbox(24).pad2(24).fillHeight.overflowAuto}>
-                {/* Header */}
-                <div className={css.hbox(16).alignItems("center")}>
-                    <ATag
-                        values={[
-                            tabURL.getOverride(""),
-                            digestKeyURL.getOverride("")
-                        ]}
-                    >
-                        ← Back to Digest List
-                    </ATag>
-                    <div className={css.fontSize(24).fontWeight(600)}>
-                        Digest: {formatVeryNiceDateTime(+digestKey.split(".")[0])}
-                    </div>
-                </div>
-
-                <Anchor
-                    className={css.fontSize(24)}
-                    values={getErrorLogsLink({
-                        startTime: digestData.startTime,
-                        endTime: digestData.endTime,
-                    })}
-                >
-                    View live logs
-                </Anchor>
-
-                {/* Metadata Section */}
-                {this.renderMetadata(digestData)}
-
-                {/* Charts Section */}
-                {this.renderCharts(digestData)}
-
-                {/* Files Table */}
-                {this.renderFilesTable(digestData)}
-            </div>
-        );
-    }
-
-    renderMetadata(digestData: ErrorDigestInfo) {
-        return (
-            <div className={css.vbox(16)}>
-                <div className={css.fontSize(20).fontWeight(600)}>Metadata</div>
-                <div className={css.hbox(32).wrap}>
-                    <div className={css.vbox(4)}>
-                        <div className={css.fontSize(14).colorhsl(0, 0, 60)}>Compressed Bytes</div>
-                        <div className={css.fontSize(16).fontWeight(500)}>
-                            {formatNumber(digestData.totalCompressedBytes)}
-                        </div>
-                    </div>
-                    <div className={css.vbox(4)}>
-                        <div className={css.fontSize(14).colorhsl(0, 0, 60)}>Uncompressed Bytes</div>
-                        <div className={css.fontSize(16).fontWeight(500)}>
-                            {formatNumber(digestData.totalUncompressedBytes)}
-                        </div>
-                    </div>
-                    <div className={css.vbox(4)}>
-                        <div className={css.fontSize(14).colorhsl(0, 0, 60)}>Total Files</div>
-                        <div className={css.fontSize(16).fontWeight(500)}>
-                            {formatNumber(digestData.totalFiles)}
-                        </div>
-                    </div>
-                    <div className={css.vbox(4)}>
-                        <div className={css.fontSize(14).colorhsl(0, 0, 60)}>Scan Duration</div>
-                        <div className={css.fontSize(16).fontWeight(500)}>
-                            {formatNumber(digestData.scanDuration)}ms
-                        </div>
-                    </div>
-                    <div className={css.vbox(4)}>
-                        <div className={css.fontSize(14).colorhsl(0, 0, 60)}>Start Time</div>
-                        <div className={css.fontSize(16).fontWeight(500)}>
-                            {formatVeryNiceDateTime(digestData.startTime)}
-                        </div>
-                    </div>
-                    <div className={css.vbox(4)}>
-                        <div className={css.fontSize(14).colorhsl(0, 0, 60)}>End Time</div>
-                        <div className={css.fontSize(16).fontWeight(500)}>
-                            {formatVeryNiceDateTime(digestData.endTime)}
-                        </div>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-
-    renderCharts(digestData: ErrorDigestInfo) {
-        // Convert histogram data to chart data
-        let unsuppressedErrorsData: { x: number; y: number }[] = [];
-        let unsuppressedWarningsData: { x: number; y: number }[] = [];
-        let corruptData: { x: number; y: number }[] = [];
-        let suppressedData: { x: number; y: number }[] = [];
-
-        for (let [time, data] of digestData.histogram.entries()) {
-            unsuppressedErrorsData.push({ x: time, y: data.unsuppressedErrors });
-            unsuppressedWarningsData.push({ x: time, y: data.unsuppressedWarnings });
-            corruptData.push({ x: time, y: data.corruptErrors + data.corruptWarnings });
-            suppressedData.push({ x: time, y: data.suppressedErrors + data.suppressedWarnings });
-        }
-
-        return (
-            <div className={css.vbox(16)}>
-                <div className={css.fontSize(20).fontWeight(600)}>Error Distribution Over Time</div>
-                <div className={css.vbox(16)}>
-                    <div className={css.hbox(16).wrap}>
-                        <div className={css.fillWidth.minWidth(400).height(300)}>
-                            <Histogram
-                                title="Unsuppressed Errors"
-                                values={unsuppressedErrorsData}
-                                xColumn={{
-                                    title: "Time",
-                                    format: (value) => formatDateTime(value)
-                                }}
-                                yColumn={{ title: "Count" }}
-                            />
-                        </div>
-                        <div className={css.fillWidth.minWidth(400).height(300)}>
-                            <Histogram
-                                title="Unsuppressed Warnings"
-                                values={unsuppressedWarningsData}
-                                xColumn={{
-                                    title: "Time",
-                                    format: (value) => formatDateTime(value)
-                                }}
-                                yColumn={{ title: "Count" }}
-                            />
-                        </div>
-                    </div>
-                    <div className={css.hbox(16).wrap}>
-                        <div className={css.fillWidth.minWidth(400).height(300)}>
-                            <Histogram
-                                title="Corrupt Errors + Warnings"
-                                values={corruptData}
-                                xColumn={{
-                                    title: "Time",
-                                    format: (value) => formatDateTime(value)
-                                }}
-                                yColumn={{ title: "Count" }}
-                            />
-                        </div>
-                        <div className={css.fillWidth.minWidth(400).height(300)}>
-                            <Histogram
-                                title="Suppressed Errors + Warnings"
-                                values={suppressedData}
-                                xColumn={{
-                                    title: "Time",
-                                    format: (value) => formatDateTime(value)
-                                }}
-                                yColumn={{ title: "Count" }}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-
-    renderFilesTable(digestData: ErrorDigestInfo) {
-        // Convert byFile map to table rows
-        let fileRows = Array.from(digestData.byFile.entries()).map(([fileName, fileData]) => {
-            let latestError = fileData.latestErrors[fileData.latestErrors.length - 1];
-            let latestWarning = fileData.latestWarnings[fileData.latestWarnings.length - 1];
-            let latestLog = latestError ?? latestWarning;
-
-            return {
-                fileName,
-                errorCount: fileData.errors,
-                warningCount: fileData.warnings,
-                latestMessage: latestLog?.param0 ?? "No messages",
-                latestTime: latestLog?.time ?? 0
-            };
-        });
-
-        // Sort by error count descending
-        fileRows = sort(fileRows, row => row.errorCount).reverse();
-
-        return (
-            <div className={css.vbox(16)}>
-                <div className={css.fontSize(20).fontWeight(600)}>Files ({fileRows.length} files)</div>
-                <Table
-                    columns={{
-                        fileName: { title: "File Name" },
-                        errorCount: { title: "Errors" },
-                        warningCount: { title: "Warnings" },
-                        latestMessage: {
-                            title: "Latest Message",
-                            formatter: (value: any) => String(value).slice(0, 100) + (String(value).length > 100 ? "..." : "")
-                        }
-                    }}
-                    rows={fileRows}
-                    getRowAttributes={(row: any) => ({
-                        className: css.cursor("pointer").hslhover(210, 20, 95),
-                        onClick: () => {
-                            this.state.selectedFile = row.fileName;
-                        }
-                    })}
-                />
-            </div>
-        );
-    }
-
-    renderFileDetail(digestData: ErrorDigestInfo, digestKey: string) {
-        let selectedFileName = this.state.selectedFile;
-        let fileData = digestData.byFile.get(selectedFileName);
-
-        if (!fileData) {
-            return (
-                <div className={css.vbox(16).pad2(24)}>
-                    <div>File not found</div>
-                </div>
-            );
-        }
-
-        return (
-            <div className={css.vbox(24).pad2(24).fillHeight}>
-                {/* Header with back button */}
-                <div className={css.hbox(16).alignItems("center")}>
-                    <ATag
-                        clickOverride={() => {
-                            this.state.selectedFile = "";
-                        }}
-                        className={css.cursor("pointer")}
-                    >
-                        ← Back to Files Table
-                    </ATag>
-                    <div className={css.fontSize(20).fontWeight(600)}>
-                        {selectedFileName}
-                    </div>
-                </div>
-
-                {/* File stats */}
-                <div className={css.hbox(32)}>
-                    <div className={css.vbox(4)}>
-                        <div className={css.fontSize(14).colorhsl(0, 0, 60)}>Errors</div>
-                        <div className={css.fontSize(16).fontWeight(500)}>{fileData.errors}</div>
-                    </div>
-                    <div className={css.vbox(4)}>
-                        <div className={css.fontSize(14).colorhsl(0, 0, 60)}>Warnings</div>
-                        <div className={css.fontSize(16).fontWeight(500)}>{fileData.warnings}</div>
-                    </div>
-                </div>
-
-                {/* Tabbed interface for errors/warnings */}
-                <div className={css.fillHeight.overflowHidden}>
-                    <TabbedUI
-                        tab={fileDetailTabURL}
-                        tabs={[
-                            {
-                                value: "errors",
-                                title: `Errors (${fileData.errors})`,
-                                contents: this.renderLogEntries(fileData.latestErrors, "errors")
-                            },
-                            {
-                                value: "warnings",
-                                title: `Warnings (${fileData.warnings})`,
-                                contents: this.renderLogEntries(fileData.latestWarnings, "warnings")
-                            }
-                        ]}
-                    />
-                </div>
-            </div>
-        );
-    }
-
-    renderLogEntries(logs: LogDatum[], type: "errors" | "warnings") {
-        if (logs.length === 0) {
-            return <div className={css.colorhsl(0, 0, 60)}>No {type} found</div>;
-        }
-
-        let tableRows = logs.map((log, index) => ({
-            index: logs.length - index,
-            time: formatVeryNiceDateTime(log.time),
-            message: log.param0 ?? "No message",
-            threadId: log.__threadId ?? "Unknown",
-            name: log.__NAME__ ?? "Unknown"
-        }));
-
-        return (
-            <div className={css.fillHeight.overflowAuto}>
-                <Table
-                    columns={{
-                        index: { title: "#" },
-                        time: { title: "Time" },
-                        name: { title: "Source" },
-                        threadId: { title: "Thread" },
-                        message: { title: "Message" }
-                    }}
-                    rows={tableRows}
-                    initialLimit={50}
-                />
-            </div>
-        );
-    }
-}