querysub 0.377.0 → 0.379.0

package/src/diagnostics/logs/errorNotifications2/ErrorNotificationPage.tsx

@@ -0,0 +1,505 @@
+import { qreact } from "../../../4-dom/qreact";
+import { t } from "../../../2-proxy/schema2";
+import { css } from "typesafecss";
+import { LogDatum } from "../diskLogger";
+import { sort, timeInDay } from "socket-function/src/misc";
+import { formatDateTime, formatNumber, formatTime } from "socket-function/src/formatting/format";
+import { Querysub } from "../../../4-querysub/QuerysubController";
+import { InputLabel } from "../../../library-components/InputLabel";
+import { isPublic } from "../../../config";
+import { MachineThreadInfo } from "../../MachineThreadInfo";
+import { ErrorWarning } from "./ErrorWarning";
+import { getErrorNotificationsManager } from "./errorWatcher";
+import { createMatchesPattern } from "../IndexedLogs/bufferSearchFindMatcher";
+import { cacheLimited } from "socket-function/src/caching";
+import { managementPageURL } from "../../managementPages";
+import { searchTextURL, readProductionLogsURL } from "../IndexedLogs/LogViewerParams";
+import { startTimeParam, endTimeParam } from "../TimeRangeSelector";
+import { timeInHour } from "socket-function/src/misc";
+import { ATag, URLOverride } from "../../../library-components/ATag";
+import { Button } from "../../../library-components/Button";
+
+let getMatcher = cacheLimited(100, (pattern: string) =>
+    createMatchesPattern(Buffer.from(pattern), false)
+);
+
+export class LogDatumRenderer extends qreact.Component<{
+    datum: LogDatum;
+    inlineMode?: boolean;
+    hideSuppression?: boolean;
+    pattern?: string;
+}> {
+    state = t.state({
+        expanded: t.atomic<boolean>(false),
+    });
+
+    manager = getErrorNotificationsManager();
+
+    render() {
+        let datum = this.props.datum;
+        let mainMessage = datum.param0 && String(datum.param0) || "(no message)";
+
+        let matchingSuppressions = [];
+        if (!this.manager.state.isLoading && !this.props.hideSuppression) {
+            for (let suppression of this.manager.state.suppressionEntries) {
+                let matcher = getMatcher(suppression.pattern);
+                let errorBuffer = Buffer.from(JSON.stringify(datum));
+                if (matcher(errorBuffer)) {
+                    matchingSuppressions.push(suppression);
+                }
+            }
+        }
+
+        let timedOutMatches = matchingSuppressions.filter(s => datum.time > s.timeout);
+        let shouldBeSuppressed = matchingSuppressions.filter(s => datum.time <= s.timeout);
+
+        let logViewerValues: URLOverride[] | undefined;
+        {
+            logViewerValues = [
+                managementPageURL.getOverride("LogViewer3"),
+                readProductionLogsURL.getOverride(isPublic()),
+                startTimeParam.getOverride(datum.time - timeInHour),
+                endTimeParam.getOverride(datum.time + timeInHour),
+            ];
+
+            let searchText = this.props.pattern && this.props.pattern || timedOutMatches[0]?.pattern || "";
+            if (datum.__threadId) {
+                if (searchText) {
+                    searchText += "&";
+                }
+                searchText += `"__threadId":"${datum.__threadId}"`;
+            }
+            if (searchText) {
+                logViewerValues.push(searchTextURL.getOverride(searchText));
+            }
+        }
+
+        return <div className={
+            css.vbox(4)
+            + (!this.props.inlineMode && css.maxWidth("80vw"))
+            + (this.props.inlineMode && css.maxWidth("calc(100vw - 90px)"))
+        }>
+            <div
+                className={
+                    css.hbox(8).maxWidth("100%")
+                }
+            >
+                {logViewerValues && (
+                    <ATag values={logViewerValues}>
+                        View Logs
+                    </ATag>
+                )}
+                <div
+                    className={
+                        css.hbox(8)
+                        + (!this.props.inlineMode && css.button)
+                    }
+                    onClick={!this.props.inlineMode && (() => {
+                        this.state.expanded = !this.state.expanded;
+                    }) || undefined}
+                >
+                    {!this.props.inlineMode && <span>{this.state.expanded && "▼" || "▶"}</span>}
+                    <div>{formatDateTime(datum.time)}</div>
+                </div>
+                {datum.__machineId && <MachineThreadInfo machineId={datum.__machineId} threadId={datum.__threadId} />}
+                <span className={css.ellipsis.flexFillWidth.colorhsl(0, 50, 50).boldStyle}>{mainMessage}</span>
+            </div>
+
+            {!this.props.inlineMode && this.state.expanded && (
+                <div className={css.vbox(4).pad2(8).hsl(0, 0, 98).bord2(0, 0, 85)}>
+                    {Object.entries(datum).map(([key, value]) => (
+                        <div key={key} className={css.hbox(8)}>
+                            <strong className={css.minWidth(120)}>{key}:</strong>
+                            <pre className={css.flexGrow(1).margin(0)}>{JSON.stringify(value, undefined, 2)}</pre>
+                        </div>
+                    ))}
+                </div>
+            )}
+
+            {timedOutMatches.length > 0 && (
+                <div className={css.hbox(8).pad2(8).bord2(200, 50, 60).hsl(200, 50, 95)}>
+                    <span>
+                        <span className={css.colorhsl(0, 0, 50)}>(expired {formatTime(Date.now() - timedOutMatches[0].timeout)} AGO)</span>
+                        {" "}
+                        <span className={css.colorhsl(0, 0, 0).boldStyle}>{timedOutMatches[0].pattern}</span>
+                        {timedOutMatches[0].notes && <span className={css.colorhsl(210, 80, 40)}> ({timedOutMatches[0].notes})</span>}
+                    </span>
+                    <Button
+                        hue={30}
+                        onClick={(e) => {
+                            if (this.props.inlineMode) {
+                                e.preventDefault();
+                                e.stopPropagation();
+                            }
+                            let timeout = Date.now() + timeInDay * 2;
+                            Querysub.onCommitFinished(async () => {
+                                await this.manager.updateTimeout(timedOutMatches[0].id, timeout);
+                            });
+                        }}
+                    >
+                        Fixed
+                    </Button>
+                    <Button
+                        hue={120}
+                        onClick={(e) => {
+                            if (this.props.inlineMode) {
+                                e.preventDefault();
+                                e.stopPropagation();
+                            }
+                            Querysub.onCommitFinished(async () => {
+                                await this.manager.updateTimeout(timedOutMatches[0].id, Infinity);
+                            });
+                        }}
+                    >
+                        Not a Bug
+                    </Button>
+                </div>
+            )}
+
+            {shouldBeSuppressed.length > 0 && timedOutMatches.length === 0 && (
+                <div className={css.pad2(8).bord2(30, 50, 60).hsl(30, 50, 95)}>
+                    <span>
+                        <span className={css.colorhsl(0, 0, 50)}>(for {formatTime(Date.now() - shouldBeSuppressed[0].lastUpdatedTime)})</span>
+                        {" "}
+                        <span className={css.colorhsl(0, 80, 30)}>{shouldBeSuppressed[0].pattern}</span>
+                        {shouldBeSuppressed[0].notes && <span className={css.colorhsl(210, 80, 40)}> ({shouldBeSuppressed[0].notes})</span>}
+                    </span>
+                </div>
+            )}
+        </div>;
+    }
+}
+
+export class ErrorNotificationPage extends qreact.Component {
+    state = t.state({
+        newFixedPattern: t.atomic<string>(""),
+        newNotABugPattern: t.atomic<string>(""),
+        testErrorMessage: t.atomic<string>("example error"),
+        showingAllErrors: t.atomic<boolean>(false),
+    });
+
+    manager = getErrorNotificationsManager();
+
+    render() {
+        if (this.manager.state.isLoading) {
+            return <div className={css.vbox(16).pad2(16)}>
+                <h2>Error Notifications</h2>
+                <div>Loading error notifications...</div>
+            </div>;
+        }
+
+        if (this.manager.state.initError) {
+            return <div className={css.vbox(16).pad2(16)}>
+                <h2>Error Notifications</h2>
+                {!isPublic() && <h1>
+                    IMPORTANT! You MUST run `yarn error-watch` to get errors notifications in the dev environment.
+                </h1>}
+                <div className={css.pad2(12).bord2(0, 80, 50).hsl(0, 80, 95).colorhsl(0, 80, 30)}>
+                    <strong>Error loading error notifications:</strong>
+                    <pre className={css.pad2(8).hsl(0, 0, 98).bord2(0, 0, 85)}>
+                        {this.manager.state.initError}
+                    </pre>
+                </div>
+            </div>;
+        }
+
+        let sortedErrors = [...this.manager.state.unmatchedErrors];
+        sort(sortedErrors, x => x.time);
+        let displayedErrors = this.state.showingAllErrors && sortedErrors || sortedErrors.slice(0, 5);
+
+        let sortedSuppressions = [...this.manager.state.suppressionEntries];
+        sort(sortedSuppressions, x => -x.lastUpdatedTime);
+
+        return <div className={css.vbox(16).pad2(16).fillWidth}>
+            <h2>Error Notifications</h2>
+
+            <div className={css.hbox(12).pad2(12).bord2(30, 50, 60).hsl(30, 50, 95)}>
+                <InputLabel
+                    label="Test Error Message"
+                    className={css.width(600)}
+                    value={this.state.testErrorMessage}
+                    onChangeValue={(value) => {
+                        this.state.testErrorMessage = value;
+                    }}
+                />
+                <Button
+                    hue={30}
+                    onClick={() => {
+                        let message = this.state.testErrorMessage;
+                        Querysub.onCommitFinished(async () => {
+                            await this.manager.logTestError(message);
+                        });
+                    }}
+                >
+                    Log Test Error
+                </Button>
+            </div>
+
+            <div className={css.vbox(12)}>
+                <h3>Unmatched Errors ({this.manager.state.unmatchedErrors.length})</h3>
+                {displayedErrors.length === 0 && <div>No unmatched errors</div>}
+                <div className={css.vbox(0)}>
+                    {displayedErrors.map((error, idx) => (
+                        <LogDatumRenderer key={idx} datum={error} />
+                    ))}
+                </div>
+                {sortedErrors.length > 5 && (
+                    <Button
+                        hue={200}
+                        onClick={() => {
+                            this.state.showingAllErrors = !this.state.showingAllErrors;
+                        }}
+                    >
+                        {this.state.showingAllErrors && "Show Less" || `Show More (${sortedErrors.length - 5} more)`}
+                    </Button>
+                )}
+            </div>
+
+            <div className={css.vbox(12)}>
+                <h3>Suppressions ({sortedSuppressions.length})</h3>
+
+                <div className={css.vbox(8).pad2(12).bord2(120, 50, 60).hsl(120, 50, 95)}>
+                    <InputLabel
+                        label="Fixed"
+                        value={this.state.newFixedPattern}
+                        onChangeValue={(value) => {
+                            this.state.newFixedPattern = value;
+                        }}
+                        onKeyDown={e => {
+                            if (e.key === "Enter") {
+                                let pattern = e.currentTarget.value.trim();
+                                if (pattern) {
+                                    this.state.newFixedPattern = pattern;
+                                    let timeout = Date.now() + timeInDay * 2;
+                                    Querysub.onCommitFinished(async () => {
+                                        await this.manager.addSuppression(pattern, timeout);
+                                        Querysub.commit(() => {
+                                            this.state.newFixedPattern = "";
+                                        });
+                                    });
+                                }
+                            }
+                        }}
+                        className={css.width(500)}
+                    />
+                    <InputLabel
+                        label="Not a Bug"
+                        value={this.state.newNotABugPattern}
+                        onChangeValue={(value) => {
+                            this.state.newNotABugPattern = value;
+                        }}
+                        onKeyDown={e => {
+                            if (e.key === "Enter") {
+                                let pattern = e.currentTarget.value.trim();
+                                if (pattern) {
+                                    this.state.newNotABugPattern = pattern;
+                                    Querysub.onCommitFinished(async () => {
+                                        await this.manager.addSuppression(pattern, Infinity);
+                                        Querysub.commit(() => {
+                                            this.state.newNotABugPattern = "";
+                                        });
+                                    });
+                                }
+                            }
+                        }}
+                        className={css.width(500)}
+                    />
+                </div>
+
+                <div className={css.vbox(12)}>
+                    {sortedSuppressions.map((suppression) => {
+                        let matchData = this.manager.state.suppressionMatches.get(suppression.id);
+
+                        return <SuppressionItem
+                            key={suppression.id}
+                            suppression={suppression}
+                            matchData={matchData}
+                        />;
+                    })}
+                </div>
+            </div>
+        </div>;
+    }
+}
+
+class SuppressionItem extends qreact.Component<{
+    suppression: {
+        id: string;
+        notes?: string;
+        pattern: string;
+        timeout: number;
+        createdTime: number;
+        lastUpdatedTime: number;
+    };
+    matchData: {
+        history: Map<number, { count: number }>;
+        exampleIndex: number;
+        examples: LogDatum[];
+    } | undefined;
+}> {
+    state = t.state({
+        showingAllExamples: t.atomic<boolean>(false),
+        patternValue: t.atomic<string>(""),
+        notesValue: t.atomic<string>(""),
+    });
+
+    manager = getErrorNotificationsManager();
+
+    componentDidMount() {
+        this.state.patternValue = this.props.suppression.pattern;
+        this.state.notesValue = this.props.suppression.notes ?? "";
+    }
+
+    componentDidUpdate(prevProps: any) {
+        if (prevProps.suppression.pattern !== this.props.suppression.pattern) {
+            this.state.patternValue = this.props.suppression.pattern;
+        }
+        if (prevProps.suppression.notes !== this.props.suppression.notes) {
+            this.state.notesValue = this.props.suppression.notes ?? "";
+        }
+    }
+
+    render() {
+        let suppression = this.props.suppression;
+        let matchData = this.props.matchData;
+        let totalCount = 0;
+        if (matchData) {
+            for (let [chunk, data] of matchData.history) {
+                totalCount += data.count;
+            }
+        }
+
+        let timeoutText: preact.ComponentChild;
+        if (suppression.timeout === Infinity) {
+            timeoutText = "Never expires";
+        } else if (suppression.timeout > Date.now()) {
+            timeoutText = <span>Expires <b>{formatTime(suppression.timeout - Date.now())}</b></span>;
+        } else {
+            timeoutText = <span>Expired <b>{formatTime(Date.now() - suppression.timeout)}</b> ago</span>;
+        }
+
+        return <div key={suppression.id} className={css.pad2(12).bord2(200, 30, 70).hsl(200, 30, 95).vbox(8)}>
+            <div className={css.hbox(12)}>
+                <ATag
+                    values={[
+                        managementPageURL.getOverride("LogViewer3"),
+                        searchTextURL.getOverride(suppression.pattern),
+                        readProductionLogsURL.getOverride(true),
+                    ]}
+                >
+                    View Logs
+                </ATag>
+                <Button
+                    hue={30}
+                    onClick={() => {
+                        let timeout = Date.now() + timeInDay * 2;
+                        Querysub.onCommitFinished(async () => {
+                            await this.manager.updateTimeout(suppression.id, timeout);
+                        });
+                    }}
+                >
+                    Fixed
+                </Button>
+                <Button
+                    hue={120}
+                    onClick={() => {
+                        Querysub.onCommitFinished(async () => {
+                            await this.manager.updateTimeout(suppression.id, Infinity);
+                        });
+                    }}
+                >
+                    Not a Bug
+                </Button>
+                <Button
+                    hue={30}
+                    onClick={() => {
+                        let timeout = Date.now();
+                        Querysub.onCommitFinished(async () => {
+                            await this.manager.updateTimeout(suppression.id, timeout);
+                        });
+                    }}
+                >
+                    Expire Now
+                </Button>
+                <Button
+                    hue={0}
+                    onClick={() => {
+                        if (!confirm(`Delete this suppression?`)) return;
+
+                        Querysub.onCommitFinished(async () => {
+                            await this.manager.deleteSuppression(suppression.id);
+                        });
+                    }}
+                >
+                    Delete
+                </Button>
+                <div className={css.hbox(20)}>
+                    <span><b>{formatNumber(totalCount)}</b> Matches</span>
+                    <span>Updated <b>{formatTime(Date.now() - suppression.lastUpdatedTime)}</b> AGO</span>
+                    <span>{timeoutText}</span>
+                </div>
+            </div>
+
+            <div className={css.hbox(20)}>
+                <InputLabel
+                    label="Pattern"
+                    value={this.state.patternValue}
+                    onChangeValue={(value) => {
+                        this.state.patternValue = value;
+                    }}
+                    onKeyDown={e => {
+                        if (e.key === "Enter") {
+                            let pattern = e.currentTarget.value.trim();
+                            if (!pattern) {
+                                alert("Pattern cannot be empty");
+                                return;
+                            }
+                            this.state.patternValue = pattern;
+                            Querysub.onCommitFinished(async () => {
+                                await this.manager.updateSuppression(suppression.id, pattern);
+                            });
+                        }
+                    }}
+                    className={css.width(500)}
+                />
+                <InputLabel
+                    label="Reason"
+                    value={this.state.notesValue}
+                    onChangeValue={(value) => {
+                        this.state.notesValue = value;
+                    }}
+                    onKeyDown={e => {
+                        if (e.key === "Enter") {
+                            let notes = e.currentTarget.value.trim();
+                            this.state.notesValue = notes;
+                            Querysub.onCommitFinished(async () => {
+                                await this.manager.updateNotes(suppression.id, notes && notes || undefined);
+                            });
+                        }
+                    }}
+                    className={css.width(500)}
+                />
+            </div>
+
+            {matchData && matchData.examples.length > 0 && (
+                <div className={css.hbox(8)}>
+                    {matchData.examples.length > 1 && (
+                        <Button
+                            hue={200}
+                            onClick={() => {
+                                this.state.showingAllExamples = !this.state.showingAllExamples;
+                            }}
+                        >
+                            {this.state.showingAllExamples && "Show Less" || `Show More (${matchData.examples.length - 1} more)`}
+                        </Button>
+                    )}
+                    <div className={css.vbox(4)}>
+                        {(this.state.showingAllExamples && matchData.examples || matchData.examples.slice(0, 1)).map((example, idx) => (
+                            <LogDatumRenderer key={idx} hideSuppression datum={example} pattern={suppression.pattern} />
+                        ))}
+                    </div>
+                </div>
+            )}
+        </div>;
+    }
+}

