allard
169 lines
3.9 KiB
HTML
169 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>node-pool-controller 1.0</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
margin: 20px;
|
|
background-color: #f4f8fc;
|
|
color: #0f172a;
|
|
}
|
|
|
|
/* Header */
|
|
.header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.logo {
|
|
font-weight: bold;
|
|
font-size: 20px;
|
|
color: #1e40af;
|
|
padding: 6px 12px;
|
|
border: 2px solid #1e40af;
|
|
border-radius: 6px;
|
|
background: #e0e7ff;
|
|
}
|
|
|
|
.title {
|
|
font-size: 26px;
|
|
font-weight: 600;
|
|
color: #1e3a8a;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* Table */
|
|
table {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
background: white;
|
|
box-shadow: 0 4px 10px rgba(30, 64, 175, 0.1);
|
|
}
|
|
|
|
th, td {
|
|
border: 1px solid #c7d2fe;
|
|
padding: 8px;
|
|
text-align: left;
|
|
}
|
|
|
|
th {
|
|
background-color: #1e40af;
|
|
color: white;
|
|
}
|
|
|
|
tbody tr:nth-child(even) {
|
|
background-color: #eef2ff;
|
|
}
|
|
|
|
tbody tr:hover {
|
|
background-color: #dbeafe;
|
|
}
|
|
|
|
/* Temperature coloring */
|
|
.temp-cool {
|
|
color: #15803d;
|
|
}
|
|
|
|
.temp-warm {
|
|
color: #ca8a04;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.temp-hot {
|
|
color: #b91c1c;
|
|
font-weight: 700;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="header">
|
|
<div class="logo">allarddcs</div>
|
|
<div class="title">node-pool-controller 1.0</div>
|
|
<div id="cluster-info" style="margin-left:auto; font-weight:600;">
|
|
Cluster: -
|
|
</div>
|
|
</div>
|
|
|
|
<table id="pool">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>IP</th>
|
|
<th>Status</th>
|
|
<th>Role</th>
|
|
<th>Cluster</th>
|
|
<th>CPU (%)</th>
|
|
<th>Memory (%)</th>
|
|
<th>Pods</th>
|
|
<th>Temp (°C)</th>
|
|
<th>Last Active</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
|
|
<script>
|
|
async function loadPool() {
|
|
try {
|
|
const res = await fetch('/status');
|
|
const data = await res.json();
|
|
console.log("Status response:", data); // debug line
|
|
|
|
const tbody = document.querySelector('#pool tbody');
|
|
tbody.innerHTML = '';
|
|
|
|
// Update cluster header
|
|
const clusterInfo = document.getElementById('cluster-info');
|
|
clusterInfo.textContent =
|
|
`Cluster: ${data.clusterName ?? "unknown"} | ` +
|
|
`CPU ${data.clusterCpu ?? 0}% | MEM ${data.clusterMemory ?? 0}%`;
|
|
|
|
// Render node table
|
|
(data.nodes ?? []).forEach(n => {
|
|
const tr = document.createElement('tr');
|
|
|
|
let tempDisplay = "-";
|
|
let tempClass = "";
|
|
|
|
if (typeof n.temperature === "number") {
|
|
tempDisplay = n.temperature.toFixed(1);
|
|
if (n.temperature >= 70) tempClass = "temp-hot";
|
|
else if (n.temperature >= 55) tempClass = "temp-warm";
|
|
else tempClass = "temp-cool";
|
|
}
|
|
|
|
tr.innerHTML = `
|
|
<td>${n.name}</td>
|
|
<td>${n.ip}</td>
|
|
<td>${n.status}</td>
|
|
<td>${n.role}</td>
|
|
<td>${n.cluster ?? "none"}</td>
|
|
<td>${n.cpu}</td>
|
|
<td>${n.memory}</td>
|
|
<td>${n.pods ?? 0}</td>
|
|
<td class="${tempClass}">${tempDisplay}</td>
|
|
<td>${n.last_active}</td>
|
|
`;
|
|
tbody.appendChild(tr);
|
|
});
|
|
} catch (e) {
|
|
console.error("Failed to load pool status:", e);
|
|
}
|
|
}
|
|
|
|
// Refresh every 5 seconds
|
|
setInterval(loadPool, 5000);
|
|
loadPool();
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|