second push
هذا الالتزام موجود في:
mazen hassan
79
q4-siem/dashboard.html
Normal file
79
q4-siem/dashboard.html
Normal file
@@ -0,0 +1,79 @@
|
||||
<!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; // نفس منطق الـ cron كل دقيقة: نراجع كل 30 ثانية
|
||||
|
||||
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>
|
||||
المرجع في مشكلة جديدة
حظر مستخدم