115 lines
4.8 KiB
HTML
115 lines
4.8 KiB
HTML
|
<!doctype html>
|
||
|
|
<html lang="fr">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
|
|
<meta name="theme-color" content="#0b1220">
|
||
|
|
<title>proxytmdb · Admin</title>
|
||
|
|
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='6' fill='%2301b4e4'/%3E%3Ctext x='16' y='22' font-family='sans-serif' font-size='18' font-weight='bold' text-anchor='middle' fill='%23000'%3Et%3C/text%3E%3C/svg%3E">
|
||
|
|
<link rel="stylesheet" href="/style.css">
|
||
|
|
<link rel="stylesheet" href="/admin.css">
|
||
|
|
</head>
|
||
|
|
<body class="admin">
|
||
|
|
<header class="topbar">
|
||
|
|
<a class="brand" href="/admin">
|
||
|
|
<span class="brand-mark">t</span>
|
||
|
|
<span class="brand-text">proxytmdb · <span style="color:var(--text-muted)">admin</span></span>
|
||
|
|
</a>
|
||
|
|
<nav class="tabs" id="tabs">
|
||
|
|
<button type="button" class="tab active" data-tab="dashboard">Tableau de bord</button>
|
||
|
|
<button type="button" class="tab" data-tab="metrics">Métriques</button>
|
||
|
|
<button type="button" class="tab" data-tab="files">Fichiers</button>
|
||
|
|
</nav>
|
||
|
|
<div class="topbar-actions">
|
||
|
|
<a class="nav-link" href="/">← Retour</a>
|
||
|
|
<a class="nav-link" href="/admin?logout=1">Se déconnecter</a>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<main id="main-admin">
|
||
|
|
<section id="view-dashboard" class="view active">
|
||
|
|
<div class="stat-grid">
|
||
|
|
<div class="stat-card" id="card-cron">
|
||
|
|
<h3>Dernier cron</h3>
|
||
|
|
<div class="stat-value" id="cron-status">—</div>
|
||
|
|
<div class="stat-sub" id="cron-when">—</div>
|
||
|
|
<div class="stat-sub" id="cron-duration">—</div>
|
||
|
|
</div>
|
||
|
|
<div class="stat-card" id="card-movies">
|
||
|
|
<h3>Films (TMDB)</h3>
|
||
|
|
<div class="stat-value" id="movies-count">—</div>
|
||
|
|
<div class="stat-sub"><span id="movies-imdb">—</span> avec mapping IMDb</div>
|
||
|
|
</div>
|
||
|
|
<div class="stat-card" id="card-tv">
|
||
|
|
<h3>Séries (TMDB)</h3>
|
||
|
|
<div class="stat-value" id="tv-count">—</div>
|
||
|
|
<div class="stat-sub"><span id="tv-imdb">—</span> avec mapping IMDb</div>
|
||
|
|
</div>
|
||
|
|
<div class="stat-card" id="card-imdb">
|
||
|
|
<h3>Notes IMDb</h3>
|
||
|
|
<div class="stat-value" id="imdb-count">—</div>
|
||
|
|
<div class="stat-sub">chargées en mémoire</div>
|
||
|
|
</div>
|
||
|
|
<div class="stat-card" id="card-cache">
|
||
|
|
<h3>Cache recherche</h3>
|
||
|
|
<div class="stat-value" id="cache-hit-rate">—</div>
|
||
|
|
<div class="stat-sub"><span id="cache-hits">—</span> hits · <span id="cache-misses">—</span> misses</div>
|
||
|
|
</div>
|
||
|
|
<div class="stat-card" id="card-process">
|
||
|
|
<h3>Process</h3>
|
||
|
|
<div class="stat-value" id="process-memory">—</div>
|
||
|
|
<div class="stat-sub" id="process-uptime">—</div>
|
||
|
|
<div class="stat-sub" id="process-node">—</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<section class="panel">
|
||
|
|
<h2>Utilisation disque</h2>
|
||
|
|
<div id="disk-bars" class="disk-bars"></div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="panel">
|
||
|
|
<h2>Résumé du dernier cron</h2>
|
||
|
|
<div class="cron-summary" id="cron-summary"></div>
|
||
|
|
<details class="cron-log-wrapper">
|
||
|
|
<summary>Fin du log du cron (50 dernières lignes)</summary>
|
||
|
|
<pre id="cron-log" class="cron-log">—</pre>
|
||
|
|
</details>
|
||
|
|
</section>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section id="view-metrics" class="view">
|
||
|
|
<div class="panel">
|
||
|
|
<h2>HTTP · requêtes par route</h2>
|
||
|
|
<table class="tbl" id="tbl-http"><thead><tr><th>Méthode</th><th>Route</th><th>Status</th><th>Requêtes</th></tr></thead><tbody></tbody></table>
|
||
|
|
</div>
|
||
|
|
<div class="panel">
|
||
|
|
<h2>HTTP · p50 / p95 par route</h2>
|
||
|
|
<table class="tbl" id="tbl-http-latency"><thead><tr><th>Méthode</th><th>Route</th><th>p50 (ms)</th><th>p95 (ms)</th><th>Total</th></tr></thead><tbody></tbody></table>
|
||
|
|
</div>
|
||
|
|
<div class="panel">
|
||
|
|
<h2>Compteurs internes</h2>
|
||
|
|
<div class="kv" id="kv-counters"></div>
|
||
|
|
</div>
|
||
|
|
<div class="panel">
|
||
|
|
<h2>Process Node</h2>
|
||
|
|
<div class="kv" id="kv-process"></div>
|
||
|
|
</div>
|
||
|
|
<p class="footnote">Données brutes format Prometheus disponibles sur <a href="/metrics" target="_blank">/metrics</a>.</p>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section id="view-files" class="view">
|
||
|
|
<div class="panel">
|
||
|
|
<h2>Fichiers du projet</h2>
|
||
|
|
<p class="footnote">Cliquer ouvre le fichier servi statiquement sous <code>/admin/files/</code>.</p>
|
||
|
|
<table class="tbl" id="tbl-files"><thead><tr><th>Nom</th><th>Taille</th><th>Modifié</th></tr></thead><tbody></tbody></table>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<footer class="footer"><span id="refresh-status">—</span></footer>
|
||
|
|
|
||
|
|
<script type="module" src="/admin.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|