88 lines
No EOL
2.6 KiB
Markdown
88 lines
No EOL
2.6 KiB
Markdown
# Trace Visualization – Timekeeping Analysis
|
||
|
||
## Zweck
|
||
Dieses Frontend dient zur Visualisierung und Analyse von Zeitmessdaten, die aus BPF-Traces gewonnen werden. Ziel ist es, die Auswirkungen von **WF_MIGRATED** auf das Task-Scheduling und das Timekeeping anschaulich darzustellen. Nutzer können die Ergebnisse interaktiv filtern und grafisch untersuchen.
|
||
|
||
---
|
||
|
||
## Hauptfunktionen
|
||
- Abruf der Analyseergebnisse über die API-Route `/api/get-analysis`
|
||
- Diagramm-basierte Visualisierung von Zeitsprüngen und WF_MIGRATED-Effekten
|
||
- Filterung nach Laufbedingungen (`Idle` oder `Last`)
|
||
- Anzeige von Medianwerten und Varianz je Datensatz
|
||
- Interaktive Zeitleiste zur Task-Scheduling-Darstellung
|
||
- Statistik-Panel mit signifikanten Abweichungen
|
||
|
||
---
|
||
|
||
## Datenfluss
|
||
1. Das Frontend ruft die Analyseergebnisse über `/api/get-analysis` (HTTP GET) ab.
|
||
2. Die JSON-Daten enthalten eine Liste von Läufen (`runs[]`) mit Feldern:
|
||
- `type`
|
||
- `median_shift`
|
||
- `variance`
|
||
- `migrated_ratio`
|
||
- `offset_constant`
|
||
3. Diese Daten werden durch JavaScript-Module verarbeitet und in Diagramm- sowie Tabellenkomponenten visualisiert.
|
||
4. Bei Änderung von Filterparametern werden die Daten neu geladen und die Darstellung entsprechend aktualisiert.
|
||
|
||
---
|
||
|
||
## Projektstruktur
|
||
```
|
||
project-root/
|
||
│
|
||
├── js/
|
||
│ ├── app.js → Initialisierung und Steuerung der UI-Logik
|
||
│ ├── api.js → Abruf der Analyseergebnisse über /api/get-analysis
|
||
│ ├── charts.js → Darstellung der Zeitverläufe und WF_MIGRATED-Effekte
|
||
│
|
||
├── css/
|
||
│ └── style.css → Design und Layout
|
||
│
|
||
├── index.html → Einstiegspunkt der Anwendung
|
||
└── README.md → Dieses Dokument
|
||
```
|
||
|
||
---
|
||
|
||
## Nutzung
|
||
1. Stelle sicher, dass der Backend-Endpunkt `/api/get-analysis` erreichbar ist.
|
||
2. Öffne `index.html` im Browser.
|
||
3. Verwende die Filteroptionen, um zwischen Idle- und Last-Bedingungen zu wechseln.
|
||
4. Die Diagramme und Panels aktualisieren sich automatisch basierend auf den API-Daten.
|
||
|
||
---
|
||
|
||
## API-Referenz
|
||
**Pfad:** `/api/get-analysis`
|
||
**Methode:** `GET`
|
||
**Parameter:**
|
||
- `filter` *(optional)* → `idle` | `load`
|
||
|
||
**Erwartetes Response-Format:**
|
||
```json
|
||
{
|
||
"runs": [
|
||
{
|
||
"type": "idle",
|
||
"median_shift": 0.0021,
|
||
"variance": 0.0012,
|
||
"migrated_ratio": 0.35,
|
||
"offset_constant": -0.0003
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## Technischer Hinweis
|
||
- Die Diagramme werden mit **Chart.js** visualisiert.
|
||
- Kein Tracking, keine externen Bild- oder Icon-Assets.
|
||
- Der Code folgt einer modularen Struktur ohne globale Variablenabhängigkeiten.
|
||
|
||
---
|
||
|
||
## Lizenz und Copyright
|
||
© 2025 Donau2Space.de |