querysub 0.327.0 → 0.329.0

package/src/diagnostics/logs/FastArchiveViewer.tsx

@@ -5,7 +5,7 @@ import { DatumStats, FastArchiveAppendable } from "./FastArchiveAppendable";
 import { Querysub } from "../../4-querysub/Querysub";
 import { URLParam } from "../../library-components/URLParam";
 import { TimeRangeSelector, getTimeRange } from "./TimeRangeSelector";
-import { formatNumber, formatTime, formatVeryNiceDateTime } from "socket-function/src/formatting/format";
+import { formatNumber, formatTime, formatVeryNiceDateTime, formatDateTime } from "socket-function/src/formatting/format";
 import { list, sort, throttleFunction, timeInHour } from "socket-function/src/misc";
 import { css } from "typesafecss";
 import { logErrors } from "../../errors";
@@ -18,15 +18,16 @@ import { LOG_LIMIT_FLAG } from "./diskLogger";
 import { MaybePromise, canHaveChildren } from "socket-function/src/types";
 import { niceParse } from "../../niceStringify";
 import { FileMetadata } from "./FastArchiveController";
+import { throttleRender } from "../../functional/throttleRender";
 
 const RENDER_INTERVAL = 1000;
 
 const HISTOGRAM_RERENDER_INTERVAL = 10000;
 
 export const filterParam = new URLParam("filter", "");
-const cacheBustParam = new URLParam("cacheBust", 0);
+export const cacheBustParam = new URLParam("cacheBust", 0);
 const caseInsensitiveParam = new URLParam("caseInsensitive", false);
-
+const hideAllDataParam = new URLParam("hideAllData", false);
 
 export class FastArchiveViewer<T> extends qreact.Component<{
     fastArchives: FastArchiveAppendable<T>[];
@@ -49,6 +50,14 @@ export class FastArchiveViewer<T> extends qreact.Component<{
         error: t.atomic<string | undefined>(undefined),
         pendingSyncInitializations: t.atomic<number>(0),
 
+        // Current sync parameters - set before synchronizeData is called
+        currentSyncParams: t.atomic<{
+            filterString: string;
+            startTime: number;
+            endTime: number;
+            fastArchivePaths: string[];
+        } | undefined>(undefined),
+
         renderSeqNum: t.atomic<number>(0),
     });
 
