780 lines
28 KiB
JavaScript
780 lines
28 KiB
JavaScript
const express = require('express');
|
|
const { ChartJSNodeCanvas } = require('chartjs-node-canvas');
|
|
const { createCanvas, loadImage } = require('canvas');
|
|
const axios = require('axios');
|
|
const cors = require('cors'); // Import CORS middleware
|
|
require('dotenv').config()
|
|
|
|
const app = express();
|
|
const port = 6666;
|
|
app.use(cors()); // Allows all origins (wildcard *)
|
|
|
|
const metricWidth = 1900;
|
|
const metricHeight = 400;
|
|
const titleHeight = 100;
|
|
const graphMargin = 30;
|
|
|
|
app.use((req, res, next) => {
|
|
res.set({
|
|
'Cache-Control': 'no-store, no-cache, must-revalidate, proxy-revalidate',
|
|
'Pragma': 'no-cache',
|
|
'Expires': '0',
|
|
'Surrogate-Control': 'no-store'
|
|
});
|
|
next();
|
|
});
|
|
|
|
const chartJSMetricCanvas = new ChartJSNodeCanvas({ width: metricWidth, height: metricHeight, backgroundColour: 'black' });
|
|
|
|
const getEndpoints = (containerId, timeframe) => {
|
|
const after = -(timeframe * 60);
|
|
return {
|
|
cpu: `${process.env.API_BASE_URL}/api/v3/data?chart=cgroup_${containerId}.cpu&format=json&after=${after}&dimensions=user,system`,
|
|
memory: `${process.env.API_BASE_URL}/api/v3/data?chart=cgroup_${containerId}.mem_usage&format=json&after=${after}&dimensions=used`,
|
|
io: `${process.env.API_BASE_URL}/api/v3/data?chart=cgroup_${containerId}.io&format=json&after=${after}&dimensions=read,write`,
|
|
pids: `${process.env.API_BASE_URL}/api/v3/data?chart=cgroup_${containerId}.pids_current&format=json&after=${after}&dimensions=current`,
|
|
network: `${process.env.API_BASE_URL}/api/v3/data?chart=cgroup_${containerId}.net_eth0&format=json&after=${after}&dimensions=received,sent`,
|
|
};
|
|
};
|
|
|
|
const fetchMetricData = async (metric, containerId, timeframe = 5) => {
|
|
const endpoints = getEndpoints(containerId, timeframe);
|
|
try {
|
|
const response = await axios.get(endpoints[metric]);
|
|
return response.data;
|
|
} catch (error) {
|
|
console.error(`Error fetching ${metric} data for container ${containerId}:`, error);
|
|
throw new Error(`Failed to fetch ${metric} data.`);
|
|
}
|
|
};
|
|
|
|
const extractMetrics = (data, metric) => {
|
|
const labels = data.result.data.map((entry) => new Date(entry[0] * 1000).toLocaleTimeString());
|
|
let values;
|
|
|
|
switch (metric) {
|
|
case 'cpu':
|
|
values = data.result.data.map(entry => entry[1] + entry[2]);
|
|
break;
|
|
case 'memory':
|
|
values = data.result.data.map(entry => entry[1] / 1024); // Convert KiB to MB
|
|
break;
|
|
case 'io':
|
|
values = {
|
|
read: data.result.data.map(entry => entry[1] / 1024), // Convert KiB/s to MB/s
|
|
write: data.result.data.map(entry => -entry[2] / 1024), // Convert KiB/s to MB/s and make positive
|
|
};
|
|
break;
|
|
case 'pids':
|
|
values = data.result.data.map(entry => entry[1]);
|
|
break;
|
|
case 'network':
|
|
values = {
|
|
received: data.result.data.map(entry => entry[1] / 8), // Convert Kbits/s to KB/s
|
|
sent: data.result.data.map(entry => -entry[2] / 8), // Convert Kbits/s to KB/s and make positive
|
|
};
|
|
break;
|
|
default:
|
|
values = [];
|
|
}
|
|
|
|
return { labels, values };
|
|
};
|
|
|
|
const generateMetricGraph = async (metric, labels, label, borderColor) => {
|
|
const configuration = {
|
|
type: 'line',
|
|
data: {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: label,
|
|
data: metric,
|
|
borderColor: borderColor,
|
|
fill: false,
|
|
tension: 0.1,
|
|
}],
|
|
},
|
|
options: {
|
|
scales: {
|
|
x: {
|
|
title: {
|
|
display: true,
|
|
text: 'Time',
|
|
color: 'white',
|
|
},
|
|
},
|
|
y: {
|
|
title: {
|
|
display: true,
|
|
text: `${label} Usage`,
|
|
color: 'white',
|
|
},
|
|
},
|
|
},
|
|
plugins: {
|
|
legend: {
|
|
labels: {
|
|
color: 'white',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
return chartJSMetricCanvas.renderToBuffer(configuration);
|
|
};
|
|
|
|
// Draw title on the canvas
|
|
const drawTitle = (ctx, text, yPos) => {
|
|
ctx.fillStyle = 'white'; // Set text color
|
|
ctx.font = 'bold 40px Arial'; // Set font size and style
|
|
const textWidth = ctx.measureText(text).width; // Measure the width of the text
|
|
ctx.fillText(text, (metricWidth - textWidth) / 2, yPos); // Center the text horizontally
|
|
};
|
|
|
|
|
|
// CPU Usage
|
|
app.get('/api/graph/cpu/:containerId', async (req, res) => {
|
|
const { containerId } = req.params;
|
|
const timeframe = parseInt(req.query.timeframe) || 5;
|
|
const format = req.query.format || 'graph';
|
|
|
|
try {
|
|
const data = await fetchMetricData('cpu', containerId, timeframe);
|
|
if (format === 'json') {
|
|
return res.json(data);
|
|
}
|
|
|
|
const { labels, values } = extractMetrics(data, 'cpu');
|
|
const imageBuffer = await generateMetricGraph(values, labels, 'CPU Usage (%)', 'rgba(255, 99, 132, 1)');
|
|
res.set('Content-Type', 'image/png');
|
|
res.send(imageBuffer);
|
|
} catch (error) {
|
|
res.status(500).send(`Error generating CPU graph: ${error.message}`);
|
|
}
|
|
});
|
|
|
|
// Memory Usage
|
|
app.get('/api/graph/memory/:containerId', async (req, res) => {
|
|
const { containerId } = req.params;
|
|
const timeframe = parseInt(req.query.timeframe) || 5;
|
|
const format = req.query.format || 'graph';
|
|
|
|
try {
|
|
const data = await fetchMetricData('memory', containerId, timeframe);
|
|
if (format === 'json') {
|
|
return res.json(data);
|
|
}
|
|
|
|
const { labels, values } = extractMetrics(data, 'memory');
|
|
const imageBuffer = await generateMetricGraph(values, labels, 'Memory Usage (MB)', 'rgba(54, 162, 235, 1)');
|
|
res.set('Content-Type', 'image/png');
|
|
res.send(imageBuffer);
|
|
} catch (error) {
|
|
res.status(500).send(`Error generating memory graph: ${error.message}`);
|
|
}
|
|
});
|
|
|
|
// Disk I/O
|
|
app.get('/api/graph/io/:containerId', async (req, res) => {
|
|
const { containerId } = req.params;
|
|
const timeframe = parseInt(req.query.timeframe) || 5;
|
|
const format = req.query.format || 'graph';
|
|
|
|
try {
|
|
const data = await fetchMetricData('io', containerId, timeframe);
|
|
if (format === 'json') {
|
|
return res.json(data);
|
|
}
|
|
|
|
const { labels, values } = extractMetrics(data, 'io');
|
|
const readBuffer = await generateMetricGraph(values.read, labels, 'Disk Read (MB/s)', 'rgba(54, 255, 132, 1)');
|
|
const writeBuffer = await generateMetricGraph(values.write, labels, 'Disk Write (MB/s)', 'rgba(255, 99, 255, 1)');
|
|
|
|
const canvas = createCanvas(metricWidth, metricHeight * 2 + 100);
|
|
const ctx = canvas.getContext('2d');
|
|
ctx.fillStyle = 'black';
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
|
drawTitle(ctx, `Disk Read for ${containerId}`, 40);
|
|
let img = await loadImage(readBuffer);
|
|
ctx.drawImage(img, 0, 50, metricWidth, metricHeight);
|
|
|
|
drawTitle(ctx, `Disk Write for ${containerId}`, metricHeight + 100);
|
|
img = await loadImage(writeBuffer);
|
|
ctx.drawImage(img, 0, metricHeight + 110, metricWidth, metricHeight);
|
|
|
|
res.set('Content-Type', 'image/png');
|
|
res.send(canvas.toBuffer());
|
|
} catch (error) {
|
|
res.status(500).send('Error generating disk I/O graphs.');
|
|
}
|
|
});
|
|
|
|
// PIDs
|
|
app.get('/api/graph/pids/:containerId', async (req, res) => {
|
|
const { containerId } = req.params;
|
|
const timeframe = parseInt(req.query.timeframe) || 5;
|
|
const format = req.query.format || 'graph';
|
|
|
|
try {
|
|
const data = await fetchMetricData('pids', containerId, timeframe);
|
|
if (format === 'json') {
|
|
return res.json(data);
|
|
}
|
|
|
|
const { labels, values } = extractMetrics(data, 'pids');
|
|
const imageBuffer = await generateMetricGraph(values, labels, 'PIDs (Processes)', 'rgba(153, 102, 255, 1)');
|
|
res.set('Content-Type', 'image/png');
|
|
res.send(imageBuffer);
|
|
} catch (error) {
|
|
res.status(500).send(`Error generating PIDs graph: ${error.message}`);
|
|
}
|
|
});
|
|
|
|
// Network Traffic
|
|
app.get('/api/graph/network/:containerId', async (req, res) => {
|
|
const { containerId } = req.params;
|
|
const timeframe = parseInt(req.query.timeframe) || 5;
|
|
const format = req.query.format || 'graph';
|
|
|
|
try {
|
|
const data = await fetchMetricData('network', containerId, timeframe);
|
|
if (format === 'json') {
|
|
return res.json(data);
|
|
}
|
|
|
|
const { labels, values } = extractMetrics(data, 'network');
|
|
|
|
const receivedBuffer = await generateMetricGraph(values.received, labels, 'Network Received (KB/s)', 'rgba(75, 192, 192, 1)');
|
|
const sentBuffer = await generateMetricGraph(values.sent, labels, 'Network Sent (KB/s)', 'rgba(255, 159, 64, 1)');
|
|
|
|
const canvas = createCanvas(metricWidth, metricHeight * 2 + 100);
|
|
const ctx = canvas.getContext('2d');
|
|
ctx.fillStyle = 'black';
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
|
drawTitle(ctx, `Network Received for ${containerId}`, 40);
|
|
let img = await loadImage(receivedBuffer);
|
|
ctx.drawImage(img, 0, 50, metricWidth, metricHeight);
|
|
|
|
drawTitle(ctx, `Network Sent for ${containerId}`, metricHeight + 100);
|
|
img = await loadImage(sentBuffer);
|
|
ctx.drawImage(img, 0, metricHeight + 110, metricWidth, metricHeight);
|
|
|
|
res.set('Content-Type', 'image/png');
|
|
res.send(canvas.toBuffer());
|
|
} catch (error) {
|
|
res.status(500).send('Error generating network graphs.');
|
|
}
|
|
});
|
|
|
|
// Full Report
|
|
app.get('/api/graph/full-report/:containerId', async (req, res) => {
|
|
const { containerId } = req.params;
|
|
const timeframe = parseInt(req.query.timeframe) || 5;
|
|
const format = req.query.format || 'graph';
|
|
|
|
try {
|
|
const cpuData = await fetchMetricData('cpu', containerId, timeframe);
|
|
const memoryData = await fetchMetricData('memory', containerId, timeframe);
|
|
const ioData = await fetchMetricData('io', containerId, timeframe);
|
|
const pidsData = await fetchMetricData('pids', containerId, timeframe);
|
|
const networkData = await fetchMetricData('network', containerId, timeframe);
|
|
|
|
|
|
if (format === 'json') {
|
|
return res.json({
|
|
cpu: cpuData,
|
|
memory: memoryData,
|
|
io: ioData,
|
|
pids: pidsData,
|
|
network: networkData,
|
|
});
|
|
}
|
|
|
|
const cpuMetrics = extractMetrics(cpuData, 'cpu');
|
|
const memoryMetrics = extractMetrics(memoryData, 'memory');
|
|
const ioMetrics = extractMetrics(ioData, 'io');
|
|
const pidsMetrics = extractMetrics(pidsData, 'pids');
|
|
const networkMetrics = extractMetrics(networkData, 'network');
|
|
|
|
const cpuBuffer = await generateMetricGraph(cpuMetrics.values, cpuMetrics.labels, 'CPU Usage (%)', 'rgba(255, 99, 132, 1)');
|
|
const memoryBuffer = await generateMetricGraph(memoryMetrics.values, memoryMetrics.labels, 'Memory Usage (MB)', 'rgba(54, 162, 235, 1)');
|
|
const ioReadBuffer = await generateMetricGraph(ioMetrics.values.read, ioMetrics.labels, 'Disk Read (MB/s)', 'rgba(54, 255, 132, 1)');
|
|
const ioWriteBuffer = await generateMetricGraph(ioMetrics.values.write, ioMetrics.labels, 'Disk Write (MB/s)', 'rgba(255, 99, 255, 1)');
|
|
const pidsBuffer = await generateMetricGraph(pidsMetrics.values, pidsMetrics.labels, 'PIDs (Processes)', 'rgba(153, 102, 255, 1)');
|
|
const networkReceivedBuffer = await generateMetricGraph(networkMetrics.values.received, networkMetrics.labels, 'Network Received (KB/s)', 'rgba(75, 192, 192, 1)');
|
|
const networkSentBuffer = await generateMetricGraph(networkMetrics.values.sent, networkMetrics.labels, 'Network Sent (KB/s)', 'rgba(255, 159, 64, 1)');
|
|
|
|
const numGraphs = 7;
|
|
const fullReportHeight = titleHeight + (numGraphs * (metricHeight + graphMargin));
|
|
|
|
const canvas = createCanvas(metricWidth, fullReportHeight);
|
|
const ctx = canvas.getContext('2d');
|
|
ctx.fillStyle = 'black';
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
|
drawTitle(ctx, `Full Report for ${containerId} (Last ${timeframe} minutes)`, 50);
|
|
|
|
const graphs = [cpuBuffer, memoryBuffer, ioReadBuffer, ioWriteBuffer, pidsBuffer, networkReceivedBuffer, networkSentBuffer];
|
|
let yPosition = titleHeight + 20;
|
|
|
|
for (const imageBuffer of graphs) {
|
|
const img = await loadImage(imageBuffer);
|
|
ctx.drawImage(img, 0, yPosition, metricWidth, metricHeight);
|
|
yPosition += metricHeight + graphMargin;
|
|
}
|
|
|
|
res.set('Content-Type', 'image/png');
|
|
res.send(canvas.toBuffer());
|
|
} catch (error) {
|
|
res.status(500).send('Error generating full report.');
|
|
}
|
|
});
|
|
|
|
const Docker = require('dockerode');
|
|
const docker = new Docker(); // Make sure Docker is properly configured
|
|
|
|
app.get('/api/graph/full-report/:containerId/live', async (req, res) => {
|
|
const { containerId } = req.params;
|
|
const timeframe = parseInt(req.query.timeframe) || 2;
|
|
const maxPoints = 30; // Limit to the last 120 seconds (2 minutes)
|
|
|
|
const html = `
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Live Report for ${containerId}</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/particles.js"></script>
|
|
<style>
|
|
body {
|
|
background-color: #1c1c1c;
|
|
color: white;
|
|
font-family: Arial, sans-serif;
|
|
position: relative;
|
|
}
|
|
.chart-container {
|
|
position: relative;
|
|
height: 250px;
|
|
}
|
|
h1, h3 {
|
|
color: #f0f0f0;
|
|
}
|
|
canvas {
|
|
background-color: #2a2a2a;
|
|
border-radius: 8px;
|
|
}
|
|
.process-table {
|
|
margin-top: 20px;
|
|
color: white;
|
|
}
|
|
.process-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: 20px 0;
|
|
font-size: 0.9rem;
|
|
background-color: #1e1e1e;
|
|
}
|
|
.process-table th, .process-table td {
|
|
padding: 10px;
|
|
text-align: center;
|
|
border: 1px solid #444;
|
|
}
|
|
.process-table th {
|
|
background-color: #2e2e2e;
|
|
font-weight: 600;
|
|
color: #cfcfcf;
|
|
}
|
|
.process-table td {
|
|
background-color: #262626;
|
|
color: #bbbbbb;
|
|
}
|
|
.process-table tr:nth-child(even) {
|
|
background-color: #2a2a2a;
|
|
}
|
|
.process-table tr:hover {
|
|
background-color: #333;
|
|
color: #f1f1f1;
|
|
}
|
|
/* Particle Container for Full Page Coverage */
|
|
.particle-container {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: -1; /* Always behind content */
|
|
pointer-events: none;
|
|
}
|
|
/* Styling for search box */
|
|
#processSearch {
|
|
width: 100%;
|
|
padding: 8px;
|
|
margin-bottom: 12px;
|
|
background-color: #333;
|
|
border: 1px solid #555;
|
|
color: #fff;
|
|
border-radius: 4px;
|
|
}
|
|
/* Focus effect with dark grey */
|
|
#processSearch:focus {
|
|
border-color: #3a3a3a; /* Dark grey color for the focus border */
|
|
box-shadow: 0 0 5px rgba(58, 58, 58, 0.6); /* Dark grey shadow */
|
|
}
|
|
/* Scrollbar styling for WebKit-based browsers (Chrome, Safari, Edge) */
|
|
::-webkit-scrollbar {
|
|
width: 8px; /* Thin scrollbar */
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background-color: #2a2a2a; /* Dark background for the track */
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: #444; /* Dark grey for the scrollbar thumb */
|
|
border-radius: 10px; /* Rounded corners for the scrollbar thumb */
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background-color: #555; /* Slightly lighter grey on hover */
|
|
}
|
|
/* Styling for search box */
|
|
#processSearch {
|
|
width: 100%;
|
|
padding: 8px;
|
|
margin-bottom: 12px;
|
|
background-color: #333;
|
|
border: 1px solid #3a3a3a; /* Dark grey border */
|
|
color: #fff;
|
|
border-radius: 4px;
|
|
outline: none; /* Remove default outline */
|
|
}
|
|
|
|
/* Focus effect with dark grey */
|
|
#processSearch:focus {
|
|
border-color: #3a3a3a; /* Dark grey color for the focus border */
|
|
box-shadow: 0 0 5px rgba(58, 58, 58, 0.6); /* Dark grey shadow */
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container mt-4">
|
|
<h3 class="text-center">Live Report for ${containerId}</h3>
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<h3 class="text-center">CPU Usage</h3>
|
|
<div class="chart-container">
|
|
<canvas id="cpuChart"></canvas>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<h3 class="text-center">Memory Usage</h3>
|
|
<div class="chart-container">
|
|
<canvas id="memoryChart"></canvas>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<h3 class="text-center">Network Traffic</h3>
|
|
<div class="chart-container">
|
|
<canvas id="networkChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Search Box -->
|
|
<input type="text" id="processSearch" placeholder="Search processes..." onkeyup="filterProcessTable()" autofocus>
|
|
|
|
<table class="process-table">
|
|
<thead>
|
|
<tr>
|
|
<th>PID</th>
|
|
<th>User</th>
|
|
<th>Command</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="processTableBody">
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div id="fullPageParticles" class="particle-container"></div>
|
|
|
|
<script>
|
|
const cpuCtx = document.getElementById('cpuChart').getContext('2d');
|
|
const memoryCtx = document.getElementById('memoryChart').getContext('2d');
|
|
const networkCtx = document.getElementById('networkChart').getContext('2d');
|
|
let lastSearch = '';
|
|
|
|
// Function to create particle effects
|
|
function createParticles(particleId) {
|
|
particlesJS(particleId, {
|
|
particles: {
|
|
number: { value: 200, density: { enable: true, value_area: 800 } },
|
|
color: { value: "#ffffff" },
|
|
shape: {
|
|
type: "circle",
|
|
stroke: { width: 0, color: "#000000" },
|
|
},
|
|
opacity: { value: 0.5, anim: { enable: true, speed: 1 } },
|
|
size: { value: 3, random: true },
|
|
line_linked: { enable: false },
|
|
move: {
|
|
enable: true,
|
|
speed: 1.5,
|
|
direction: "none",
|
|
random: false,
|
|
out_mode: "out",
|
|
bounce: false
|
|
}
|
|
},
|
|
retina_detect: true
|
|
});
|
|
}
|
|
|
|
// Initialize particle effects for the entire page
|
|
createParticles('fullPageParticles');
|
|
|
|
// Function to keep data points limited for smoother performance
|
|
function updateChartData(chart, labels, dataSetIndex, newData) {
|
|
chart.data.labels.push(labels);
|
|
chart.data.datasets[dataSetIndex].data.push(newData);
|
|
|
|
if (chart.data.labels.length > ${maxPoints}) {
|
|
chart.data.labels.shift();
|
|
chart.data.datasets[dataSetIndex].data.shift();
|
|
}
|
|
chart.update();
|
|
}
|
|
|
|
// Charts initialization
|
|
const cpuChart = new Chart(cpuCtx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: [],
|
|
datasets: [{
|
|
label: 'CPU Usage (%)',
|
|
data: [],
|
|
borderColor: 'rgba(255, 99, 132, 1)',
|
|
borderWidth: 2,
|
|
pointRadius: 3,
|
|
fill: false,
|
|
}]
|
|
},
|
|
options: {
|
|
animation: { duration: 500 },
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
scales: {
|
|
x: { title: { display: true, text: '', color: '#ffffff' }, grid: { color: 'rgba(255, 255, 255, 0.1)' }},
|
|
y: { title: { display: true, text: 'CPU (%)', color: '#ffffff' }, grid: { color: 'rgba(255, 255, 255, 0.1)' }}
|
|
},
|
|
plugins: { legend: { display: false } }
|
|
}
|
|
});
|
|
|
|
const memoryChart = new Chart(memoryCtx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: [],
|
|
datasets: [{
|
|
label: 'Memory Usage (MB)',
|
|
data: [],
|
|
borderColor: 'rgba(54, 162, 235, 1)',
|
|
borderWidth: 2,
|
|
pointRadius: 3,
|
|
fill: false,
|
|
}]
|
|
},
|
|
options: {
|
|
animation: { duration: 500 },
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
scales: {
|
|
x: { title: { display: true, text: '', color: '#ffffff' }, grid: { color: 'rgba(255, 255, 255, 0.1)' }},
|
|
y: { title: { display: true, text: 'Memory (MB)', color: '#ffffff' }, grid: { color: 'rgba(255, 255, 255, 0.1)' }}
|
|
},
|
|
plugins: { legend: { display: false } }
|
|
}
|
|
});
|
|
|
|
let currentNetworkUnit = 'KB'; // Initial unit is KB
|
|
|
|
const networkChart = new Chart(networkCtx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: [],
|
|
datasets: [
|
|
{ label: 'Network Received (KB/s)', data: [], borderColor: 'rgba(75, 192, 192, 1)', borderWidth: 2, pointRadius: 3, fill: false },
|
|
{ label: 'Network Sent (KB/s)', data: [], borderColor: 'rgba(255, 159, 64, 1)', borderWidth: 2, pointRadius: 3, fill: false }
|
|
]
|
|
},
|
|
options: {
|
|
animation: { duration: 500 },
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
scales: {
|
|
x: { title: { display: true, text: '', color: '#ffffff' }, grid: { color: 'rgba(255, 255, 255, 0.1)' }},
|
|
y: { title: { display: true, text: 'Network (KB/s)', color: '#ffffff' }, grid: { color: 'rgba(255, 255, 255, 0.1)' }}
|
|
},
|
|
plugins: { legend: { display: true } }
|
|
}
|
|
});
|
|
|
|
function updateNetworkUnits(received, sent) {
|
|
// Check if traffic exceeds 1024 KB and should switch to MB
|
|
if (received > 1024 || sent > 1024) {
|
|
if (currentNetworkUnit === 'KB') {
|
|
networkChart.options.scales.y.title.text = 'Network (MB/s)';
|
|
networkChart.data.datasets[0].label = 'Network Received (MB/s)';
|
|
networkChart.data.datasets[1].label = 'Network Sent (MB/s)';
|
|
currentNetworkUnit = 'MB';
|
|
}
|
|
return { received: received / 1024, sent: sent / 1024 };
|
|
} else {
|
|
if (currentNetworkUnit === 'MB') {
|
|
networkChart.options.scales.y.title.text = 'Network (KB/s)';
|
|
networkChart.data.datasets[0].label = 'Network Received (KB/s)';
|
|
networkChart.data.datasets[1].label = 'Network Sent (KB/s)';
|
|
currentNetworkUnit = 'KB';
|
|
}
|
|
return { received, sent };
|
|
}
|
|
}
|
|
|
|
// Function to filter process table based on input
|
|
function filterProcessTable() {
|
|
const searchInput = document.getElementById('processSearch').value.toLowerCase();
|
|
lastSearch = searchInput; // Store the search input to persist it on data reload
|
|
const table = document.getElementById('processTableBody');
|
|
const rows = table.getElementsByTagName('tr');
|
|
|
|
for (let i = 0; i < rows.length; i++) {
|
|
const rowData = rows[i].innerText.toLowerCase();
|
|
if (rowData.includes(searchInput)) {
|
|
rows[i].style.display = '';
|
|
} else {
|
|
rows[i].style.display = 'none';
|
|
}
|
|
}
|
|
}
|
|
|
|
// Update process list
|
|
async function updateProcessList() {
|
|
const processResponse = await fetch('https://process-list.syscall.lol/${containerId}');
|
|
const processList = await processResponse.json();
|
|
const processTableBody = document.getElementById('processTableBody');
|
|
|
|
// Clear current table content
|
|
processTableBody.innerHTML = '';
|
|
|
|
// Populate table with new process data
|
|
processList.forEach(proc => {
|
|
const command = proc[proc.length - 1].toLowerCase(); // Command
|
|
if (!command.includes("holesail") && !command.includes("null") && !command.includes("/start.sh")) {
|
|
const row = document.createElement('tr');
|
|
row.classList.add('fadeIn');
|
|
const pidCell = document.createElement('td');
|
|
const userCell = document.createElement('td');
|
|
const commandCell = document.createElement('td');
|
|
|
|
pidCell.textContent = proc[1]; // PID
|
|
userCell.textContent = proc[0]; // User
|
|
commandCell.textContent = proc[proc.length - 1]; // Command
|
|
|
|
row.appendChild(pidCell);
|
|
row.appendChild(userCell);
|
|
row.appendChild(commandCell);
|
|
processTableBody.appendChild(row);
|
|
}
|
|
});
|
|
|
|
// Reapply the search filter after updating the table
|
|
filterProcessTable();
|
|
}
|
|
|
|
// Live update logic for graphs
|
|
async function updateGraphs() {
|
|
const response = await fetch('https://g.syscall.lol/full-report/${containerId}?format=json&timeframe=1');
|
|
const data = await response.json();
|
|
|
|
const currentTime = Math.floor(Date.now() / 1000); // Current time in epoch seconds
|
|
|
|
// Helper function to find the index of the epoch closest to the current time
|
|
function findClosestEpoch(dataArray) {
|
|
let closestIndex = 0;
|
|
let smallestDifference = Math.abs(dataArray[0][0] - currentTime);
|
|
|
|
for (let i = 1; i < dataArray.length; i++) {
|
|
const timeDiff = Math.abs(dataArray[i][0] - currentTime);
|
|
if (timeDiff < smallestDifference) {
|
|
closestIndex = i;
|
|
smallestDifference = timeDiff;
|
|
}
|
|
}
|
|
|
|
return closestIndex;
|
|
}
|
|
|
|
// Find the index of the closest epoch timestamp for each metric
|
|
const cpuIndex = findClosestEpoch(data.cpu.result.data);
|
|
const memoryIndex = findClosestEpoch(data.memory.result.data);
|
|
const networkIndex = findClosestEpoch(data.network.result.data);
|
|
|
|
// Extract the timestamp and data for CPU, Memory, and Network based on the closest epoch
|
|
const latestTime = new Date(data.cpu.result.data[cpuIndex][0] * 1000).toLocaleTimeString();
|
|
|
|
const latestCPU = data.cpu.result.data[cpuIndex][1] + data.cpu.result.data[cpuIndex][2]; // Assuming this is user + system
|
|
updateChartData(cpuChart, latestTime, 0, latestCPU);
|
|
|
|
const latestMemory = data.memory.result.data[memoryIndex][1] / 1024; // Convert KiB to MB
|
|
updateChartData(memoryChart, latestTime, 0, latestMemory);
|
|
|
|
const latestReceived = data.network.result.data[networkIndex][1] / 8; // Convert Kbits/s to KB/s
|
|
const latestSent = -data.network.result.data[networkIndex][2] / 8; // Convert Kbits/s to KB/s and make positive
|
|
const updatedValues = updateNetworkUnits(latestReceived, latestSent);
|
|
|
|
updateChartData(networkChart, latestTime, 0, updatedValues.received);
|
|
updateChartData(networkChart, latestTime, 1, updatedValues.sent);
|
|
}
|
|
|
|
// Update process list every 3 seconds
|
|
setInterval(updateProcessList, 3000);
|
|
|
|
// Update graphs every second
|
|
setInterval(updateGraphs, 1000);
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|
|
`;
|
|
|
|
res.send(html);
|
|
});
|
|
|
|
|
|
|
|
|
|
app.get('/api/processes/:containerId', async (req, res) => {
|
|
const { containerId } = req.params;
|
|
|
|
// Fetch processes running in the container
|
|
let processList = [];
|
|
try {
|
|
const container = docker.getContainer(containerId);
|
|
const processes = await container.top(); // Fetch running processes in the container
|
|
// console.log(processes)
|
|
processList = processes.Processes || [];
|
|
} catch (err) {
|
|
console.error(`Error fetching processes for container ${containerId}:`, err);
|
|
return res.status(500).json({ error: 'Failed to fetch processes' });
|
|
}
|
|
|
|
// Send the process list as a JSON response
|
|
res.json(processList);
|
|
});
|
|
|
|
app.listen(port, "0.0.0.0", () => {
|
|
console.log(`Server running on http://localhost:${port}`);
|
|
}); |