first commit

2025-07-22 19:54:30 -04:00
commit e9b4851d66
6 changed files with 1797 additions and 0 deletions
--- a/public/live.html
+++ b/public/live.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Live Docker Stats</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
+  <script src="/socket.io/socket.io.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+</head>
+<body class="bg-dark text-white">
+  <div class="container">
+    <h1 class="mt-5">Live Docker Stats</h1>
+    <canvas id="cpuChart" width="400" height="150"></canvas>
+    <canvas id="memoryChart" width="400" height="150"></canvas>
+    <canvas id="networkChart" width="400" height="150"></canvas>
+  </div>
+
+  <script src="/live.js"></script>
+</body>
+</html>
--- a/public/live.js
+++ b/public/live.js
@@ -0,0 +1,157 @@
+const socket = io();
+const containerName = window.location.pathname.split('/').pop();
+
+// Chart.js setup for CPU
+const cpuCtx = document.getElementById('cpuChart').getContext('2d');
+const cpuChart = new Chart(cpuCtx, {
+  type: 'line',
+  data: {
+    labels: [],
+    datasets: [{
+      label: 'CPU Usage (%)',
+      borderColor: 'rgba(255, 99, 132, 1)',
+      data: [],
+      fill: false,
+      tension: 0.1
+    }]
+  },
+  options: {
+    scales: {
+      x: {
+        title: {
+          display: true,
+          text: 'Time',
+          color: 'white',
+        },
+      },
+      y: {
+        title: {
+          display: true,
+          text: 'CPU Usage (%)',
+          color: 'white',
+        },
+        ticks: {
+          color: 'white',
+        }
+      },
+    },
+    plugins: {
+      legend: {
+        labels: {
+          color: 'white',
+        },
+      },
+    },
+  }
+});
+
+// Chart.js setup for Memory
+const memoryCtx = document.getElementById('memoryChart').getContext('2d');
+const memoryChart = new Chart(memoryCtx, {
+  type: 'line',
+  data: {
+    labels: [],
+    datasets: [{
+      label: 'Memory Usage (MB)',
+      borderColor: 'rgba(54, 162, 235, 1)',
+      data: [],
+      fill: false,
+      tension: 0.1
+    }]
+  },
+  options: {
+    scales: {
+      x: {
+        title: {
+          display: true,
+          text: 'Time',
+          color: 'white',
+        },
+      },
+      y: {
+        title: {
+          display: true,
+          text: 'Memory Usage (MB)',
+          color: 'white',
+        },
+        ticks: {
+          color: 'white',
+        }
+      },
+    },
+    plugins: {
+      legend: {
+        labels: {
+          color: 'white',
+        },
+      },
+    },
+  }
+});
+
+// Chart.js setup for Network
+const networkCtx = document.getElementById('networkChart').getContext('2d');
+const networkChart = new Chart(networkCtx, {
+  type: 'line',
+  data: {
+    labels: [],
+    datasets: [{
+      label: 'Network Usage (KB)',
+      borderColor: 'rgba(75, 192, 192, 1)',
+      data: [],
+      fill: false,
+      tension: 0.1
+    }]
+  },
+  options: {
+    scales: {
+      x: {
+        title: {
+          display: true,
+          text: 'Time',
+          color: 'white',
+        },
+      },
+      y: {
+        title: {
+          display: true,
+          text: 'Network Usage (KB)',
+          color: 'white',
+        },
+        ticks: {
+          color: 'white',
+        }
+      },
+    },
+    plugins: {
+      legend: {
+        labels: {
+          color: 'white',
+        },
+      },
+    },
+  }
+});
+
+// Start live updates
+socket.emit('startLive', containerName);
+
+// Listen for updates from the server
+socket.on('updateStats', (stats) => {
+  updateChart(cpuChart, stats.time, stats.cpu);
+  updateChart(memoryChart, stats.time, stats.memory);
+  updateChart(networkChart, stats.time, stats.network);
+});
+
+// Helper function to update the chart
+function updateChart(chart, label, data) {
+  chart.data.labels.push(label);
+  chart.data.datasets[0].data.push(data);
+
+  if (chart.data.labels.length > 30) {
+    chart.data.labels.shift();
+    chart.data.datasets[0].data.shift();
+  }
+
+  chart.update();
+}