querysub 0.634.0 → 0.635.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "querysub",
-  "version": "0.634.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",

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/storage/StorageLogsPage.tsx

@@ -91,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;
@@ -126,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;
@@ -188,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") {