diff --git a/visualization_ui/README.md b/visualization_ui/README.md new file mode 100644 index 0000000..b546ba7 --- /dev/null +++ b/visualization_ui/README.md @@ -0,0 +1,76 @@ +# Visualization UI – Max-only Alert Analysis + +## Ziel der Anwendung +Diese Weboberfläche dient zur **Visualisierung und Analyse von Max-only Alert Daten** sowie der dazugehörigen **Outlier-Berichte**. Ziel ist es, den Zustand und die Metriken von Alert-Daten (insbesondere Latenz und Retry-bezogene Werte) interaktiv und verständlich darzustellen. + +--- + +## Hauptfunktionen +- Interaktive Darstellung der Max-only Alert Daten (Tabellen- oder Chart-basiert) +- Visualisierung der Outlier-Analyse mit Fokus auf **Latenz**, **Retry-Verhalten** und **Bandbreitenindikatoren** +- **API-Integration** zum Abruf der Datenquellen: + - `/alert-data` – liefert Alerts + - `/outlier-report` – liefert Ausreißeranalysen +- Filterung und Auswahlmöglichkeiten (z. B. nach Run-ID oder Zeitintervall) +- **Responsive Benutzeroberfläche** mit Lade- und Statusindikatoren +- **Manuelle Aktualisierung** der Daten per Refresh oder Benutzerinteraktion + +--- + +## Datenfluss +1. Beim Laden des Frontends werden per `fetch` die API-Endpunkte `/alert-data` und `/outlier-report` abgefragt. +2. Die JSON-Antworten werden im JS-Datenmodul verarbeitet und für die Darstellung normalisiert. +3. Die UI-Komponenten (z. B. Tabellen oder Diagramme) werden basierend auf diesen Daten aktualisiert. +4. Nutzerinteraktionen (Filter, Reload) führen zu neuen API-Requests und visuellen Updates. + +### Vereinfachte Ablaufübersicht +``` +[Browser/Frontend] + ↓ fetch GET /alert-data +[Backend liefert Alert-Daten-Array] + ↓ Datenaufbereitung (JS) + ↓ UI-Aktualisierung (Alerts) + +[Browser/Frontend] + ↓ fetch GET /outlier-report +[Backend liefert Analyse-Datenobjekt] + ↓ Visualisierung (z. B. Chart) +``` + +--- + +## API-Integration +| Endpoint | Methode | Beschreibung | Erwartete Antwort | +|-----------|----------|---------------|-------------------| +| `/alert-data` | GET | Liefert Max-only Alert-Daten zur Analyse. | Array von Alert-Objekten mit Feldern wie `corr_id`, `stratum`, `expires_at_dist_hours`, `retry_total_overhead_ms` | +| `/outlier-report` | GET | Statistische Kennwerte und Bandbreiten zum Outlier-Verhalten. | JSON-Objekt mit Kennwerten (`p95`, `p99`, `retry_overheads`) | + +--- + +## Verzeichnisstruktur +``` +visualization_ui/ +├── index.html # Einstiegspunkt des Frontends +├── js/ +│ ├── app.js # Initialisierung und Datensteuerung +│ ├── api.js # Fetch-Aufrufe zu /alert-data und /outlier-report +│ ├── ui-renderer.js # Generiert DOM-Elemente für Tabelle und Charts +├── css/ +│ ├── styles.css # Basis-Layout und Komponenten-Styling +│ └── responsive.css # Media Queries für mobile Anzeigen +├── README.md # (diese Datei) +└── package.json # (optional, falls Build-Tools genutzt werden) +``` + +--- + +## Entwicklungs- und Architekturhinweise +- ES6+ JavaScript mit modularer Struktur (`import`/`export`) +- Mobile-first Design und Barrierefreiheit (ARIA-Attribute, klare Kontraste) +- API-Kommunikation ausschließlich per `fetch` (keine externen Libraries notwendig) +- Keine grafischen oder extern gehosteten Assets – Darstellung nur über HTML/CSS/JS + +--- + +## Copyright +© 2026 Donau2Space.de \ No newline at end of file