querysub 0.630.0 → 0.632.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "querysub",
-  "version": "0.630.0",
+  "version": "0.632.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.98",
+    "sliftutils": "^1.7.102",
     "socket-function": "^1.2.30",
     "terser": "^5.31.0",
     "typenode": "^6.6.1",

package/src/-f-node-discovery/NodeDiscovery.ts

@@ -532,7 +532,8 @@ async function runServerSyncLoops() {
 
     console.log(magenta(`Node discovery is loaded`));
 
-    await runInfinitePollCallAtStart(HEARTBEAT_INTERVAL, async function nodeDiscoverHeartbeat() {
+    // Delayed by a bit as it might take a little bit for our heartbeat to show up on startup, especially if we are the storage node that is supposed to store our own heartbeat. 
+    delay(HEARTBEAT_INTERVAL * 5).then(() => runInfinitePoll(HEARTBEAT_INTERVAL, async function nodeDiscoverHeartbeat() {
         // If we waited too long, other nodes might think we are dead. In which case, we SHOULD terminate.
         if (!isNoNetwork()) {
             // FIRST, verify we didn't delay too long (to make sure we kill any nodes that were disconnected
@@ -557,7 +558,7 @@ async function runServerSyncLoops() {
         }
 
         await writeHeartbeat();
-    });
+    }));
 }
 
 let discoveryReady = new PromiseObj<void>();

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>