max_only_alert_analysis/visualization_ui

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