117 أسطر
2.4 KiB
HTML
117 أسطر
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Application Dashboard</title>
|
|
|
|
<style>
|
|
body{
|
|
font-family: Arial, sans-serif;
|
|
background:#f4f4f4;
|
|
text-align:center;
|
|
margin-top:50px;
|
|
}
|
|
|
|
.card{
|
|
width:400px;
|
|
margin:auto;
|
|
background:white;
|
|
padding:25px;
|
|
border-radius:12px;
|
|
box-shadow:0 0 10px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
h1{
|
|
color:#333;
|
|
}
|
|
|
|
p{
|
|
font-size:22px;
|
|
margin:15px 0;
|
|
}
|
|
|
|
span{
|
|
font-weight:bold;
|
|
color:green;
|
|
}
|
|
|
|
span.down{
|
|
color:red;
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="card">
|
|
|
|
<h1>Application Dashboard</h1>
|
|
|
|
<p>
|
|
Status:
|
|
<span id="status">Loading...</span>
|
|
</p>
|
|
|
|
<p>
|
|
Requests:
|
|
<span id="requests">0</span>
|
|
</p>
|
|
|
|
<p>
|
|
Response Time:
|
|
<span id="response">0</span> ms
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
|
|
// IMPORTANT: change this after deploying to ghaymah.systems
|
|
// e.g. "https://your-app-name.ghaymah.systems"
|
|
const API_URL = "http://127.0.0.1:8000";
|
|
|
|
async function updateDashboard() {
|
|
|
|
try {
|
|
|
|
// Measure real round-trip latency from the browser's point of view
|
|
const clientStart = performance.now();
|
|
|
|
const response = await fetch(`${API_URL}/stats`);
|
|
const data = await response.json();
|
|
|
|
const clientLatency = Math.round(performance.now() - clientStart);
|
|
|
|
const statusEl = document.getElementById("status");
|
|
statusEl.textContent = data.status;
|
|
statusEl.classList.toggle("down", data.status !== "UP");
|
|
|
|
document.getElementById("requests").textContent = data.requests;
|
|
|
|
// Show the server-measured latency; fall back to client-measured
|
|
// round-trip time if the server didn't report anything useful.
|
|
document.getElementById("response").textContent =
|
|
data.response_time > 0 ? data.response_time : clientLatency;
|
|
|
|
}
|
|
catch(error){
|
|
|
|
const statusEl = document.getElementById("status");
|
|
statusEl.textContent = "DOWN";
|
|
statusEl.classList.add("down");
|
|
|
|
}
|
|
|
|
}
|
|
|
|
updateDashboard();
|
|
|
|
setInterval(updateDashboard, 30000);
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|