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

feat(dashboard): rebuild SOC dashboard + fix ClickHouse SQL

Browse Source 
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
2026-04-08 03:21:05 +02:00
parent 228ad7026a
commit b735bab5a5
120 changed files with 1444 additions and 24933 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
services/dashboard/backend/templates/detections.html Normal file
View File

@ -0,0 +1,97 @@
{% extends "base.html" %}
{% block title %}JA4 SOC — Détections{% 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">Anomalies détectées</h2>
<div class="flex gap-1.5" id="threat-filters">
<button class="filter-btn active" data-filter="">Tous</button>
<button class="filter-btn" data-filter="CRITICAL">Critical</button>
<button class="filter-btn" data-filter="HIGH">High</button>
<button class="filter-btn" data-filter="MEDIUM">Medium</button>
<button class="filter-btn" data-filter="KNOWN_BOT">Known Bot</button>
<button class="filter-btn" data-filter="ANUBIS_DENY">Anubis Deny</button>
</div>
<div class="flex-1"></div>
<input type="text" id="search-input" placeholder="Rechercher IP, host..."
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="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 class="cursor-pointer" data-sort="detected_at">Date ↕</th>
<th>IP</th>
<th class="cursor-pointer" data-sort="anomaly_score">Score ↕</th>
<th>Threat</th>
<th>JA4</th>
<th>Host</th>
<th>Hits</th>
<th>ASN</th>
<th>Pays</th>
<th>Récurrence</th>
<th>Raison</th>
</tr></thead>
<tbody id="detections-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="det-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">&larr; Précédent</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">Suivant &rarr;</button>
</div>
</div>
</div>
</div>
{% endblock %}
{% block scripts %}
<script>
let dPage=1, dSort='detected_at', dOrder='DESC', dThreat='', dSearch='';
async function loadDetections() {
const params = new URLSearchParams({page:dPage,per_page:50,sort:dSort,order:dOrder});
if(dThreat) params.set('threat_level',dThreat);
if(dSearch) params.set('search',dSearch);
try {
const r = await fetch('/api/detections?'+params);
const d = await r.json();
const tbody = document.getElementById('detections-body');
tbody.innerHTML = (d.data||[]).map(row => `<tr>
<td class="text-xs whitespace-nowrap">${row.detected_at||''}</td>
<td class="whitespace-nowrap">${fmtIP(row.src_ip)}</td>
<td>${fmtScore(row.anomaly_score)}</td>
<td>${threatBadge(row.threat_level)}</td>
<td class="text-xs font-mono max-w-[120px] truncate" title="${row.ja4||''}">${row.ja4||''}</td>
<td class="text-xs max-w-[150px] truncate" title="${row.host||''}">${row.host||''}</td>
<td>${row.hits||0}</td>
<td class="text-xs max-w-[150px] truncate">${row.asn_org||''}</td>
<td>${row.country_code||''}</td>
<td>${row.recurrence||0}</td>
<td class="text-xs max-w-[200px] truncate" title="${row.reason||''}">${row.reason||''}</td>
</tr>`).join('') || '<tr><td colspan="11" class="text-center text-gray-500 py-8">Aucune détection</td></tr>';
const total = d.total||0;
document.getElementById('det-info').textContent = `${total} résultats — page ${dPage}/${Math.max(1,Math.ceil(total/50))}`;
document.getElementById('prev-btn').disabled = dPage <= 1;
document.getElementById('next-btn').disabled = dPage * 50 >= total;
} catch(e) { console.error(e); }
}
document.getElementById('prev-btn').onclick = () => { if(dPage>1){dPage--;loadDetections();} };
document.getElementById('next-btn').onclick = () => { dPage++;loadDetections(); };
document.querySelectorAll('[data-sort]').forEach(th => th.onclick = () => {
const s = th.dataset.sort;
if(dSort===s) dOrder = dOrder==='DESC'?'ASC':'DESC'; else { dSort=s; dOrder='DESC'; }
dPage=1; loadDetections();
});
document.querySelectorAll('[data-filter]').forEach(btn => btn.onclick = () => {
document.querySelectorAll('[data-filter]').forEach(b=>b.classList.remove('active'));
btn.classList.add('active');
dThreat = btn.dataset.filter; dPage=1; loadDetections();
});
let searchTimeout;
document.getElementById('search-input').oninput = (e) => {
clearTimeout(searchTimeout);
searchTimeout = setTimeout(() => { dSearch=e.target.value; dPage=1; loadDetections(); }, 300);
};
loadDetections();
</script>
{% endblock %}