Add deauth detection, Alerts tab, Search tab, node detail cards, UI improvements

coordinator/static/dashboard.js

@@ -471,6 +471,51 @@ function renderAlertsView() {
       <span>unique sources</span>
     </div>`;
 
+  // Most targeted networks
+  const targetsTbody = document.getElementById('targets-tbody');
+  const targetsEmpty = document.getElementById('targets-empty');
+  const targetsCount = document.getElementById('targets-count');
+  const topTargets   = a.top_targets || [];
+  targetsCount.textContent = `${topTargets.length}`;
+  if (!topTargets.length) {
+    targetsTbody.innerHTML = '';
+    targetsEmpty.style.display = 'block';
+  } else {
+    targetsEmpty.style.display = 'none';
+    targetsTbody.innerHTML = topTargets.map((t, i) => `<tr>
+      <td class="dim">${fmt(t.bssid)}</td>
+      <td>${fmt(t.ssid, '<hidden>')}</td>
+      <td style="color:#e74c3c;font-weight:500">${t.total_frames}</td>
+      <td class="muted">${t.unique_srcs}</td>
+      <td class="${t.node_count > 1 ? 'nodes-multi' : 'muted'}">${t.node_count}</td>
+      <td class="dim">${shortTime(t.last_seen)}</td>
+    </tr>`).join('');
+  }
+
+  // Most active attackers
+  const attackersTbody = document.getElementById('attackers-tbody');
+  const attackersEmpty = document.getElementById('attackers-empty');
+  const attackersCount = document.getElementById('attackers-count');
+  const topTargetedDevices = a.top_targeted_devices || [];
+  attackersCount.textContent = `${topTargetedDevices.length}`;
+  if (!topTargetedDevices.length) {
+    attackersTbody.innerHTML = '';
+    attackersEmpty.style.display = 'block';
+  } else {
+    attackersEmpty.style.display = 'none';
+    attackersTbody.innerHTML = topTargetedDevices.map(d => {
+      const vendorCls = d.randomized ? 'muted' : 'dim';
+      return `<tr>
+        <td class="dim">${fmt(d.dst)}</td>
+        <td class="${vendorCls}">${d.vendor || '—'}</td>
+        <td style="color:#e74c3c;font-weight:500">${d.total_frames}</td>
+        <td class="muted">${d.networks_used}</td>
+        <td class="${d.node_count > 1 ? 'nodes-multi' : 'muted'}">${d.node_count}</td>
+        <td class="dim">${shortTime(d.last_seen)}</td>
+      </tr>`;
+    }).join('');
+  }
+
   // Bursts
   const burstsTbody = document.getElementById('bursts-tbody');
   const burstsEmpty = document.getElementById('bursts-empty');
@@ -648,6 +693,165 @@ function renderRssiChart(series) {
     </div>`).join('');
 }
 
