feat: land dashboard groundwork

2026-02-05 10:34:34 +01:00
commit d381c02946
@@ -0,0 +1,229 @@
+const portsTable = document.getElementById("ports-table");
+const tunnelsTable = document.getElementById("tunnels-table");
+const refreshPortsButton = document.getElementById("refresh-ports");
+const refreshTunnelsButton = document.getElementById("refresh-tunnels");
+const debugPanel = document.getElementById("debug-panel");
+const debugTitle = document.getElementById("debug-title");
+const debugContent = document.getElementById("debug-content");
+
+const REFRESH_INTERVAL_MS = 4000;
+let latestTunnels = [];
+
+async function fetchJson(url, options) {
+  const response = await fetch(url, options);
+  if (!response.ok) {
+    const payload = await response.json().catch(() => ({}));
+    const detail = payload.detail || "Errore inatteso.";
+    throw new Error(detail);
+  }
+  return response.json();
+}
+
+function escapeHtml(value) {
+  if (!value) {
+    return "";
+  }
+  return value
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}
+
+async function loadTunnelLogs(port) {
+  try {
+    const payload = await fetchJson(`/api/tunnels/${port}/logs`);
+    debugTitle.textContent = `Log tunnel ${port}`;
+    debugContent.textContent = payload.logs.join("\n") || "Nessun log disponibile.";
+    debugPanel.classList.add("visible");
+  } catch (error) {
+    debugTitle.textContent = `Log tunnel ${port}`;
+    debugContent.textContent = `Errore: ${error.message}`;
+    debugPanel.classList.add("visible");
+  }
+}
+
+function hideDebugPanel() {
+  debugPanel.classList.remove("visible");
+  debugTitle.textContent = "";
+  debugContent.textContent = "";
+}
+
+function renderPorts(ports, tunnels) {
+  if (!ports.length) {
+    portsTable.innerHTML = "<p>Nessuna porta in ascolto trovata.</p>";
+    return;
+  }
+
+  const tunnelMap = new Map();
+  tunnels.forEach((tunnel) => {
+    tunnelMap.set(tunnel.port, tunnel);
+  });
+
+  const rows = ports
+    .map((port) => {
+      const tunnel = tunnelMap.get(port.port);
+      const busy = Boolean(tunnel && tunnel.status !== "stopped");
+      const statusLabel = busy ? (tunnel.status || "running") : "libero";
+      const hasCommand = Boolean(port.command);
+      const commandCell = hasCommand
+        ? `<span class="mono">${escapeHtml(port.command)}</span>`
+        : "-";
+      const commandClass = hasCommand ? "" : "dim";
+      const user = escapeHtml(port.user || "-");
+      const container = escapeHtml(port.container || "-");
+      const local = escapeHtml(port.local_address || "-");
+      const service = escapeHtml(port.service || "-");
+      const protocol = escapeHtml((port.protocol || "tcp").toUpperCase());
+
+      return `
+      <div class="row">
+        <div class="cell">${port.port}</div>
+        <div class="cell">${protocol}</div>
+        <div class="cell">${service}</div>
+        <div class="cell">${user}</div>
+        <div class="cell ${commandClass}">${commandCell}</div>
+        <div class="cell">${container}</div>
+        <div class="cell">${local}</div>
+        <div class="cell">
+          <span class="status-pill ${busy ? "status-busy" : "status-free"}">${statusLabel}</span>
+        </div>
+        <div class="cell">
+          <button data-port="${port.port}" class="start-button" ${busy ? "disabled" : ""}>Avvia tunnel</button>
+        </div>
+      </div>
+    `;
+    })
+    .join("");
+
+  portsTable.innerHTML = `
+    <div class="row header">
+      <div class="cell">Porta</div>
+      <div class="cell">Protocollo</div>
+      <div class="cell">Servizio</div>
+      <div class="cell">Utente</div>
+      <div class="cell">Comando</div>
+      <div class="cell">Container</div>
+      <div class="cell">Indirizzo locale</div>
+      <div class="cell">Tunnel</div>
+      <div class="cell">Azioni</div>
+    </div>
+    ${rows}
+  `;
+
+  portsTable.querySelectorAll(".start-button").forEach((button) => {
+    button.addEventListener("click", async () => {
+      const port = Number(button.dataset.port);
+      button.disabled = true;
+      try {
+        await fetchJson("/api/tunnels", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ port }),
+        });
+        await refreshState();
+      } catch (error) {
+        alert(error.message);
+      } finally {
+        button.disabled = false;
+      }
+    });
+  });
+}
+
+function renderTunnels(tunnels) {
+  if (!tunnels.length) {
+    tunnelsTable.innerHTML = "<p>Nessun tunnel attivo.</p>";
+    return;
+  }
+
+  const rows = tunnels
+    .map((tunnel) => {
+      const hasCommand = Boolean(tunnel.command);
+      const commandCell = hasCommand
+        ? `<span class="mono">${escapeHtml(tunnel.command)}</span>`
+        : "-";
+      const commandClass = hasCommand ? "" : "dim";
+      const url = tunnel.url
+        ? `<a href="${escapeHtml(tunnel.url)}" target="_blank" rel="noreferrer">${escapeHtml(
+            tunnel.url,
+          )}</a>`
+        : "In attesa...";
+      const lastOutput = escapeHtml(tunnel.last_output || "-");
+      const status = escapeHtml(tunnel.status || "running");
+
+      return `
+      <div class="row">
+        <div class="cell">${tunnel.port}</div>
+        <div class="cell">${tunnel.pid || "-"}</div>
+        <div class="cell">${status}</div>
+        <div class="cell">${url}</div>
+        <div class="cell">${lastOutput}</div>
+        <div class="cell ${commandClass}">${commandCell}</div>
+        <div class="cell">
+          <button data-port="${tunnel.port}" class="logs-button">Log</button>
+          <button data-port="${tunnel.port}" class="stop-button">Ferma</button>
+        </div>
+      </div>
+    `;
+    })
+    .join("");
+
+  tunnelsTable.innerHTML = `
+    <div class="row header">
+      <div class="cell">Porta</div>
+      <div class="cell">PID</div>
+      <div class="cell">Stato</div>
+      <div class="cell">URL</div>
+      <div class="cell">Ultimo log</div>
+      <div class="cell">Comando</div>
+      <div class="cell">Azioni</div>
+    </div>
+    ${rows}
+  `;
+
+  tunnelsTable.querySelectorAll(".logs-button").forEach((button) => {
+    button.addEventListener("click", async () => {
+      const port = Number(button.dataset.port);
+      await loadTunnelLogs(port);
+    });
+  });
+
+  tunnelsTable.querySelectorAll(".stop-button").forEach((button) => {
+    button.addEventListener("click", async () => {
+      const port = Number(button.dataset.port);
+      button.disabled = true;
+      try {
+        await fetchJson(`/api/tunnels/${port}`, { method: "DELETE" });
+        await refreshState();
+      } catch (error) {
+        alert(error.message);
+      } finally {
+        button.disabled = false;
+      }
+    });
+  });
+}
+
+async function refreshState() {
+  try {
+    const [ports, tunnels] = await Promise.all([
+      fetchJson("/api/ports"),
+      fetchJson("/api/tunnels"),
+    ]);
+    latestTunnels = tunnels;
+    renderPorts(ports, tunnels);
+    renderTunnels(tunnels);
+  } catch (error) {
+    portsTable.innerHTML = `<p>Errore: ${error.message}</p>`;
+    tunnelsTable.innerHTML = `<p>Errore: ${error.message}</p>`;
+  }
+}
+
+refreshPortsButton.addEventListener("click", refreshState);
+refreshTunnelsButton.addEventListener("click", refreshState);
+document.getElementById("debug-close").addEventListener("click", hideDebugPanel);
+
+refreshState();
+setInterval(refreshState, REFRESH_INTERVAL_MS);
@@ -0,0 +1,160 @@
+:root {
+  color-scheme: light;
+  font-family: "Inter", "Segoe UI", sans-serif;
+  background: #f4f6fb;
+  color: #1a1d2b;
+}
+
+body {
+  margin: 0;
+}
+
+.page {
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 32px 24px 48px;
+}
+
+header {
+  margin-bottom: 24px;
+}
+
+header h1 {
+  margin: 0 0 8px;
+  font-size: 2rem;
+}
+
+header p {
+  margin: 0;
+  color: #3a3f55;
+}
+
+.card {
+  background: #ffffff;
+  border-radius: 16px;
+  padding: 20px;
+  margin-bottom: 20px;
+  box-shadow: 0 14px 40px rgba(31, 39, 67, 0.08);
+}
+
+.debug-panel {
+  display: none;
+}
+
+.debug-panel.visible {
+  display: block;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.card-header h2 {
+  margin: 0;
+  font-size: 1.25rem;
+}
+
+button {
+  border: none;
+  border-radius: 8px;
+  padding: 8px 14px;
+  background: #4c6fff;
+  color: white;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.logs-button {
+  background: #2f3b5b;
+  margin-right: 8px;
+}
+
+button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.table {
+  display: grid;
+  gap: 8px;
+}
+
+.row {
+  display: grid;
+  gap: 12px;
+  padding: 10px 12px;
+  border-radius: 10px;
+  background: #f9fafc;
+}
+
+.table.ports .row {
+  grid-template-columns: 0.6fr 0.7fr 1.3fr 0.9fr 2fr 1fr 1fr 0.8fr 0.9fr;
+  align-items: center;
+}
+
+.table.tunnels .row {
+  grid-template-columns: 0.8fr 1fr 1fr 2fr 2fr 1.5fr 1fr;
+  align-items: center;
+}
+
+.status-pill {
+  padding: 4px 10px;
+  border-radius: 999px;
+  font-size: 0.85rem;
+  text-transform: capitalize;
+  display: inline-block;
+}
+
+.status-free {
+  background: rgba(76, 111, 255, 0.15);
+  color: #4751ef;
+}
+
+.status-busy {
+  background: rgba(239, 68, 68, 0.15);
+  color: #dc2626;
+}
+
+.mono {
+  font-family: \"JetBrains Mono\", \"JetBrains Mono\", Menlo, Consolas, monospace;
+  font-size: 0.9rem;
+  display: inline-block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 16rem;
+}
+
+.dim {
+  color: #64748b;
+}
+
+.row.header {
+  background: transparent;
+  font-weight: 700;
+}
+
+.cell a {
+  color: #2d5bff;
+  text-decoration: none;
+}
+
+.debug-content {
+  background: #0f172a;
+  color: #e2e8f0;
+  padding: 16px;
+  border-radius: 12px;
+  font-size: 0.85rem;
+  max-height: 320px;
+  overflow: auto;
+  white-space: pre-wrap;
+}
+
+@media (max-width: 720px) {
+  .row {
+    grid-template-columns: 1fr;
+  }
+}