@@ -138,6 +147,15 @@ export class FastArchiveViewer<T> extends qreact.Component<{
 
         let scannedValueCount = 0;
 
+        // Store current sync parameters BEFORE calling synchronizeData
+        ifLatest(() => {
+            this.state.currentSyncParams = {
+                filterString,
+                startTime: timeRange.startTime,
+                endTime: timeRange.endTime,
+                fastArchivePaths: fastArchives.map(archive => archive.rootPath),
+            };
+        });
 
         ifLatest(() => {
             this.state.error = undefined;
@@ -413,6 +431,39 @@ export class FastArchiveViewer<T> extends qreact.Component<{
         }
         sort(progressEntries, x => x[1].initialTime);
 
+        // Group progress bars by the text after the pipe sign
+        const groupedProgress = new Map<string, {
+            displayName: string;
+            entries: Array<[string, { section: string, value: number, max: number, initialTime: number, lastSetTime: number }]>;
+            totalValue: number;
+            totalMax: number;
+            earliestTime: number;
+            latestTime: number;
+        }>();
+
+        for (const [key, progress] of progressEntries) {
+            const pipeIndex = progress.section.indexOf("|");
+            const displayName = pipeIndex >= 0 ? progress.section.substring(pipeIndex + 1) : progress.section;
+
+            if (!groupedProgress.has(displayName)) {
+                groupedProgress.set(displayName, {
+                    displayName,
+                    entries: [],
+                    totalValue: 0,
+                    totalMax: 0,
+                    earliestTime: progress.initialTime,
+                    latestTime: progress.lastSetTime,
+                });
+            }
+
+            const group = groupedProgress.get(displayName)!;
+            group.entries.push([key, progress]);
+            group.totalValue += progress.value;
+            group.totalMax += progress.max;
+            group.earliestTime = Math.min(group.earliestTime, progress.initialTime);
+            group.latestTime = Math.max(group.latestTime, progress.lastSetTime);
+        }
+
         return (
             <div className={css.hbox(10).wrap.alignItems("start").fillWidth}>
                 {!this.state.finished && (
@@ -425,33 +476,41 @@ export class FastArchiveViewer<T> extends qreact.Component<{
                         Cancel
                     </div>
                 )}
-                {progressEntries.map(([key, progress]) => {
-                    const fraction = clamp(progress.max > 0 ? (progress.value / progress.max) * 1 : 1, 0, 1);
+                {Array.from(groupedProgress.values()).map((group) => {
+                    const fraction = clamp(group.totalMax > 0 ? (group.totalValue / group.totalMax) * 1 : 1, 0, 1);
                     let progressTime = 0;
-                    if (progress.value >= progress.max) {
-                        progressTime = progress.lastSetTime;
+                    if (group.totalValue >= group.totalMax) {
+                        progressTime = group.latestTime;
                     } else {
                         progressTime = getNowTime();
                     }
-                    const elapsedTime = progressTime - progress.initialTime;
+                    const elapsedTime = progressTime - group.earliestTime;
+
+                    // Create tooltip showing breakdown by original prefix
+                    const tooltipContent = group.entries.map(([key, progress]) => {
+                        const pipeIndex = progress.section.indexOf("|");
+                        const prefix = pipeIndex >= 0 ? progress.section.substring(0, pipeIndex) : key;
+                        return `${prefix}: ${formatNumber(progress.value)}/${formatNumber(progress.max)}`;
+                    }).join("\n");
 
                     return (
-                        <div key={key} className={
+                        <div key={group.displayName} className={
                             // NOTE: There is no point making this proportionally to the time, because we stream the data, so the time overlaps, making everything take most of the time.
                             css.vbox(4)
-                        }>
+                        }
+                            title={tooltipContent}
+                        >
                             <div className={css.vbox(2)}>
                                 <div className={css.fontSize(14).colorhsl(0, 0, 20)}>
-                                    {progress.section}
+                                    {group.displayName}
                                 </div>
                                 <div className={css.fontSize(12).colorhsl(0, 0, 40).width(150)}>
-                                    {formatNumber(progress.value)} {progress.value < progress.max && `/ ${formatNumber(progress.max)}`} ({formatTime(elapsedTime)})
+                                    {formatNumber(group.totalValue)} {group.totalValue < group.totalMax && `/ ${formatNumber(group.totalMax)}`} ({formatTime(elapsedTime)})
                                 </div>
                             </div>
                             <div className={css.fillWidth.height(8).bord2(200, 20, 80).hsl(200, 10, 95)}>
                                 <div
-                                    className={css.height(8).hsl(200, 50, 70).transition("width 200ms")}
-                                    style={{ width: `${fraction * 100}%` }}
+                                    className={css.height(8).hsl(200, 50, 70).width(`${fraction * 100}%`).transition("width 200ms")}
                                 />
                             </div>
                         </div>
@@ -471,6 +530,8 @@ export class FastArchiveViewer<T> extends qreact.Component<{
         let countsArray = Array.from(this.histogramAllDataCounts);
         let selectedArray = Array.from(this.histogramSelectedDataCounts);
         const maxAllCount = countsArray.reduce((a, b) => Math.max(a, b), 0);
+        const maxSelectedCount = selectedArray.reduce((a, b) => Math.max(a, b), 0);
+        const maxCountForScale = hideAllDataParam.value ? maxSelectedCount : maxAllCount;
         const selected = css.hsla(120, 40, 50, 1);
         const all = css.hsla(200, 40, 70, 1);
 
@@ -489,17 +550,19 @@ export class FastArchiveViewer<T> extends qreact.Component<{
                                 className={css.relative.fillHeight.fillWidth.filter("brightness(1.1)", "hover")}
                                 title={`${formatNumber(selectedCount)} filtered (${formatNumber(selectedSize)}B)\n${formatNumber(count)} all (${formatNumber(allSize)}B)\n${formatVeryNiceDateTime(this.histogramStartTime + index * this.histogramBucketTime)}`}
                             >
-                                {count > 0 && <div
+                                {count > 0 && !hideAllDataParam.value && <div
                                     className={
                                         all.absolute.bottom(0).left(0).right(1)
-                                            .height(`calc(max(3px, ${(count / maxAllCount) * 100}%))`)
+                                            .transition("height 200ms")
+                                            .height(`calc(max(3px, ${(count / maxCountForScale) * 100}%))`)
                                     }
                                 />}
 
                                 {selectedCount > 0 && <div
                                     className={
                                         selected.absolute.bottom(0).left(0).right(1)
-                                            .height(`calc(max(3px, ${(selectedCount / maxAllCount) * 100}%))`)
+                                            .transition("height 200ms")
+                                            .height(`calc(max(3px, ${(selectedCount / maxCountForScale) * 100}%))`)
                                     }
                                 />}
                             </div>
@@ -507,19 +570,71 @@ export class FastArchiveViewer<T> extends qreact.Component<{
                     })}
                 </div>
                 <div className={css.hbox(20).fontSize(12)}>
-                    <div className={css.hbox(5)}>
-                        <div className={all.size(16, 16)} />
-                        <span>All data ({formatNumber(countsArray.reduce((a, b) => a + b, 0))} | {formatNumber(this.allSize)}B)</span>
-                    </div>
+                    {!hideAllDataParam.value && (
+                        <div className={css.hbox(5)}>
+                            <div className={all.size(16, 16)} />
+                            <span>All data (max {formatNumber(maxAllCount)} | {formatNumber(countsArray.reduce((a, b) => a + b, 0))} | {formatNumber(this.allSize)}B)</span>
+                        </div>
+                    )}
                     <div className={css.hbox(5)}>
                         <div className={selected.size(16, 16)} />
-                        <span>Filtered data ({formatNumber(selectedArray.reduce((a, b) => a + b, 0))} | {formatNumber(this.matchedSize)}B)</span>
+                        <span>Filtered data (max {formatNumber(maxSelectedCount)} | {formatNumber(selectedArray.reduce((a, b) => a + b, 0))} | {formatNumber(this.matchedSize)}B)</span>
                     </div>
+                    <InputLabelURL
+                        label="Only show filtered data"
+                        checkbox
+                        url={hideAllDataParam}
+                        flavor="small"
+                    />
                 </div>
             </div>
         );
     }
 
+    private getOutdatedInfo(): string[] {
+        const currentTimeRange = getTimeRange();
+        const currentFilterString = filterParam.value;
+        const currentArchivePaths = this.props.fastArchives.map(archive => archive.rootPath);
+
+        // Get stored sync parameters
+        const storedParams = this.state.currentSyncParams;
+
+        // If we have no stored params yet, not outdated (first run or loading)
+        if (!storedParams) {
+            return [];
+        }
+
+        let warnings: string[] = [];
+
+        // Check for parameter differences
+        if (storedParams.filterString !== currentFilterString) {
+            warnings.push("filter");
+        }
+        if (storedParams.startTime !== currentTimeRange.startTime) {
+            warnings.push("start time");
+        }
+        if (storedParams.endTime !== currentTimeRange.endTime) {
+            warnings.push("end time");
+        }
+
+        // Check for missing and extra archives
+        const currentArchivePathsSet = new Set(currentArchivePaths);
+        const storedArchivePathsSet = new Set(storedParams.fastArchivePaths);
+
+        for (let storedPath of storedParams.fastArchivePaths) {
+            if (!currentArchivePathsSet.has(storedPath)) {
+                warnings.push(`Missing ${storedPath}`);
+            }
+        }
+        for (let currentPath of currentArchivePaths) {
+            if (!storedArchivePathsSet.has(currentPath)) {
+                warnings.push(`Extra ${currentPath}`);
+            }
+        }
+
+        return warnings;
+    }
+
     public handleDownload = throttleFunction(500, () => {
         console.log("handleDownload");
         Querysub.onCommitFinished(() => {
@@ -527,6 +642,8 @@ export class FastArchiveViewer<T> extends qreact.Component<{
         });
     });
     render() {
+        if (throttleRender({ key: "FastArchiveViewer", frameDelay: 30 })) return undefined;
+
         let totalFileCount = 0;
         let totalBackblazeByteCount = 0;
         let totalLocalByteCount = 0;
@@ -550,6 +667,8 @@ export class FastArchiveViewer<T> extends qreact.Component<{
 
         const infoDisplay = (hue: number) => css.pad2(12).bord2(hue, 50, 50).hsl(hue, 50, 95).colorhsl(hue, 50, 40);
 
+
+
         return (
             <div className={css.vbox(20).pad2(20).fillBoth}>
                 <div className={css.hbox(20).fillWidth}>
@@ -594,32 +713,71 @@ export class FastArchiveViewer<T> extends qreact.Component<{
                         flavor="small"
                     />
                     <div className={css.vbox(10)}>
-                        {this.state.runCount > 0 && (
-                            <div
-                                className={infoDisplay(120)}
-                                title={this.state.fileMetadata.map(x => x?.files || []).flat().map(x =>
-                                    `${x.path} (${formatNumber(x.size)})`
-                                ).join("\n")}
-                            >
-                                File count: {formatNumber(totalFileCount)}, Backblaze size: {formatNumber(totalBackblazeByteCount)}B (compressed), Disk size: {formatNumber(totalLocalByteCount)}B (uncompressed)
-                            </div>
-                        )}
+                        {this.state.runCount > 0 && (() => {
+                            const outdatedWarnings = this.getOutdatedInfo();
+                            return (
+                                <div className={css.hbox(10).wrap}>
+                                    <div
+                                        className={infoDisplay(120)}
+                                        title={this.state.fileMetadata.map(x => x?.files || []).flat().map(x =>
+                                            `${x.path} (${formatNumber(x.size)})`
+                                        ).join("\n")}
+                                    >
+                                        File count: {formatNumber(totalFileCount)}, Backblaze size: {formatNumber(totalBackblazeByteCount)}B (compressed), Disk size: {formatNumber(totalLocalByteCount)}B (uncompressed)
+                                    </div>
+                                    {outdatedWarnings.length > 0 && (
+                                        <div
+                                            className={infoDisplay(30).button}
+                                            onClick={() => {
+                                                void this.handleDownload();
+                                            }}
+                                            title={outdatedWarnings.join(", ")}
+                                        >
+                                            <div className={css.vbox(4)}>
+                                                <div className={css.boldStyle}>Search parameters outdated - Click to run updated search. Outdated:</div>
+                                                <div className={css.fontSize(12)}>
+                                                    {outdatedWarnings.join(" | ")}
+                                                </div>
+                                            </div>
+                                        </div>
+                                    )}
+                                </div>
+                            );
+                        })()}
                         {this.state.runCount === 0 && (
-                            <div className={infoDisplay(200)}>
-                                No data downloaded yet. Click Run to download data.
+                            <div className={infoDisplay(200).button} onClick={() => {
+                                void this.handleDownload();
+                            }}>
+                                No data downloaded yet. Click here to download data.
                             </div>
                         )}
-                        {this.state.finished && <div
-                            className={infoDisplay(60).button}
-                            onClick={() => {
-                                Querysub.commit(() => {
-                                    cacheBustParam.value = Date.now();
-                                });
-                                void this.handleDownload();
-                            }}
-                        >
-                            Snapshot from dates: {readLocalTimes.map(x => formatVeryNiceDateTime(x)).join(" | ")}. Clear here to reload data.
-                        </div>}
+                        {this.state.finished && (() => {
+                            if (readLocalTimes.length === 0) return null;
+
+                            const timeRange = getTimeRange();
+                            const earliestTime = Math.min(...readLocalTimes);
+
+                            if (earliestTime >= timeRange.endTime) return null;
+
+                            return (
+                                <div
+                                    className={infoDisplay(0).button}
+                                    onClick={() => {
+                                        Querysub.commit(() => {
+                                            cacheBustParam.value = Date.now();
+                                        });
+                                        void this.handleDownload();
+                                    }}
+                                >
+                                    <div className={css.hbox(8).alignItems("center").wrap}>
+                                        <span>Future data has been read</span>
+                                        <span className={css.fontSize(18).boldStyle}>{formatTime(timeRange.endTime - earliestTime)} into the future</span>
+                                        <span>({formatDateTime(earliestTime)})</span>
+                                        <span>Clear here to load possibly missing data data.</span>
+                                    </div>
+                                </div>
+                            );
+                        })()}
                         {!this.state.finished && <LoaderAurora />}
                         {this.limitedScanCount > 0 && (
                             <div className={infoDisplay(60).boldStyle.button}
@@ -628,7 +786,7 @@ export class FastArchiveViewer<T> extends qreact.Component<{
                                     void this.handleDownload();
                                 }}
                             >
-                                Click here to see {formatNumber(this.limitedScanCount)} scanned logs were rate limited at a file level. We do not track how many were ignored, there might be infinite missing logs.
+                                Click here to see {formatNumber(this.limitedScanCount)} scanned logs were rate limited at a file level. This means lines might be missing. If this happens a lot, use pass {`{ [LOG_LINE_LIMIT_ID]: "INSERT RANDOM GUID HERE" }`} in the error/warn message to limit only the spamming line.
                             </div>
                         )}
                         {this.limitedMatchCount > 0 && filterParam.value && (
@@ -638,7 +796,7 @@ export class FastArchiveViewer<T> extends qreact.Component<{
                                     void this.handleDownload();
                                 }}
                             >
-                                Click here to see {formatNumber(this.limitedMatchCount)} matched logs were rate limited at a file level. We do not track how many were ignored, there might be infinite missing logs.
+                                Click here to see {formatNumber(this.limitedMatchCount)} matched logs were rate limited at a file level. This means lines might be missing. If this happens a lot, use pass {`{ [LOG_LINE_LIMIT_ID]: "INSERT RANDOM GUID HERE" }`} in the error/warn message to limit only the spamming line.
                             </div>
                         )}
                         {this.state.pendingSyncInitializations > 0 && (
@@ -665,7 +823,6 @@ export class FastArchiveViewer<T> extends qreact.Component<{
     }
 }
 
-
 class LoaderAurora extends qreact.Component {
     render() {
         return (

package/src/diagnostics/logs/LogViewer2.tsx

@@ -4,7 +4,7 @@ import { css } from "../../4-dom/css";
 import { URLParam } from "../../library-components/URLParam";
 import { InputLabelURL } from "../../library-components/InputLabel";
 import { Button } from "../../library-components/Button";
-import { formatDateTime, formatNiceDateTime, formatNumber, formatTime } from "socket-function/src/formatting/format";
+import { formatDateTime, formatDateTimeDetailed, formatNiceDateTime, formatNumber, formatTime } from "socket-function/src/formatting/format";
 import { TimeRangeSelector, endTimeParam, getTimeRange, startTimeParam } from "./TimeRangeSelector";
 import { FastArchiveAppendable } from "./FastArchiveAppendable";
 import { t } from "../../2-proxy/schema2";
@@ -13,8 +13,8 @@ import { logErrors } from "../../errors";
 import { batchFunction, runInSerial } from "socket-function/src/batching";
 import { Querysub } from "../../4-querysub/QuerysubController";
 import { sort, timeInDay, timeInHour } from "socket-function/src/misc";
-import { FastArchiveViewer, filterParam } from "./FastArchiveViewer";
-import { LogDatum, getLoggers, LOG_LIMIT_FLAG } from "./diskLogger";
+import { FastArchiveViewer, cacheBustParam, filterParam } from "./FastArchiveViewer";
+import { LogDatum, getLoggers, LOG_LIMIT_FLAG, LOG_LINE_LIMIT_FLAG } from "./diskLogger";
 import { ColumnType, Table, TableType } from "../../5-diagnostics/Table";
 import { formatDateJSX } from "../../misc/formatJSX";
 import { InputPicker } from "../../library-components/InputPicker";
@@ -24,8 +24,10 @@ import { ObjectDisplay } from "./ObjectDisplay";
 import { endTime } from "../misc-pages/archiveViewerShared";
 import { ErrorSuppressionUI } from "./errorNotifications/ErrorSuppressionUI";
 import { FileMetadata } from "./FastArchiveController";
-import { SuppressionListController, getSuppressEntryChecker, getSuppressionFull } from "./errorNotifications/ErrorNotificationController";
+import { RecentErrorsController, SuppressionListController, getSuppressEntryChecker, getSuppressionFull } from "./errorNotifications/ErrorNotificationController";
 import { SocketFunction } from "socket-function/SocketFunction";
+import { throttleRender } from "../../functional/throttleRender";
+import { isNode } from "typesafecss";
 
 const RENDER_INTERVAL = 1000;
 
@@ -36,6 +38,7 @@ const enableInfosURL = new URLParam("enableInfos", true);
 const enableWarningsURL = new URLParam("enableWarnings", true);
 const enableErrorsURL = new URLParam("enableErrors", true);
 const selectedFieldsURL = new URLParam("selectedFields", {} as Record<string, boolean>);
+const useRelativeTimeURL = new URLParam("useRelativeTime", true);
 
 export const errorNotifyToggleURL = new URLParam("errorNotifyToggle", false);
 
@@ -70,10 +73,12 @@ export class LogViewer2 extends qreact.Component {
     private fastArchiveViewer: FastArchiveViewer<LogDatum> | undefined = undefined;
 
     rerun() {
+        cacheBustParam.value = Date.now();
         void this.fastArchiveViewer?.handleDownload();
     }
 
     render() {
+        if (throttleRender({ key: "LogViewer2", frameDelay: 30 })) return undefined;
 
         this.state.datumsSeqNum;
 
@@ -119,11 +124,17 @@ export class LogViewer2 extends qreact.Component {
                                 let now = Date.now();
                                 startTimeParam.value = now - timeInDay * 7;
                                 endTimeParam.value = now + timeInHour * 2;
-                                filterParam.value = "";
                             }
                             this.rerun();
                         }}
                     />
+                    {errorNotifyToggleURL.value && <div className={css.hbox(10)}>
+                        <Button onClick={() => {
+                            void RecentErrorsController(SocketFunction.browserNodeId()).raiseTestError.promise("Test error notification");
+                        }}>
+                            Test Error Notification (won't rerun search, but it should show up in the title)
+                        </Button>
+                    </div>}
                 </div>
 
                 {!errorNotifyToggleURL.value && <div className={css.hbox(10)}>
@@ -242,6 +253,13 @@ export class LogViewer2 extends qreact.Component {
                                 anyLimited = true;
                             }
                         }
+                        let lineLimited = false;
+                        for (let i = 0; i < Math.min(1000, this.datums.length); i++) {
+                            let datum = this.datums[i];
+                            if (datum[LOG_LINE_LIMIT_FLAG]) {
+                                lineLimited = true;
+                            }
+                        }
                         let selectedFields: string[] = [];
                         for (let field of Object.keys(defaultSelectedFields)) {
                             if (atomic(selectedFieldsURL.value[field]) === undefined) {
@@ -265,15 +283,25 @@ export class LogViewer2 extends qreact.Component {
                         if (anyLimited) {
                             columns[LOG_LIMIT_FLAG] = {
                                 title: "Limited",
-                                formatter: x => x && <div className={css.hsl(0, 50, 50).colorhsl(0, 50, 95).boldStyle.pad2(10).ellipsis}>
-                                    Log Line Throttled
+                                formatter: x => x && <div className={css.hsl(0, 50, 50).colorhsl(0, 50, 95).boldStyle.pad2(10).ellipsis}
+                                    title="File throttled (other line may be lost lost!)">
+                                    FILE throttled
+                                </div> || undefined
+                            };
+                        }
+                        if (lineLimited) {
+                            columns[LOG_LINE_LIMIT_FLAG] = {
+                                title: "Limited",
+                                formatter: x => x && <div className={css.hsl(60, 50, 50).colorhsl(60, 50, 95).boldStyle.pad2(10).ellipsis}
+                                    title="Line throttled (no lines lost, just count for this line is lower than the actual count)">
+                                    Line throttled
                                 </div> || undefined
                             };
                         }
                         for (let field of selectedFields) {
                             let column: ColumnType<unknown, LogDatum> = {};
                             if (field === "time") {
-                                column.formatter = (x: unknown) => formatDateTime(Number(x));
+                                column.formatter = (x: unknown) => useRelativeTimeURL.value ? formatDateJSX(Number(x)) : <span title={formatDateTimeDetailed(Number(x))}>{formatDateTime(Number(x))}</span>;
                             }
                             if (!column.formatter) {
                                 column.formatter = (x: unknown) => <ObjectDisplay value={x} />;
@@ -302,38 +330,54 @@ export class LogViewer2 extends qreact.Component {
                             }
                         };
                         return <>
-                            <InputPicker
-                                label={<div className={css.hbox(10)}>
-                                    <div className={css.flexShrink0}>
-                                        Selected Fields
-                                    </div>
-                                    <Button onClick={() => {
+                            <div className={css.hbox(10)}>
+                                <InputPicker
+                                    label={<div className={css.hbox(10)}>
+                                        <div className={css.flexShrink0}>
+                                            Selected Fields
+                                        </div>
+                                        <Button onClick={() => {
+                                            let newValues = { ...selectedFieldsURL.value };
+                                            for (let key of Object.keys(newValues)) {
+                                                newValues[key] = key in defaultSelectedFields;
+                                            }
+                                            selectedFieldsURL.value = newValues;
+                                        }}>
+                                            Reset
+                                        </Button>
+                                    </div>}
+                                    picked={selectedFields}
+                                    options={Array.from(fieldNames).map(x => ({ value: x, label: x }))}
+                                    addPicked={x => {
                                         let newValues = { ...selectedFieldsURL.value };
-                                        for (let key of Object.keys(newValues)) {
-                                            newValues[key] = key in defaultSelectedFields;
-                                        }
+                                        newValues[x] = true;
                                         selectedFieldsURL.value = newValues;
-                                    }}>
-                                        Reset
-                                    </Button>
-                                </div>}
-                                picked={selectedFields}
-                                options={Array.from(fieldNames).map(x => ({ value: x, label: x }))}
-                                addPicked={x => {
-                                    let newValues = { ...selectedFieldsURL.value };
-                                    newValues[x] = true;
-                                    selectedFieldsURL.value = newValues;
-                                }}
-                                removePicked={x => {
-                                    let newValues = { ...selectedFieldsURL.value };
-                                    newValues[x] = false;
-                                    selectedFieldsURL.value = newValues;
-                                }}
-                            />
+                                    }}
+                                    removePicked={x => {
+                                        let newValues = { ...selectedFieldsURL.value };
+                                        newValues[x] = false;
+                                        selectedFieldsURL.value = newValues;
+                                    }}
+                                />
+                                <InputLabelURL
+                                    label="Use Relative Time"
+                                    checkbox
+                                    url={useRelativeTimeURL}
+                                    onChangeValue={() => {
+                                        Querysub.commit(() => {
+                                            this.state.datumsSeqNum++;
+                                        });
+                                    }}
+                                />
+                            </div>
+                            {this.datums.length === 0 && <div className={css.hsl(40, 50, 50).colorhsl(60, 50, 100).boldStyle.pad2(10).ellipsis}>
+                                No logs matched, either increase the time range or decrease the filter specificity.
+                            </div>}
                             <Table
                                 rows={this.datums}
                                 columns={columns}
                                 lineLimit={4}
+                                initialLimit={10}
                                 characterLimit={400}
                                 getRowAttributes={row => {
                                     let hue = -1;

package/src/diagnostics/logs/TimeRangeSelector.tsx

@@ -82,6 +82,14 @@ export class TimeRangeSelector extends qreact.Component {
                     >
                         Set to future data
                     </Button>
+                    <Button
+                        hue={110} onClick={() => {
+                            startTimeParam.value = now - timeInHour;
+                            endTimeParam.value = now + timeInHour * 2;
+                        }}
+                    >
+                        Set to last hour
+                    </Button>
                     <Button
                         hue={110} onClick={() => {
                             startTimeParam.value = now - timeInDay;

package/src/diagnostics/logs/diskLogGlobalContext.ts

@@ -1,20 +1,21 @@
 import { SocketFunction } from "socket-function/SocketFunction";
 import { lazy } from "socket-function/src/caching";
 import { getExternalIP } from "socket-function/src/networking";
-import { decodeNodeId } from "../../-a-auth/certs";
+import { decodeNodeId, getOwnMachineId, getOwnThreadId } from "../../-a-auth/certs";
 import { getOwnNodeId } from "../../-f-node-discovery/NodeDiscovery";
 import { logErrors } from "../../errors";
 import { addGlobalContext } from "./diskLogger";
 import child_process from "child_process";
+import { getNodeIdLocation } from "socket-function/src/nodeCache";
 
 export function addBuiltInContext() {
     addGlobalContext(() => {
         let nodeId = getOwnNodeId();
-        let nodeParts = decodeNodeId(nodeId);
+        let nodeParts = getNodeIdLocation(nodeId);
         return {
-            __machineId: nodeParts?.machineId,
+            __machineId: getOwnMachineId(),
             __mountId: SocketFunction.mountedNodeId,
-            __threadId: nodeParts?.threadId,
+            __threadId: getOwnThreadId(),
             __port: nodeParts?.port,
             __nodeId: nodeId,
             __entry: process.argv[1],