querysub 0.633.0 → 0.635.0

package/package.json

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

package/src/-c-identity/IdentityController.ts

@@ -6,7 +6,7 @@
 
 import debugbreak from "debugbreak";
 import { SocketFunction } from "socket-function/SocketFunction";
-import { CallerContext } from "socket-function/SocketFunctionTypes";
+import { CallerContext, ClientHookContext } from "socket-function/SocketFunctionTypes";
 import { cache, cacheWeak, lazy } from "socket-function/src/caching";
 import { getClientNodeId, getNodeId, getNodeIdDomain, getNodeIdIP, getNodeIdLocation, isClientNodeId } from "socket-function/src/nodeCache";
 import { decodeNodeId, getCommonName, getIdentityCA, getMachineId, getOwnMachineId, getPublicIdentifier, getThreadKeyCert, parseCert, sign, validateCertificate, verify } from "sliftutils/misc/https/certs";
@@ -252,7 +252,7 @@ const changeIdentityOnce = cacheWeak(async function changeIdentityOnce(connectio
     );
 });
 let startupTime = Date.now();
-SocketFunction.addGlobalClientHook(async function identityHook(context) {
+async function identityHook(context: ClientHookContext) {
     if (context.call.classGuid === IdentityController._classGuid) return;
     // This is for US to tell them our identity. And if they established the connection the identity will come from their original connection url (that they used to connect to us), and they validated it either being a real certificate, or they added the cert from the trusted backblaze bucket. If it just from a real certificate it means we identified them, but they might not have network trust. But that's fine, as IdentityController is JUST for identification, and if it's a real certificate we know who they are! (Which doesn't mean we trust them).
     if (isClientNodeId(context.call.nodeId)) {
@@ -265,4 +265,7 @@ SocketFunction.addGlobalClientHook(async function identityHook(context) {
     if (duration > 200 && now - startupTime > timeInMinute) {
         console.log(red(`IdentityHook took ${formatTime(duration)} for ${context.connectionId.nodeId} ${context.call.classGuid}.${context.call.functionName}`));
     }
-});
+}
+// Don't measure this, as oftentimes it blocks on other servers, and so it isn't interesting to measure it. 
+identityHook.noMeasure = true;
+SocketFunction.addGlobalClientHook(identityHook);

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

@@ -532,7 +532,8 @@ async function runServerSyncLoops() {
 
     console.log(magenta(`Node discovery is loaded`));
 
-    // 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. 
+    await runInfinitePollCallAtStart(HEARTBEAT_INTERVAL, writeHeartbeat);
+    // 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()) {
@@ -556,8 +557,6 @@ async function runServerSyncLoops() {
                 ignoreErrors(NodeDiscoveryController.nodes[nodeId].addNode(getOwnNodeId()));
             }
         }
-
-        await writeHeartbeat();
     }));
 }
 

package/src/5-diagnostics/Table.tsx

@@ -63,7 +63,8 @@ export class Table<RowT extends RowType> extends qreact.Component<TableType<RowT
         return (
             <table class={css.borderCollapse("collapse") + this.props.class}>
                 <tr class={
-                    css.position("sticky").top(0)
+                    // Above the rows, as they hold positioned content (bars, palettes) which otherwise paints over the sticky header as it scrolls under it
+                    css.position("sticky").top(0).zIndex(1)
                     + (this.props.dark && css.hsla(0, 0, 10, 0.9))
                     + (!this.props.dark && css.hsla(0, 0, 95, 0.9))
                 }>

package/src/deployManager/components/ProcessesView.tsx

@@ -17,6 +17,8 @@ const DEAD_COLOR = { h: 0, s: 0, l: 92 };
 const OUTPUT_BUFFER_LIMIT = 1_000_000;
 const OUTPUT_BUFFER_KEPT = 100_000;
 const OUTPUT_MAX_HEIGHT = "40vh";
+// Within this of the bottom still counts as "at the bottom", as scroll positions land a few pixels off the exact end
+const OUTPUT_PIN_THRESHOLD_PX = 40;
 const DETAIL_FONT_SIZE = 12;
 const ANSI_SATURATION = 70;
 const ANSI_LIGHTNESS = 70;
@@ -68,12 +70,27 @@ class ProcessOutput extends qreact.Component<{ record: ProcessRecord; machineNod
             await stopWatchingProcessOutput({ callbackId });
         });
     }
