querysub 0.509.0 → 0.510.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "querysub",
-  "version": "0.509.0",
+  "version": "0.510.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/ServiceDetailPage.tsx

@@ -8,7 +8,7 @@ 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";
@@ -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";
 
 
 
@@ -44,7 +45,7 @@ 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),
     });
 
@@ -153,6 +154,29 @@ export class ServiceDetailPage extends qreact.Component {
         });
     }
 
+    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>;
@@ -200,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);
@@ -506,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>
@@ -568,13 +592,15 @@ export class ServiceDetailPage extends qreact.Component {
             </div>
 
             {(hasPendingConfig || switchover) && (() => {
-                let overlap = this.state.overlapOverride || config.parameters.overlapTime || DEFAULT_OVERLAP_TIME;
+                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;
+                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)}
@@ -592,69 +618,75 @@ export class ServiceDetailPage extends qreact.Component {
                             </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!"}
+                    {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")}>
-                                ⚠️ Not enough time for the full overlap ({formatTime(overlap)}) — the new instances won't be fully started before the old ones shut down
+                                ⚠️ 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>}
-                            <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 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>;
             })()}
 
@@ -675,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/machineSchema.ts

@@ -96,7 +96,7 @@ export type ServiceConfig = {
     };
 };
 
-export const DEFAULT_OVERLAP_TIME = timeInMinute;
+export const DEFAULT_OVERLAP_TIME = timeInMinute * 10;
 
 export type ServiceSwitchover = {
     serviceId: string;