Dashboard admin avec onglets (Tableau de bord / Metriques / Fichiers) + parse Prometheus humain

2026-04-24 08:07:14 +02:00
parent 2e84e212ea
commit d767b6e581
6 changed files with 1053 additions and 72 deletions
--- a/routes/admin.js
+++ b/routes/admin.js
@@ -1,10 +1,14 @@
-// Protected file listing (was the public root in the PHP version).
-// Now mounted at /admin so the new public UI can live at /.
+// Admin — dashboard, stats API, metrics UI, and the legacy file listing.
+//
+// All protected by session cookie (argon2id password). The login form is
+// rendered inline; everything else is served as static HTML from public/admin/
+// once authenticated.

-import { readdir, stat } from 'node:fs/promises';
+import { readdir, readFile, stat } from 'node:fs/promises';
 import { join } from 'node:path';
 import { ADMIN_PASSWORD_HASH, ROOT, TITLE } from '../config.js';
 import { verifyPassword } from '../lib/password.js';
+import { getMetricsForUI, getStats } from '../lib/stats.js';

 const HIDDEN = new Set([
  'node_modules',
@@ -39,54 +43,34 @@ function esc(s) {
    .replace(/'/g, '&#039;');
 }

-function formatBytes(bytes) {
-  const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];
-  let i = bytes > 0 ? Math.floor(Math.log(bytes) / Math.log(1024)) : 0;
-  if (i >= units.length) i = units.length - 1;
-  return `${bytes / 1024 ** i || 0} ${units[i]}`;
-}
-
-function pad(n) {
-  return n < 10 ? `0${n}` : String(n);
-}
-function fmtDate(ms) {
-  const d = new Date(ms);
-  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
-}
-
 function loginPage(error = '') {
  return `<!doctype html>
-<html lang="fr">
-<head>
-<meta charset="utf-8">
+<html lang="fr"><head><meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <title>Admin · ${esc(TITLE)}</title>
+<link rel="stylesheet" href="/style.css">
 <style>
-*, *::before, *::after { box-sizing: border-box; }
-body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background:#0b1220; color:#e5e7eb; display:flex; align-items:center; justify-content:center; min-height:100vh; margin:0; }
-.card { background:#111827; padding:24px; border-radius:12px; width:100%; max-width:360px; box-shadow:0 10px 30px rgba(0,0,0,.35); }
-h1 { font-size:18px; margin:0 0 16px; color:#f9fafb; }
-label { display:block; font-size:14px; margin-bottom:8px; color:#cbd5e1; }
-input[type=password]{ width:100%; padding:10px 12px; border:1px solid #334155; border-radius:8px; background:#0f172a; color:#e5e7eb; outline:none; }
-input[type=password]:focus{ border-color:#60a5fa; }
-.btn { margin-top:12px; width:100%; padding:10px 12px; border:0; border-radius:8px; background:#2563eb; color:white; font-weight:600; cursor:pointer; }
-.btn:hover { filter:brightness(1.05); }
-.err { color:#fca5a5; font-size:14px; margin-top:10px; min-height:18px; }
-</style>
-</head>
+body{display:flex;align-items:center;justify-content:center;min-height:100vh}
+.card{background:var(--bg-3);padding:24px;border-radius:12px;width:100%;max-width:360px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
+h1{font-size:18px;margin:0 0 16px;color:#f9fafb}
+label{display:block;font-size:14px;margin-bottom:8px;color:#cbd5e1}
+input[type=password]{width:100%;padding:10px 12px;border:1px solid #334155;border-radius:8px;background:#0f172a;color:#e5e7eb;outline:none}
+input[type=password]:focus{border-color:var(--accent-2)}
+.btn-login{margin-top:12px;width:100%;padding:10px 12px;border:0;border-radius:8px;background:#2563eb;color:white;font-weight:600;cursor:pointer}
+.err{color:var(--danger);font-size:14px;margin-top:10px;min-height:18px}
+</style></head>
 <body>
 <form class="card" method="post" autocomplete="off">
 <h1>Admin · ${esc(TITLE)}</h1>
 <label for="pw">Mot de passe</label>
 <input id="pw" name="password" type="password" required autofocus>
-<button class="btn" type="submit">Entrer</button>
+<button class="btn-login" type="submit">Entrer</button>
 <div class="err">${esc(error)}</div>
 </form>
-</body>
-</html>`;
+</body></html>`;
 }

-async function listingPage() {
+async function renderFilesList() {
  const names = await readdir(ROOT);
  const entries = [];
  for (const name of names) {
@@ -109,39 +93,11 @@ async function listingPage() {
    if (a.isDir !== b.isDir) return a.isDir ? -1 : 1;
    return a.name.toLowerCase().localeCompare(b.name.toLowerCase());
  });
-  const rows = entries
-    .map((e) => {
-      const href = encodeURIComponent(e.name);
-      return `<tr>
-      <td class="name"><a href="/admin/files/${href}${e.isDir ? '/' : ''}">${esc(e.name)}</a>${e.isDir ? '<span class="badge">dossier</span>' : ''}</td>
-      <td>${e.isDir ? '—' : esc(formatBytes(e.size))}</td>
-      <td>${esc(fmtDate(e.mtime))}</td>
-    </tr>`;
-    })
-    .join('');
-  return `<!doctype html>
-<html lang="fr"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
-<title>Admin · ${esc(TITLE)}</title>
-<style>
-body{ font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif; background:#0b1220; color:#e5e7eb; margin:0; }
-header{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding:16px 20px; background:#0f172a; position:sticky; top:0; }
-h1{ font-size:18px; margin:0; color:#f9fafb; }
-a.logout{ color:#93c5fd; text-decoration:none; font-size:14px; }
-.wrap{ max-width:1100px; margin:20px auto; padding:0 16px; }
-table{ width:100%; border-collapse:collapse; background:#111827; border-radius:12px; overflow:hidden; }
-th,td{ padding:12px 14px; border-bottom:1px solid #1f2937; text-align:left; font-size:14px; }
-th{ background:#0f172a; color:#cbd5e1; font-weight:600; }
-tr:hover td{ background:#0b1324; }
-.name a{ color:#93c5fd; text-decoration:none; }
-.name a:hover{ text-decoration:underline; }
-.badge{ font-size:11px; padding:2px 8px; border-radius:999px; background:#1f2937; color:#cbd5e1; margin-left:8px; }
-</style></head>
-<body><header><h1>Admin · ${esc(TITLE)}</h1><a class="logout" href="/admin?logout=1">Se déconnecter</a></header>
-<div class="wrap"><table><thead><tr><th>Nom</th><th>Taille</th><th>Modifié</th></tr></thead><tbody>${rows}</tbody></table></div>
-</body></html>`;
+  return entries;
 }

 export default async function adminRoutes(fastify) {
+  // ---- Login / logout / dashboard shell ----
  fastify.get('/admin', async (req, reply) => {
    reply.header('Content-Type', 'text/html; charset=utf-8');
    if (req.query?.logout != null) {
@@ -149,17 +105,41 @@ export default async function adminRoutes(fastify) {
      return reply.redirect('/admin');
    }
    if (!req.session.get('auth_ok')) return loginPage();
-    return listingPage();
+    // Serve the dashboard SPA
+    return reply.send(await readFile(join(ROOT, 'public', 'admin.html')));
  });

  fastify.post('/admin', async (req, reply) => {
    reply.header('Content-Type', 'text/html; charset=utf-8');
-    const submitted = req.body?.password ?? '';
-    const ok = await verifyPassword(ADMIN_PASSWORD_HASH, submitted);
+    const ok = await verifyPassword(ADMIN_PASSWORD_HASH, req.body?.password ?? '');
    if (ok) {
      req.session.set('auth_ok', true);
      return reply.redirect('/admin');
    }
    return loginPage('Mot de passe incorrect.');
  });
+
+  // ---- JSON APIs (auth required) ----
+  function requireAuth(req, reply) {
+    if (!req.session.get('auth_ok')) {
+      reply.code(401).send({ error: 'auth required' });
+      return false;
+    }
+    return true;
+  }
+
+  fastify.get('/admin/api/stats', async (req, reply) => {
+    if (!requireAuth(req, reply)) return;
+    return getStats();
+  });
+
+  fastify.get('/admin/api/metrics', async (req, reply) => {
+    if (!requireAuth(req, reply)) return;
+    return getMetricsForUI();
+  });
+
+  fastify.get('/admin/api/files', async (req, reply) => {
+    if (!requireAuth(req, reply)) return;
+    return { entries: await renderFilesList() };
+  });
 }