+    private outputDiv: HTMLDivElement | undefined;
+    // The pane opens showing the newest output and follows it as it streams; scrolling up to read releases the pin, scrolling back down re-engages it
+    private pinnedToBottom = true;
+    componentDidUpdate() {
+        if (this.pinnedToBottom && this.outputDiv) {
+            this.outputDiv.scrollTop = this.outputDiv.scrollHeight;
+        }
+    }
     render() {
-        return <div className={
-            css.fontFamily("monospace").whiteSpace("pre-wrap").fillWidth
-                .maxHeight(OUTPUT_MAX_HEIGHT).overflow("auto").pad2(10, 8)
-                .hsl(0, 0, 12).colorhsl(0, 0, 90)
-        }>
+        return <div
+            className={
+                css.fontFamily("monospace").whiteSpace("pre-wrap").fillWidth
+                    .maxHeight(OUTPUT_MAX_HEIGHT).overflow("auto").pad2(10, 8)
+                    .hsl(0, 0, 12).colorhsl(0, 0, 90)
+            }
+            ref={element => this.outputDiv = element as HTMLDivElement || undefined}
+            onScroll={element => {
+                let div = element.currentTarget;
+                this.pinnedToBottom = div.scrollHeight - div.scrollTop - div.clientHeight < OUTPUT_PIN_THRESHOLD_PX;
+            }}
+        >
             {parseAnsiColors(this.state.data).map(({ text, color }) => {
                 if (!color) return <span>{text}</span>;
                 // The pane is dark, so the ansi colour only sets the hue - the lightness has to stay readable against it

package/src/deployManager/components/ServiceMeasureBars.tsx

@@ -13,6 +13,8 @@ import { assertIsManagementUser } from "../../diagnostics/managementPages";
 const NODE_CALL_TIMEOUT = timeInSecond * 10;
 const BAR_HEIGHT_PX = 6;
 const MIN_BAR_WIDTH_PX = 30;
+// A percentage width would be against the bar's own content-sized wrapper, which has no width, so it resolves to zero and every bar sits at the minimum. The width is instead this many pixels at 100% CPU.
+const FULL_BAR_WIDTH_PX = 300;
 // Green at idle, red at fully busy.
 const BAR_IDLE_HUE = 120;
 const BAR_FLASH_THRESHOLD = 0.6;
@@ -73,7 +75,7 @@ export class ServiceMeasureBars extends qreact.Component<{
                     <div
                         className={
                             css.height(BAR_HEIGHT_PX)
-                                .width(`${fraction * 100}%`)
+                                .width(Math.round(clampedFraction * FULL_BAR_WIDTH_PX))
                                 .minWidth(MIN_BAR_WIDTH_PX)
                                 .button
                                 .hsl(hue, 70, isExpanded ? 40 : 55)

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

@@ -3,6 +3,7 @@ import { SocketFunction } from "socket-function/SocketFunction";
 import { qreact } from "../../../4-dom/qreact";
 import { css } from "typesafecss";
 import { Querysub } from "../../../4-querysub/Querysub";
+import { t } from "../../../2-proxy/schema2";
 import { isDefined } from "../../../misc";
 import { formatNumber, formatTime, formatDateTime } from "socket-function/src/formatting/format";
 import { timeInSecond } from "socket-function/src/misc";
@@ -35,20 +36,6 @@ type ServerLogListing = {
     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();
@@ -56,17 +43,19 @@ function fileOverlapsRange(file: LogFileInfo, startTime: number, endTime: number
 }
 
 export class StorageLogsPage extends qreact.Component {
-    state: SearchState = {
-        searching: false,
-        doneFiles: 0,
-        totalFiles: 0,
-        currentFile: "",
-        durationTime: 0,
-        resultsFetchTime: 0,
-        rows: [],
-        columns: [],
-        error: "",
-    };
+    state = t.state({
+        searching: t.boolean,
+        doneFiles: t.number,
+        totalFiles: t.number,
+        currentFile: t.string,
+        /** How long the last search took */
+        durationTime: t.number,
+        /** The oldest fetch time among the results being displayed */
+        resultsFetchTime: t.number,
+        rows: t.atomic<Record<string, unknown>[]>([]),
+        columns: t.atomic<string[]>([]),
+        error: t.string,
+    });
 
     private getListings(): ServerLogListing[] {
         let machineController = MachineServiceController(SocketFunction.browserNodeId());
@@ -102,7 +91,7 @@ export class StorageLogsPage extends qreact.Component {
         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();
+        let { startTime, endTime, searchFromStart } = getTimeRange();
         this.state.searching = true;
         this.state.error = "";
         this.state.doneFiles = 0;
@@ -125,7 +114,7 @@ export class StorageLogsPage extends qreact.Component {
                 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) };
+                        let fields: Record<string, unknown> = 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;
@@ -137,7 +126,9 @@ export class StorageLogsPage extends qreact.Component {
                         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));
+                // Ordered the way the time range UI says: from the end (newest first) by default, oldest first when searching from the start
+                let direction = searchFromStart ? 1 : -1;
+                rows.sort((a, b) => direction * ((typeof a.time === "number" && a.time || 0) - (typeof b.time === "number" && b.time || 0)));
                 Querysub.commit(() => {
                     this.state.rows = rows;
                     this.state.columns = columns;
@@ -199,7 +190,7 @@ export class StorageLogsPage extends qreact.Component {
                 <InputLabelURL
                     flavor="large"
                     fillWidth
-                    label="Search (a | b & c - or of ands, empty downloads everything in range)"
+                    label="Search"
                     url={storageLogSearchParam}
                     onKeyDown={e => {
                         if (e.key === "Enter") {

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

@@ -1,7 +1,7 @@
 import { formatNumber } from "socket-function/src/formatting/format";
 import { sort } from "socket-function/src/misc";
 import type { ArchivesConfig, RemoteConfig, HostedConfig } from "sliftutils/storage/IArchives";
-import type { BucketWriteStats } from "sliftutils/storage/remoteStorage/storageServerState";
+import type { BucketWriteStats } from "sliftutils/storage/remoteStorage/accessStats";
 import type { BucketDiskInfo } from "sliftutils/storage/remoteStorage/bucketDisk";
 import { parseHostedUrl } from "sliftutils/storage/remoteStorage/remoteConfig";
 import { SourceTag, getSourceTags } from "./Tag";