querysub 0.378.0 → 0.379.0

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

@@ -1,276 +1,505 @@
 import { qreact } from "../../../4-dom/qreact";
 import { t } from "../../../2-proxy/schema2";
 import { css } from "typesafecss";
-import { ErrorNotificationsController, watchUnmatchedErrors } from "./errorNotifications";
 import { LogDatum } from "../diskLogger";
-import { sort, nextId } from "socket-function/src/misc";
-import { formatVeryNiceDateTime } from "socket-function/src/formatting/format";
+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 { SocketFunction } from "socket-function/SocketFunction";
 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";
 
-export class ErrorNotificationPage extends qreact.Component {
+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({
-        unmatchedErrors: t.atomic<LogDatum[]>([]),
-        suppressionMatches: t.atomic<Map<string, {
-            history: Map<number, { count: number }>;
-            exampleIndex: number;
-            examples: LogDatum[];
-        }>>(new Map()),
-        suppressionEntries: t.atomic<Array<{
-            id: string;
-            description: string;
-            pattern: string;
-            createdTime: number;
-            lastUpdatedTime: number;
-        }>>([]),
-        addingNewSuppression: t.atomic<boolean>(false),
-        newSuppressionDescription: t.atomic<string>(""),
-        newSuppressionPattern: t.atomic<string>(""),
-        initError: t.atomic<string | undefined>(undefined),
-        isLoading: t.atomic<boolean>(true),
-        testErrorMessage: t.atomic<string>("example error"),
+        expanded: t.atomic<boolean>(false),
     });
 
+    manager = getErrorNotificationsManager();
 
-    unsubscribe?: () => void;
+    render() {
+        let datum = this.props.datum;
+        let mainMessage = datum.param0 && String(datum.param0) || "(no message)";
 
-    componentDidMount() {
-        Querysub.onCommitFinished(async () => {
-            try {
-                this.unsubscribe = await watchUnmatchedErrors({
-                    callback: (datums: LogDatum[]) => {
-                        Querysub.commit(() => {
-                            this.state.unmatchedErrors = [...this.state.unmatchedErrors, ...datums];
-                        });
-                    },
-                });
-
-                let controller = ErrorNotificationsController(SocketFunction.browserNodeId());
-                let data = await controller.getData.promise();
-                let suppressionEntries = await controller.getSuppressionEntries.promise();
-
-                Querysub.commit(() => {
-                    this.state.unmatchedErrors = data.unmatchedErrors;
-                    this.state.suppressionMatches = data.suppressionMatches;
-                    this.state.suppressionEntries = suppressionEntries;
-                    this.state.initError = undefined;
-                    this.state.isLoading = false;
-                });
-            } catch (error) {
-                Querysub.commit(() => {
-                    this.state.initError = error instanceof Error ? error.message : String(error);
-                    this.state.isLoading = false;
-                });
+        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);
 
-    componentWillUnmount() {
-        this.unsubscribe?.();
+        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.state.isLoading) {
+        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.state.initError) {
+        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.state.initError}
+                        {this.manager.state.initError}
                     </pre>
                 </div>
             </div>;
         }
 
-        let sortedErrors = [...this.state.unmatchedErrors];
-        sort(sortedErrors, x => -x.time);
-        let recentErrors = sortedErrors.slice(0, 10);
+        let sortedErrors = [...this.manager.state.unmatchedErrors];
+        sort(sortedErrors, x => x.time);
+        let displayedErrors = this.state.showingAllErrors && sortedErrors || sortedErrors.slice(0, 5);
 
-        let sortedSuppressions = [...this.state.suppressionEntries];
+        let sortedSuppressions = [...this.manager.state.suppressionEntries];
         sort(sortedSuppressions, x => -x.lastUpdatedTime);
 
-        return <div className={css.vbox(16).pad2(16)}>
+        return <div className={css.vbox(16).pad2(16).fillWidth}>
             <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.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;
                     }}
-                    className={css.width(400)}
                 />
-                <button
-                    className={css.pad2(12, 8).button.bord2(30, 80, 50).hsl(30, 80, 85)}
+                <Button
+                    hue={30}
                     onClick={() => {
                         let message = this.state.testErrorMessage;
                         Querysub.onCommitFinished(async () => {
-                            let controller = ErrorNotificationsController(SocketFunction.browserNodeId());
-                            await controller.logTestError.promise(message);
+                            await this.manager.logTestError(message);
                         });
                     }}
                 >
                     Log Test Error
-                </button>
+                </Button>
             </div>
 
             <div className={css.vbox(12)}>
-                <h3>Unmatched Errors ({this.state.unmatchedErrors.length})</h3>
-                {recentErrors.length === 0 && <div>No unmatched errors</div>}
-                <div className={css.vbox(8)}>
-                    {recentErrors.map((error, idx) => (
-                        <div key={idx} className={css.pad2(12).bord2(0, 30, 70).hsl(0, 50, 95).vbox(4)}>
-                            <div className={css.hbox(8)}>
-                                <strong>{formatVeryNiceDateTime(error.time)}</strong>
-                                {error.machineId && <span>Machine: {error.machineId}</span>}
-                            </div>
-                            <pre className={css.overflowAuto.pad2(8).hsl(0, 0, 98).bord2(0, 0, 85)}>
-                                {JSON.stringify(error)}
-                            </pre>
-                        </div>
+                <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>
-            </div>
-
-            <div className={css.vbox(12)}>
-                <div className={css.hbox(12)}>
-                    <h3>Suppressions ({sortedSuppressions.length})</h3>
-                    <button
-                        className={css.pad2(12, 8).button.bord2(120, 80, 50).hsl(120, 80, 90)}
+                {sortedErrors.length > 5 && (
+                    <Button
+                        hue={200}
                         onClick={() => {
-                            this.state.addingNewSuppression = !this.state.addingNewSuppression;
+                            this.state.showingAllErrors = !this.state.showingAllErrors;
                         }}
                     >
-                        {this.state.addingNewSuppression ? "Cancel" : "Add Suppression"}
-                    </button>
-                </div>
+                        {this.state.showingAllErrors && "Show Less" || `Show More (${sortedErrors.length - 5} more)`}
+                    </Button>
+                )}
+            </div>
 
-                {this.state.addingNewSuppression && (
-                    <div className={css.vbox(8).pad2(12).bord2(120, 50, 60).hsl(120, 50, 95)}>
-                        <InputLabel
-                            label="Description"
-                            value={this.state.newSuppressionDescription}
-                            onChangeValue={(value) => {
-                                this.state.newSuppressionDescription = value;
-                            }}
-                            className={css.width(500)}
-                        />
-                        <InputLabel
-                            label="Pattern (regex)"
-                            value={this.state.newSuppressionPattern}
-                            onChangeValue={(value) => {
-                                this.state.newSuppressionPattern = value;
-                            }}
-                            className={css.width(500)}
-                        />
-                        <button
-                            className={css.pad2(12, 8).button.bord2(120, 80, 50).hsl(120, 80, 85)}
-                            onClick={() => {
-                                let description = this.state.newSuppressionDescription;
-                                let pattern = this.state.newSuppressionPattern;
-                                if (!description || !pattern) {
-                                    alert("Description and pattern are required");
-                                    return;
-                                }
+            <div className={css.vbox(12)}>
+                <h3>Suppressions ({sortedSuppressions.length})</h3>
 
-                                Querysub.onCommitFinished(async () => {
-                                    let now = Date.now();
-                                    let newEntry = {
-                                        id: nextId(),
-                                        description,
-                                        pattern,
-                                        createdTime: now,
-                                        lastUpdatedTime: now,
-                                    };
-                                    let controller = ErrorNotificationsController(SocketFunction.browserNodeId());
-                                    await controller.setSuppressionEntry.promise(newEntry);
-
-                                    let suppressionEntries = await controller.getSuppressionEntries.promise();
-                                    Querysub.commit(() => {
-                                        this.state.suppressionEntries = suppressionEntries;
-                                        this.state.addingNewSuppression = false;
-                                        this.state.newSuppressionDescription = "";
-                                        this.state.newSuppressionPattern = "";
+                <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 = "";
+                                        });
                                     });
-                                });
-                            }}
-                        >
-                            Save Suppression
-                        </button>
-                    </div>
-                )}
+                                }
+                            }
+                        }}
+                        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.state.suppressionMatches.get(suppression.id);
-                        let totalCount = 0;
-                        if (matchData) {
-                            for (let [chunk, data] of matchData.history) {
-                                totalCount += data.count;
-                            }
-                        }
+                        let matchData = this.manager.state.suppressionMatches.get(suppression.id);
 