+// ── Search view ───────────────────────────────────────────────────────────────
+async function doSearch() {
+  const q = document.getElementById('search-input').value.trim();
+  if (q.length < 2) return;
+  const data = await fetch(`/api/search?q=${encodeURIComponent(q)}`).then(r => r.json());
+  renderSearchResults(data, q);
+}
+
+function renderSearchResults(data, q) {
+  const container = document.getElementById('search-results');
+  const empty     = document.getElementById('search-empty');
+  container.querySelectorAll('.search-section').forEach(el => el.remove());
+
+  if (!Object.keys(data).length) {
+    empty.textContent    = `No data found for "${q}".`;
+    empty.style.display  = 'block';
+    return;
+  }
+  empty.style.display = 'none';
+
+  // Helper to append a section
+  function addSection(title, html) {
+    const div = document.createElement('div');
+    div.className = 'search-section';
+    div.innerHTML = `<div class="search-section-label">${title}</div>${html}`;
+    container.appendChild(div);
+  }
+
+  // As a network
+  if (data.as_network) {
+    const rows = data.as_network.map(r => {
+      const encCls = (!r.encryption || r.encryption === 'OPEN') ? 'enc-open' : 'muted';
+      return `<tr>
+        <td>${fmt(r.ssid, '<hidden>')}</td>
+        <td class="dim">${fmt(r.bssid)}</td>
+        <td class="${rssiClass(r.best_rssi)}">${fmt(r.best_rssi)} dBm</td>
+        <td class="muted">${fmt(r.channel)}</td>
+        <td class="${encCls}">${r.encryption || 'OPEN'}</td>
+        <td>${fmt(r.times_seen)}</td>
+        <td class="${r.node_count > 1 ? 'nodes-multi' : 'muted'}">${r.node_count}</td>
+        <td class="dim">${shortTime(r.first_seen)}</td>
+        <td class="dim">${shortTime(r.last_seen)}</td>
+      </tr>`;
+    }).join('');
+    addSection('As a Network', `<div class="tbl-wrap"><table>
+      <thead><tr><th>SSID</th><th>BSSID</th><th>Best RSSI</th><th>Ch</th><th>Enc</th><th>Times Seen</th><th>Nodes</th><th>First Seen</th><th>Last Seen</th></tr></thead>
+      <tbody>${rows}</tbody></table></div>`);
+  }
+
+  // As a client device
+  if (data.as_client) {
+    const rows = data.as_client.map(r => {
+      const probing = r.probed_ssids.length
+        ? r.probed_ssids.join(', ')
+        : '<span style="color:var(--text-muted)">wildcard only</span>';
+      return `<tr>
+        <td>${fmt(r.src_mac)}</td>
+        <td class="${r.randomized ? 'muted' : 'dim'}">${r.vendor || '—'}</td>
+        <td style="white-space:normal;max-width:300px;line-height:1.8">${probing}</td>
+        <td class="${rssiClass(r.best_rssi)}">${fmt(r.best_rssi)} dBm</td>
+        <td>${fmt(r.times_seen)}</td>
+        <td class="dim">${shortTime(r.first_seen)}</td>
+        <td class="dim">${shortTime(r.last_seen)}</td>
+      </tr>`;
+    }).join('');
+    addSection('As a Client Device (Probe Requests)', `<div class="tbl-wrap"><table>
+      <thead><tr><th>MAC</th><th>Vendor</th><th>Probing For</th><th>Best RSSI</th><th>Times Seen</th><th>First Seen</th><th>Last Seen</th></tr></thead>
+      <tbody>${rows}</tbody></table></div>`);
+  }
+
+  // Devices probing for this SSID
+  if (data.probing_for) {
+    const rows = data.probing_for.map(r => `<tr>
+      <td>${fmt(r.src_mac)}</td>
+      <td class="${r.randomized ? 'muted' : 'dim'}">${r.vendor || '—'}</td>
+      <td class="${rssiClass(r.best_rssi)}">${fmt(r.best_rssi)} dBm</td>
+      <td>${fmt(r.times_seen)}</td>
+      <td class="dim">${shortTime(r.first_seen)}</td>
+      <td class="dim">${shortTime(r.last_seen)}</td>
+    </tr>`).join('');
+    addSection('Devices Probing for This SSID', `<div class="tbl-wrap"><table>
+      <thead><tr><th>MAC</th><th>Vendor</th><th>Best RSSI</th><th>Times Seen</th><th>First Seen</th><th>Last Seen</th></tr></thead>
+      <tbody>${rows}</tbody></table></div>`);
+  }
+
+  // As a deauth victim
+  if (data.as_victim) {
+    const rows = data.as_victim.map(r => `<tr>
+      <td>${fmt(r.dst)}</td>
+      <td class="${r.randomized ? 'muted' : 'dim'}">${r.vendor || '—'}</td>
+      <td style="color:#e74c3c;font-weight:500">${r.total_frames}</td>
+      <td class="muted">${r.networks_used}</td>
+      <td class="${r.node_count > 1 ? 'nodes-multi' : 'muted'}">${r.node_count}</td>
+      <td class="dim">${shortTime(r.first_seen)}</td>
+      <td class="dim">${shortTime(r.last_seen)}</td>
+    </tr>`).join('');
+    addSection('As a Deauth Victim', `<div class="tbl-wrap"><table>
+      <thead><tr><th>MAC</th><th>Vendor</th><th>Frames Received</th><th>Networks Used</th><th>Nodes</th><th>First Seen</th><th>Last Seen</th></tr></thead>
+      <tbody>${rows}</tbody></table></div>`);
+  }
+
+  // Vendor — client devices
+  if (data.vendor_clients) {
+    const label = data.vendor_name || q;
+    const rows = data.vendor_clients.map(r => {
+      const probing = r.probed_ssids.length
+        ? r.probed_ssids.join(', ')
+        : '<span style="color:var(--text-muted)">wildcard only</span>';
+      return `<tr>
+        <td>${fmt(r.src_mac)}</td>
+        <td class="${r.randomized ? 'muted' : 'dim'}">${r.vendor || '—'}</td>
+        <td style="white-space:normal;max-width:300px;line-height:1.8">${probing}</td>
+        <td class="${rssiClass(r.best_rssi)}">${fmt(r.best_rssi)} dBm</td>
+        <td>${fmt(r.times_seen)}</td>
+        <td class="dim">${shortTime(r.last_seen)}</td>
+      </tr>`;
+    }).join('');
+    addSection(`Vendor Match — Client Devices (${label})`, `<div class="tbl-wrap"><table>
+      <thead><tr><th>MAC</th><th>Vendor</th><th>Probing For</th><th>Best RSSI</th><th>Times Seen</th><th>Last Seen</th></tr></thead>
+      <tbody>${rows}</tbody></table></div>`);
+  }
+
+  // Vendor — networks / APs
+  if (data.vendor_networks) {
+    const label = data.vendor_name || q;
+    const rows = data.vendor_networks.map(r => {
+      const encCls = (!r.encryption || r.encryption === 'OPEN') ? 'enc-open' : 'muted';
+      return `<tr>
+        <td>${fmt(r.ssid, '<hidden>')}</td>
+        <td class="dim">${fmt(r.bssid)}</td>
+        <td class="${rssiClass(r.best_rssi)}">${fmt(r.best_rssi)} dBm</td>
+        <td class="muted">${fmt(r.channel)}</td>
+        <td class="${encCls}">${r.encryption || 'OPEN'}</td>
+        <td>${fmt(r.times_seen)}</td>
+        <td class="${r.node_count > 1 ? 'nodes-multi' : 'muted'}">${r.node_count}</td>
+        <td class="dim">${shortTime(r.last_seen)}</td>
+      </tr>`;
+    }).join('');
+    addSection(`Vendor Match — Networks / APs (${label})`, `<div class="tbl-wrap"><table>
+      <thead><tr><th>SSID</th><th>BSSID</th><th>Best RSSI</th><th>Ch</th><th>Enc</th><th>Times Seen</th><th>Nodes</th><th>Last Seen</th></tr></thead>
+      <tbody>${rows}</tbody></table></div>`);
+  }
+
+  // As an impersonated AP
+  if (data.as_impersonated) {
+    const rows = data.as_impersonated.map(r => `<tr>
+      <td class="dim">${fmt(r.bssid)}</td>
+      <td style="color:#e74c3c;font-weight:500">${r.total_frames}</td>
+      <td class="muted">${r.unique_targets}</td>
+      <td class="${r.node_count > 1 ? 'nodes-multi' : 'muted'}">${r.node_count}</td>
+      <td class="dim">${shortTime(r.first_seen)}</td>
+      <td class="dim">${shortTime(r.last_seen)}</td>
+    </tr>`).join('');
+    addSection('As an Impersonated AP (Deauth Source)', `<div class="tbl-wrap"><table>
+      <thead><tr><th>BSSID</th><th>Frames Sent</th><th>Unique Targets</th><th>Nodes</th><th>First Seen</th><th>Last Seen</th></tr></thead>
+      <tbody>${rows}</tbody></table></div>`);
+  }
+}
+
 // ── View switching ────────────────────────────────────────────────────────────
 function setView(view) {
   currentView = view;
@@ -659,12 +863,14 @@ function setView(view) {
   document.getElementById('view-detail').classList.toggle('active',          view === 'detail');
   document.getElementById('view-presence').classList.toggle('active',         view === 'presence');
   document.getElementById('view-alerts').classList.toggle('active',            view === 'alerts');
+  document.getElementById('view-search').classList.toggle('active',            view === 'search');
   document.getElementById('tab-feed').classList.toggle('active',       view === 'feed' || view === 'detail');
   document.getElementById('tab-networks').classList.toggle('active',   view === 'networks' || view === 'network-chart');
   document.getElementById('tab-crossnode').classList.toggle('active',  view === 'crossnode');
   document.getElementById('tab-clients').classList.toggle('active',    view === 'clients');
   document.getElementById('tab-presence').classList.toggle('active',   view === 'presence');
   document.getElementById('tab-alerts').classList.toggle('active',     view === 'alerts');
+  document.getElementById('tab-search').classList.toggle('active',     view === 'search');
 }
 
 function showFeed() {
@@ -685,6 +891,8 @@ async function showPresence() { setView('presence'); await fetchPresence(); }
 
 async function showAlerts() { setView('alerts'); await fetchAlerts(); }
 
+function showSearch() { setView('search'); document.getElementById('search-input').focus(); }
+
 async function showDetail(node_id) {
   currentNode = node_id;
   setView('detail');