Update app.py
Browse files
app.py
CHANGED
|
@@ -197,14 +197,14 @@ body {
|
|
| 197 |
}
|
| 198 |
"""
|
| 199 |
|
| 200 |
-
htmlTemplate =
|
| 201 |
<!DOCTYPE html>
|
| 202 |
<html lang="zh">
|
| 203 |
<head>
|
| 204 |
<meta charset="UTF-8">
|
| 205 |
<title>HF Space Monitor</title>
|
| 206 |
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🚀</text></svg>">
|
| 207 |
-
<style>{lightModeStyle}</style>
|
| 208 |
</head>
|
| 209 |
<body>
|
| 210 |
<div class="container">
|
|
@@ -228,7 +228,7 @@ htmlTemplate = f"""
|
|
| 228 |
const username = 'yangtb24';
|
| 229 |
const serversData = {{ servers_data|tojson }};
|
| 230 |
|
| 231 |
-
function createServerCard(serverId, spaceId, owner) {
|
| 232 |
const card = document.createElement('div');
|
| 233 |
card.id = `server-${serverId}`;
|
| 234 |
card.className = 'server-card';
|
|
@@ -268,16 +268,16 @@ htmlTemplate = f"""
|
|
| 268 |
</div>
|
| 269 |
`;
|
| 270 |
document.getElementById('servers').appendChild(card);
|
| 271 |
-
}
|
| 272 |
|
| 273 |
-
function updateServerCard(data, spaceId) {
|
| 274 |
const serverId = data.replica;
|
| 275 |
const serverElement = document.getElementById(`server-${serverId}`);
|
| 276 |
const owner = data.owner;
|
| 277 |
|
| 278 |
-
if (!serverElement) {
|
| 279 |
createServerCard(serverId, spaceId, owner);
|
| 280 |
-
}
|
| 281 |
|
| 282 |
const card = document.getElementById(`server-${serverId}`);
|
| 283 |
const cpuUsage = data.cpu_usage_pct;
|
|
@@ -294,10 +294,10 @@ htmlTemplate = f"""
|
|
| 294 |
card.querySelector('.upload').textContent = `${formatBytes(uploadBps)}/s`;
|
| 295 |
card.querySelector('.download').textContent = `${formatBytes(downloadBps)}/s`;
|
| 296 |
updateSummary(serverId, data);
|
| 297 |
-
}
|
| 298 |
|
| 299 |
|
| 300 |
-
function updateSummary(serverId, data) {
|
| 301 |
|
| 302 |
const now = Date.now();
|
| 303 |
let online = 0;
|
|
@@ -305,51 +305,51 @@ htmlTemplate = f"""
|
|
| 305 |
let totalUpload = 0;
|
| 306 |
let totalDownload = 0;
|
| 307 |
|
| 308 |
-
for (const serverId in serversData) {
|
| 309 |
const server = serversData[serverId];
|
| 310 |
const isOnline = server.isOnline;
|
| 311 |
const serverCard = document.getElementById(`server-${serverId}`);
|
| 312 |
|
| 313 |
-
if (serverCard) {
|
| 314 |
const statusDot = serverCard.querySelector('.status-dot');
|
| 315 |
-
statusDot.className = `status-dot status-${
|
| 316 |
|
| 317 |
-
if (isOnline && server.data) {
|
| 318 |
const uploadText = formatBytes(server.data.tx_bps);
|
| 319 |
const downloadText = formatBytes(server.data.rx_bps);
|
| 320 |
totalUpload += server.data.tx_bps;
|
| 321 |
totalDownload += server.data.rx_bps;
|
| 322 |
-
}
|
| 323 |
-
}
|
| 324 |
isOnline ? online++ : offline++;
|
| 325 |
-
}
|
| 326 |
document.getElementById('totalServers').textContent = Object.keys(serversData).length;
|
| 327 |
document.getElementById('onlineServers').textContent = online;
|
| 328 |
document.getElementById('offlineServers').textContent = offline;
|
| 329 |
-
document.getElementById('totalUpload').textContent = `${
|
| 330 |
-
document.getElementById('totalDownload').textContent = `${
|
| 331 |
-
}
|
| 332 |
|
| 333 |
|
| 334 |
|
| 335 |
-
function formatBytes(bytes) {
|
| 336 |
if (bytes === 0) return '0 B';
|
| 337 |
const k = 1024;
|
| 338 |
const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
|
| 339 |
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
| 340 |
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
| 341 |
-
}
|
| 342 |
|
| 343 |
|
| 344 |
// Initial render based on initial data
|
| 345 |
-
for (const serverId in serversData) {
|
| 346 |
const server = serversData[serverId];
|
| 347 |
-
if (server.data) {
|
| 348 |
updateServerCard(server.data, server.spaceId);
|
| 349 |
-
}
|
| 350 |
createServerCard(serverId, server.spaceId, server.owner)
|
| 351 |
-
}
|
| 352 |
-
}
|
| 353 |
updateSummary();
|
| 354 |
|
| 355 |
|
|
|
|
| 197 |
}
|
| 198 |
"""
|
| 199 |
|
| 200 |
+
htmlTemplate = """
|
| 201 |
<!DOCTYPE html>
|
| 202 |
<html lang="zh">
|
| 203 |
<head>
|
| 204 |
<meta charset="UTF-8">
|
| 205 |
<title>HF Space Monitor</title>
|
| 206 |
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🚀</text></svg>">
|
| 207 |
+
<style>{{ lightModeStyle }}</style>
|
| 208 |
</head>
|
| 209 |
<body>
|
| 210 |
<div class="container">
|
|
|
|
| 228 |
const username = 'yangtb24';
|
| 229 |
const serversData = {{ servers_data|tojson }};
|
| 230 |
|
| 231 |
+
function createServerCard(serverId, spaceId, owner) {
|
| 232 |
const card = document.createElement('div');
|
| 233 |
card.id = `server-${serverId}`;
|
| 234 |
card.className = 'server-card';
|
|
|
|
| 268 |
</div>
|
| 269 |
`;
|
| 270 |
document.getElementById('servers').appendChild(card);
|
| 271 |
+
}
|
| 272 |
|
| 273 |
+
function updateServerCard(data, spaceId) {
|
| 274 |
const serverId = data.replica;
|
| 275 |
const serverElement = document.getElementById(`server-${serverId}`);
|
| 276 |
const owner = data.owner;
|
| 277 |
|
| 278 |
+
if (!serverElement) {
|
| 279 |
createServerCard(serverId, spaceId, owner);
|
| 280 |
+
}
|
| 281 |
|
| 282 |
const card = document.getElementById(`server-${serverId}`);
|
| 283 |
const cpuUsage = data.cpu_usage_pct;
|
|
|
|
| 294 |
card.querySelector('.upload').textContent = `${formatBytes(uploadBps)}/s`;
|
| 295 |
card.querySelector('.download').textContent = `${formatBytes(downloadBps)}/s`;
|
| 296 |
updateSummary(serverId, data);
|
| 297 |
+
}
|
| 298 |
|
| 299 |
|
| 300 |
+
function updateSummary(serverId, data) {
|
| 301 |
|
| 302 |
const now = Date.now();
|
| 303 |
let online = 0;
|
|
|
|
| 305 |
let totalUpload = 0;
|
| 306 |
let totalDownload = 0;
|
| 307 |
|
| 308 |
+
for (const serverId in serversData) {
|
| 309 |
const server = serversData[serverId];
|
| 310 |
const isOnline = server.isOnline;
|
| 311 |
const serverCard = document.getElementById(`server-${serverId}`);
|
| 312 |
|
| 313 |
+
if (serverCard) {
|
| 314 |
const statusDot = serverCard.querySelector('.status-dot');
|
| 315 |
+
statusDot.className = `status-dot status-${isOnline ? 'online' : 'offline'}`;
|
| 316 |
|
| 317 |
+
if (isOnline && server.data) {
|
| 318 |
const uploadText = formatBytes(server.data.tx_bps);
|
| 319 |
const downloadText = formatBytes(server.data.rx_bps);
|
| 320 |
totalUpload += server.data.tx_bps;
|
| 321 |
totalDownload += server.data.rx_bps;
|
| 322 |
+
}
|
| 323 |
+
}
|
| 324 |
isOnline ? online++ : offline++;
|
| 325 |
+
}
|
| 326 |
document.getElementById('totalServers').textContent = Object.keys(serversData).length;
|
| 327 |
document.getElementById('onlineServers').textContent = online;
|
| 328 |
document.getElementById('offlineServers').textContent = offline;
|
| 329 |
+
document.getElementById('totalUpload').textContent = `${formatBytes(totalUpload)}/s`;
|
| 330 |
+
document.getElementById('totalDownload').textContent = `${formatBytes(totalDownload)}/s`;
|
| 331 |
+
}
|
| 332 |
|
| 333 |
|
| 334 |
|
| 335 |
+
function formatBytes(bytes) {
|
| 336 |
if (bytes === 0) return '0 B';
|
| 337 |
const k = 1024;
|
| 338 |
const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
|
| 339 |
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
| 340 |
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
| 341 |
+
}
|
| 342 |
|
| 343 |
|
| 344 |
// Initial render based on initial data
|
| 345 |
+
for (const serverId in serversData) {
|
| 346 |
const server = serversData[serverId];
|
| 347 |
+
if (server.data) {
|
| 348 |
updateServerCard(server.data, server.spaceId);
|
| 349 |
+
} else {
|
| 350 |
createServerCard(serverId, server.spaceId, server.owner)
|
| 351 |
+
}
|
| 352 |
+
}
|
| 353 |
updateSummary();
|
| 354 |
|
| 355 |
|