querysub 0.605.0 → 0.607.0

package/src/deployManager/components/storage/bucketCells.tsx

@@ -0,0 +1,170 @@
+import { SocketFunction } from "socket-function/SocketFunction";
+import { qreact } from "../../../4-dom/qreact";
+import { css } from "typesafecss";
+import { formatNumber, formatTime } from "socket-function/src/formatting/format";
+import { sort, timeInSecond } from "socket-function/src/misc";
+import { Querysub } from "../../../4-querysub/Querysub";
+import type { ArchivesConfig, SyncActivity } from "sliftutils/storage/IArchives";
+import { StorageSynced } from "./storageController";
+import { INACTIVE_STATE } from "./bucketRows";
+import { parseSourceDebugName, SourceNameParts, SOURCE_PART_FONT_SIZE } from "./sourceNames";
+
+module.hotreload = true;
+
+const ACTIVATE_ERROR_COLOR = { h: 0, s: 60, l: 40 };
+
+/** An inactive bucket exists on the server's disk but isn't loaded, so it isn't synchronizing. Activating loads it, which starts synchronization. */
+export class ActivateBucketButton extends qreact.Component<{ serverUrl: string; bucketName: string }> {
+    state = {
+        activating: false,
+        error: "",
+    };
+    render() {
+        return <div className={css.hbox(6).wrap}>
+            <div className={css.whiteSpace("nowrap")}>{INACTIVE_STATE}</div>
+            <button
+                className={css.pad2(6, 1).button.bord2(0, 0, 20).hsl(0, 0, 100).whiteSpace("nowrap")}
+                disabled={this.state.activating}
+                onClick={() => {
+                    // Props and state are synchronized, so everything the async work needs is copied into plain locals HERE, in the tracked part
+                    let serverUrl = this.props.serverUrl;
+                    let bucketName = this.props.bucketName;
+                    this.state.activating = true;
+                    this.state.error = "";
+                    Querysub.onCommitFinished(async () => {
+                        try {
+                            let result = await StorageSynced(SocketFunction.browserNodeId()).activateBucket.promise(serverUrl, bucketName);
+                            // A refusal comes back as a string - it's a normal result, not an error
+                            let refusal = typeof result === "string" && result || "";
+                            if (refusal) {
+                                console.log(`Activating bucket ${bucketName} on ${serverUrl} was refused: ${refusal}`);
+                            } else {
+                                console.log(`Activated bucket ${bucketName} on ${serverUrl}`);
+                            }
+                            Querysub.commit(() => {
+                                this.state.error = refusal;
+                                // Only this server's buckets changed
+                                if (!refusal) {
+                                    StorageSynced(SocketFunction.browserNodeId()).getServerBuckets.reset(serverUrl);
+                                }
+                            });
+                        } finally {
+                            // Without this a throw would leave the button disabled and stuck on "Activating..."
+                            Querysub.commit(() => {
+                                this.state.activating = false;
+                            });
+                        }
+                    });
+                }}
+            >
+                {this.state.activating && "Activating..." || "Activate"}
+            </button>
+            {this.state.error && <div
+                className={css.colorhsl(ACTIVATE_ERROR_COLOR.h, ACTIVATE_ERROR_COLOR.s, ACTIVATE_ERROR_COLOR.l).ellipsis}
+                title={this.state.error}
+            >
+                {this.state.error}
+            </div>}
+        </div>;
+    }
+}
+
+const SOURCE_BAR_COLOR = { h: 210, s: 65, l: 55 };
+const REMOTE_SOURCE_BAR_COLOR = { h: 0, s: 75, l: 55 };
+const SOURCE_BAR_OPACITY = 0.3;
+const SOURCE_ROW_PADDING = { horizontal: 4, vertical: 3 };
+const DISK_SOURCE_TYPE = "disk";
+const REMOTE_SOURCE_TOOLTIP = "Values stored on another server. If this other server goes down, we'll lose access to the data.";
+
+export class IndexSourcesCell extends qreact.Component<{ sources: ArchivesConfig["indexSources"] }> {
+    render() {
+        let sources = [...this.props.sources || []];
+        if (!sources.length) return undefined;
+        sort(sources, x => -x.byteCount);
+        let totalBytes = sources.reduce((sum, x) => sum + x.byteCount, 0);
+        return <div className={css.vbox(2).fillWidth}>
+            {sources.map(source => {
+                let fraction = totalBytes && source.byteCount / totalBytes || 0;
+                // Only the server's own disk holds bytes we can't lose to another machine going down
+                let remote = parseSourceDebugName(source.debugName).type !== DISK_SOURCE_TYPE;
+                let barColor = remote && REMOTE_SOURCE_BAR_COLOR || SOURCE_BAR_COLOR;
+                return <div
+                    key={source.debugName}
+                    className={css.relative.fillWidth.pad2(SOURCE_ROW_PADDING.horizontal, SOURCE_ROW_PADDING.vertical)}
+                    title={remote && REMOTE_SOURCE_TOOLTIP || undefined}
+                >
+                    <div className={
+                        css.absolute.top(0).left(0).size(`${fraction * 100}%`, "100%")
+                            .hsla(barColor.h, barColor.s, barColor.l, SOURCE_BAR_OPACITY)
+                    } />
+                    <div className={css.relative.hbox(6).wrap}>
+                        <div className={css.whiteSpace("nowrap")}>
+                            {formatNumber(source.byteCount)}B, {formatNumber(source.fileCount)} files
+                        </div>
+                        <SourceNameParts debugName={source.debugName} />
+                    </div>
+                </div>;
+            })}
+        </div>;
+    }
+}
+
+const SYNC_PROGRESS_COLOR = { h: 130, s: 60, l: 50 };
+const SYNC_PROGRESS_OPACITY = 0.25;
+const SYNC_TYPE_COLORS: { [type in SyncActivity["type"]]: { h: number; s: number; l: number } } = {
+    metadataScan: { h: 265, s: 40, l: 88 },
+    fullSync: { h: 205, s: 50, l: 85 },
+};
+const SYNC_DETAIL_FONT_SIZE = 11;
+const PERCENT_DECIMALS = 0;
+
+/** How far along a scan is, by files when it knows the file count and by bytes otherwise. Undefined until the total is known - a scan that hasn't finished listing has no denominator yet. */
+function getSyncFraction(activity: SyncActivity): number | undefined {
+    if (activity.totalFiles) return (activity.doneFiles || 0) / activity.totalFiles;
+    if (activity.totalBytes) return (activity.doneBytes || 0) / activity.totalBytes;
+    return undefined;
+}
+
+export class SyncingCell extends qreact.Component<{ syncing: ArchivesConfig["syncing"] }> {
+    render() {
+        let syncing = this.props.syncing || [];
+        if (!syncing.length) return undefined;
+        let now = Querysub.nowDelayed(timeInSecond);
+        return <div className={css.vbox(3).fillWidth}>
+            {syncing.map((activity, activityIndex) => {
+                let fraction = getSyncFraction(activity);
+                let elapsed = now - activity.startTime;
+                let typeColor = SYNC_TYPE_COLORS[activity.type];
+                // Only meaningful once something has actually been done, otherwise the rate is a divide by zero
+                let remaining = fraction && fraction > 0 && elapsed * (1 - fraction) / fraction || undefined;
+                return <div key={activityIndex} className={css.relative.fillWidth.pad2(4, 3)}>
+                    {fraction !== undefined && <div className={
+                        css.absolute.top(0).left(0).size(`${fraction * 100}%`, "100%")
+                            .hsla(SYNC_PROGRESS_COLOR.h, SYNC_PROGRESS_COLOR.s, SYNC_PROGRESS_COLOR.l, SYNC_PROGRESS_OPACITY)
+                    } />}
+                    <div className={css.relative.vbox(2)}>
+                        <div className={css.hbox(4).wrap}>
+                            <div className={css.pad2(5, 0).fontSize(SOURCE_PART_FONT_SIZE).whiteSpace("nowrap").hsl(typeColor.h, typeColor.s, typeColor.l).bord2(typeColor.h, typeColor.s, typeColor.l - 20)}>
+                                {activity.type}
+                            </div>
+                            <SourceNameParts debugName={activity.sourceDebugName} />
+                        </div>
+                        <div className={css.hbox(6).wrap.fontSize(SYNC_DETAIL_FONT_SIZE).colorhsl(0, 0, 35)}>
+                            <div className={css.whiteSpace("nowrap")}>running {formatTime(elapsed)}</div>
+                            {fraction !== undefined && <div className={css.whiteSpace("nowrap")}>
+                                {(fraction * 100).toFixed(PERCENT_DECIMALS)}%
+                            </div>}
+                            {remaining !== undefined && <div className={css.whiteSpace("nowrap")}>~{formatTime(remaining)} left</div>}
+                            {activity.totalFiles !== undefined && <div className={css.whiteSpace("nowrap")}>
+                                {formatNumber(activity.doneFiles || 0)}/{formatNumber(activity.totalFiles)} files
+                            </div>}
+                            {activity.totalBytes !== undefined && <div className={css.whiteSpace("nowrap")}>
+                                {formatNumber(activity.doneBytes || 0)}B/{formatNumber(activity.totalBytes)}B
+                            </div>}
+                        </div>
+                    </div>
+                </div>;
+            })}
+        </div>;
+    }
+}

