cpu_spike_analysis/spike_visualizer

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:

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