querysub 0.490.0 → 0.492.0

package/src/diagnostics/misc-pages/FunctionCapturePage.tsx

@@ -0,0 +1,192 @@
+module.allowclient = true;
+
+import { qreact } from "../../4-dom/qreact";
+import { SocketFunction } from "socket-function/SocketFunction";
+import { getBrowserUrlNode } from "../../-f-node-discovery/NodeDiscovery";
+import { css } from "typesafecss";
+import { Querysub, t } from "../../4-querysub/Querysub";
+import { Button } from "../../library-components/Button";
+import { ATag } from "../../library-components/ATag";
+import { formatDateTime, formatNumber, formatTime } from "socket-function/src/formatting/format";
+import { green, red } from "socket-function/src/formatting/logColors";
+import { assertIsManagementUser, managementPageURL } from "../managementPages";
+import { getControllerNodeIdList } from "../../-g-core-values/NodeCapabilities";
+import { errorToUndefined } from "../../errors";
+import { CaptureStatus, FunctionCaptureController } from "../../3-path-functions/functionCapture";
+
+interface RunnerStatus {
+    nodeId: string;
+    entryPoint: string;
+    status?: CaptureStatus;
+}
+
+const REFRESH_INTERVAL = 1000;
+
+export class FunctionCapturePage extends qreact.Component {
+    state = t.state({
+        statuses: t.atomic<RunnerStatus[]>(),
+        busy: t.lookup(t.boolean),
+        error: t.string(""),
+    });
+
+    private intervalId: ReturnType<typeof setInterval> | undefined;
+
+    componentDidMount() {
+        void this.refresh();
+        this.intervalId = setInterval(() => void this.refresh(), REFRESH_INTERVAL);
+    }
+    componentWillUnmount() {
+        if (this.intervalId) clearInterval(this.intervalId);
+    }
+
+    private async refresh() {
+        try {
+            let statuses = await FunctionCaptureProxyController.nodes[getBrowserUrlNode()].getStatuses();
+            Querysub.localCommit(() => {
+                this.state.statuses = statuses;
+                this.state.error = "";
+            });
+        } catch (e: any) {
+            Querysub.localCommit(() => {
+                this.state.error = String(e?.stack || e);
+            });
+        }
+    }
+
+    render() {
+        let statuses = this.state.statuses;
+        return <div className={css.pad2(10).vbox(14).fillWidth}>
+            <h1>Function Capture</h1>
+            <div>Turn on capturing to record fully-resolved function runs (reads, writes, timings) on a runner. Stop to download a capture file, then analyze it in the <ATag values={[{ param: managementPageURL, value: "FunctionCaptureAnalyzePage" }]}>Capture Analyzer</ATag>.</div>
+            {this.state.error && <div className={css.colorhsl(0, 70, 60)}>{this.state.error}</div>}
+            {!statuses && <div>Loading runners…</div>}
+            {statuses && statuses.length === 0 && <div>No function runners found.</div>}
+            {statuses && statuses.length > 0 &&
+                <div className={css.vbox(1).fillWidth}>
+                    <div className={css.hbox(20).fillWidth.borderBottom("1px solid hsla(0,0%,0%,0.3)").pad2(6, 4).fontWeight("bold")}>
+                        <div className={css.width(280)}>Runner</div>
+                        <div className={css.width(90)}>Capturing</div>
+                        <div className={css.width(90)}>Calls</div>
+                        <div className={css.width(120)}>Size</div>
+                        <div className={css.width(140)}>Started</div>
+                        <div>Actions</div>
+                    </div>
+                    {statuses.map(runner => this.renderRunner(runner))}
+                </div>
+            }
+        </div>;
+    }
+
+    private renderRunner(runner: RunnerStatus) {
+        let status = runner.status;
+        let busy = runner.nodeId in this.state.busy;
+        return <div className={css.hbox(20).fillWidth.borderBottom("1px solid hsla(0,0%,0%,0.15)").pad2(6, 4)}>
+            <div className={css.width(280).vbox(2)}>
+                <div>{runner.entryPoint}</div>
+                <div className={css.fontSize(11).colorhsl(0, 0, 45).ellipsis.maxWidth(280)}>{runner.nodeId}</div>
+            </div>
+            <div className={css.width(90)}>{!status ? "?" : status.capturing ? "● live" : "off"}</div>
+            <div className={css.width(90)}>{status ? formatNumber(status.callCount) : "-"}{status && status.pendingCount > 0 && ` (+${status.pendingCount})`}</div>
+            <div className={css.width(120)}>{status ? `${formatNumber(status.byteCount)} B` : "-"}</div>
+            <div className={css.width(140)}>{status && status.startedAt ? formatTime(Date.now() - status.startedAt) + " ago" : "-"}</div>
+            <div className={css.hbox(8)}>
+                {status && !status.capturing &&
+                    <Button disabled={busy} onClick={() => this.runAction(runner, "start")}>Start</Button>
+                }
+                {status && status.capturing &&
+                    <Button disabled={busy} onClick={() => this.runAction(runner, "stop")}>Stop &amp; Download</Button>
+                }
+                {status && !status.capturing && (status.callCount > 0) &&
+                    <Button disabled={busy} onClick={() => this.downloadCapture(runner)}>Download</Button>
+                }
+                {status && !status.capturing && (status.callCount > 0) &&
+                    <Button disabled={busy} onClick={() => this.runAction(runner, "clear")}>Clear</Button>
+                }
+            </div>
+        </div>;
+    }
+
+    private async runAction(runner: RunnerStatus, action: "start" | "stop" | "clear") {
+        if (Querysub.fastRead(() => runner.nodeId in this.state.busy)) return;
+        Querysub.localCommit(() => { this.state.busy[runner.nodeId] = true; });
+        try {
+            let proxy = FunctionCaptureProxyController.nodes[getBrowserUrlNode()];
+            if (action === "start") {
+                await proxy.startCapture({ nodeId: runner.nodeId });
+            } else if (action === "clear") {
+                await proxy.clearCapture({ nodeId: runner.nodeId });
+            } else if (action === "stop") {
+                let buffer = await proxy.stopCapture({ nodeId: runner.nodeId });
+                downloadBuffer(buffer, runner);
+            }
+            console.log(green(`${action} capture on ${runner.entryPoint}`));
+        } catch (e: any) {
+            console.error(red(`Failed to ${action} capture on ${runner.nodeId}: ${e.stack}`));
+        } finally {
+            Querysub.localCommit(() => { delete this.state.busy[runner.nodeId]; });
+            void this.refresh();
+        }
+    }
+
+    private async downloadCapture(runner: RunnerStatus) {
+        if (Querysub.fastRead(() => runner.nodeId in this.state.busy)) return;
+        Querysub.localCommit(() => { this.state.busy[runner.nodeId] = true; });
+        try {
+            let buffer = await FunctionCaptureProxyController.nodes[getBrowserUrlNode()].stopCapture({ nodeId: runner.nodeId });
+            downloadBuffer(buffer, runner);
+        } catch (e: any) {
+            console.error(red(`Failed to download capture on ${runner.nodeId}: ${e.stack}`));
+        } finally {
+            Querysub.localCommit(() => { delete this.state.busy[runner.nodeId]; });
+            void this.refresh();
+        }
+    }
+}
+
+function downloadBuffer(buffer: Buffer, runner: RunnerStatus) {
+    let blob = new Blob([buffer]);
+    let url = URL.createObjectURL(blob);
+    let anchor = document.createElement("a");
+    anchor.href = url;
+    let label = runner.entryPoint.replace(/[^A-Za-z0-9_.-]+/g, "_");
+    anchor.download = `function-capture-${label}-${formatDateTime(Date.now())}.qsfncap`;
+    document.body.appendChild(anchor);
+    anchor.click();
+    document.body.removeChild(anchor);
+    URL.revokeObjectURL(url);
+}
+
+// Management-side proxy: pages can't talk to runner processes directly, so this endpoint (running
+//      where management pages are hosted) fans out to the runner nodes over trusted server-to-server calls.
+class FunctionCaptureProxyControllerBase {
+    public async getStatuses(): Promise<RunnerStatus[]> {
+        let runners = await getControllerNodeIdList(FunctionCaptureController);
+        return await Promise.all(runners.map(async runner => {
+            let status = await errorToUndefined(FunctionCaptureController.nodes[runner.nodeId].getStatus());
+            return { nodeId: runner.nodeId, entryPoint: runner.entryPoint, status };
+        }));
+    }
+    public async startCapture(config: { nodeId: string }): Promise<CaptureStatus> {
+        return await FunctionCaptureController.nodes[config.nodeId].startCapture();
+    }
+    public async clearCapture(config: { nodeId: string }): Promise<CaptureStatus> {
+        return await FunctionCaptureController.nodes[config.nodeId].clearCapture();
+    }
+    public async stopCapture(config: { nodeId: string }): Promise<Buffer> {
+        return await FunctionCaptureController.nodes[config.nodeId].stopCapture();
+    }
+}
+
+export const FunctionCaptureProxyController = SocketFunction.register(
+    "FunctionCaptureProxyController-9c4e2b71-5a83-4d19-8e0f-3b6a7c2d1f42",
+    new FunctionCaptureProxyControllerBase(),
+    () => ({
+        getStatuses: {},
+        startCapture: {},
+        clearCapture: {},
+        stopCapture: {},
+    }),
+    () => ({
+        hooks: [assertIsManagementUser],
+    }),
+);

package/tsconfig.json

@@ -18,10 +18,23 @@
         "types": [
             "node",
         ],
+        "paths": {
+            "socket-function": [
+                "./node_modules/socket-function"
+            ],
+            "socket-function/*": [
+                "./node_modules/socket-function/*"
+            ]
+        },
         "experimentalDecorators": true,
         "emitDecoratorMetadata": false,
         "skipLibCheck": true,
         "inlineSourceMap": true,
         "inlineSources": true,
-    }
+    },
+    "exclude": [
+        "node_modules",
+        "database-storage",
+        "sliftutils"
+    ]
 }