code_public/ja4-platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(dashboard): eliminate @apply CSS, fix status column, fix click propagation

Browse Source 
Playwright testing revealed 3 critical bugs:

1. Tailwind CDN @apply with custom brand-* colors produces empty CSS
   rules, breaking ALL design components (kpi-card, data-table, badges,
   filter-btn, section-card, nav-item). Fix: replace all @apply
   directives with equivalent raw CSS values.

2. Traffic API and IP detail API reference non-existent 'status' column
   in http_logs table → HTTP 500 on /traffic and /ip/{ip}. Fix: remove
   status from SELECT, sort whitelist, filters, and templates.

3. Nested <a> links (fmtJA4, fmtASN, fmtCountry, fmtBotName) inside
   clickable <tr onclick> capture clicks, preventing row navigation to
   /ip/ detail. Fix: add event.stopPropagation() to all formatter links.

Verified with Playwright: 10 pages × 0 JS errors, all tooltips hidden
by default, sidebar toggle works, keyboard shortcuts (Alt+1-9, Alt+B),
classification form saves to DB, campaign detail panel opens on click.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
toto
2026-04-09 13:54:38 +02:00
parent 6babc55e3e
commit 70188b508c
4 changed files with 39 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
services/dashboard/backend/templates/traffic.html
View File

@ -51,14 +51,13 @@
<option>GET</option><option>POST</option><option>PUT</option><option>DELETE</option><option>HEAD</option><option>OPTIONS</option>
</select>
<input type="text" id="host-filter" placeholder="Filtrer host..." class="px-3 py-1.5 bg-gray-800 border border-gray-700 rounded-lg text-sm text-gray-300 w-48 focus:border-brand-500 focus:outline-none">
<input type="number" id="status-filter" placeholder="Status" class="px-3 py-1.5 bg-gray-800 border border-gray-700 rounded-lg text-sm text-gray-300 w-28 focus:border-brand-500 focus:outline-none">
<input type="text" id="search-filter" placeholder="Rechercher IP, path, UA…" class="px-3 py-1.5 bg-gray-800 border border-gray-700 rounded-lg text-sm text-gray-300 w-64 focus:border-brand-500 focus:outline-none">
</div>
<div class="section-card overflow-hidden">
<div class="overflow-x-auto max-h-[70vh] overflow-y-auto">
<table class="data-table"><thead><tr>
<th class="cursor-pointer" data-sort="time">Time ↕</th>
<th>IP</th><th>Method</th><th>Status</th><th>Host</th><th>Path</th>
<th>IP</th><th>Method</th><th>Host</th><th>Path</th>
<th>HTTP</th><th>User-Agent</th><th>JA4</th><th>Pays</th>
</tr></thead><tbody id="traffic-body"></tbody></table>
</div>
@ -82,9 +81,8 @@ async function loadTraffic() {
const params = new URLSearchParams({page:tPage,per_page:100,sort:tSort,order:tOrder});
const m=document.getElementById('method-filter').value;
const h=document.getElementById('host-filter').value;
const s=document.getElementById('status-filter').value;
const q=document.getElementById('search-filter').value;
if(m) params.set('method',m); if(h) params.set('host',h); if(s) params.set('status',s); if(q) params.set('search',q);
if(m) params.set('method',m); if(h) params.set('host',h); if(q) params.set('search',q);
try {
const r = await fetch('/api/traffic?'+params); const d = await r.json();
const tbody = document.getElementById('traffic-body');
@ -92,7 +90,6 @@ async function loadTraffic() {
<td class="text-xs whitespace-nowrap">${row.time||''}</td>
<td class="whitespace-nowrap">${fmtIP(row.src_ip)}</td>
<td class="${mc(row.method)} font-mono text-xs">${row.method||''}</td>
<td class="${sc(row.status||0)} font-mono text-xs">${row.status||''}</td>
<td class="text-xs max-w-[150px] truncate">${escapeHtml(row.host||'')}</td>
<td class="text-xs max-w-[250px] truncate font-mono" title="${escapeHtml(row.path||'')}">${escapeHtml(row.path||'')}</td>
<td class="font-mono text-xs">${escapeHtml(row.http_version||'')}</td>
@ -118,7 +115,7 @@ document.querySelectorAll('[data-sort]').forEach(th => th.onclick = () => {
// Filters with debounce
let filterTimer;
['method-filter','host-filter','status-filter','search-filter'].forEach(id=>{
['method-filter','host-filter','search-filter'].forEach(id=>{
let el=document.getElementById(id);
el.addEventListener(el.tagName==='SELECT'?'change':'input',()=>{
clearTimeout(filterTimer);