package/src/deployManager/components/storage/bucketRows.ts

@@ -0,0 +1,145 @@
+import { formatNumber } from "socket-function/src/formatting/format";
+import { sort } from "socket-function/src/misc";
+import type { ArchivesConfig, RemoteConfig, HostedConfig } from "sliftutils/storage/IArchives";
+import type { BucketWriteStats } from "sliftutils/storage/remoteStorage/storageServerState";
+import type { BucketDiskInfo } from "sliftutils/storage/remoteStorage/bucketDisk";
+import { parseHostedUrl } from "sliftutils/storage/remoteStorage/remoteConfig";
+import { SourceTag, getSourceTags } from "./Tag";
+import type { StorageServerBuckets } from "./storageServers";
+
+module.hotreload = true;
+
+export const ACTIVE_STATE = "active";
+export const INACTIVE_STATE = "inactive";
+
+const GAIN_DECIMALS = 1;
+const DEFAULT_HTTPS_PORT = 443;
+
+export type BucketRow = {
+    server: string;
+    /** Kept even on the rows that blank out the server column, so the row's buttons know which server to call */
+    serverUrl: string;
+    bucket: string;
+    state: string;
+    files: string;
+    bytes: string;
+    flags: SourceTag[];
+    indexSources: ArchivesConfig["indexSources"];
+    readerDiskLimit: string;
+    /** The server url on the first row of each server (operation stats are per-server), so the operations cell renders once per server; empty on the rest. */
+    operationsServerUrl: string;
+    writeGain: string;
+    disk?: BucketDiskInfo;
+    diskError: string;
+    syncing: ArchivesConfig["syncing"];
+    error: string;
+};
+
+/** The flags this server's own entries in the bucket's routing config set - how it holds the bucket, which is not something the bucket's own state reports. */
+function getBucketFlags(serverUrl: string, bucketName: string, remoteConfig: RemoteConfig | undefined): SourceTag[] {
+    let host: URL;
+    try {
+        host = new URL(serverUrl);
+    } catch {
+        return [];
+    }
+    let selfEntries: HostedConfig[] = [];
+    for (let source of remoteConfig?.sources || []) {
+        if (typeof source === "string" || source.type !== "remote") continue;
+        try {
+            let parsed = parseHostedUrl(source.url);
+            if (parsed.address !== host.hostname) continue;
+            if (String(parsed.port) !== (host.port || String(DEFAULT_HTTPS_PORT))) continue;
+            if (parsed.bucketName !== bucketName) continue;
+            selfEntries.push(source);
+        } catch {
+            // A malformed url in the config is not this column's problem
+        }
+    }
+    // A server can hold several entries for one bucket (different windows or route shards), so the flags are the union of theirs, deduped by what they say
+    let flags = new Map<string, SourceTag>();
+    for (let entry of selfEntries) {
+        for (let tag of getSourceTags(entry)) {
+            if (flags.has(tag.text)) continue;
+            flags.set(tag.text, tag);
+        }
+    }
+    return [...flags.values()];
+}
+
+/** How much fast-mode coalescing saved: every accepted write over the ones that actually reached a source. */
+function getWriteGain(stats: BucketWriteStats | undefined): string {
+    if (!stats) return "";
+    if (!stats.flushedWrites || !stats.flushedBytes) return "";
+    let writeGain = stats.originalWrites / stats.flushedWrites;
+    let byteGain = stats.originalBytes / stats.flushedBytes;
+    return `${writeGain.toFixed(GAIN_DECIMALS)}X / ${byteGain.toFixed(GAIN_DECIMALS)}X B`;
+}
+
+export function getBucketRows(servers: StorageServerBuckets[]): BucketRow[] {
+    let rows: BucketRow[] = [];
+    for (let server of servers) {
+        let baseRow: BucketRow = {
+            server: server.url,
+            serverUrl: server.url,
+            bucket: "",
+            state: "",
+            files: "",
+            bytes: "",
+            flags: [],
+            indexSources: undefined,
+            readerDiskLimit: "",
+            operationsServerUrl: "",
+            writeGain: "",
+            disk: undefined,
+            diskError: "",
+            syncing: undefined,
+            error: "",
+        };
+        if (server.error) {
+            rows.push({ ...baseRow, error: server.error });
+            continue;
+        }
+        if (server.loading) {
+            rows.push({ ...baseRow, bucket: "Loading..." });
+            continue;
+        }
+        let buckets = [...server.buckets || []];
+        sort(buckets, x => x.bucketName);
+        if (!buckets.length) {
+            rows.push({ ...baseRow, bucket: "No buckets", operationsServerUrl: server.url });
+            continue;
+        }
+        for (let [index, bucket] of buckets.entries()) {
+            let config = bucket.config;
+            // Per bucket for the same reason it is per server: a single unparseable config costs its own row, not the table
+            try {
+                rows.push({
+                    ...baseRow,
+                    server: index === 0 && server.url || "",
+                    bucket: bucket.bucketName,
+                    state: bucket.active && ACTIVE_STATE || INACTIVE_STATE,
+                    files: config?.index && formatNumber(config.index.fileCount) || "",
+                    bytes: config?.index && formatNumber(config.index.byteCount) + "B" || "",
+                    flags: getBucketFlags(server.url, bucket.bucketName, config?.remoteConfig),
+                    indexSources: config?.indexSources,
+                    readerDiskLimit: config?.readerDiskLimit && formatNumber(config.readerDiskLimit) + "B" || "",
+                    operationsServerUrl: index === 0 && server.url || "",
+                    writeGain: getWriteGain(bucket.writeStats),
+                    disk: bucket.disk,
+                    diskError: bucket.diskError || "",
+                    syncing: config?.syncing,
+                    error: bucket.error || "",
+                });
+            } catch (e: any) {
+                rows.push({
+                    ...baseRow,
+                    server: index === 0 && server.url || "",
+                    bucket: bucket.bucketName,
+                    error: e.stack ?? String(e),
+                });
+            }
+        }
+    }
+    return rows;
+}

