Update app.py

app.py

@@ -1,7 +1,6 @@
 from flask import Flask, render_template_string, jsonify, Response
 import requests
 import os
-import json
 
 app = Flask(__name__)
 
@@ -220,148 +219,147 @@ htmlTemplate = f"""
     <div id="servers" class="stats-container">
     </div>
   </div>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/js/all.min.js" integrity="sha512-yFjZbTYRCJodnuyGlsKamNE/LlEaEA/3uWCGാരി7eIq7jWqVl3J8jL/kof/tfu9Xqzh/y/VM5sJd/tq5iEew==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/js/all.min.js" integrity="sha512-yFjZbTYRCJodnuyGlsKamNE/LlEaEA/3uWCGారి7eIq7jWqVl3J8jL/kof/tfu9Xqzh/y/VM5sJd/tq5iEew==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 
   <script>
-    const username = '{USERNAME}';
+    const username = '{{username}}';
 
-    async function fetchInstances() {{
-      try {{
+    async function fetchInstances() {
+      try {
         const response = await fetch(`/instances`);
         const userInstances = await response.json();
         return userInstances;
-      }} catch (error) {{
+      } catch (error) {
         console.error("获取实例列表失败：", error);
         return [];
-      }}
-    }}
+      }
+    }
 
-    class MetricsManager {{
-      constructor() {{
+    class MetricsManager {
+      constructor() {
         this.eventSources = new Map();
         this.servers = new Map();
         this.instanceOwners = new Map();
         this.spaceIds = new Map();
-        this.lastData = new Map(); // Store last received data
-      }}
+      }
 
-      async connect(instanceId, username) {{
+      async connect(instanceId, username) {
         if (this.eventSources.has(instanceId)) return;
 
-        try {{
-            const eventSource = new EventSource(`/metrics/${{username}}/${{instanceId}}`);
-
-            this.spaceIds.set(instanceId, instanceId);
-            this.instanceOwners.set(instanceId, username);
-
-            eventSource.addEventListener("metric", (event) => {{
-                try {{
-                    const data = JSON.parse(event.data);
-                    this.lastData.set(instanceId, data); // Store the data
-                    updateServerCard(data, instanceId);
-                }} catch (error) {{
-                    console.error(`解析数据失败 (${{instanceId}}):`, error);
-                }}
-            }});
-
-            eventSource.onerror = (error) => {{
-                console.error(`EventSource 错误 (${{instanceId}}):`, error);
-                eventSource.close();
-                this.eventSources.delete(instanceId);
-            }};
-
-            this.eventSources.set(instanceId, eventSource);
-        }} catch (error) {{
-            console.error(`连接失败 (${{username}}/${{instanceId}}):`, error);
-        }}
-    }}
-
-      disconnectAll() {{
+        try {
+          const eventSource = new EventSource(`/metrics/${username}/${instanceId}`);
+
+          this.spaceIds.set(instanceId, instanceId);
+          this.instanceOwners.set(instanceId, username);
+
+          eventSource.addEventListener("metric", (event) => {
+            try {
+              const data = JSON.parse(event.data);
+              // console.log("Received data:", data);
+              updateServerCard(data, instanceId);
+            } catch (error) {
+              console.error(`解析数据失败 (${instanceId}):`, error);
+            }
+          });
+
+          eventSource.onerror = (error) => {
+            console.error(`EventSource 错误 (${instanceId}):`, error);
+            eventSource.close();
+            this.eventSources.delete(instanceId); // 出错后删除连接
+          };
+
+          this.eventSources.set(instanceId, eventSource);
+        } catch (error) {
+          console.error(`连接失败 (${username}/${instanceId}):`, error);
+        }
+      }
+
+      disconnectAll() {
         this.eventSources.forEach(es => es.close());
         this.eventSources.clear();
-      }}
-
-      getLastData(instanceId) {{
-          return this.lastData.get(instanceId);
-      }}
-    }}
+      }
+    }
 
     const metricsManager = new MetricsManager();
     const servers = new Map();
+    // 全局变量，存储每个空间的原始上传和下载数据（单位：字节/秒）
+    const rawMetrics = new Map();
 
-    async function initialize() {{
+    async function initialize() {
       const instances = await fetchInstances();
-      instances.forEach(instance => {{
+      instances.forEach(instance => {
         metricsManager.connect(instance.id, instance.owner);
-      }});
-    }}
-
-
-    function updateServerCard(data, spaceId) {{
-        const serverId = data.replica;
-        const serverElement = document.getElementById(`server-${{serverId}}`);
-        const owner = metricsManager.instanceOwners.get(spaceId);
-
-        if (!serverElement) {{
-            const card = document.createElement('div');
-            card.id = `server-${{serverId}}`;
-            card.className = 'server-card';
-            card.innerHTML = `
-              <div class="server-header">
-                <div class="server-name">
-                  <div class="status-dot status-online"></div>
-                  <svg class="server-flag" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
-                    <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"/>
-                  </svg>
-                  <div>${{serverId}} (${{owner}}/${{spaceId}})</div>
-                </div>
-              </div>
-              <div class="metric-grid">
-                <div class="metric-item">
-                    <div class="metric-label">CPU</div>
-                    <div class="progress-bar-container">
-                        <div class="cpu-progress-bar"></div>
-                    </div>
-                    <div class="metric-value cpu-usage">0%</div>
-                </div>
-                <div class="metric-item">
-                    <div class="metric-label">内存</div>
-                    <div class="progress-bar-container">
-                        <div class="memory-progress-bar"></div>
-                    </div>
-                    <div class="metric-value memory-usage">0%</div>
-                </div>
-                <div class="metric-item">
-                  <div class="metric-label">上传</div>
-                  <div class="metric-value upload">0 KB/s</div>
+      });
+    }
+
+    function updateServerCard(data, spaceId) {
+      const serverId = data.replica;
+      const serverElement = document.getElementById(`server-${serverId}`);
+      const owner = metricsManager.instanceOwners.get(spaceId);
+
+      if (!serverElement) {
+        const card = document.createElement('div');
+        card.id = `server-${serverId}`;
+        card.className = 'server-card';
+        card.innerHTML = `
+          <div class="server-header">
+            <div class="server-name">
+              <div class="status-dot status-online"></div>
+              <svg class="server-flag" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                <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"/>
+              </svg>
+              <div>${serverId} (${owner}/${spaceId})</div>
+            </div>
+          </div>
+          <div class="metric-grid">
+            <div class="metric-item">
+                <div class="metric-label">CPU</div>
+                <div class="progress-bar-container">
+                    <div class="cpu-progress-bar"></div>
                 </div>
-                <div class="metric-item">
-                  <div class="metric-label">下载</div>
-                  <div class="metric-value download">0 KB/s</div>
+                <div class="metric-value cpu-usage">0%</div>
+            </div>
+            <div class="metric-item">
+                <div class="metric-label">内存</div>
+                <div class="progress-bar-container">
+                    <div class="memory-progress-bar"></div>
                 </div>
-              </div>
-            `;
-            document.getElementById('servers').appendChild(card);
-        }}
-
-          const card = document.getElementById(`server-${{serverId}}`);
-          const cpuUsage = data.cpu_usage_pct;
-          const memoryUsage = (data.memory_used_bytes / data.memory_total_bytes) * 100;
-          const uploadBps = data.tx_bps;
-          const downloadBps = data.rx_bps;
-
-          card.querySelector('.cpu-usage').textContent = `${{cpuUsage.toFixed(2)}}%`;
-          card.querySelector('.cpu-progress-bar').style.width = `${{cpuUsage}}%`;
-
-          card.querySelector('.memory-usage').textContent = `${{memoryUsage.toFixed(2)}}%`;
-          card.querySelector('.memory-progress-bar').style.width = `${{memoryUsage}}%`;
-
-          card.querySelector('.upload').textContent = `${{formatBytes(uploadBps)}}/s`;
-          card.querySelector('.download').textContent = `${{formatBytes(downloadBps)}}/s`;
-
-          servers.set(serverId, Date.now());
-          updateSummary();
-    }}
+                <div class="metric-value memory-usage">0%</div>
+            </div>
+            <div class="metric-item">
+              <div class="metric-label">上传</div>
+              <div class="metric-value upload">0 KB/s</div>
+            </div>
+            <div class="metric-item">
+              <div class="metric-label">下载</div>
+              <div class="metric-value download">0 KB/s</div>
+            </div>
+          </div>
+        `;
+        document.getElementById('servers').appendChild(card);
+      }
+
+      const card = document.getElementById(`server-${serverId}`);
+      const cpuUsage = data.cpu_usage_pct;
+      const memoryUsage = (data.memory_used_bytes / data.memory_total_bytes) * 100;
+      const uploadBps = data.tx_bps;
+      const downloadBps = data.rx_bps;
+
+      card.querySelector('.cpu-usage').textContent = `${cpuUsage.toFixed(2)}%`;
+      card.querySelector('.cpu-progress-bar').style.width = `${cpuUsage}%`;
+
+      card.querySelector('.memory-usage').textContent = `${memoryUsage.toFixed(2)}%`;
+      card.querySelector('.memory-progress-bar').style.width = `${memoryUsage}%`;
+
+      card.querySelector('.upload').textContent = `${formatBytes(uploadBps)}/s`;
+      card.querySelector('.download').textContent = `${formatBytes(downloadBps)}/s`;
+
+      // 更新最后一次收到 metrics 的时间戳
+      servers.set(serverId, Date.now());
+      // 保存原始上传/下载数据，后续用于累加计算总上传/总下载（单位：字节/秒）
+      rawMetrics.set(serverId, {tx: uploadBps, rx: downloadBps});
+      updateSummary();
+    }
 
     function updateSummary() {
       const now = Date.now();
@@ -373,17 +371,15 @@ htmlTemplate = f"""
       servers.forEach((lastSeen, serverId) => {
         const isOnline = (now - lastSeen) < 10000;
         const serverCard = document.getElementById(`server-${serverId}`);
-
         if (serverCard) {
           const statusDot = serverCard.querySelector('.status-dot');
           statusDot.className = `status-dot status-${isOnline ? 'online' : 'offline'}`;
 
           if (isOnline) {
-              const lastData = metricsManager.getLastData(serverId.split(" ")[0]); // Use the correct instanceId
-              if(lastData) {
-                totalUpload += lastData.tx_bps;
-                totalDownload += lastData.rx_bps;
-              }
+            // 从 rawMetrics 中获取原始的上传与下载（字节/s），确保单位一致
+            const metrics = rawMetrics.get(serverId) || {tx: 0, rx: 0};
+            totalUpload += metrics.tx;
+            totalDownload += metrics.rx;
           }
         }
         isOnline ? online++ : offline++;
@@ -396,25 +392,22 @@ htmlTemplate = f"""
       document.getElementById('totalDownload').textContent = `${formatBytes(totalDownload)}/s`;
     }
 
-
-    function formatBytes(bytes) {{
+    function formatBytes(bytes) {
       if (bytes === 0) return '0 B';
       const k = 1024;
       const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
       const i = Math.floor(Math.log(bytes) / Math.log(k));
       return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
-    }}
-
+    }
 
-    initialize(); // Initial load
+    initialize(); // 初始加载
 
     setInterval(updateSummary, 2000);
 
-    setInterval(async () => {{
+    setInterval(async () => {
         metricsManager.disconnectAll();
         await initialize();
-    }}, 300000);
-
+    }, 300000);
   </script>
 </body>
 </html>
@@ -464,7 +457,7 @@ def stream_metrics(username, instance_id):
                                 event_type = line.split(":", 1)[1].strip()
                             elif line.startswith("data:"):
                                 data_lines.append(line.split(":", 1)[1].strip())
-                      
+                    
                         if event_type == "metric":
                             yield f"event: {event_type}\ndata: {''.join(data_lines)}\n\n"