package/src/diagnostics/logs/errorNotifications2/ErrorWarning.tsx

@@ -0,0 +1,32 @@
+import { qreact } from "../../../4-dom/qreact";
+import { t } from "../../../2-proxy/schema2";
+import { css } from "typesafecss";
+import { Querysub } from "../../../4-querysub/QuerysubController";
+import { ATag } from "../../../library-components/ATag";
+import { managementPageURL } from "../../managementPages";
+import { LogDatumRenderer } from "./ErrorNotificationPage";
+import { getErrorNotificationsManager } from "./errorWatcher";
+
+export class ErrorWarning extends qreact.Component {
+    manager = getErrorNotificationsManager();
+
+    render() {
+        if (this.manager.state.isLoading) {
+            return undefined;
+        }
+
+        if (this.manager.state.unmatchedErrors.length === 0) {
+            return undefined;
+        }
+
+        let firstError = this.manager.state.unmatchedErrors[0];
+
+        return <div className={css.hbox(4).alignItems("start").hsl(0, 0, 90).bord2(0, 0, 85).pad2(4, 2).hslcolor(0, 0, 0)}>
+            <ATag className={css.paddingTop(5).flexShrink0} values={[managementPageURL.getOverride("ErrorNotificationPage")]}>
+                Suppress
+            </ATag>
+            <div className={css.paddingTop(5)}>|</div>
+            <LogDatumRenderer datum={firstError} inlineMode />
+        </div>;
+    }
+}