Added interface status

static/app.js

@@ -19,6 +19,17 @@ function updateDeviceStatus() {
         .catch(error => console.error('Error updating status:', error));
 }
 
+function updateSystemMetrics() {
+    fetch('/api/metrics')
+        .then(response => response.json())
+        .then(data => {
+            updateInterfaceStatus(data.interfaces);
+            updatePowerMetrics(data.power);
+            updateSystemHealth(data.health);
+        });
+}
+
+//Metric updates like interfaces, power, and health
 function updateDiagnostics() {
     fetch('/api/diagnostics')
         .then(response => response.json())

static/style.css

@@ -149,3 +149,15 @@ body {
 .offline {
     color: #EF4444;
 }
+
+.interface-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 15px;
+}
+
+.metric-value {
+    font-family: monospace;
+    font-size: 1.2em;
+    color: var(--primary-color);
+}

templates/index.html

@@ -31,6 +31,18 @@
                     {%- endfor %}
                 </div>
             </div>
+            <div class="metric-card">
+                <h2>Interface Status</h2>
+                <div id="interface-details"></div>
+            </div>
+            <div class="metric-card">
+                <h2>System Health</h2>
+                <div id="system-metrics"></div>
+            </div>
+            <div class="metric-card">
+                <h2>Power Management</h2>
+                <div id="power-metrics"></div>
+            </div>
         </div>
     </div>
     <script src="{{ url_for('static', filename='app.js') }}"></script>