querysub 0.306.0 → 0.308.0

package/package.json

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

package/src/deployManager/components/MachineDetailPage.tsx

@@ -3,9 +3,10 @@ import { qreact } from "../../4-dom/qreact";
 import { MACHINE_RESYNC_INTERVAL, MachineServiceController, ServiceConfig } from "../machineSchema";
 import { css } from "typesafecss";
 import { currentViewParam, selectedMachineIdParam, selectedServiceIdParam } from "../urlParams";
-import { formatVeryNiceDateTime } from "socket-function/src/formatting/format";
+import { formatNumber, formatVeryNiceDateTime } from "socket-function/src/formatting/format";
 import { sort } from "socket-function/src/misc";
 import { Anchor } from "../../library-components/ATag";
+import { ShowMore } from "../../library-components/ShowMore";
 
 export class MachineDetailPage extends qreact.Component {
     render() {
@@ -65,10 +66,27 @@ export class MachineDetailPage extends qreact.Component {
 
                 <div>
                     <h3>System Information</h3>
-                    <div className={css.vbox(4)}>
+                    <div className={css.vbox(10)}>
                         {Object.entries(machine.info).map(([key, value]) => (
-                            <div key={key}>
-                                <span>{key}:</span> {value}
+                            <div key={key} className={css.hbox(10).hsla(0, 0, 0, 0.1).pad2(10, 2)}>
+                                <b>{key}:</b>
+                                <ShowMore className={css.whiteSpace("pre-wrap")} maxHeight={40}>
+                                    {(() => {
+                                        if (typeof value === "object") {
+                                            return <div className={css.pad2(6, 2).hsla(0, 0, 0, 0.1).relative}>
+                                                <div className={
+                                                    css.absolute.pos(0, 0)
+                                                        .size(`${value.value / value.max * 100}%`, "100%")
+                                                        .hsl(0, 0, 70)
+                                                } />
+                                                <div className={css.relative}>
+                                                    {value.type} ({formatNumber(value.value)} / {formatNumber(value.max)})
+                                                </div>
+                                            </div>;
+                                        }
+                                        return value;
+                                    })()}
+                                </ShowMore>
                             </div>
                         ))}
                     </div>

package/src/deployManager/components/MachinesListPage.tsx

@@ -5,7 +5,7 @@ import { css } from "typesafecss";
 import { t } from "../../2-proxy/schema2";
 import { Querysub } from "../../4-querysub/QuerysubController";
 import { currentViewParam, selectedMachineIdParam } from "../urlParams";
-import { formatVeryNiceDateTime } from "socket-function/src/formatting/format";
+import { formatNumber, formatVeryNiceDateTime } from "socket-function/src/formatting/format";
 import { sort } from "socket-function/src/misc";
 import { formatDateJSX } from "../../misc/formatJSX";
 import { DeployMachineButtons, RenderGitRefInfo } from "./deployButtons";
@@ -173,6 +173,20 @@ export class MachinesListPage extends qreact.Component {
                                         Last heartbeat {formatDateJSX(machineInfo.heartbeat)}
                                     </div>
                                     <RenderGitRefInfo gitRef={machineInfo.gitRef} />
+                                    {Object.values(machineInfo.info).map(value => {
+                                        if (typeof value === "string") return undefined;
+                                        return <div className={css.pad2(6, 2).hsla(0, 0, 0, 0.1).relative}>
+                                            <div className={
+                                                css.absolute.pos(0, 0)
+                                                    .size(`${value.value / value.max * 100}%`, "100%")
+                                                    .hsl(0, 0, 70)
+                                            } />
+                                            <div className={css.relative}>
+                                                {value.type} ({formatNumber(value.value)} / {formatNumber(value.max)})
+                                            </div>
+                                        </div>;
+
+                                    })}
                                 </div>
                                 <div className={css.vbox(4).flexGrow(1)}>
                                     <div>

package/src/deployManager/machineApplyMainCode.ts

@@ -27,6 +27,56 @@ import path from "path";
 
 const PIPE_FILE_LINE_LIMIT = 10_000;
 
+const getMemoryInfo = measureWrap(async function getMemoryInfo(): Promise<{ value: number; max: number } | undefined> {
+    if (os.platform() === "win32") {
+        throw new Error("Windows is not supported for machine resource monitoring");
+    }
+
+    try {
+        // Linux: Use free command
+        let result = await runPromise("free -b", { quiet: true });
+        let lines = result.split("\n");
+        let memLine = lines.find(line => line.startsWith("Mem:"));
+        if (memLine) {
+            let parts = memLine.split(/\s+/);
+            let total = parseInt(parts[1]);
+            let used = parseInt(parts[2]);
+            if (total && used >= 0) {
+                return { value: used, max: total };
+            }
+        }
+    } catch (e: any) {
+        console.warn(`Error getting memory info: ${e.message}`);
+    }
+    return undefined;
+});
+
+
+const getDiskInfo = measureWrap(async function getDiskInfo(): Promise<{ value: number; max: number } | undefined> {
+    if (os.platform() === "win32") {
+        throw new Error("Windows is not supported for machine resource monitoring");
+    }
+
+    try {
+        // Linux: Get disk usage for root filesystem
+        let result = await runPromise("df -B1 /", { quiet: true });
+        let lines = result.split("\n");
+        if (lines.length >= 2) {
+            let parts = lines[1].split(/\s+/);
+            if (parts.length >= 4) {
+                let total = parseInt(parts[1]);
+                let used = parseInt(parts[2]);
+                if (total && used >= 0) {
+                    return { value: used, max: total };
+                }
+            }
+        }
+    } catch (e: any) {
+        console.warn(`Error getting disk info: ${e.message}`);
+    }
+    return undefined;
+});
+
 const getLiveMachineInfo = measureWrap(async function getLiveMachineInfo() {
     let machineInfo: MachineInfo = {
         machineId: getOwnMachineId(),
@@ -38,6 +88,28 @@ const getLiveMachineInfo = measureWrap(async function getLiveMachineInfo() {
         gitRef: "",
     };
 
+    // Get system resource information
+    let [memoryInfo, diskInfo] = await Promise.all([
+        getMemoryInfo(),
+        getDiskInfo()
+    ]);
+
+    if (memoryInfo) {
+        machineInfo.info.ram = {
+            type: "MEMORY",
+            value: memoryInfo.value,
+            max: memoryInfo.max,
+        };
+    }
+
+    if (diskInfo) {
+        machineInfo.info.disk = {
+            type: "DISK",
+            value: diskInfo.value,
+            max: diskInfo.max,
+        };
+    }
+
     machineInfo.info.hostnamectl = await errorToUndefinedSilent(runPromise("hostnamectl")) || "";
     machineInfo.info.getExternalIP = await errorToUndefinedSilent(getExternalIP()) || "";
     machineInfo.info.lscpu = await errorToUndefinedSilent(runPromise("lscpu")) || "";

package/src/deployManager/machineSchema.ts

@@ -43,7 +43,11 @@ export type MachineInfo = {
         lscpu
         id (fallback to whoami)
     */
-    info: Record<string, string>;
+    info: Record<string, string | {
+        type: string;
+        value: number;
+        max: number;
+    }>;
 
     repoUrl: string;
     gitRef: string;

package/src/deployManager/spec.txt

@@ -1,18 +0,0 @@
-
-1) Update everything to latest
-3) Update cyoa rolling time back to 4 hours
-
-
-9) In machine info, support an object which can show current, and max, so we can show it as a bar and the max amount for:
-    RAM
-    CPU
-    DISK
-
-10) Add RAM total, ram % used, cpu count, CPU %, disk size, disk % used to machine info
-    - Show this all in the list page, with nice bars?
-        - Filled, but the total size will also depend on the maximum (to a degree), so it's very nice.
-        - A bar, with a label, or something. The AI can give us a few options
-    (Yes, it overlaps with node metrics, but that's okay, sometimes we want to look at machines, other times services, and the types of errors that show up in either changes).
-
-
-11) A spinning animation on the FPS display, so we can visually see when the browser locks up (because the animation will stop?)