✨feature: Scan progress and timing features

app/static/app.js

@@ -4,6 +4,11 @@ const portsListEl = document.getElementById('portsList');
 const statusText = document.getElementById('statusText');
 const scanBtn = document.getElementById('scanBtn');
 const subnetInput = document.getElementById('subnetInput');
+const scanProgressCard = document.getElementById('scanProgressCard');
+const scanProgressTitle = document.getElementById('scanProgressTitle');
+const scanProgressPercent = document.getElementById('scanProgressPercent');
+const scanProgressFill = document.getElementById('scanProgressFill');
+const scanProgressDetail = document.getElementById('scanProgressDetail');
 
 let devices = [];
 let selectedDeviceId = null;
@@ -12,6 +17,45 @@ function setStatus(msg) {
   statusText.textContent = msg;
 }
 
+function formatDuration(totalSeconds) {
+  if (totalSeconds == null || Number.isNaN(Number(totalSeconds))) return '-';
+  const seconds = Math.max(0, Math.floor(Number(totalSeconds)));
+  const h = Math.floor(seconds / 3600);
+  const m = Math.floor((seconds % 3600) / 60);
+  const s = seconds % 60;
+  if (h > 0) return `${h}h ${m}m ${s}s`;
+  if (m > 0) return `${m}m ${s}s`;
+  return `${s}s`;
+}
+
+function renderScanProgress(progress) {
+  if (!progress || !progress.running) {
+    scanProgressCard.classList.add('idle');
+    scanProgressTitle.textContent = 'No Active Scan';
+    scanProgressPercent.textContent = '0%';
+    scanProgressFill.style.width = '0%';
+    scanProgressDetail.textContent = 'Start a scan to see live progress.';
+    scanBtn.disabled = false;
+    return;
+  }
+
+  const total = Number(progress.total_hosts || 0);
+  const processed = Number(progress.processed_hosts || 0);
+  const saved = Number(progress.saved_hosts || 0);
+  const percent = Number(progress.percent || 0);
+  const current = progress.current_host || 'waiting for next host';
+  const totalLabel = total > 0 ? total : '?';
+  const etaLabel = progress.eta_seconds == null ? 'calculating...' : formatDuration(progress.eta_seconds);
+  const elapsedLabel = formatDuration(progress.elapsed_seconds || 0);
+
+  scanProgressCard.classList.remove('idle');
+  scanProgressTitle.textContent = `Scan #${progress.scan_id} Running`;
+  scanProgressPercent.textContent = `${percent}%`;
+  scanProgressFill.style.width = `${percent}%`;
+  scanProgressDetail.textContent = `Processed ${processed}/${totalLabel} hosts | Saved ${saved} | ETA ${etaLabel} | Elapsed ${elapsedLabel} | Current ${current}`;
+  scanBtn.disabled = true;
+}
+
 async function api(path, options = {}) {
   const res = await fetch(path, options);
   if (!res.ok) {
@@ -131,47 +175,73 @@ async function runScan() {
   const subnet = subnetInput.value.trim();
   if (!subnet) return;
 
-  scanBtn.disabled = true;
   setStatus(`Starting scan on ${subnet}...`);
 
   try {
     const result = await api(`/api/scans/run?subnet=${encodeURIComponent(subnet)}`, { method: 'POST' });
+    renderScanProgress({
+      running: true,
+      scan_id: result.scan_id,
+      total_hosts: 0,
+      processed_hosts: 0,
+      saved_hosts: 0,
+      current_host: null,
+      percent: 0,
+    });
     setStatus(`Scan #${result.scan_id} running on ${result.subnet}. Refreshing automatically...`);
     await pollUntilComplete(result.scan_id);
   } catch (err) {
     setStatus(`Scan failed to start: ${err.message}`);
-  } finally {
-    scanBtn.disabled = false;
+    await refreshScanProgress();
   }
 }
 
 async function pollUntilComplete(scanId) {
   for (let i = 0; i < 240; i += 1) {
-    await new Promise((r) => setTimeout(r, 3000));
-    const scans = await api('/api/scans?limit=1');
+    await new Promise((r) => setTimeout(r, 2000));
+    const [health, scans] = await Promise.all([api('/api/health'), api('/api/scans?limit=1')]);
+    renderScanProgress(health.scan_progress);
+
     const latest = scans[0];
     if (!latest || latest.id !== scanId) continue;
 
     if (latest.status === 'running') {
-      setStatus(`Scan #${scanId} is running...`);
+      const progress = health.scan_progress || {};
+      const total = progress.total_hosts || 0;
+      const processed = progress.processed_hosts || 0;
+      const label = total > 0 ? `${processed}/${total}` : `${processed}/?`;
+      const eta = progress.eta_seconds == null ? 'calculating ETA' : `ETA ${formatDuration(progress.eta_seconds)}`;
+      setStatus(`Scan #${scanId} is running (${label} hosts processed, ${eta})...`);
       continue;
     }
 
     setStatus(`Scan #${scanId} ${latest.status} (${latest.host_count} hosts).`);
+    renderScanProgress(null);
     await loadDevices();
     return;
   }
   setStatus(`Scan #${scanId} is taking longer than expected.`);
 }
 
+async function refreshScanProgress() {
+  try {
+    const health = await api('/api/health');
+    renderScanProgress(health.scan_progress);
+  } catch (_) {
+    renderScanProgress(null);
+  }
+}
+
 scanBtn.addEventListener('click', runScan);
 
 (async function init() {
   setStatus('Loading inventory...');
   try {
-    await loadDevices();
+    await Promise.all([loadDevices(), refreshScanProgress()]);
     setStatus('Ready.');
   } catch (err) {
     setStatus(`Failed loading data: ${err.message}`);
   }
 })();
+
+setInterval(refreshScanProgress, 3000);