package/src/deployManager/components/storage/deployNotices.tsx

@@ -0,0 +1,81 @@
+import { qreact } from "../../../4-dom/qreact";
+import { css } from "typesafecss";
+import preact from "preact";
+import { Querysub } from "../../../4-querysub/Querysub";
+import { formatTime, formatDateTimeDetailed } from "socket-function/src/formatting/format";
+import { timeInSecond } from "socket-function/src/misc";
+import type { StorageService } from "./storageServers";
+
+module.hotreload = true;
+
+const DEPLOY_PENDING_HUE = { h: 35, s: 80 };
+const DEPLOY_OVERLAP_HUE = { h: 280, s: 60 };
+const DEPLOY_NOTICE_FONT_SIZE = 14;
+const DEPLOY_NOTICE_TEXT_LIGHTNESS = 30;
+const DEPLOY_NOTICE_BORDER_LIGHTNESS = 55;
+const DEPLOY_NOTICE_BACKGROUND_LIGHTNESS = 94;
+
+class DeployNotice extends qreact.Component<{
+    hue: { h: number; s: number };
+    icon: string;
+    title: string;
+    detail: string;
+    tooltip: string;
+}> {
+    render() {
+        let { hue, icon, title, detail, tooltip } = this.props;
+        return <div
+            className={
+                css.hbox(8).pad2(12, 8).fontSize(DEPLOY_NOTICE_FONT_SIZE).alignItems("center")
+                    .hsl(hue.h, hue.s, DEPLOY_NOTICE_BACKGROUND_LIGHTNESS)
+                    .bord2(hue.h, hue.s, DEPLOY_NOTICE_BORDER_LIGHTNESS)
+                    .colorhsl(hue.h, hue.s, DEPLOY_NOTICE_TEXT_LIGHTNESS)
+            }
+            title={tooltip}
+        >
+            <div className={css.fontSize(DEPLOY_NOTICE_FONT_SIZE + 4)}>{icon}</div>
+            <div className={css.vbox(2)}>
+                <div className={css.boldStyle}>{title}</div>
+                <div className={css.fontSize(DEPLOY_NOTICE_FONT_SIZE - 2)}>{detail}</div>
+            </div>
+        </div>;
+    }
+}
+
+/** The services behind these storage servers may be mid-release, which moves (or duplicates) the servers the page just read from. */
+export class DeployNotices extends qreact.Component<{ services: StorageService[] }> {
+    render() {
+        let now = Querysub.nowDelayed(timeInSecond);
+        let notices: preact.ComponentChild[] = [];
+        for (let service of this.props.services) {
+            let serviceKey = service.serviceKey;
+            let releaseTime = service.releaseTime || 0;
+            // The old instances run out their overlap purely on time - we don't verify they're actually still up
+            if (!releaseTime || !service.hasOldParameters) continue;
+            let killTime = releaseTime + service.overlapTime;
+            if (now < releaseTime) {
+                notices.push(<DeployNotice
+                    key={serviceKey + "pending"}
+                    hue={DEPLOY_PENDING_HUE}
+                    icon="🕐"
+                    title={`Deploys in ${formatTime(releaseTime - now)}`}
+                    detail={`${service.serviceTitle} (${serviceKey})`}
+                    tooltip={`Deploys at ${formatDateTimeDetailed(releaseTime)}`}
+                />);
+                continue;
+            }
+            if (now < killTime) {
+                notices.push(<DeployNotice
+                    key={serviceKey + "overlap"}
+                    hue={DEPLOY_OVERLAP_HUE}
+                    icon="🔀"
+                    title={`Old version still running for ${formatTime(killTime - now)}`}
+                    detail={`${service.serviceTitle} (${serviceKey})`}
+                    tooltip={`Old instances shut down at ${formatDateTimeDetailed(killTime)}`}
+                />);
+            }
+        }
+        if (!notices.length) return undefined;
+        return <div className={css.hbox(8).wrap}>{notices}</div>;
+    }
+}

