querysub 0.508.0 → 0.510.0

package/src/deployManager/components/ServiceDetailPage.tsx

@@ -1,6 +1,6 @@
 import { SocketFunction } from "socket-function/SocketFunction";
 import { qreact } from "../../4-dom/qreact";
-import { MACHINE_RESYNC_INTERVAL, MachineServiceController, ServiceConfig } from "../machineSchema";
+import { DEFAULT_OVERLAP_TIME, MACHINE_RESYNC_INTERVAL, MachineServiceController, ServiceConfig } from "../machineSchema";
 import { css } from "typesafecss";
 import { t } from "../../2-proxy/schema2";
 import { Querysub } from "../../4-querysub/Querysub";
@@ -8,11 +8,11 @@ import { currentViewParam, selectedServiceIdParam, selectedMachineIdParam } from
 import { formatTime, formatVeryNiceDateTime } from "socket-function/src/formatting/format";
 import { InputPicker } from "../../library-components/InputPicker";
 import { MachinePicker } from "./MachinePicker";
-import { deepCloneJSON, nextId, sort } from "socket-function/src/misc";
+import { deepCloneJSON, nextId, sort, timeInSecond } from "socket-function/src/misc";
 import { InputLabel } from "../../library-components/InputLabel";
 import { Button } from "../../library-components/Button";
 import { isDefined } from "../../misc";
-import { watchScreenOutput, stopWatchingScreenOutput, MachineController } from "../machineController";
+import { watchScreenOutput, stopWatchingScreenOutput } from "../machineController";
 import { getPathStr2 } from "../../path";
 import { ATag, Anchor } from "../../library-components/ATag";
 import { ScrollOnMount } from "../../library-components/ScrollOnMount";
@@ -26,6 +26,7 @@ import { getLogViewerParams } from "../../diagnostics/logs/IndexedLogs/LogViewer
 import { getScreenName } from "../machineApplyMainCode";
 import { getOwnThreadId } from "../../-f-node-discovery/NodeDiscovery";
 import { decodeNodeId } from "sliftutils/misc/https/certs";
+import { showModal } from "../../5-diagnostics/Modal";
 
 
 
@@ -42,7 +43,10 @@ export class ServiceDetailPage extends qreact.Component {
             data: t.type(""),
             callbackId: t.type(""),
         }),
-        isKillingRolling: t.type(false),
+        // Milliseconds; 0 means no scheduled time picked yet (use Deploy Now instead)
+        switchTime: t.number(0),
+        // Seconds; 0 means use the service's configured overlapTime
+        overlapOverride: t.number(0),
     });
 
 
@@ -109,37 +113,7 @@ export class ServiceDetailPage extends qreact.Component {
         });
     }
 
