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

Beim Laden des Frontends werden per fetch die API-Endpunkte /alert-data und /outlier-report abgefragt.
Die JSON-Antworten werden im JS-Datenmodul verarbeitet und für die Darstellung normalisiert.
Die UI-Komponenten (z. B. Tabellen oder Diagramme) werden basierend auf diesen Daten aktualisiert.
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

3.2 KiB Raw Blame History Unescape Escape