feat(dashboard): add clickable drill-down to all data elements
Add navigation helpers (fmtASN, fmtCountry, fmtJA4, fmtBotName,
fmtThreatLink, fmtLabel) to base.html for SOC analyst drill-down.
Update all templates:
- overview.html: clickable table cells + ECharts click handlers for
ASN, country, JA4, bot, and threat charts
- detections.html: URL param pre-filters, active filter bar with
clear buttons, clickable ASN/country/JA4/threat in table
- scores.html: URL param pre-filters, clickable threat/JA4/country
- traffic.html: clickable JA4 and country columns
- ip_detail.html: clickable threat/JA4 in detections, clickable
asn_org/country_code/asn_label in AI features grid
- network.html: click handlers on ASN treemap and country sunburst,
fmtJA4Full/fmtLabel/fmtBotName/fmtASN in tables
- features.html: scatter plot click navigates to /ip/{ip}
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
toto
@ -2,6 +2,21 @@
|
||||
{% block title %}JA4 SOC — Détections{% endblock %}
|
||||
{% block content %}
|
||||
<div class="space-y-4">
|
||||
<!-- Summary charts row -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
|
||||
<div class="bg-gray-900 rounded-xl p-4 border border-gray-800">
|
||||
<h3 class="text-xs font-medium text-gray-500 mb-2">Détections par threat level</h3>
|
||||
<div id="det-threat-chart" style="height:160px"></div>
|
||||
</div>
|
||||
<div class="bg-gray-900 rounded-xl p-4 border border-gray-800">
|
||||
<h3 class="text-xs font-medium text-gray-500 mb-2">Top 5 raisons de détection</h3>
|
||||
<div id="det-reason-chart" style="height:160px"></div>
|
||||
</div>
|
||||
<div class="bg-gray-900 rounded-xl p-4 border border-gray-800">
|
||||
<h3 class="text-xs font-medium text-gray-500 mb-2">Top 5 ASN détectés</h3>
|
||||
<div id="det-asn-chart" style="height:160px"></div>
|
||||
</div>
|
||||
</div>
|
||||
<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">
|
||||
@ -16,6 +31,7 @@
|
||||
<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 id="active-filters" class="flex gap-2 flex-wrap"></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">
|
||||
@ -48,10 +64,35 @@
|
||||
{% block scripts %}
|
||||
<script>
|
||||
let dPage=1, dSort='detected_at', dOrder='DESC', dThreat='', dSearch='';
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
let dASN=urlParams.get('asn_org')||'',
|
||||
dCountry=urlParams.get('country_code')||'',
|
||||
dJA4=urlParams.get('ja4')||'',
|
||||
dBotName=urlParams.get('bot_name')||'';
|
||||
if(urlParams.get('threat_level')) dThreat=urlParams.get('threat_level');
|
||||
if(urlParams.get('search')) dSearch=urlParams.get('search');
|
||||
|
||||
function renderActiveFilters() {
|
||||
const el = document.getElementById('active-filters');
|
||||
const filters = [];
|
||||
if(dASN) filters.push({label:'ASN: '+dASN, clear:()=>{dASN='';renderActiveFilters();loadDetections();}});
|
||||
if(dCountry) filters.push({label:'Pays: '+dCountry, clear:()=>{dCountry='';renderActiveFilters();loadDetections();}});
|
||||
if(dJA4) filters.push({label:'JA4: '+dJA4.substring(0,20), clear:()=>{dJA4='';renderActiveFilters();loadDetections();}});
|
||||
if(dBotName) filters.push({label:'Bot: '+dBotName, clear:()=>{dBotName='';renderActiveFilters();loadDetections();}});
|
||||
el.innerHTML = filters.map((f,i) =>
|
||||
`<span class="inline-flex items-center gap-1 px-2 py-1 bg-brand-500/20 text-brand-400 rounded-lg text-xs">
|
||||
${f.label} <button onclick="window._clearFilter${i}()" class="hover:text-white">✕</button>
|
||||
</span>`).join('');
|
||||
filters.forEach((f,i) => { window['_clearFilter'+i] = f.clear; });
|
||||
}
|
||||
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);
|
||||
if(dASN) params.set('asn_org',dASN);
|
||||
if(dCountry) params.set('country_code',dCountry);
|
||||
if(dJA4) params.set('ja4',dJA4);
|
||||
if(dBotName) params.set('bot_name',dBotName);
|
||||
try {
|
||||
const r = await fetch('/api/detections?'+params);
|
||||
const d = await r.json();
|
||||
@ -60,12 +101,12 @@ async function loadDetections() {
|
||||
<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>${fmtThreatLink(row.threat_level)}</td>
|
||||
<td class="text-xs font-mono max-w-[120px] truncate">${fmtJA4(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 class="text-xs max-w-[150px] truncate">${fmtASN(row.asn_org)}</td>
|
||||
<td>${fmtCountry(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>';
|
||||
@ -93,5 +134,47 @@ document.getElementById('search-input').oninput = (e) => {
|
||||
searchTimeout = setTimeout(() => { dSearch=e.target.value; dPage=1; loadDetections(); }, 300);
|
||||
};
|
||||
loadDetections();
|
||||
renderActiveFilters();
|
||||
// Summary mini-charts (loaded once)
|
||||
async function loadDetSummary() {
|
||||
try {
|
||||
const r = await fetch('/api/detections?per_page=500');
|
||||
const d = await r.json();
|
||||
const rows = d.data || [];
|
||||
// Threat distribution
|
||||
const threatCounts = {};
|
||||
const reasonCounts = {};
|
||||
const asnCounts = {};
|
||||
rows.forEach(row => {
|
||||
threatCounts[row.threat_level] = (threatCounts[row.threat_level]||0)+1;
|
||||
if (row.reason) { const short = row.reason.substring(0,40); reasonCounts[short] = (reasonCounts[short]||0)+1; }
|
||||
if (row.asn_org) asnCounts[row.asn_org] = (asnCounts[row.asn_org]||0)+1;
|
||||
});
|
||||
const THREAT_COLORS = {CRITICAL:'#ef4444',HIGH:'#f97316',MEDIUM:'#eab308',NORMAL:'#6b7280',KNOWN_BOT:'#3b82f6',ANUBIS_DENY:'#dc2626'};
|
||||
// Threat pie
|
||||
const ch1 = echarts.init(document.getElementById('det-threat-chart'));
|
||||
ch1.setOption(ecBase({tooltip:ecTooltip({trigger:'item'}),series:[{type:'pie',radius:['30%','65%'],label:{color:EC_TEXT,fontSize:10},
|
||||
data:Object.entries(threatCounts).map(([k,v])=>({name:k,value:v,itemStyle:{color:THREAT_COLORS[k]||'#6b7280'}}))}]}));
|
||||
// Reason bar
|
||||
const topReasons = Object.entries(reasonCounts).sort((a,b)=>b[1]-a[1]).slice(0,5);
|
||||
if (topReasons.length) {
|
||||
const ch2 = echarts.init(document.getElementById('det-reason-chart'));
|
||||
ch2.setOption(ecBase({tooltip:ecTooltip({trigger:'axis'}),grid:{left:10,right:40,top:5,bottom:5,containLabel:true},
|
||||
yAxis:{type:'category',data:topReasons.map(r=>r[0]).reverse(),axisLabel:{color:EC_TEXT,fontSize:9,width:120,overflow:'truncate'},axisLine:{show:false}},
|
||||
xAxis:{type:'value',show:false},
|
||||
series:[{type:'bar',data:topReasons.map(r=>r[1]).reverse(),barWidth:'60%',itemStyle:{color:'#6366f1'},label:{show:true,position:'right',color:EC_TEXT,fontSize:10}}]}));
|
||||
}
|
||||
// ASN bar
|
||||
const topASN = Object.entries(asnCounts).sort((a,b)=>b[1]-a[1]).slice(0,5);
|
||||
if (topASN.length) {
|
||||
const ch3 = echarts.init(document.getElementById('det-asn-chart'));
|
||||
ch3.setOption(ecBase({tooltip:ecTooltip({trigger:'axis'}),grid:{left:10,right:40,top:5,bottom:5,containLabel:true},
|
||||
yAxis:{type:'category',data:topASN.map(r=>r[0]).reverse(),axisLabel:{color:EC_TEXT,fontSize:9,width:120,overflow:'truncate'},axisLine:{show:false}},
|
||||
xAxis:{type:'value',show:false},
|
||||
series:[{type:'bar',data:topASN.map(r=>r[1]).reverse(),barWidth:'60%',itemStyle:{color:'#f97316'},label:{show:true,position:'right',color:EC_TEXT,fontSize:10}}]}));
|
||||
}
|
||||
} catch(e) { console.error(e); }
|
||||
}
|
||||
loadDetSummary();
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user