homelab: Speicherpool, NAS und Sicherungen überwachen – mit Empfehlungen, was Platz bringt

User-Wunsch 25.09.: Speicherpool im Wächter (gelb ab 80 %, rot bei 10 % frei)
samt Empfehlungen, dazu das NAS (Backup-Ziel, per NFS auf dem Proxmox-Host).
- Ausführer: Thin-Pools mit echter Belegung je Volume (lvs), ungenutzte und
  verwaiste Platten, VM-Belegung über den Gast-Agenten, Discard je VM,
  Netzlaufwerke (df mit Zeitlimit, hängender harter NFS-Mount hält nichts auf),
  Sicherungsaufträge und jüngste Sicherung je Gast.
- Homelab-Teil: services/homelab/speicher.py (Auswertung, Empfehlungen,
  Wächter pruefe_speicher, NAS-Erreichbarkeit per TCP), GET /api/homelab/speicher;
  Gast-Plattenwächter nennt jetzt auch VMs richtig.
- Oberfläche: Karte „Speicher und Sicherungen“ im Homelab-Cockpit.
- deploy.sh und ausfuehrer-einrichten.sh warten, solange im Homelab ein Update
  oder „Alle aktualisieren“ läuft (der Neustart bräche den Lauf ab).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

frontend/src/components/homelab/Speicher.tsx

