Nethogs-Monitor: Add Nethogs monitor service with installation scripts, dashboard, and reporting utilities
This commit is contained in:
28
monitor-service/README.md
Normal file
28
monitor-service/README.md
Normal file
@@ -0,0 +1,28 @@
|
||||
# Nethogs monitor
|
||||
|
||||
Use nethogs as a background service to monitor network usage.
|
||||
|
||||
## Installation
|
||||
|
||||
```sh
|
||||
sh nethogs-monitor-install.sh
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
Enable service:
|
||||
```sh
|
||||
systemctl enable nethogs-monitor
|
||||
```
|
||||
|
||||
Start service:
|
||||
```sh
|
||||
systemctl start nethogs-monitor
|
||||
```
|
||||
|
||||
View report:
|
||||
```sh
|
||||
nethogs-monitor-report.sh
|
||||
```
|
||||
|
||||
|
||||
711
monitor-service/nethogs-monitor-dashboard-template.html
Normal file
711
monitor-service/nethogs-monitor-dashboard-template.html
Normal file
@@ -0,0 +1,711 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Nethogs Network Monitor</title>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
padding: 20px;
|
||||
border-radius: 15px;
|
||||
margin-bottom: 30px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
color: #4a5568;
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.generation-info {
|
||||
text-align: center;
|
||||
color: #718096;
|
||||
margin-top: 10px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
padding: 20px;
|
||||
border-radius: 15px;
|
||||
text-align: center;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
color: #667eea;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
color: #718096;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.controls {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
padding: 20px;
|
||||
border-radius: 15px;
|
||||
margin-bottom: 30px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.controls-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 15px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.control-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.control-group label {
|
||||
font-weight: 600;
|
||||
color: #4a5568;
|
||||
}
|
||||
|
||||
.control-group select {
|
||||
padding: 10px;
|
||||
border: 2px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
transition: border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.control-group select:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 12px 25px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
transition: transform 0.3s ease;
|
||||
align-self: end;
|
||||
}
|
||||
|
||||
.refresh-btn:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.charts-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
|
||||
gap: 30px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.chart-card {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
padding: 25px;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 600;
|
||||
color: #4a5568;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 15px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.table-header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 20px;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.table-wrapper {
|
||||
overflow-x: auto;
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
th, td {
|
||||
padding: 12px 15px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
th {
|
||||
background: #f7fafc;
|
||||
font-weight: 600;
|
||||
color: #4a5568;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
tr:hover {
|
||||
background: rgba(102, 126, 234, 0.05);
|
||||
}
|
||||
|
||||
.error {
|
||||
background: #fed7d7;
|
||||
color: #c53030;
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.charts-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.controls-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>🌐 Network Monitor Dashboard</h1>
|
||||
<p style="text-align: center; color: #718096;">
|
||||
System network traffic monitoring
|
||||
</p>
|
||||
<div class="generation-info" id="generationInfo">
|
||||
Generated on: <span id="generationTime">GENERATION_TIME_PLACEHOLDER</span>
|
||||
| Data from last HOURS_BACK_PLACEHOLDER hours
|
||||
| <span id="dataCount">0</span> records
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stats-grid" id="statsGrid">
|
||||
<div class="stat-card">
|
||||
<div class="stat-value" id="totalConnections">-</div>
|
||||
<div class="stat-label">Registered Connections</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value" id="totalDownload">-</div>
|
||||
<div class="stat-label">Total Download</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value" id="totalUpload">-</div>
|
||||
<div class="stat-label">Total Upload</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value" id="activeProcesses">-</div>
|
||||
<div class="stat-label">Unique Processes</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<div class="controls-grid">
|
||||
<div class="control-group">
|
||||
<label for="processFilter">Filter by process:</label>
|
||||
<select id="processFilter">
|
||||
<option value="">All processes</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<label for="interfaceFilter">Filter by interface:</label>
|
||||
<select id="interfaceFilter">
|
||||
<option value="">All interfaces</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<button class="refresh-btn" onclick="window.location.reload()">🔄 Reload Page</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="charts-grid">
|
||||
<div class="chart-card">
|
||||
<div class="chart-title">Traffic by Application</div>
|
||||
<canvas id="appTrafficChart"></canvas>
|
||||
</div>
|
||||
|
||||
<div class="chart-card">
|
||||
<div class="chart-title">Traffic by Interface</div>
|
||||
<canvas id="interfaceTrafficChart"></canvas>
|
||||
</div>
|
||||
|
||||
<div class="chart-card" style="grid-column: 1 / -1;">
|
||||
<div class="chart-title">Traffic Evolution Over Time</div>
|
||||
<canvas id="timeSeriesChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-container">
|
||||
<div class="table-header">
|
||||
<span>📊 Connection Details</span>
|
||||
<span id="tableCount">0 records</span>
|
||||
</div>
|
||||
<div class="table-wrapper">
|
||||
<table id="connectionsTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Timestamp</th>
|
||||
<th>Process</th>
|
||||
<th>PID</th>
|
||||
<th>UID</th>
|
||||
<th>Interface</th>
|
||||
<th>Download</th>
|
||||
<th>Upload</th>
|
||||
<th>Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="connectionsTableBody">
|
||||
<tr>
|
||||
<td colspan="8" style="text-align: center; color: #718096;">Processing data...</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Embedded data
|
||||
const EMBEDDED_DATA =
|
||||
JSON_DATA_PLACEHOLDER
|
||||
;
|
||||
|
||||
// Global application status
|
||||
let rawData = [];
|
||||
let charts = {};
|
||||
|
||||
function formatBytes(bytes, decimals = 2) {
|
||||
if (bytes === 0) return '0 Bytes';
|
||||
const k = 1024;
|
||||
const dm = decimals < 0 ? 0 : decimals;
|
||||
const sizes = ['Bytes', 'KiB', 'MiB', 'GiB', 'TiB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
|
||||
}
|
||||
|
||||
function formatDate(timestamp) {
|
||||
return new Date(timestamp * 1000).toLocaleString('es-ES');
|
||||
}
|
||||
|
||||
function generateColor(index) {
|
||||
const colors = [
|
||||
'#667eea', '#764ba2', '#f093fb', '#f5576c',
|
||||
'#4facfe', '#00f2fe', '#43e97b', '#38f9d7',
|
||||
'#ffecd2', '#fcb69f', '#a8edea', '#fed6e3'
|
||||
];
|
||||
return colors[index % colors.length];
|
||||
}
|
||||
|
||||
// Process embedded JSON data
|
||||
function processEmbeddedData() {
|
||||
const flatData = [];
|
||||
|
||||
EMBEDDED_DATA.forEach(entry => {
|
||||
try {
|
||||
const timestamp = Math.floor(new Date(entry.timestamp).getTime() / 1000);
|
||||
|
||||
entry.processes.forEach(process => {
|
||||
const sent = parseFloat(process.sent) || 0;
|
||||
const recv = parseFloat(process.recv) || 0;
|
||||
|
||||
// Only include processes with traffic
|
||||
if (sent > 0 || recv > 0) {
|
||||
// Extract process name
|
||||
let processName = process.name;
|
||||
if (processName.startsWith('/')) {
|
||||
const parts = processName.split('/');
|
||||
processName = parts[parts.length - 1].split(' ')[0];
|
||||
}
|
||||
|
||||
flatData.push({
|
||||
timestamp: timestamp,
|
||||
process_name: processName,
|
||||
process_full_name: process.name,
|
||||
pid: parseInt(process.pid),
|
||||
uid: parseInt(process.uid),
|
||||
interface: process.devicename || 'unknown',
|
||||
bytes_sent: sent,
|
||||
bytes_received: recv
|
||||
});
|
||||
}
|
||||
});
|
||||
} catch (e) {
|
||||
console.warn('Error processing entry:', entry, e);
|
||||
}
|
||||
});
|
||||
|
||||
return flatData.sort((a, b) => b.timestamp - a.timestamp);
|
||||
}
|
||||
|
||||
function updateStats() {
|
||||
const filteredData = getFilteredData();
|
||||
const totalConnections = filteredData.length;
|
||||
const totalDownload = filteredData.reduce((sum, item) => sum + item.bytes_received, 0);
|
||||
const totalUpload = filteredData.reduce((sum, item) => sum + item.bytes_sent, 0);
|
||||
const activeProcesses = new Set(filteredData.map(item => item.process_name)).size;
|
||||
|
||||
document.getElementById('totalConnections').textContent = totalConnections.toLocaleString();
|
||||
document.getElementById('totalDownload').textContent = formatBytes(totalDownload);
|
||||
document.getElementById('totalUpload').textContent = formatBytes(totalUpload);
|
||||
document.getElementById('activeProcesses').textContent = activeProcesses;
|
||||
document.getElementById('dataCount').textContent = rawData.length.toLocaleString();
|
||||
}
|
||||
|
||||
function updateFilters() {
|
||||
const processFilter = document.getElementById('processFilter');
|
||||
const interfaceFilter = document.getElementById('interfaceFilter');
|
||||
|
||||
// Get unique processes
|
||||
const processes = [...new Set(rawData.map(item => item.process_name))].sort();
|
||||
processFilter.innerHTML = '<option value="">All processes</option>';
|
||||
processes.forEach(process => {
|
||||
const option = document.createElement('option');
|
||||
option.value = process;
|
||||
option.textContent = process;
|
||||
processFilter.appendChild(option);
|
||||
});
|
||||
|
||||
// Get unique interfaces
|
||||
const interfaces = [...new Set(rawData.map(item => item.interface))].sort();
|
||||
interfaceFilter.innerHTML = '<option value="">All interfaces</option>';
|
||||
interfaces.forEach(iface => {
|
||||
const option = document.createElement('option');
|
||||
option.value = iface;
|
||||
option.textContent = iface;
|
||||
interfaceFilter.appendChild(option);
|
||||
});
|
||||
}
|
||||
|
||||
function updateCharts() {
|
||||
updateAppTrafficChart();
|
||||
updateInterfaceTrafficChart();
|
||||
updateTimeSeriesChart();
|
||||
}
|
||||
|
||||
function updateAppTrafficChart() {
|
||||
const ctx = document.getElementById('appTrafficChart').getContext('2d');
|
||||
const filteredData = getFilteredData();
|
||||
|
||||
// Group by process
|
||||
const processData = {};
|
||||
filteredData.forEach(item => {
|
||||
if (!processData[item.process_name]) {
|
||||
processData[item.process_name] = {
|
||||
download: 0,
|
||||
upload: 0
|
||||
};
|
||||
}
|
||||
processData[item.process_name].download += item.bytes_received;
|
||||
processData[item.process_name].upload += item.bytes_sent;
|
||||
});
|
||||
|
||||
const labels = Object.keys(processData).slice(0, 15); // Top 15
|
||||
const downloadData = labels.map(label => processData[label].download);
|
||||
const uploadData = labels.map(label => processData[label].upload);
|
||||
|
||||
if (charts.appTraffic) charts.appTraffic.destroy();
|
||||
|
||||
charts.appTraffic = new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
label: 'Descarga',
|
||||
data: downloadData,
|
||||
backgroundColor: 'rgba(102, 126, 234, 0.8)',
|
||||
borderColor: 'rgba(102, 126, 234, 1)',
|
||||
borderWidth: 1
|
||||
}, {
|
||||
label: 'Subida',
|
||||
data: uploadData,
|
||||
backgroundColor: 'rgba(118, 75, 162, 0.8)',
|
||||
borderColor: 'rgba(118, 75, 162, 1)',
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
plugins: {
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
label: function(context) {
|
||||
return context.dataset.label + ': ' + formatBytes(context.parsed.y);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
ticks: {
|
||||
callback: function(value) {
|
||||
return formatBytes(value);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function updateInterfaceTrafficChart() {
|
||||
const ctx = document.getElementById('interfaceTrafficChart').getContext('2d');
|
||||
const filteredData = getFilteredData();
|
||||
|
||||
// Group by interface
|
||||
const interfaceData = {};
|
||||
filteredData.forEach(item => {
|
||||
if (!interfaceData[item.interface]) {
|
||||
interfaceData[item.interface] = 0;
|
||||
}
|
||||
interfaceData[item.interface] += item.bytes_received + item.bytes_sent;
|
||||
});
|
||||
|
||||
const labels = Object.keys(interfaceData);
|
||||
const data = labels.map(label => interfaceData[label]);
|
||||
const colors = labels.map((_, index) => generateColor(index));
|
||||
|
||||
if (charts.interface) charts.interface.destroy();
|
||||
|
||||
charts.interface = new Chart(ctx, {
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
data: data,
|
||||
backgroundColor: colors,
|
||||
borderWidth: 2,
|
||||
borderColor: '#fff'
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
plugins: {
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
label: function(context) {
|
||||
return context.label + ': ' + formatBytes(context.parsed);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function updateTimeSeriesChart() {
|
||||
const ctx = document.getElementById('timeSeriesChart').getContext('2d');
|
||||
const filteredData = getFilteredData();
|
||||
|
||||
// Calculate time range
|
||||
const timestamps = filteredData.map(item => item.timestamp);
|
||||
const startHour = Math.floor(Math.min(...timestamps) / 3600) * 3600;
|
||||
const endHour = Math.floor(Math.max(...timestamps) / 3600) * 3600;
|
||||
|
||||
// Initialize data
|
||||
const hourlyData = {};
|
||||
for (let hour = startHour; hour <= endHour; hour += 3600) {
|
||||
hourlyData[hour] = {download: 0, upload: 0};
|
||||
}
|
||||
|
||||
// Add actual data
|
||||
filteredData.forEach(item => {
|
||||
const hour = Math.floor(item.timestamp / 3600) * 3600;
|
||||
hourlyData[hour].download += item.bytes_received;
|
||||
hourlyData[hour].upload += item.bytes_sent;
|
||||
});
|
||||
|
||||
const sortedHours = Object.keys(hourlyData).sort((a, b) => a - b);
|
||||
const labels = sortedHours.map(hour => new Date(hour * 1000).toLocaleString('es-ES'));
|
||||
const downloadData = sortedHours.map(hour => hourlyData[hour].download);
|
||||
const uploadData = sortedHours.map(hour => hourlyData[hour].upload);
|
||||
|
||||
if (charts.timeSeries) charts.timeSeries.destroy();
|
||||
|
||||
charts.timeSeries = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
label: 'Descarga',
|
||||
data: downloadData,
|
||||
borderColor: 'rgba(102, 126, 234, 1)',
|
||||
backgroundColor: 'rgba(102, 126, 234, 0.1)',
|
||||
fill: true,
|
||||
tension: 0.4
|
||||
}, {
|
||||
label: 'Subida',
|
||||
data: uploadData,
|
||||
borderColor: 'rgba(118, 75, 162, 1)',
|
||||
backgroundColor: 'rgba(118, 75, 162, 0.1)',
|
||||
fill: true,
|
||||
tension: 0.4
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
plugins: {
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
label: function(context) {
|
||||
return context.dataset.label + ': ' + formatBytes(context.parsed.y);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
ticks: {
|
||||
callback: function(value) {
|
||||
return formatBytes(value);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function updateTable() {
|
||||
const tbody = document.getElementById('connectionsTableBody');
|
||||
const filteredData = getFilteredData();
|
||||
const tableCount = document.getElementById('tableCount');
|
||||
|
||||
if (filteredData.length === 0) {
|
||||
tbody.innerHTML = '<tr><td colspan="8" style="text-align: center; color: #718096;">No hay datos que mostrar</td></tr>';
|
||||
tableCount.textContent = '0 records';
|
||||
return;
|
||||
}
|
||||
|
||||
const displayData = filteredData.slice(0, 200); // Limit to 200 for performance
|
||||
|
||||
tbody.innerHTML = displayData.map(item => `
|
||||
<tr>
|
||||
<td>${formatDate(item.timestamp)}</td>
|
||||
<td title="${item.process_full_name}">${item.process_name}</td>
|
||||
<td>${item.pid}</td>
|
||||
<td>${item.uid}</td>
|
||||
<td>${item.interface}</td>
|
||||
<td>${formatBytes(item.bytes_received)}</td>
|
||||
<td>${formatBytes(item.bytes_sent)}</td>
|
||||
<td>${formatBytes(item.bytes_received + item.bytes_sent)}</td>
|
||||
</tr>
|
||||
`).join('');
|
||||
|
||||
tableCount.textContent = `${filteredData.length.toLocaleString()} records${displayData.length < filteredData.length ? ` (showing ${displayData.length})` : ''}`;
|
||||
}
|
||||
|
||||
function getFilteredData() {
|
||||
const processFilter = document.getElementById('processFilter').value;
|
||||
const interfaceFilter = document.getElementById('interfaceFilter').value;
|
||||
|
||||
let filtered = [...rawData];
|
||||
|
||||
// Filter by process
|
||||
if (processFilter) {
|
||||
filtered = filtered.filter(item => item.process_name === processFilter);
|
||||
}
|
||||
|
||||
// Filter by interface
|
||||
if (interfaceFilter) {
|
||||
filtered = filtered.filter(item => item.interface === interfaceFilter);
|
||||
}
|
||||
|
||||
return filtered;
|
||||
}
|
||||
|
||||
// Event listeners
|
||||
document.getElementById('processFilter').addEventListener('change', () => {
|
||||
updateStats();
|
||||
updateCharts();
|
||||
updateTable();
|
||||
});
|
||||
|
||||
document.getElementById('interfaceFilter').addEventListener('change', () => {
|
||||
updateStats();
|
||||
updateCharts();
|
||||
updateTable();
|
||||
});
|
||||
|
||||
// Initialization
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Process embedded data
|
||||
rawData = processEmbeddedData();
|
||||
|
||||
// Update dashboard
|
||||
updateStats();
|
||||
updateFilters();
|
||||
updateCharts();
|
||||
updateTable();
|
||||
|
||||
console.log(`Dashboard loaded with ${rawData.length} records`);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
22
monitor-service/nethogs-monitor-install.sh
Normal file
22
monitor-service/nethogs-monitor-install.sh
Normal file
@@ -0,0 +1,22 @@
|
||||
#!/bin/bash
|
||||
|
||||
# Create directories
|
||||
sudo mkdir -p /var/log/nethogs
|
||||
sudo mkdir -p /opt/nethogs-monitor
|
||||
|
||||
# Move files
|
||||
sudo cp ../src/nethogs /opt/nethogs-monitor/
|
||||
sudo cp nethogs-monitor.sh /opt/nethogs-monitor/
|
||||
sudo cp nethogs-monitor-dashboard-template.html /opt/nethogs-monitor/
|
||||
sudo cp nethogs-monitor.service /etc/systemd/system/
|
||||
sudo cp nethogs-monitor-report.sh /opt/nethogs-monitor/
|
||||
|
||||
# Set execution permissions
|
||||
sudo chmod +x /opt/nethogs-monitor/nethogs-monitor.sh
|
||||
sudo chmod +x /opt/nethogs-monitor/nethogs-monitor-report.sh
|
||||
|
||||
# Link in local bins
|
||||
sudo ln -sf /opt/nethogs-monitor/nethogs-monitor-report.sh /usr/local/bin/nethogs-monitor-report.sh
|
||||
|
||||
# Reload daemons
|
||||
sudo systemctl daemon-reload
|
||||
136
monitor-service/nethogs-monitor-report.sh
Normal file
136
monitor-service/nethogs-monitor-report.sh
Normal file
@@ -0,0 +1,136 @@
|
||||
#!/bin/bash
|
||||
|
||||
set -e
|
||||
|
||||
# Configuration
|
||||
NETHOGS_LOG="/var/log/nethogs/nethogs.jsonl"
|
||||
TEMPLATE_FILE="/opt/nethogs-monitor/nethogs-monitor-dashboard-template.html"
|
||||
TEMP_DIR=$(mktemp -d)
|
||||
HOURS_BACK="${1:-24}"
|
||||
OUTPUT_FILE="${2:-${PWD}/nethogs-dashboard.html}"
|
||||
MAX_LINES=10000
|
||||
|
||||
log() {
|
||||
echo "[$(date +'%Y-%m-%d %H:%M:%S')] $1" >&2
|
||||
}
|
||||
|
||||
cleanup() {
|
||||
rm -rf "$TEMP_DIR"
|
||||
}
|
||||
|
||||
trap cleanup EXIT
|
||||
|
||||
# Function to extract recent data from JSONL
|
||||
extract_recent_data() {
|
||||
local hours_back=$1
|
||||
local output_file="$TEMP_DIR/recent_data.jsonl"
|
||||
|
||||
if [ ! -f "$NETHOGS_LOG" ]; then
|
||||
log "Warning: File $NETHOGS_LOG not found"
|
||||
echo "[]" > "$output_file"
|
||||
return
|
||||
fi
|
||||
|
||||
# Calculate timestamp limit
|
||||
local time_limit=$(date -d "$hours_back hours ago" +%s)
|
||||
|
||||
# Extract last lines and filter by time
|
||||
echo "[" > "$output_file"
|
||||
tail -n $MAX_LINES "$NETHOGS_LOG" | while IFS= read -r line; do
|
||||
if [ -n "$line" ]; then
|
||||
# Extract timestamp and convert to epoch
|
||||
local timestamp_iso=$(echo "$line" | jq -r '.timestamp // empty' 2>/dev/null || echo "")
|
||||
if [ -n "$timestamp_iso" ]; then
|
||||
local timestamp_epoch=$(date -d "$timestamp_iso" +%s 2>/dev/null || echo "0")
|
||||
if [ "$timestamp_epoch" -ge "$time_limit" ]; then
|
||||
echo "${line},"
|
||||
fi
|
||||
fi
|
||||
fi
|
||||
done >> "$output_file"
|
||||
echo "]" >> "$output_file"
|
||||
|
||||
# If no data, create valid empty file
|
||||
if [ ! -s "$output_file" ]; then
|
||||
echo "[]" > "$output_file"
|
||||
fi
|
||||
}
|
||||
|
||||
# Function to generate HTML with embedded data
|
||||
generate_html() {
|
||||
local data_file="$1"
|
||||
local output="$2"
|
||||
|
||||
# Verify template exists
|
||||
if [ ! -f "$TEMPLATE_FILE" ]; then
|
||||
log "Error: Template not found at $TEMPLATE_FILE"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
# Generate generation timestamp
|
||||
local generation_time=$(date -Iseconds)
|
||||
|
||||
# Copy template and replace placeholders
|
||||
cp "$TEMPLATE_FILE" "$output"
|
||||
|
||||
#sed -i "s|JSON_DATA_PLACEHOLDER|$json_data|g" "$output"
|
||||
sed -i "/JSON_DATA_PLACEHOLDER/{
|
||||
r $data_file
|
||||
d
|
||||
}" "$output"
|
||||
sed -i "s|GENERATION_TIME_PLACEHOLDER|$generation_time|g" "$output"
|
||||
sed -i "s|HOURS_BACK_PLACEHOLDER|$HOURS_BACK|g" "$output"
|
||||
|
||||
log "Dashboard HTML generated: $output"
|
||||
}
|
||||
|
||||
# Main function
|
||||
main() {
|
||||
log "Starting dashboard generation"
|
||||
log "Extracting data from last $HOURS_BACK hours..."
|
||||
|
||||
# Check dependencies
|
||||
if ! command -v jq &> /dev/null; then
|
||||
log "Error: jq is not installed. Install with: sudo apt install jq"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
# Extract recent data
|
||||
extract_recent_data "$HOURS_BACK"
|
||||
|
||||
# Verify data exists
|
||||
local data_file="$TEMP_DIR/recent_data.jsonl"
|
||||
local record_count=$(wc -l < "$data_file")
|
||||
log "Processing $record_count records"
|
||||
|
||||
# Generate HTML
|
||||
log "Generating dashboard HTML..."
|
||||
generate_html "$data_file" "$OUTPUT_FILE"
|
||||
|
||||
# Create output directory if it doesn't exist
|
||||
mkdir -p "$(dirname "$OUTPUT_FILE")"
|
||||
|
||||
log "Dashboard generated successfully: $OUTPUT_FILE"
|
||||
log "File size: $(du -h "$OUTPUT_FILE" | cut -f1)"
|
||||
|
||||
xdg-open "$OUTPUT_FILE"
|
||||
}
|
||||
|
||||
# Show help
|
||||
if [ "$1" = "-h" ] || [ "$1" = "--help" ]; then
|
||||
echo "Usage: $0 [HOURS] [OUTPUT_FILE]"
|
||||
echo
|
||||
echo "HOURS: Number of hours to look back for data (default: 24)"
|
||||
echo "OUTPUT_FILE: Output HTML file (default: ${PWD}/nethogs-dashboard.html)"
|
||||
echo
|
||||
echo "Examples:"
|
||||
echo " $0 # Last 24 hours, default output"
|
||||
echo " $0 6 # Last 6 hours"
|
||||
echo " $0 168 /var/www/html/week.html # Last week"
|
||||
echo
|
||||
echo "Dependencies: jq"
|
||||
exit 0
|
||||
fi
|
||||
|
||||
# Execute main function
|
||||
main "$@"
|
||||
31
monitor-service/nethogs-monitor.service
Normal file
31
monitor-service/nethogs-monitor.service
Normal file
@@ -0,0 +1,31 @@
|
||||
[Unit]
|
||||
Description=Nethogs Network Monitor Service
|
||||
Documentation=man:nethogs(8)
|
||||
After=network.target
|
||||
Wants=network-online.target
|
||||
|
||||
[Service]
|
||||
Type=simple
|
||||
User=root
|
||||
Group=root
|
||||
ExecStart=/opt/nethogs-monitor/nethogs-monitor.sh
|
||||
ExecStop=/bin/kill -TERM $MAINPID
|
||||
PIDFile=/run/nethogs-monitor.pid
|
||||
Restart=always
|
||||
RestartSec=10
|
||||
StandardOutput=journal
|
||||
StandardError=journal
|
||||
|
||||
# Configuración de seguridad
|
||||
NoNewPrivileges=true
|
||||
ProtectSystem=strict
|
||||
ReadWritePaths=/var/log/nethogs /run
|
||||
ProtectHome=true
|
||||
PrivateTmp=true
|
||||
|
||||
# Límites de recursos
|
||||
LimitNOFILE=65536
|
||||
MemoryMax=512M
|
||||
|
||||
[Install]
|
||||
WantedBy=multi-user.target
|
||||
33
monitor-service/nethogs-monitor.sh
Normal file
33
monitor-service/nethogs-monitor.sh
Normal file
@@ -0,0 +1,33 @@
|
||||
#!/bin/bash
|
||||
|
||||
# Configuration
|
||||
LOGFILE="/var/log/nethogs/nethogs.jsonl"
|
||||
PIDFILE="/run/nethogs-monitor.pid"
|
||||
NETHOGS_BIN="/opt/nethogs-monitor/nethogs"
|
||||
|
||||
cleanup() {
|
||||
echo "Stopping nethogs monitor..."
|
||||
if [ -f "$PIDFILE" ]; then
|
||||
rm -f "$PIDFILE"
|
||||
fi
|
||||
exit 0
|
||||
}
|
||||
trap cleanup SIGTERM SIGINT
|
||||
|
||||
# Write PID
|
||||
echo $$ > "$PIDFILE"
|
||||
|
||||
# Ensure logfile directory
|
||||
mkdir -p "$(dirname "$LOGFILE")"
|
||||
|
||||
# Main loop
|
||||
while true; do
|
||||
# Execute nethogs
|
||||
"$NETHOGS_BIN" -j -v 6 -z -C -d 10 >> "$LOGFILE" 2>&1
|
||||
|
||||
# Si nethogs falla, esperar antes de reintentar
|
||||
if [ $? -ne 0 ]; then
|
||||
echo "$(date): Error executing nethogs, retrying in 10 seconds ..."
|
||||
sleep 10
|
||||
fi
|
||||
done
|
||||
Reference in New Issue
Block a user