package/src/deployManager/components/storage/operationsView.tsx

@@ -0,0 +1,217 @@
+import { SocketFunction } from "socket-function/SocketFunction";
+import { qreact } from "../../../4-dom/qreact";
+import { css } from "typesafecss";
+import { formatNumber } from "socket-function/src/formatting/format";
+import { sort } from "socket-function/src/misc";
+import { Querysub } from "../../../4-querysub/Querysub";
+import { t } from "../../../2-proxy/schema2";
+import { Table } from "../../../5-diagnostics/Table";
+import { ButtonSelector } from "../../../library-components/ButtonSelector";
+import type { AccessSummaryState } from "sliftutils/storage/remoteStorage/accessStats";
+import type { SummaryEntry } from "sliftutils/treeSummary";
+import { StorageSynced } from "./storageController";
+
+module.hotreload = true;
+
+const OPERATION_SUMMARY_LIMIT = 30;
+type AccessMode = "count" | "size";
+
+// The operations breakdown only lives while the page is open, so it's plain memory. Adding keys to a synced map doesn't report as a change, so a separate counter is what the views actually re-render on.
+const opsDrilled = new Set<string>();
+let opsMode: AccessMode = "count";
+const opsStateVersion = Querysub.createLocalSchema("storageOpsStateVersion", {
+    version: t.number,
+});
+/** Reading this in a render subscribes it to every operations-view change. */
+function opsStateChanged(): void {
+    Querysub.localCommit(() => opsStateVersion().version++);
+}
+function subscribeOpsState(): void {
+    opsStateVersion().version;
+}
+function getOpsMode(): AccessMode {
+    subscribeOpsState();
+    return opsMode;
+}
+function setOpsMode(mode: AccessMode): void {
+    opsMode = mode;
+    opsStateChanged();
+}
+
+/** Drops the cached operation totals and summaries so they refetch, without touching the main bucket data. */
+export function refreshOperationsData(): void {
+    let controller = StorageSynced(SocketFunction.browserNodeId());
+    controller.getAccessStats.resetAll();
+    controller.getAccessSummaries.resetAll();
+}
+function getDrillKey(serverUrl: string, operation: string): string {
+    return `${serverUrl}|${operation}`;
+}
+function isOperationDrilled(serverUrl: string, operation: string): boolean {
+    subscribeOpsState();
+    return opsDrilled.has(getDrillKey(serverUrl, operation));
+}
+function toggleOperationDrilled(serverUrl: string, operation: string): void {
+    let key = getDrillKey(serverUrl, operation);
+    if (opsDrilled.has(key)) {
+        opsDrilled.delete(key);
+    } else {
+        opsDrilled.add(key);
+    }
+    opsStateChanged();
+}
+
+function formatAccessMetric(value: number, asBytes: boolean): string {
+    return asBytes && formatNumber(value) + "B" || formatNumber(value);
+}
+
+type OperationEntry = [string, { count: number; size: number }];
+
+/** The operations of one server, heaviest first for the current mode. Reads the synced stats, so it returns undefined while they load and throws if the read failed. */
+function readSortedOperations(serverUrl: string, mode: AccessMode): OperationEntry[] | undefined {
+    let totals = StorageSynced(SocketFunction.browserNodeId()).getAccessStats(serverUrl);
+    if (!totals) return undefined;
+    let operations = Object.entries(totals);
+    sort(operations, ([, op]) => -op[mode]);
+    return operations;
+}
+
+const OP_CHIP_COLOR = { h: 210, s: 45, l: 90 };
+const OP_CHIP_ACTIVE_COLOR = { h: 210, s: 60, l: 78 };
+const OP_METRIC_COLOR = { h: 0, s: 0, l: 35 };
+const OP_METRIC_FONT_SIZE = 12;
+const ACCESS_ERROR_COLOR = { h: 0, s: 60, l: 40 };
+
+const OPS_SECTION_BG = { h: 210, s: 20, l: 96 };
+const OPS_SECTION_BORDER = { h: 210, s: 20, l: 82 };
+const OPS_MACHINE_BG = { h: 0, s: 0, l: 100 };
+const OPS_MACHINE_BORDER = { h: 0, s: 0, l: 88 };
+const OPS_DESCRIPTION_COLOR = { h: 0, s: 0, l: 40 };
+
+function chipClass(color: { h: number; s: number; l: number }) {
+    return css.hbox(6).alignItems("center").pad2(8, 4).whiteSpace("nowrap")
+        .hsl(color.h, color.s, color.l).bord2(color.h, color.s, color.l - 20);
+}
+
+/** The per-server operations, broken out by operation as wrapping chips. Display only - the drillable copy lives in the breakdown below the table. */
+export class OperationsCell extends qreact.Component<{ serverUrl: string }> {
+    render() {
+        let mode = getOpsMode();
+        let operations: OperationEntry[] | undefined;
+        try {
+            operations = readSortedOperations(this.props.serverUrl, mode);
+        } catch (e: any) {
+            return <div className={css.colorhsl(ACCESS_ERROR_COLOR.h, ACCESS_ERROR_COLOR.s, ACCESS_ERROR_COLOR.l).ellipsis} title={e.stack ?? String(e)}>
+                {e.stack ?? String(e)}
+            </div>;
+        }
+        if (!operations) return "...";
+        if (!operations.length) return "";
+        return <div className={css.hbox(6).wrap}>
+            {operations.map(([operation, op]) => <div key={operation} className={chipClass(OP_CHIP_COLOR)}>
+                <span className={css.boldStyle}>{operation}</span>
+                <span className={css.fontSize(OP_METRIC_FONT_SIZE).colorhsl(OP_METRIC_COLOR.h, OP_METRIC_COLOR.s, OP_METRIC_COLOR.l)}>{formatNumber(op.count)}</span>
+            </div>)}
+        </div>;
+    }
+}
+
+/** One operation's top-N path breakdown, ordered by the current mode. */
+class OperationSummaryTable extends qreact.Component<{ serverUrl: string; operation: string; weightBySize: boolean; asBytes: boolean }> {
+    render() {
+        let { serverUrl, operation, weightBySize, asBytes } = this.props;
+        let summaries: SummaryEntry<AccessSummaryState>[] | undefined;
+        try {
+            summaries = StorageSynced(SocketFunction.browserNodeId()).getAccessSummaries(serverUrl, operation, OPERATION_SUMMARY_LIMIT, weightBySize);
+        } catch (e: any) {
+            return <div className={css.colorhsl(ACCESS_ERROR_COLOR.h, ACCESS_ERROR_COLOR.s, ACCESS_ERROR_COLOR.l)}>{e.stack ?? String(e)}</div>;
+        }
+        if (!summaries) return <div>Loading...</div>;
+        if (!summaries.length) return <div className={css.colorhsl(OP_METRIC_COLOR.h, OP_METRIC_COLOR.s, OP_METRIC_COLOR.l)}>No accesses recorded.</div>;
+        let rows = summaries.map(entry => ({
+            path: entry.path,
+            value: formatAccessMetric(entry.weight, asBytes),
+        }));
+        return <Table
+            rows={rows}
+            columns={{
+                path: { title: "Path" },
+                value: { title: asBytes && "Size" || "Count" },
+            }}
+        />;
+    }
+}
+
+/** One server's operations as wrapping chips; expanding a chip grows it into that operation's summary table, and the wrap reflows around it. */
+class OperationsMachineBreakdown extends qreact.Component<{ serverUrl: string }> {
+    render() {
+        let serverUrl = this.props.serverUrl;
+        let mode = getOpsMode();
+        let operations: OperationEntry[] | undefined;
+        try {
+            operations = readSortedOperations(serverUrl, mode);
+        } catch (e: any) {
+            return <div className={css.vbox(8).fillWidth.pad(12).hsl(OPS_MACHINE_BG.h, OPS_MACHINE_BG.s, OPS_MACHINE_BG.l).bord2(OPS_MACHINE_BORDER.h, OPS_MACHINE_BORDER.s, OPS_MACHINE_BORDER.l)}>
+                <h4>{serverUrl}</h4>
+                <div className={css.colorhsl(ACCESS_ERROR_COLOR.h, ACCESS_ERROR_COLOR.s, ACCESS_ERROR_COLOR.l)}>{e.stack ?? String(e)}</div>
+            </div>;
+        }
+        return <div className={css.vbox(8).fillWidth.pad(12).hsl(OPS_MACHINE_BG.h, OPS_MACHINE_BG.s, OPS_MACHINE_BG.l).bord2(OPS_MACHINE_BORDER.h, OPS_MACHINE_BORDER.s, OPS_MACHINE_BORDER.l)}>
+            <h4>{serverUrl}</h4>
+            {!operations && <div>Loading operations...</div>}
+            {operations && !operations.length && <div className={css.colorhsl(OP_METRIC_COLOR.h, OP_METRIC_COLOR.s, OP_METRIC_COLOR.l)}>No operations recorded.</div>}
+            {operations && <div className={css.hbox(6).wrap.fillWidth}>
+                {operations.map(([operation, op]) => {
+                    let drilled = isOperationDrilled(serverUrl, operation);
+                    // A count-only operation has no size tree, so its breakdown is by count even in size mode - format its weights to match.
+                    let asBytes = mode === "size" && op.size > 0;
+                    // Expanding forces the chip's container to a full row, so its summary table takes its own line and the remaining chips wrap past it.
+                    return <div key={operation} className={css.vbox(6) + (drilled && css.fillWidth)}>
+                        <div
+                            className={chipClass(drilled && OP_CHIP_ACTIVE_COLOR || OP_CHIP_COLOR) + css.button}
+                            onClick={() => toggleOperationDrilled(serverUrl, operation)}
+                        >
+                            <span>{drilled && "▾" || "▸"}</span>
+                            <span className={css.boldStyle}>{operation}</span>
+                            <span className={css.fontSize(OP_METRIC_FONT_SIZE).colorhsl(OP_METRIC_COLOR.h, OP_METRIC_COLOR.s, OP_METRIC_COLOR.l)}>
+                                {formatNumber(op.count)} · {formatNumber(op.size)}B
+                            </span>
+                        </div>
+                        {drilled && <OperationSummaryTable serverUrl={serverUrl} operation={operation} weightBySize={mode === "size"} asBytes={asBytes} />}
+                    </div>;
+                })}
+            </div>}
+        </div>;
+    }
+}
+
+/** The always-on operations breakdown below the table: a titled, boxed section with its own refresh/reset controls and the count/size order toggle, then one wrapping breakdown per machine. */
+export class OperationsSection extends qreact.Component<{ serverUrls: string[]; onResetWriteStats: () => void }> {
+    render() {
+        let mode = getOpsMode();
+        let buttonClass = css.pad2(12, 8).button.bord2(0, 0, 20).hsl(0, 0, 100).whiteSpace("nowrap");
+        return <div className={css.vbox(16).fillWidth.pad(16).hsl(OPS_SECTION_BG.h, OPS_SECTION_BG.s, OPS_SECTION_BG.l).bord2(OPS_SECTION_BORDER.h, OPS_SECTION_BORDER.s, OPS_SECTION_BORDER.l)}>
+            <div className={css.hbox(12).wrap.alignItems("center")}>
+                <div className={css.vbox(2).flexGrow(1)}>
+                    <h2>Access operations</h2>
+                    <div className={css.fontSize(13).colorhsl(OPS_DESCRIPTION_COLOR.h, OPS_DESCRIPTION_COLOR.s, OPS_DESCRIPTION_COLOR.l)}>
+                        The reads and writes each storage server has served since the last reset, per operation. Expand an operation for its top {OPERATION_SUMMARY_LIMIT} paths.
+                    </div>
+                </div>
+                <ButtonSelector<AccessMode>
+                    title="Order by"
+                    options={[{ title: "Count", value: "count" }, { title: "Size", value: "size" }]}
+                    value={mode}
+                    onChange={setOpsMode}
+                />
+                <button className={buttonClass} onClick={() => refreshOperationsData()}>
+                    Refresh
+                </button>
+                <button className={buttonClass} onClick={this.props.onResetWriteStats}>
+                    Reset write stats
+                </button>
+            </div>
+            {this.props.serverUrls.map(serverUrl => <OperationsMachineBreakdown key={serverUrl} serverUrl={serverUrl} />)}
+        </div>;
+    }
+}

