71 lines
No EOL
2.6 KiB
Markdown
71 lines
No EOL
2.6 KiB
Markdown
# Spike Visualizer
|
||
|
||
## Übersicht
|
||
Der **Spike Visualizer** ist eine Weboberfläche zur interaktiven Analyse von CPU-Spikes, die aus Scheduler-Events und CPU-Migrationen abgeleitet wurden. Ziel ist es, Muster und Ausreißer in den Spike-Daten grafisch zu erkennen und mit Metriken wie *reorder_score* und *publish_rate* zu untersuchen.
|
||
|
||
## Ziel
|
||
Darstellung und Exploration klassifizierter CPU-Spikes durch eine interaktive Zeitleiste. Benutzer können Filter anwenden, Metriken untersuchen und Migrationen sichtbar machen, um Systemverhalten im Zeitverlauf zu verstehen.
|
||
|
||
## Kernfunktionen
|
||
- Interaktive Zeitleiste mit CPU-Spikes
|
||
- Filtermöglichkeiten nach CPU-ID, reorder_score und Zeitfenster
|
||
- Tooltip mit Eventdetails (publish_rate, reorder_score)
|
||
- Optionale Einblendung von Migrationen und Eventtypen
|
||
- Dynamisches Nachladen der Spike-Daten via API (`/api/spikes`)
|
||
- Zusammenfassung der wichtigsten Metriken oberhalb der Grafik
|
||
- Responsives Layout mit anpassbarer Diagrammansicht
|
||
|
||
## Datenfluss
|
||
1. Beim Laden der Seite ruft das Frontend per `GET /api/spikes` Spike-Daten als JSON ab.
|
||
2. Die Daten werden clientseitig nach CPU, Zeit und reorder_score gefiltert.
|
||
3. D3.js visualisiert die Daten als Timeline oder Scatterplot.
|
||
4. Benutzerinteraktionen (Filteränderung, Mouseover) aktualisieren Diagramm und Metriken in Echtzeit.
|
||
|
||
## API-Nutzung
|
||
### Route: `/api/spikes`
|
||
- **Methode:** `GET`
|
||
- **Zweck:** Abrufen der klassifizierten CPU-Spike-Daten
|
||
- **Optionale Parameter:**
|
||
- `cpu_id`
|
||
- `start_time`
|
||
- `end_time`
|
||
- **Erwartete Antwort:**
|
||
```json
|
||
[
|
||
{
|
||
"id": 12,
|
||
"cpu_id": 0,
|
||
"timestamp": 1738393200,
|
||
"reorder_score": 0.86,
|
||
"publish_rate": 52.7,
|
||
"migration_flag": true
|
||
}
|
||
]
|
||
```
|
||
|
||
## Ordnerstruktur
|
||
```
|
||
spike_visualizer/
|
||
│
|
||
├── index.html # Einstiegspunkt der Web-App
|
||
├── css/
|
||
│ └── style.css # Layout und Farbdefinition
|
||
├── js/
|
||
│ ├── app.js # Initialisierung und Visualisierung
|
||
│ ├── api.js # Schnittstelle zu /api/spikes
|
||
│ └── filters.js # Filterlogik und UI-Events
|
||
└── README.md # Diese Dokumentation
|
||
```
|
||
|
||
## Nutzung
|
||
1. Projektverzeichnis aufrufen und lokalen Webserver starten.
|
||
2. Browser öffnen und `index.html` laden.
|
||
3. Daten werden automatisch über `/api/spikes` geladen.
|
||
4. Filter und Interaktionen nutzen, um die Visualisierung anzupassen.
|
||
|
||
## Anforderungen
|
||
- Moderner Browser mit aktiviertem JavaScript
|
||
- Zugriff auf eine API-Instanz, die `/api/spikes` bereitstellt
|
||
|
||
## Lizenz und Hinweise
|
||
© 2026 Donau2Space.de |