feat(dashboard): rebuild SOC dashboard + fix ClickHouse SQL
Complete rewrite of the SOC dashboard using FastAPI + Jinja2 + htmx + Chart.js + Tailwind CSS. Replaces the old React/Vite frontend with server-rendered templates. Dashboard pages: - Overview: KPIs, timeline chart, threat distribution, top IPs - Detections: paginated/filterable anomaly table - Scores: ml_all_scores with AE error & XGB prob columns - Traffic: HTTP logs with method/host filters - IP Investigation: full deep-dive (scores, features, HTTP logs, classify) - Classification: SOC feedback form + history - Features: AI + thesis feature stats - Models: scoring stats + model metadata API: 9 JSON endpoints with parameterized queries, sort whitelists SQL fixes: - 05_aggregation_tables: add deduplicate_merge_projection_mode - 11_views: fix nested aggregate (argMax inside sum) - 12_thesis_features: remove invalid 'let' bindings, fix groupArrayIf type Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
toto
70
services/dashboard/backend/templates/traffic.html
Normal file
70
services/dashboard/backend/templates/traffic.html
Normal file
@ -0,0 +1,70 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}JA4 SOC — Trafic HTTP{% endblock %}
|
||||
{% block content %}
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center gap-3 flex-wrap">
|
||||
<h2 class="text-lg font-semibold text-white">Logs HTTP (24h)</h2>
|
||||
<select id="method-filter" class="px-2 py-1 bg-gray-800 border border-gray-700 rounded text-sm text-gray-300">
|
||||
<option value="">Toutes méthodes</option>
|
||||
<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">
|
||||
</div>
|
||||
<div class="bg-gray-900 rounded-xl border border-gray-800 overflow-hidden">
|
||||
<div class="overflow-x-auto max-h-[70vh] overflow-y-auto">
|
||||
<table class="data-table"><thead><tr>
|
||||
<th>Time</th><th>IP</th><th>Method</th><th>Host</th><th>Path</th>
|
||||
<th>HTTP Ver</th><th>User-Agent</th><th>JA4</th><th>Pays</th>
|
||||
</tr></thead><tbody id="traffic-body"></tbody></table>
|
||||
</div>
|
||||
<div class="flex items-center justify-between px-4 py-3 border-t border-gray-800">
|
||||
<span class="text-xs text-gray-500" id="traffic-info">—</span>
|
||||
<div class="flex gap-2">
|
||||
<button id="prev-btn" class="px-3 py-1 bg-gray-800 rounded text-sm text-gray-400 hover:text-white disabled:opacity-30">←</button>
|
||||
<button id="next-btn" class="px-3 py-1 bg-gray-800 rounded text-sm text-gray-400 hover:text-white disabled:opacity-30">→</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% block scripts %}
|
||||
<script>
|
||||
let tPage=1;
|
||||
async function loadTraffic() {
|
||||
const params = new URLSearchParams({page:tPage,per_page:100});
|
||||
const m=document.getElementById('method-filter').value;
|
||||
const h=document.getElementById('host-filter').value;
|
||||
const s=document.getElementById('status-filter').value;
|
||||
if(m) params.set('method',m); if(h) params.set('host',h); if(s) params.set('status',s);
|
||||
try {
|
||||
const r = await fetch('/api/traffic?'+params); const d = await r.json();
|
||||
const tbody = document.getElementById('traffic-body');
|
||||
const sc = s => s>=500?'text-red-400':s>=400?'text-orange-400':s>=300?'text-yellow-400':'text-green-400';
|
||||
const mc = m => ({GET:'text-green-400',POST:'text-blue-400',PUT:'text-yellow-400',DELETE:'text-red-400'}[m]||'text-gray-400');
|
||||
tbody.innerHTML = (d.data||[]).map(row => `<tr>
|
||||
<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="text-xs max-w-[150px] truncate">${row.host||''}</td>
|
||||
<td class="text-xs max-w-[250px] truncate font-mono" title="${row.path||''}">${row.path||''}</td>
|
||||
<td class="font-mono text-xs">${row.http_version||''}</td>
|
||||
<td class="text-xs max-w-[200px] truncate" title="${row.header_user_agent||''}">${row.header_user_agent||''}</td>
|
||||
<td class="text-xs font-mono max-w-[100px] truncate">${row.ja4||''}</td>
|
||||
<td>${row.src_country_code||''}</td>
|
||||
</tr>`).join('') || '<tr><td colspan="9" class="text-center text-gray-500 py-8">Aucun log</td></tr>';
|
||||
const total=d.total||0;
|
||||
document.getElementById('traffic-info').textContent=`${total} logs — page ${tPage}/${Math.max(1,Math.ceil(total/100))}`;
|
||||
document.getElementById('prev-btn').disabled=tPage<=1;
|
||||
document.getElementById('next-btn').disabled=tPage*100>=total;
|
||||
} catch(e) { console.error(e); }
|
||||
}
|
||||
document.getElementById('prev-btn').onclick=()=>{if(tPage>1){tPage--;loadTraffic();}};
|
||||
document.getElementById('next-btn').onclick=()=>{tPage++;loadTraffic();};
|
||||
['method-filter','host-filter','status-filter'].forEach(id=>{
|
||||
let el=document.getElementById(id);
|
||||
el.addEventListener(el.tagName==='SELECT'?'change':'input',()=>{tPage=1;loadTraffic();});
|
||||
});
|
||||
loadTraffic();
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user