querysub 0.652.0 → 0.653.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "querysub",
-  "version": "0.652.0",
+  "version": "0.653.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/MachinePicker.tsx

@@ -1,14 +1,48 @@
 import preact from "preact";
 import { SocketFunction } from "socket-function/SocketFunction";
 import { qreact } from "../../4-dom/qreact";
-import { sort } from "socket-function/src/misc";
+import { sort, timeInMinute } from "socket-function/src/misc";
 import { isDefined } from "../../misc";
-import { formatVeryNiceDateTime } from "socket-function/src/formatting/format";
-import { InputPicker } from "../../library-components/InputPicker";
-import { MachineServiceController } from "../machineSchema";
+import { formatTime } from "socket-function/src/formatting/format";
+import { css } from "typesafecss";
+import { Querysub } from "../../4-querysub/Querysub";
+import { MachineServiceController, getLiveServiceParameters, getMachineTargets, applyCommandTemplate } from "../machineSchema";
+import { FUNCTION_RUNNER_COMMAND_PREFIX } from "../serviceCategories";
 
 module.hotreload = true;
 
+const DEAD_HEARTBEAT_THRESHOLD = 10 * timeInMinute;
+
+const NETWORK_ARG_REGEX = /--network[= ]+("([^"]*)"|'([^']*)'|\S+)/g;
+
+/** The networks each machine's deployed function runner services listen on, from the `--network` args of their commands (templated per machine entry). */
+export function getMachineNetworks(controller: ReturnType<typeof MachineServiceController>): Map<string, string[]> {
+    let result = new Map<string, string[]>();
+    for (let serviceId of controller.getServiceList() || []) {
+        let config = controller.getServiceConfig(serviceId);
+        if (!config) continue;
+        let parameters = getLiveServiceParameters(config);
+        if (!parameters.deploy) continue;
+        if (!parameters.command.trimStart().startsWith(FUNCTION_RUNNER_COMMAND_PREFIX)) continue;
+        for (let target of getMachineTargets(parameters)) {
+            let command = applyCommandTemplate(parameters.command, target.variables);
+            for (let match of command.matchAll(NETWORK_ARG_REGEX)) {
+                let network = match[2] ?? match[3] ?? match[1];
+                if (!network) continue;
+                let list = result.get(target.machineId);
+                if (!list) {
+                    list = [];
+                    result.set(target.machineId, list);
+                }
+                if (!list.includes(network)) {
+                    list.push(network);
+                }
+            }
+        }
+    }
+    return result;
+}
+
 export class MachinePicker extends qreact.Component<{
     label?: preact.ComponentChild;
     picked: string[];
@@ -22,19 +56,51 @@ export class MachinePicker extends qreact.Component<{
         let machines = (controller.getMachineList() || []).map(x => controller.getMachineInfo(x)).filter(isDefined);
         sort(machines, x => -x.heartbeat);
 
-        let options = machines.map(machineObj => ({
-            value: machineObj.machineId,
-            label: `${machineObj.machineId} ${machineObj.info["getExternalIP"]} (${Object.keys(machineObj.services || {}).length} services, last heartbeat ${formatVeryNiceDateTime(machineObj.heartbeat)})`,
-        }));
+        let networksPerMachine = getMachineNetworks(controller);
+        let now = Querysub.nowDelayed(timeInMinute);
 
-        return <InputPicker<string>
-            label={this.props.label}
-            picked={this.props.picked}
-            options={options}
-            addPicked={this.props.addPicked}
-            removePicked={this.props.removePicked}
-            singleOption={this.props.singleOption}
-            fillWidth={this.props.fillWidth}
-        />;
+        return <div className={css.vbox(6) + (this.props.fillWidth && css.fillWidth || "")}>
+            {this.props.label && <b>{this.props.label}</b>}
+            <div className={css.hbox(8).wrap}>
+                {machines.map(machine => {
+                    let machineId = machine.machineId;
+                    let isPicked = this.props.picked.includes(machineId);
+                    let ip = machine.info["getExternalIP"];
+                    if (typeof ip !== "string") {
+                        ip = "";
+                    }
+                    let sinceHeartbeat = now - machine.heartbeat;
+                    let isLikelyDead = sinceHeartbeat > DEAD_HEARTBEAT_THRESHOLD;
+                    let networks = networksPerMachine.get(machineId) || [];
+                    return <button
+                        key={machineId}
+                        className={
+                            css.button.pad2(10, 6).textAlign("left").vbox(2)
+                            + (isPicked && css.hsl(100, 50, 85).bord2(100, 50, 40, 2) || css.hsl(0, 0, 100).bord2(0, 0, 70))
+                        }
+                        onClick={() => {
+                            if (isPicked) {
+                                this.props.removePicked(machineId);
+                            } else {
+                                this.props.addPicked(machineId);
+                            }
+                        }}
+                    >
+                        <div className={css.fontSize(17).fontWeight("bold")}>
+                            {ip || machineId}
+                        </div>
+                        {ip && <div className={css.fontSize(11).colorhsl(0, 0, 40)}>
+                            {machineId}
+                        </div>}
+                        {networks.length > 0 && <div className={css.fontSize(11).colorhsl(220, 60, 40)}>
+                            {networks.join(", ")}
+                        </div>}
+                        {isLikelyDead && <div className={css.fontSize(11).colorhsl(0, 80, 45)}>
+                            ⚠️ Likely dead ({formatTime(sinceHeartbeat)} since heartbeat)
+                        </div>}
+                    </button>;
+                })}
+            </div>
+        </div>;
     }
 }

