137 lines
2.6 KiB
HTML
137 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<title>DevOps Dashboard</title>
|
||
<style>
|
||
body {
|
||
font-family: Arial;
|
||
background: #0f172a;
|
||
color: white;
|
||
text-align: center;
|
||
padding: 40px;
|
||
}
|
||
|
||
h1 {
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 250px);
|
||
gap: 20px;
|
||
justify-content: center;
|
||
}
|
||
|
||
.card {
|
||
background: #1e293b;
|
||
padding: 20px;
|
||
border-radius: 12px;
|
||
}
|
||
|
||
input {
|
||
padding: 8px;
|
||
margin-top: 10px;
|
||
width: 70%;
|
||
}
|
||
|
||
button {
|
||
padding: 8px 15px;
|
||
margin-top: 10px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
ul {
|
||
list-style: none;
|
||
padding: 0;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<h1>🚀 DevOps Dashboard</h1>
|
||
|
||
<div class="grid">
|
||
<div class="card">
|
||
<h3>⏱ DB Time</h3>
|
||
<p id="time">Loading...</p>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h3>🖥 Pod</h3>
|
||
<p id="host">Loading...</p>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h3>📊 Requests</h3>
|
||
<p id="count">0</p>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h3>🔌 Status</h3>
|
||
<p id="status">Checking...</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ADD MESSAGE -->
|
||
<div class="card">
|
||
<h3>➕ Add Message</h3>
|
||
<input id="msg" placeholder="Enter message">
|
||
<br>
|
||
<button onclick="addMessage()">Add</button>
|
||
</div>
|
||
|
||
<!-- MESSAGE LIST -->
|
||
<div class="card">
|
||
<h3>📜 Stored Messages</h3>
|
||
<ul id="list"></ul>
|
||
</div>
|
||
|
||
<script>
|
||
async function loadStatus() {
|
||
const res = await fetch("/api/status");
|
||
const data = await res.json();
|
||
|
||
document.getElementById("time").innerText = data.time;
|
||
document.getElementById("host").innerText = data.hostname;
|
||
document.getElementById("count").innerText = data.requests;
|
||
document.getElementById("status").innerText = data.status;
|
||
}
|
||
|
||
async function addMessage() {
|
||
const text = document.getElementById("msg").value;
|
||
|
||
await fetch("/api/add", {
|
||
method: "POST",
|
||
headers: {
|
||
"Content-Type": "application/json"
|
||
},
|
||
body: JSON.stringify({ text })
|
||
});
|
||
|
||
loadMessages();
|
||
}
|
||
|
||
async function loadMessages() {
|
||
const res = await fetch("/api/messages");
|
||
const data = await res.json();
|
||
|
||
const list = document.getElementById("list");
|
||
list.innerHTML = "";
|
||
|
||
data.forEach(item => {
|
||
const li = document.createElement("li");
|
||
li.innerText = item.text;
|
||
list.appendChild(li);
|
||
});
|
||
}
|
||
|
||
// auto refresh
|
||
setInterval(loadStatus, 3000);
|
||
setInterval(loadMessages, 3000);
|
||
|
||
loadStatus();
|
||
loadMessages();
|
||
</script>
|
||
|
||
</body>
|
||
</html> |