test

static/app.js

@@ -0,0 +1,34 @@
+function updateMetrics() {
+    fetch('/api/metrics')
+        .then(response => response.json())
+        .then(data => {
+            document.getElementById('network-health').innerHTML = `
+                <div class="metric-card">
+                    <h2>Network Health</h2>
+                    <p>CPU: ${data.network_health.cpu_percent}%</p>
+                    <p>Memory: ${data.network_health.memory_percent}%</p>
+                    <p>Connections: ${data.network_health.network_connections}</p>
+                </div>
+            `;
+            
+            document.getElementById('latency').innerHTML = `
+                <div class="metric-card">
+                    <h2>Latency</h2>
+                    <p>${data.latency.toFixed(2)} ms</p>
+                </div>
+            `;
+            
+            document.getElementById('bandwidth').innerHTML = `
+                <div class="metric-card">
+                    <h2>Bandwidth</h2>
+                    <p>Download: ${data.bandwidth.download.toFixed(2)} Mbps</p>
+                    <p>Upload: ${data.bandwidth.upload.toFixed(2)} Mbps</p>
+                </div>
+            `;
+        });
+}
+
+// Update metrics every 30 seconds
+setInterval(updateMetrics, 30000);
+// Initial update
+updateMetrics();

static/style.css

@@ -0,0 +1,19 @@
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+.metrics-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 20px;
+    margin-top: 20px;
+}
+
+.metric-card {
+    background: #f5f5f5;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}