querysub 0.547.0 → 0.549.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "querysub",
-  "version": "0.547.0",
+  "version": "0.549.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.35",
     "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,13 @@ 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_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 +40,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 +210,100 @@ 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> {
+    // Reads outside a synchronized context have to go through localRead, and the plain values are pulled out here so nothing proxied escapes into the async work
+    let target = Querysub.localRead(() => {
+        let watch = liveWatchData().watches[key];
+        if (!watch) return undefined;
+        return { serverUrl: watch.serverUrl, bucketName: watch.bucketName };
+    });
+    if (!target) return;
+    let { serverUrl, bucketName } = target;
+    Querysub.commit(() => {
+        let current = liveWatchData().watches[key];
+        if (current) current.loading = true;
+    });
+    let live = await getServerActiveBucket({ url: serverUrl, account: STORAGE_ACCOUNT, bucketName });
+    // "Not loaded here" comes back as a string - it's a normal result, not an error
+    let error: string | undefined;
+    let result: RemoteConfig | undefined;
+    if (typeof live === "string") {
+        error = live;
+    } else {
+        result = live.routing;
+    }
+    Querysub.commit(() => {
+        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 = Querysub.localRead(() => !!liveWatchData().watches[key]);
+    Querysub.commit(() => {
+        if (existed) {
+            delete liveWatchData().watches[key];
+            return;
+        }
+        liveWatchData().watches[key] = { serverUrl, bucketName, loading: true };
+    });
+    if (existed) return;
+    void refreshWatch(key);
+}
+
+function refreshAllWatches(): void {
+    // Fired from a timer, so the key list has to be read through localRead
+    let keys = Querysub.localRead(() => Object.keys(liveWatchData().watches));
+    for (let key of keys) {
+        void refreshWatch(key);
+    }
+}
+
+function clearWatches(): void {
+    Querysub.commit(() => {
+        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 +345,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() {
+        const 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 +376,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 +466,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/ServiceDetailPage.tsx

@@ -701,7 +701,7 @@ export class ServiceDetailPage extends qreact.Component {
                             Cancel Scheduled Deploy
                         </button>
                         <button
-                            className={css.pad2(12, 8).button.bord2(0, 70, 40).hsl(0, 70, 90)}
+                            className={css.pad2(12, 8).button.bord2(45, 80, 35).hsl(45, 85, 82)}
                             disabled={this.state.isDeploying}
                             title="Changes the scheduled deploy to go live immediately"
                             onClick={() => {
@@ -818,8 +818,9 @@ export class ServiceDetailPage extends qreact.Component {
                     </span>}
                     <div className={css.hbox(8)}>
                         <button
-                            className={css.pad2(12, 8).button.bord2(0, 70, 40).hsl(0, 70, 90)}
+                            className={css.pad2(12, 8).button.bord2(45, 80, 35).hsl(45, 85, 82)}
                             disabled={this.state.isDeploying}
+                            title="Deploys immediately; the old instances keep running for their configured overlap before shutting down"
                             onClick={() => {
                                 this.confirmForceDeployNow(makeDeployConfig(Date.now()));
                             }}>

package/src/deployManager/components/StoragePage.tsx

@@ -1,13 +1,18 @@
 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 { getLiveServiceParameters, getMachineTargets, applyCommandTemplate, ServiceParameters, ServiceConfig, MachineServiceController, DEFAULT_OVERLAP_TIME } from "../machineSchema";
+import { isDefined } from "../../misc";
 import { STORAGE_ACCOUNT } from "../../-a-archives/archives2";
 import { Table } from "../../5-diagnostics/Table";
 import { RouteConfigView } from "./RouteConfigView";
@@ -16,13 +21,24 @@ module.hotreload = true;
 
 const STORAGE_COMMAND_PREFIX = "yarn storageserve";
 const URL_ARG_REGEX = /--url\s+(\S+)/g;
-const ERROR_TEXT_LIMIT = 500;
 
-export type StorageServerBuckets = {
+/** The release a storage service is in the middle of. Read straight from the service configs, so it resolves without contacting any storage server - which is exactly when it matters most, since a deploy is the usual reason the servers don't answer. */
+export type StorageService = {
     serviceKey: string;
+    serviceTitle: string;
+    releaseTime?: number;
+    overlapTime: number;
+    hasOldParameters: boolean;
+};
+
+export type StorageServer = StorageService & {
     url: string;
+};
+
+export type StorageServerBuckets = StorageServer & {
+    /** Still waiting on this server's own endpoint - each server loads independently */
+    loading?: boolean;
     buckets?: ServerBucketInfo[];
-    error?: string;
 };
 
 function getStorageUrls(parameters: ServiceParameters): string[] {
@@ -37,27 +53,43 @@ function getStorageUrls(parameters: ServiceParameters): string[] {
     return urls;
 }
 
-class StoragePageControllerBase {
-    public async getStorageBuckets(): Promise<StorageServerBuckets[]> {
-        let configs = await getEffectiveServiceConfigs();
-        let serviceKeyByUrl = new Map<string, string>();
-        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);
-                }
+/** The storage servers a set of service configs runs, worked out on the client - it already has the configs, so asking the server to re-derive them would just make the whole page wait on one uncacheable call. */
+export function getStorageServers(configs: ServiceConfig[]): StorageServer[] {
+    let serviceByUrl = new Map<string, StorageServer>();
+    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 (serviceByUrl.has(url)) continue;
+                serviceByUrl.set(url, {
+                    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]) => {
-            try {
-                return { serviceKey, 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 [...serviceByUrl.values()];
+}
+
+export function getStorageServices(servers: StorageServer[]): StorageService[] {
+    let byKey = new Map<string, StorageService>();
+    for (let server of servers) {
+        if (byKey.has(server.serviceKey)) continue;
+        byKey.set(server.serviceKey, server);
+    }
+    return [...byKey.values()];
+}
+
+class StoragePageControllerBase {
+    /** Purely a forwarder - browsers can't authenticate to a storage server themselves. One call per server, so each caches and refreshes on its own. */
+    public async getServerBuckets(url: string): Promise<ServerBucketInfo[]> {
+        return await listServerBuckets({ url, account: STORAGE_ACCOUNT });
     }
 }
 
@@ -65,7 +97,7 @@ export const StoragePageController = SocketFunction.register(
     "StoragePageController-4f1c93ab-77e2-4d15-9a30-1c6b8f5d2e04",
     new StoragePageControllerBase(),
     () => ({
-        getStorageBuckets: {},
+        getServerBuckets: {},
     }),
     () => ({
         hooks: [assertIsManagementUser],
@@ -79,36 +111,61 @@ 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: "",
         };
-        if (server.error) {
-            rows.push({ ...baseRow, error: server.error });
+        if (server.loading) {
+            rows.push({ ...baseRow, bucket: "Loading..." });
             continue;
         }
         let buckets = [...server.buckets || []];
@@ -123,11 +180,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 +198,58 @@ 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: "",
+    };
+    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 () => {
+                        let result = await activateServerBucket({ url: serverUrl, account: STORAGE_ACCOUNT, 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.activating = false;
+                            this.state.error = refusal;
+                            // Only this server's buckets changed
+                            if (!refusal) {
+                                StorageSynced(SocketFunction.browserNodeId()).getServerBuckets.reset(serverUrl);
+                            }
+                        });
+                    });
+                }}
+            >
+                {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 +295,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,32 +328,148 @@ class IndexSourcesCell extends qreact.Component<{ sources: BucketConfig["indexSo
     }
 }
 
-export class StoragePage extends qreact.Component {
+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 servers = StorageSynced(SocketFunction.browserNodeId()).getStorageBuckets();
-        if (!servers) return <div>Loading storage servers...</div>;
-        if (!servers.length) {
-            return <div className={css.vbox(16)}>
-                <h2>Storage</h2>
-                <div>No services with a command starting with {JSON.stringify(STORAGE_COMMAND_PREFIX)} were found.</div>
-            </div>;
+        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. */
+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)}`}
+                />);
+            }
         }
-        return <div className={css.vbox(16)}>
+        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.loading) return;
+        let { clearedBuckets } = await clearServerWriteStats({ url: server.url, account: STORAGE_ACCOUNT });
+        console.log(`Cleared write stats for ${clearedBuckets} buckets on ${server.url}`);
+    }));
+    Querysub.commit(() => {
+        StorageSynced(SocketFunction.browserNodeId()).getServerBuckets.resetAll();
+    });
+}
+
+export class StoragePage extends qreact.Component {
+    render() {
+        const controller = StorageSynced(SocketFunction.browserNodeId());
+        const machineController = MachineServiceController(SocketFunction.browserNodeId());
+        const serviceList = machineController.getServiceList();
+        // The configs are already synchronized to the client, so the deploy state needs no round trip at all
+        const configs = (serviceList || []).map(serviceId => machineController.getServiceConfig(serviceId)).filter(isDefined);
+        const storageServers = getStorageServers(configs);
+        const servers: StorageServerBuckets[] = storageServers.map(server => {
+            let buckets = controller.getServerBuckets(server.url);
+            if (!buckets) return { ...server, loading: true };
+            return { ...server, buckets };
+        });
+        const header = <>
             <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={() => {
-                        StorageSynced(SocketFunction.browserNodeId()).getStorageBuckets.resetAll();
+                        void resetWriteStats(servers);
+                    }}>
+                    Reset write stats
+                </button>
+                <button className={css.pad2(12, 8).button.bord2(0, 0, 20).hsl(0, 0, 100)}
+                    onClick={() => {
+                        controller.getServerBuckets.resetAll();
                     }}>
                     Refresh
                 </button>
             </div>
+            <DeployNotices services={getStorageServices(storageServers)} />
+        </>;
+        if (!serviceList) {
+            return <div className={css.vbox(16)}>
+                {header}
+                <div>Loading services...</div>
+            </div>;
+        }
+        if (!servers.length) {
+            return <div className={css.vbox(16)}>
+                {header}
+                <div>No services with a command starting with {JSON.stringify(STORAGE_COMMAND_PREFIX)} were found.</div>
+            </div>;
+        }
+        return <div className={css.vbox(16)}>
+            {header}
             <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 +477,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)}>

package/src/deployManager/components/deployButtons.tsx

@@ -85,7 +85,7 @@ export class UpdateButtons extends qreact.Component<{
                     : "All services release immediately. Their old instances keep running for their configured overlap before shutting down."}</div>
                 <div className={css.hbox(10)}>
                     <button
-                        className={css.pad2(12, 8).button.bord2(0, 70, 40).hsl(0, 70, 90)}
+                        className={css.pad2(12, 8).button + (noOverlap && css.bord2(0, 90, 30).hsl(0, 85, 65).colorhsl(0, 0, 100).fontWeight("bold") || css.bord2(45, 80, 35).hsl(45, 85, 82))}
                         onClick={() => {
                             modal && modal.close();
                             this.deployAll(outdatedServices, latestRef, noOverlap ? "nowNoOverlap" : "now");
@@ -174,7 +174,7 @@ export class UpdateButtons extends qreact.Component<{
                     </div>)}
                 </button>
                 <button
-                    className={buttonStyle.hsl(0, 70, 90)}
+                    className={buttonStyle.hsl(45, 85, 82)}
                     disabled={this.state.isDeploying}
                     title="Deploys immediately; the old instances keep running for their configured overlap before shutting down"
                     onClick={() => {