99 أسطر
1.6 KiB
HTML
99 أسطر
1.6 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;
|
|
}
|
|
</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>
|
|
|
|
async function updateDashboard() {
|
|
|
|
try {
|
|
|
|
const response = await fetch("http://127.0.0.1:8000/stats");
|
|
|
|
const data = await response.json();
|
|
|
|
document.getElementById("status").textContent = data.status;
|
|
|
|
document.getElementById("requests").textContent = data.requests;
|
|
|
|
document.getElementById("response").textContent = data.response_time;
|
|
|
|
}
|
|
|
|
catch(error){
|
|
|
|
document.getElementById("status").textContent = "DOWN";
|
|
|
|
}
|
|
|
|
}
|
|
|
|
updateDashboard();
|
|
|
|
setInterval(updateDashboard,30000);
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|