add the main file structure requirements

هذا الالتزام موجود في:
2026-07-26 22:46:15 +03:00
التزام 8bde42182e
20 ملفات معدلة مع 4613 إضافات و0 حذوفات

عرض الملف

@@ -0,0 +1,343 @@
/**
* SIEM Dashboard - JavaScript
* نظام مراقبة وتحليل السجلات الأمنية
*/
// ═══════════════════════════════════════════════════════════════
// بيانات تجريبية (في الإنتاج تأتي من API)
// ═══════════════════════════════════════════════════════════════
const sampleData = {
statistics: {
total_lines: 1250,
threats_detected: 15,
sources_analyzed: 3
},
summary: {
total_alerts: 15,
critical: 5,
high: 6,
medium: 4,
suspicious_ips_count: 4
},
alerts: [
{
id: "a1b2c3d4",
timestamp: "2026-07-26T14:05:01",
threat_type: "brute_force",
description: "محاولات تسجيل دخول فاشلة متكررة",
severity: "critical",
source_ip: "192.168.1.100",
details: { path: "/api/login", attempts: 15 }
},
{
id: "e5f6g7h8",
timestamp: "2026-07-26T14:10:02",
threat_type: "sql_injection",
description: "محاولة SQL Injection",
severity: "critical",
source_ip: "10.0.0.50",
details: { path: "/api/users?id=1' OR '1'='1" }
},
{
id: "i9j0k1l2",
timestamp: "2026-07-26T14:15:01",
threat_type: "xss_attempt",
description: "محاولة XSS",
severity: "high",
source_ip: "172.16.0.25",
details: { path: "/page?q=<script>alert('xss')</script>" }
},
{
id: "m3n4o5p6",
timestamp: "2026-07-26T14:15:02",
threat_type: "path_traversal",
description: "محاولة Path Traversal",
severity: "high",
source_ip: "172.16.0.25",
details: { path: "/../../etc/passwd" }
},
{
id: "q7r8s9t0",
timestamp: "2026-07-26T14:00:05",
threat_type: "ssh_brute_force",
description: "محاولات SSH فاشلة",
severity: "critical",
source_ip: "192.168.1.200",
details: { attempts: 5, usernames: ["admin", "root", "test"] }
},
{
id: "u1v2w3x4",
timestamp: "2026-07-26T14:10:01",
threat_type: "suspicious_user_agent",
description: "User-Agent مشبوه",
severity: "medium",
source_ip: "10.0.0.50",
details: { user_agent: "sqlmap/1.5" }
}
],
suspicious_ips: [
{
ip: "192.168.1.100",
threat_count: 15,
request_count: 120,
threats: ["brute_force", "auth_failure"],
last_seen: "2026-07-26T14:05:06"
},
{
ip: "10.0.0.50",
threat_count: 8,
request_count: 45,
threats: ["sql_injection", "suspicious_user_agent"],
last_seen: "2026-07-26T14:10:02"
},
{
ip: "172.16.0.25",
threat_count: 5,
request_count: 30,
threats: ["xss_attempt", "path_traversal"],
last_seen: "2026-07-26T14:15:02"
},
{
ip: "192.168.1.200",
threat_count: 5,
request_count: 25,
threats: ["ssh_brute_force"],
last_seen: "2026-07-26T14:00:05"
}
],
threat_counts: {
"SQL Injection": 3,
"Brute Force": 5,
"XSS": 2,
"Path Traversal": 2,
"SSH Attacks": 3
},
source_lines: {
nginx: 850,
auth: 200,
app: 200
}
};
// ═══════════════════════════════════════════════════════════════
// تحديث الإحصائيات
// ═══════════════════════════════════════════════════════════════
function updateStats(data) {
document.getElementById('criticalCount').textContent = data.summary.critical;
document.getElementById('highCount').textContent = data.summary.high;
document.getElementById('mediumCount').textContent = data.summary.medium;
document.getElementById('suspiciousIPs').textContent = data.summary.suspicious_ips_count;
// تحديث عدد الأسطر لكل مصدر
document.getElementById('nginxLines').textContent = data.source_lines.nginx.toLocaleString();
document.getElementById('authLines').textContent = data.source_lines.auth.toLocaleString();
document.getElementById('appLines').textContent = data.source_lines.app.toLocaleString();
}
// ═══════════════════════════════════════════════════════════════
// عرض التنبيهات
// ═══════════════════════════════════════════════════════════════
function renderAlerts(alerts, filter = 'all') {
const container = document.getElementById('alertsList');
container.innerHTML = '';
const filteredAlerts = filter === 'all'
? alerts
: alerts.filter(a => a.severity === filter);
if (filteredAlerts.length === 0) {
container.innerHTML = '<p style="text-align: center; color: var(--text-secondary); padding: 40px;">لا توجد تنبيهات</p>';
return;
}
filteredAlerts.forEach(alert => {
const icon = getAlertIcon(alert.severity);
const time = formatTime(alert.timestamp);
const alertHtml = `
<div class="alert-item ${alert.severity}">
<div class="alert-icon">${icon}</div>
<div class="alert-content">
<div class="alert-title">${alert.description}</div>
<div class="alert-details">
<strong>IP:</strong> ${alert.source_ip} |
<strong>النوع:</strong> ${alert.threat_type}
</div>
<div class="alert-time">${time}</div>
</div>
<span class="severity-badge ${alert.severity}">${getSeverityLabel(alert.severity)}</span>
</div>
`;
container.innerHTML += alertHtml;
});
}
function getAlertIcon(severity) {
const icons = {
critical: '🚨',
high: '⚠️',
medium: '📊',
low: ''
};
return icons[severity] || '📋';
}
function getSeverityLabel(severity) {
const labels = {
critical: 'حرج',
high: 'عالي',
medium: 'متوسط',
low: 'منخفض'
};
return labels[severity] || severity;
}
function formatTime(timestamp) {
const date = new Date(timestamp);
return date.toLocaleString('ar-SA', {
year: 'numeric',
month: 'short',
day: 'numeric',
hour: '2-digit',
minute: '2-digit'
});
}
// ═══════════════════════════════════════════════════════════════
// عرض عناوين IP المشبوهة
// ═══════════════════════════════════════════════════════════════
function renderSuspiciousIPs(ips) {
const tbody = document.getElementById('ipsTableBody');
tbody.innerHTML = '';
ips.forEach(ip => {
const row = `
<tr>
<td><span class="ip-address">${ip.ip}</span></td>
<td><span class="threat-count">${ip.threat_count}</span></td>
<td>${ip.request_count}</td>
<td>${formatTime(ip.last_seen)}</td>
<td><button class="btn-block" onclick="blockIP('${ip.ip}')">حظر</button></td>
</tr>
`;
tbody.innerHTML += row;
});
}
function blockIP(ip) {
if (confirm(`هل تريد حظر عنوان IP: ${ip}؟`)) {
alert(`تم إرسال طلب حظر ${ip} إلى الخادم`);
// في الإنتاج: إرسال طلب API لحظر IP
}
}
// ═══════════════════════════════════════════════════════════════
// عرض الرسم البياني
// ═══════════════════════════════════════════════════════════════
function renderChart(threatCounts) {
const container = document.getElementById('threatChart');
container.innerHTML = '';
const maxCount = Math.max(...Object.values(threatCounts));
const colors = ['sql', 'brute', 'xss', 'traversal', 'sql'];
let colorIndex = 0;
for (const [threat, count] of Object.entries(threatCounts)) {
const percentage = (count / maxCount) * 100;
const color = colors[colorIndex % colors.length];
const barHtml = `
<div class="chart-bar">
<span class="chart-label">${threat}</span>
<div class="chart-bar-container">
<div class="chart-bar-fill ${color}" style="width: ${percentage}%">
${count}
</div>
</div>
</div>
`;
container.innerHTML += barHtml;
colorIndex++;
}
}
// ═══════════════════════════════════════════════════════════════
// تصفية التنبيهات
// ═══════════════════════════════════════════════════════════════
function setupFilters() {
const filterButtons = document.querySelectorAll('.filter-btn');
filterButtons.forEach(btn => {
btn.addEventListener('click', () => {
// إزالة active من جميع الأزرار
filterButtons.forEach(b => b.classList.remove('active'));
// إضافة active للزر المضغوط
btn.classList.add('active');
// تصفية التنبيهات
const filter = btn.dataset.filter;
renderAlerts(sampleData.alerts, filter);
});
});
}
// ═══════════════════════════════════════════════════════════════
// تحديث الوقت
// ═══════════════════════════════════════════════════════════════
function updateTime() {
const now = new Date();
const timeStr = now.toLocaleTimeString('ar-SA');
document.getElementById('lastUpdate').textContent = timeStr;
}
// ═══════════════════════════════════════════════════════════════
// جلب البيانات من API (للإنتاج)
// ═══════════════════════════════════════════════════════════════
async function fetchData() {
try {
// في الإنتاج: استبدل بـ API حقيقي
// const response = await fetch('/api/siem/report');
// const data = await response.json();
// استخدام البيانات التجريبية
return sampleData;
} catch (error) {
console.error('خطأ في جلب البيانات:', error);
return sampleData;
}
}
// ═══════════════════════════════════════════════════════════════
// التهيئة
// ═══════════════════════════════════════════════════════════════
async function init() {
const data = await fetchData();
updateStats(data);
renderAlerts(data.alerts);
renderSuspiciousIPs(data.suspicious_ips);
renderChart(data.threat_counts);
setupFilters();
updateTime();
// تحديث الوقت كل ثانية
setInterval(updateTime, 1000);
// تحديث البيانات كل 30 ثانية
setInterval(async () => {
const newData = await fetchData();
updateStats(newData);
// يمكن إضافة تحديث للتنبيهات أيضاً
}, 30000);
}
// بدء التطبيق
document.addEventListener('DOMContentLoaded', init);