Update app.py

app.py

@@ -219,87 +219,86 @@ 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}}';
 
-    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();
-      }
+      }}
 
-      async connect(instanceId, username) {
-        if (this.eventSources.has(instanceId)) return;
+      async connect(instanceId, username) {{
+    if (this.eventSources.has(instanceId)) return;
 
-        try {
-          const eventSource = new EventSource(`/metrics/${username}/${instanceId}`);
+    try {{
+        const eventSource = new EventSource(`/metrics/${{username}}/${{instanceId}}`);
 
-          this.spaceIds.set(instanceId, instanceId);
-          this.instanceOwners.set(instanceId, username);
+        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.addEventListener("metric", (event) => {{
+            try {{
+                const data = JSON.parse(event.data);
+                // console.log("Received data:", data); // Debugging line
+                updateServerCard(data, instanceId);
+            }} catch (error) {{
+                console.error(`解析数据失败 (${{instanceId}}):`, error);
+            }}
+        }});
 
-          eventSource.onerror = (error) => {
-            console.error(`EventSource 错误 (${instanceId}):`, error);
+        eventSource.onerror = (error) => {{
+            console.error(`EventSource 错误 (${{instanceId}}):`, error);
             eventSource.close();
-            this.eventSources.delete(instanceId); // 出错后删除连接
-          };
+            this.eventSources.delete(instanceId); // Remove on error
+        }};
 
-          this.eventSources.set(instanceId, eventSource);
-        } catch (error) {
-          console.error(`连接失败 (${username}/${instanceId}):`, error);
-        }
-      }
+        this.eventSources.set(instanceId, eventSource);
+    }} catch (error) {{
+        console.error(`连接失败 (${{username}}/${{instanceId}}):`, error);
+    }}
+}}
 
-      disconnectAll() {
+      disconnectAll() {{
         this.eventSources.forEach(es => es.close());
         this.eventSources.clear();
-      }
-    }
+      }}
+    }}
 
     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) {
+    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.id = `server-${{serverId}}`;
         card.className = 'server-card';
         card.innerHTML = `
           <div class="server-header">
@@ -308,7 +307,7 @@ htmlTemplate = f"""
               <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>${{serverId}} (${{owner}}/${{spaceId}})</div>
             </div>
           </div>
           <div class="metric-grid">
@@ -337,77 +336,76 @@ htmlTemplate = f"""
           </div>
         `;
         document.getElementById('servers').appendChild(card);
-      }
+    }}
 
-      const card = document.getElementById(`server-${serverId}`);
+      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('.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('.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`;
+      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() {
+    function updateSummary() {{
       const now = Date.now();
       let online = 0;
       let offline = 0;
       let totalUpload = 0;
       let totalDownload = 0;
 
-      servers.forEach((lastSeen, serverId) => {
+      servers.forEach((lastSeen, serverId) => {{
         const isOnline = (now - lastSeen) < 10000;
-        const serverCard = document.getElementById(`server-${serverId}`);
-        if (serverCard) {
+        const serverCard = document.getElementById(`server-${{serverId}}`);
+        if (serverCard) {{
           const statusDot = serverCard.querySelector('.status-dot');
-          statusDot.className = `status-dot status-${isOnline ? 'online' : 'offline'}`;
-
-          if (isOnline) {
-            // 从 rawMetrics 中获取原始的上传与下载（字节/s），确保单位一致
-            const metrics = rawMetrics.get(serverId) || {tx: 0, rx: 0};
-            totalUpload += metrics.tx;
-            totalDownload += metrics.rx;
-          }
-        }
+          statusDot.className = `status-dot status-${{isOnline ? 'online' : 'offline'}}`;
+
+          if (isOnline) {{
+            const uploadText = serverCard.querySelector('.upload').textContent;
+            const downloadText = serverCard.querySelector('.download').textContent;
+            totalUpload += parseFloat(uploadText) || 0;
+            totalDownload += parseFloat(downloadText) || 0;
+          }}
+        }}
         isOnline ? online++ : offline++;
-      });
+      }});
 
       document.getElementById('totalServers').textContent = servers.size;
       document.getElementById('onlineServers').textContent = online;
       document.getElementById('offlineServers').textContent = offline;
-      document.getElementById('totalUpload').textContent = `${formatBytes(totalUpload)}/s`;
-      document.getElementById('totalDownload').textContent = `${formatBytes(totalDownload)}/s`;
-    }
+      document.getElementById('totalUpload').textContent = `${{formatBytes(totalUpload)}}/s`;
+      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(); // 初始加载
+    initialize(); // Initial load
 
     setInterval(updateSummary, 2000);
 
-    setInterval(async () => {
+    setInterval(async () => {{
         metricsManager.disconnectAll();
         await initialize();
-    }, 300000);
+    }}, 300000);
+
   </script>
 </body>
 </html>
@@ -471,4 +469,4 @@ def stream_metrics(username, instance_id):
     return Response(generate(), mimetype='text/event-stream')
 
 if __name__ == '__main__':
-    app.run(debug=True, host='0.0.0.0', port=7860)
+    app.run(debug=True, host='0.0.0.0', port=7860)