Update app.py

app.py

@@ -6,7 +6,6 @@ import json
 app = Flask(__name__)
 
 lightModeStyle = """
-/* ... (Your CSS styles, unchanged) ... */
 * {
   margin: 0;
   padding: 0;
@@ -240,6 +239,7 @@ htmlTemplate = f"""
     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
@@ -287,25 +287,24 @@ htmlTemplate = f"""
     }}
 
     const metricsManager = new MetricsManager();
-    const servers = new Map();  // instanceId: lastSeen
+    const servers = new Map();
 
     async function initialize() {{
       const instances = await fetchInstances();
       instances.forEach(instance => {{
         metricsManager.connect(instance.id, instance.owner);
-        servers.set(instance.id, 0); // Initialize lastSeen to 0
       }});
     }}
 
 
     function updateServerCard(data, spaceId) {{
-        const serverId = data.replica; // "replica" is already unique
-        const serverElement = document.getElementById(`server-${serverId}`);
+        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">
@@ -314,7 +313,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>${owner}/${spaceId}</div>
+                  <div>${{serverId}} (${{owner}}/${{spaceId}})</div>
                 </div>
               </div>
               <div class="metric-grid">
@@ -345,22 +344,22 @@ htmlTemplate = f"""
             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`;
 
-          servers.set(spaceId, Date.now()); // Use spaceId, not serverId (which is the replica)
+          servers.set(serverId, Date.now());
           updateSummary();
     }}
 
@@ -371,16 +370,16 @@ htmlTemplate = f"""
       let totalUpload = 0;
       let totalDownload = 0;
 
-      servers.forEach((lastSeen, instanceId) => { // Use instanceId here
+      servers.forEach((lastSeen, serverId) => {
         const isOnline = (now - lastSeen) < 10000;
-        const serverCard = document.getElementById(`server-${metricsManager.getLastData(instanceId)?.replica}`); // Get replica ID
+        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(instanceId);
+              const lastData = metricsManager.getLastData(serverId.split(" ")[0]); // Use the correct instanceId
               if(lastData) {
                 totalUpload += lastData.tx_bps;
                 totalDownload += lastData.rx_bps;
@@ -465,7 +464,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"
 
@@ -480,3 +479,4 @@ def stream_metrics(username, instance_id):
 
 if __name__ == '__main__':
     app.run(debug=True, host='0.0.0.0', port=7860)
+