OPS-02: dev-server + next.js zentrale statusseite

2026-08-28 08:21:27 +02:00
parent dff760e1ba
commit 81ebdd892b
7 changed files with 297 additions and 0 deletions
@@ -0,0 +1,125 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { fetchOverview, fetchHistory, type ModuleStatus, type HistoryEntry } from "@/lib/api";
+
+const POLL_INTERVAL_MS = 5000;
+
+export default function Page() {
+  const [modules, setModules] = useState<ModuleStatus[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const [selected, setSelected] = useState<string | null>(null);
+  const [history, setHistory] = useState<HistoryEntry[] | null>(null);
+  const [historyError, setHistoryError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function poll() {
+      try {
+        const data = await fetchOverview();
+        if (!cancelled) {
+          setModules(data);
+          setError(null);
+        }
+      } catch (e: any) {
+        // Ein nicht antwortendes Backend darf die zuletzt bekannte Ansicht
+        // nicht loeschen und die Seite nicht unbedienbar machen
+        // (Akzeptanzkriterium 2) — nur eine Fehlermeldung anzeigen, alte
+        // Daten bleiben sichtbar.
+        if (!cancelled) {
+          setError(e.message ?? "Unbekannter Fehler beim Laden der Uebersicht");
+        }
+      }
+    }
+
+    poll();
+    const id = setInterval(poll, POLL_INTERVAL_MS);
+    return () => {
+      cancelled = true;
+      clearInterval(id);
+    };
+  }, []);
+
+  async function openHistory(name: string) {
+    setSelected(name);
+    setHistoryError(null);
+    try {
+      const data = await fetchHistory(name);
+      setHistory(data);
+    } catch (e: any) {
+      setHistoryError(e.message ?? "Verlauf konnte nicht geladen werden");
+      setHistory(null);
+    }
+  }
+
+  const anyDown = modules.some((m) => m.status === "down");
+
+  return (
+    <main style={{ maxWidth: 800, margin: "0 auto", padding: "2rem 1rem" }}>
+      <h1>Systemstatus</h1>
+
+      {error && (
+        <p style={{ color: "#c62828", background: "#fdecea", padding: "0.5rem", borderRadius: 4 }} role="alert">
+          Uebersicht konnte gerade nicht aktualisiert werden: {error}. Zuletzt bekannter Stand wird weiter angezeigt.
+        </p>
+      )}
+
+      {!error && anyDown && (
+        <p style={{ color: "#c62828", background: "#fdecea", padding: "0.5rem", borderRadius: 4 }}>
+          Mindestens ein Modul ist derzeit nicht erreichbar.
+        </p>
+      )}
+
+      <ul style={{ listStyle: "none", padding: 0 }}>
+        {modules.map((m) => (
+          <li
+            key={m.name}
+            style={{
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              background: "white",
+              padding: "0.75rem 1rem",
+              marginBottom: "0.5rem",
+              borderRadius: 8,
+              borderLeft: `6px solid ${m.status === "up" ? "#2e7d32" : "#c62828"}`,
+            }}
+          >
+            <div>
+              <strong>{m.name}</strong>
+              <div style={{ fontSize: "0.85rem", color: "#666" }}>
+                {m.status === "up" ? "Verfügbar" : "Nicht verfügbar"}
+                {m.last_checked && ` — zuletzt geprüft ${new Date(m.last_checked).toLocaleString("de-DE")}`}
+              </div>
+            </div>
+            <button onClick={() => openHistory(m.name)}>Verlauf</button>
+          </li>
+        ))}
+        {modules.length === 0 && !error && <li>Lade Modulstatus…</li>}
+      </ul>
+
+      {selected && (
+        <section style={{ background: "white", padding: "1rem", borderRadius: 8, marginTop: "1.5rem" }}>
+          <h2>Verlauf: {selected}</h2>
+          {historyError && (
+            <p style={{ color: "#c62828" }} role="alert">
+              {historyError}
+            </p>
+          )}
+          {history && (
+            <ul>
+              {history.map((h, i) => (
+                <li key={i}>
+                  {new Date(h.changed_at).toLocaleString("de-DE")} — {h.status === "up" ? "verfügbar" : "nicht verfügbar"}
+                </li>
+              ))}
+              {history.length === 0 && <li>Keine Statusänderungen bisher.</li>}
+            </ul>
+          )}
+          <button onClick={() => setSelected(null)}>Schließen</button>
+        </section>
+      )}
+    </main>
+  );
+}