mhmdmstfa2010/ghaymah-exam-Mohamed_Moustafa-SRE
1
0
نسخ 0
الشفرة المشكلات طلبات السحب Actions Packages المشاريع الإصدارات الويكي النشاط

first commit

تصفح المصدر
هذا الالتزام موجود في:
Mohamed Moustafa
2026-07-27 23:27:12 +03:00
التزام c653222887
43 ملفات معدلة مع 3837 إضافات و0 حذوفات
تنزيل ملف التصحيح تنزيل ملف الاختلاف توسيع جميع الملفات طي جميع الملفات

113
q5-mithal-monitor/dashboard.html Normal file
عرض الملف

@@ -0,0 +1,113 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mithal.space Monitor Dashboard</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
</head>
<body>
<div class="dashboard">
<!-- Header -->
<header class="header">
<div class="header-left">
<h1 class="header-title">Mithal.space Monitor</h1>
<span class="header-subtitle">Real-time Website Health</span>
</div>
<div class="header-right">
<button id="themeToggle" class="theme-toggle" title="Toggle dark mode">
<span class="icon-sun">&#9788;</span>
<span class="icon-moon">&#9790;</span>
</button>
<div class="refresh-info">
<span id="countdown" class="countdown">30s</span>
<button id="refreshBtn" class="refresh-btn" title="Refresh now">&#8635;</button>
</div>
<button id="exportCsv" class="export-btn" title="Export CSV">&#8615; CSV</button>
</div>
</header>
<!-- Loading Indicator -->
<div id="loadingIndicator" class="loading-indicator">
<div class="spinner"></div>
<span>Loading metrics...</span>
</div>
<!-- Status Cards -->
<section class="cards">
<div class="card" id="cardStatus">
<div class="card-label">Current Status</div>
<div class="card-value" id="currentStatus">--</div>
<div class="card-indicator" id="statusIndicator"></div>
</div>
<div class="card">
<div class="card-label">HTTP Latency</div>
<div class="card-value" id="currentLatency">--</div>
<div class="card-unit">ms</div>
</div>
<div class="card">
<div class="card-label">DNS Lookup</div>
<div class="card-value" id="currentDns">--</div>
<div class="card-unit">ms</div>
</div>
<div class="card">
<div class="card-label">SSL Remaining</div>
<div class="card-value" id="currentSsl">--</div>
<div class="card-unit">days</div>
</div>
<div class="card">
<div class="card-label">Search Response</div>
<div class="card-value" id="currentSearch">--</div>
<div class="card-unit">ms</div>
</div>
<div class="card">
<div class="card-label">Uptime (24h)</div>
<div class="card-value" id="uptimePercent">--</div>
<div class="card-unit">%</div>
</div>
</section>
<!-- Charts -->
<section class="charts">
<div class="chart-container">
<h3>Latency (Last Hour)</h3>
<canvas id="latencyChart"></canvas>
</div>
<div class="chart-container">
<h3>Search Response Time</h3>
<canvas id="searchChart"></canvas>
</div>
<div class="chart-container">
<h3>DNS Lookup Time</h3>
<canvas id="dnsChart"></canvas>
</div>
</section>
<!-- Table -->
<section class="table-section">
<h3>Latest 10 Checks</h3>
<div class="table-wrapper">
<table id="metricsTable">
<thead>
<tr>
<th>Timestamp</th>
<th>HTTP</th>
<th>Latency (ms)</th>
<th>DNS (ms)</th>
<th>SSL Remaining</th>
<th>Search (ms)</th>
<th>Status</th>
</tr>
</thead>
<tbody id="metricsBody">
<tr><td colspan="7" class="no-data">No data available</td></tr>
</tbody>
</table>
</div>
</section>
</div>
<script src="script.js"></script>
</body>
</html>