Hugging Face's logo

Spaces:
yangtb24
/
Monitor
Paused

App Files Community
yangtb24 commited on
Commit
9e96e96
·
verified ·
1 Parent(s): 1510415

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +98 -93
app.py CHANGED
@@ -1,6 +1,7 @@
1
  from flask import Flask, render_template_string, jsonify, Response
2
  import requests
3
  import os
 
4
 
5
  app = Flask(__name__)
6
 
@@ -202,7 +203,7 @@ htmlTemplate = f"""
202
  <meta charset="UTF-8">
203
  <title>HF Space Monitor</title>
204
  <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>">
205
- <style>{lightModeStyle}</style>
206
  </head>
207
  <body>
208
  <div class="container">
@@ -238,12 +239,9 @@ htmlTemplate = f"""
238
  class MetricsManager {{
239
  constructor() {{
240
  this.eventSources = new Map();
241
- this.servers = new Map();
242
  this.instanceOwners = new Map();
243
  this.spaceIds = new Map();
244
- // Store raw bps values for accurate total calculation.
245
- this.uploadSpeeds = new Map();
246
- this.downloadSpeeds = new Map();
247
  }}
248
 
249
  async connect(instanceId, username) {{
@@ -254,14 +252,20 @@ htmlTemplate = f"""
254
 
255
  this.spaceIds.set(instanceId, instanceId);
256
  this.instanceOwners.set(instanceId, username);
 
 
257
 
258
  eventSource.addEventListener("metric", (event) => {{
259
  try {{
260
  const data = JSON.parse(event.data);
261
  // console.log("Received data:", data); // Debugging line
262
- this.uploadSpeeds.set(instanceId, data.tx_bps); // Store raw bps
263
- this.downloadSpeeds.set(instanceId, data.rx_bps); // Store raw bps
 
 
 
264
  updateServerCard(data, instanceId);
 
265
  }} catch (error) {{
266
  console.error(`解析数据失败 (${{instanceId}}):`, error);
267
  }}
@@ -286,7 +290,7 @@ htmlTemplate = f"""
286
  }}
287
 
288
  const metricsManager = new MetricsManager();
289
- const servers = new Map();
290
 
291
  async function initialize() {{
292
  const instances = await fetchInstances();
@@ -297,101 +301,100 @@ htmlTemplate = f"""
297
 
298
 
299
  function updateServerCard(data, spaceId) {{
300
- const serverId = data.replica;
301
- const serverElement = document.getElementById(`server-${{serverId}}`);
302
- const owner = metricsManager.instanceOwners.get(spaceId);
303
-
304
- if (!serverElement) {{
305
- const card = document.createElement('div');
306
- card.id = `server-${{serverId}}`;
307
- card.className = 'server-card';
308
- card.innerHTML = `
309
- <div class="server-header">
310
- <div class="server-name">
311
- <div class="status-dot status-online"></div>
312
- <svg class="server-flag" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
313
- <path d="M21 3H3C1.9 3 1 3.9 1 5v3c0 1.1.9 2 2 10h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 5H4V6h16v2zm1 4H3c-1.1 0-2 .9-2 2v3c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2v-3c0-1.1-.9-2-2-2zm-1 5H4v-2h16v2zm1 4H3c-1.1 0-2 .9-2 2v3c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2v-3c0-1.1-.9-2-2-2zm-1 5H4v-2h16v2z"/>
314
- </svg>
315
- <div>${{serverId}} (${{owner}}/${{spaceId}})</div>
316
- </div>
317
- </div>
318
- <div class="metric-grid">
319
- <div class="metric-item">
320
- <div class="metric-label">CPU</div>
321
- <div class="progress-bar-container">
322
- <div class="cpu-progress-bar"></div>
323
  </div>
324
- <div class="metric-value cpu-usage">0%</div>
325
- </div>
326
- <div class="metric-item">
327
- <div class="metric-label">内存</div>
328
- <div class="progress-bar-container">
329
- <div class="memory-progress-bar"></div>
 
 
330
  </div>
331
- <div class="metric-value memory-usage">0%</div>
332
- </div>
333
- <div class="metric-item">
334
- <div class="metric-label">上传</div>
335
- <div class="metric-value upload">0 KB/s</div>
336
- </div>
337
- <div class="metric-item">
338
- <div class="metric-label">下载</div>
339
- <div class="metric-value download">0 KB/s</div>
340
- </div>
341
- </div>
342
- `;
343
- document.getElementById('servers').appendChild(card);
344
- }}
 
 
 
 
 
345
 
346
- const card = document.getElementById(`server-${{serverId}}`);
347
- const cpuUsage = data.cpu_usage_pct;
348
- const memoryUsage = (data.memory_used_bytes / data.memory_total_bytes) * 100;
349
- const uploadBps = data.tx_bps;
350
- const downloadBps = data.rx_bps;
351
 
352
- card.querySelector('.cpu-usage').textContent = `${{cpuUsage.toFixed(2)}}%`;
353
- card.querySelector('.cpu-progress-bar').style.width = `${{cpuUsage}}%`;
354
 
355
- card.querySelector('.memory-usage').textContent = `${{memoryUsage.toFixed(2)}}%`;
356
- card.querySelector('.memory-progress-bar').style.width = `${{memoryUsage}}%`;
357
 
358
- card.querySelector('.upload').textContent = `${{formatBytes(uploadBps)}}/s`;
359
- card.querySelector('.download').textContent = `${{formatBytes(downloadBps)}}/s`;
360
 
361
- servers.set(serverId, Date.now());
362
- updateSummary();
363
  }}
364
 
365
  function updateSummary() {{
366
- const now = Date.now();
367
- let online = 0;
368
- let offline = 0;
369
- let totalUpload = 0;
370
- let totalDownload = 0;
371
-
372
- servers.forEach((lastSeen, serverId) => {{
373
- const isOnline = (now - lastSeen) < 10000;
374
- const serverCard = document.getElementById(`server-${{serverId}}`);
375
- if (serverCard) {{
376
- const statusDot = serverCard.querySelector('.status-dot');
377
- statusDot.className = `status-dot status-${{isOnline ? 'online' : 'offline'}}`;
 
 
 
 
 
 
 
 
 
 
378
  }}
379
- isOnline ? online++ : offline++;
380
- }});
381
-
382
- // Sum up the *raw* upload/download speeds from the MetricsManager.
383
- for (let speed of metricsManager.uploadSpeeds.values()) {
384
- totalUpload += speed;
385
- }
386
- for (let speed of metricsManager.downloadSpeeds.values()) {
387
- totalDownload += speed;
388
- }
389
-
390
- document.getElementById('totalServers').textContent = servers.size;
391
  document.getElementById('onlineServers').textContent = online;
392
  document.getElementById('offlineServers').textContent = offline;
393
- document.getElementById('totalUpload').textContent = `${{formatBytes(totalUpload)}}/s`; // Format *after* summing
394
- document.getElementById('totalDownload').textContent = `${{formatBytes(totalDownload)}}/s`; // Format *after* summing
395
  }}
396
 
397
  function formatBytes(bytes) {{
@@ -417,7 +420,7 @@ htmlTemplate = f"""
417
  </html>
418
  """
419
 
420
- USERNAME = os.environ.get("USERNAME", "yangtb24")
421
 
422
  def fetch_instances(username):
423
  try:
@@ -461,9 +464,11 @@ def stream_metrics(username, instance_id):
461
  event_type = line.split(":", 1)[1].strip()
462
  elif line.startswith("data:"):
463
  data_lines.append(line.split(":", 1)[1].strip())
464
-
465
  if event_type == "metric":
466
- yield f"event: {event_type}\ndata: {''.join(data_lines)}\n\n"
 
 
467
 
468
  except requests.exceptions.RequestException as e:
469
  print(f"Request Exception: {e}")
 
1
  from flask import Flask, render_template_string, jsonify, Response
2
  import requests
3
  import os
4
+ import json # Import the json module
5
 
6
  app = Flask(__name__)
7
 
 
203
  <meta charset="UTF-8">
204
  <title>HF Space Monitor</title>
205
  <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>">
206
+ <style>{{lightModeStyle}}</style>
207
  </head>
208
  <body>
209
  <div class="container">
 
239
  class MetricsManager {{
240
  constructor() {{
241
  this.eventSources = new Map();
242
+ this.servers = new Map(); // Store server data
243
  this.instanceOwners = new Map();
244
  this.spaceIds = new Map();
 
 
 
245
  }}
246
 
247
  async connect(instanceId, username) {{
 
252
 
253
  this.spaceIds.set(instanceId, instanceId);
254
  this.instanceOwners.set(instanceId, username);
255
+ this.servers.set(instanceId, {{ lastSeen: 0, uploadBps: 0, downloadBps: 0 }}); // Initialize server data
256
+
257
 
258
  eventSource.addEventListener("metric", (event) => {{
259
  try {{
260
  const data = JSON.parse(event.data);
261
  // console.log("Received data:", data); // Debugging line
262
+ this.servers.set(instanceId, {{
263
+ lastSeen: Date.now(),
264
+ uploadBps: data.tx_bps,
265
+ downloadBps: data.rx_bps,
266
+ }});
267
  updateServerCard(data, instanceId);
268
+
269
  }} catch (error) {{
270
  console.error(`解析数据失败 (${{instanceId}}):`, error);
271
  }}
 
290
  }}
291
 
292
  const metricsManager = new MetricsManager();
293
+ //const servers = new Map(); // Moved to MetricsManager
294
 
295
  async function initialize() {{
296
  const instances = await fetchInstances();
 
301
 
302
 
303
  function updateServerCard(data, spaceId) {{
304
+ const serverId = data.replica;
305
+ const serverElement = document.getElementById(`server-${{serverId}}`);
306
+ const owner = metricsManager.instanceOwners.get(spaceId);
307
+
308
+ if (!serverElement) {{
309
+ const card = document.createElement('div');
310
+ card.id = `server-${{serverId}}`;
311
+ card.className = 'server-card';
312
+ card.innerHTML = `
313
+ <div class="server-header">
314
+ <div class="server-name">
315
+ <div class="status-dot status-online"></div>
316
+ <svg class="server-flag" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
317
+ <path d="M21 3H3C1.9 3 1 3.9 1 5v3c0 1.1.9 2 2 10h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 5H4V6h16v2zm1 4H3c-1.1 0-2 .9-2 2v3c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2v-3c0-1.1-.9-2-2-2zm-1 5H4v-2h16v2zm1 4H3c-1.1 0-2 .9-2 2v3c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2v-3c0-1.1-.9-2-2-2zm-1 5H4v-2h16v2z"/>
318
+ </svg>
319
+ <div>${{serverId}} (${{owner}}/${{spaceId}})</div>
 
 
 
 
 
 
 
320
  </div>
321
+ </div>
322
+ <div class="metric-grid">
323
+ <div class="metric-item">
324
+ <div class="metric-label">CPU</div>
325
+ <div class="progress-bar-container">
326
+ <div class="cpu-progress-bar"></div>
327
+ </div>
328
+ <div class="metric-value cpu-usage">0%</div>
329
  </div>
330
+ <div class="metric-item">
331
+ <div class="metric-label">内存</div>
332
+ <div class="progress-bar-container">
333
+ <div class="memory-progress-bar"></div>
334
+ </div>
335
+ <div class="metric-value memory-usage">0%</div>
336
+ </div>
337
+ <div class="metric-item">
338
+ <div class="metric-label">上传</div>
339
+ <div class="metric-value upload">0 KB/s</div>
340
+ </div>
341
+ <div class="metric-item">
342
+ <div class="metric-label">下载</div>
343
+ <div class="metric-value download">0 KB/s</div>
344
+ </div>
345
+ </div>
346
+ `;
347
+ document.getElementById('servers').appendChild(card);
348
+ }}
349
 
350
+ const card = document.getElementById(`server-${{serverId}}`);
351
+ const cpuUsage = data.cpu_usage_pct;
352
+ const memoryUsage = (data.memory_used_bytes / data.memory_total_bytes) * 100;
353
+ const uploadBps = data.tx_bps;
354
+ const downloadBps = data.rx_bps;
355
 
356
+ card.querySelector('.cpu-usage').textContent = `${{cpuUsage.toFixed(2)}}%`;
357
+ card.querySelector('.cpu-progress-bar').style.width = `${{cpuUsage}}%`;
358
 
359
+ card.querySelector('.memory-usage').textContent = `${{memoryUsage.toFixed(2)}}%`;
360
+ card.querySelector('.memory-progress-bar').style.width = `${{memoryUsage}}%`;
361
 
362
+ card.querySelector('.upload').textContent = `${{formatBytes(uploadBps)}}/s`;
363
+ card.querySelector('.download').textContent = `${{formatBytes(downloadBps)}}/s`;
364
 
365
+ // servers.set(serverId, Date.now()); // NO LONGER NEEDED - handled in MetricsManager
366
+ updateSummary();
367
  }}
368
 
369
  function updateSummary() {{
370
+ const now = Date.now();
371
+ let online = 0;
372
+ let offline = 0;
373
+ let totalUpload = 0;
374
+ let totalDownload = 0;
375
+
376
+ for (const [serverId, serverData] of metricsManager.servers) {{
377
+ const isOnline = (now - serverData.lastSeen) < 10000;
378
+ const serverCard = document.getElementById(`server-${{serverId}}`);
379
+
380
+ if (serverCard) {{
381
+ const statusDot = serverCard.querySelector('.status-dot');
382
+ statusDot.className = `status-dot status-${{isOnline ? 'online' : 'offline'}}`;
383
+ }}
384
+
385
+ if (isOnline) {{
386
+ online++;
387
+ totalUpload += serverData.uploadBps || 0; // Use serverData, handle null/undefined
388
+ totalDownload += serverData.downloadBps || 0; // Use serverData, handle null/undefined
389
+ }} else {{
390
+ offline++;
391
+ }}
392
  }}
393
+ document.getElementById('totalServers').textContent = metricsManager.servers.size;
 
 
 
 
 
 
 
 
 
 
 
394
  document.getElementById('onlineServers').textContent = online;
395
  document.getElementById('offlineServers').textContent = offline;
396
+ document.getElementById('totalUpload').textContent = `${{formatBytes(totalUpload)}}/s`;
397
+ document.getElementById('totalDownload').textContent = `${{formatBytes(totalDownload)}}/s`;
398
  }}
399
 
400
  function formatBytes(bytes) {{
 
420
  </html>
421
  """
422
 
423
+ USERNAME = os.environ.get("USERNAME", "yangtb24") # Default username
424
 
425
  def fetch_instances(username):
426
  try:
 
464
  event_type = line.split(":", 1)[1].strip()
465
  elif line.startswith("data:"):
466
  data_lines.append(line.split(":", 1)[1].strip())
467
+
468
  if event_type == "metric":
469
+ # Correctly yield the JSON data:
470
+ yield f"event: {event_type}\ndata: {json.dumps(json.loads(''.join(data_lines)))}\n\n"
471
+
472
 
473
  except requests.exceptions.RequestException as e:
474
  print(f"Request Exception: {e}")