querysub 0.547.0 → 0.548.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "querysub",
-  "version": "0.547.0",
+  "version": "0.548.0",
   "main": "index.js",
   "license": "MIT",
   "note1": "note on node-forge fork, see https://github.com/digitalbazaar/forge/issues/744 for details",
@@ -71,7 +71,7 @@
     "node-forge": "https://github.com/sliftist/forge#e618181b469b07bdc70b968b0391beb8ef5fecd6",
     "pako": "^2.1.0",
     "peggy": "^5.0.6",
-    "sliftutils": "^1.7.33",
+    "sliftutils": "^1.7.34",
     "socket-function": "^1.2.26",
     "terser": "^5.31.0",
     "typenode": "^6.6.1",

package/src/deployManager/components/RouteConfigView.tsx

@@ -4,6 +4,8 @@ import { css } from "typesafecss";
 import { sort } from "socket-function/src/misc";
 import { formatNumber, formatDateTime, formatTime } from "socket-function/src/formatting/format";
 import { parseHostedUrl, parseBackblazeUrl } from "sliftutils/storage/remoteStorage/remoteConfig";
+import { getServerActiveBucket } from "sliftutils/storage/remoteStorage/createArchives";
+import { STORAGE_ACCOUNT } from "../../-a-archives/archives2";
 import { FULL_VALID_WINDOW, FULL_ROUTE } from "sliftutils/storage/IArchives";
 import type { RemoteConfig, RemoteConfigBase, HostedConfig, BackblazeConfig } from "sliftutils/storage/IArchives";
 import { showModal } from "../../5-diagnostics/Modal";
@@ -24,13 +26,14 @@ const PAST_COLOR = { h: 0, s: 0, l: 90 };
 const FUTURE_COLOR = { h: 45, s: 80, l: 85 };
 // Windows are days or hours wide, so the countdown only has to be roughly right
 const TIME_REFRESH_INTERVAL = 60 * 1000;
+const WATCH_POLL_INTERVAL = 60 * 1000;
+const WATCH_ERROR_LIMIT = 500;
+const WATCH_ACTIVE_COLOR = { h: 195, s: 60, l: 85 };
 const WINDOW_HEADER_SIZE = 13;
 const BUCKET_TITLE_SIZE = 15;
 const GROUP_BODY_INDENT = 16;
 const TAG_FONT_SIZE = 11;
 const JSON_INDENT = 4;
