OPS-02: dev-server + next.js zentrale statusseite
This commit is contained in:
sysops
@@ -0,0 +1,66 @@
|
|||||||
|
// statuspage-devserver stellt das OPS-02-Backend (internal/statuspage) fuer
|
||||||
|
// die Next.js-Statusseite bereit und startet den periodischen Poller.
|
||||||
|
// Getrennt von cmd/core aus demselben Grund wie die anderen *-devserver.
|
||||||
|
package main
|
||||||
|
|
||||||
|
import (
|
||||||
|
"context"
|
||||||
|
"log"
|
||||||
|
"net/http"
|
||||||
|
"os"
|
||||||
|
"strconv"
|
||||||
|
"time"
|
||||||
|
|
||||||
|
"gitea.perlbach24.de/scripte/nexarch/internal/db"
|
||||||
|
"gitea.perlbach24.de/scripte/nexarch/internal/statuspage"
|
||||||
|
)
|
||||||
|
|
||||||
|
func main() {
|
||||||
|
dsn := os.Getenv("NEXARCH_REGISTRY_DSN")
|
||||||
|
if dsn == "" {
|
||||||
|
log.Fatal("NEXARCH_REGISTRY_DSN nicht gesetzt")
|
||||||
|
}
|
||||||
|
addr := os.Getenv("NEXARCH_STATUSPAGE_LISTEN_ADDR")
|
||||||
|
if addr == "" {
|
||||||
|
addr = ":8084"
|
||||||
|
}
|
||||||
|
intervalSeconds := 10
|
||||||
|
if v := os.Getenv("NEXARCH_STATUSPAGE_POLL_INTERVAL_SECONDS"); v != "" {
|
||||||
|
if parsed, err := strconv.Atoi(v); err == nil {
|
||||||
|
intervalSeconds = parsed
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ctx := context.Background()
|
||||||
|
pool, err := db.Connect(ctx, dsn)
|
||||||
|
if err != nil {
|
||||||
|
log.Fatalf("db: %v", err)
|
||||||
|
}
|
||||||
|
defer pool.Close()
|
||||||
|
|
||||||
|
store := statuspage.NewStore(pool)
|
||||||
|
checker := statuspage.NewHTTPChecker(2 * time.Second)
|
||||||
|
poller := statuspage.NewPoller(store, checker)
|
||||||
|
go poller.Run(ctx, time.Duration(intervalSeconds)*time.Second)
|
||||||
|
|
||||||
|
mux := http.NewServeMux()
|
||||||
|
mux.HandleFunc("/status/overview", withCORS(store.OverviewHandler))
|
||||||
|
mux.HandleFunc("/status/history", withCORS(store.HistoryHandler))
|
||||||
|
mux.HandleFunc("/healthz", func(w http.ResponseWriter, r *http.Request) { w.WriteHeader(http.StatusOK) })
|
||||||
|
|
||||||
|
log.Printf("statuspage-devserver listening on %s (poll-intervall: %ds)", addr, intervalSeconds)
|
||||||
|
log.Fatal(http.ListenAndServe(addr, mux))
|
||||||
|
}
|
||||||
|
|
||||||
|
func withCORS(next http.HandlerFunc) http.HandlerFunc {
|
||||||
|
return func(w http.ResponseWriter, r *http.Request) {
|
||||||
|
w.Header().Set("Access-Control-Allow-Origin", "*")
|
||||||
|
w.Header().Set("Access-Control-Allow-Methods", "GET, OPTIONS")
|
||||||
|
w.Header().Set("Access-Control-Allow-Headers", "Content-Type")
|
||||||
|
if r.Method == http.MethodOptions {
|
||||||
|
w.WriteHeader(http.StatusOK)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
next(w, r)
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,17 @@
|
|||||||
|
export const metadata = {
|
||||||
|
title: "NEXARCH Systemstatus",
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function RootLayout({
|
||||||
|
children,
|
||||||
|
}: {
|
||||||
|
children: React.ReactNode;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<html lang="de">
|
||||||
|
<body style={{ fontFamily: "system-ui, sans-serif", margin: 0, background: "#f5f6f8" }}>
|
||||||
|
{children}
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,44 @@
|
|||||||
|
// Duenner Client des OPS-02-Backends (internal/statuspage) — keine eigene
|
||||||
|
// Aggregations-/Polling-Logik im Frontend.
|
||||||
|
export type ModuleStatus = {
|
||||||
|
name: string;
|
||||||
|
status: "up" | "down";
|
||||||
|
last_checked?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type HistoryEntry = {
|
||||||
|
status: "up" | "down";
|
||||||
|
changed_at: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
function apiBase(): string {
|
||||||
|
const base = process.env.NEXT_PUBLIC_STATUSPAGE_API_URL;
|
||||||
|
if (!base) {
|
||||||
|
throw new Error(
|
||||||
|
"NEXT_PUBLIC_STATUSPAGE_API_URL ist nicht gesetzt (Umgebungsvariable erforderlich)"
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return base;
|
||||||
|
}
|
||||||
|
|
||||||
|
// fetchOverview holt den Status EINES Moduls unabhaengig vom Erfolg der
|
||||||
|
// anderen — ein Netzwerkfehler beim Abruf der Gesamtuebersicht wird vom
|
||||||
|
// Aufrufer (Page-Komponente) abgefangen, sodass ein nicht antwortendes
|
||||||
|
// Backend die Seite nicht zum Absturz bringt (Akzeptanzkriterium 2).
|
||||||
|
export async function fetchOverview(): Promise<ModuleStatus[]> {
|
||||||
|
const res = await fetch(`${apiBase()}/status/overview`, { cache: "no-store" });
|
||||||
|
if (!res.ok) {
|
||||||
|
throw new Error(`Uebersicht konnte nicht geladen werden (${res.status})`);
|
||||||
|
}
|
||||||
|
return res.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function fetchHistory(name: string): Promise<HistoryEntry[]> {
|
||||||
|
const res = await fetch(`${apiBase()}/status/history?name=${encodeURIComponent(name)}`, {
|
||||||
|
cache: "no-store",
|
||||||
|
});
|
||||||
|
if (!res.ok) {
|
||||||
|
throw new Error(`Verlauf konnte nicht geladen werden (${res.status})`);
|
||||||
|
}
|
||||||
|
return res.json();
|
||||||
|
}
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
/** @type {import('next').NextConfig} */
|
||||||
|
const nextConfig = {};
|
||||||
|
export default nextConfig;
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
{
|
||||||
|
"name": "nexarch-status-page",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "next dev",
|
||||||
|
"build": "next build",
|
||||||
|
"start": "next start",
|
||||||
|
"lint": "next lint"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"next": "14.2.35",
|
||||||
|
"react": "18.3.1",
|
||||||
|
"react-dom": "18.3.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/node": "20.14.9",
|
||||||
|
"@types/react": "18.3.3",
|
||||||
|
"@types/react-dom": "18.3.0",
|
||||||
|
"typescript": "5.5.3"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "es2017",
|
||||||
|
"lib": ["dom", "dom.iterable", "esnext"],
|
||||||
|
"allowJs": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"strict": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"module": "esnext",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"jsx": "preserve",
|
||||||
|
"incremental": true,
|
||||||
|
"plugins": [{ "name": "next" }],
|
||||||
|
"paths": { "@/*": ["./*"] }
|
||||||
|
},
|
||||||
|
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||||
|
"exclude": ["node_modules"]
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user