p99_spike_analysis/results_visualization

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:

[
  {
    "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