querysub 0.616.0 → 0.619.0

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

@@ -0,0 +1,154 @@
+module.allowclient = true;
+
+import { qreact } from "../../4-dom/qreact";
+import { css } from "typesafecss";
+import { getBrowserUrlNode } from "../../-f-node-discovery/NodeDiscovery";
+import { sort } from "socket-function/src/misc";
+import { formatNumber } from "socket-function/src/formatting/format";
+import { PATHVALUE_COLOR } from "../../misc/nodeCategoryColors";
+import { Table } from "../../5-diagnostics/Table";
+import type { SummaryEntry } from "sliftutils/treeSummary";
+import { PathValueDirection, PathValueSummaryState } from "../../0-path-value-core/PathValueStats";
+import { AuthorityRangeBar, ID_CHARS, NodeAuthorityInfo, RoutingTableSynced, machineIdOf, threadLabel } from "./RoutingTablePage";
+
+const PATH_SUMMARY_LIMIT = 100;
+const MACHINE_CELL_WIDTH_CH = ID_CHARS + 4;
+
+// One direction's top-N path breakdown for a server, heaviest first. Only mounted when a server row is expanded, so
+// the (heavy) tree is only ever fetched on demand.
+class PathSummaryTable extends qreact.Component<{ nodeId: string; direction: PathValueDirection }> {
+    render() {
+        let { nodeId, direction } = this.props;
+        let summaries: SummaryEntry<PathValueSummaryState>[] | undefined;
+        try {
+            summaries = RoutingTableSynced(getBrowserUrlNode()).getNodePathSummary(nodeId, direction, PATH_SUMMARY_LIMIT);
+        } catch (e: any) {
+            return <div className={css.colorhsl(0, 60, 40)}>{e.stack ?? String(e)}</div>;
+        }
+        if (!summaries) return <div className={css.colorhsl(0, 0, 50)}>Loading...</div>;
+        if (!summaries.length) return <div className={css.colorhsl(0, 0, 50)}>(none)</div>;
+        // getSummaries returns path-sorted; we want the heaviest paths first.
+        sort(summaries, entry => -entry.weight);
+        let rows = summaries.map(entry => ({
+            path: entry.path,
+            count: formatNumber(entry.weight),
+        }));
+        return <Table
+            rows={rows}
+            columns={{
+                path: { title: "Path" },
+                count: { title: "Count" },
+            }}
+        />;
+    }
+}
+
+// One row per path-value server, grouped by machine. Reads/writes lead the line; expanding reveals that server's
+// per-path breakdown for both directions.
+class AuthorityNodeRow extends qreact.Component<{ info: NodeAuthorityInfo }> {
+    state = {
+        expanded: false,
+    };
+    render() {
+        let info = this.props.info;
+        let spec = info.spec;
+        let expanded = this.state.expanded;
+        let totals = RoutingTableSynced(getBrowserUrlNode()).getNodePathTotals(info.nodeId);
+        let machineId = machineIdOf(info.nodeId);
+        return <div
+            className={css.button.vbox(6).pad2(10).fillWidth.hsl(0, 0, 99).borderTop("1px solid hsl(0, 0%, 88%)")}
+            onClick={() => this.state.expanded = !expanded}
+        >
+            <div className={css.hbox(10).fillWidth}>
+                <span>{expanded ? "▼" : "▶"}</span>
+                <span className={css.width(`${MACHINE_CELL_WIDTH_CH}ch`).flexShrink0.color(PATHVALUE_COLOR)} title="path values received / sent">
+                    ↓{totals ? formatNumber(totals.received) : "…"} ↑{totals ? formatNumber(totals.sent) : "…"}
+                </span>
+                <span className={css.width(`${MACHINE_CELL_WIDTH_CH}ch`).flexShrink0.colorhsl(0, 0, 45)} title={machineId}>
+                    {machineId.slice(0, ID_CHARS)}
+                </span>
+                <span className={css.boldStyle} title={info.nodeId}>{threadLabel(info.nodeId)}</span>
+                {spec && <span className={css.colorhsl(0, 0, 45)}>{spec.routeStart.toFixed(4)} - {spec.routeEnd.toFixed(4)}</span>}
+                {spec && <AuthorityRangeBar start={spec.routeStart} end={spec.routeEnd} />}
+                {spec?.excludeDefault && <span className={css.colorhsl(0, 70, 35)}>(excludes default)</span>}
+            </div>
+            {expanded &&
+                <div className={css.hbox(16).wrap.fillWidth.alignItems("flex-start")} onClick={e => e.stopPropagation()}>
+                    <div className={css.vbox(4)}>
+                        <div className={css.boldStyle.color(PATHVALUE_COLOR)}>Received (↓) — top {PATH_SUMMARY_LIMIT} paths</div>
+                        <PathSummaryTable nodeId={info.nodeId} direction="received" />
+                    </div>
+                    <div className={css.vbox(4)}>
+                        <div className={css.boldStyle.color(PATHVALUE_COLOR)}>Sent (↑) — top {PATH_SUMMARY_LIMIT} paths</div>
+                        <PathSummaryTable nodeId={info.nodeId} direction="sent" />
+                    </div>
+                </div>
+            }
+        </div>;
+    }
+}
+
+// Invalidate: drop every cached synced call for this node so the whole page's data disappears and refetches.
+function invalidateRoutingTable(): void {
+    let synced = RoutingTableSynced(getBrowserUrlNode());
+    synced.getNodePathTotals.resetAll();
+    synced.getNodePathSummary.resetAll();
+}
+// Clear: wipe the in-memory path-value stats (totals and trees) on every node, then drop only the stats caches so the
+// now-empty stats reload — leaving the specs/latency/traffic caches untouched.
+async function clearAllPathStats(nodeIds: string[]): Promise<void> {
+    let synced = RoutingTableSynced(getBrowserUrlNode());
+    await Promise.all(nodeIds.map(nodeId => synced.clearNodePathStats.promise(nodeId).catch(() => { })));
+    synced.getNodePathTotals.resetAll();
+    synced.getNodePathSummary.resetAll();
+}
+
+// A list of server rows, most-active first (by total path values sent + received).
+class PathServerList extends qreact.Component<{ infos: NodeAuthorityInfo[]; emptyText: string }> {
+    render() {
+        let synced = RoutingTableSynced(getBrowserUrlNode());
+        let sumOf = (nodeId: string) => {
+            let totals = synced.getNodePathTotals(nodeId);
+            return (totals?.sent ?? 0) + (totals?.received ?? 0);
+        };
+        let infos = this.props.infos.slice();
+        // Two stable passes: machine/thread as a tiebreak, then sent+received descending as the primary order (so rows
+        // with equal — or still-loading, hence 0 — totals keep a stable machine/thread order instead of jittering).
+        let sep = String.fromCharCode(1);
+        sort(infos, x => `${machineIdOf(x.nodeId)}${sep}${threadLabel(x.nodeId)}`);
+        sort(infos, x => -sumOf(x.nodeId));
+        if (!infos.length) return <div className={css.colorhsl(0, 0, 50)}>{this.props.emptyText}</div>;
+        return <div className={css.vbox(0).fillWidth.bord2(0, 0, 88)}>
+            {infos.map(info => <AuthorityNodeRow key={info.nodeId} info={info} />)}
+        </div>;
+    }
+}
+
+export class PathValueServersSection extends qreact.Component<{ infos: NodeAuthorityInfo[] }> {
+    render() {
+        let infos = this.props.infos;
+        let allNodeIds = infos.map(x => x.nodeId);
+        // Path value servers are the authorities (they own a route range). Every other node can still send/receive
+        // path values, so it gets its own list below.
+        let serverInfos = infos.filter(x => x.spec && x.spec.routeStart >= 0 && x.spec.routeEnd >= 0);
+        let otherInfos = infos.filter(x => !(x.spec && x.spec.routeStart >= 0 && x.spec.routeEnd >= 0));
+
+        let buttonClass = css.pad2(12, 8).button.bord2(0, 0, 20).hsl(0, 0, 100).whiteSpace("nowrap");
+        return <div className={css.vbox(8).fillWidth}>
+            <div className={css.hbox(12).alignItems("center")}>
+                <h2 className={css.margin(0)}>Path Value Servers ({serverInfos.length})</h2>
+                <button className={buttonClass} onClick={() => invalidateRoutingTable()}>Invalidate</button>
+                <button className={buttonClass} onClick={() => void clearAllPathStats(allNodeIds)}>Clear stats</button>
+            </div>
+            <div className={css.fontSize(13).colorhsl(0, 0, 45)}>
+                Path values each server has received (↓) and sent (↑) since startup or the last clear. Expand a server for its top {PATH_SUMMARY_LIMIT} paths in each direction.
+            </div>
+            <PathServerList infos={serverInfos} emptyText="(no path value servers)" />
+            <h2 className={css.margin(0)}>Other Senders ({otherInfos.length})</h2>
+            <div className={css.fontSize(13).colorhsl(0, 0, 45)}>
+                Nodes that aren't path value servers but still send/receive path values.
+            </div>
+            <PathServerList infos={otherInfos} emptyText="(no other senders)" />
+        </div>;
+    }
+}