-// Stands in for the bucket a config belongs to, so buckets that differ only by their own name group together
-const OWN_BUCKET_PLACEHOLDER = "*";
 
 /** String sources are the shorthand for an always-valid, unsharded backblaze bucket. */
 function normalizeSource(source: RemoteConfigBase): Source {
@@ -38,23 +41,37 @@ function normalizeSource(source: RemoteConfigBase): Source {
     return { type: "backblaze", url: source, validWindow: FULL_VALID_WINDOW };
 }
 
-/** The bucket coordinates of a source URL, so the display doesn't have to show the whole routing-file URL. A source pointing at the bucket the config belongs to shows the placeholder instead of repeating the name. */
-function describeUrl(source: Source, ownBucketName: string): string {
-    let maskBucket = (bucketName: string) => bucketName === ownBucketName && OWN_BUCKET_PLACEHOLDER || bucketName;
+/** Where a source lives, with the bucket the config belongs to masked out so buckets that differ only by their own name group together. */
+function getUrlIdentity(source: Source, ownBucketName: string): unknown {
+    let maskBucket = (bucketName: string) => bucketName === ownBucketName && "" || bucketName;
     try {
         if (source.type === "backblaze") {
-            return `b2 ${maskBucket(parseBackblazeUrl(source.url).bucketName)}`;
+            return { type: "backblaze", bucketName: maskBucket(parseBackblazeUrl(source.url).bucketName) };
         }
         let { address, port, account, bucketName } = parseHostedUrl(source.url);
+        return { type: "remote", address, port, account, bucketName: maskBucket(bucketName) };
+    } catch {
+        return source.url;
+    }
+}
+
+/** Just the host - the account and the source's own bucket name are already in the table above, so repeating them here is noise. A source pointing at a different bucket keeps that name, since it's the one part the table doesn't already say. */
+function describeUrl(source: Source, ownBucketName: string): string {
+    try {
+        if (source.type === "backblaze") {
+            let { bucketName } = parseBackblazeUrl(source.url);
+            return bucketName === ownBucketName && "b2" || `b2 ${bucketName}`;
+        }
+        let { address, port, bucketName } = parseHostedUrl(source.url);
         let host = port === DEFAULT_HTTPS_PORT && address || `${address}:${port}`;
-        return `${host} ${account}/${maskBucket(bucketName)}`;
+        return bucketName === ownBucketName && host || `${host} ${bucketName}`;
     } catch {
         return source.url;
     }
 }
 
 function getSourceKey(source: Source, ownBucketName: string): string {
-    return JSON.stringify({ ...source, url: describeUrl(source, ownBucketName) });
+    return JSON.stringify({ ...source, url: getUrlIdentity(source, ownBucketName) });
 }
 
 /** Identifies a config independently of which bucket it configures, so identical configs on different buckets collapse into one display. */
@@ -194,6 +211,98 @@ export function getRouteConfigGroups(servers: StorageServerBuckets[]): RouteConf
     return results;
 }
 
+type LiveWatch = {
+    serverUrl: string;
+    bucketName: string;
+    loading: boolean;
+    routing?: RemoteConfig;
+    error?: string;
+    updatedTime?: number;
+};
+
+// Watches only live as long as the page is open - nothing about them is persisted
+const liveWatchData = Querysub.createLocalSchema<{ watches: { [key: string]: LiveWatch } }>("storageLiveWatches");
+
+function getWatchKey(serverUrl: string, bucketName: string): string {
+    return `${serverUrl}|${bucketName}`;
+}
+
+/** The storage server behind a source URL, which is what the live-state calls connect to (the source URL itself points at the routing file inside the bucket). */
+function getServerUrl(source: Source): string | undefined {
+    if (source.type !== "remote") return undefined;
+    try {
+        let { address, port } = parseHostedUrl(source.url);
+        return `https://${address}:${port}`;
+    } catch {
+        return undefined;
+    }
+}
+
+async function refreshWatch(key: string): Promise<void> {
+    let watch = liveWatchData().watches[key];
+    if (!watch) return;
+    let { serverUrl, bucketName } = watch;
+    Querysub.localCommit(() => {
+        let current = liveWatchData().watches[key];
+        if (current) current.loading = true;
+    });
+    let result: RemoteConfig | undefined;
+    let error: string | undefined;
+    try {
+        let live = await getServerActiveBucket({ url: serverUrl, account: STORAGE_ACCOUNT, bucketName });
+        // The server reports "not loaded here" as a string rather than throwing
+        if (typeof live === "string") {
+            error = live;
+        } else {
+            result = live.routing;
+        }
+    } catch (e) {
+        error = String((e as Error).stack ?? e).slice(0, WATCH_ERROR_LIMIT);
+        console.error(`Reading the live config of ${bucketName} on ${serverUrl} failed:`, (e as Error).stack ?? e);
+    }
+    Querysub.localCommit(() => {
+        let current = liveWatchData().watches[key];
+        // The watch may have been removed while the call was in flight
+        if (!current) return;
+        current.loading = false;
+        current.routing = result;
+        current.error = error;
+        current.updatedTime = Date.now();
+    });
+}
+
+function isWatched(serverUrl: string, bucketName: string): boolean {
+    return !!liveWatchData().watches[getWatchKey(serverUrl, bucketName)];
+}
+
+function toggleWatch(serverUrl: string, bucketName: string): void {
+    let key = getWatchKey(serverUrl, bucketName);
+    let existed = !!liveWatchData().watches[key];
+    Querysub.localCommit(() => {
+        if (existed) {
+            delete liveWatchData().watches[key];
+            return;
+        }
+        liveWatchData().watches[key] = { serverUrl, bucketName, loading: true };
+    });
+    if (existed) return;
+    void refreshWatch(key);
+}
+
+function refreshAllWatches(): void {
+    for (let key of Object.keys(liveWatchData().watches)) {
+        void refreshWatch(key);
+    }
+}
+
+function clearWatches(): void {
+    Querysub.localCommit(() => {
+        for (let key of Object.keys(liveWatchData().watches)) {
+            delete liveWatchData().watches[key];
+        }
+    });
+}
+
 function showConfigModal(bucketName: string, rawConfig: RemoteConfig): void {
     let close = showModal({
         content: <FullscreenModal onCancel={() => close.close()}>
@@ -235,6 +344,24 @@ function getSourceTags(source: Source): { icon: string; text: string }[] {
     return tags;
 }
 
+/** Watching a source pins that server's own live view of the bucket to the top of the page, so disagreements between servers are visible directly. */
+class WatchButton extends qreact.Component<{ source: Source; bucketName: string }> {
+    render() {
+        let serverUrl = getServerUrl(this.props.source);
+        // Only storage servers have a live in-memory state to read
+        if (!serverUrl) return undefined;
+        let watching = isWatched(serverUrl, this.props.bucketName);
+        return <Button
+            flavor="tiny"
+            className={watching && css.hsl(WATCH_ACTIVE_COLOR.h, WATCH_ACTIVE_COLOR.s, WATCH_ACTIVE_COLOR.l) || ""}
+            title={watching && "Stop watching this server's live config" || "Watch this server's live config"}
+            onClick={() => toggleWatch(serverUrl, this.props.bucketName)}
+        >
+            👁
+        </Button>;
+    }
+}
+
 class SourceRow extends qreact.Component<{ source: Source; window: [number, number]; ownBucketName: string }> {
     render() {
         let { source, window, ownBucketName } = this.props;
@@ -248,6 +375,7 @@ class SourceRow extends qreact.Component<{ source: Source; window: [number, numb
                     .hbox(6).pad2(8, 4).boxSizing("border-box").whiteSpace("nowrap")
                     .hsl(0, 0, 100).bord2(SOURCE_BORDER_COLOR.h, SOURCE_BORDER_COLOR.s, SOURCE_BORDER_COLOR.l)
             }>
+                <WatchButton source={source} bucketName={ownBucketName} />
                 <div className={css.boldStyle}>{describeUrl(source, ownBucketName)}</div>
                 {source.route && <div className={css.fontSize(TAG_FONT_SIZE).colorhsl(0, 0, 40)}>
                     route {routeStart} – {routeEnd}
@@ -337,11 +465,72 @@ class RouteConfigGroupView extends qreact.Component<{ group: RouteConfigGroup }>
     }
 }
 
+/** One watched server's own live, in-memory view of a bucket - which is what shows a server disagreeing with everyone else. */
+class LiveWatchView extends qreact.Component<{ watchKey: string; watch: LiveWatch }> {
+    render() {
+        let { watchKey, watch } = this.props;
+        let now = Querysub.timeDelayed(TIME_REFRESH_INTERVAL);
+        let sources = (watch.routing?.sources || []).map(normalizeSource);
+        let clusters = getWindowClusters(sources);
+        return <div className={css.vbox(10).fillWidth.pad2(10, 8).bord2(WATCH_ACTIVE_COLOR.h, WATCH_ACTIVE_COLOR.s, WATCH_ACTIVE_COLOR.l - 25)}>
+            <div className={css.hbox(8).wrap.fontSize(WINDOW_HEADER_SIZE)}>
+                <div className={css.boldStyle}>👁 {watch.bucketName}</div>
+                <div className={css.colorhsl(0, 0, 45)}>live on {watch.serverUrl}</div>
+                <div className={css.colorhsl(0, 0, 45)}>
+                    {watch.loading && "refreshing..."
+                        || watch.updatedTime && `updated ${formatTime(now - watch.updatedTime)} ago`
+                        || ""}
+                </div>
+                <div className={css.flexGrow(1)} />
+                <Button flavor="tiny" onClick={() => void refreshWatch(watchKey)}>Refresh</Button>
+                <Button flavor="tiny" onClick={() => toggleWatch(watch.serverUrl, watch.bucketName)}>Stop watching</Button>
+            </div>
+            {watch.error && <div className={css.pad2(10, 8).hsl(WARNING_COLOR.h, WARNING_COLOR.s, WARNING_COLOR.l).bord2(WARNING_COLOR.h, WARNING_COLOR.s, WARNING_COLOR.l - 25)}>
+                ⚠ {watch.error}
+            </div>}
+            <div className={css.vbox(10).fillWidth.paddingLeft(GROUP_BODY_INDENT).boxSizing("border-box")}>
+                {clusters.map((cluster, index) => {
+                    let status = getWindowStatus(cluster.window, now);
+                    return <div key={index} className={css.vbox(6).fillWidth}>
+                        <div className={css.hbox(6).wrap.colorhsl(0, 0, 35).fontSize(TAG_FONT_SIZE)}>
+                            <div>{formatWindowTime(cluster.window[0])} → {formatWindowTime(cluster.window[1])}</div>
+                            <Tag icon={status.icon} text={status.text} color={status.color} />
+                        </div>
+                        {cluster.sources.map(source => <SourceRow
+                            key={getSourceKey(source, watch.bucketName)}
+                            source={source}
+                            window={cluster.window}
+                            ownBucketName={watch.bucketName}
+                        />)}
+                    </div>;
+                })}
+            </div>
+        </div>;
+    }
+}
+
 export class RouteConfigView extends qreact.Component<{ servers: StorageServerBuckets[] }> {
+    private pollTimer: ReturnType<typeof setInterval> | undefined;
+    componentDidMount() {
+        this.pollTimer = setInterval(refreshAllWatches, WATCH_POLL_INTERVAL);
+    }
+    componentWillUnmount() {
+        if (this.pollTimer !== undefined) {
+            clearInterval(this.pollTimer);
+            this.pollTimer = undefined;
+        }
+        // Watches are only meaningful while the page is open, and leaving them would keep polling on the next mount
+        clearWatches();
+    }
     render() {
         let groups = getRouteConfigGroups(this.props.servers);
-        if (!groups.length) return undefined;
+        let watches = Object.entries(liveWatchData().watches);
+        if (!groups.length && !watches.length) return undefined;
         return <div className={css.vbox(20).fillWidth}>
+            {watches.length > 0 && <div className={css.vbox(10).fillWidth}>
+                <h3>Live configs</h3>
+                {watches.map(([key, watch]) => <LiveWatchView key={key} watchKey={key} watch={watch} />)}
+            </div>}
             <h3>Routing configs</h3>
             {groups.map((group, index) => <RouteConfigGroupView key={index} group={group} />)}
         </div>;

package/src/deployManager/components/StoragePage.tsx

@@ -1,13 +1,17 @@
 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 { listServerBuckets } from "sliftutils/storage/remoteStorage/createArchives";
-import type { ServerBucketInfo } from "sliftutils/storage/remoteStorage/storageServerState";
+import { formatNumber, formatTime, formatDateTimeDetailed } from "socket-function/src/formatting/format";
+import { sort, timeInSecond } from "socket-function/src/misc";
+import preact from "preact";
+import { Querysub } from "../../4-querysub/Querysub";
+import { listServerBuckets, clearServerWriteStats, activateServerBucket } from "sliftutils/storage/remoteStorage/createArchives";
+import type { ServerBucketInfo, BucketDiskInfo, BucketWriteStats } from "sliftutils/storage/remoteStorage/storageServerState";
+import type { ArchivesConfig } from "sliftutils/storage/IArchives";
+import { UsageBar, getUsageThresholds } from "../../library-components/UsageBar";
 import { getSyncedController } from "../../library-components/SyncedController";
 import { assertIsManagementUser } from "../../diagnostics/managementPages";
-import { getEffectiveServiceConfigs, getLiveServiceParameters, getMachineTargets, applyCommandTemplate, ServiceParameters } from "../machineSchema";
+import { getEffectiveServiceConfigs, getLiveServiceParameters, getMachineTargets, applyCommandTemplate, ServiceParameters, DEFAULT_OVERLAP_TIME } from "../machineSchema";
 import { STORAGE_ACCOUNT } from "../../-a-archives/archives2";
 import { Table } from "../../5-diagnostics/Table";
 import { RouteConfigView } from "./RouteConfigView";
@@ -20,6 +24,11 @@ const ERROR_TEXT_LIMIT = 500;
 
 export type StorageServerBuckets = {
     serviceKey: string;
+    serviceTitle: string;
+    /** The release the service is in the middle of, so the page can warn that these servers are about to move (or just did) */
+    releaseTime?: number;
+    overlapTime: number;
+    hasOldParameters: boolean;
     url: string;
     buckets?: ServerBucketInfo[];
     error?: string;
@@ -40,22 +49,30 @@ function getStorageUrls(parameters: ServiceParameters): string[] {
 class StoragePageControllerBase {
     public async getStorageBuckets(): Promise<StorageServerBuckets[]> {
         let configs = await getEffectiveServiceConfigs();
-        let serviceKeyByUrl = new Map<string, string>();
+        type ServiceForUrl = Omit<StorageServerBuckets, "url" | "buckets" | "error">;
+        let serviceByUrl = new Map<string, ServiceForUrl>();
         for (let config of configs) {
             let allParameters = [getLiveServiceParameters(config), config.parameters, config.oldParameters];
             for (let parameters of allParameters) {
                 if (!parameters) continue;
                 for (let url of getStorageUrls(parameters)) {
-                    if (serviceKeyByUrl.has(url)) continue;
-                    serviceKeyByUrl.set(url, parameters.key);
+                    if (serviceByUrl.has(url)) continue;
+                    serviceByUrl.set(url, {
+                        serviceKey: parameters.key,
+                        serviceTitle: config.info.title,
+                        releaseTime: config.parameters.releaseTime,
+                        // The overlap always comes from the newest parameters, even though it governs how long the old instances outlive the release
+                        overlapTime: config.parameters.overlapTime ?? DEFAULT_OVERLAP_TIME,
+                        hasOldParameters: !!config.oldParameters,
+                    });
                 }
             }
         }
-        return await Promise.all([...serviceKeyByUrl].map(async ([url, serviceKey]) => {
+        return await Promise.all([...serviceByUrl].map(async ([url, service]) => {
             try {
-                return { serviceKey, url, buckets: await listServerBuckets({ url, account: STORAGE_ACCOUNT }) };
+                return { ...service, url, buckets: await listServerBuckets({ url, account: STORAGE_ACCOUNT }) };
             } catch (e) {
-                return { serviceKey, url, error: String((e as Error).stack ?? e).slice(0, ERROR_TEXT_LIMIT) };
+                return { ...service, url, error: String((e as Error).stack ?? e).slice(0, ERROR_TEXT_LIMIT) };
             }
         }));
     }
@@ -79,31 +96,56 @@ const StorageSynced = getSyncedController(StoragePageController, {
     writes: {},
 });
 
-type BucketConfig = NonNullable<ServerBucketInfo["config"]>;
-
 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;
-    indexSources: BucketConfig["indexSources"];
+    indexSources: ArchivesConfig["indexSources"];
     readerDiskLimit: string;
-    syncing: BucketConfig["syncing"];
+    writes: string;
+    written: string;
+    writeGain: string;
+    disk?: BucketDiskInfo;
+    diskError: string;
+    syncing: ArchivesConfig["syncing"];
     error: string;
 };
 
+const GAIN_DECIMALS = 1;
+const DISK_BAR_TYPE = "DISK";
+const ACTIVE_STATE = "active";
+const INACTIVE_STATE = "inactive";
+
+/** 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`;
+}
+
 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: "",
             indexSources: undefined,
             readerDiskLimit: "",
+            writes: "",
+            written: "",
+            writeGain: "",
+            disk: undefined,
+            diskError: "",
             syncing: undefined,
             error: "",
         };
@@ -123,11 +165,16 @@ function getBucketRows(servers: StorageServerBuckets[]): BucketRow[] {
                 ...baseRow,
                 server: index === 0 && server.url || "",
                 bucket: bucket.bucketName,
-                state: bucket.active && "active" || "inactive",
+                state: bucket.active && ACTIVE_STATE || INACTIVE_STATE,
                 files: config?.index && formatNumber(config.index.fileCount) || "",
                 bytes: config?.index && formatNumber(config.index.byteCount) + "B" || "",
                 indexSources: config?.indexSources,
                 readerDiskLimit: config?.readerDiskLimit && formatNumber(config.readerDiskLimit) + "B" || "",
+                writes: bucket.writeStats && formatNumber(bucket.writeStats.originalWrites) || "",
+                written: bucket.writeStats && formatNumber(bucket.writeStats.originalBytes) + "B" || "",
+                writeGain: getWriteGain(bucket.writeStats),
+                disk: bucket.disk,
+                diskError: bucket.diskError || "",
                 syncing: config?.syncing,
                 error: bucket.error || "",
             });
@@ -136,6 +183,60 @@ function getBucketRows(servers: StorageServerBuckets[]): BucketRow[] {
     return rows;
 }
 
+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. */
+class ActivateBucketButton extends qreact.Component<{ serverUrl: string; bucketName: string }> {
+    state = {
+        activating: false,
+        error: "",
+    };
+    private async activate() {
+        this.state.activating = true;
+        this.state.error = "";
+        try {
+            let result = await activateServerBucket({
+                url: this.props.serverUrl,
+                account: STORAGE_ACCOUNT,
+                bucketName: this.props.bucketName,
+            });
+            // The server reports a refusal as a string instead of throwing
+            if (typeof result === "string") {
+                this.state.error = result;
+                console.error(`Activating bucket ${this.props.bucketName} on ${this.props.serverUrl} was refused: ${result}`);
+                return;
+            }
+            console.log(`Activated bucket ${this.props.bucketName} on ${this.props.serverUrl}`);
+            StorageSynced(SocketFunction.browserNodeId()).getStorageBuckets.resetAll();
+        } catch (e) {
+            this.state.error = String((e as Error).stack ?? e).slice(0, ERROR_TEXT_LIMIT);
+            console.error(`Activating bucket ${this.props.bucketName} on ${this.props.serverUrl} failed:`, (e as Error).stack ?? e);
+        } finally {
+            this.state.activating = false;
+        }
+    }
+    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={() => {
+                    void this.activate();
+                }}
+            >
+                {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;
@@ -181,7 +282,7 @@ class SourceNameParts extends qreact.Component<{ debugName: string }> {
     }
 }
 
-class IndexSourcesCell extends qreact.Component<{ sources: BucketConfig["indexSources"] }> {
+class IndexSourcesCell extends qreact.Component<{ sources: ArchivesConfig["indexSources"] }> {
     render() {
         let sources = [...this.props.sources || []];
         if (!sources.length) return undefined;
@@ -214,9 +315,66 @@ class IndexSourcesCell extends qreact.Component<{ sources: BucketConfig["indexSo
     }
 }
 
+const DEPLOY_PENDING_COLOR = { h: 35, s: 80, l: 45 };
+const DEPLOY_OVERLAP_COLOR = { h: 280, s: 60, l: 45 };
+const DEPLOY_NOTICE_FONT_SIZE = 14;
+
+/** The services behind these storage servers may be mid-release, which moves (or duplicates) the servers the page just read from. */
+class DeployNotices extends qreact.Component<{ servers: StorageServerBuckets[] }> {
+    render() {
+        let now = Querysub.nowDelayed(timeInSecond);
+        let byService = new Map<string, StorageServerBuckets>();
+        for (let server of this.props.servers) {
+            if (byService.has(server.serviceKey)) continue;
+            byService.set(server.serviceKey, server);
+        }
+        let notices: preact.ComponentChild[] = [];
+        for (let [serviceKey, service] of byService) {
+            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(<div
+                    key={serviceKey + "pending"}
+                    className={css.pad2(10, 6).fontSize(DEPLOY_NOTICE_FONT_SIZE).boldStyle.colorhsl(DEPLOY_PENDING_COLOR.h, DEPLOY_PENDING_COLOR.s, DEPLOY_PENDING_COLOR.l).bord2(DEPLOY_PENDING_COLOR.h, DEPLOY_PENDING_COLOR.s, DEPLOY_PENDING_COLOR.l + 35)}
+                    title={`Deploys at ${formatDateTimeDetailed(releaseTime)}`}
+                >
+                    🕐 {service.serviceTitle} ({serviceKey}) deploys in {formatTime(releaseTime - now)}
+                </div>);
+                continue;
+            }
+            if (now < killTime) {
+                notices.push(<div
+                    key={serviceKey + "overlap"}
+                    className={css.pad2(10, 6).fontSize(DEPLOY_NOTICE_FONT_SIZE).boldStyle.colorhsl(DEPLOY_OVERLAP_COLOR.h, DEPLOY_OVERLAP_COLOR.s, DEPLOY_OVERLAP_COLOR.l).bord2(DEPLOY_OVERLAP_COLOR.h, DEPLOY_OVERLAP_COLOR.s, DEPLOY_OVERLAP_COLOR.l + 35)}
+                    title={`Old instances shut down at ${formatDateTimeDetailed(killTime)}`}
+                >
+                    🔀 {service.serviceTitle} ({serviceKey}) still has an old version running for {formatTime(killTime - now)}
+                </div>);
+            }
+        }
+        if (!notices.length) return undefined;
+        return <div className={css.hbox(8).wrap}>{notices}</div>;
+    }
+}
+
+async function resetWriteStats(servers: StorageServerBuckets[]): Promise<void> {
+    await Promise.all(servers.map(async server => {
+        if (server.error) return;
+        try {
+            let { clearedBuckets } = await clearServerWriteStats({ url: server.url, account: STORAGE_ACCOUNT });
+            console.log(`Cleared write stats for ${clearedBuckets} buckets on ${server.url}`);
+        } catch (e) {
+            console.error(`Clearing write stats on ${server.url} failed:`, (e as Error).stack ?? e);
+        }
+    }));
+    StorageSynced(SocketFunction.browserNodeId()).getStorageBuckets.resetAll();
+}
+
 export class StoragePage extends qreact.Component {
     render() {
-        let servers = StorageSynced(SocketFunction.browserNodeId()).getStorageBuckets();
+        const servers = StorageSynced(SocketFunction.browserNodeId()).getStorageBuckets();
         if (!servers) return <div>Loading storage servers...</div>;
         if (!servers.length) {
             return <div className={css.vbox(16)}>
@@ -227,6 +385,12 @@ export class StoragePage extends qreact.Component {
         return <div className={css.vbox(16)}>
             <div className={css.hbox(12)}>
                 <h2 className={css.flexGrow(1)}>Storage</h2>
+                <button className={css.pad2(12, 8).button.bord2(0, 0, 20).hsl(0, 0, 100)}
+                    onClick={() => {
+                        void resetWriteStats(servers);
+                    }}>
+                    Reset write stats
+                </button>
                 <button className={css.pad2(12, 8).button.bord2(0, 0, 20).hsl(0, 0, 100)}
                     onClick={() => {
                         StorageSynced(SocketFunction.browserNodeId()).getStorageBuckets.resetAll();
@@ -234,12 +398,21 @@ export class StoragePage extends qreact.Component {
                     Refresh
                 </button>
             </div>
+            <DeployNotices servers={servers} />
             <Table
                 rows={getBucketRows(servers)}
                 columns={{
                     server: { title: "Server" },
                     bucket: { title: "Bucket" },
-                    state: { title: "State" },
+                    serverUrl: null,
+                    state: {
+                        title: "State",
+                        formatter: (state, context) => {
+                            let row = context?.row;
+                            if (!row || !row.bucket || state !== INACTIVE_STATE) return state;
+                            return <ActivateBucketButton serverUrl={row.serverUrl} bucketName={row.bucket} />;
+                        }
+                    },
                     files: { title: "Files" },
                     bytes: { title: "Bytes" },
                     indexSources: {
@@ -247,6 +420,22 @@ export class StoragePage extends qreact.Component {
                         formatter: sources => <IndexSourcesCell sources={sources} />
                     },
                     readerDiskLimit: { title: "Read cache limit" },
+                    writes: { title: "Writes" },
+                    written: { title: "Written" },
+                    writeGain: { title: "Coalescing gain" },
+                    disk: {
+                        title: "Drive",
+                        formatter: (disk, context) => {
+                            if (!disk) return context?.row?.diskError || "";
+                            return <UsageBar
+                                label={DISK_BAR_TYPE}
+                                value={disk.usedBytes}
+                                max={disk.totalBytes}
+                                {...getUsageThresholds(DISK_BAR_TYPE)}
+                            />;
+                        }
+                    },
+                    diskError: null,
                     syncing: {
                         title: "Syncing",
                         formatter: syncing => <div className={css.vbox(2)}>