querysub 0.606.0 → 0.607.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "querysub",
-  "version": "0.606.0",
+  "version": "0.607.0",
   "main": "index.js",
   "license": "MIT",
   "note1": "note on node-forge fork, see https://github.com/digitalbazaar/forge/issues/744 for details",

package/src/-a-archives/archives2.ts

@@ -40,8 +40,6 @@ function createSourceWindows(
 }
 
 function archiveBuilder(bucket: string, overrides: Partial<RemoteConfigBase>) {
-    // REMEMBER TO INCREMENT VERSION WHEN YOU MAKE CHANGES!
-    // REMEMBER TO RERUN initArchives2 if you change this (It's probably something you should call in your entry point.
     const ONTARIO = `https://99-250-124-91.querysubtest.com:5234/file/${STORAGE_ACCOUNT}/${bucket}/storage/storagerouting.json`;
     const HETZNER = `https://65-109-93-113.querysubtest.com:5234/file/${STORAGE_ACCOUNT}/${bucket}/storage/storagerouting.json`;
     const BACKBLAZE = `https://f002.backblazeb2.com/file/${bucket}/storage/storagerouting.json`;
@@ -58,7 +56,10 @@ function archiveBuilder(bucket: string, overrides: Partial<RemoteConfigBase>) {
         return sources;
     }
 
+    // IMPORTANT! If we start running into problems with archives, we can always comment out all of our sources, switch back to Backblaze, create a new version, and then call initArchives2. This should make everything work again. It'll be slower because it's using back plays, and it will be flaky because it's using backblaze, but it should generally work, And it should be something that we can do with absolutely none of our infrastructure up. So it's a good way to get things running again if things break. 
 
+    // REMEMBER TO INCREMENT VERSION WHEN YOU MAKE CHANGES!
+    // REMEMBER TO RERUN initArchives2 if you change this (It's probably something you should call in your entry point.
     let sources = createSourceWindows(overrides, [
         {
             startTime: +new Date("2026-07-20 00:00:00-04:00"),
@@ -72,7 +73,7 @@ function archiveBuilder(bucket: string, overrides: Partial<RemoteConfigBase>) {
     ]);
 
     return createArchives({
-        version: 18,
+        version: 20,
         sources,
     });
 }
@@ -139,6 +140,10 @@ export function getArchives2Buffered(folder: string, bufferDelay = timeInMinute
     return nestBucket(folder, archivesBuilderCache(getSafeDomain() + "-fast", { noFullSync: true, fast: true, writeDelay: bufferDelay }));
 }
 
+export function getArchives2BufferedPublic(folder: string, bufferDelay = timeInMinute * 5) {
+    return nestBucket(folder, archivesBuilderCache(getSafeDomain() + "-fast", { noFullSync: true, fast: true, writeDelay: bufferDelay, public: true }));
+}
+
 export function getArchives2PrivateImmutable(folder: string) {
     return nestBucket(folder, archivesBuilderCache(getSafeDomain() + "-private-immutable", { noFullSync: true, immutable: true }));
 }

package/src/4-deploy/edgeBootstrap.ts

@@ -499,6 +499,14 @@ async function edgeNodeFunction(config: {
         };
         autoCandidates.sort((a, b) => edgePickPenalty(a) - edgePickPenalty(b));
 
+        // Prefer nodes that have heartbeat within the last 5 minutes, keeping the ordering above among them. Everything staler goes after, ordered by most-recent heartbeat first (past 5 minutes they're probably dead anyway, so exact order barely matters).
+        const EDGE_RECENT_HEARTBEAT_TIME = 5 * 60_000;
+        const lastHeartbeat = (node: EdgeNodeConfig) => node.heartbeatTime || node.bootTime;
+        let recentlyHeartbeat = autoCandidates.filter(x => Date.now() - lastHeartbeat(x) < EDGE_RECENT_HEARTBEAT_TIME);
+        let staleHeartbeat = autoCandidates.filter(x => Date.now() - lastHeartbeat(x) >= EDGE_RECENT_HEARTBEAT_TIME);
+        staleHeartbeat.sort((a, b) => lastHeartbeat(b) - lastHeartbeat(a));
+        autoCandidates = [...recentlyHeartbeat, ...staleHeartbeat];
+
         // Probe the pickable candidates first (the first batch sets the decision window), then everything else purely for the dropdown's stats
         let pickableHosts = new Set(autoCandidates.map(x => x.host));
         let probeOrder = [...autoCandidates, ...edgeNodes.filter(x => !pickableHosts.has(x.host))];

package/src/4-deploy/edgeNodes.ts

@@ -2,12 +2,13 @@ import { waitForFirstTimeSync } from "socket-function/time/trueTimeShim";
 import { getOwnMachineId } from "sliftutils/misc/https/certs";
 import { devDebugbreak, getDomain, isLocal, isPublic, noSyncing } from "../config";
 import child_process from "child_process";
-import { getAllNodeIds, getOwnNodeId } from "../-f-node-discovery/NodeDiscovery";
-import { getArchives2Public } from "../-a-archives/archives2";
+import { getOwnNodeId } from "../-f-node-discovery/NodeDiscovery";
+import { getArchives2Buffered, getArchives2BufferedPublic, getArchives2Public } from "../-a-archives/archives2";
 import { SocketFunction } from "socket-function/SocketFunction";
-import { delay, runInSerial, runInfinitePoll, runInfinitePollCallAtStart } from "socket-function/src/batching";
+import { delay, runInParallel, runInSerial, runInfinitePoll, runInfinitePollCallAtStart } from "socket-function/src/batching";
 import { compare, compareArray, isNodeTrue, sort, timeInMinute, timeInSecond } from "socket-function/src/misc";
-import { cacheLimited, lazy } from "socket-function/src/caching";
+import { formatDateTime, formatTime } from "socket-function/src/formatting/format";
+import { lazy } from "socket-function/src/caching";
 import { canHaveChildren } from "socket-function/src/types";
 import { getModuleFromConfig } from "../3-path-functions/pathFunctionLoader";
 import path from "path";
@@ -25,31 +26,20 @@ import { getGitRefLive, getGitURLLive } from "./git";
 import { DeployProgress } from "./deployFunctions";
 import { PromiseObj } from "../promise";
 import type { FunctionRunnerIndex } from "../4-querysub/FunctionRunnerTracking";
-import { unique } from "../misc";
-
 const UPDATE_POLL_INTERVAL = timeInMinute * 15;
-const DEAD_NODE_COUNT_THRESHOLD = 15;
+const HEARTBEAT_INTERVAL = timeInMinute;
+const EDGE_NODE_DELETE_THRESHOLD = timeInMinute * 15;
+const EDGE_NODE_READ_PARALLEL = 64;
 
-const edgeNodeStorage = isNodeTrue() && getArchives2Public("edgenodes/");
-const edgeNodeIndexFile = "edge-nodes-index.json";
+export const edgeNodeStorage = isNodeTrue() && getArchives2BufferedPublic("edgenodes2/");
+export const edgeNodeIndexFile = "edge-nodes-index.json";
 
-const getEdgeNodeConfig = cacheLimited(10000, async (fileName: string): Promise<EdgeNodeConfig | undefined> => {
-    let edgeNodeConfig = await edgeNodeStorage.get(fileName);
-    if (!edgeNodeConfig) return undefined;
-    let obj = JSON.parse(edgeNodeConfig.toString());
-    obj.fileName = fileName;
-    return obj;
-});
-let nextNodeNum = 1;
 let registeredNodePaths = new Set<string>();
 function getNextNodePath() {
-    let path = "node" + (nextNodeNum++) + "_" + getOwnNodeId();
+    let path = "node0_" + getOwnNodeId();
     registeredNodePaths.add(path);
     return path;
 }
-function getNodeIdFromPath(path: string) {
-    return path.split("_").slice(1).join("_");
-}
 
 let edgeShutdown = false;
 
@@ -59,8 +49,7 @@ export type EdgeNodesIndex = {
 };
 
 
-// IMPORTANT! The EdgeNodeConfig MUST be immutable, otherwise every node has to read every EdgeNodeConfig
-//  every poll, which is too much reading.
+// Kept small and mostly-immutable so clients can cache configs by nodeId; heartbeatTime and scheduledShutdownTime are the deliberate mutable exceptions, refreshed in place. Re-reading every config each poll is fine now that edgeNodeStorage is buffered.
 export type EdgeNodeConfig = {
     // NOTE: Only information needed for routing should be added here. The rest can be obtained by talking
     //  to the node itself (after picking the edgeNode node).
@@ -71,6 +60,8 @@ export type EdgeNodeConfig = {
     host: string;
     gitHash: string;
     bootTime: number;
+    // Refreshed every HEARTBEAT_INTERVAL. Clients prefer recently-heartbeat nodes; the index update evicts nodes that stop.
+    heartbeatTime: number;
     entryPaths: string[];
     public: boolean;
     // Set once this node has been told it will shut down (scheduled switchover). Clients deprioritize these nodes when picking an edge node.
@@ -181,6 +172,7 @@ export async function registerEdgeNode(config: {
             host,
             gitHash,
             bootTime: Date.now(),
+            heartbeatTime: Date.now(),
             entryPaths: config.entryPaths,
             public: isPublic(),
             functionRunnerIndex: await getInitialFunctionRunnerIndex(),
@@ -232,6 +224,7 @@ const loadEntryPointsByHash = runInSerial(async function loadEntryPointsByHash(c
         host: config.host,
         gitHash,
         bootTime: Date.now(),
+        heartbeatTime: Date.now(),
         entryPaths,
         public: isPublic(),
         functionRunnerIndex: await getInitialFunctionRunnerIndex(),
@@ -259,7 +252,6 @@ async function publishOwnScheduledShutdown(time: number) {
         if (config.scheduledShutdownTime === time) continue;
         config.scheduledShutdownTime = time;
         await edgeNodeStorage.set(nodePath, Buffer.from(JSON.stringify(config)));
-        getEdgeNodeConfig.clearKey(nodePath);
     }
     await updateEdgeNodesFile();
 }
@@ -273,34 +265,31 @@ const startUpdateLoop = lazy(async () => {
     startEdgeNotifier();
     SocketFunction.expose(EdgeNodeController);
     await getEdgeNodeConfigURLs();
+    await runInfinitePollCallAtStart(HEARTBEAT_INTERVAL, heartbeatLoop);
     await runInfinitePollCallAtStart(UPDATE_POLL_INTERVAL * (1 + Math.random() * 0.1), updateLoop);
 });
 
-async function updateLoop() {
+async function heartbeatLoop() {
     if (edgeShutdown) return;
-    await runEdgeNodesAliveCheck();
+    let nodePath = getNextNodePath();
+    let buffer = await edgeNodeStorage.get(nodePath);
+    if (!buffer) return;
+    let config: EdgeNodeConfig = JSON.parse(buffer.toString());
+    config.heartbeatTime = Date.now();
+    await edgeNodeStorage.set(nodePath, Buffer.from(JSON.stringify(config)));
+    // Push the fresh heartbeat into the index so clients see it (they read only the index, not the per-node files).
     await updateEdgeNodesFile();
 }
 
-let deadCounts = new Map<string, number>();
-async function runEdgeNodesAliveCheck() {
-    let edgeNodeNodeIds = await edgeNodeStorage.find("node", { type: "files" });
-    let nodeIds = new Set(await getAllNodeIds());
-    for (let fileName of edgeNodeNodeIds) {
-        let nodeId = getNodeIdFromPath(fileName);
-        if (!nodeIds.has(nodeId)) {
-            deadCounts.set(fileName, (deadCounts.get(fileName) ?? 0) + 1);
-        }
-    }
-
-    for (let [fileName, count] of Array.from(deadCounts)) {
-        if (count < DEAD_NODE_COUNT_THRESHOLD) continue;
-        console.log(`Node is dead. Removing from edgeNodes.`, { fileName, count });
-        deadCounts.delete(fileName);
-        await edgeNodeStorage.del(fileName);
-    }
+async function updateLoop() {
+    if (edgeShutdown) return;
+    await updateEdgeNodesFile();
 }
+
 async function updateEdgeNodesFile() {
+    // Snapshot the time BEFORE reading anything below. Staleness is judged against when we STARTED, so if the reads block we can never mass-evict live nodes just because wall-clock advanced while we were stuck.
+    let now = Date.now();
+
     let prevEdgeNodeFile = await edgeNodeStorage.get(edgeNodeIndexFile);
     let prevEdgeNodeIndex: EdgeNodesIndex = {
         edgeNodes: [],
@@ -314,9 +303,6 @@ async function updateEdgeNodesFile() {
         console.error(`Failed to parse ${edgeNodeIndexFile}`, { error: e, prevEdgeNodeFile });
     }
 
-    let edgeNodeFiles = await edgeNodeStorage.find("node", { type: "files" });
-    let edgeNodeNodeIds = unique(edgeNodeFiles.map(getNodeIdFromPath));
-
     let liveHash = "";
     if (!noSyncing()) {
         liveHash = await Querysub.commitAsync(() => {
@@ -329,47 +315,57 @@ async function updateEdgeNodesFile() {
         }
     }
 
-    let diff = !!compareArray(edgeNodeNodeIds.sort(), prevEdgeNodeIndex.edgeNodes.map(x => x.nodeId).sort());
-    if (diff) {
-        console.log(`Detected edgeNodes changed. Updating ${edgeNodeIndexFile}`, { edgeNodeNodeIds, liveHash });
-    }
-    if (liveHash !== prevEdgeNodeIndex.liveHash) {
-        diff = true;
-        console.log(`Detected live hash changed. Updating ${edgeNodeIndexFile}`, { liveHash, prevHash: prevEdgeNodeIndex.liveHash });
-    }
-    if (!diff) {
-        // Node configs are otherwise immutable, but the scheduled shutdown time is written into them after the fact, and clients need it to avoid picking dying edge nodes.
-        let prevShutdownTimes = new Map(prevEdgeNodeIndex.edgeNodes.map(x => [x.nodeId, x.scheduledShutdownTime]));
-        for (let nodeFile of edgeNodeFiles) {
-            let config = await getEdgeNodeConfig(nodeFile);
-            if (!config) continue;
-            if (prevShutdownTimes.get(config.nodeId) !== config.scheduledShutdownTime) {
-                diff = true;
-                console.log(`Detected scheduled shutdown time changed for ${config.nodeId}. Updating ${edgeNodeIndexFile}`);
-                break;
-            }
+    let edgeNodeFiles = await edgeNodeStorage.find("node", { type: "files" });
+    // Reads are independent, so run them in parallel (bounded): with many files a serial pass would take files × read-latency, which could be minutes.
+    let readEdgeNodeFile = runInParallel({ parallelCount: EDGE_NODE_READ_PARALLEL }, async (nodeFile: string) => {
+        // Read directly, not through a cache: heartbeatTime mutates every minute, so a cached config would report a stale heartbeat and wrongly evict a live peer.
+        let buffer = await edgeNodeStorage.get(nodeFile);
+        if (!buffer) return undefined;
+        let config: EdgeNodeConfig = JSON.parse(buffer.toString());
+        let lastHeartbeat = config.heartbeatTime || config.bootTime;
+        if (now - lastHeartbeat > EDGE_NODE_DELETE_THRESHOLD) {
+            console.log(`Edge node ${config.nodeId} hasn't heartbeat since ${formatDateTime(lastHeartbeat)} (${formatTime(now - lastHeartbeat)} ago, over the ${formatTime(EDGE_NODE_DELETE_THRESHOLD)} limit). Removing ${nodeFile} from edgeNodes.`);
+            await edgeNodeStorage.del(nodeFile);
+            return undefined;
+        }
+        return config;
+    });
+    let configs = await Promise.all(edgeNodeFiles.map(readEdgeNodeFile));
+
+    let bestByNodeId = new Map<string, EdgeNodeConfig>();
+    for (let config of configs) {
+        if (!config) continue;
+        // One entry per nodeId (re-registrations can leave more than one), keeping the freshest heartbeat.
+        let existing = bestByNodeId.get(config.nodeId);
+        if (!existing || (config.heartbeatTime || config.bootTime) > (existing.heartbeatTime || existing.bootTime)) {
+            bestByNodeId.set(config.nodeId, config);
         }
     }
-    if (!diff) return;
-
-
 
+    let newEdgeNodes = sort(Array.from(bestByNodeId.values()), x => -(x.heartbeatTime || x.bootTime));
     let newEdgeNodeIndex: EdgeNodesIndex = {
-        edgeNodes: [],
+        edgeNodes: newEdgeNodes,
         liveHash,
     };
-    for (let nodeFile of edgeNodeFiles) {
-        let edgeNodeConfig = await getEdgeNodeConfig(nodeFile);
-        if (!edgeNodeConfig) continue;
-        newEdgeNodeIndex.edgeNodes.push(edgeNodeConfig);
+
+    let prevNodeIds = prevEdgeNodeIndex.edgeNodes.map(x => x.nodeId).sort();
+    let newNodeIds = newEdgeNodes.map(x => x.nodeId).sort();
+    if (compareArray(newNodeIds, prevNodeIds)) {
+        console.log(`Detected edgeNodes membership changed. Updating ${edgeNodeIndexFile}`, { prevNodeIds, newNodeIds, liveHash });
     }
+    if (liveHash !== prevEdgeNodeIndex.liveHash) {
+        console.log(`Detected live hash changed from ${prevEdgeNodeIndex.liveHash} to ${liveHash}. Updating ${edgeNodeIndexFile}`);
+    }
+
+    // Heartbeats advance every minute, so the serialized index differs on almost every call. Writing that often is fine (edgeNodeStorage is buffered); we deliberately only LOG the rare membership / live-hash changes above, never the routine heartbeat refresh.
+    if (JSON.stringify(newEdgeNodeIndex) === JSON.stringify(prevEdgeNodeIndex)) return;
 
-    console.log(magenta(`Updating ${edgeNodeIndexFile} with ${JSON.stringify(newEdgeNodeIndex)}`));
     await edgeNodeStorage.set(edgeNodeIndexFile, Buffer.from(JSON.stringify(newEdgeNodeIndex)));
     await delay(Math.random() * 1000);
     async function verify() {
         let buffer = await edgeNodeStorage.get(edgeNodeIndexFile);
-        let index = JSON.parse(buffer!.toString()) as EdgeNodesIndex;
+        if (!buffer) return false;
+        let index = JSON.parse(buffer.toString()) as EdgeNodesIndex;
         let ownNodeId = getOwnNodeId();
         return index.edgeNodes.some(x => x.nodeId === ownNodeId);
     }

package/src/deployManager/MachinesPage.tsx

@@ -9,7 +9,7 @@ import { ServiceDetailPage } from "./components/ServiceDetailPage";
 import { MachineDetailPage } from "./components/MachineDetailPage";
 import { Anchor } from "../library-components/ATag";
 import { DeployPage } from "./components/DeployPage";
-import { StoragePage } from "./components/StoragePage";
+import { StoragePage } from "./components/storage/StoragePage";
 
 export class MachinesPage extends qreact.Component {
     private renderTabs() {

package/src/deployManager/components/{RouteConfigView.tsx → storage/RouteConfigView.tsx}

@@ -1,6 +1,6 @@
-import { qreact } from "../../4-dom/qreact";
-import { Querysub } from "../../4-querysub/Querysub";
-import { t } from "../../2-proxy/schema2";
+import { qreact } from "../../../4-dom/qreact";
+import { Querysub } from "../../../4-querysub/Querysub";
+import { t } from "../../../2-proxy/schema2";
 import { css } from "typesafecss";
 import { sort } from "socket-function/src/misc";
 import { formatNumber, formatDateTime, formatTime, formatDateTimeDetailed } from "socket-function/src/formatting/format";
@@ -9,11 +9,12 @@ import { resolveIntermediateSources, getIntermediateSources } from "sliftutils/s
 import { SocketFunction } from "socket-function/SocketFunction";
 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";
-import { FullscreenModal } from "../../5-diagnostics/FullscreenModal";
-import { Button } from "../../library-components/Button";
+import { showModal } from "../../../5-diagnostics/Modal";
+import { FullscreenModal } from "../../../5-diagnostics/FullscreenModal";
+import { Button } from "../../../library-components/Button";
 import { Tag, TAG_FONT_SIZE, TAG_WARNING_COLOR, getSourceTags } from "./Tag";
-import { StorageSynced, type StorageServerBuckets } from "./StoragePage";
+import { StorageSynced } from "./storageController";
+import { type StorageServerBuckets } from "./storageServers";
 
 module.hotreload = true;
 
@@ -574,7 +575,7 @@ export class RouteConfigView extends qreact.Component<{ servers: StorageServerBu
                 <h3>Live configs</h3>
                 {watches.map(([key, watch]) => <LiveWatchView key={key} watchKey={key} watch={watch} />)}
             </div>}
-            <h3>Routing configs</h3>
+            <h2>Routing configs</h2>
             {groups.map((group, index) => <RouteConfigGroupView key={index} group={group} />)}
         </div>;
     }

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

@@ -0,0 +1,151 @@
+import { SocketFunction } from "socket-function/SocketFunction";
+import { qreact } from "../../../4-dom/qreact";
+import { css } from "typesafecss";
+import { Querysub } from "../../../4-querysub/Querysub";
+import { isDefined } from "../../../misc";
+import { MachineServiceController } from "../../machineSchema";
+import { STORAGE_COMMAND_PREFIX } from "../../serviceCategories";
+import { UsageBar, getUsageThresholds } from "../../../library-components/UsageBar";
+import { Table } from "../../../5-diagnostics/Table";
+import { getStorageServers, getStorageServices, type StorageServerBuckets } from "./storageServers";
+import { StorageSynced } from "./storageController";
+import { getBucketRows, INACTIVE_STATE } from "./bucketRows";
+import { ActivateBucketButton, IndexSourcesCell, SyncingCell } from "./bucketCells";
+import { DeployNotices } from "./deployNotices";
+import { OperationsCell, OperationsSection, refreshOperationsData } from "./operationsView";
+import { RouteConfigView } from "./RouteConfigView";
+import { Tag } from "./Tag";
+
+module.hotreload = true;
+
+const DISK_BAR_TYPE = "DISK";
+
+// These columns only ever hold a short single token; the default pre-wrap makes them wrap mid-value in a narrow column, which reads badly, so they opt out of wrapping and let the column widen instead.
+const nowrapCell = (value: string) => <span className={css.whiteSpace("nowrap")}>{value}</span>;
+
+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();
+    });
+    // Clearing write stats also clears the server's access stats, so the operations breakdown has to refetch to match.
+    refreshOperationsData();
+}
+
+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).alignItems("center")}>
+                <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();
+                        refreshOperationsData();
+                    }}>
+                    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", formatter: nowrapCell },
+                    bytes: { title: "Bytes", formatter: nowrapCell },
+                    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", formatter: nowrapCell },
+                    operationsServerUrl: {
+                        title: "Operations",
+                        formatter: url => url && <OperationsCell serverUrl={url} /> || "",
+                    },
+                    writeGain: { title: "Fast gain", formatter: nowrapCell },
+                    disk: {
+                        title: "Drive",
+                        formatter: (disk, context) => {
+                            if (!disk) return context?.row?.diskError || "";
+                            return <UsageBar
+                                label={DISK_BAR_TYPE}
+                                value={disk.usedBytes}
+                                max={disk.totalBytes}
+                                unit="B"
+                                {...getUsageThresholds(DISK_BAR_TYPE)}
+                            />;
+                        }
+                    },
+                    diskError: null,
+                    syncing: {
+                        title: "Syncing",
+                        formatter: syncing => <SyncingCell syncing={syncing} />
+                    },
+                    error: { title: "Error" },
+                }}
+            />
+            <OperationsSection
+                serverUrls={servers.map(server => server.url)}
+                onResetWriteStats={() => void resetWriteStats(servers)}
+            />
+            <RouteConfigView servers={servers} />
+        </div>;
+    }
+}

package/src/deployManager/components/{Tag.tsx → storage/Tag.tsx}

@@ -1,4 +1,4 @@
-import { qreact } from "../../4-dom/qreact";
+import { qreact } from "../../../4-dom/qreact";
 import { css } from "typesafecss";
 import { formatNumber, formatTime } from "socket-function/src/formatting/format";
 import type { HostedConfig, BackblazeConfig } from "sliftutils/storage/IArchives";