Welle 2 · Docker-Dienste unter Arcane einzeln: Stacks, Zustand, Gesundheit, Update-Stand; neue Stacks unter „Neu entdeckt“

Statt „Arcane (Docker) · 11 Images“ zeigt das Homelab-Cockpit je Stack jeden Container mit Zustand, Healthcheck und Update-Stand („Update verfügbar“, „lokal gebaut“ für NerdQuiz und Rippy, „aktuell“). Der Wächter meldet gelb, wenn ein Container ungesund ist oder ständig neu startet; beendete Container sind kein Befund. Neue Stacks erscheinen unter „Neu entdeckt“ (eigenes Register, nur „Übernehmen“), Lucy meldet sie einmal. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-09-25 17:31:05 +02:00
parent c7c396f56d
commit 6af42bd42c
13 changed files with 480 additions and 21 deletions
@@ -0,0 +1,74 @@
+import { cn } from "cn"
+import { Geraetesymbol } from "@/components/cockpit/Geraetesymbol"
+import { geraetebild, type Punktzustand } from "@/lib/geraetebild"
+import type { DockerContainer, DockerLage } from "@/lib/typen"
+
+// Docker-Dienste unter Arcane einzeln (Ausbauplan Welle 2, Punkt 8, seit 25.09.2026): je Stack die Container mit
+// Zustand, Gesundheit und Update-Stand — statt nur „Arcane (Docker) · 11 Images“.
+
+const UPDATE: Record<DockerContainer["update"], { text: string; klasse: string }> = {
+  neu: { text: "Update verfügbar", klasse: "text-cyan-text" },
+  lokal: { text: "lokal gebaut", klasse: "text-text-3" },
+  aktuell: { text: "aktuell", klasse: "text-text-3" },
+  unbekannt: { text: "Update-Stand unklar", klasse: "text-bernstein" },
+}
+
+function punkt(c: DockerContainer): Punktzustand {
+  if (c.zustand === "restarting" || c.gesund === false) return "rot"
+  if (c.zustand === "running") return "ok"
+  return "aus"
+}
+
+function zustandText(c: DockerContainer): string {
+  if (c.gesund === false) return "ungesund"
+  if (c.zustand === "restarting") return "startet immer wieder neu"
+  if (c.zustand === "running") return c.gesund ? "läuft, gesund" : "läuft"
+  if (c.zustand === "exited") return "beendet"
+  if (c.zustand === "paused") return "angehalten"
+  return c.zustand
+}
+
+/** Aus „ghcr.io/getarcaneapp/manager:latest“ wird „manager“ — für das Logo. */
+const imageName = (image: string | null) => (image ?? "").split("/").at(-1)?.split(":")[0] ?? ""
+
+function Zeile({ c }: { c: DockerContainer }) {
+  const u = UPDATE[c.update] ?? UPDATE.unbekannt
+  return (
+    <li className="flex min-w-0 items-center gap-3 border-t border-white/[0.06] py-2.5 first:border-t-0">
+      <Geraetesymbol bild={geraetebild({ art: "container", name: c.dienst ?? imageName(c.image) })} groesse="sm" punkt={punkt(c)} />
+      <span className="flex min-w-0 flex-1 flex-col">
+        <span className="truncate text-[14.5px] font-medium">{c.name}</span>
+        <span className="truncate text-[12.5px] text-text-3">{c.image}</span>
+      </span>
+      <span className="flex shrink-0 flex-col items-end text-right">
+        <span className={cn("text-[13px]", punkt(c) === "rot" ? "text-rot-text" : "text-text-2")}>{zustandText(c)}</span>
+        <span className={cn("text-[12px]", u.klasse)}>{u.text}</span>
+      </span>
+    </li>
+  )
+}
+
+export function DockerDienste({ lage }: { lage: DockerLage }) {
+  if (!lage.verfuegbar || lage.stacks.length === 0) return null
+  return (
+    <div className="grid gap-3 md:grid-cols-2 2xl:grid-cols-3">
+      {lage.stacks.map((s) => {
+        const laufen = s.container.filter((c) => c.zustand === "running").length
+        const neu = s.container.filter((c) => c.update === "neu").length
+        return (
+          <section key={s.name} aria-label={`Stack ${s.name}`} className="flaeche-innen flex min-w-0 flex-col rounded-2xl px-4 py-3">
+            <div className="flex items-baseline justify-between gap-3 pb-1">
+              <h3 className="m-0 truncate text-[15px] font-semibold">{s.name}</h3>
+              <span className="shrink-0 text-[12.5px] text-text-3">
+                {laufen} von {s.container.length} laufen{neu ? ` · ${neu} mit Update` : ""}
+              </span>
+            </div>
+            <ul className="m-0 list-none p-0">
+              {s.container.map((c) => <Zeile key={c.id} c={c} />)}
+            </ul>
+          </section>
+        )
+      })}
+    </div>
+  )
+}