76 lines
No EOL
3.2 KiB
Markdown
76 lines
No EOL
3.2 KiB
Markdown
# 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 |