Initial commit — homelab dashboard v1.0

2026-03-14 16:16:58 +00:00
commit b8ae4d1385
9 changed files with 705 additions and 0 deletions
@@ -0,0 +1,161 @@
+// Intervalle de polling (ms)
+const POLL_INTERVAL = 10000;
+
+const $ = (sel) => document.querySelector(sel);
+
+// --- Formatage ---
+
+/** Convertit des octets en chaîne lisible (Mo/Go) */
+function formatBytes(bytes) {
+  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(0) + ' Ko';
+  if (bytes < 1024 * 1024 * 1024) return (bytes / (1024 * 1024)).toFixed(0) + ' Mo';
+  return (bytes / (1024 * 1024 * 1024)).toFixed(1) + ' Go';
+}
+
+/** Retourne la classe CSS du badge selon l'état */
+function badgeClass(state) {
+  const s = (state || '').toLowerCase();
+  if (s === 'running') return 'badge-running';
+  if (s === 'stopped' || s === 'exited') return 'badge-stopped';
+  if (s === 'paused') return 'badge-paused';
+  if (s === 'created') return 'badge-created';
+  return 'badge-unknown';
+}
+
+/** Retourne la classe de la barre selon le pourcentage */
+function barColorClass(pct) {
+  if (pct > 90) return 'critical';
+  if (pct > 70) return 'high';
+  return '';
+}
+
+// --- Rendu Proxmox ---
+
+function renderProxmox(data) {
+  const errorEl = $('#proxmox-error');
+  const gridEl = $('#proxmox-grid');
+
+  if (data.error) {
+    errorEl.textContent = data.error;
+    errorEl.classList.remove('hidden');
+    gridEl.innerHTML = '';
+    return;
+  }
+
+  errorEl.classList.add('hidden');
+  const containers = data.containers || [];
+
+  if (containers.length === 0) {
+    gridEl.innerHTML = '<div class="loading">Aucun LXC trouvé</div>';
+    return;
+  }
+
+  gridEl.innerHTML = containers.map((ct) => {
+    const cpuPct = (ct.cpu * 100).toFixed(1);
+    const ramPct = ct.maxmem > 0 ? ((ct.mem / ct.maxmem) * 100).toFixed(1) : 0;
+
+    return `
+      <div class="card">
+        <div class="card-header">
+          <span class="card-name" title="${ct.name}">${ct.name}</span>
+          <span class="badge ${badgeClass(ct.status)}">${ct.status}</span>
+        </div>
+        <div class="card-meta">
+          <span>Node: <strong>${ct.node}</strong> &middot; VMID: ${ct.vmid}</span>
+          ${ct.status === 'running' ? `
+            <div class="bar-container">
+              <span class="bar-label">CPU</span>
+              <div class="bar-track">
+                <div class="bar-fill cpu ${barColorClass(cpuPct)}" style="width:${cpuPct}%"></div>
+              </div>
+              <span class="bar-value">${cpuPct}%</span>
+            </div>
+            <div class="bar-container">
+              <span class="bar-label">RAM</span>
+              <div class="bar-track">
+                <div class="bar-fill ram ${barColorClass(ramPct)}" style="width:${ramPct}%"></div>
+              </div>
+              <span class="bar-value">${formatBytes(ct.mem)} / ${formatBytes(ct.maxmem)}</span>
+            </div>
+          ` : ''}
+        </div>
+      </div>
+    `;
+  }).join('');
+}
+
+// --- Rendu Portainer ---
+
+function renderPortainer(data) {
+  const errorEl = $('#portainer-error');
+  const gridEl = $('#portainer-grid');
+
+  if (data.error) {
+    errorEl.textContent = data.error;
+    errorEl.classList.remove('hidden');
+    gridEl.innerHTML = '';
+    return;
+  }
+
+  errorEl.classList.add('hidden');
+  const containers = data.containers || [];
+
+  if (containers.length === 0) {
+    gridEl.innerHTML = '<div class="loading">Aucun conteneur trouvé</div>';
+    return;
+  }
+
+  gridEl.innerHTML = containers.map((ct) => {
+    const stackHtml = ct.stack
+      ? `<span class="stack-tag">${ct.stack}</span>`
+      : '';
+
+    // Tronquer le nom d'image (retirer le registry si trop long)
+    const shortImage = ct.image.length > 45
+      ? '...' + ct.image.slice(-42)
+      : ct.image;
+
+    return `
+      <div class="card">
+        <div class="card-header">
+          <span class="card-name" title="${ct.name}">${ct.name}</span>
+          <span class="badge ${badgeClass(ct.state)}">${ct.state}</span>
+        </div>
+        <div class="card-meta">
+          <span title="${ct.image}">${shortImage}</span>
+          <span>
+            ${stackHtml}
+            ${ct.status ? `<span style="color:var(--text-muted)">${ct.status}</span>` : ''}
+          </span>
+        </div>
+      </div>
+    `;
+  }).join('');
+}
+
+// --- Polling ---
+
+async function fetchStatus() {
+  try {
+    const res = await fetch('/api/status');
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    const data = await res.json();
+
+    renderProxmox(data.proxmox);
+    renderPortainer(data.portainer);
+
+    // Mettre à jour le timestamp
+    const now = new Date(data.timestamp);
+    $('#last-update').textContent = `Mis à jour : ${now.toLocaleTimeString('fr-FR')}`;
+    $('#connection-status').className = 'badge badge-running';
+    $('#connection-status').textContent = 'OK';
+  } catch (err) {
+    $('#last-update').textContent = `Erreur: ${err.message}`;
+    $('#connection-status').className = 'badge badge-stopped';
+    $('#connection-status').textContent = 'ERR';
+  }
+}
+
+// Premier chargement puis polling
+fetchStatus();
+setInterval(fetchStatus, POLL_INTERVAL);