querysub 0.508.0 → 0.509.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";
@@ -12,7 +12,7 @@ import { deepCloneJSON, nextId, sort } 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";
@@ -42,7 +42,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),
+        // Milliseconds; 0 means use the service's configured overlapTime
+        overlapOverride: t.number(0),
     });
 
 
@@ -109,37 +112,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 +126,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 +141,18 @@ 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);
+                });
+            }
+        });
+    }
+
     render() {
         const selectedServiceId = selectedServiceIdParam.value;
         if (!selectedServiceId) return <div>No service selected</div>;
@@ -175,40 +160,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>();
@@ -358,6 +324,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 +453,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 +474,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)}
@@ -604,6 +567,97 @@ export class ServiceDetailPage extends qreact.Component {
                 </button>
             </div>
 
+            {(hasPendingConfig || switchover) && (() => {
+                let overlap = this.state.overlapOverride || config.parameters.overlapTime || DEFAULT_OVERLAP_TIME;
+                let scheduledTime = this.state.switchTime;
+                let notEnoughTime = !!scheduledTime && 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>
+                    {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 && <div className={css.vbox(8)}>
+                        <div className={css.hbox(12).wrap}>
+                            <InputLabel
+                                label={`Overlap (ms, default ${formatTime(config.parameters.overlapTime || DEFAULT_OVERLAP_TIME)})`}
+                                number
+                                value={this.state.overlapOverride || ""}
+                                onChangeValue={value => {
+                                    this.state.overlapOverride = Number(value) || 0;
+                                }}
+                            />
+                            <span>Effective overlap: {formatTime(overlap)}</span>
+                        </div>
+                        <div className={css.hbox(12).wrap}>
+                            <button
+                                className={css.pad2(12, 8).button.bord2(0, 0, 20).hsl(120, 70, 85).fontWeight("bold")}
+                                onClick={() => {
+                                    let switchTime = Date.now() + overlap;
+                                    this.runControllerAction(() => controller.scheduleSwitchover.promise({
+                                        serviceId: selectedServiceId,
+                                        switchTime,
+                                        overlapTime: overlap,
+                                    }));
+                                }}>
+                                🚀 Deploy Now (switch in {formatTime(overlap)})
+                            </button>
+                            <InputLabel
+                                label="Switch at"
+                                isDatetime
+                                value={this.state.switchTime}
+                                onChangeValue={value => {
+                                    this.state.switchTime = Number(value) || 0;
+                                }}
+                            />
+                            {!!scheduledTime && <span>
+                                {scheduledTime > now && `in ${formatTime(scheduledTime - now)}` || "in the past!"}
+                            </span>}
+                            {notEnoughTime && <span className={css.colorhsl(35, 85, 40).fontWeight("bold")}>
+                                ⚠️ Not enough time for the full overlap ({formatTime(overlap)}) — the new instances won't be fully started before the old ones shut down
+                            </span>}
+                            <button
+                                className={css.pad2(12, 8).button.bord2(0, 0, 20).hsl(120, 70, 90)}
+                                disabled={!scheduledTime}
+                                onClick={() => {
+                                    if (!scheduledTime) return;
+                                    this.runControllerAction(() => controller.scheduleSwitchover.promise({
+                                        serviceId: selectedServiceId,
+                                        switchTime: scheduledTime,
+                                        overlapTime: overlap,
+                                    }));
+                                }}>
+                                🕐 Schedule Switchover
+                            </button>
+                        </div>
+                        <div className={css.hbox(8)}>
+                            <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}

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>