158 lines
3.0 KiB
JavaScript
158 lines
3.0 KiB
JavaScript
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();
|
|
}
|