update index

static/app.js

@@ -21,6 +21,35 @@ function updateDeviceStatus() {
         });
 }
 
+function updateInterfaceStatus(deviceName, interfaces) {
+    const interfaceList = document.querySelector(`.interface-group[data-device-name="${deviceName}"] .interface-list`);
+    if (interfaceList && interfaces) {
+        interfaceList.innerHTML = '';
+        Object.entries(interfaces.ports || {}).forEach(([portName, port]) => {
+            interfaceList.innerHTML += `
+                <div class="interface-item">
+                    <span class="port-name">${portName}</span>
+                    <span class="port-speed">${port.speed.current}/${port.speed.max} Mbps</span>
+                    <span class="port-status ${port.state.toLowerCase()}">${port.state}</span>
+                </div>
+            `;
+        });
+    }
+}
+
+function updateSystemHealth(deviceName, diagnostics) {
+    const metricsContainer = document.querySelector(`.health-metrics[data-device-name="${deviceName}"] .metrics-list`);
+    if (metricsContainer && diagnostics) {
+        const cpu = metricsContainer.querySelector('.cpu');
+        const memory = metricsContainer.querySelector('.memory');
+        const temperature = metricsContainer.querySelector('.temperature');
+
+        cpu.innerHTML = `CPU: ${diagnostics.system?.cpu || 'N/A'}%`;
+        memory.innerHTML = `Memory: ${diagnostics.system?.memory || 'N/A'}%`;
+        temperature.innerHTML = `Temp: ${diagnostics.system?.temperature || 'N/A'}°C`;
+    }
+}
+
 function updateSystemMetrics() {
     fetch('/api/metrics')
         .then(response => response.json())
@@ -32,18 +61,14 @@ function updateSystemMetrics() {
 }
 
 //Metric updates like interfaces, power, and health
+
 function updateDiagnostics() {
-    console.log('Updating diagnostics...');
     fetch('/api/diagnostics')
         .then(response => response.json())
         .then(data => {
-            console.log('Received diagnostic data:', data);
+            Object.entries(data).forEach(([deviceName, diagnostics]) => {
-            const diagnosticsPanel = document.querySelector('.diagnostics-content');
+                updateInterfaceStatus(deviceName, diagnostics.interfaces);
-            diagnosticsPanel.innerHTML = '';
+                updateSystemHealth(deviceName, diagnostics);
-            
-            Object.entries(data).forEach(([device, diagnostics]) => {
-                const diagElement = createDiagnosticElement(device, diagnostics);
-                diagnosticsPanel.appendChild(diagElement);
             });
         });
 }