feat: complete initial project structure for API and Monitoring Dashboards
هذا الالتزام موجود في:
mac
35
dashboard/index.html
Normal file
35
dashboard/index.html
Normal file
@@ -0,0 +1,35 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ar" dir="rtl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Ghaymah API Monitoring</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>نظام المراقبة السحابي (API)</h1>
|
||||
|
||||
<div class="dashboard-container">
|
||||
<div class="card">
|
||||
<div class="card-title">حالة الخدمة</div>
|
||||
<div id="status" class="card-value">
|
||||
<span class="status-indicator unknown"></span>
|
||||
<span class="text unknown">جاري الفحص...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-title">زمن الاستجابة</div>
|
||||
<div id="latency" class="card-value">
|
||||
<span class="unknown">-</span> <span style="font-size:1rem; color:var(--text-muted)">ms</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-title">إجمالي الطلبات</div>
|
||||
<div id="requests" class="card-value counter">0</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
35
dashboard/script.js
Normal file
35
dashboard/script.js
Normal file
@@ -0,0 +1,35 @@
|
||||
let requestCount = 0;
|
||||
|
||||
async function checkHealth() {
|
||||
const startTime = Date.now();
|
||||
try {
|
||||
const response = await fetch('http://localhost:8080/health');
|
||||
const latency = Date.now() - startTime;
|
||||
requestCount++;
|
||||
|
||||
if (response.ok) {
|
||||
document.getElementById('status').innerHTML = `
|
||||
<span class="status-indicator good"></span>
|
||||
<span class="text good">متصل ويعمل</span>
|
||||
`;
|
||||
} else {
|
||||
document.getElementById('status').innerHTML = `
|
||||
<span class="status-indicator bad"></span>
|
||||
<span class="text bad">خطأ بالخادم</span>
|
||||
`;
|
||||
}
|
||||
|
||||
document.getElementById('latency').innerHTML = `<span class="good">${latency}</span> <span style="font-size:1rem; color:var(--text-muted)">ms</span>`;
|
||||
document.getElementById('requests').innerHTML = requestCount.toLocaleString();
|
||||
|
||||
} catch (error) {
|
||||
document.getElementById('status').innerHTML = `
|
||||
<span class="status-indicator bad"></span>
|
||||
<span class="text bad">غير متصل</span>
|
||||
`;
|
||||
document.getElementById('latency').innerHTML = `<span class="unknown">-</span> <span style="font-size:1rem; color:var(--text-muted)">ms</span>`;
|
||||
}
|
||||
}
|
||||
|
||||
setInterval(checkHealth, 5000);
|
||||
checkHealth();
|
||||
123
dashboard/style.css
Normal file
123
dashboard/style.css
Normal file
@@ -0,0 +1,123 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap');
|
||||
|
||||
:root {
|
||||
--bg-color: #0f172a;
|
||||
--card-bg: rgba(30, 41, 59, 0.7);
|
||||
--text-main: #f8fafc;
|
||||
--text-muted: #94a3b8;
|
||||
--accent: #3b82f6;
|
||||
--success: #10b981;
|
||||
--danger: #ef4444;
|
||||
--glow-success: rgba(16, 185, 129, 0.4);
|
||||
--glow-danger: rgba(239, 68, 68, 0.4);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Outfit', sans-serif;
|
||||
background-color: var(--bg-color);
|
||||
background-image:
|
||||
radial-gradient(at 0% 0%, rgba(59, 130, 246, 0.15) 0px, transparent 50%),
|
||||
radial-gradient(at 100% 100%, rgba(139, 92, 246, 0.15) 0px, transparent 50%);
|
||||
color: var(--text-main);
|
||||
text-align: center;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 40px;
|
||||
background: linear-gradient(to right, #60a5fa, #c084fc);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.dashboard-container {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
max-width: 900px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--card-bg);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
padding: 30px;
|
||||
border-radius: 20px;
|
||||
min-width: 250px;
|
||||
box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.6);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0; height: 3px;
|
||||
background: linear-gradient(to right, transparent, var(--accent), transparent);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 1.1rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 15px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.card-value {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.good {
|
||||
color: var(--success);
|
||||
text-shadow: 0 0 15px var(--glow-success);
|
||||
}
|
||||
.bad {
|
||||
color: var(--danger);
|
||||
text-shadow: 0 0 15px var(--glow-danger);
|
||||
}
|
||||
.unknown { color: var(--text-muted); }
|
||||
|
||||
/* Ping Animation for Status */
|
||||
.status-indicator {
|
||||
display: inline-block;
|
||||
width: 15px; height: 15px;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
}
|
||||
.status-indicator.good { background-color: var(--success); }
|
||||
.status-indicator.bad { background-color: var(--danger); }
|
||||
.status-indicator.good::after {
|
||||
content: '';
|
||||
position: absolute; width: 100%; height: 100%; top: 0; left: 0;
|
||||
border-radius: 50%; background-color: var(--success);
|
||||
animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
|
||||
}
|
||||
|
||||
@keyframes ping {
|
||||
75%, 100% { transform: scale(2.5); opacity: 0; }
|
||||
}
|
||||
المرجع في مشكلة جديدة
حظر مستخدم