querysub 0.606.0 → 0.607.0

package/src/deployManager/components/StoragePage.tsx

@@ -1,652 +0,0 @@
-import { SocketFunction } from "socket-function/SocketFunction";
-import { qreact } from "../../4-dom/qreact";
-import { css } from "typesafecss";
-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, getServerActiveBucket } from "sliftutils/storage/remoteStorage/createArchives";
-import type { ServerBucketInfo, BucketWriteStats, ActiveBucketInfo } from "sliftutils/storage/remoteStorage/storageServerState";
-import type { ArchivesConfig, SyncActivity, RemoteConfig, HostedConfig } from "sliftutils/storage/IArchives";
-import { parseHostedUrl } from "sliftutils/storage/remoteStorage/remoteConfig";
-import { UsageBar, getUsageThresholds } from "../../library-components/UsageBar";
-import { getSyncedController } from "../../library-components/SyncedController";
-import { assertIsManagementUser } from "../../diagnostics/managementPages";
-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";
-import { Tag, SourceTag, getSourceTags } from "./Tag";
-import { STORAGE_COMMAND_PREFIX } from "../serviceCategories";
-import { BucketDiskInfo } from "sliftutils/storage/remoteStorage/bucketDisk";
-
-module.hotreload = true;
-
-const URL_ARG_REGEX = /--url\s+(\S+)/g;
-
-/** 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[];
-    /** This server could not be read at all. Kept per server rather than thrown, so one bad server costs its own row and nothing else. */
-    error?: string;
-};
-
-function getStorageUrls(parameters: ServiceParameters): string[] {
-    if (!parameters.command.trimStart().startsWith(STORAGE_COMMAND_PREFIX)) return [];
-    let urls: string[] = [];
-    for (let target of getMachineTargets(parameters)) {
-        let command = applyCommandTemplate(parameters.command, target.variables);
-        for (let match of command.matchAll(URL_ARG_REGEX)) {
-            urls.push(match[1]);
-        }
-    }
-    return urls;
-}
-
-/** 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)];
-        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 [...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()];
-}
-
-/** Every storage call is proxied through here: they authenticate with this machine's identity CA, which the browser has no access to. */
-class StoragePageControllerBase {
-    /** 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 });
-    }
-    public async activateBucket(url: string, bucketName: string): Promise<ActiveBucketInfo | string> {
-        return await activateServerBucket({ url, account: STORAGE_ACCOUNT, bucketName });
-    }
-    public async getActiveBucket(url: string, bucketName: string): Promise<ActiveBucketInfo | string> {
-        return await getServerActiveBucket({ url, account: STORAGE_ACCOUNT, bucketName });
-    }
-    public async clearWriteStats(url: string): Promise<{ clearedBuckets: number }> {
-        return await clearServerWriteStats({ url, account: STORAGE_ACCOUNT });
-    }
-}
-
-export const StoragePageController = SocketFunction.register(
-    "StoragePageController-4f1c93ab-77e2-4d15-9a30-1c6b8f5d2e04",
-    new StoragePageControllerBase(),
-    () => ({
-        getServerBuckets: {},
-        activateBucket: {},
-        getActiveBucket: {},
-        clearWriteStats: {},
-    }),
-    () => ({
-        hooks: [assertIsManagementUser],
-    }),
-    {
-    }
-);
-
-export const StorageSynced = getSyncedController(StoragePageController, {
-    reads: {},
-    writes: {},
-});
-
-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;
-    writes: string;
-    written: string;
-    writeGain: string;
-    disk?: BucketDiskInfo;
-    diskError: string;
-    syncing: ArchivesConfig["syncing"];
-    error: string;
-};
-
-const GAIN_DECIMALS = 1;
-const DEFAULT_HTTPS_PORT = 443;
-const DISK_BAR_TYPE = "DISK";
-const ACTIVE_STATE = "active";
-const INACTIVE_STATE = "inactive";
-
-/** 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`;
-}
-
-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: "",
-            writes: "",
-            written: "",
-            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" });
-            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" || "",
-                    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 || "",
-                });
-            } catch (e: any) {
-                rows.push({
-                    ...baseRow,
-                    server: index === 0 && server.url || "",
-                    bucket: bucket.bucketName,
-                    error: e.stack ?? String(e),
-                });
-            }
-        }
-    }
-    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 () => {
-                        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.";
-const SOURCE_TYPE_COLOR = { h: 265, s: 40, l: 88 };
-const SOURCE_PART_COLOR = { h: 0, s: 0, l: 96 };
-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. */
-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: [] };
-}
-
-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>;
-    }
-}
-
-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;
-}
-
-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>;
-    }
-}
-
-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. */
-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>;
-    }
-}
-
-async function resetWriteStats(servers: StorageServerBuckets[]): Promise<void> {
-    await Promise.all(servers.map(async server => {
-        if (server.loading) return;
-        let { clearedBuckets } = await StorageSynced(SocketFunction.browserNodeId()).clearWriteStats.promise(server.url);
-        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 => {
-            // Every other server still has something worth showing, so one that cannot be read becomes a row saying so instead of an empty page
-            try {
-                let buckets = controller.getServerBuckets(server.url);
-                if (!buckets) return { ...server, loading: true };
-                return { ...server, buckets };
-            } catch (e: any) {
-                return { ...server, error: e.stack ?? String(e) };
-            }
-        });
-        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={() => {
-                        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" },
-                    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" },
-                    flags: {
-                        title: "Flags",
-                        // Only flags that are set produce a tag, so an empty cell means every default
-                        formatter: flags => <div className={css.hbox(4).wrap}>
-                            {(flags || []).map(tag => <Tag key={tag.text} icon={tag.icon} text={tag.text} />)}
-                        </div>
-                    },
-                    indexSources: {
-                        title: "Index sources",
-                        formatter: sources => <IndexSourcesCell sources={sources} />
-                    },
-                    readerDiskLimit: { title: "Read cache limit" },
-                    writes: { title: "Writes" },
-                    written: { title: "Written" },
-                    writeGain: { title: "Fast 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 => <SyncingCell syncing={syncing} />
-                    },
-                    error: { title: "Error" },
-                }}
-            />
-            <RouteConfigView servers={servers} />
-        </div>;
-    }
-}