package/src/deployManager/components/ProcessesView.tsx

@@ -73,10 +73,10 @@ class ProcessOutput extends qreact.Component<{ record: ProcessRecord; machineNod
     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;
-        }
+    private scrollToEndIfPinned() {
+        let div = this.outputDiv;
+        if (!this.pinnedToBottom || !div) return;
+        div.scrollTop = div.scrollHeight;
     }
     render() {
         return <div
@@ -96,6 +96,11 @@ class ProcessOutput extends qreact.Component<{ record: ProcessRecord; machineNod
                 // The pane is dark, so the ansi colour only sets the hue - the lightness has to stay readable against it
                 return <span className={css.colorhsl(rgbToHsl(color).h, ANSI_SATURATION, ANSI_LIGHTNESS)}>{text}</span>;
             })}
+            {/* Keyed by the data length so it is recreated on every append, and its ref fires after the new content is in the DOM - which is when scrolling to the end works */}
+            {this.state.data && <span
+                key={`end-${this.state.data.length}`}
+                ref={element => element && this.scrollToEndIfPinned()}
+            />}
         </div>;
     }
 }

package/src/deployManager/components/ServiceDetailPage.tsx

@@ -7,7 +7,7 @@ import { Querysub } from "../../4-querysub/Querysub";
 import { currentViewParam, selectedServiceIdParam, selectedMachineIdParam } from "../urlParams";
 import { formatDateTime, formatDateTimeDetailed, formatTime, formatVeryNiceDateTime } from "socket-function/src/formatting/format";
 import { InputPicker } from "../../library-components/InputPicker";
-import { MachinePicker } from "./MachinePicker";
+import { MachinePicker, getMachineNetworks } from "./MachinePicker";
 import { deepCloneJSON, sort, timeInSecond } from "socket-function/src/misc";
 import { InputLabel } from "../../library-components/InputLabel";
 import { Button } from "../../library-components/Button";
@@ -105,43 +105,72 @@ export class ServiceDetailPage extends qreact.Component {
             });
         };
 
