querysub 0.512.0 → 0.514.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "querysub",
-  "version": "0.512.0",
+  "version": "0.514.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/deployButtons.tsx

@@ -1,11 +1,14 @@
 import { SocketFunction } from "socket-function/SocketFunction";
 import { qreact } from "../../4-dom/qreact";
+import { t } from "../../2-proxy/schema2";
+import { Querysub } from "../../4-querysub/Querysub";
 import { DEFAULT_OVERLAP_TIME, MachineServiceController, MachineInfo, ServiceConfig } from "../machineSchema";
 import { showFullscreenModal } from "../../5-diagnostics/FullscreenModal";
 import { css } from "../../4-dom/css";
 import { formatTime } from "socket-function/src/formatting/format";
 import { formatDateJSX } from "../../misc/formatJSX";
 import { MachineController } from "../machineController";
+import { deepCloneJSON } from "socket-function/src/misc";
 import { unique } from "../../misc";
 import { CommitModal } from "./CommitModal";
 
@@ -39,6 +42,9 @@ export const buttonStyle = css.pad2(12, 8).button.bord2(0, 0, 20).fontWeight("bo
 export class UpdateButtons extends qreact.Component<{
     services: ServiceConfig[];
 }> {
+    state = t.state({
+        isDeploying: t.type(false),
+    });
     render() {
         let controller = MachineServiceController(SocketFunction.browserNodeId());
         const gitInfo = controller.getGitInfo();
@@ -94,18 +100,31 @@ export class UpdateButtons extends qreact.Component<{
             {outdatedServices.length > 0 && gitInfo &&
                 <button
                     className={buttonStyle.hsl(120, 70, 90)}
-                    onClick={async () => {
-                        for (let service of outdatedServices) {
-                            service.parameters.gitRef = gitInfo.latestRef;
+                    disabled={this.state.isDeploying}
+                    onClick={() => {
+                        this.state.isDeploying = true;
+                        // Props are synchronized state, so everything the async work needs is cloned into plain locals HERE, in the synced part
+                        let toDeploy = outdatedServices.map(service => {
+                            let updated = deepCloneJSON(service);
+                            updated.parameters.gitRef = gitInfo.latestRef;
                             // Release with the configured overlap, so the new instances are running before the old ones shut down
-                            let overlap = service.parameters.overlapTime || DEFAULT_OVERLAP_TIME;
-                            service.parameters.releaseTime = Date.now() + overlap;
-                        }
-                        await controller.setServiceConfigs.promise(outdatedServices);
+                            let overlap = updated.parameters.overlapTime || DEFAULT_OVERLAP_TIME;
+                            updated.parameters.releaseTime = Date.now() + overlap;
+                            return updated;
+                        });
+                        Querysub.onCommitFinished(async () => {
+                            try {
+                                await controller.setServiceConfigs.promise(toDeploy);
+                            } finally {
+                                Querysub.commit(() => {
+                                    this.state.isDeploying = false;
+                                });
+                            }
+                        });
                     }}
                 >
                     <div>
-                        {bigEmoji("🎯")} <span>Deploy & Restart All ({outdatedServices.length}) Services</span>
+                        {bigEmoji("🎯")} <span>{this.state.isDeploying && "⏳ Deploying..." || `Deploy & Restart All (${outdatedServices.length}) Services`}</span>
                     </div>
                     <div className={css.hbox(5)}>
                         <b>New</b>
@@ -124,6 +143,9 @@ export class UpdateButtons extends qreact.Component<{
 export class UpdateServiceButtons extends qreact.Component<{
     service: ServiceConfig;
 }> {
+    state = t.state({
+        isDeploying: t.type(false),
+    });
     render() {
         let controller = MachineServiceController(SocketFunction.browserNodeId());
         const gitInfo = controller.getGitInfo();
@@ -134,16 +156,28 @@ export class UpdateServiceButtons extends qreact.Component<{
         return <>
             {gitRef !== gitInfo.latestRef && <button
                 className={buttonStyle.hsl(120, 70, 90).alignSelf("stretch")}
-                onClick={async () => {
-                    this.props.service.parameters.gitRef = gitInfo.latestRef;
+                disabled={this.state.isDeploying}
+                onClick={() => {
+                    this.state.isDeploying = true;
+                    // Props are synchronized state, so everything the async work needs is cloned into plain locals HERE, in the synced part
+                    let service = deepCloneJSON(this.props.service);
+                    service.parameters.gitRef = gitInfo.latestRef;
                     // Release with the configured overlap, so the new instances are running before the old ones shut down
-                    let overlap = this.props.service.parameters.overlapTime || DEFAULT_OVERLAP_TIME;
-                    this.props.service.parameters.releaseTime = Date.now() + overlap;
-                    await controller.setServiceConfigs.promise([this.props.service]);
+                    let overlap = service.parameters.overlapTime || DEFAULT_OVERLAP_TIME;
+                    service.parameters.releaseTime = Date.now() + overlap;
+                    Querysub.onCommitFinished(async () => {
+                        try {
+                            await controller.setServiceConfigs.promise([service]);
+                        } finally {
+                            Querysub.commit(() => {
+                                this.state.isDeploying = false;
+                            });
+                        }
+                    });
                 }}
             >
                 <div>
-                    {bigEmoji("🎯", -4)} <span>Update to New & Restart</span>
+                    {bigEmoji("🎯", -4)} <span>{this.state.isDeploying && "⏳ Deploying..." || "Update to New & Restart"}</span>
                 </div>
                 <div className={css.hbox(5)}>
                     <b>New</b>
@@ -161,6 +195,9 @@ export class UpdateServiceButtons extends qreact.Component<{
 export class DeployMachineButtons extends qreact.Component<{
     machines: MachineInfo[];
 }> {
+    state = t.state({
+        isDeploying: t.type(false),
+    });
     render() {
         let controller = MachineServiceController(SocketFunction.browserNodeId());
         const gitInfo = controller.getGitInfo();
@@ -174,25 +211,38 @@ export class DeployMachineButtons extends qreact.Component<{
         return <>
             {outdatedMachines.length > 0 && <div
                 className={buttonStyle.alignSelf("stretch").hsl(120, 70, 50)}
-                onClick={async () => {
-                    let machineController = MachineController(SocketFunction.browserNodeId());
-                    try {
-                        await Promise.allSettled(outdatedMachines.map(machine => {
-                            return machineController.deployMachineFromBrowser.promise({
-                                machineNodeId: machine.applyNodeId,
-                                gitRef: gitInfo.latestRef,
+                onClick={() => {
+                    if (this.state.isDeploying) return;
+                    this.state.isDeploying = true;
+                    // Props are synchronized state, so everything the async work needs is captured HERE, in the synced part
+                    let machineNodeIds = outdatedMachines.map(machine => machine.applyNodeId);
+                    let gitRef = gitInfo.latestRef;
+                    Querysub.onCommitFinished(async () => {
+                        try {
+                            let machineController = MachineController(SocketFunction.browserNodeId());
+                            try {
+                                await Promise.allSettled(machineNodeIds.map(machineNodeId => {
+                                    return machineController.deployMachineFromBrowser.promise({
+                                        machineNodeId,
+                                        gitRef,
+                                    });
+                                }));
+                            } catch (error) {
+                                // They should always end with a disconnect (which means the machine updated, so obviously it disconnected from us)
+                                if (!String(error).includes("disconnected")) {
+                                    throw error;
+                                }
+                            }
+                        } finally {
+                            Querysub.commit(() => {
+                                this.state.isDeploying = false;
                             });
-                        }));
-                    } catch (error) {
-                        // They should always end with a disconnect (which means the machine updated, so obviously it disconnected from us)
-                        if (!String(error).includes("disconnected")) {
-                            throw error;
                         }
-                    }
+                    });
                 }}
             >
                 <div>
-                    {bigEmoji("🎯", -4)} <span>Deploy {outdatedMachines.length} Machines</span>
+                    {bigEmoji("🎯", -4)} <span>{this.state.isDeploying && "⏳ Deploying..." || `Deploy ${outdatedMachines.length} Machines`}</span>
                 </div>
                 <div className={css.hbox(5)}>
                     <b>New</b>