fix: read completed update results without a live terminal

2026-11-02 19:02:31 +00:00 · 2026-10-28 17:30:44 +00:00
parent 889409de8d
commit ba3fb1197f
14 changed files with 289 additions and 11 deletions
@@ -0,0 +1,77 @@
+"use client"
+
+import { useEffect, useRef, useState } from "react"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "./ui/dialog"
+import { Button } from "./ui/button"
+import { getAuthToken } from "../lib/api-config"
+import { scriptCompletion } from "../lib/script-completion"
+import { useT } from "../lib/i18n/provider"
+import "xterm/css/xterm.css"
+
+export function HostUpdateResult({ jobId, getApiUrl, onClose }: {
+  jobId: string | null
+  getApiUrl: (path: string) => string
+  onClose: () => void
+}) {
+  const t = useT()
+  const container = useRef<HTMLDivElement>(null)
+  const [revision, setRevision] = useState(0)
+  const [exitCode, setExitCode] = useState<number | null>(null)
+  const [failed, setFailed] = useState(false)
+  useEffect(() => {
+    if (!jobId) return
+    const controller = new AbortController()
+    let terminal: import("xterm").Terminal | undefined
+    let observer: ResizeObserver | undefined
+    let disposed = false
+    setExitCode(null); setFailed(false)
+    const timeout = setTimeout(() => controller.abort(), 10000)
+    void (async () => {
+      try {
+        const token = getAuthToken()
+        const response = await fetch(getApiUrl(`/api/host-update-jobs/${encodeURIComponent(jobId)}/result`), {
+          headers: token ? { Authorization: `Bearer ${token}` } : {}, signal: controller.signal,
+        })
+        if (!response.ok) throw Error("unavailable")
+        const value = await response.json()
+        if (value.state !== "complete" || !Number.isSafeInteger(value.exit_code)
+          || typeof value.text !== "string" || value.text.length > 256 * 1024
+          || typeof value.truncated !== "boolean") throw Error("invalid result")
+        const [{ Terminal }, { FitAddon }] = await Promise.all([import("xterm"), import("xterm-addon-fit")])
+        if (controller.signal.aborted || !container.current) return
+        terminal = new Terminal({ disableStdin: true, convertEol: true, fontSize: 12,
+          screenReaderMode: true, theme: { background: "#000000", foreground: "#dddddd" } })
+        const fit = new FitAddon()
+        terminal.loadAddon(fit); terminal.open(container.current); fit.fit()
+        if (value.truncated) terminal.writeln(t("vmLxc.updates.backgroundOutputTrimmed"))
+        terminal.write(value.text)
+        observer = new ResizeObserver(() => { if (!controller.signal.aborted) fit.fit() })
+        observer.observe(container.current)
+        setExitCode(value.exit_code)
+      } catch {
+        if (!disposed) setFailed(true)
+      } finally { clearTimeout(timeout) }
+    })()
+    return () => { disposed = true; controller.abort(); clearTimeout(timeout); observer?.disconnect(); terminal?.dispose() }
+  }, [jobId, getApiUrl, revision, t])
+  const kind = exitCode === null ? null : scriptCompletion(exitCode, 130).kind
+  return <Dialog open={jobId !== null} onOpenChange={open => { if (!open) onClose() }}>
+    <DialogContent className="max-w-4xl w-[95vw] max-h-[85vh] overflow-y-auto p-4 sm:p-5">
+      <DialogHeader><DialogTitle>{t("healthStatus.hostUpdate.resultTitle")}</DialogTitle>
+        <DialogDescription>{t("healthStatus.hostUpdate.resultReadOnly")}</DialogDescription></DialogHeader>
+      {failed && <div role="alert" className="text-sm text-amber-500">
+        <p>{t("healthStatus.hostUpdate.resultUnavailable")}</p>
+        <Button size="sm" variant="outline" className="mt-3" onClick={() => setRevision(value => value + 1)}>{t("healthStatus.hostUpdate.retryResult")}</Button>
+      </div>}
+      <div ref={container} className="h-[45vh] min-h-[180px] bg-black rounded overflow-hidden" />
+      <div className="flex items-center justify-between gap-3">
+        <p role="status" className={`text-xs ${exitCode === 0 ? "text-green-500" : "text-muted-foreground"}`}>
+          {kind === null ? t(failed ? "healthStatus.hostUpdate.resultUnavailable" : "healthStatus.hostUpdate.loadingResult")
+            : kind === "cancelled" ? t("scriptTerminal.cancelled") : exitCode === 0
+            ? t("scriptTerminal.completedSuccessfully") : t("scriptTerminal.completedWithError", { code: exitCode })}
+        </p>
+        <Button size="sm" variant="outline" onClick={onClose}>{t("healthStatus.hostUpdate.closeResult")}</Button>
+      </div>
+    </DialogContent>
+  </Dialog>
+}