80 أسطر
3.7 KiB
HTML
80 أسطر
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ar" dir="rtl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Ghaymah SIEM Dashboard</title>
|
|
<style>
|
|
body { font-family: system-ui, sans-serif; background-color: #1e1e2f; color: #fff; padding: 20px; }
|
|
h1 { color: #00d2ff; text-align: center; }
|
|
.meta { text-align: center; color: #9a9ab5; font-size: 0.9em; margin-bottom: 10px; }
|
|
table { width: 100%; border-collapse: collapse; margin-top: 20px; background-color: #2a2a40; }
|
|
th, td { padding: 15px; text-align: right; border-bottom: 1px solid #444; }
|
|
th { background-color: #3f3f5a; }
|
|
.critical { color: #ff4d4d; font-weight: bold; }
|
|
.warning { color: #ffb84d; font-weight: bold; }
|
|
.score-critical { display: inline-block; padding: 5px 10px; background-color: #ff4d4d; border-radius: 5px; color: white; }
|
|
.score-warning { display: inline-block; padding: 5px 10px; background-color: #ffb84d; border-radius: 5px; color: #1e1e2f; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<h1> لوحة تحكم SIEM - التنبيهات الأمنية</h1>
|
|
<p class="meta" id="last-updated">جاري التحميل...</p>
|
|
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>عنوان IP المشبوه</th>
|
|
<th>درجة الخطورة</th>
|
|
<th>الأحداث المرصودة (الأنماط)</th>
|
|
<th>الحالة</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="alerts-table">
|
|
<!-- سيتم حقن البيانات هنا بواسطة الجافاسكريبت -->
|
|
</tbody>
|
|
</table>
|
|
|
|
<script>
|
|
const REFRESH_INTERVAL_MS = 30000;
|
|
|
|
function loadAlerts() {
|
|
fetch('alerts.json', { cache: 'no-store' })
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
const tableBody = document.getElementById('alerts-table');
|
|
document.getElementById('last-updated').textContent =
|
|
`آخر تحديث: ${new Date().toLocaleTimeString('ar-EG')} | عدد التنبيهات: ${data.length}`;
|
|
|
|
if (data.length === 0) {
|
|
tableBody.innerHTML = '<tr><td colspan="4" style="text-align:center;">لا توجد تهديدات حالياً ✅</td></tr>';
|
|
return;
|
|
}
|
|
|
|
tableBody.innerHTML = '';
|
|
data.forEach(alert => {
|
|
const isCritical = alert.status === 'Critical';
|
|
const statusClass = isCritical ? 'critical' : 'warning';
|
|
const scoreClass = isCritical ? 'score-critical' : 'score-warning';
|
|
const icon = isCritical ? '⛔' : '⚠️';
|
|
const row = `<tr>
|
|
<td style="font-family: monospace; font-size: 1.1em;">${alert.ip}</td>
|
|
<td><span class="${scoreClass}">${alert.threat_score}</span></td>
|
|
<td>${alert.events.join(' <strong>+</strong> ')}</td>
|
|
<td class="${statusClass}">${icon} ${alert.status}</td>
|
|
</tr>`;
|
|
tableBody.innerHTML += row;
|
|
});
|
|
})
|
|
.catch(error => {
|
|
document.getElementById('alerts-table').innerHTML =
|
|
'<tr><td colspan="4" style="text-align:center;">تعذر تحميل alerts.json — تأكد إنك شغّلت analyzer.py وإن الصفحة متفتحة عن طريق سيرفر (مش file:// مباشرة).</td></tr>';
|
|
});
|
|
}
|
|
|
|
loadAlerts();
|
|
setInterval(loadAlerts, REFRESH_INTERVAL_MS);
|
|
</script>
|
|
</body>
|
|
</html>
|