feat: detect stalled stack updates and add in-app recovery actions (#1347)

* feat: detect stalled stack updates and add in-app recovery actions Add a backend idle-output backstop that stops a deploy/update compose step that has gone silent (SENCHO_COMPOSE_STALL_TIMEOUT_MS, default 10m), so a hung image pull surfaces a fast failure instead of spinning indefinitely. Surface failed, timed-out, and stalled operations with recovery actions on the stack page: a desktop chip plus popover menu and an inline mobile card offering retry, restart, roll back (when a backup exists), refresh state, and copy diagnostics, all gated by deploy permission. The streaming deploy/update progress modal is now on by default and warns when output goes quiet. Container state is refreshed after a failed or stalled operation, and the UI never sits in an indefinite spinner. * fix: harden rollback against policy-blocked file mutation and refine recovery Address review findings on the stalled-update recovery work: - The rollback route restored backup files before running the policy gate, so a policy-blocked rollback could leave the on-disk config rolled back while the deployed containers were unchanged. Snapshot the current files first and revert them when the gate blocks; if that revert itself fails, escalate it on the persistent alert feed since the 409 is already sent. - Refresh container state after a successful manual rollback (rollback redeploys), without mis-recording a refetch failure as a rollback failure. - Suppress the stalled-output warning once live progress is unavailable. * test: mock snapshotStackFiles in the atomic-deploy rollback route tests The rollback route now snapshots stack files before restoring a backup, so its FileSystemService mock needs snapshotStackFiles. Without it the mocked call threw and the route returned 500, failing the success-path rollback assertions.
2026-08-20 07:13:05 +00:00 · 2026-06-10 10:12:24 -04:00
parent a3033a848e
commit d369b03a38
31 changed files with 1580 additions and 76 deletions
@@ -0,0 +1,95 @@
+import { useState } from 'react';
+import { RotateCcw, RotateCw, Undo2, RefreshCw, Copy, Check } from 'lucide-react';
+import { Button } from '../ui/button';
+import { toast } from '@/components/ui/toast-store';
+import { copyToClipboard } from '@/lib/clipboard';
+import type { Node } from '@/context/NodeContext';
+import type { StackActionResult } from './EditorView';
+import { buildDiagnostics } from './recovery-format';
+
+interface RecoveryActionsProps {
+    stackName: string;
+    result: StackActionResult;
+    activeNode: Node | null;
+    backupInfo: { exists: boolean; timestamp: number | null };
+    canDeploy: boolean;
+    onRetry: (e: React.MouseEvent) => void;
+    onRestart: (e: React.MouseEvent) => void;
+    onRollback: () => void;
+    onRefreshState: () => void;
+    // 'inline' wraps the actions in a row (mobile card); 'list' stacks them as
+    // full-width menu rows (desktop chip popover).
+    variant?: 'inline' | 'list';
+}
+
+// The recovery action set shared by the mobile inline panel and the desktop
+// chip popover, so retry/restart/rollback/refresh/copy have one implementation.
+export function RecoveryActions({
+    stackName,
+    result,
+    activeNode,
+    backupInfo,
+    canDeploy,
+    onRetry,
+    onRestart,
+    onRollback,
+    onRefreshState,
+    variant = 'inline',
+}: RecoveryActionsProps) {
+    const [copied, setCopied] = useState(false);
+
+    const verb = result.action;
+    const showRestart = canDeploy && result.action !== 'restart';
+    const showRollback = canDeploy && backupInfo.exists && result.action !== 'rollback';
+    const list = variant === 'list';
+
+    const handleCopy = async () => {
+        try {
+            await copyToClipboard(buildDiagnostics(stackName, result, activeNode, backupInfo));
+            setCopied(true);
+            toast.success('Troubleshooting details copied.');
+            setTimeout(() => setCopied(false), 2000);
+        } catch {
+            toast.error('Could not copy troubleshooting details.');
+        }
+    };
+
+    const container = list ? 'flex flex-col' : 'flex flex-wrap items-center gap-1.5';
+    const secondary = list
+        ? 'h-8 w-full justify-start gap-2 px-2 text-xs text-muted-foreground hover:text-foreground'
+        : 'h-7 gap-1.5 text-xs text-muted-foreground hover:text-foreground';
+    const primary = list
+        ? 'h-8 w-full justify-start gap-2 px-2 text-xs text-foreground'
+        : 'h-7 gap-1.5 text-xs';
+
+    return (
+        <div className={container}>
+            {canDeploy && (
+                <Button variant={list ? 'ghost' : 'outline'} size="sm" className={primary} onClick={onRetry}>
+                    <RotateCcw className="h-3.5 w-3.5" />
+                    Retry {verb}
+                </Button>
+            )}
+            {showRestart && (
+                <Button variant="ghost" size="sm" className={secondary} onClick={onRestart}>
+                    <RotateCw className="h-3.5 w-3.5" />
+                    Restart
+                </Button>
+            )}
+            {showRollback && (
+                <Button variant="ghost" size="sm" className={secondary} onClick={() => onRollback()}>
+                    <Undo2 className="h-3.5 w-3.5" />
+                    Roll back
+                </Button>
+            )}
+            <Button variant="ghost" size="sm" className={secondary} onClick={onRefreshState}>
+                <RefreshCw className="h-3.5 w-3.5" />
+                Refresh
+            </Button>
+            <Button variant="ghost" size="sm" className={secondary} onClick={() => void handleCopy()}>
+                {copied ? <Check className="h-3.5 w-3.5 text-success" /> : <Copy className="h-3.5 w-3.5" />}
+                Copy details
+            </Button>
+        </div>
+    );
+}