181 أسطر
7.2 KiB
HTML
181 أسطر
7.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ar" dir="rtl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Mithal.space Monitoring</title>
|
|
<!-- Include Google Fonts and Chart.js -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;700&display=swap" rel="stylesheet">
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<style>
|
|
:root {
|
|
--bg: #0a0e17; --card: rgba(16, 24, 39, 0.8);
|
|
--text: #e2e8f0; --muted: #64748b;
|
|
--accent: #38bdf8; --success: #34d399; --danger: #f87171;
|
|
--border: rgba(255, 255, 255, 0.05);
|
|
}
|
|
body {
|
|
font-family: 'Tajawal', sans-serif;
|
|
background: var(--bg); color: var(--text);
|
|
margin: 0; padding: 40px 20px;
|
|
background-image: radial-gradient(circle at top right, rgba(56, 189, 248, 0.1), transparent 40%);
|
|
}
|
|
h1 { text-align: center; color: var(--accent); margin-bottom: 40px; }
|
|
|
|
.grid {
|
|
display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 20px; max-width: 1200px; margin: 0 auto 30px auto;
|
|
}
|
|
.card {
|
|
background: var(--card); border: 1px solid var(--border);
|
|
border-radius: 16px; padding: 25px;
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
|
|
backdrop-filter: blur(10px); transition: transform 0.3s;
|
|
}
|
|
.card:hover { transform: translateY(-3px); border-color: rgba(56, 189, 248, 0.3); }
|
|
.card-title { font-size: 1.1rem; color: var(--muted); margin-bottom: 15px; font-weight: bold; }
|
|
.metric-value { font-size: 2.5rem; font-weight: 700; display: flex; align-items: baseline; gap: 8px;}
|
|
.unit { font-size: 1.2rem; color: var(--muted); font-weight: normal; }
|
|
|
|
.good { color: var(--success); } .bad { color: var(--danger); }
|
|
|
|
table {
|
|
width: 100%; border-collapse: collapse; margin-top: 15px;
|
|
text-align: right;
|
|
}
|
|
th, td { padding: 12px 15px; border-bottom: 1px solid var(--border); }
|
|
th { color: var(--muted); font-weight: normal; font-size: 0.9rem; }
|
|
tr:hover { background: rgba(255,255,255,0.02); }
|
|
|
|
.chart-container {
|
|
max-width: 1200px; margin: 0 auto; background: var(--card);
|
|
border-radius: 16px; padding: 25px; border: 1px solid var(--border);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>لوحة مراقبة Mithal.space 🚀</h1>
|
|
|
|
<div class="grid">
|
|
<div class="card">
|
|
<div class="card-title">نسبة التوافر (Uptime)</div>
|
|
<div id="uptime" class="metric-value good">99.9 <span class="unit">%</span></div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-title">صلاحية شهادة SSL</div>
|
|
<div id="ssl-status" class="metric-value good">64 <span class="unit">يوم متبقي</span></div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-title">متوسط الاستجابة</div>
|
|
<div id="avg-latency" class="metric-value">120 <span class="unit">ms</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chart-container">
|
|
<div class="card-title">زمن الاستجابة (آخر 60 دقيقة)</div>
|
|
<canvas id="latencyChart" height="80"></canvas>
|
|
</div>
|
|
|
|
<div class="grid" style="margin-top: 30px;">
|
|
<div class="card" style="grid-column: 1 / -1;">
|
|
<div class="card-title">سجل الفحوصات (آخر 10)</div>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>الوقت</th>
|
|
<th>الحالة</th>
|
|
<th>الاستجابة (ms)</th>
|
|
<th>DNS (ms)</th>
|
|
<th>بحث (ms)</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="history-table">
|
|
<tr><td colspan="5" style="text-align:center; color: var(--muted)">جاري جلب البيانات...</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Mock data to demonstrate the beautiful UI (since we can't run the backend locally now)
|
|
function generateMockData() {
|
|
let labels = [];
|
|
let data = [];
|
|
let now = new Date();
|
|
for(let i=60; i>=0; i--) {
|
|
let d = new Date(now.getTime() - i*60000);
|
|
labels.push(d.getHours() + ':' + d.getMinutes().toString().padStart(2, '0'));
|
|
data.push(Math.floor(Math.random() * (150 - 80 + 1)) + 80);
|
|
}
|
|
return { labels, data };
|
|
}
|
|
|
|
const mock = generateMockData();
|
|
|
|
const ctx = document.getElementById('latencyChart').getContext('2d');
|
|
|
|
// Gradient for chart
|
|
let gradient = ctx.createLinearGradient(0, 0, 0, 400);
|
|
gradient.addColorStop(0, 'rgba(56, 189, 248, 0.5)');
|
|
gradient.addColorStop(1, 'rgba(56, 189, 248, 0.0)');
|
|
|
|
new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: mock.labels,
|
|
datasets: [{
|
|
label: 'Latency (ms)',
|
|
data: mock.data,
|
|
borderColor: '#38bdf8',
|
|
backgroundColor: gradient,
|
|
borderWidth: 2,
|
|
pointRadius: 0,
|
|
pointHoverRadius: 5,
|
|
fill: true,
|
|
tension: 0.4
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
plugins: { legend: { display: false } },
|
|
scales: {
|
|
x: { grid: { color: 'rgba(255,255,255,0.05)' }, ticks: { color: '#64748b' } },
|
|
y: { grid: { color: 'rgba(255,255,255,0.05)' }, ticks: { color: '#64748b' } }
|
|
}
|
|
}
|
|
});
|
|
|
|
// Populate Table with mock data
|
|
const tbody = document.getElementById('history-table');
|
|
let rows = '';
|
|
for(let i=0; i<10; i++) {
|
|
rows += `
|
|
<tr>
|
|
<td>${mock.labels[60-i]}</td>
|
|
<td class="good">200 OK</td>
|
|
<td>${mock.data[60-i]}</td>
|
|
<td>24.5</td>
|
|
<td>310.2</td>
|
|
</tr>`;
|
|
}
|
|
tbody.innerHTML = rows;
|
|
</script>
|
|
|
|
<!--
|
|
=====================================================================
|
|
Q5: Deployment Instructions (انشر الـ dashboard على ghaymah.systems)
|
|
=====================================================================
|
|
To deploy this dashboard on Ghaymah.systems:
|
|
1. Create a simple Nginx Dockerfile in this directory:
|
|
FROM nginx:alpine
|
|
COPY dashboard.html /usr/share/nginx/html/index.html
|
|
EXPOSE 80
|
|
2. Build and push the image:
|
|
docker build -t registry.ghaymah.systems/my-org/mithal-dashboard .
|
|
docker push registry.ghaymah.systems/my-org/mithal-dashboard
|
|
3. Deploy using Ghaymah CLI:
|
|
ghaymah deploy --name mithal-dashboard --image registry.ghaymah.systems/my-org/mithal-dashboard --port 80 --env production
|
|
=====================================================================
|
|
-->
|
|
</body>
|
|
</html>
|