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

Die Anwendung ruft über den Endpoint /api/spike_data die analysierten P99-Spikedaten (JSON) ab.
Die Daten werden clientseitig aufbereitet und mithilfe einer Chart-Komponente dargestellt.
Benutzer wählen Filter, um die dargestellten Daten einzugrenzen oder neue Requests zu senden.
Ä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

Projektdateien lokal oder auf einem Webserver bereitstellen.
Sicherstellen, dass der API-Endpunkt /api/spike_data erreichbar ist.
index.html im Browser öffnen.
Über die verfügbaren Filter Datenbereiche oder Eventtypen auswählen.
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.

2.7 KiB Raw Blame History Unescape Escape