High/Critical Alerts
${highRiskAlerts}
Malware Detected
${malwareCount}
Phishing Attempts
${phishingCount}
`;
// 3. Render threat log
threatData.sort((a, b) => b.timestamp - a.timestamp);
threatLogBody.innerHTML = threatData.slice(0, 50).map(t => { // Show latest 50
const severityColors = { 'Low': 'text-gray-600', 'Medium': 'text-yellow-600', 'High': 'text-orange-600', 'Critical': 'text-red-600' };
return `
| ${t.timestamp.toLocaleTimeString()} |
${t.type} |
${t.severity} |
${t.ip} |
`;
}).join('');
// 4. Render charts
renderCharts();
};
const renderCharts = () => {
const typeCounts = threatTypes.map(type => threatData.filter(t => t.type === type).length);
const typeCtx = document.getElementById('threat-type-chart').getContext('2d');
if (threatTypeChart) threatTypeChart.destroy();
threatTypeChart = new Chart(typeCtx, {
type: 'doughnut',
data: {
labels: threatTypes,
datasets: [{ data: typeCounts, backgroundColor: ['#EF4444', '#F97316', '#EAB308', '#84CC16', '#3B82F6'] }]
},
options: { responsive: true, plugins: { title: { display: true, text: 'Threats by Type' } } }
});
const trendData = threatData.map(t => ({ x: t.timestamp, y: 1 }));
const trendCtx = document.getElementById('threat-trend-chart').getContext('2d');
if (threatTrendChart) threatTrendChart.destroy();
threatTrendChart = new Chart(trendCtx, {
type: 'line',
data: { datasets: [{ label: 'Threats', data: trendData, borderColor: '#3B82F6', tension: 0.1 }] },
options: {
responsive: true,
plugins: { title: { display: true, text: 'Threat Trend Over Time' } },
scales: { x: { type: 'time', time: { unit: 'minute' } }, y: { beginAtZero: true, title: { display: true, text: 'Count' } } }
}
});
};
const renderConfigTable = () => {
configTableBody.innerHTML = threatData.map(t => `
|
|
|
|
|
`).join('');
};
// --- UI & EVENT HANDLERS ---
const switchTab = (tabId) => {
currentTab = tabId;
Object.values(tabPanes).forEach(pane => pane.classList.add('hidden'));
tabPanes[tabId].classList.remove('hidden');
Object.values(tabButtons).forEach(btn => btn.classList.replace('tab-active', 'tab-inactive'));
tabButtons[tabId].classList.replace('tab-inactive', 'tab-active');
if (tabId === 'dashboard') renderDashboard();
updateNavButtons();
};
const navigateTabs = (direction) => {
const currentIndex = tabs.indexOf(currentTab);
const newIndex = direction === 'next' ? currentIndex + 1 : currentIndex - 1;
if (newIndex >= 0 && newIndex < tabs.length) switchTab(tabs[newIndex]);
};
const updateNavButtons = () => {
const currentIndex = tabs.indexOf(currentTab);
prevBtn.disabled = currentIndex === 0;
nextBtn.disabled = currentIndex === tabs.length - 1;
prevBtn.classList.toggle('opacity-50', prevBtn.disabled);
nextBtn.classList.toggle('opacity-50', nextBtn.disabled);
};
const handlePdfDownload = () => {
const pdfContent = document.getElementById('pdf-content');
html2canvas(pdfContent, { scale: 2, backgroundColor: '#ffffff' }).then(canvas => {
const imgData = canvas.toDataURL('image/png');
const { jsPDF } = window.jspdf;
const pdf = new jsPDF({ orientation: 'landscape', unit: 'pt', format: 'a4' });
const pdfWidth = pdf.internal.pageSize.getWidth(), margin = 40;
const contentWidth = pdfWidth - margin * 2;
const pdfHeight = (canvas.height * contentWidth) / canvas.width;
pdf.addImage(imgData, 'PNG', margin, margin, contentWidth, pdfHeight);
pdf.save('Threat-Intelligence-Report.pdf');
});
};
// --- EVENT LISTENERS ---
window.switchTab = switchTab;
window.navigateTabs = navigateTabs;
downloadPdfBtn.addEventListener('click', handlePdfDownload);
addThreatBtn.addEventListener('click', () => {
const newThreat = {
id: nextId++,
type: 'Malware',
severity: 'Low',
ip: '192.168.1.1',
description: 'New event',
timestamp: new Date()
};
threatData.push(newThreat);
renderConfigTable();
});
configTableBody.addEventListener('change', e => {
if(e.target.classList.contains('config-input')) {
const id = parseInt(e.target.closest('tr').dataset.id);
const prop = e.target.dataset.prop;
const item = threatData.find(t => t.id === id);
if (item) item[prop] = e.target.value;
}
});
configTableBody.addEventListener('click', e => {
if (e.target.classList.contains('remove-row-btn')) {
const idToRemove = parseInt(e.target.closest('tr').dataset.id);
threatData = threatData.filter(t => t.id !== idToRemove);
renderConfigTable();
}
});
// --- INITIALIZATION ---
renderDashboard();
renderConfigTable();
updateNavButtons();
// Simulate new threats periodically
setInterval(() => {
const newThreat = {
id: nextId++,
type: threatTypes[Math.floor(Math.random() * threatTypes.length)],
severity: severities[Math.floor(Math.random() * severities.length)],
ip: `198.51.100.${Math.floor(Math.random() * 255)}`,
description: 'Automated detection event',
timestamp: new Date()
};
threatData.push(newThreat);
if (currentTab === 'dashboard') renderDashboard();
}, 5000); // Add a new threat every 5 seconds
});
