querysub 0.307.0 → 0.308.0

package/package.json

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

@@ -51,48 +51,6 @@ const getMemoryInfo = measureWrap(async function getMemoryInfo(): Promise<{ valu
     return undefined;
 });
 
-const getCpuInfo = measureWrap(async function getCpuInfo(): Promise<{ value: number; max: number; coreCount: number } | undefined> {
-    if (os.platform() === "win32") {
-        throw new Error("Windows is not supported for machine resource monitoring");
-    }
-
-    let coreCount = os.cpus().length;
-
-    try {
-        // Linux: Get CPU usage from /proc/stat - need two readings to calculate current usage
-        let result1 = await runPromise("grep 'cpu ' /proc/stat", { quiet: true });
-        let parts1 = result1.trim().split(/\s+/);
-
-        if (parts1.length >= 8) {
-            // Wait 1 second for accurate measurement
-            await new Promise(resolve => setTimeout(resolve, 1000));
-
-            let result2 = await runPromise("grep 'cpu ' /proc/stat", { quiet: true });
-            let parts2 = result2.trim().split(/\s+/);
-
-            if (parts2.length >= 8) {
-                // Calculate differences between the two readings
-                let idle1 = parseInt(parts1[4]) + parseInt(parts1[5]); // idle + iowait
-                let total1 = parts1.slice(1, 8).reduce((sum, val) => sum + parseInt(val), 0);
-
-                let idle2 = parseInt(parts2[4]) + parseInt(parts2[5]); // idle + iowait
-                let total2 = parts2.slice(1, 8).reduce((sum, val) => sum + parseInt(val), 0);
-
-                let totalDiff = total2 - total1;
-                let idleDiff = idle2 - idle1;
-
-                if (totalDiff > 0) {
-                    let usagePercent = (totalDiff - idleDiff) / totalDiff;
-                    let coresUsed = usagePercent * coreCount;
-                    return { value: coresUsed, max: coreCount, coreCount };
-                }
-            }
-        }
-    } catch (e: any) {
-        console.warn(`Error getting CPU info: ${e.message}`);
-    }
-    return undefined;
-});
 
 const getDiskInfo = measureWrap(async function getDiskInfo(): Promise<{ value: number; max: number } | undefined> {
     if (os.platform() === "win32") {
@@ -130,18 +88,9 @@ const getLiveMachineInfo = measureWrap(async function getLiveMachineInfo() {
         gitRef: "",
     };
 
-    machineInfo.info.hostnamectl = await errorToUndefinedSilent(runPromise("hostnamectl")) || "";
-    machineInfo.info.getExternalIP = await errorToUndefinedSilent(getExternalIP()) || "";
-    machineInfo.info.lscpu = await errorToUndefinedSilent(runPromise("lscpu")) || "";
-    machineInfo.info.id = await errorToUndefinedSilent(runPromise("id")) || await errorToUndefinedSilent(runPromise("whoami")) || "";
-
-    machineInfo.repoUrl = await getGitURLLive(".");
-    machineInfo.gitRef = await getGitRefLive(".");
-
     // Get system resource information
-    let [memoryInfo, cpuInfo, diskInfo] = await Promise.all([
+    let [memoryInfo, diskInfo] = await Promise.all([
         getMemoryInfo(),
-        getCpuInfo(),
         getDiskInfo()
     ]);
 
@@ -153,15 +102,6 @@ const getLiveMachineInfo = measureWrap(async function getLiveMachineInfo() {
         };
     }
 
-    if (cpuInfo) {
-        machineInfo.info.cpu = {
-            type: "CPU",
-            value: cpuInfo.value,
-            max: cpuInfo.max,
-            coreCount: cpuInfo.coreCount,
-        };
-    }
-
     if (diskInfo) {
         machineInfo.info.disk = {
             type: "DISK",
@@ -170,6 +110,14 @@ const getLiveMachineInfo = measureWrap(async function getLiveMachineInfo() {
         };
     }
 
+    machineInfo.info.hostnamectl = await errorToUndefinedSilent(runPromise("hostnamectl")) || "";
+    machineInfo.info.getExternalIP = await errorToUndefinedSilent(getExternalIP()) || "";
+    machineInfo.info.lscpu = await errorToUndefinedSilent(runPromise("lscpu")) || "";
+    machineInfo.info.id = await errorToUndefinedSilent(runPromise("id")) || await errorToUndefinedSilent(runPromise("whoami")) || "";
+
+    machineInfo.repoUrl = await getGitURLLive(".");
+    machineInfo.gitRef = await getGitRefLive(".");
+
     return machineInfo;
 });
 

package/src/deployManager/machineSchema.ts

@@ -47,7 +47,6 @@ export type MachineInfo = {
         type: string;
         value: number;
         max: number;
-        coreCount?: number;  // Optional for CPU info
     }>;
 
     repoUrl: string;

package/src/deployManager/spec.txt

@@ -1,16 +0,0 @@
-
-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?)
-
-1) Update everything to latest