eBPF Write Hooks Analysis – Ergebnisse Visualisierung

Ziel der Anwendung

Diese browserbasierte Weboberfläche dient zur Darstellung und Exploration der Analyseergebnisse der eBPF write_pre und write_post Hooks sowie deren Einfluss auf Read-Operationen.

Die Anwendung bietet eine interaktive Visualisierung für Entwickler und Systemanalysten, um zeitliche Zusammenhänge zwischen Schreib- und Leseereignissen zu verstehen und mögliche Optimierungspunkte zu identifizieren.

Hauptfunktionen

Interaktive Timeline: Darstellung der write_pre und write_post Ereignisse.
Korrelationen: Beziehungen zwischen Writes und Reads werden hervorgehoben.
Filter & Suche: Nach corr_id und Hook-Typ filterbar.
Statistische Kennzahlen: Überblick über Event-Zahlen und zeitliche Abstände.
Daten laden: Ergebnissatz wird per API vom Endpoint /analyze_results geladen.
Responsives Layout: Nutzt CSS-Komponenten für verschiedene Bildschirmgrößen.

Datenfluss

Laden: Die Anwendung nutzt GET /analyze_results, um Analyseergebnisse zu beziehen.
Verarbeitung: Modul dataProcessor.js aggregiert und normalisiert die Daten.
Darstellung: Diagramme und Tabellen werden dynamisch in den DOM gerendert.
Interaktion: User-Filterungen oder Such-Eingaben führen zu einer Re-Render-Phase des UI.

API Überblick

Endpoint: /analyze_results
Methode: GET

Optionale Parameter:

filter=corr_id – Filtert Ergebnisse nach korrelierter ID.
type=hook – Filtert nach Event-Typ (write_pre, write_post, read).

Erwartete Antwortstruktur:

[
  {
    "corr_id": "string",
    "type": "write_pre | write_post | read",
    "timestamp": "epoch or iso_datetime",
    "details": { ... }
  }
]

Zweck: Dieser Endpoint liefert strukturierte eBPF-Ereignisdaten zur Visualisierung und Analyse.

Projektstruktur (Kurzüberblick)

project-root/
├── index.html              # Hauptseite mit Einbindung der JS- und CSS-Module
├── js/
│   ├── app.js              # Initialisierung und Hauptlogik
│   ├── api.js              # Fetch-Logik für /analyze_results
│   ├── dataProcessor.js    # Datenaufbereitung und Berechnungen
│   ├── ui/
│   │   ├── timeline.js     # Timeline-Komponente
│   │   ├── filters.js      # Filter- und Suchelemente
│   │   └── stats.js        # Statistische Anzeigen
├── css/
│   ├── base.css            # Grundlayout, Variablen, Theme
│   ├── components.css      # UI-Komponenten
│   └── responsive.css      # Media Queries für mobile Anpassungen
└── README.md               # Projektdokumentation

Responsives Layout

Mobile-first Design mit intuitiven Filter-Controls.
Timeline-Darstellung passt sich an kleine und große Viewports an.
Barrierefreiheit: ARIA-Attribute und semantische Struktur.

3 KiB Raw Blame History Unescape Escape