interfaces update

app.py

@@ -68,21 +68,19 @@ class UnifiAPI:
         return response.json()  # Return the full response
 
     def get_device_diagnostics(self, device):
-        details = self.get_device_details(device['ip'])
+        details = self.get_device_details(device['device_id'])
         if not details:
             return {'state': 'ERROR', 'error': 'Failed to fetch device details'}
             
         diagnostics = {
-            'state': details['state'],
-            'firmware': details['firmware'],
-            'network': details['network'],
-            'uptime': {
-                'adopted_at': details.get('adoptedAt'),
-                'provisioned_at': details.get('provisionedAt')
+            'state': details.get('state', 'unknown'),
+            'system': {
+                'cpu': details.get('system_stats', {}).get('cpu', 0),
+                'memory': details.get('system_stats', {}).get('mem', 0),
+                'temperature': details.get('general_temperature', 0)
             },
-            'interfaces': details['interfaces']
+            'interfaces': self._parse_interfaces(details.get('port_table', []))
         }
-        
         return diagnostics
 
     def _parse_interfaces(self, interfaces):

static/style.css

@@ -126,22 +126,43 @@ body {
     font-family: monospace;
 }
 
-.state {
-    padding: 2px 8px;
-    border-radius: 12px;
+.interface-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px;
+    border-bottom: 1px solid #eee;
+}
+
+.port-status {
+    padding: 4px 8px;
+    border-radius: 4px;
     font-size: 0.8em;
 }
 
-.state.up {
+.port-status.up {
     background-color: #10B981;
     color: white;
 }
 
-.state.down {
+.port-status.down {
     background-color: #EF4444;
     color: white;
 }
 
+.metrics-list {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 15px;
+    margin-top: 10px;
+}
+
+.metric-item {
+    background: rgba(0,111,255,0.1);
+    padding: 10px;
+    border-radius: 8px;
+    text-align: center;
+}
 .online {
     color: #10B981;
 }