querysub 0.260.0 → 0.261.0

package/src/deployManager/components/DeployPage.tsx

@@ -0,0 +1,385 @@
+import { SocketFunction } from "socket-function/SocketFunction";
+import { assertIsManagementUser } from "../../diagnostics/managementPages";
+import { qreact } from "../../4-dom/qreact";
+import { deployGetFunctions } from "../../4-deploy/deployFunctions";
+import { MachineServiceController, deployFunctionsWithProgress } from "../machineSchema";
+import { functionSchema, FunctionSpec } from "../../3-path-functions/PathFunctionRunner";
+import { getDomain } from "../../config";
+import { RenderGitRefInfo, UpdateButtons, bigEmoji, buttonStyle } from "./deployButtons";
+import { css } from "typesafecss";
+import { timeInHour, timeInMinute } from "socket-function/src/misc";
+import { t } from "../../2-proxy/schema2";
+import { mostCommon } from "../../misc";
+import { Querysub } from "../../4-querysub/Querysub";
+import { DeployProgressView, ProgressStage } from "./DeployProgressView";
+import { URLParam } from "../../library-components/URLParam";
+import { InputLabelURL } from "../../library-components/InputLabel";
+
+module.hotreload = true;
+
+
+const forceDeployNowURL = new URLParam("forceDeployNow", false);
+const deployOnlyCodeURL = new URLParam("deployOnlyCode", false);
+const deployOnlyUIURL = new URLParam("deployOnlyUI", false);
+
+type FunctionKey = string;
+
+function getFunctionKey(func: FunctionSpec): FunctionKey {
+    return `${func.DomainName}.${func.ModuleId}.${func.FunctionId}`;
+}
+
+function createFunctionMap(functions: FunctionSpec[]): Map<FunctionKey, FunctionSpec> {
+    const map = new Map<FunctionKey, FunctionSpec>();
+    for (const func of functions) {
+        map.set(getFunctionKey(func), func);
+    }
+    return map;
+}
+
+type FunctionDiff = {
+    additions: FunctionSpec[];
+    removals: FunctionSpec[];
+    changes: { pending: FunctionSpec; live: FunctionSpec; }[];
+};
+
+function calculateFunctionDiff(pendingFunctions: FunctionSpec[], liveFunctions: FunctionSpec[]): FunctionDiff {
+    const pendingMap = createFunctionMap(pendingFunctions);
+    const liveMap = createFunctionMap(liveFunctions);
+
+    const additions: FunctionSpec[] = [];
+    const removals: FunctionSpec[] = [];
+    const changes: { pending: FunctionSpec; live: FunctionSpec; }[] = [];
+
+    // Find additions and changes
+    for (const [key, pendingFunc] of pendingMap) {
+        const liveFunc = liveMap.get(key);
+        if (!liveFunc) {
+            additions.push(pendingFunc);
+        } else {
+            // If key matches, assume there are changes
+            changes.push({ pending: pendingFunc, live: liveFunc });
+        }
+    }
+
+    // Find removals
+    for (const [key, liveFunc] of liveMap) {
+        if (!pendingMap.has(key)) {
+            removals.push(liveFunc);
+        }
+    }
+
+    return { additions, removals, changes };
+}
+
+function RenderFunctionInfo({ func, label }: { func: FunctionSpec; label?: string }) {
+    return <div className={css.vbox(2).pad2(6).bord2(0, 0, 80).hsl(0, 0, 98)}>
+        {label && <div className={functionLabelStyle}>{label}</div>}
+        <div className={functionNameStyle}>
+            {func.FunctionId}
+        </div>
+    </div>;
+}
+
+const diffViewList = css.vbox(40);
+
+const moduleContainerStyle = css.vbox(3).pad2(8).hsla(0, 0, 0, 0.1);
+const sectionTitleStyle = css.fontSize(16).boldStyle;
+const moduleHeaderStyle = css.fontSize(13).boldStyle.colorhsl(0, 0, 30);
+const functionNameStyle = css.boldStyle.colorhsl(0, 0, 10).fontSize(13);
+const functionLabelStyle = css.fontSize(11).boldStyle.colorhsl(200, 70, 40);
+
+const sectionContainerStyle = css.vbox(6);
+const sectionListStyle = css.hbox(10).marginLeft(12).wrap;
+const functionListStyle = css.hbox(6).wrap.marginLeft(8);
+
+const filePathStyle = css.colorhsl(0, 0, 40);
+const moduleTextStyle = css.colorhsl(0, 0, 30);
+const oldFilePathStyle = css.colorhsl(0, 70, 40);
+const newFilePathStyle = css.colorhsl(120, 70, 30);
+const arrowStyle = css.colorhsl(0, 0, 40);
+
+function countChanges(live: FunctionSpec, pending: FunctionSpec): number {
+    let changes = 0;
+    if (live.exportPathStr !== pending.exportPathStr) changes++;
+    if (live.FilePath !== pending.FilePath) changes++;
+    if (live.gitURL !== pending.gitURL) changes++;
+    if (live.gitRef !== pending.gitRef) changes++;
+    return changes;
+}
+
+function GroupedFunctions({ functions, title }: { functions: FunctionSpec[]; title: string }) {
+    // Group functions by ModuleId
+    const moduleGroups = new Map<string, FunctionSpec[]>();
+    for (const func of functions) {
+        const moduleId = func.ModuleId;
+        let group = moduleGroups.get(moduleId);
+        if (!group) {
+            group = [];
+            moduleGroups.set(moduleId, group);
+        }
+        group.push(func);
+    }
+
+    // Sort module groups by count (largest first)
+    const sortedModuleEntries = Array.from(moduleGroups.entries()).sort((a, b) => b[1].length - a[1].length);
+
+    const titleColor = title.includes("✅") && css.colorhsl(120, 70, 30) || css.colorhsl(0, 70, 40);
+
+    return <div className={sectionContainerStyle}>
+        <div className={sectionTitleStyle + titleColor}>{title}</div>
+        <div className={sectionListStyle}>
+            {sortedModuleEntries.map(([moduleId, funcs]) => (
+                <div key={moduleId} className={moduleContainerStyle}>
+                    <div className={moduleHeaderStyle}>
+                        <span className={filePathStyle}>{funcs[0].FilePath}</span>
+                        <span className={moduleTextStyle}> - {moduleId}</span>
+                    </div>
+                    <div className={functionListStyle}>
+                        {funcs.map((func, i) => (
+                            RenderFunctionInfo({ func })
+                        ))}
+                    </div>
+                </div>
+            ))}
+        </div>
+    </div>;
+}
+
+function GroupedChanges({ changes, title }: { changes: { pending: FunctionSpec; live: FunctionSpec; }[]; title: string }) {
+    // Group changes by ModuleId
+    const moduleGroups = new Map<string, { pending: FunctionSpec; live: FunctionSpec; }[]>();
+    for (const change of changes) {
+        const moduleId = change.pending.ModuleId;
+        let group = moduleGroups.get(moduleId);
+        if (!group) {
+            group = [];
+            moduleGroups.set(moduleId, group);
+        }
+        group.push(change);
+    }
+
+    // Sort changes within each group by number of changes (most changes first)
+    for (const [moduleId, moduleChanges] of moduleGroups.entries()) {
+        moduleChanges.sort((a, b) => countChanges(b.live, b.pending) - countChanges(a.live, a.pending));
+    }
+
+    // Sort module groups by the most changed function in each group (highest individual change count first)
+    const sortedModuleEntries = Array.from(moduleGroups.entries()).sort((a, b) => {
+        const maxChangesA = Math.max(...a[1].map(change => countChanges(change.live, change.pending)));
+        const maxChangesB = Math.max(...b[1].map(change => countChanges(change.live, change.pending)));
+        return maxChangesB - maxChangesA;
+    });
+
+    return <div className={sectionContainerStyle}>
+        <div className={sectionTitleStyle.colorhsl(45, 70, 30)}>{title}</div>
+        <div className={sectionListStyle}>
+            {sortedModuleEntries.map(([moduleId, moduleChanges]) => {
+                // Check if file path changed (using first function as they're all the same)
+                const firstChange = moduleChanges[0];
+                const filePathChanged = firstChange.live.FilePath !== firstChange.pending.FilePath;
+
+                return (
+                    <div key={moduleId} className={moduleContainerStyle}>
+                        <div className={moduleHeaderStyle}>
+                            {filePathChanged && (
+                                <div>
+                                    <span className={oldFilePathStyle}>{firstChange.live.FilePath}</span>
+                                    <span className={arrowStyle}> → </span>
+                                    <span className={newFilePathStyle}>{firstChange.pending.FilePath}</span>
+                                    <span className={moduleTextStyle}> - {moduleId}</span>
+                                </div>
+                            ) || (
+                                    <div>
+                                        <span className={filePathStyle}>{firstChange.pending.FilePath}</span>
+                                        <span className={moduleTextStyle}> - {moduleId}</span>
+                                    </div>
+                                )}
+                        </div>
+                        <div className={functionListStyle}>
+                            {moduleChanges.map((change, i) => (
+                                <div key={i}>
+                                    {RenderFunctionInfo({ func: change.pending })}
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                );
+            })}
+        </div>
+    </div>;
+}
+
+function FunctionDiffView({ pendingFunctions, liveFunctions }: { pendingFunctions: FunctionSpec[]; liveFunctions: FunctionSpec[]; }) {
+    const diff = calculateFunctionDiff(pendingFunctions, liveFunctions);
+
+    return <div className={diffViewList}>
+        {/* Additions */}
+        {diff.additions.length > 0 &&
+            GroupedFunctions({
+                functions: diff.additions,
+                title: `✅ Added Functions (${diff.additions.length})`,
+            })
+        }
+
+        {/* Removals */}
+        {diff.removals.length > 0 &&
+            GroupedFunctions({
+                functions: diff.removals,
+                title: `❌ Removed Functions (${diff.removals.length})`,
+            })
+        }
+
+        {/* Changes */}
+        {diff.changes.length > 0 &&
+            GroupedChanges({
+                changes: diff.changes,
+                title: `🔄 Changed Functions (${diff.changes.length})`,
+            })
+        }
+
+        {/* Show message when no changes */}
+        {diff.additions.length === 0 && diff.removals.length === 0 && diff.changes.length === 0 &&
+            <div className={filePathStyle.fontSize(14)}>
+                No changes detected between pending and live functions.
+            </div>
+        }
+    </div>;
+}
+
+export class DeployPage extends qreact.Component {
+    state = t.state({
+        isDeploying: t.boolean,
+        deployStartTime: t.atomic<number | undefined>(),
+        deployEndTime: t.atomic<number | undefined>(),
+        deploySuccess: t.boolean,
+        progressStages: t.atomic<ProgressStage[]>([]),
+    });
+    render() {
+        let controller = MachineServiceController(SocketFunction.browserNodeId());
+        let gitInfo = controller.getGitInfo();
+        let pendingFunctions = controller.getPendingFunctions() || [];
+        let liveFunctions = controller.getLiveFunctions() || [];
+
+        let liveGitRef = mostCommon(liveFunctions.map(x => x.gitRef)) || "";
+        let pendingGitRef = gitInfo?.latestRef || "";
+        let anyUncommitted = !!gitInfo?.uncommitted.length;
+
+        return <div className={css.vbox(40).marginTop(20)}>
+            <div className={css.hbox(10)}>
+                <UpdateButtons services={[]} />
+                <button
+                    className={buttonStyle.alignSelf("stretch").center.hsl(240, 70, 50).colorhsl(0, 0, 100)
+                        + (anyUncommitted && css.opacity(0.5))
+                        + (this.state.isDeploying && css.opacity(0.7))
+                    }
+                    title={anyUncommitted && `Must commit uncommitted changes before deploying` || this.state.isDeploying && "Deploying..." || ""}
+                    onClick={async () => {
+                        if (anyUncommitted || this.state.isDeploying) return;
+
+                        this.state.isDeploying = true;
+                        this.state.deployStartTime = Date.now();
+                        this.state.deploySuccess = false;
+                        this.state.progressStages = [];
+                        this.state.deployEndTime = undefined;
+
+                        try {
+                            await deployFunctionsWithProgress({
+                                functionSpecs: pendingFunctions,
+                                // NOTE: Old code should always be compatible with new code, so a long delay is fine. We don't want to have deal with bug reports today for bugs we fixed tomorrow, but we also don't want to force users to refresh, so this time is longer than the expected maximum session length.
+                                // NOTE: Even if we want to deploy now, we can't deploy IMMEDIATELY. Give users at least 10 minutes to accept that that page will forcefully refresh.
+                                notifyRefreshDelay: forceDeployNowURL.value ? timeInMinute * 10 : timeInHour * 12,
+                                deployOnlyCode: deployOnlyCodeURL.value,
+                                deployOnlyUI: deployOnlyUIURL.value,
+                                onProgress: (config) => {
+                                    Querysub.commitLocal(() => {
+                                        const now = Date.now();
+                                        const newStage: ProgressStage = {
+                                            section: config.section,
+                                            progress: config.progress,
+                                            timestamp: now,
+                                            finished: config.progress >= 1,
+                                        };
+
+                                        // Update or add stage
+                                        const currentStages = this.state.progressStages;
+                                        const stages = currentStages.slice();
+                                        const existingIndex = stages.findIndex((s: ProgressStage) => s.section === config.section);
+                                        if (existingIndex >= 0) {
+                                            stages[existingIndex] = newStage;
+                                        } else {
+                                            stages.push(newStage);
+                                        }
+                                        this.state.progressStages = stages;
+                                    });
+                                },
+                            });
+                            Querysub.commitLocal(() => {
+                                this.state.deploySuccess = true;
+                            });
+                        } catch (error) {
+                            Querysub.commitLocal(() => {
+                                this.state.deploySuccess = false;
+                            });
+                        } finally {
+                            Querysub.commitLocal(() => {
+                                this.state.isDeploying = false;
+                                this.state.deployEndTime = Date.now();
+                            });
+                        }
+                    }}
+                >
+                    {this.state.isDeploying ? <>{bigEmoji("⚡")} Deploying...</> : <>{bigEmoji("🚀")} Deploy</>}
+                </button>
+            </div>
+
+            <div className={css.vbox(20)}>
+                <InputLabelURL
+                    label="Force Deploy Now (very annoying for users, only to be used if the majority of the site broken, or data is being corrupted)"
+                    flavor="large"
+                    url={forceDeployNowURL}
+                    checkbox
+                />
+                <InputLabelURL
+                    label="Deploy Code Only (no user refresh needed, just updates in the background)"
+                    flavor="large"
+                    url={deployOnlyCodeURL}
+                    checkbox
+                />
+                {/* We don't support UI only deploy, as I can't justify it. It... is just as slow, and still annoys users? So why would we do this? */}
+                {/* <InputLabelURL
+                    label="Deploy Only UI (no code deployed. Annoying for users, but...?)"
+                    flavor="large"
+                    url={deployOnlyUIURL}
+                    checkbox
+                /> */}
+            </div>
+
+            <div className={css.vbox(20).fontSize(20)}>
+                <div>
+                    <b>New</b>
+                    <RenderGitRefInfo gitRef={pendingGitRef} />
+                </div>
+                <div>
+                    <b>Live</b>
+                    <RenderGitRefInfo gitRef={liveGitRef} />
+                </div>
+            </div>
+
+            {DeployProgressView({
+                stages: this.state.progressStages,
+                isDeploying: this.state.isDeploying,
+                deploySuccess: this.state.deploySuccess,
+                deployStartTime: this.state.deployStartTime,
+                deployEndTime: this.state.deployEndTime,
+            })}
+
+            {liveGitRef === pendingGitRef && (
+                <div className={newFilePathStyle.fontSize(14).pad2(8).bord2(120, 50, 80).hsl(120, 30, 95)}>
+                    ✅ Everything is up to date - no changes to deploy
+                </div>
+            ) || (
+                    FunctionDiffView({ pendingFunctions, liveFunctions })
+                )}
+        </div>;
+    }
+}

package/src/deployManager/components/DeployProgressView.tsx

@@ -0,0 +1,135 @@
+import { css } from "typesafecss";
+import { qreact } from "../../4-dom/qreact";
+import { formatDateJSX } from "../../misc/formatJSX";
+import { formatTime } from "socket-function/src/formatting/format";
+
+module.hotreload = true;
+
+export type ProgressStage = {
+    section: string;
+    progress: number;
+    timestamp: number;
+    finished: boolean;
+};
+
+
+
+const filePathStyle = css.colorhsl(0, 0, 40);
+const newFilePathStyle = css.colorhsl(120, 70, 30);
+const sectionHeaderStyle = css.fontSize(13).boldStyle;
+const stageTextStyle = css.fontSize(12);
+const stageContainerStyle = css.flexGrow(1);
+const pendingStageBoxStyle = css.hbox(8).pad2(6).hsla(200, 30, 50, 0.1).bord2(200, 50, 80);
+const finishedStageBoxStyle = css.hbox(8).pad2(6).hsla(120, 30, 50, 0.1).bord2(120, 50, 80);
+const progressBarBackgroundStyle = css.fillWidth.height(4).hsl(0, 0, 90);
+const progressBarFillStyle = css.height(4).hsl(200, 70, 50);
+const sectionsStyle = css.vbox(6);
+const sectionContainerStyle = css.vbox(4);
+const stagesListStyle = css.hbox(2).wrap;
+
+export function DeployProgressView({ stages, isDeploying, deploySuccess, deployStartTime, deployEndTime }: {
+    stages: ProgressStage[];
+    isDeploying: boolean;
+    deploySuccess: boolean;
+    deployStartTime: number | undefined;
+    deployEndTime: number | undefined;
+}) {
+    if (!isDeploying && !deploySuccess) return null;
+
+    const now = Date.now();
+    const elapsed = (deployEndTime || now) - (deployStartTime || now);
+
+    // Separate pending and finished stages
+    const pendingStages = stages.filter(stage => !stage.finished);
+    const finishedStages = stages.filter(stage => stage.finished);
+
+    // Sort pending (oldest first), finished (newest first)
+    pendingStages.sort((a, b) => a.timestamp - b.timestamp);
+    finishedStages.sort((a, b) => b.timestamp - a.timestamp);
+
+    if (deploySuccess) {
+        return <div className={css.vbox(8).pad2(16).hsla(120, 40, 95, 0.9).bord2(120, 60, 50, 2).center}>
+            <style>{`
+                @keyframes celebrate {
+                    0% { transform: scale(1) rotate(0deg); }
+                    25% { transform: scale(1.1) rotate(-5deg); }
+                    50% { transform: scale(1.2) rotate(5deg); }
+                    75% { transform: scale(1.1) rotate(-2deg); }
+                    100% { transform: scale(1) rotate(0deg); }
+                }
+                @keyframes sparkle {
+                    0%, 100% { opacity: 1; transform: scale(1); }
+                    50% { opacity: 0.7; transform: scale(1.2); }
+                }
+                .celebrate-animation {
+                    animation: celebrate 2s ease-in-out infinite;
+                }
+                .sparkle-animation {
+                    animation: sparkle 1.5s ease-in-out infinite;
+                }
+            `}</style>
+            <div className={css.hbox(8).alignItems("center")}>
+                <div className={css.fontSize(32) + " celebrate-animation"}>🎉</div>
+                <div className={newFilePathStyle.fontSize(18).boldStyle.colorhsl(120, 70, 30)}>
+                    ✅ Deploy Successful! 🚀
+                </div>
+                <div className={css.fontSize(28) + " sparkle-animation"}>✨</div>
+            </div>
+            <div className={css.hbox(6).alignItems("center").justifyContent("center")}>
+                <div className={css.fontSize(16).colorhsl(120, 60, 40)}>
+                    Completed in {formatTime(elapsed)}
+                </div>
+            </div>
+        </div>;
+    }
+
+    return <div className={css.vbox(6).pad2(12).hsla(200, 30, 50, 0.1).bord2(200, 50, 80)}>
+        <div className={filePathStyle.fontSize(14).boldStyle}>
+            🚀 Deploying... ({formatTime(elapsed)})
+        </div>
+        <div className={sectionsStyle}>
+            {/* Pending stages */}
+            {pendingStages.length > 0 && (
+                <div className={sectionContainerStyle}>
+                    <div className={sectionHeaderStyle.colorhsl(200, 70, 30)}>In Progress</div>
+                    <div className={stagesListStyle}>
+                        {pendingStages.map((stage, i) => {
+                            const progressPercent = Math.round(stage.progress * 100);
+                            return <div key={i} className={pendingStageBoxStyle}>
+                                <div className={stageContainerStyle}>
+                                    <div className={stageTextStyle}>
+                                        ⏳ {stage.section} ({progressPercent}%)
+                                    </div>
+                                    <div className={progressBarBackgroundStyle}>
+                                        <div
+                                            className={progressBarFillStyle}
+                                            style={{ width: `${progressPercent}%` }}
+                                        />
+                                    </div>
+                                </div>
+                            </div>;
+                        })}
+                    </div>
+                </div>
+            )}
+
+            {/* Finished stages */}
+            {finishedStages.length > 0 && (
+                <div className={sectionContainerStyle}>
+                    <div className={sectionHeaderStyle.colorhsl(120, 70, 30)}>Completed</div>
+                    <div className={stagesListStyle}>
+                        {finishedStages.map((stage, i) => (
+                            <div key={i} className={finishedStageBoxStyle}>
+                                <div className={stageContainerStyle}>
+                                    <div className={stageTextStyle}>
+                                        ✓ {stage.section}
+                                    </div>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            )}
+        </div>
+    </div>;
+} 

package/src/deployManager/components/MachinesListPage.tsx

@@ -7,9 +7,10 @@ import { Querysub } from "../../4-querysub/QuerysubController";
 import { currentViewParam, selectedMachineIdParam } from "../urlParams";
 import { formatVeryNiceDateTime } from "socket-function/src/formatting/format";
 import { sort } from "socket-function/src/misc";
-import { formatTimeJSX } from "../../misc/formatJSX";
+import { formatDateJSX } from "../../misc/formatJSX";
 import { DeployMachineButtons, RenderGitRefInfo } from "./deployButtons";
 import { isDefined } from "../../misc";
+import { Anchor, createLink } from "../../library-components/ATag";
 
 export class MachinesListPage extends qreact.Component {
     state = t.state({
@@ -130,7 +131,8 @@ export class MachinesListPage extends qreact.Component {
                     }, 0);
 
                     return <div className={css.hbox(10)}>
-                        <div
+                        <Anchor
+                            noStyles
                             className={
                                 css.pad2(12).bord2(0, 0, 20).button
                                 + (
@@ -140,18 +142,17 @@ export class MachinesListPage extends qreact.Component {
                                 )
                                 + (this.state.isDeleteMode && isSelected && css.bord2(200, 80, 60, 2))
                             }
-                            onClick={() => {
+                            values={this.state.isDeleteMode ? [] : [currentViewParam.getOverride("machine-detail"), selectedMachineIdParam.getOverride(machineId)]}
+                            onMouseDown={(e) => {
                                 if (this.state.isDeleteMode) {
                                     if (this.state.selectedForDeletion[machineId]) {
                                         delete this.state.selectedForDeletion[machineId];
                                     } else {
                                         this.state.selectedForDeletion[machineId] = true;
                                     }
-                                } else {
-                                    currentViewParam.value = "machine-detail";
-                                    selectedMachineIdParam.value = machineId;
                                 }
-                            }}>
+                            }}
+                        >
                             <div className={css.hbox(12)}>
                                 {this.state.isDeleteMode && (
                                     <div className={css.flexShrink0}>
@@ -169,7 +170,7 @@ export class MachinesListPage extends qreact.Component {
                                 </div>}
                                 <div className={css.vbox(4)}>
                                     <div>
-                                        Last heartbeat {formatTimeJSX(machineInfo.heartbeat)}
+                                        Last heartbeat {formatDateJSX(machineInfo.heartbeat)}
                                     </div>
                                     <RenderGitRefInfo gitRef={machineInfo.gitRef} />
                                 </div>
@@ -185,7 +186,7 @@ export class MachinesListPage extends qreact.Component {
                                     </div>
                                 </div>
                             </div>
-                        </div>
+                        </Anchor>
                         <DeployMachineButtons machines={[machineInfo]} />
                     </div>;
                 })}

package/src/deployManager/components/ServiceDetailPage.tsx

@@ -133,7 +133,7 @@ type ServiceConfig = ${serviceConfigType}
                 onData: async (data: string) => {
                     Querysub.localCommit(() => {
                         let fullData = this.state.watchingOutputs[outputKey].data + data;
-                        fullData = fullData.slice(-10_000_000);
+                        fullData = fullData.slice(-100_000);
                         this.state.watchingOutputs[outputKey].data = fullData;
                     });
                 }

package/src/deployManager/components/ServicesListPage.tsx

@@ -12,7 +12,7 @@ import { Anchor } from "../../library-components/ATag";
 import { isPublic } from "../../config";
 import { UpdateButtons, UpdateServiceButtons } from "./deployButtons";
 import { isDefined } from "../../misc";
-import { formatTimeJSX } from "../../misc/formatJSX";
+import { formatDateJSX } from "../../misc/formatJSX";
 
 module.hotreload = true;
 
@@ -108,7 +108,7 @@ export class ServicesListPage extends qreact.Component {
                                     </div>
                                 </div>
                                 <div>
-                                    Updated {formatTimeJSX(config.info.lastUpdatedTime)}
+                                    Updated {formatDateJSX(config.info.lastUpdatedTime)}
                                 </div>
                             </div>
                         </Anchor>

package/src/deployManager/components/deployButtons.tsx

@@ -5,7 +5,7 @@ import { showFullscreenModal } from "../../5-diagnostics/FullscreenModal";
 import { InputLabel } from "../../library-components/InputLabel";
 import { css } from "../../4-dom/css";
 import { formatTime } from "socket-function/src/formatting/format";
-import { formatTimeJSX } from "../../misc/formatJSX";
+import { formatDateJSX } from "../../misc/formatJSX";
 import { MachineController } from "../machineController";
 import { closeAllModals } from "../../5-diagnostics/Modal";
 import { unique } from "../../misc";
@@ -28,12 +28,12 @@ export class RenderGitRefInfo extends qreact.Component<{
         });
         if (!gitRefInfo) return undefined;
         return <div className={css.fontWeight("normal")}>
-            {formatTimeJSX(gitRefInfo.time)} AGO <span className={css.hsl(0, 0, 80).pad2(5, 2).italic}>{gitRefInfo.description}</span>
+            {formatDateJSX(gitRefInfo.time)} AGO <span className={css.hsl(0, 0, 80).pad2(5, 2).italic}>{gitRefInfo.description}</span>
         </div>;
     }
 }
 
-export const buttonStyle = css.pad2(12, 8).button.bord2(0, 0, 20).fontWeight("bold").vbox(0).alignItems("center");
+export const buttonStyle = css.pad2(12, 8).button.bord2(0, 0, 20).fontWeight("bold").vbox(2).alignItems("center");
 
 export class UpdateButtons extends qreact.Component<{
     services: ServiceConfig[];

package/src/deployManager/machineApplyMainCode.ts

@@ -309,6 +309,7 @@ async function removeOldNodeId(screenName: string) {
     let screenNameFile = os.homedir() + "/" + SERVICE_FOLDER + screenName + "/" + SERVICE_NODE_FILE_NAME;
     if (fs.existsSync(screenNameFile)) {
         let nodeId = await fs.promises.readFile(screenNameFile, "utf8");
+        console.log(green(`Removing node if for dead service on ${screenNameFile}, node id ${nodeId}`));
         await fs.promises.unlink(screenNameFile);
         await forceRemoveNode(nodeId);
     }