package/src/deployManager/components/storage/sourceNames.tsx

@@ -0,0 +1,43 @@
+import { qreact } from "../../../4-dom/qreact";
+import { css } from "typesafecss";
+
+module.hotreload = true;
+
+const SOURCE_TYPE_COLOR = { h: 265, s: 40, l: 88 };
+const SOURCE_PART_COLOR = { h: 0, s: 0, l: 96 };
+export const SOURCE_PART_FONT_SIZE = 11;
+
+const DEBUG_NAME_PATTERNS: { regex: RegExp; parts: string[] }[] = [
+    { regex: /^remoteStorage (\S+) account (\S+) bucket (.+)$/, parts: ["remoteStorage"] },
+    { regex: /^localBucket account (\S+) bucket (.+)$/, parts: ["localBucket"] },
+    { regex: /^backblaze (.+)$/, parts: ["backblaze"] },
+    { regex: /^disk (.+)$/, parts: ["disk"] },
+];
+
+/** Splits an IArchives debug name into its type and the identifying pieces after it, so each piece can be boxed separately. */
+export function parseSourceDebugName(debugName: string): { type: string; parts: string[] } {
+    for (let pattern of DEBUG_NAME_PATTERNS) {
+        let match = pattern.regex.exec(debugName);
+        if (!match) continue;
+        return { type: pattern.parts[0], parts: match.slice(1) };
+    }
+    return { type: debugName, parts: [] };
+}
+
+export class SourceNameParts extends qreact.Component<{ debugName: string }> {
+    render() {
+        let { type, parts } = parseSourceDebugName(this.props.debugName);
+        let partStyle = css.pad2(5, 0).fontSize(SOURCE_PART_FONT_SIZE).whiteSpace("nowrap");
+        return <div className={css.hbox(3).wrap}>
+            <div className={partStyle.hsl(SOURCE_TYPE_COLOR.h, SOURCE_TYPE_COLOR.s, SOURCE_TYPE_COLOR.l).bord2(SOURCE_TYPE_COLOR.h, SOURCE_TYPE_COLOR.s, SOURCE_TYPE_COLOR.l - 20)}>
+                {type}
+            </div>
+            {parts.map(part => <div
+                key={part}
+                className={partStyle.hsl(SOURCE_PART_COLOR.h, SOURCE_PART_COLOR.s, SOURCE_PART_COLOR.l).bord2(SOURCE_PART_COLOR.h, SOURCE_PART_COLOR.s, SOURCE_PART_COLOR.l - 20)}
+            >
+                {part}
+            </div>)}
+        </div>;
+    }
+}