-    private async killAllRollingServices(config: ServiceConfig) {
-        Querysub.commit(() => {
-            this.state.isKillingRolling = true;
-        });
-
-        Querysub.onCommitFinished(async () => {
-            try {
-                let uniqueMachineIds = Array.from(new Set(config.machineIds));
-
-                for (let machineId of uniqueMachineIds) {
-                    let machineInfo = await MachineServiceController(SocketFunction.browserNodeId()).getMachineInfo.promise(machineId);
-                    if (!machineInfo) continue;
-
-                    let applyNodeId = machineInfo.applyNodeId;
-                    await MachineController(SocketFunction.browserNodeId()).killRollingServicesFromBrowser.promise({
-                        machineNodeId: applyNodeId,
-                        serviceKey: config.parameters.key,
-                    });
-                }
-            } catch (e: any) {
-                Querysub.localCommit(() => {
-                    this.state.saveError = `Error killing rolling services: ${e.message}`;
-                });
-            } finally {
-                Querysub.localCommit(() => {
-                    this.state.isKillingRolling = false;
-                });
-            }
-        });
-    }
-
+    // Saves to the PENDING config, which only takes effect once a switchover is deployed / scheduled.
     private async updateConfig(updatedConfig: ServiceConfig): Promise<void> {
         const selectedServiceId = selectedServiceIdParam.value;
         if (!selectedServiceId) return;
@@ -153,7 +127,7 @@ export class ServiceDetailPage extends qreact.Component {
 
         Querysub.onCommitFinished(async () => {
             try {
-                await MachineServiceController(SocketFunction.browserNodeId()).setServiceConfigs.promise([updatedConfig]);
+                await MachineServiceController(SocketFunction.browserNodeId()).setPendingServiceConfigs.promise([updatedConfig]);
             } catch (error) {
                 Querysub.localCommit(() => {
                     this.state.saveError = error instanceof Error ? error.message : String(error);
@@ -168,6 +142,41 @@ export class ServiceDetailPage extends qreact.Component {
         });
     }
 
+    private runControllerAction(action: () => Promise<void>) {
+        Querysub.onCommitFinished(async () => {
+            try {
+                await action();
+            } catch (error) {
+                Querysub.localCommit(() => {
+                    this.state.saveError = error instanceof Error ? error.message : String(error);
+                });
+            }
+        });
+    }
+
+    private confirmForceDeployNow(serviceId: string, overlapTime: number) {
+        let modal: { close: () => void } | undefined;
+        modal = showModal({
+            content: <div className={css.fixed.pos(0, 0).size("100vw", "100vh").hsla(0, 0, 0, 0.5).display("flex").alignItems("center").justifyContent("center")}>
+                <div className={css.vbox(12).pad2(20).hsl(0, 0, 98).bord2(0, 0, 40) + " keepModalsOpen"}>
+                    <div className={css.boldStyle.fontSize(16)}>⚡ Force deploy now?</div>
+                    <div>The pending config becomes live immediately. The old instances are shut down right away, with no overlap.</div>
+                    <div className={css.hbox(10)}>
+                        <Button hue={0} onClick={() => {
+                            modal && modal.close();
+                            this.runControllerAction(() => MachineServiceController(SocketFunction.browserNodeId()).scheduleSwitchover.promise({
+                                serviceId,
+                                switchTime: Date.now(),
+                                overlapTime,
+                            }));
+                        }}>⚡ Force Deploy Now</Button>
+                        <Button onClick={() => modal && modal.close()}>Cancel</Button>
+                    </div>
+                </div>
+            </div>,
+        });
+    }
+
     render() {
         const selectedServiceId = selectedServiceIdParam.value;
         if (!selectedServiceId) return <div>No service selected</div>;
@@ -175,40 +184,21 @@ export class ServiceDetailPage extends qreact.Component {
         const gitInfo = MachineServiceController(SocketFunction.browserNodeId()).getGitInfo();
 
         let controller = MachineServiceController(SocketFunction.browserNodeId());
-        let originalConfig = controller.getServiceConfig(selectedServiceId);
+        const originalConfig = controller.getServiceConfig(selectedServiceId);
         let serviceConfigType = controller.getServiceConfigType();
+        let pendingConfig = controller.getPendingServiceConfig(selectedServiceId);
+        let switchover = controller.getServiceSwitchover(selectedServiceId);
 
         if (!originalConfig || !serviceConfigType) {
             if (controller.isAnyLoading()) return <div>Loading service...</div>;
             return <div>Service not found</div>;
         }
 
-        // Use unsaved changes if available, otherwise use original config
-        const config = this.state.unsavedChanges ? this.state.unsavedChanges : originalConfig;
+        // The editor shows unsaved edits, else the saved-but-not-deployed pending config, else the live config
+        const config = this.state.unsavedChanges || pendingConfig || originalConfig;
         const configT = config;
         const hasUnsavedChanges = !!this.state.unsavedChanges;
-
-        let rollingServiceCount = 0;
-        if (config.parameters.rollingWindow) {
-            let uniqueMachineIds = Array.from(new Set(config.machineIds));
-            for (let machineId of uniqueMachineIds) {
-                try {
-                    let machineInfo = controller.getMachineInfo(machineId);
-                    if (!machineInfo) continue;
-
-                    let applyNodeId = machineInfo.applyNodeId;
-                    let rollingInfo = MachineController(SocketFunction.browserNodeId()).getRollingServiceInfoFromBrowser({
-                        machineNodeId: applyNodeId,
-                        serviceKey: config.parameters.key,
-                    });
-                    if (rollingInfo) {
-                        rollingServiceCount += rollingInfo.length;
-                    }
-                } catch (e: any) {
-                    console.error(`Error getting rolling service info for machine ${machineId}: ${e.message}`);
-                }
-            }
-        }
+        const hasPendingConfig = !!pendingConfig;
 
         // Sort machines by status and heartbeat
         let nextIndexes = new Map<string, number>();
@@ -234,7 +224,7 @@ export class ServiceDetailPage extends qreact.Component {
             };
         });
         sort(machineStatuses, x => (x.isDisabled ? 3 : x.hasError ? 0 : x.isMachineDead ? 1 : 2) * 1000000 + x.heartbeat);
-        let now = Date.now();
+        let now = Querysub.nowDelayed(timeInSecond);
 
         let machines = (controller.getMachineList() || []).map(x => controller.getMachineInfo(x)).filter(isDefined);
         sort(machines, x => -x.heartbeat);
@@ -358,6 +348,11 @@ export class ServiceDetailPage extends qreact.Component {
                                 <div title={formatVeryNiceDateTime(machineInfo.heartbeat)}>
                                     Heartbeat: {formatTime(now - machineInfo.heartbeat)}
                                 </div>
+                                {switchover && (
+                                    <div className={css.colorhsl(35, 80, 40).fontWeight("bold")} title={formatVeryNiceDateTime(switchover.switchTime)}>
+                                        ⏻ Shuts down in {formatTime(switchover.switchTime - now)}
+                                    </div>
+                                )}
                                 {serviceInfo && (
                                     <>
                                         {!!serviceInfo.lastLaunchedTime && <div title={formatVeryNiceDateTime(serviceInfo.lastLaunchedTime)}>
@@ -482,22 +477,14 @@ export class ServiceDetailPage extends qreact.Component {
 
                 <button className={css.pad2(12, 8).button.bord2(0, 0, 20).hsl(0, 0, 80)}
                     onClick={() => {
-                        configT.parameters.poke = (configT.parameters.poke || 0) + 1;
-                        void this.updateConfigSynced(configT);
+                        // Poke bypasses the pending flow, as it exists to force an immediate restart of the LIVE config
+                        let live = deepCloneJSON(originalConfig);
+                        live.parameters.poke = (live.parameters.poke || 0) + 1;
+                        this.runControllerAction(() => controller.setServiceConfigs.promise([live]));
                     }}>
                     Poke
                 </button>
 
-                {!!configT.parameters.rollingWindow && rollingServiceCount > 0 && <button
-                    className={css.pad2(12, 8).button.bord2(0, 0, 20).hsl(0, 70, 90)}
-                    onClick={() => {
-                        void this.killAllRollingServices(config);
-                    }}
-                    disabled={this.state.isKillingRolling}
-                >
-                    {this.state.isKillingRolling ? "Killing..." : `💀 Kill ${rollingServiceCount} Rolling Service${rollingServiceCount === 1 ? "" : "s"}`}
-                </button>}
-
                 {hasUnsavedChanges && <>
                     <Button
                         flavor="noui"
@@ -511,7 +498,7 @@ export class ServiceDetailPage extends qreact.Component {
                             this.updateConfigSynced(this.state.unsavedChanges);
                         }
                         }>
-                        {this.state.isSaving ? "Saving..." : "Save"}
+                        {this.state.isSaving ? "Saving..." : "Save Pending"}
                     </Button>
                     <button
                         className={css.pad2(12, 8).button.bord2(0, 0, 20).hsl(50, 80, 50)}
@@ -543,7 +530,7 @@ export class ServiceDetailPage extends qreact.Component {
                 }
 
                 {this.state.isSaving && <div className={css.pad2(12, 8).bord2(0, 0, 20) + " rainbow-flash"}>
-                    Deploying changes
+                    Saving pending changes
                 </div>}
 
                 <div className={css.marginAuto}></div>
@@ -604,6 +591,105 @@ export class ServiceDetailPage extends qreact.Component {
                 </button>
             </div>
 
+            {(hasPendingConfig || switchover) && (() => {
+                let overlapSeconds = this.state.overlapOverride || Math.round((config.parameters.overlapTime || DEFAULT_OVERLAP_TIME) / timeInSecond);
+                let overlap = overlapSeconds * timeInSecond;
+                let scheduledTime = this.state.switchTime;
+                let notEnoughTime = !!scheduledTime && scheduledTime > now && scheduledTime - now < overlap;
+                return <div className={css.vbox(10).pad2(12).fillWidth.bord2(210, 60, 50).hsl(210, 40, 95)}>
+                    <div className={css.boldStyle.fontSize(15)}>
+                        {switchover && "🕐 Switchover scheduled" || "📝 Pending changes saved (not deployed)"}
+                    </div>
+                    {hasPendingConfig && <ConfigDiff base={originalConfig} next={config} />}
+                    {switchover && <div className={css.vbox(4)}>
+                        <div>
+                            Old instances shut down at <b>{formatVeryNiceDateTime(switchover.switchTime)}</b> (in {formatTime(switchover.switchTime - now)}), overlap {formatTime(switchover.overlapTime)}
+                        </div>
+                        <div>
+                            New instances start at <b>{formatVeryNiceDateTime(switchover.switchTime - switchover.overlapTime)}</b> {switchover.switchTime - switchover.overlapTime <= now && "(already running)" || `(in ${formatTime(switchover.switchTime - switchover.overlapTime - now)})`}
+                        </div>
+                        <div className={css.hbox(8)}>
+                            <button
+                                className={css.pad2(12, 8).button.bord2(0, 0, 20).hsl(0, 70, 90)}
+                                onClick={() => {
+                                    this.runControllerAction(() => controller.cancelSwitchover.promise(selectedServiceId));
+                                }}>
+                                Cancel Switchover
+                            </button>
+                        </div>
+                    </div>}
+                    {hasPendingConfig && !switchover && (() => {
+                        // The switch time is inferred from the overlap, unless one is explicitly set (in which case the overlap only controls when the new instances start)
+                        let effectiveSwitchTime = scheduledTime || now + overlap;
+                        return <div className={css.vbox(8)}>
+                            <div className={css.hbox(12).wrap}>
+                                <button
+                                    className={css.pad2(12, 8).button.bord2(0, 0, 20).hsl(120, 70, 85).fontWeight("bold")}
+                                    onClick={() => {
+                                        this.runControllerAction(() => controller.scheduleSwitchover.promise({
+                                            serviceId: selectedServiceId,
+                                            switchTime: scheduledTime || Date.now() + overlap,
+                                            overlapTime: overlap,
+                                        }));
+                                    }}>
+                                    🚀 Deploy
+                                </button>
+                                <div className={css.opacity(scheduledTime && 1 || 0.5)}>
+                                    <InputLabel
+                                        label="Switch at"
+                                        isDatetime
+                                        value={effectiveSwitchTime}
+                                        onChangeValue={value => {
+                                            this.state.switchTime = Number(value) || 0;
+                                        }}
+                                    />
+                                </div>
+                                <span>(in {formatTime(effectiveSwitchTime - now)})</span>
+                                {!!scheduledTime && <button
+                                    className={css.pad2(12, 8).button.bord2(0, 0, 20).hsl(0, 0, 90)}
+                                    onClick={() => {
+                                        this.state.switchTime = 0;
+                                    }}>
+                                    ↺ Reset to overlap-based time
+                                </button>}
+                                <div className={css.opacity(scheduledTime && 0.5 || 1)}>
+                                    <InputLabel
+                                        label="Overlap (seconds)"
+                                        integer
+                                        value={overlapSeconds}
+                                        onChangeValue={value => {
+                                            this.state.overlapOverride = Number(value) || 0;
+                                        }}
+                                    />
+                                </div>
+                            </div>
+                            {!!scheduledTime && scheduledTime <= now && <span className={css.colorhsl(0, 85, 45).fontWeight("bold")}>
+                                ⚠️ The switch time is in the past — deploying switches immediately
+                            </span>}
+                            {notEnoughTime && <span className={css.colorhsl(35, 85, 40).fontWeight("bold")}>
+                                ⚠️ The switch time is sooner than the overlap ({formatTime(overlap)}) — the new instances won't be fully started before the old ones shut down
+                            </span>}
+                            <div className={css.hbox(8)}>
+                                <button
+                                    className={css.pad2(12, 8).button.bord2(0, 70, 40).hsl(0, 70, 90)}
+                                    onClick={() => {
+                                        this.confirmForceDeployNow(selectedServiceId, overlap);
+                                    }}>
+                                    ⚡ Force Deploy Now
+                                </button>
+                                <button
+                                    className={css.pad2(12, 8).button.bord2(0, 0, 20).hsl(50, 80, 60)}
+                                    onClick={() => {
+                                        this.runControllerAction(() => controller.discardPendingServiceConfig.promise(selectedServiceId));
+                                    }}>
+                                    Discard Pending Config
+                                </button>
+                            </div>
+                        </div>;
+                    })()}
+                </div>;
+            })()}
+
             {this.state.saveError && (
                 <div className={css.pad2(12).bord2(0, 80, 50).hsl(0, 80, 95).colorhsl(0, 80, 30)}>
                     ⚠️ Error: {this.state.saveError}
@@ -621,4 +707,47 @@ export class ServiceDetailPage extends qreact.Component {
             />
         </div>;
     }
-} 
+}
+
+// An inline diff of the live config vs the config being deployed, so it's clear exactly what a switchover will change.
+class ConfigDiff extends qreact.Component<{ base: ServiceConfig; next: ServiceConfig }> {
+    render() {
+        let baseValues = new Map<string, unknown>();
+        let nextValues = new Map<string, unknown>();
+        flattenConfigValues(this.props.base, "", baseValues);
+        flattenConfigValues(this.props.next, "", nextValues);
+        let keys = Array.from(new Set([...baseValues.keys(), ...nextValues.keys()]));
+        sort(keys, x => x);
+        let changed = keys.filter(key =>
+            // The save time always changes on save, so it would just be noise
+            key !== "info.lastUpdatedTime"
+            && JSON.stringify(baseValues.get(key)) !== JSON.stringify(nextValues.get(key))
+        );
+        if (changed.length === 0) {
+            return <div className={css.colorhsl(0, 0, 50)}>(no changes from the live config)</div>;
+        }
+        return <div className={css.vbox(2).fontFamily("monospace").fontSize(13)}>
+            {changed.map(key => <div className={css.hbox(6).wrap}>
+                <span className={css.boldStyle}>{key}:</span>
+                {baseValues.has(key) && <span className={css.colorhsl(0, 70, 40).textDecoration("line-through")}>{formatDiffValue(baseValues.get(key))}</span>}
+                {nextValues.has(key) && <span className={css.colorhsl(120, 60, 30)}>{formatDiffValue(nextValues.get(key))}</span> || <span className={css.colorhsl(0, 70, 40)}>(removed)</span>}
+            </div>)}
+        </div>;
+    }
+}
+function flattenConfigValues(obj: unknown, prefix: string, out: Map<string, unknown>) {
+    if (obj && typeof obj === "object" && !Array.isArray(obj)) {
+        for (let [key, value] of Object.entries(obj as { [key: string]: unknown })) {
+            flattenConfigValues(value, prefix && prefix + "." + key || key, out);
+        }
+        return;
+    }
+    out.set(prefix, obj);
+}
+function formatDiffValue(value: unknown): string {
+    let result = JSON.stringify(value);
+    if (result === undefined) {
+        return "undefined";
+    }
+    return result;
+}

package/src/deployManager/components/ServicesListPage.tsx

@@ -1,6 +1,6 @@
 import { SocketFunction } from "socket-function/SocketFunction";
 import { qreact } from "../../4-dom/qreact";
-import { MachineServiceController, ServiceConfig } from "../machineSchema";
+import { DEFAULT_OVERLAP_TIME, MachineServiceController, ServiceConfig } from "../machineSchema";
 import { css } from "typesafecss";
 import { t } from "../../2-proxy/schema2";
 import { Querysub } from "../../4-querysub/Querysub";
@@ -55,7 +55,7 @@ export class ServicesListPage extends qreact.Component {
                                     gitRef: gitInfo.latestRef,
                                     command: "ping 1.1.1.1",
                                     deploy: false,
-                                    rollingWindow: 0,
+                                    overlapTime: DEFAULT_OVERLAP_TIME,
                                 },
                                 info: {
                                     title: `New Service created at ${formatNiceDateTime(Date.now())}`,
@@ -138,7 +138,7 @@ export class ServicesListPage extends qreact.Component {
                                 </div>
                                 <div className={css.vbox(4)}>
                                     <div>Updated {formatDateJSX(config.info.lastUpdatedTime)} AGO</div>
-                                    {config.parameters.rollingWindow && <div className={css.colorhsl(0, 50, 50).fontSize(14).fontWeight("bold")}>Rolling window: {formatTime(config.parameters.rollingWindow)}</div> || undefined}
+                                    {config.parameters.overlapTime && <div className={css.colorhsl(210, 50, 50).fontSize(14).fontWeight("bold")}>Switchover overlap: {formatTime(config.parameters.overlapTime)}</div> || undefined}
                                 </div>
                             </div>
                         </Anchor>