querysub 0.509.0 → 0.511.0

package/src/deployManager/components/ServiceDetailPage.tsx

@@ -1,14 +1,14 @@
 import { SocketFunction } from "socket-function/SocketFunction";
 import { qreact } from "../../4-dom/qreact";
-import { DEFAULT_OVERLAP_TIME, MACHINE_RESYNC_INTERVAL, MachineServiceController, ServiceConfig } from "../machineSchema";
+import { DEFAULT_OVERLAP_TIME, MACHINE_RESYNC_INTERVAL, MachineServiceController, ServiceConfig, ServiceParameters, getLiveServiceParameters, stripReleaseState } from "../machineSchema";
 import { css } from "typesafecss";
 import { t } from "../../2-proxy/schema2";
 import { Querysub } from "../../4-querysub/Querysub";
 import { currentViewParam, selectedServiceIdParam, selectedMachineIdParam } from "../urlParams";
-import { formatTime, formatVeryNiceDateTime } from "socket-function/src/formatting/format";
+import { formatDateTimeDetailed, 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";
@@ -26,13 +26,15 @@ 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";
 
 
 
 export class ServiceDetailPage extends qreact.Component {
     state = t.state({
-        unsavedChanges: t.type<ServiceConfig | undefined>(undefined),
-        isSaving: t.type(false),
+        // The editor's current value. Purely in the browser — nothing is written anywhere until a deploy is scheduled (or forced). Whether there are unsaved changes is DERIVED by comparing this to the deployed config, never tracked separately.
+        editorState: t.type<ServiceConfig | undefined>(undefined),
+        isDeploying: t.type(false),
         saveError: t.string,
         expandedErrors: t.lookup({
             expanded: t.type(false)
@@ -44,21 +46,18 @@ export class ServiceDetailPage extends qreact.Component {
         }),
         // 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
+        // Seconds; 0 means use the service's configured overlapTime
         overlapOverride: t.number(0),
     });
 
 
 
-    private updateUnsavedChanges(updatedConfig: ServiceConfig) {
+    private updateEditorState(updatedConfig: ServiceConfig) {
+        // Clone, so the editor state never shares objects with (or mutates) the fetched config
+        updatedConfig = deepCloneJSON(updatedConfig);
         // Do not let them update the serviceId, as that would break things
         updatedConfig.serviceId = selectedServiceIdParam.value;
-        this.state.unsavedChanges = updatedConfig;
-    }
-    private updateConfigSynced(updatedConfig: ServiceConfig) {
-        Querysub.onCommitFinished(() => {
-            void this.updateConfig(updatedConfig);
-        });
+        this.state.editorState = updatedConfig;
     }
 
     private async startWatchingOutput(config: {
@@ -112,30 +111,23 @@ export class ServiceDetailPage extends qreact.Component {
         });
     }
 
-    // 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;
-
-        Querysub.commit(() => {
-            // Do not let them update the serviceId, as that would break things
-            updatedConfig.serviceId = selectedServiceIdParam.value;
-            this.state.isSaving = true;
-            this.state.saveError = "";
-        });
-
-        Querysub.onCommitFinished(async () => {
+    // Deploys the editor's config (with parameters.releaseTime deciding when it goes live). The editor is NEVER reset — it is set to exactly what was deployed, so it keeps its content and simply compares as having no unsaved changes.
+    private deployConfig(deployConfig: ServiceConfig) {
+        // Do not let them update the serviceId, as that would break things
+        deployConfig.serviceId = selectedServiceIdParam.value;
+        this.state.saveError = "";
+        this.state.isDeploying = true;
+        this.runControllerAction(async () => {
             try {
-                await MachineServiceController(SocketFunction.browserNodeId()).setPendingServiceConfigs.promise([updatedConfig]);
-            } catch (error) {
-                Querysub.localCommit(() => {
-                    this.state.saveError = error instanceof Error ? error.message : String(error);
-                    this.state.unsavedChanges = undefined;
+                await MachineServiceController(SocketFunction.browserNodeId()).setServiceConfigs.promise([deployConfig]);
+                Querysub.commit(() => {
+                    this.state.editorState = stripReleaseState(deployConfig);
+                    this.state.switchTime = 0;
+                    this.state.overlapOverride = 0;
                 });
             } finally {
-                Querysub.localCommit(() => {
-                    this.state.unsavedChanges = undefined;
-                    this.state.isSaving = false;
+                Querysub.commit(() => {
+                    this.state.isDeploying = false;
                 });
             }
         });
@@ -149,10 +141,33 @@ export class ServiceDetailPage extends qreact.Component {
                 Querysub.localCommit(() => {
                     this.state.saveError = error instanceof Error ? error.message : String(error);
                 });
+            } finally {
+                // The write => read invalidation keys should also cover this, but explicitly re-request the config as well, so the UI always reflects what the server now has (only AFTER the action fully finishes, so we can't refetch a value from before our write committed)
+                MachineServiceController(SocketFunction.browserNodeId()).getServiceConfig.refresh(selectedServiceIdParam.value);
             }
         });
     }
 
+    private confirmForceDeployNow(deployConfig: ServiceConfig) {
+        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>This 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();
+                            deployConfig.parameters.releaseTime = undefined;
+                            this.deployConfig(deployConfig);
+                        }}>⚡ 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>;
@@ -162,23 +177,33 @@ export class ServiceDetailPage extends qreact.Component {
         let controller = MachineServiceController(SocketFunction.browserNodeId());
         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>;
         }
 
-        // 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;
-        const hasPendingConfig = !!pendingConfig;
+        // Parameters that were deployed but haven't gone live yet
+        const scheduledDeploy = (() => {
+            let releaseTime = originalConfig.parameters.releaseTime || 0;
+            if (!releaseTime || Date.now() >= releaseTime || !originalConfig.oldParameters) return undefined;
+            return {
+                switchTime: releaseTime,
+                overlapTime: originalConfig.parameters.overlapTime || DEFAULT_OVERLAP_TIME,
+            };
+        })();
+
+        // The editor shows its own value, else the latest deployed config. Editor values for a DIFFERENT service are ignored (they linger in state when switching services).
+        const deployedConfig = stripReleaseState(originalConfig);
+        const editorState = this.state.editorState && this.state.editorState.serviceId === selectedServiceId && this.state.editorState || undefined;
+        const config = editorState || deployedConfig;
+        // Unsaved changes are DERIVED by comparing the editor's value to the deployed config (so editing something back to its deployed value counts as no change)
+        const hasUnsavedChanges = !!editorState && configCompareKey(editorState) !== configCompareKey(deployedConfig);
 
         // Sort machines by status and heartbeat
         let nextIndexes = new Map<string, number>();
-        let machineStatuses = config.machineIds.map(machineId => {
+        let machineIds = config.parameters.machineIds || [];
+        let machineStatuses = machineIds.map(machineId => {
             let index = nextIndexes.get(machineId) || 0;
             nextIndexes.set(machineId, index + 1);
             let machineInfo = controller.getMachineInfo(machineId);
@@ -200,7 +225,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);
@@ -244,38 +269,64 @@ export class ServiceDetailPage extends qreact.Component {
                     fillWidth
                     value={config.info.title}
                     onChangeValue={value => {
-                        configT.info.title = value;
-                        this.updateUnsavedChanges(configT);
+                        config.info.title = value;
+                        this.updateEditorState(config);
                     }}
                 />
                 <InputLabel
                     label="Key"
                     value={config.parameters.key}
                     onChangeValue={value => {
-                        configT.parameters.key = value;
-                        this.updateUnsavedChanges(configT);
+                        config.parameters.key = value;
+                        this.updateEditorState(config);
                     }}
                 />
+                <div className={css.fillWidth}>
+                    <InputLabel
+                        label="Notes"
+                        textarea
+                        fillWidth
+                        value={config.info.notes}
+                        onChangeValue={value => {
+                            config.info.notes = value;
+                            this.updateEditorState(config);
+                        }}
+                    />
+                </div>
             </div>
 
             <MachinePicker
                 label="Machines"
-                picked={config.machineIds}
+                picked={machineIds}
                 addPicked={machineId => {
-                    configT.machineIds.push(machineId);
-                    this.updateUnsavedChanges(configT);
+                    let updated = deepCloneJSON(config);
+                    updated.parameters.machineIds = [...(updated.parameters.machineIds || []), machineId];
+                    this.updateEditorState(updated);
                 }}
                 removePicked={machineId => {
-                    let index = configT.machineIds.indexOf(machineId);
+                    let updated = deepCloneJSON(config);
+                    let updatedMachineIds = updated.parameters.machineIds || [];
+                    let index = updatedMachineIds.indexOf(machineId);
                     if (index !== -1) {
-                        configT.machineIds.splice(index, 1);
+                        updatedMachineIds.splice(index, 1);
                     }
-                    this.updateUnsavedChanges(configT);
+                    updated.parameters.machineIds = updatedMachineIds;
+                    this.updateEditorState(updated);
+                }}
+            />
+            <InputLabel
+                label="Deploy overlap (seconds)"
+                integer
+                value={Math.round((config.parameters.overlapTime || DEFAULT_OVERLAP_TIME) / timeInSecond)}
+                onChangeValue={value => {
+                    let updated = deepCloneJSON(config);
+                    updated.parameters.overlapTime = (Number(value) || 0) * timeInSecond;
+                    this.updateEditorState(updated);
                 }}
             />
             {/* Machine Status */}
-            {configT.parameters.deploy && <div className={css.vbox(8).fillWidth}>
-                <h3>Deployed Machines ({config.machineIds.length})</h3>
+            {config.parameters.deploy && <div className={css.vbox(8).fillWidth}>
+                <h3>Deployed Machines ({machineIds.length})</h3>
                 <div className={css.vbox(4).fillWidth}>
                     {machineStatuses.map(({ machineId, machineInfo, serviceInfo, isMachineDead, hasError, isDisabled, index }) => {
                         if (!machineInfo) return <div key={machineId}>Loading {machineId}...</div>;
@@ -324,9 +375,9 @@ 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)}
+                                {scheduledDeploy && (
+                                    <div className={css.colorhsl(35, 80, 40).fontWeight("bold")} title={formatVeryNiceDateTime(scheduledDeploy.switchTime)}>
+                                        ⏻ Shuts down in {formatTime(scheduledDeploy.switchTime - now)}
                                     </div>
                                 )}
                                 {serviceInfo && (
@@ -439,58 +490,38 @@ export class ServiceDetailPage extends qreact.Component {
 
             <div className={css.hbox(12).fillWidth}>
                 <button className={css.pad2(12, 8).button.bord2(0, 0, 20)
-                    + (configT.parameters.deploy ? css.hsl(0, 70, 90) : css.hsl(120, 70, 90))}
+                    + (config.parameters.deploy ? css.hsl(0, 70, 90) : css.hsl(120, 70, 90))}
                     onClick={() => {
                         if (!selectedServiceId || !config) return;
 
-                        const newDeployStatus = !config.parameters.deploy;
-
-                        configT.parameters.deploy = newDeployStatus;
-                        void this.updateUnsavedChanges(configT);
+                        let updated = deepCloneJSON(config);
+                        updated.parameters.deploy = !config.parameters.deploy;
+                        this.updateEditorState(updated);
                     }}>
-                    {configT.parameters.deploy ? "⏸️ Disable" : "🚀 Enable"}
+                    {config.parameters.deploy ? "⏸️ Disable" : "🚀 Enable"}
                 </button>
 
-                <button className={css.pad2(12, 8).button.bord2(0, 0, 20).hsl(0, 0, 80)}
+                {originalConfig.oldParameters && <button
+                    className={css.pad2(12, 8).button.bord2(0, 0, 20).hsl(35, 70, 85)}
+                    title="Loads the previous deploy's parameters into the editor, so you can schedule them as a new deploy"
                     onClick={() => {
-                        // 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]));
+                        const oldParameters = originalConfig.oldParameters;
+                        if (!oldParameters) return;
+                        this.updateEditorState({
+                            ...stripReleaseState(originalConfig),
+                            parameters: { ...oldParameters, releaseTime: undefined },
+                        });
                     }}>
-                    Poke
-                </button>
-
-                {hasUnsavedChanges && <>
-                    <Button
-                        flavor="noui"
-                        hotkeys={["global+ctrl+s"]}
-                        showHotkeys
-                        className={
-                            css.pad2(12, 8).button.bord2(0, 0, 20).hbox(0).hsl(120, 70, 90)
-                        }
-                        onClick={() => {
-                            if (!hasUnsavedChanges || !selectedServiceId || !this.state.unsavedChanges) return;
-                            this.updateConfigSynced(this.state.unsavedChanges);
-                        }
-                        }>
-                        {this.state.isSaving ? "Saving..." : "Save Pending"}
-                    </Button>
-                    <button
-                        className={css.pad2(12, 8).button.bord2(0, 0, 20).hsl(50, 80, 50)}
-                        onClick={() => {
-                            this.state.unsavedChanges = undefined;
-                        }}>
-                        Discard Changes
-                    </button>
-                </>}
+                    ↩️ Revert to Previous Deploy
+                </button>}
 
                 {gitInfo?.repoUrl === config.parameters.repoUrl && gitInfo.latestRef !== config.parameters.gitRef &&
                     <button
                         className={buttonStyle.hsl(120, 70, 90).alignSelf("stretch")}
-                        onClick={async () => {
-                            configT.parameters.gitRef = gitInfo.latestRef;
-                            this.updateUnsavedChanges(configT);
+                        onClick={() => {
+                            let updated = deepCloneJSON(config);
+                            updated.parameters.gitRef = gitInfo.latestRef;
+                            this.updateEditorState(updated);
                         }}
                     >
                         <b>Update to New</b>
@@ -505,10 +536,6 @@ export class ServiceDetailPage extends qreact.Component {
                     </button>
                 }
 
-                {this.state.isSaving && <div className={css.pad2(12, 8).bord2(0, 0, 20) + " rainbow-flash"}>
-                    Deploying changes
-                </div>}
-
                 <div className={css.marginAuto}></div>
 
                 <button className={css.pad2(12, 8).button.bord2(0, 0, 20).hsl(110, 70, 90)}
@@ -526,7 +553,7 @@ export class ServiceDetailPage extends qreact.Component {
                                 await controller.addServiceConfig.promise(newServiceId, clonedConfig);
                                 Querysub.commit(() => {
                                     selectedServiceIdParam.value = newServiceId;
-                                    this.state.unsavedChanges = undefined;
+                                    this.state.editorState = undefined;
                                 });
                             } catch (error) {
                                 Querysub.localCommit(() => {
@@ -542,7 +569,7 @@ export class ServiceDetailPage extends qreact.Component {
                     onClick={() => {
                         if (!selectedServiceId) return;
 
-                        const confirmed = confirm(`⚠️ WARNING: This will permanently delete the service "${configT.info.title}" and remove it from all machines.\n\nThis action cannot be undone. Are you sure you want to continue?`);
+                        const confirmed = confirm(`⚠️ WARNING: This will permanently delete the service "${config.info.title}" and remove it from all machines.\n\nThis action cannot be undone. Are you sure you want to continue?`);
                         if (!confirmed) return;
 
                         Querysub.onCommitFinished(async () => {
@@ -556,10 +583,6 @@ export class ServiceDetailPage extends qreact.Component {
                                 Querysub.localCommit(() => {
                                     this.state.saveError = error instanceof Error ? error.message : String(error);
                                 });
-                            } finally {
-                                Querysub.localCommit(() => {
-                                    this.state.isSaving = false;
-                                });
                             }
                         });
                     }}>
@@ -567,94 +590,124 @@ export class ServiceDetailPage extends qreact.Component {
                 </button>
             </div>
 
-            {(hasPendingConfig || switchover) && (() => {
-                let overlap = this.state.overlapOverride || config.parameters.overlapTime || DEFAULT_OVERLAP_TIME;
+            {/* The deploy that is scheduled on the SERVER — completely independent from any editor changes below */}
+            {scheduledDeploy && <div className={css.vbox(10).pad2(12).fillWidth.bord2(210, 60, 50).hsl(210, 40, 95)}>
+                <div className={css.boldStyle.fontSize(15)}>
+                    🕐 Deploy scheduled for {formatTime(scheduledDeploy.switchTime - now)} ({formatDateTimeDetailed(scheduledDeploy.switchTime)})
+                </div>
+                <ParametersDiff base={getLiveServiceParameters(originalConfig)} next={originalConfig.parameters} />
+                <div className={css.vbox(4)}>
+                    <div>
+                        Live instance deployed at {scheduledDeploy.switchTime - scheduledDeploy.overlapTime <= now && `${formatTime(now - (scheduledDeploy.switchTime - scheduledDeploy.overlapTime))} ago` || `in ${formatTime(scheduledDeploy.switchTime - scheduledDeploy.overlapTime - now)}`} ({formatDateTimeDetailed(scheduledDeploy.switchTime - scheduledDeploy.overlapTime)})
+                    </div>
+                    <div className={css.hbox(8)}>
+                        <button
+                            className={css.pad2(12, 8).button.bord2(0, 0, 20).hsl(0, 70, 90)}
+                            onClick={() => {
+                                this.runControllerAction(async () => {
+                                    let cancelled = await controller.cancelScheduledDeploy.promise(selectedServiceId);
+                                    // Keep the cancelled changes in the editor, so they aren't lost (Discard Changes drops them)
+                                    Querysub.commit(() => {
+                                        this.state.editorState = cancelled;
+                                    });
+                                });
+                            }}>
+                            Cancel Scheduled Deploy
+                        </button>
+                    </div>
+                </div>
+            </div>}
+
+            {/* The EDITOR's changes (browser-only) — deploying them schedules a (new) deploy */}
+            {(() => {
+                if (!hasUnsavedChanges) return undefined;
+                let liveParameters = getLiveServiceParameters(originalConfig);
+                // Only parameter changes need a release; info-only edits just save immediately
+                let parametersChanged = JSON.stringify({ ...config.parameters, releaseTime: undefined }) !== JSON.stringify({ ...liveParameters, releaseTime: undefined });
+                if (!parametersChanged) {
+                    return <div className={css.hbox(12)}>
+                        <button
+                            className={css.pad2(12, 8).button.bord2(0, 0, 20).hsl(120, 70, 85).fontWeight("bold")}
+                            disabled={this.state.isDeploying}
+                            onClick={() => {
+                                this.deployConfig(deepCloneJSON(config));
+                            }}>
+                            {this.state.isDeploying && "⏳ Saving..." || "💾 Save"}
+                        </button>
+                        <span title={`${configCompareKey(config)} !== ${configCompareKey(deployedConfig)}`}>Only the title / notes changed, so this saves immediately</span>
+                    </div>;
+                }
+                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 < overlap;
-                return <div className={css.vbox(10).pad2(12).fillWidth.bord2(210, 60, 50).hsl(210, 40, 95)}>
+                let notEnoughTime = !!scheduledTime && scheduledTime > now && scheduledTime - now < overlap;
+                const makeDeployConfig = (releaseTime: number) => {
+                    let deployConfig = deepCloneJSON(config);
+                    deployConfig.parameters.releaseTime = releaseTime;
+                    deployConfig.parameters.overlapTime = overlap;
+                    return deployConfig;
+                };
+                // 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(10).pad2(12).fillWidth.bord2(45, 70, 45).hsl(45, 60, 95)}>
                     <div className={css.boldStyle.fontSize(15)}>
-                        {switchover && "🕐 Switchover scheduled" || "📝 Pending changes saved (not deployed)"}
+                        ✏️ Edited (only in this browser, until 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}>
+                    <ParametersDiff base={liveParameters} next={config.parameters} />
+                    <div className={css.hbox(12).wrap}>
+                        <button
+                            className={css.pad2(12, 8).button.bord2(0, 0, 20).hsl(120, 70, 85).fontWeight("bold")}
+                            disabled={this.state.isDeploying}
+                            onClick={() => {
+                                this.deployConfig(makeDeployConfig(scheduledTime || Date.now() + overlap));
+                            }}>
+                            {this.state.isDeploying && "⏳ Scheduling..." || scheduledDeploy && "🔁 Replace Scheduled Deploy" || "🚀 Schedule Deploy"}
+                        </button>
+                        <div className={css.opacity(scheduledTime && 1 || 0.5)}>
                             <InputLabel
-                                label={`Overlap (ms, default ${formatTime(config.parameters.overlapTime || DEFAULT_OVERLAP_TIME)})`}
-                                number
-                                value={this.state.overlapOverride || ""}
+                                label="Switch at"
+                                isDatetime
+                                value={effectiveSwitchTime}
                                 onChangeValue={value => {
-                                    this.state.overlapOverride = Number(value) || 0;
+                                    this.state.switchTime = 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>
+                        <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="Switch at"
-                                isDatetime
-                                value={this.state.switchTime}
+                                label="Overlap (seconds)"
+                                integer
+                                value={overlapSeconds}
                                 onChangeValue={value => {
-                                    this.state.switchTime = Number(value) || 0;
+                                    this.state.overlapOverride = 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>
+                    {!!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)}
+                            disabled={this.state.isDeploying}
+                            onClick={() => {
+                                this.confirmForceDeployNow(makeDeployConfig(0));
+                            }}>
+                            ⚡ Force Deploy Now
+                        </button>
+                    </div>
                 </div>;
             })()}
 
@@ -668,11 +721,84 @@ export class ServiceDetailPage extends qreact.Component {
             <TypedConfigEditor
                 value={config}
                 onValueChange={(newValue) => {
-                    this.state.unsavedChanges = newValue as ServiceConfig;
+                    this.updateEditorState(newValue as ServiceConfig);
                 }}
                 typeDefinition={serviceConfigType}
                 sizeClassName={css.size(1000, 600)}
             />
+            {hasUnsavedChanges && <button
+                className={css.pad2(12, 8).button.bord2(0, 0, 20).hsl(50, 80, 50)}
+                onClick={() => {
+                    this.state.editorState = undefined;
+                }}>
+                Discard Changes
+            </button>}
         </div>;
     }
-} 
+}
+
+// An inline diff of the live parameters vs the parameters in the editor / scheduled to deploy, so it's clear exactly what deploying will change.
+class ParametersDiff extends qreact.Component<{ base: ServiceParameters; next: ServiceParameters }> {
+    state = t.state({
+        showRaw: t.type(false),
+    });
+    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 release time is displayed separately, so it would just be noise
+            key !== "releaseTime"
+            && JSON.stringify(baseValues.get(key)) !== JSON.stringify(nextValues.get(key))
+        );
+        return <div className={css.vbox(4).fillWidth}>
+            {changed.length === 0 && <div className={css.colorhsl(0, 0, 50)}>(no parameter changes from the live parameters)</div> || <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>}
+            <div className={css.hbox(8)}>
+                <button
+                    className={css.pad2(8, 4).button.bord2(0, 0, 30).hsl(0, 0, 92)}
+                    onClick={() => this.state.showRaw = !this.state.showRaw}>
+                    {this.state.showRaw && "🧾 Hide Raw Parameters" || "🧾 Show Raw Parameters"}
+                </button>
+            </div>
+            {this.state.showRaw && <div className={css.hbox(24).wrap.alignItems("start")}>
+                <div className={css.vbox(2)}>
+                    <div className={css.boldStyle}>Live</div>
+                    <div className={css.fontFamily("monospace").fontSize(12).whiteSpace("pre-wrap")}>{JSON.stringify(this.props.base, undefined, 2)}</div>
+                </div>
+                <div className={css.vbox(2)}>
+                    <div className={css.boldStyle}>New</div>
+                    <div className={css.fontFamily("monospace").fontSize(12).whiteSpace("pre-wrap")}>{JSON.stringify(this.props.next, undefined, 2)}</div>
+                </div>
+            </div>}
+        </div>;
+    }
+}
+// The save time is set by the server on every save, so it would make every editor value read as changed
+function configCompareKey(config: ServiceConfig): string {
+    return JSON.stringify({ ...config, info: { ...config.info, lastUpdatedTime: 0 } });
+}
+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;
+}