querysub 0.701.0 → 0.703.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "querysub",
-  "version": "0.701.0",
+  "version": "0.703.0",
   "main": "index.js",
   "license": "MIT",
   "note1": "note on node-forge fork, see https://github.com/digitalbazaar/forge/issues/744 for details",

package/src/4-dom/qreact.tsx

@@ -760,11 +760,11 @@ class QRenderClass {
                             if (equalJSON) {
                                 // ALSO, we need to make sure the change WAS only because of props...
                                 let changes = renderWatcher.triggeredByChanges;
-                                let propsPath = isValueProxy2(props)!;
+                                let propsPath = getProxyPath(() => self.data().props);
                                 let onlyPropsChanges = (
-                                    Array.from(changes?.newParentsSynced || []).every(p => p.startsWith(propsPath))
+                                    !Array.from(changes?.newParentsSynced || []).some(p => p !== propsPath)
                                     && !changes?.extraReasons?.length
-                                    && Array.from(changes?.paths || []).every(p => p.startsWith(propsPath))
+                                    && !Array.from(changes?.paths || []).some(p => p !== propsPath)
                                 );
                                 if (onlyPropsChanges) {
                                     proxyWatcher.reuseLastWatches();
@@ -864,6 +864,10 @@ class QRenderClass {
                                 props = syncedData.props;
                             });
                         } else {
+                            let atomicProps = statics.atomicSetProps || statics.jsonComparePropUpdates;
+                            if (atomicProps) {
+                                syncedData.props = vNode.props;
+                            }
                             // Have each prop be a synced field, so conditional props work (accessing a prop not
                             //  provided returns undefined). Atomic writes is on, so write objects
                             //  aren't destructured (this allows passing functions, exotics, etc).
@@ -873,7 +877,9 @@ class QRenderClass {
                                 if (key === "className") {
                                     value = String(value);
                                 }
-                                syncedData.props[key] = value;
+                                if (!atomicProps) {
+                                    syncedData.props[key] = value;
+                                }
                                 // We then need to use a getter in the props, so that it causes a synced read
                                 //      UNLESS that prop is not defined, then it is just undefined
                                 Object.defineProperty(props, key, {

package/src/deployManager/components/MachineDetailPage.tsx

@@ -134,13 +134,21 @@ export class MachineDetailPage extends qreact.Component {
                                 <ShowMore className={css.whiteSpace("pre-wrap")} maxHeight={80}>
                                     {(() => {
                                         if (typeof value === "object") {
-                                            return <UsageBar label={value.label || value.type} value={value.value} max={value.max} {...getUsageThresholds(value.type)} />;
+                                            return <UsageBar label={value.label || value.type} value={value.value} max={value.max} subValue={value.subValue} subLabel={value.subLabel} {...getUsageThresholds(value.type)} />;
                                         }
                                         return value;
                                     })()}
                                 </ShowMore>
                             </div>
                         ))}
+                        {machine.meminfo && (
+                            <div className={css.hbox(10).hsla(0, 0, 0, 0.1).pad2(10, 2)}>
+                                <b className={css.flexShrink0}>meminfo:</b>
+                                <ShowMore className={css.whiteSpace("pre-wrap")} maxHeight={80}>
+                                    {Object.entries(machine.meminfo).map(([key, bytes]) => `${key}: ${formatNumber(bytes)}B`).join("\n")}
+                                </ShowMore>
+                            </div>
+                        )}
                     </div>
                 </div>
 

package/src/deployManager/components/MachinesListPage.tsx

@@ -187,7 +187,7 @@ export class MachinesListPage extends qreact.Component {
                                     <RenderGitRefInfo gitRef={machineInfo.gitRef} />
                                     {Object.values(machineInfo.info).map(value => {
                                         if (typeof value === "string") return undefined;
-                                        return <UsageBar label={value.label || value.type} value={value.value} max={value.max} {...getUsageThresholds(value.type)} />;
+                                        return <UsageBar label={value.label || value.type} value={value.value} max={value.max} subValue={value.subValue} subLabel={value.subLabel} {...getUsageThresholds(value.type)} />;
                                     })}
                                 </div>
                                 <div className={css.vbox(4).flexGrow(1)}>

package/src/deployManager/machineApplyMainCode.ts

@@ -63,6 +63,45 @@ const getMemoryInfo = measureWrap(async function getMemoryInfo(): Promise<{ memo
 });
 
 
+const MEMINFO_LINE_REGEX = /^(\S+):\s+(\d+)(?:\s+(\S+))?\s*$/;
+const MEMINFO_UNIT_MULTIPLIERS: Record<string, number> = {
+    b: 1,
+    kb: 1024,
+    mb: 1024 * 1024,
+    gb: 1024 * 1024 * 1024,
+};
+
+export function parseMeminfo(raw: string): Record<string, number> {
+    let result: Record<string, number> = {};
+    for (let line of raw.split("\n")) {
+        let match = MEMINFO_LINE_REGEX.exec(line);
+        if (!match) continue;
+        let [, key, valueText, unit] = match;
+        let multiplier = unit ? MEMINFO_UNIT_MULTIPLIERS[unit.toLowerCase()] : 1;
+        if (multiplier === undefined) continue;
+        let value = parseInt(valueText);
+        if (!(value >= 0)) continue;
+        result[key] = value * multiplier;
+    }
+    return result;
+}
+
+const getMeminfo = measureWrap(async function getMeminfo(): Promise<Record<string, number> | undefined> {
+    if (os.platform() === "win32") {
+        throw new Error("Windows is not supported for machine resource monitoring");
+    }
+    try {
+        let raw = await fs.promises.readFile("/proc/meminfo", "utf8");
+        let parsed = parseMeminfo(raw);
+        if (Object.keys(parsed).length > 0) {
+            return parsed;
+        }
+    } catch (e: any) {
+        console.warn(`Error reading /proc/meminfo: ${e.stack}`);
+    }
+    return undefined;
+});
+
 const LARGE_DISK_MIN_BYTES = 100 * 1024 * 1024 * 1024;
 const DF_LINE_REGEX = /^(\S+)\s+(\d+)\s+(\d+)\s+\d+\s+\S+\s+(.+?)\s*$/;
 
@@ -117,9 +156,10 @@ const getLiveMachineInfo = measureWrap(async function getLiveMachineInfo() {
     };
 
     // Get system resource information
-    let [memoryInfo, diskInfos] = await Promise.all([
+    let [memoryInfo, diskInfos, meminfo] = await Promise.all([
         getMemoryInfo(),
-        getDiskInfos()
+        getDiskInfos(),
+        getMeminfo(),
     ]);
 
     if (memoryInfo?.memory) {
@@ -127,9 +167,15 @@ const getLiveMachineInfo = measureWrap(async function getLiveMachineInfo() {
             type: "MEMORY",
             value: memoryInfo.memory.value,
             max: memoryInfo.memory.max,
+            subValue: meminfo?.Active,
+            subLabel: "active",
         };
     }
 
+    if (meminfo) {
+        machineInfo.meminfo = meminfo;
+    }
+
     if (memoryInfo?.swap) {
         machineInfo.info.swap = {
             type: "SWAP",

package/src/deployManager/machineSchema.ts

@@ -64,8 +64,12 @@ export type MachineInfo = {
         value: number;
         max: number;
         label?: string;
+        subValue?: number;
+        subLabel?: string;
     }>;
 
+    meminfo?: Record<string, number>;
+
     repoUrl: string;
     gitRef: string;
 

package/src/library-components/InputLabel.tsx

@@ -28,12 +28,15 @@ export type InputLabelProps = Omit<InputProps, "label" | "title"> & {
     tooltip?: string;
 
     fillWidth?: boolean | number;
+    // Height a textarea opens at in edit mode; EDIT_TEXTAREA_MIN_HEIGHT when unset.
+    editMinHeight?: number;
 };
 
 // A checkbox is a small square that reads as belonging to the words beside it, so it sits tight against
 // its label; every other input is a box of its own and wants room between the two.
 const LABEL_GAP = 8;
 const CHECKBOX_LABEL_GAP = 2;
+export const EDIT_TEXTAREA_MIN_HEIGHT = 80;
 
 function roundToDecimals(value: number, decimals: number) {
     return Math.round(value * 10 ** decimals) / 10 ** decimals;
@@ -134,6 +137,10 @@ export class InputLabel extends qreact.Component<InputLabelProps> {
             };
             // Default focus on mount, as editting it is the only reason to click on it.
             props.focusOnMount = props.focusOnMount ?? true;
+            if (props.textarea) {
+                props.fillWidth = props.fillWidth ?? true;
+                style.minHeight = style.minHeight ?? props.editMinHeight ?? EDIT_TEXTAREA_MIN_HEIGHT;
+            }
         }
         let input = <Input
             {...props as any}
@@ -141,8 +148,8 @@ export class InputLabel extends qreact.Component<InputLabelProps> {
             style={style}
         />;
         if (props.edit && !this.state.editting) {
-            input = <span class={css.hbox(2).overflowHidden + " trigger-hover"}>
-                <span class={props.editClass}>
+            input = <span class={css.hbox(2).overflowHidden + (props.textarea && css.fillWidth.alignItems("start") || "") + " trigger-hover"}>
+                <span class={(props.textarea && css.whiteSpace("pre-wrap").fillWidth || "") + " " + props.editClass}>
                     {props.editValue ?? props.value}
                 </span>
                 <span class={css.opacity(0.1).opacity(1, "hover")}>

package/src/library-components/UsageBar.tsx

@@ -3,6 +3,8 @@ import { css } from "typesafecss";
 import { formatNumber } from "socket-function/src/formatting/format";
 
 const FLASH_CLASS_NAME = "UsageBar-flash";
+const SUB_BAR_HUE = 210;
+const SUB_BAR_ALPHA = 0.35;
 
 export const MEMORY_WARNING_THRESHOLD = 0.7;
 export const MEMORY_ERROR_THRESHOLD = 0.85;
@@ -36,11 +38,14 @@ export class UsageBar extends qreact.Component<{
     warningThreshold?: number;
     /** Fraction of max at which the bar fill turns red and flashes. */
     errorThreshold?: number;
+    subValue?: number;
+    subLabel?: string;
 }> {
     render() {
-        let { label, value, max, unit, warningThreshold, errorThreshold } = this.props;
+        let { label, value, max, unit, warningThreshold, errorThreshold, subValue, subLabel } = this.props;
         let suffix = unit || "";
         let fraction = max && value / max || 0;
+        let subFraction = subValue !== undefined && max && subValue / max || 0;
         let isError = errorThreshold !== undefined && fraction >= errorThreshold;
         let isWarning = !isError && warningThreshold !== undefined && fraction >= warningThreshold;
         let fillClass = isError && css.hsl(0, 80, 60) || isWarning && css.hsl(45, 90, 60) || css.hsl(0, 0, 70);
@@ -50,8 +55,11 @@ export class UsageBar extends qreact.Component<{
                 + fillClass
                 + (isError && (" " + FLASH_CLASS_NAME) || "")
             } />
-            <div className={css.relative}>
-                {label} ({formatNumber(value)}{suffix} / {formatNumber(max)}{suffix})
+            {subValue !== undefined && <div className={
+                css.absolute.pos(0, 0).size(`${Math.min(subFraction, 1) * 100}%`, "100%").hsla(SUB_BAR_HUE, 80, 55, SUB_BAR_ALPHA)
+            } />}
+            <div className={css.relative} title={subValue !== undefined ? `${subLabel || "sub"} / used / total` : "used / total"}>
+                {label} ({subValue !== undefined && <span className={css.opacity(0.75)}>{formatNumber(subValue)}{suffix} / </span>}{formatNumber(value)}{suffix} / {formatNumber(max)}{suffix})
             </div>
             {isError && <style>{`
                 @keyframes ${FLASH_CLASS_NAME}-anim {