-        let dupIndexes = new Map<string, number>();
-        return <div className={css.vbox(10).fillWidth.pad2(12).bord2(0, 0, 20)}>
-            {targets.map((target, entryIndex) => {
-                let index = dupIndexes.get(target.machineId) || 0;
-                dupIndexes.set(target.machineId, index + 1);
-                // Variables set on the entry but no longer in the command are still shown (flagged), so stale values can be cleared.
-                let variableNames = [...new Set([...templateVariables, ...Object.keys(target.variables)])];
-                return <div className={css.hbox(12).wrap.alignItems("center").fillWidth}>
-                    <div className={css.boldStyle}>{getScreenName({ serviceKey: config.parameters.key, index })} ({target.machineId})</div>
-                    {variableNames.map(name => {
-                        let inCommand = templateVariables.includes(name);
-                        return <InputLabel
-                            label={inCommand && name || `${name} (not in command)`}
-                            value={target.variables[name] || ""}
-                            onChangeValue={value => setVariable(entryIndex, name, value)}
-                        />;
-                    })}
-                    <button
-                        className={css.pad2(10, 4).button.bord2(0, 0, 20).hsl(120, 70, 90)}
-                        title="Duplicate this entry (same machine and variables)"
-                        onClick={() => {
-                            updateTargets(targets => {
-                                targets.splice(entryIndex + 1, 0, deepCloneJSON(targets[entryIndex]));
-                            });
-                        }}>
-                        +
-                    </button>
-                    <button
-                        className={css.pad2(10, 4).button.bord2(0, 0, 20).hsl(0, 70, 90)}
-                        title="Remove this entry"
-                        onClick={() => {
-                            updateTargets(targets => {
-                                targets.splice(entryIndex, 1);
-                            });
-                        }}>
-                        −
-                    </button>
+        let controller = MachineServiceController(SocketFunction.browserNodeId());
+        let networksPerMachine = getMachineNetworks(controller);
+
+        // Grouped by machine, keeping each entry's index into the targets array (edits go by that index) and its per-machine occurrence index (the screen name index).
+        let machineGroups = new Map<string, { entryIndex: number; index: number; target: (typeof targets)[number] }[]>();
+        targets.forEach((target, entryIndex) => {
+            let group = machineGroups.get(target.machineId);
+            if (!group) {
+                group = [];
+                machineGroups.set(target.machineId, group);
+            }
+            group.push({ entryIndex, index: group.length, target });
+        });
+
+        return <div className={css.vbox(8).fillWidth}>
+            {[...machineGroups.entries()].map(([machineId, group]) => {
+                let ip = controller.getMachineInfo(machineId)?.info["getExternalIP"];
+                if (typeof ip !== "string") {
+                    ip = "";
+                }
+                let networks = networksPerMachine.get(machineId) || [];
+                return <div key={machineId} className={css.vbox(6).fillWidth.pad2(8, 6).hsl(0, 0, 94)}>
+                    <div className={css.hbox(10).alignItems("baseline")}>
+                        <div className={css.boldStyle.fontSize(15)}>{ip || machineId}</div>
+                        {ip && <div className={css.fontSize(11).colorhsl(0, 0, 40)}>{machineId}</div>}
+                        {networks.length > 0 && <div className={css.fontSize(11).colorhsl(220, 60, 40)}>
+                            {networks.join(", ")}
+                        </div>}
+                    </div>
+                    <div className={css.hbox(6).wrap}>
+                        {group.map(({ entryIndex, index, target }) => {
+                            // Variables set on the entry but no longer in the command are still shown (flagged), so stale values can be cleared.
+                            let variableNames = [...new Set([...templateVariables, ...Object.keys(target.variables)])];
+                            return <div key={entryIndex} className={css.hbox(8).alignItems("center").pad2(8, 4).hsl(0, 0, 100)}>
+                                <div className={css.fontSize(11).colorhsl(0, 0, 40)}>{getScreenName({ serviceKey: config.parameters.key, index })}</div>
+                                {variableNames.map(name => {
+                                    let inCommand = templateVariables.includes(name);
+                                    return <InputLabel
+                                        label={inCommand && name || `${name} (not in command)`}
+                                        value={target.variables[name] || ""}
+                                        onChangeValue={value => setVariable(entryIndex, name, value)}
+                                    />;
+                                })}
+                                <button
+                                    className={css.pad2(10, 4).button.bord2(0, 0, 20).hsl(120, 70, 90)}
+                                    title="Duplicate this entry (same machine and variables)"
+                                    onClick={() => {
+                                        updateTargets(targets => {
+                                            targets.splice(entryIndex + 1, 0, deepCloneJSON(targets[entryIndex]));
+                                        });
+                                    }}>
+                                    +
+                                </button>
+                                <button
+                                    className={css.pad2(10, 4).button.bord2(0, 0, 20).hsl(0, 70, 90)}
+                                    title="Remove this entry"
+                                    onClick={() => {
+                                        updateTargets(targets => {
+                                            targets.splice(entryIndex, 1);
+                                        });
+                                    }}>
+                                    −
+                                </button>
+                            </div>;
+                        })}
+                    </div>
                 </div>;
             })}
         </div>;
@@ -306,7 +335,7 @@ export class ServiceDetailPage extends qreact.Component {
                     this.updateEditorState(updated);
                 }}
             />
-            <div className={css.hbox(12)}>
+            <div className={css.hbox(12).alignItems("center")}>
                 {(() => {
                     let lastDeployTime = getLiveServiceParameters(originalConfig).releaseTime;
                     if (!lastDeployTime || lastDeployTime > now) return undefined;
@@ -314,6 +343,9 @@ export class ServiceDetailPage extends qreact.Component {
                         Last deploy at {formatDateTime(lastDeployTime)} ({formatTime(now - lastDeployTime)} ago)
                     </span>;
                 })()}
+                {!config.parameters.deploy && <div className={css.fontSize(24).boldStyle.colorhsl(0, 80, 45).hsl(0, 80, 95).pad2(12, 6)}>
+                    NOT DEPLOYED, ENABLE IN ORDER TO DEPLOY
+                </div>}
             </div>
             {/* Machine Status */}
             {config.parameters.deploy && <div className={css.vbox(8).fillWidth}>

package/src/deployManager/serviceCategories.ts

@@ -5,7 +5,7 @@ import { DISK_PATHVALUE_COLOR, PATHVALUE_COLOR, FUNCTION_RUNNER_COLOR } from "..
 // What a service IS, worked out from the command it runs. The commands are the only signal we have - nothing in the config says "this is a storage server" - so the prefixes live here rather than in whichever page happened to need one first.
 export const STORAGE_COMMAND_PREFIX = "yarn storageserve";
 const PATHVALUE_COMMAND_PREFIX = "yarn server-public";
-const FUNCTION_RUNNER_COMMAND_PREFIX = "yarn function-public";
+export const FUNCTION_RUNNER_COMMAND_PREFIX = "yarn function-public";
 
 export type ServiceCategory = {
     label: string;