69 lines
2.7 KiB
Markdown
69 lines
2.7 KiB
Markdown
# P99 Spike Analysis Visualization
|
||
|
||
## Zielsetzung
|
||
Dieses Web-Dashboard dient der Visualisierung und Analyse von P99-Spikes innerhalb eines Systems. Es zeigt zeitliche Muster sowie mögliche Zusammenhänge mit Migration-Events, Clocksource-Wechseln und CPU-bezogenen Auffälligkeiten. Ziel ist es, Performance-Ausreißer schnell nachvollziehbar und interaktiv analysierbar zu machen.
|
||
|
||
## Kernfunktionen
|
||
- **Zeitreihen- und Scatter-Plots** zur Visualisierung der Spikedaten
|
||
- **Filterfunktionen** nach Event-Typ (Migration, Clocksource-Wechsel, CPU-ID) und Zeitfenster
|
||
- **Interaktive Selektion** einzelner Spikes zur Anzeige detaillierter Werte
|
||
- **Statistische Kennzahlen** wie Median, P99 und Δ-Tail
|
||
- **Responsives Interface** für Desktop und mobile Geräte
|
||
|
||
## Datenfluss
|
||
1. Die Anwendung ruft über den Endpoint `/api/spike_data` die analysierten P99-Spikedaten (JSON) ab.
|
||
2. Die Daten werden clientseitig aufbereitet und mithilfe einer Chart-Komponente dargestellt.
|
||
3. Benutzer wählen Filter, um die dargestellten Daten einzugrenzen oder neue Requests zu senden.
|
||
4. Änderungen werden dynamisch gerendert, ohne die Seite neu zu laden.
|
||
|
||
## API-Integration
|
||
### Endpoint
|
||
`GET /api/spike_data`
|
||
|
||
**Erwartete Parameter:**
|
||
- `time_range` – Zeitbereich für die Abfrage
|
||
- `event_type` – Typ des Performance-Events (z. B. Migration, Clocksource-Wechsel, CPU)
|
||
- `cpu_id` – CPU-Identifikator zur Filterung
|
||
|
||
**Antwortstruktur:**
|
||
```json
|
||
[
|
||
{
|
||
"timestamp": 1732830000,
|
||
"type": "migration",
|
||
"cpu": 3,
|
||
"value": 19.2
|
||
}
|
||
]
|
||
```
|
||
|
||
Die JavaScript-Logik für den API-Aufruf ist im Modul `js/api.js` implementiert.
|
||
|
||
## Ordnerstruktur
|
||
```
|
||
/ (Projektwurzel)
|
||
│
|
||
├── index.html # Einstiegspunkt der Anwendung
|
||
├── css/
|
||
│ └── style.css # Zentrales Layout und Responsive-Design
|
||
├── js/
|
||
│ ├── api.js # Kommunikation mit /api/spike_data
|
||
│ ├── charts.js # Darstellung der Spikedaten mittels Charts
|
||
│ └── app.js # Initialisierung, UI-Logik und Event-Handling
|
||
└── README.md # Projektdokumentation
|
||
```
|
||
|
||
## Nutzung
|
||
1. Projektdateien lokal oder auf einem Webserver bereitstellen.
|
||
2. Sicherstellen, dass der API-Endpunkt `/api/spike_data` erreichbar ist.
|
||
3. `index.html` im Browser öffnen.
|
||
4. Über die verfügbaren Filter Datenbereiche oder Eventtypen auswählen.
|
||
5. Diagramme und Kennzahlen werden automatisch aktualisiert.
|
||
|
||
## Technische Hinweise
|
||
- Es werden keine Bild- oder Icon-Ressourcen geladen.
|
||
- Die Anwendung ist vollständig clientseitig, abgesehen vom API-Request.
|
||
- Defensives Error-Handling sorgt für Stabilität auch bei fehlerhaften API-Antworten.
|
||
|
||
## Lizenz und Rechte
|
||
© 2026 Donau2Space.de
|