ja4-platform/services/dashboard/backend/templates/detections.html

{% extends "base.html" %}
{% block title %}JA4 SOC — Détections{% endblock %}
{% block page_title %}
    Détections d'anomalies
    <span class="relative inline-block ml-1"><button onclick="docToggle(this)" class="doc-btn">?</button><div class="doc-panel">
        <h4>Table des détections</h4>
        <p>Toutes les sessions classées comme anomaliques par l'ensemble ML triple-voix (EIF + Autoencoder + XGBoost). Inclut les bots connus identifiés par dictionnaire.</p>
        <p><strong>Workflow :</strong> Filtrez par threat level → triez par score → cliquez sur une IP pour l'investiguer → classifiez via le bouton rapide.</p>
        <p class="doc-source">Source : ml_detected_anomalies (30 derniers jours)</p>
    </div></span>
{% endblock %}
{% block content %}
<div class="space-y-3">
    <!-- Summary charts -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-3">
        <div class="section-card">
            <div class="section-header"><span class="section-title">Par threat level</span></div>
            <div class="p-3"><div id="det-threat-chart" style="height:140px"></div></div>
        </div>
        <div class="section-card">
            <div class="section-header"><span class="section-title">Top raisons</span></div>
            <div class="p-3"><div id="det-reason-chart" style="height:140px"></div></div>
        </div>
        <div class="section-card">
            <div class="section-header"><span class="section-title">Top ASN détectés</span></div>
            <div class="p-3"><div id="det-asn-chart" style="height:140px"></div></div>
        </div>
    </div>
    <!-- Filters -->
    <div class="flex items-center gap-3 flex-wrap">
        <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</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-900 border border-gray-800 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>
    <!-- Table -->
    <div class="section-card overflow-hidden">
        <div class="overflow-x-auto" style="max-height:calc(100vh - 340px); overflow-y:auto">
            <table class="data-table" id="det-table">
                <thead><tr>
                    <th style="width:16px"></th>
                    <th class="cursor-pointer" data-sort="detected_at">Date ↕</th>
                    <th>IP</th>
                    <th class="cursor-pointer" data-sort="anomaly_score">Score ↕</th>
                    <th>Raw</th>
                    <th>Threat</th>
                    <th>JA4</th>
                    <th>Host</th>
                    <th class="cursor-pointer" data-sort="hits">Hits ↕</th>
                    <th>ASN</th>
                    <th>Pays</th>
                    <th>Bot</th>
                    <th>Réc.</th>
                </tr></thead>
                <tbody id="detections-body"></tbody>
            </table>
        </div>
        <div class="flex items-center justify-between px-4 py-2.5 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-xs 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-xs text-gray-400 hover:text-white disabled:opacity-30">Suivant &rarr;</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block scripts %}
<script>
const THREAT_COLORS = {CRITICAL:'#ef4444',HIGH:'#f97316',MEDIUM:'#eab308',NORMAL:'#6b7280',KNOWN_BOT:'#3b82f6',ANUBIS_DENY:'#dc2626'};
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'); document.querySelectorAll('[data-filter]').forEach(b=>{b.classList.remove('active');if(b.dataset.filter===dThreat)b.classList.add('active');}); }
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">
            ${escapeHtml(f.label)} <button onclick="window._cf${i}()" class="hover:text-white">✕</button></span>`).join('');
    filters.forEach((f,i) => { window['_cf'+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();
        const tbody = document.getElementById('detections-body');
        tbody.innerHTML = (d.data||[]).map((row, idx) => {
            const ip = String(row.src_ip||'').replace('::ffff:','');
            return `<tr onclick="window.location='/ip/${encodeURIComponent(ip)}'" class="group">
                <td class="text-center"><span class="w-2 h-2 rounded-full inline-block" style="background:${THREAT_COLORS[row.threat_level]||'#6b7280'}"></span></td>
                <td class="text-[11px] whitespace-nowrap text-gray-400">${(row.detected_at||'').substring(0,16)}</td>
                <td class="whitespace-nowrap">${fmtIP(row.src_ip)}</td>
                <td>${fmtScore(row.anomaly_score)}</td>
                <td class="font-mono text-[11px] text-gray-400">${parseFloat(row.raw_anomaly_score||0).toFixed(4)}</td>
                <td>${threatBadge(row.threat_level)}</td>
                <td>${fmtJA4(row.ja4)}</td>
                <td class="text-xs max-w-[120px] truncate" title="${escapeHtml(row.host||'')}">${escapeHtml(row.host||'')}</td>
                <td class="font-mono text-xs">${row.hits||0}</td>
                <td class="text-xs max-w-[120px] truncate">${fmtASN(row.asn_org)}</td>
                <td>${fmtCountry(row.country_code)}</td>
                <td class="text-xs">${row.bot_name ? fmtBotName(row.bot_name) : ''}</td>
                <td class="text-xs text-center">${row.recurrence||0}</td>
            </tr>`;
        }).join('') || '<tr><td colspan="13" class="text-center text-gray-500 py-8">Aucune détection</td></tr>';
        const total = d.total||0;
        document.getElementById('det-info').textContent = `${total.toLocaleString()} 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();
renderActiveFilters();

async function loadDetSummary() {
    try {
        const r = await fetch('/api/detections?per_page=500');
        const d = await r.json();
        const rows = d.data || [];
        const threatCounts={}, reasonCounts={}, 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 ch1 = echarts.init(document.getElementById('det-threat-chart'));
        ch1.setOption(ecBase({tooltip:ecTooltip({trigger:'item'}),series:[{type:'pie',radius:['35%','70%'],label:{color:EC_TEXT,fontSize:10},
            data:Object.entries(threatCounts).map(([k,v])=>({name:k,value:v,itemStyle:{color:THREAT_COLORS[k]||'#6b7280'}}))}]}));
        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}}]}));
        }
        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 %}