@@ -0,0 +1,168 @@
+import type { ReactNode } from "react"
+import { ChevronRight } from "lucide-react"
+import { cn } from "cn"
+import { Chip, type ChipArt } from "@/components/cockpit/Chip"
+import { auftraegeText, groesse, STUFE_TEXT } from "@/lib/speicher"
+import type { HomelabSpeicher, NasStand, SicherungsLage, SpeicherPool, SpeicherStufe } from "@/lib/typen"
+import { flugplanZeit } from "@/lib/zeit"
+
+const CHIP: Record<SpeicherStufe | "keine", ChipArt> = { ok: "gruen", gelb: "bernstein", rot: "rot", keine: "grau" }
+const FARBE: Record<SpeicherStufe, string> = { ok: "var(--reihe-1)", gelb: "var(--bernstein)", rot: "var(--rot)" }
+const zeitAus = (sekunden: number) => flugplanZeit(new Date(sekunden * 1000).toISOString())
+
+/** Füllstand mit Marken bei 80 % (gelb) und 90 % (rot, 10 % frei). */
+function Fuellstand({ anteil, stufe, name }: { anteil: number; stufe: SpeicherStufe; name: string }) {
+  const prozent = Math.round(anteil * 100)
+  return (
+    <div
+      role="meter"
+      aria-label={`${name}: ${prozent} % belegt`}
+      aria-valuenow={prozent}
+      aria-valuemin={0}
+      aria-valuemax={100}
+      className="relative h-2 w-full overflow-hidden rounded-full bg-erhaben"
+    >
+      <span className="block h-full rounded-full" style={{ width: `${Math.min(100, Math.max(2, prozent))}%`, background: FARBE[stufe] }} />
+      <span aria-hidden className="absolute inset-y-0 left-[80%] w-px bg-bernstein/70" />
+      <span aria-hidden className="absolute inset-y-0 left-[90%] w-px bg-rot/80" />
+    </div>
+  )
+}
+
+function Kachel({ titel, unter, chip, chipText, children }: {
+  titel: string
+  unter?: string
+  chip: ChipArt
+  chipText: string
+  children: ReactNode
+}) {
+  return (
+    <div className="flex min-w-0 flex-col gap-3 rounded-xl border border-linie bg-erhaben/40 p-4">
+      <div className="flex items-start justify-between gap-3">
+        <div className="flex min-w-0 flex-col">
+          <span className="text-[15px] font-semibold break-words">{titel}</span>
+          {unter && <span className="text-sm break-words text-text-3">{unter}</span>}
+        </div>
+        <Chip art={chip}>{chipText}</Chip>
+      </div>
+      {children}
+    </div>
+  )
+}
+
+function PoolKachel({ p }: { p: SpeicherPool }) {
+  const prozent = Math.round(p.anteil * 100)
+  return (
+    <Kachel titel={`Speicherpool ${p.speicher}`} unter="Platten der Container und VMs" chip={CHIP[p.stufe]} chipText={STUFE_TEXT[p.stufe]}>
+      <Fuellstand anteil={Math.max(p.anteil, p.meta_anteil ?? 0)} stufe={p.stufe} name={`Speicherpool ${p.speicher}`} />
+      <p className="ziffern text-sm text-text-2">
+        {prozent} % · {groesse(p.belegt)} von {groesse(p.gesamt)} · <span className={cn(p.stufe !== "ok" && "text-foreground")}>{groesse(p.frei)} frei</span>
+      </p>
+      {p.meta_anteil !== null && (
+        <p className="text-xs text-text-3">Metadaten {Math.round(p.meta_anteil * 100)} % belegt</p>
+      )}
+    </Kachel>
+  )
+}
+
+function NasKachel({ n }: { n: NasStand }) {
+  const chipText = n.problem ? (n.stufe === "rot" ? "gestört" : "unklar") : STUFE_TEXT[n.stufe]
+  return (
+    <Kachel
+      titel={`NAS ${n.server ?? ""}`.trim()}
+      unter={`${n.art.toUpperCase()} · ${n.quelle ?? "?"} → ${n.ziel}`}
+      chip={CHIP[n.stufe]}
+      chipText={chipText}
+    >
+      {n.problem ? (
+        <p className={cn("text-sm", n.stufe === "rot" ? "text-rot-text" : "text-bernstein")}>{n.problem}</p>
+      ) : (
+        n.anteil !== null && (
+          <>
+            <Fuellstand anteil={n.anteil} stufe={n.stufe} name={`NAS ${n.server ?? ""}`} />
+            <p className="ziffern text-sm text-text-2">
+              {Math.round(n.anteil * 100)} % · {groesse(n.belegt)} von {groesse(n.gesamt)} · {groesse((n.gesamt ?? 0) - (n.belegt ?? 0))} frei
+            </p>
+          </>
+        )
+      )}
+      <p className="text-xs text-text-3">
+        {n.erreichbar === false ? "antwortet nicht" : "antwortet"} · {n.eingebunden ? "auf dem Proxmox-Host eingebunden" : "nicht eingebunden"}
+      </p>
+    </Kachel>
+  )
+}
+
+function SicherungsKachel({ s }: { s: SicherungsLage }) {
+  const chipText = { ok: "aktuell", gelb: "Lücke", rot: "gestört", keine: "kein Auftrag" }[s.stufe]
+  return (
+    <Kachel titel="Sicherungen" unter={auftraegeText(s)} chip={CHIP[s.stufe]} chipText={chipText}>
+      {s.probleme.map((p) => (
+        <p key={p} className="text-sm text-rot-text">{p}</p>
+      ))}
+      {s.stufe === "ok" && (
+        <p className="text-sm text-text-2">
+          Alle {s.erfasst} Geräte gesichert{s.zuletzt ? <>, zuletzt <span className="ziffern">{zeitAus(s.zuletzt)}</span></> : null}.
+        </p>
+      )}
+      {s.fehlend.length > 0 && (
+        <ul className="flex flex-col gap-1 text-sm">
+          {s.fehlend.map((f) => (
+            <li key={f.ziel} className="text-bernstein">
+              {f.name}: {f.zuletzt ? <>zuletzt <span className="ziffern">{zeitAus(f.zuletzt)}</span></> : "noch nie gesichert"}
+            </li>
+          ))}
+        </ul>
+      )}
+    </Kachel>
+  )
+}
+
+/**
+ * Speicher und Sicherungen des Homelabs: Speicherpool, NAS und die nächtlichen Sicherungen, darunter was im Pool
+ * Platz bringt. Die Vorschläge sind aufgeklappt, sobald der Pool knapp wird (ab 80 %).
+ */
+export function Speicher({ daten }: { daten: HomelabSpeicher }) {
+  const knapp = daten.pools.some((p) => p.stufe !== "ok")
+  const summe = daten.empfehlungen.reduce((n, e) => n + (e.platz ?? 0), 0)
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="grid gap-3 md:grid-cols-3">
+        {daten.pools.map((p) => <PoolKachel key={p.speicher} p={p} />)}
+        {daten.nas.length > 0 ? (
+          daten.nas.map((n) => <NasKachel key={n.ziel} n={n} />)
+        ) : (
+          <Kachel titel="NAS" chip="grau" chipText="keins">
+            <p className="text-sm text-text-3">Auf dem Proxmox-Host ist kein Netzlaufwerk eingebunden.</p>
+          </Kachel>
+        )}
+        <SicherungsKachel s={daten.sicherungen} />
+      </div>
+      {daten.empfehlungen.length > 0 && (
+        <details open={knapp} className="group rounded-xl border border-linie bg-erhaben/40 px-4 open:pb-3">
+          <summary className="flex min-h-12 cursor-pointer list-none items-center justify-between gap-3 [&::-webkit-details-marker]:hidden">
+            <span className="flex items-center gap-2 text-[15px] font-medium">
+              <ChevronRight className="size-4 text-text-3 transition-transform group-open:rotate-90" aria-hidden />
+              Was im Speicherpool Platz bringt
+            </span>
+            <span className="ziffern text-sm text-text-2">
+              {daten.empfehlungen.length} {daten.empfehlungen.length === 1 ? "Vorschlag" : "Vorschläge"}
+              {summe > 0 && ` · bis zu ${groesse(summe)}`}
+            </span>
+          </summary>
+          <ol className="flex flex-col">
+            {daten.empfehlungen.map((e) => (
+              <li key={e.titel} className="flex flex-col gap-1 border-t border-linie py-3 first:border-t-0 first:pt-1">
+                <div className="flex flex-wrap items-baseline justify-between gap-x-3 gap-y-1">
+                  <span className="text-[15px] font-medium break-words">{e.titel}</span>
+                  <span className="ziffern text-sm text-text-2">{e.platz ? `≈ ${groesse(e.platz)}` : "Größe unbekannt"}</span>
+                </div>
+                <p className="text-sm break-words text-text-2">{e.text}</p>
+              </li>
+            ))}
+          </ol>
+        </details>
+      )}
+    </div>
+  )
+}