homelab-dashboard/public/app.js

// 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);