70 lines
3 KiB
Markdown
70 lines
3 KiB
Markdown
# 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
|
||
1. **Laden:** Die Anwendung nutzt `GET /analyze_results`, um Analyseergebnisse zu beziehen.
|
||
2. **Verarbeitung:** Modul `dataProcessor.js` aggregiert und normalisiert die Daten.
|
||
3. **Darstellung:** Diagramme und Tabellen werden dynamisch in den DOM gerendert.
|
||
4. **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:**
|
||
```json
|
||
[
|
||
{
|
||
"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.
|
||
|
||
## Lizenz und Copyright
|
||
© 2026 Donau2Space.de
|