querysub 0.631.0 → 0.633.0

package/package.json

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

package/src/deployManager/MachinesPage.tsx

@@ -10,6 +10,7 @@ import { MachineDetailPage } from "./components/MachineDetailPage";
 import { Anchor } from "../library-components/ATag";
 import { DeployPage } from "./components/DeployPage";
 import { StoragePage } from "./components/storage/StoragePage";
+import { StorageLogsPage } from "./components/storage/StorageLogsPage";
 import { RoutingTablePage } from "../diagnostics/misc-pages/RoutingTablePage";
 
 export class MachinesPage extends qreact.Component {
@@ -23,6 +24,7 @@ export class MachinesPage extends qreact.Component {
                 { key: "services", label: "Services", otherKeys: ["service-detail"] },
                 { key: "deploy", label: "Deploy", otherKeys: [] },
                 { key: "storage", label: "Storage", otherKeys: [] },
+                { key: "storage-logs", label: "Storage Logs", otherKeys: [] },
                 { key: "routing", label: "PathValues / Functions Routing", otherKeys: [] },
             ].map(tab => {
                 let isActive = currentViewParam.value === tab.key || tab.otherKeys.includes(currentViewParam.value);
@@ -52,6 +54,7 @@ export class MachinesPage extends qreact.Component {
                 {currentViewParam.value === "machine-detail" && <MachineDetailPage />}
                 {currentViewParam.value === "deploy" && <DeployPage />}
                 {currentViewParam.value === "storage" && <StoragePage />}
+                {currentViewParam.value === "storage-logs" && <StorageLogsPage />}
                 {currentViewParam.value === "routing" && <RoutingTablePage />}
             </div>
         </div>;

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

@@ -0,0 +1,251 @@
+import preact from "preact";
+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 { formatNumber, formatTime, formatDateTime } from "socket-function/src/formatting/format";
+import { timeInSecond } from "socket-function/src/misc";
+import type { LogFileInfo } from "sliftutils/storage/StreamingLogs";
+import { MachineServiceController } from "../../machineSchema";
+import { getStorageServers } from "./storageServers";
+import { Table } from "../../../5-diagnostics/Table";
+import { URLParam } from "../../../library-components/URLParam";
+import { InputLabelURL } from "../../../library-components/InputLabel";
+import { Button } from "../../../library-components/Button";
+import { TimeRangeSelector, getTimeRange } from "../../../diagnostics/logs/TimeRangeSelector";
+import { StorageLogsSynced } from "./storageLogsController";
+import { searchStorageLogs, invalidateStorageLogSearchCache } from "./storageLogSearch";
+
+module.hotreload = true;
+
+export const storageLogSearchParam = new URLParam("storageLogSearch", "");
+
+// Fixed columns first so every search reads the same way; the entries' own fields follow in the order they appear.
+const LEADING_COLUMNS = ["server", "file", "time", "kind"];
+const ERROR_COLOR = { h: 0, s: 60, l: 40 };
+const AGE_COLOR = { h: 0, s: 0, l: 40 };
+const AGE_FONT_SIZE = 13;
+
+type ServerLogListing = {
+    url: string;
+    loading?: boolean;
+    error?: string;
+    files?: LogFileInfo[];
+    fetchTime?: number;
+};
+
+type SearchState = {
+    searching: boolean;
+    doneFiles: number;
+    totalFiles: number;
+    currentFile: string;
+    /** How long the last search took */
+    durationTime: number;
+    /** The oldest fetch time among the results being displayed */
+    resultsFetchTime: number;
+    rows: Record<string, unknown>[];
+    columns: string[];
+    error: string;
+};
+
+/** Whether a log file could hold entries in the range - a live file (no endTime) runs to now. */
+function fileOverlapsRange(file: LogFileInfo, startTime: number, endTime: number): boolean {
+    let fileEnd = file.endTime ?? Date.now();
+    return file.startTime <= endTime && fileEnd >= startTime;
+}
+
+export class StorageLogsPage extends qreact.Component {
+    state: SearchState = {
+        searching: false,
+        doneFiles: 0,
+        totalFiles: 0,
+        currentFile: "",
+        durationTime: 0,
+        resultsFetchTime: 0,
+        rows: [],
+        columns: [],
+        error: "",
+    };
+
+    private getListings(): ServerLogListing[] {
+        let machineController = MachineServiceController(SocketFunction.browserNodeId());
+        let serviceList = machineController.getServiceList();
+        let configs = (serviceList || []).map(serviceId => machineController.getServiceConfig(serviceId)).filter(isDefined);
+        return getStorageServers(configs).map(server => {
+            // Every other server still has something worth showing, so one that cannot be read becomes its own error line instead of an empty page
+            try {
+                let listing = StorageLogsSynced(SocketFunction.browserNodeId()).getServerLogFiles(server.url);
+                if (!listing) return { url: server.url, loading: true };
+                return { url: server.url, files: listing.files, fetchTime: listing.fetchTime };
+            } catch (e: any) {
+                return { url: server.url, error: e.stack ?? String(e) };
+            }
+        });
+    }
+
+    private getSelectedFiles(listings: ServerLogListing[]): { url: string; name: string; size: number }[] {
+        let { startTime, endTime } = getTimeRange();
+        let selected: { url: string; name: string; size: number }[] = [];
+        for (let listing of listings) {
+            for (let file of listing.files || []) {
+                if (!fileOverlapsRange(file, startTime, endTime)) continue;
+                selected.push({ url: listing.url, name: file.name, size: file.size });
+            }
+        }
+        return selected;
+    }
+
+    private search() {
+        if (this.state.searching) return;
+        // State and synced reads are captured HERE, in the tracked part, before the async work
+        let listings = this.getListings();
+        let files = this.getSelectedFiles(listings).map(file => ({ url: file.url, name: file.name }));
+        let query = storageLogSearchParam.value;
+        let { startTime, endTime } = getTimeRange();
+        this.state.searching = true;
+        this.state.error = "";
+        this.state.doneFiles = 0;
+        this.state.totalFiles = files.length;
+        this.state.currentFile = "";
+        Querysub.onCommitFinished(async () => {
+            try {
+                let result = await searchStorageLogs({
+                    files,
+                    query,
+                    onProgress: progress => {
+                        Querysub.commit(() => {
+                            this.state.doneFiles = progress.doneFiles;
+                            this.state.totalFiles = progress.totalFiles;
+                            this.state.currentFile = progress.currentFile;
+                        });
+                    },
+                });
+                let rows: Record<string, unknown>[] = [];
+                let columns: string[] = [...LEADING_COLUMNS];
+                for (let file of result.files) {
+                    for (let entry of file.entries) {
+                        let fields = entry && typeof entry === "object" && entry as Record<string, unknown> || { value: String(entry) };
+                        // The file selection is only as granular as whole files, so the entries themselves still need the range applied
+                        let time = fields.time;
+                        if (typeof time === "number" && (time < startTime || time > endTime)) continue;
+                        for (let key of Object.keys(fields)) {
+                            if (!columns.includes(key)) {
+                                columns.push(key);
+                            }
+                        }
+                        rows.push({ server: file.url, file: file.name, ...fields });
+                    }
+                }
+                rows.sort((a, b) => (typeof a.time === "number" && a.time || 0) - (typeof b.time === "number" && b.time || 0));
+                Querysub.commit(() => {
+                    this.state.rows = rows;
+                    this.state.columns = columns;
+                    this.state.durationTime = result.durationTime;
+                    this.state.resultsFetchTime = result.oldestFetchTime;
+                });
+            } catch (e: any) {
+                Querysub.commit(() => {
+                    this.state.error = e.stack ?? String(e);
+                });
+            } finally {
+                Querysub.commit(() => {
+                    this.state.searching = false;
+                });
+            }
+        });
+    }
+
+    render() {
+        let listings = this.getListings();
+        let selectedFiles = this.getSelectedFiles(listings);
+        let selectedBytes = selectedFiles.reduce((sum, file) => sum + file.size, 0);
+        let loadedListings = listings.filter(listing => listing.fetchTime);
+        let oldestListingTime = loadedListings.length && Math.min(...loadedListings.map(listing => listing.fetchTime || 0)) || 0;
+        let now = Querysub.nowDelayed(timeInSecond);
+
+        let columnsConfig: { [column: string]: { title?: string; formatter?: (value: unknown) => preact.ComponentChild } } = {};
+        for (let column of this.state.columns) {
+            if (column === "time") {
+                columnsConfig[column] = {
+                    title: "Time",
+                    formatter: value => typeof value === "number" && <span className={css.whiteSpace("nowrap")}>{formatDateTime(value)}</span> || value as preact.ComponentChild,
+                };
+            } else {
+                columnsConfig[column] = {};
+            }
+        }
+
+        return <div className={css.vbox(16)}>
+            <div className={css.hbox(12).alignItems("center")}>
+                <h2 className={css.flexGrow(1)}>Storage logs</h2>
+                <button
+                    className={css.pad2(12, 8).button.bord2(0, 0, 20).hsl(0, 0, 100)}
+                    title="Drops both the cached log file listings and the cached search results"
+                    onClick={() => {
+                        StorageLogsSynced(SocketFunction.browserNodeId()).getServerLogFiles.resetAll();
+                        invalidateStorageLogSearchCache();
+                        this.state.rows = [];
+                        this.state.columns = [];
+                        this.state.resultsFetchTime = 0;
+                        this.state.durationTime = 0;
+                    }}
+                >
+                    Invalidate
+                </button>
+            </div>
+            <TimeRangeSelector />
+            <div className={css.hbox(10).fillWidth}>
+                <InputLabelURL
+                    flavor="large"
+                    fillWidth
+                    label="Search (a | b & c - or of ands, empty downloads everything in range)"
+                    url={storageLogSearchParam}
+                    onKeyDown={e => {
+                        if (e.key === "Enter") {
+                            storageLogSearchParam.value = e.currentTarget.value;
+                            this.search();
+                        }
+                    }}
+                />
+                <Button
+                    flavor="large"
+                    hue={210}
+                    onClick={() => this.search()}
+                    className={this.state.searching && css.opacity(0.5) || undefined}
+                >
+                    {this.state.searching && `Searching ${this.state.doneFiles}/${this.state.totalFiles}...` || "Search"}
+                </Button>
+            </div>
+            <div className={css.vbox(4)}>
+                {listings.map(listing => {
+                    let files = listing.files || [];
+                    let totalBytes = files.reduce((sum, file) => sum + file.size, 0);
+                    return <div key={listing.url} className={css.hbox(8).wrap.alignItems("center")}>
+                        <b>{listing.url}</b>
+                        {listing.loading && <span>Loading log files...</span>}
+                        {listing.error && <span className={css.colorhsl(ERROR_COLOR.h, ERROR_COLOR.s, ERROR_COLOR.l).ellipsis} title={listing.error}>{listing.error}</span>}
+                        {listing.files && <span>{formatNumber(files.length)} log files, {formatNumber(totalBytes)}B</span>}
+                    </div>;
+                })}
+                <div>
+                    Selected range covers <b>{formatNumber(selectedFiles.length)}</b> files, <b>{formatNumber(selectedBytes)}B</b> (compressed) to search
+                </div>
+                <div className={css.hbox(12).wrap.fontSize(AGE_FONT_SIZE).colorhsl(AGE_COLOR.h, AGE_COLOR.s, AGE_COLOR.l)}>
+                    {!!oldestListingTime && <span>File listing from {formatTime(now - oldestListingTime)} ago</span>}
+                    {!!this.state.resultsFetchTime && <span>Results from {formatTime(now - this.state.resultsFetchTime)} ago</span>}
+                    {!!this.state.durationTime && <span>Search took {formatTime(this.state.durationTime)}</span>}
+                    {this.state.searching && !!this.state.currentFile && <span>Searching {this.state.currentFile}</span>}
+                </div>
+            </div>
+            {this.state.error && <div className={css.colorhsl(ERROR_COLOR.h, ERROR_COLOR.s, ERROR_COLOR.l).whiteSpace("pre-wrap")}>{this.state.error}</div>}
+            {!!this.state.rows.length && <div>
+                <Table
+                    rows={this.state.rows}
+                    columns={columnsConfig}
+                />
+            </div>}
+            {!this.state.rows.length && !this.state.searching && !!this.state.durationTime && <div>No matching log entries.</div>}
+        </div>;
+    }
+}

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

@@ -12,7 +12,7 @@ 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 { OperationsSection, refreshOperationsData } from "./operationsView";
 import { RouteConfigView } from "./RouteConfigView";
 import { Tag } from "./Tag";
 
@@ -23,6 +23,10 @@ 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>;
 
+// Urls and bucket names still wrap, but below this the table squishes them into a sliver while other columns sprawl.
+const NAME_COLUMN_MIN_WIDTH = 150;
+const minWidthCell = (value: string) => <div className={css.minWidth(NAME_COLUMN_MIN_WIDTH)}>{value}</div>;
+
 async function resetWriteStats(servers: StorageServerBuckets[]): Promise<void> {
     await Promise.all(servers.map(async server => {
         if (server.loading) return;
@@ -87,17 +91,21 @@ export class StoragePage extends qreact.Component {
         }
         return <div className={css.vbox(16)}>
             {header}
+            <OperationsSection
+                serverUrls={servers.map(server => server.url)}
+                onResetWriteStats={() => void resetWriteStats(servers)}
+            />
             <Table
                 rows={getBucketRows(servers)}
                 columns={{
-                    server: { title: "Server" },
-                    bucket: { title: "Bucket" },
+                    server: { title: "Server", formatter: minWidthCell },
+                    bucket: { title: "Bucket", formatter: minWidthCell },
                     serverUrl: null,
                     state: {
                         title: "State",
                         formatter: (state, context) => {
                             let row = context?.row;
-                            if (!row || !row.bucket || state !== INACTIVE_STATE) return state;
+                            if (!row || !row.bucket || state !== INACTIVE_STATE) return nowrapCell(state);
                             return <ActivateBucketButton serverUrl={row.serverUrl} bucketName={row.bucket} />;
                         }
                     },
@@ -112,25 +120,25 @@ export class StoragePage extends qreact.Component {
                     },
                     indexSources: {
                         title: "Index sources",
-                        formatter: sources => <IndexSourcesCell sources={sources} />
+                        formatter: (sources, context) => <IndexSourcesCell
+                            sources={sources}
+                            cellKey={`${context?.row?.serverUrl}|${context?.row?.bucket}`}
+                        />
                     },
                     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
+                            // A span, as the Table lifts a top-level div's classes onto the td, where the nowrap would fight the td's own pre-wrap class on stylesheet order
+                            return <span className={css.whiteSpace("nowrap")}><UsageBar
                                 label={DISK_BAR_TYPE}
                                 value={disk.usedBytes}
                                 max={disk.totalBytes}
                                 unit="B"
                                 {...getUsageThresholds(DISK_BAR_TYPE)}
-                            />;
+                            /></span>;
                         }
                     },
                     diskError: null,
@@ -141,10 +149,6 @@ export class StoragePage extends qreact.Component {
                     error: { title: "Error" },
                 }}
             />
-            <OperationsSection
-                serverUrls={servers.map(server => server.url)}
-                onResetWriteStats={() => void resetWriteStats(servers)}
-            />
             <RouteConfigView servers={servers} />
         </div>;
     }

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

@@ -5,6 +5,7 @@ import { formatNumber, formatTime } from "socket-function/src/formatting/format"
 import { sort, timeInSecond } from "socket-function/src/misc";
 import { Querysub } from "../../../4-querysub/Querysub";
 import type { ArchivesConfig, SyncActivity } from "sliftutils/storage/IArchives";
+import { t } from "../../../2-proxy/schema2";
 import { StorageSynced } from "./storageController";
 import { INACTIVE_STATE } from "./bucketRows";
 import { parseSourceDebugName, SourceNameParts, SOURCE_PART_FONT_SIZE } from "./sourceNames";
@@ -76,32 +77,71 @@ const SOURCE_ROW_PADDING = { horizontal: 4, vertical: 3 };
 const DISK_SOURCE_TYPE = "disk";
 const REMOTE_SOURCE_TOOLTIP = "Values stored on another server. If this other server goes down, we'll lose access to the data.";
 
-export class IndexSourcesCell extends qreact.Component<{ sources: ArchivesConfig["indexSources"] }> {
+const INDEX_SOURCES_COLLAPSED_MAX_WIDTH = 200;
+const INDEX_SOURCE_HOVER_BACKGROUND = "hsla(210, 70%, 90%, 0.5)";
+
+// Per-source expand state, keyed by cell + source so the same debugName in another row stays independent. Plain memory plus a synced version counter, as adding keys to a synced map doesn't report as a change (same pattern as the operations view state).
+const expandedSourceKeys = new Set<string>();
+const indexSourcesStateVersion = Querysub.createLocalSchema("storageIndexSourcesStateVersion", {
+    version: t.number,
+});
+/** Reading this in a render subscribes it to every expand/collapse toggle. */
+function isSourceExpanded(key: string): boolean {
+    indexSourcesStateVersion().version;
+    return expandedSourceKeys.has(key);
+}
+function toggleSourceExpanded(key: string): void {
+    if (expandedSourceKeys.has(key)) {
+        expandedSourceKeys.delete(key);
+    } else {
+        expandedSourceKeys.add(key);
+    }
+    Querysub.localCommit(() => indexSourcesStateVersion().version++);
+}
+
+export class IndexSourcesCell extends qreact.Component<{
+    sources: ArchivesConfig["indexSources"];
+    /** Identifies this cell's row, so each source's expand state is its own even when the same source appears in other rows. */
+    cellKey: string;
+}> {
     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}>
+        return <div className={css.hbox(4, 0).wrap.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;
+                let sourceKey = `${this.props.cellKey}|${source.debugName}`;
+                let expanded = isSourceExpanded(sourceKey);
                 return <div
                     key={source.debugName}
-                    className={css.relative.fillWidth.pad2(SOURCE_ROW_PADDING.horizontal, SOURCE_ROW_PADDING.vertical)}
-                    title={remote && REMOTE_SOURCE_TOOLTIP || undefined}
+                    className={
+                        css.relative.pad2(SOURCE_ROW_PADDING.horizontal, SOURCE_ROW_PADDING.vertical)
+                            .pointer.background(INDEX_SOURCE_HOVER_BACKGROUND, "hover")
+                        // Expanding forces the entry to a full row of the wrap, so the collapsed entries reflow around it
+                        + (expanded
+                            && css.fillWidth
+                            || css.maxWidth(INDEX_SOURCES_COLLAPSED_MAX_WIDTH).overflowHidden)
+                    }
+                    title={[
+                        remote && REMOTE_SOURCE_TOOLTIP || "",
+                        expanded && "Click to collapse" || "Click to expand",
+                    ].filter(x => x).join("\n")}
+                    onClick={() => toggleSourceExpanded(sourceKey)}
                 >
                     <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.relative.hbox(6) + (expanded && css.wrap)}>
                         <div className={css.whiteSpace("nowrap")}>
                             {formatNumber(source.byteCount)}B, {formatNumber(source.fileCount)} files
                         </div>
-                        <SourceNameParts debugName={source.debugName} />
+                        <SourceNameParts debugName={source.debugName} nowrap={!expanded} />
                     </div>
                 </div>;
             })}

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

@@ -26,8 +26,6 @@ export type BucketRow = {
     flags: SourceTag[];
     indexSources: ArchivesConfig["indexSources"];
     readerDiskLimit: string;
-    /** The server url on the first row of each server (operation stats are per-server), so the operations cell renders once per server; empty on the rest. */
-    operationsServerUrl: string;
     writeGain: string;
     disk?: BucketDiskInfo;
     diskError: string;
@@ -89,7 +87,6 @@ export function getBucketRows(servers: StorageServerBuckets[]): BucketRow[] {
             flags: [],
             indexSources: undefined,
             readerDiskLimit: "",
-            operationsServerUrl: "",
             writeGain: "",
             disk: undefined,
             diskError: "",
@@ -107,7 +104,7 @@ export function getBucketRows(servers: StorageServerBuckets[]): BucketRow[] {
         let buckets = [...server.buckets || []];
         sort(buckets, x => x.bucketName);
         if (!buckets.length) {
-            rows.push({ ...baseRow, bucket: "No buckets", operationsServerUrl: server.url });
+            rows.push({ ...baseRow, bucket: "No buckets" });
             continue;
         }
         for (let [index, bucket] of buckets.entries()) {
@@ -124,7 +121,6 @@ export function getBucketRows(servers: StorageServerBuckets[]): BucketRow[] {
                     flags: getBucketFlags(server.url, bucket.bucketName, config?.remoteConfig),
                     indexSources: config?.indexSources,
                     readerDiskLimit: config?.readerDiskLimit && formatNumber(config.readerDiskLimit) + "B" || "",
-                    operationsServerUrl: index === 0 && server.url || "",
                     writeGain: getWriteGain(bucket.writeStats),
                     disk: bucket.disk,
                     diskError: bucket.diskError || "",

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

@@ -18,7 +18,7 @@ type AccessMode = "count" | "size";
 
 // The operations breakdown only lives while the page is open, so it's plain memory. Adding keys to a synced map doesn't report as a change, so a separate counter is what the views actually re-render on.
 const opsDrilled = new Set<string>();
-let opsMode: AccessMode = "count";
+let opsMode: AccessMode = "size";
 const opsStateVersion = Querysub.createLocalSchema("storageOpsStateVersion", {
     version: t.number,
 });
@@ -93,29 +93,6 @@ function chipClass(color: { h: number; s: number; l: number }) {
         .hsl(color.h, color.s, color.l).bord2(color.h, color.s, color.l - 20);
 }
 
-/** The per-server operations, broken out by operation as wrapping chips. Display only - the drillable copy lives in the breakdown below the table. */
-export class OperationsCell extends qreact.Component<{ serverUrl: string }> {
-    render() {
-        let mode = getOpsMode();
-        let operations: OperationEntry[] | undefined;
-        try {
-            operations = readSortedOperations(this.props.serverUrl, mode);
-        } catch (e: any) {
-            return <div className={css.colorhsl(ACCESS_ERROR_COLOR.h, ACCESS_ERROR_COLOR.s, ACCESS_ERROR_COLOR.l).ellipsis} title={e.stack ?? String(e)}>
-                {e.stack ?? String(e)}
-            </div>;
-        }
-        if (!operations) return "...";
-        if (!operations.length) return "";
-        return <div className={css.hbox(6).wrap}>
-            {operations.map(([operation, op]) => <div key={operation} className={chipClass(OP_CHIP_COLOR)}>
-                <span className={css.boldStyle}>{operation}</span>
-                <span className={css.fontSize(OP_METRIC_FONT_SIZE).colorhsl(OP_METRIC_COLOR.h, OP_METRIC_COLOR.s, OP_METRIC_COLOR.l)}>{formatNumber(op.count)}</span>
-            </div>)}
-        </div>;
-    }
-}
-
 /** One operation's top-N path breakdown, ordered by the current mode. */
 class OperationSummaryTable extends qreact.Component<{ serverUrl: string; operation: string; weightBySize: boolean; asBytes: boolean }> {
     render() {
@@ -186,7 +163,7 @@ class OperationsMachineBreakdown extends qreact.Component<{ serverUrl: string }>
     }
 }
 
-/** The always-on operations breakdown below the table: a titled, boxed section with its own refresh/reset controls and the count/size order toggle, then one wrapping breakdown per machine. */
+/** The always-on operations breakdown: a titled, boxed section with its own refresh/reset controls and the count/size order toggle, then one wrapping breakdown per machine. */
 export class OperationsSection extends qreact.Component<{ serverUrls: string[]; onResetWriteStats: () => void }> {
     render() {
         let mode = getOpsMode();
@@ -201,7 +178,7 @@ export class OperationsSection extends qreact.Component<{ serverUrls: string[];
                 </div>
                 <ButtonSelector<AccessMode>
                     title="Order by"
-                    options={[{ title: "Count", value: "count" }, { title: "Size", value: "size" }]}
+                    options={[{ title: "Size", value: "size" }, { title: "Count", value: "count" }]}
                     value={mode}
                     onChange={setOpsMode}
                 />

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

@@ -24,11 +24,15 @@ export function parseSourceDebugName(debugName: string): { type: string; parts:
     return { type: debugName, parts: [] };
 }
 
-export class SourceNameParts extends qreact.Component<{ debugName: string }> {
+export class SourceNameParts extends qreact.Component<{
+    debugName: string;
+    /** For containers that show a single cut-off line - wrapping there defeats the cut-off by growing vertically instead. */
+    nowrap?: boolean;
+}> {
     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}>
+        return <div className={css.hbox(3) + (!this.props.nowrap && css.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>

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

@@ -0,0 +1,90 @@
+import { SocketFunction } from "socket-function/SocketFunction";
+import { runInParallel } from "socket-function/src/batching";
+import { StorageLogsController } from "./storageLogsController";
+
+module.hotreload = true;
+
+// searchServerLogs only ANDs its search strings, so the `|` level of a query has to be decomposed on our side: one server-side search per or-clause, unioned. The union check uses the entry's own JSON (the same text the server searched), so it never collapses genuinely duplicate log lines the way a dedupe-by-content would.
+
+const PARALLEL_FILE_SEARCHES = 4;
+
+/** A query's or-clauses, each the list of terms that must all appear - the same `|` / `&` semantics matchFilter (misc.ts) applies locally, minus its lowercasing, as the server search is case-sensitive. */
+export function parseSearchClauses(query: string): string[][] {
+    return query.split("|")
+        .map(clause => clause.split("&").map(x => x.trim()).filter(x => x))
+        .filter(clause => clause.length > 0);
+}
+
+export type SearchedLogFile = {
+    url: string;
+    name: string;
+    entries: unknown[];
+    /** When these entries were actually fetched - older than the search when they came from the cache. */
+    fetchTime: number;
+};
+
+const searchCache = new Map<string, { entries: unknown[]; fetchTime: number }>();
+export function invalidateStorageLogSearchCache(): void {
+    searchCache.clear();
+}
+
+async function searchFile(url: string, name: string, query: string): Promise<{ entries: unknown[]; fetchTime: number }> {
+    let cacheKey = `${url}|${name}|${query}`;
+    let cached = searchCache.get(cacheKey);
+    if (cached) return cached;
+    let controller = StorageLogsController.nodes[SocketFunction.browserNodeId()];
+    let clauses = parseSearchClauses(query);
+    let entries: unknown[];
+    if (clauses.length <= 1) {
+        entries = await controller.searchLogFile(url, name, clauses[0] || []);
+    } else {
+        // Later clauses drop entries an earlier clause already returned, which unions the or-clauses without collapsing real duplicates
+        entries = [];
+        for (let [index, clause] of clauses.entries()) {
+            let clauseEntries = await controller.searchLogFile(url, name, clause);
+            for (let entry of clauseEntries) {
+                let line = JSON.stringify(entry);
+                if (clauses.slice(0, index).some(prev => prev.every(term => line.includes(term)))) continue;
+                entries.push(entry);
+            }
+        }
+    }
+    let result = { entries, fetchTime: Date.now() };
+    searchCache.set(cacheKey, result);
+    return result;
+}
+
+export type StorageLogSearchProgress = {
+    doneFiles: number;
+    totalFiles: number;
+    currentFile: string;
+};
+
+/** Searches the query across the given files (per-file, so progress is per-file and each file's result caches on its own). */
+export async function searchStorageLogs(config: {
+    files: { url: string; name: string }[];
+    query: string;
+    onProgress: (progress: StorageLogSearchProgress) => void;
+}): Promise<{
+    files: SearchedLogFile[];
+    durationTime: number;
+    /** The oldest fetch time among the results used, so the UI can say how stale the display is. */
+    oldestFetchTime: number;
+}> {
+    let startTime = Date.now();
+    let doneFiles = 0;
+    let results: SearchedLogFile[] = [];
+    let runFile = runInParallel({ parallelCount: PARALLEL_FILE_SEARCHES }, async (file: { url: string; name: string }) => {
+        config.onProgress({ doneFiles, totalFiles: config.files.length, currentFile: file.name });
+        let result = await searchFile(file.url, file.name, config.query);
+        results.push({ url: file.url, name: file.name, entries: result.entries, fetchTime: result.fetchTime });
+        doneFiles++;
+        config.onProgress({ doneFiles, totalFiles: config.files.length, currentFile: file.name });
+    });
+    await Promise.all(config.files.map(runFile));
+    return {
+        files: results,
+        durationTime: Date.now() - startTime,
+        oldestFetchTime: results.length && Math.min(...results.map(x => x.fetchTime)) || Date.now(),
+    };
+}

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

@@ -0,0 +1,54 @@
+import { SocketFunction } from "socket-function/SocketFunction";
+import { listServerLogFiles, getServerLogs, searchServerLogs } from "sliftutils/storage/remoteStorage/createArchives";
+import type { LogFileInfo } from "sliftutils/storage/StreamingLogs";
+import { getSyncedController } from "../../../library-components/SyncedController";
+import { assertIsManagementUser } from "../../../diagnostics/managementPages";
+import { STORAGE_ACCOUNT } from "../../../-a-archives/archives2";
+
+// The registered controller and its synced wrapper have to keep a stable identity, so this file is a full-refresh boundary rather than a hot-reload one (matching SyncedController itself).
+module.hotreload = false;
+
+export type ServerLogFiles = {
+    files: LogFileInfo[];
+    /** When this listing was fetched, so the UI can say how stale a cached listing is. */
+    fetchTime: number;
+};
+
+/** Every storage call is proxied through here: they authenticate with this machine's identity CA, which the browser has no access to. */
+class StorageLogsControllerBase {
+    /** One call per server, so each caches and refreshes on its own. */
+    public async getServerLogFiles(url: string): Promise<ServerLogFiles> {
+        return {
+            files: await listServerLogFiles({ url, account: STORAGE_ACCOUNT }),
+            fetchTime: Date.now(),
+        };
+    }
+    /** One file per call, so the client can report per-file progress. Empty searches downloads and decodes the whole file (searchServerLogs requires at least one search string). */
+    public async searchLogFile(url: string, name: string, searches: string[]): Promise<unknown[]> {
+        if (!searches.length) {
+            let results = await getServerLogs({ url, account: STORAGE_ACCOUNT, names: [name] });
+            return results[0]?.entries || [];
+        }
+        let results = await searchServerLogs({ url, account: STORAGE_ACCOUNT, names: [name], searches });
+        return results[0]?.entries || [];
+    }
+}
+
+export const StorageLogsController = SocketFunction.register(
+    "StorageLogsController-8b3f52c1-6a4e-4c0d-9d71-2f8e4a5b6c93",
+    new StorageLogsControllerBase(),
+    () => ({
+        getServerLogFiles: {},
+        searchLogFile: {},
+    }),
+    () => ({
+        hooks: [assertIsManagementUser],
+    }),
+    {
+    }
+);
+
+export const StorageLogsSynced = getSyncedController(StorageLogsController, {
+    reads: {},
+    writes: {},
+});

package/src/deployManager/urlParams.ts

@@ -1,6 +1,6 @@
 import { URLParam } from "../library-components/URLParam";
 
-export type ViewType = "services" | "machines" | "service-detail" | "machine-detail" | "deploy" | "storage" | "routing";
+export type ViewType = "services" | "machines" | "service-detail" | "machine-detail" | "deploy" | "storage" | "storage-logs" | "routing";
 
 export const currentViewParam = new URLParam<ViewType>("machineview", "machines");
 export const selectedServiceIdParam = new URLParam("serviceId", "");