querysub 0.395.0 → 0.397.0

package/src/diagnostics/logs/lifeCycleAnalysis/LifeCycleRenderer.tsx

@@ -0,0 +1,291 @@
+import { SocketFunction } from "socket-function/SocketFunction";
+import { formatDateTime, formatTime } from "socket-function/src/formatting/format";
+import { deepCloneJSON } from "socket-function/src/misc";
+import { css } from "typesafecss";
+import { t } from "../../../2-proxy/schema2";
+import { qreact } from "../../../4-dom/qreact";
+import { Querysub } from "../../../4-querysub/QuerysubController";
+import { formatValue } from "../../../5-diagnostics/GenericFormat";
+import { Button } from "../../../library-components/Button";
+import { InputLabel } from "../../../library-components/InputLabel";
+import { StartEllipsis } from "../../../library-components/StartEllipsis";
+import { niceStringify } from "../../../niceStringify";
+import { getPathStr } from "../../../path";
+import { MachineThreadInfo } from "../../MachineThreadInfo";
+import { LifeCycleEntryEditor } from "./LifeCycleEntryEditor";
+import { lifecycleIdURL } from "./LifeCyclePage";
+import { LifecycleInstance } from "./lifeCycleSearch";
+import { LifeCycle, LifeCyclesController, LifeCycleEntry } from "./lifeCycles";
+
+export class LifeCycleRenderer extends qreact.Component<{
+    lifeCycle: LifeCycle;
+    defaultEditMode?: boolean;
+    onSearch?: (lifeCycleId: string) => void;
+}> {
+    state = t.state({
+        expanded: t.atomic<boolean>(false),
+    });
+
+    controller = LifeCyclesController(SocketFunction.browserNodeId());
+
+    render() {
+        let lifeCycle = this.props.lifeCycle;
+        let isSelected = lifecycleIdURL.value === lifeCycle.id;
+        let bgClass = isSelected && css.hsl(280, 50, 90) || css.hsl(200, 30, 95);
+        let borderHue = isSelected && 280 || 200;
+
+        return <div className={css.pad2(12).bord2(borderHue, 30, 70).vbox(8) + bgClass}>
+            <div className={css.hbox(12)}>
+                <Button
+                    hue={borderHue}
+                    onClick={() => {
+                        this.state.expanded = !this.state.expanded;
+                    }}
+                >
+                    {this.state.expanded && "▼" || "▶"} {lifeCycle.title}
+                </Button>
+                <span>{lifeCycle.entries.length} entries</span>
+                {this.props.onSearch && (
+                    <Button
+                        hue={280}
+                        onClick={() => {
+                            if (this.props.onSearch) {
+                                this.props.onSearch(lifeCycle.id);
+                            }
+                        }}
+                    >
+                        Search
+                    </Button>
+                )}
+                {isSelected && (
+                    <Button
+                        hue={200}
+                        onClick={() => {
+                            lifecycleIdURL.value = "";
+                        }}
+                    >
+                        Clear Selection
+                    </Button>
+                ) || (
+                        <Button
+                            hue={280}
+                            onClick={() => {
+                                lifecycleIdURL.value = lifeCycle.id;
+                                void this.props.onSearch?.(lifeCycle.id);
+                            }}
+                        >
+                            Pin
+                        </Button>
+                    )}
+                <Button
+                    hue={0}
+                    onClick={() => {
+                        if (!confirm(`Delete life cycle "${lifeCycle.title}"?`)) return;
+
+                        Querysub.onCommitFinished(async () => {
+                            await this.controller.deleteLifeCycle.promise(lifeCycle.id);
+                        });
+                    }}
+                >
+                    Delete
+                </Button>
+            </div>
+
+            {this.state.expanded && (
+                <div className={css.vbox(8)}>
+                    <InputLabel
+                        label="Title"
+                        value={lifeCycle.title}
+                        onChangeValue={(value) => {
+                            let title = value.trim();
+                            if (!title) return;
+                            let updatedLifeCycle = deepCloneJSON(lifeCycle);
+                            updatedLifeCycle.title = title;
+                            Querysub.onCommitFinished(async () => {
+                                await this.controller.setLifeCycle.promise(updatedLifeCycle);
+                            });
+                        }}
+                        className={css.width(500)}
+                    />
+
+                    <div className={css.vbox(4)}>
+                        {lifeCycle.entries.map((entry, idx) => (
+                            <LifeCycleEntryEditor
+                                key={entry.matchPattern + idx}
+                                lifeCycle={lifeCycle}
+                                entry={entry}
+                                entryIndex={idx}
+                                defaultEditMode={this.props.defaultEditMode}
+                            />
+                        ))}
+
+                        <InputLabel
+                            placeholder="Add new entry (match pattern)"
+                            onChangeValue={(value) => {
+                                let matchPattern = value.trim();
+                                if (matchPattern) {
+                                    let defaultGroupByKeys = lifeCycle.entries.length > 0 && lifeCycle.entries[0].groupByKeys && deepCloneJSON(lifeCycle.entries[0].groupByKeys) || [];
+                                    let newEntry: LifeCycleEntry = {
+                                        matchPattern,
+                                        sourceType: "info",
+                                        groupByKeys: defaultGroupByKeys,
+                                        variables: {},
+                                    };
+                                    let updatedLifeCycle = deepCloneJSON(lifeCycle);
+                                    let firstEndIndex = updatedLifeCycle.entries.findIndex(e => e.isEnd);
+                                    if (firstEndIndex !== -1) {
+                                        updatedLifeCycle.entries.splice(firstEndIndex, 0, newEntry);
+                                    } else {
+                                        updatedLifeCycle.entries.push(newEntry);
+                                    }
+                                    Querysub.onCommitFinished(async () => {
+                                        await this.controller.setLifeCycle.promise(updatedLifeCycle);
+                                    });
+                                }
+                            }}
+                            className={css.width(500)}
+                        />
+                    </div>
+                </div>
+            )}
+        </div>;
+    }
+}
+
+
+export class LifeCycleInstanceRenderer extends qreact.Component<{
+    lifeCycle: LifeCycle;
+    instance: LifecycleInstance;
+}> {
+    state = t.state({
+        expanded: t.atomic<boolean>(false),
+    });
+
+    render() {
+        let { lifeCycle, instance } = this.props;
+
+        let bgClass = (
+            instance.isMissingStart && css.hsl(60, 60, 90) ||
+            instance.isMissingEnd && css.hsl(200, 60, 90) ||
+            instance.isComplete && css.hsl(120, 30, 95) ||
+            instance.isTruncated && css.hsl(0, 60, 90) ||
+            css.hsl(280, 30, 95)
+        );
+
+        let borderHue = (
+            instance.isMissingStart && 60
+            || instance.isMissingEnd && 200
+            || instance.isComplete && 120
+            || instance.isTruncated && 1
+            || 280
+        );
+
+        let firstDatum = instance.entries[0]?.datum;
+
+        let statusTitle = (
+            instance.isMissingStart && "⚠ Missing start entry" ||
+            instance.isMissingEnd && "⚠ Missing end entry" ||
+            instance.isComplete && "✓ Complete" ||
+            instance.isTruncated && "⚠ Truncated (ended by new start)" ||
+            "Incomplete"
+        );
+
+        return <div
+            className={
+                css.pad2(4).bord2(borderHue, 40, 70)
+                    .vbox(8)
+                    .button.userSelect("auto", "important")
+                + " LifeCycleInstanceRenderer"
+                + bgClass
+            }
+            title={statusTitle}
+            onClick={(e) => {
+                if ((e.target as HTMLElement).closest(".LifeCycleEntryEditor")) {
+                    return;
+                }
+                this.state.expanded = !this.state.expanded;
+            }}
+        >
+            <div className={css.hbox(12, 4)}>
+                <Button
+                    hue={borderHue}
+                >
+                    {this.state.expanded && "▼" || "▶"}
+                </Button>
+                <span className={css.minWidth(200).hbox(12)}>
+                    <span className={css.colorhsl(220, 60, 50)}>
+                        {formatDateTime(instance.startTime)}
+                    </span>
+                    {instance.endTime !== undefined && (
+                        <span className={css.colorhsl(220, 60, 50)}>
+                            ({formatTime(instance.endTime - instance.startTime)})
+                        </span>
+                    )}
+                </span>
+                <span>{instance.entries.length} entries</span>
+                {firstDatum && firstDatum.__machineId && (
+                    <MachineThreadInfo
+                        machineId={firstDatum.__machineId}
+                        threadId={firstDatum.__threadId}
+                    />
+                )}
+                <div className={css.hbox(8, 4).wrap.flexFillWidth}>
+                    {instance.keys.filter(k => !["__threadId", "__machineId"].includes(k.key)).map((kv, idx, list) => (
+                        <div key={idx} className={css.hbox(4)}>
+                            <span className={css.colorhsl(200, 50, 60).boldStyle}>{kv.key}</span>
+                            <span className={css.colorhsl(0, 0, 50)} title={String(kv.value)}>
+                                <StartEllipsis maxWidth={Math.ceil(600 / list.length)}>
+                                    {niceStringify(kv.value)}
+                                </StartEllipsis>
+                            </span>
+                        </div>
+                    ))}
+                    {(() => {
+                        let uniqueVars = new Map<string, { key: string; title: string | undefined; value: unknown }>();
+                        for (let entryData of instance.entries) {
+                            let entry = lifeCycle.entries.find(e => e.matchPattern === entryData.matchPattern);
+                            if (!entry) continue;
+                            for (let [key, config] of Object.entries(entry.variables)) {
+                                let value = entryData.datum[key];
+                                if (value === undefined) continue;
+                                // Now just the key, so the preview is easier to read
+                                let uniqueId = key;
+                                if (!uniqueVars.has(uniqueId)) {
+                                    uniqueVars.set(uniqueId, {
+                                        key: key,
+                                        title: config?.title || undefined,
+                                        value: value,
+                                    });
+                                }
+                            }
+                        }
+                        return Array.from(uniqueVars.values()).map((varData, idx) => (
+                            <div key={idx} className={css.hbox(4)}>
+                                <span className={css.colorhsl(0, 0, 0).boldStyle}>{varData.title || varData.key}</span>
+                                <span className={css.colorhsl(0, 0, 50)} title={niceStringify(varData.value)}>{formatValue(varData.value)}</span>
+                            </div>
+                        ));
+                    })()}
+                </div>
+            </div>
+
+            {this.state.expanded && (
+                <div className={css.vbox(8)}>
+                    {instance.entries.map((entryData, idx) => {
+                        let entryIndex = lifeCycle.entries.findIndex(e => e.matchPattern === entryData.matchPattern);
+                        let entry = lifeCycle.entries[entryIndex];
+                        return <LifeCycleEntryEditor
+                            key={idx}
+                            lifeCycle={lifeCycle}
+                            entry={entry}
+                            entryIndex={entryIndex}
+                            defaultEditMode={false}
+                            datum={entryData.datum}
+                        />;
+                    })}
+                </div>
+            )}
+        </div>;
+    }
+}
+

