Mika/eBPF_Write_Hooks_Analysis
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add results_visualization/index.html

Browse source
This commit is contained in:
Mika 2026-01-18 17:11:06 +00:00
commit 2e9a82a2c4
1 changed files with 67 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
results_visualization/index.html Normal file
View file

@ -0,0 +1,67 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>eBPF Write Hooks Analyse</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<header class="app-header flex align-center" role="banner">
<h1 class="app-header__title">eBPF Write Hooks Analyse</h1>
</header>
<main role="main">
<section id="filter-panel" class="filter-panel" aria-label="Filterbereich">
<form class="filter-panel__form" aria-label="Filterformular">
<label for="corrIdInput">corr_id:</label>
<input type="text" id="corrIdInput" name="corr_id" placeholder="z.B. 42" />
<label for="hookTypeSelect">Hook-Typ:</label>
<select id="hookTypeSelect" name="hook_type">
<option value="">Alle</option>
<option value="write_pre">write_pre</option>
<option value="write_post">write_post</option>
<option value="read">read</option>
</select>
<button type="button" id="filterApplyBtn">Anwenden</button>
</form>
</section>
<section id="timeline-panel" class="timeline-panel" aria-label="Timeline der Ereignisse">
<div class="timeline-panel__content" role="region" aria-live="polite">
<!-- Interaktive Timeline wird hier dynamisch gerendert -->
</div>
</section>
<section id="stats-summary" class="stats-summary" aria-label="Statistische Zusammenfassung">
<div class="stats-summary__grid">
<!-- Statistiken (Anzahl Events, Dauer, etc.) werden dynamisch eingefügt -->
</div>
</section>
<section id="data-table" class="data-table" aria-label="Tabellarische Ergebnisdarstellung">
<table class="data-table__table">
<thead>
<tr>
<th>corr_id</th>
<th>Typ</th>
<th>Timestamp</th>
<th>Details</th>
</tr>
</thead>
<tbody>
<!-- Datenzeilen werden hier via JS eingefügt -->
</tbody>
</table>
</section>
</main>
<footer class="app-footer text-small" role="contentinfo">
<p>© 2026 Donau2Space.de – Analyseoberfläche für eBPF Write Hooks</p>
</footer>
<script type="module" src="js/app.js"></script>
</body>
</html>