-                        return <div key={suppression.id} className={css.pad2(12).bord2(200, 30, 70).hsl(200, 30, 95).vbox(8)}>
-                            <div className={css.hbox(12)}>
-                                <div className={css.flexGrow(1).vbox(4)}>
-                                    <strong>{suppression.description}</strong>
-                                    <div className={css.hbox(12)}>
-                                        <span>Pattern: <code className={css.pad2(4, 2).hsl(0, 0, 90)}>{suppression.pattern}</code></span>
-                                        <span>Total Matches: {totalCount}</span>
-                                    </div>
-                                    <div className={css.hbox(12)}>
-                                        <span>Created: {formatVeryNiceDateTime(suppression.createdTime)}</span>
-                                        <span>Updated: {formatVeryNiceDateTime(suppression.lastUpdatedTime)}</span>
-                                    </div>
-                                </div>
-                                <button
-                                    className={css.pad2(8, 6).button.bord2(0, 80, 50).hsl(0, 80, 90)}
-                                    onClick={() => {
-                                        if (!confirm(`Delete suppression "${suppression.description}"?`)) return;
-
-                                        Querysub.onCommitFinished(async () => {
-                                            let controller = ErrorNotificationsController(SocketFunction.browserNodeId());
-                                            await controller.deleteSuppressionEntry.promise(suppression.id);
-
-                                            let suppressionEntries = await controller.getSuppressionEntries.promise();
-                                            Querysub.commit(() => {
-                                                this.state.suppressionEntries = suppressionEntries;
-                                            });
-                                        });
-                                    }}
-                                >
-                                    Delete
-                                </button>
-                            </div>
-
-                            {matchData && matchData.examples.length > 0 && (
-                                <div className={css.vbox(8)}>
-                                    <strong>Recent Examples ({matchData.examples.length}):</strong>
-                                    {matchData.examples.slice(0, 3).map((example, idx) => (
-                                        <pre key={idx} className={css.overflowAuto.pad2(8).hsl(0, 0, 98).bord2(0, 0, 85).fontSize(12)}>
-                                            {JSON.stringify(example, null, 2)}
-                                        </pre>
-                                    ))}
-                                </div>
-                            )}
-                        </div>;
+                        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>;
+    }
+}