package/src/diagnostics/logs/lifeCycleAnalysis/NestedLifeCycleInfo.tsx

@@ -0,0 +1,151 @@
+import { SocketFunction } from "socket-function/SocketFunction";
+import { css } from "typesafecss";
+import { t } from "../../../2-proxy/schema2";
+import { qreact } from "../../../4-dom/qreact";
+import { formatValue } from "../../../5-diagnostics/GenericFormat";
+import { Button } from "../../../library-components/Button";
+import { niceStringify } from "../../../niceStringify";
+import { LogDatum } from "../diskLogger";
+import { LifeCycle, LifeCyclesController, getVariables } from "./lifeCycles";
+import { createLifeCycleSearch, LifecycleInstance } from "./lifeCycleSearch";
+import { IndexedLogResults } from "../IndexedLogs/BufferIndexHelpers";
+import { formatSearchString } from "../IndexedLogs/LogViewerParams";
+import { getPathStr, getPathStr2 } from "../../../path";
+
+export class NestedLifeCycleInfo extends qreact.Component<{
+    keyName: string;
+    value: unknown;
+    aliases: string[];
+    currentLifeCycleId: string;
+}> {
+    state = t.state({
+        searchingLifeCycleId: t.atomic<string | undefined>(undefined),
+        phase1Results: t.atomic<LogDatum[]>([]),
+        phase1InvalidResults: t.atomic<Array<{ datum: LogDatum; missingKeys: string[] }>>([]),
+        phase1Stats: t.atomic<IndexedLogResults | undefined>(undefined),
+        phase1Searching: t.boolean(false),
+        phase2Results: t.atomic<LogDatum[]>([]),
+        phase2Stats: t.atomic<IndexedLogResults | undefined>(undefined),
+        phase2Searching: t.boolean(false),
+        phase2HitLimit: t.boolean(false),
+        lifecycleInstances: t.atomic<LifecycleInstance[]>([]),
+    });
+
+    controller = LifeCyclesController(SocketFunction.browserNodeId());
+    search = createLifeCycleSearch(this);
+
+    render() {
+        let lifeCycles = this.controller.getLifeCycles();
+        if (!lifeCycles) return null;
+
+        let { keyName, value, aliases, currentLifeCycleId } = this.props;
+
+        let allKeysToMatch = [keyName, ...aliases].filter(x => !["__threadId", "__machineId"].includes(x));
+        let matchingLifeCycles: Array<{ lifecycle: LifeCycle; matchedKey: string }> = [];
+
+        for (let lifecycle of lifeCycles) {
+            if (lifecycle.id === currentLifeCycleId) continue;
+
+            let matchedKey: string | undefined = undefined;
+            for (let entry of lifecycle.entries) {
+                for (let groupByKey of entry.groupByKeys) {
+                    if (allKeysToMatch.includes(groupByKey.ourKey)) {
+                        matchedKey = groupByKey.ourKey;
+                        break;
+                    }
+                }
+                if (matchedKey !== undefined) break;
+            }
+
+            if (matchedKey !== undefined) {
+                matchingLifeCycles.push({ lifecycle, matchedKey });
+            }
+        }
+
+        if (matchingLifeCycles.length === 0) return null;
+
+        return <>
+            {matchingLifeCycles.map(({ lifecycle, matchedKey }) => {
+                let isSearchingThis = this.state.searchingLifeCycleId === lifecycle.id;
+                let isSearching = isSearchingThis && (this.state.phase1Searching || this.state.phase2Searching);
+                let hasSearched = isSearchingThis && !isSearching;
+
+                let instances = hasSearched && this.state.lifecycleInstances.filter(inst =>
+                    inst.keys.some(k => k.key === matchedKey && k.value === value)
+                ) || [];
+                let hasResults = instances.length > 0;
+
+                let progressText = "";
+                if (isSearching && isSearchingThis) {
+                    let parts: string[] = [];
+
+                    if (this.state.phase1Searching || this.state.phase1Stats) {
+                        let stats = this.state.phase1Stats;
+                        let blocksScanned = stats && (stats.localFilesSearched + stats.backblazeFilesSearched) || 0;
+                        let resultsCount = this.state.phase1Results.length;
+                        parts.push(`${blocksScanned} > ${resultsCount}`);
+                    }
+
+                    if (this.state.phase2Searching) {
+                        let stats = this.state.phase2Stats;
+                        let blocksScanned = stats && (stats.localFilesSearched + stats.backblazeFilesSearched) || 0;
+                        let resultsCount = this.state.phase2Results.length;
+                        parts.push(`${blocksScanned} > ${resultsCount}`);
+                    }
+
+                    progressText = parts.length > 0 && `(${parts.join(" | ")})` || "(...)";
+                }
+
+                return <>
+                    <Button
+                        hue={180}
+                        onClick={() => {
+                            void this.search.searchLifeCycle({
+                                lifeCycleId: lifecycle.id,
+                                limit: 10,
+                                additionalSearch: formatSearchString({ [matchedKey]: value })
+                            });
+                        }}
+                    >
+                        {lifecycle.title} {isSearching && "⏳" || ""} {progressText} {hasSearched && `(${instances.length})` || ""}
+                    </Button>
+                    {hasSearched && !hasResults && (
+                        <div className={css.pad2(4).colorhsl(0, 0, 50)}>No results found</div>
+                    )}
+                    {hasResults && (() => {
+                        let firstInstance = instances[0];
+                        let totalCount = instances.length;
+                        let hitLimit = totalCount >= 10;
+
+                        let keys = lifecycle.entries.map(x => x.groupByKeys.map(y => y.ourKey).concat(Object.keys(x.variables))).flat();
+
+                        function valueHash(key: string, value: unknown) {
+                            return getPathStr2(key, String(value));
+                        }
+                        let values = new Map<string, { key: string; value: unknown }>();
+                        for (let entry of firstInstance.entries) {
+                            for (let [key, value] of Object.entries(entry.datum)) {
+                                if (!keys.includes(key)) continue;
+                                if (key === matchedKey) continue;
+                                if (["__threadId", "__machineId"].includes(key)) continue;
+                                values.set(valueHash(key, value), { key, value });
+                            }
+                        }
+
+                        return <>
+                            <div className={css.hbox(4)}>
+                                {hitLimit && <span className={css.colorhsl(30, 80, 40).boldStyle}>(hit limit!)</span>}
+                            </div>
+                            {Array.from(values.values()).map(({ key, value }, idx) => (
+                                <div key={idx} className={css.hbox(4)}>
+                                    <span className={css.colorhsl(200, 50, 60).boldStyle}>{key}:</span>
+                                    <span className={css.colorhsl(0, 0, 50)}>{niceStringify(value)}</span>
+                                </div>
+                            ))}
+                        </>;
+                    })()}
+                </>;
+            })}
+        </>;
+    }
+}