CyberMind-FR
8fcd34abd0
Major updates: - Replace luci-app-netifyd-dashboard with enhanced luci-app-secubox-netifyd - Add netifyd 5.2.1 package with GCC 13.3/C++17 build fixes - Fix nd-risks.cpp compilation errors via inline static maps patch - Enhance local-build.sh with improved package building workflow - Update secubox-core scripts version to v0.9.1 New Features: - Complete netifyd dashboard with flows, devices, applications, and settings - Local data collection with netifyd-collector - Automated cron-based data aggregation - RPCd integration for real-time statistics Build Fixes: - Patch 001: Fix C++17 inline static maps in nd-risks.hpp and nd-protos.hpp - Patch 003: Skip ndpi tests to resolve roaring_v2 dependency issues - Add libatomic dependency - Include libnetifyd shared libraries in package 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
361 lines
11 KiB
JavaScript
361 lines
11 KiB
JavaScript
'use strict';
|
|
'require view';
|
|
'require poll';
|
|
'require ui';
|
|
'require dom';
|
|
'require secubox-netifyd/api as netifydAPI';
|
|
|
|
return view.extend({
|
|
refreshInterval: 10,
|
|
devicesData: [],
|
|
sortColumn: 'bytes_sent',
|
|
sortDirection: 'desc',
|
|
filterOnline: '',
|
|
|
|
load: function() {
|
|
return netifydAPI.getDetectedDevices();
|
|
},
|
|
|
|
sortDevices: function(devices, column, direction) {
|
|
return devices.slice().sort(function(a, b) {
|
|
var valA = a[column] || 0;
|
|
var valB = b[column] || 0;
|
|
|
|
if (column === 'ip' || column === 'mac') {
|
|
valA = String(valA);
|
|
valB = String(valB);
|
|
}
|
|
|
|
if (direction === 'asc') {
|
|
return valA > valB ? 1 : valA < valB ? -1 : 0;
|
|
} else {
|
|
return valA < valB ? 1 : valA > valB ? -1 : 0;
|
|
}
|
|
});
|
|
},
|
|
|
|
handleSort: function(column, ev) {
|
|
if (this.sortColumn === column) {
|
|
this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
|
|
} else {
|
|
this.sortColumn = column;
|
|
this.sortDirection = 'desc';
|
|
}
|
|
this.renderDevicesTable();
|
|
},
|
|
|
|
handleFilterOnline: function(value, ev) {
|
|
this.filterOnline = value;
|
|
this.renderDevicesTable();
|
|
},
|
|
|
|
handleExport: function(ev) {
|
|
var csvContent = 'IP Address,MAC Address,Flows,Bytes Sent,Bytes Received,Total Traffic,Last Seen\n';
|
|
|
|
this.devicesData.forEach(function(device) {
|
|
var total = (device.bytes_sent || 0) + (device.bytes_received || 0);
|
|
var lastSeen = device.last_seen || 0;
|
|
var lastSeenStr = lastSeen > 0 ? new Date(lastSeen * 1000).toISOString() : 'N/A';
|
|
|
|
csvContent += [
|
|
'"' + (device.ip || 'N/A') + '"',
|
|
'"' + (device.mac || 'N/A') + '"',
|
|
device.flows || 0,
|
|
device.bytes_sent || 0,
|
|
device.bytes_received || 0,
|
|
total,
|
|
'"' + lastSeenStr + '"'
|
|
].join(',') + '\n';
|
|
});
|
|
|
|
var blob = new Blob([csvContent], { type: 'text/csv' });
|
|
var url = window.URL.createObjectURL(blob);
|
|
var a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = 'netifyd-devices-' + new Date().toISOString().slice(0,10) + '.csv';
|
|
a.click();
|
|
window.URL.revokeObjectURL(url);
|
|
|
|
ui.addNotification(null, E('p', _('Devices exported to CSV')), 'info');
|
|
},
|
|
|
|
renderSummaryCards: function(devices) {
|
|
var totalBytesSent = devices.reduce(function(sum, dev) {
|
|
return sum + (dev.bytes_sent || 0);
|
|
}, 0);
|
|
|
|
var totalBytesRecv = devices.reduce(function(sum, dev) {
|
|
return sum + (dev.bytes_received || 0);
|
|
}, 0);
|
|
|
|
var totalFlows = devices.reduce(function(sum, dev) {
|
|
return sum + (dev.flows || 0);
|
|
}, 0);
|
|
|
|
var cards = [
|
|
{
|
|
title: _('Active Devices'),
|
|
value: devices.length.toString(),
|
|
icon: 'network-wired',
|
|
gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
|
|
},
|
|
{
|
|
title: _('Total Flows'),
|
|
value: totalFlows.toLocaleString(),
|
|
icon: 'stream',
|
|
gradient: 'linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%)'
|
|
},
|
|
{
|
|
title: _('Total Sent'),
|
|
value: netifydAPI.formatBytes(totalBytesSent),
|
|
icon: 'upload',
|
|
gradient: 'linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%)'
|
|
},
|
|
{
|
|
title: _('Total Received'),
|
|
value: netifydAPI.formatBytes(totalBytesRecv),
|
|
icon: 'download',
|
|
gradient: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)'
|
|
}
|
|
];
|
|
|
|
return E('div', {
|
|
'style': 'display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1.5rem'
|
|
}, cards.map(function(card) {
|
|
return E('div', {
|
|
'style': 'background: ' + card.gradient + '; color: white; padding: 1.5rem; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1)'
|
|
}, [
|
|
E('div', { 'style': 'display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem' }, [
|
|
E('div', { 'style': 'font-size: 0.9em; opacity: 0.9' }, card.title),
|
|
E('i', {
|
|
'class': 'fa fa-' + card.icon,
|
|
'style': 'font-size: 2em; opacity: 0.3'
|
|
})
|
|
]),
|
|
E('div', { 'style': 'font-size: 2em; font-weight: bold' }, card.value)
|
|
]);
|
|
}.bind(this)));
|
|
},
|
|
|
|
renderDevicesTable: function() {
|
|
var container = document.getElementById('devices-table-container');
|
|
if (!container) return;
|
|
|
|
var devices = this.devicesData;
|
|
var sortedDevices = this.sortDevices(devices, this.sortColumn, this.sortDirection);
|
|
|
|
var getSortIcon = function(column) {
|
|
if (this.sortColumn !== column) {
|
|
return E('i', { 'class': 'fa fa-sort', 'style': 'opacity: 0.3' });
|
|
}
|
|
return E('i', {
|
|
'class': 'fa fa-sort-' + (this.sortDirection === 'asc' ? 'up' : 'down'),
|
|
'style': 'color: #3b82f6'
|
|
});
|
|
}.bind(this);
|
|
|
|
dom.content(container, [
|
|
devices.length > 0 ? E('div', { 'class': 'table', 'style': 'font-size: 0.95em' }, [
|
|
// Header
|
|
E('div', { 'class': 'tr table-titles' }, [
|
|
E('div', {
|
|
'class': 'th left',
|
|
'style': 'width: 20%; cursor: pointer',
|
|
'click': ui.createHandlerFn(this, 'handleSort', 'ip')
|
|
}, [
|
|
_('IP Address'),
|
|
' ',
|
|
getSortIcon('ip')
|
|
]),
|
|
E('div', { 'class': 'th left', 'style': 'width: 20%' }, _('MAC Address')),
|
|
E('div', {
|
|
'class': 'th center',
|
|
'style': 'width: 10%; cursor: pointer',
|
|
'click': ui.createHandlerFn(this, 'handleSort', 'flows')
|
|
}, [
|
|
_('Flows'),
|
|
' ',
|
|
getSortIcon('flows')
|
|
]),
|
|
E('div', {
|
|
'class': 'th right',
|
|
'style': 'width: 15%; cursor: pointer',
|
|
'click': ui.createHandlerFn(this, 'handleSort', 'bytes_sent')
|
|
}, [
|
|
_('Sent'),
|
|
' ',
|
|
getSortIcon('bytes_sent')
|
|
]),
|
|
E('div', {
|
|
'class': 'th right',
|
|
'style': 'width: 15%; cursor: pointer',
|
|
'click': ui.createHandlerFn(this, 'handleSort', 'bytes_received')
|
|
}, [
|
|
_('Received'),
|
|
' ',
|
|
getSortIcon('bytes_received')
|
|
]),
|
|
E('div', { 'class': 'th', 'style': 'width: 20%' }, _('Traffic Distribution'))
|
|
]),
|
|
|
|
// Rows
|
|
sortedDevices.map(function(device, idx) {
|
|
var lastSeen = device.last_seen || 0;
|
|
var now = Math.floor(Date.now() / 1000);
|
|
var ago = now - lastSeen;
|
|
var lastSeenStr = 'N/A';
|
|
|
|
if (lastSeen > 0) {
|
|
if (ago < 60) {
|
|
lastSeenStr = _('Just now');
|
|
} else {
|
|
lastSeenStr = netifydAPI.formatDuration(ago) + ' ' + _('ago');
|
|
}
|
|
}
|
|
|
|
var totalBytes = (device.bytes_sent || 0) + (device.bytes_received || 0);
|
|
var sentPercent = totalBytes > 0 ? ((device.bytes_sent || 0) / totalBytes * 100) : 50;
|
|
var recvPercent = 100 - sentPercent;
|
|
|
|
return E('div', {
|
|
'class': 'tr',
|
|
'style': idx % 2 === 0 ? 'background: #f9fafb' : ''
|
|
}, [
|
|
E('div', { 'class': 'td left', 'style': 'width: 20%' }, [
|
|
E('code', { 'style': 'font-size: 0.9em' }, device.ip || 'Unknown'),
|
|
E('br'),
|
|
E('small', { 'class': 'text-muted' }, lastSeenStr)
|
|
]),
|
|
E('div', { 'class': 'td left', 'style': 'width: 20%' }, [
|
|
E('code', { 'style': 'font-size: 0.8em' }, device.mac || 'Unknown')
|
|
]),
|
|
E('div', { 'class': 'td center', 'style': 'width: 10%' },
|
|
(device.flows || 0).toLocaleString()),
|
|
E('div', { 'class': 'td right', 'style': 'width: 15%' }, [
|
|
E('span', {
|
|
'class': 'badge',
|
|
'style': 'background: #ef4444; color: white; padding: 0.25rem 0.5rem; border-radius: 4px'
|
|
}, netifydAPI.formatBytes(device.bytes_sent || 0))
|
|
]),
|
|
E('div', { 'class': 'td right', 'style': 'width: 15%' }, [
|
|
E('span', {
|
|
'class': 'badge',
|
|
'style': 'background: #10b981; color: white; padding: 0.25rem 0.5rem; border-radius: 4px'
|
|
}, netifydAPI.formatBytes(device.bytes_received || 0))
|
|
]),
|
|
E('div', { 'class': 'td', 'style': 'width: 20%' }, [
|
|
E('div', {
|
|
'style': 'display: flex; gap: 2px; height: 24px; border-radius: 4px; overflow: hidden'
|
|
}, [
|
|
E('div', {
|
|
'style': 'background: #ef4444; width: ' + sentPercent + '%; transition: width 0.3s',
|
|
'title': _('Upload: %s').format(sentPercent.toFixed(1) + '%')
|
|
}),
|
|
E('div', {
|
|
'style': 'background: #10b981; width: ' + recvPercent + '%; transition: width 0.3s',
|
|
'title': _('Download: %s').format(recvPercent.toFixed(1) + '%')
|
|
})
|
|
]),
|
|
E('div', { 'style': 'font-size: 0.75em; color: #6b7280; margin-top: 0.25rem; text-align: center' },
|
|
_('Total: %s').format(netifydAPI.formatBytes(totalBytes)))
|
|
])
|
|
]);
|
|
}.bind(this))
|
|
]) : E('div', {
|
|
'class': 'alert-message info',
|
|
'style': 'text-align: center; padding: 3rem'
|
|
}, [
|
|
E('i', { 'class': 'fa fa-network-wired', 'style': 'font-size: 3em; opacity: 0.3; display: block; margin-bottom: 1rem' }),
|
|
E('h4', _('No Device Data')),
|
|
E('p', { 'class': 'text-muted' }, _('No devices have been detected yet')),
|
|
E('small', _('Data will appear once network traffic is analyzed'))
|
|
])
|
|
]);
|
|
},
|
|
|
|
render: function(data) {
|
|
this.devicesData = data.devices || [];
|
|
|
|
var self = this;
|
|
|
|
// Set up polling
|
|
poll.add(L.bind(function() {
|
|
return netifydAPI.getDetectedDevices().then(L.bind(function(result) {
|
|
this.devicesData = result.devices || [];
|
|
this.renderDevicesTable();
|
|
}, this));
|
|
}, this), this.refreshInterval);
|
|
|
|
return E('div', { 'class': 'cbi-map' }, [
|
|
E('h2', [
|
|
E('i', { 'class': 'fa fa-network-wired', 'style': 'margin-right: 0.5rem' }),
|
|
_('Detected Devices')
|
|
]),
|
|
E('div', { 'class': 'cbi-map-descr' },
|
|
_('Network devices detected and tracked by Netifyd deep packet inspection engine')),
|
|
|
|
E('div', { 'class': 'cbi-section' }, [
|
|
E('div', { 'class': 'cbi-section-node' }, [
|
|
E('div', { 'style': 'display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem' }, [
|
|
E('h3', { 'style': 'margin: 0' }, [
|
|
E('i', { 'class': 'fa fa-chart-bar', 'style': 'margin-right: 0.5rem' }),
|
|
_('Summary')
|
|
]),
|
|
E('button', {
|
|
'class': 'btn btn-primary',
|
|
'click': ui.createHandlerFn(this, 'handleExport')
|
|
}, [
|
|
E('i', { 'class': 'fa fa-download' }),
|
|
' ',
|
|
_('Export CSV')
|
|
])
|
|
]),
|
|
this.renderSummaryCards(this.devicesData)
|
|
])
|
|
]),
|
|
|
|
E('div', { 'class': 'cbi-section' }, [
|
|
E('h3', [
|
|
E('i', { 'class': 'fa fa-list', 'style': 'margin-right: 0.5rem' }),
|
|
_('Device List'),
|
|
' ',
|
|
E('span', {
|
|
'class': 'badge',
|
|
'style': 'background: #3b82f6; color: white; margin-left: 0.5rem'
|
|
}, this.devicesData.length)
|
|
]),
|
|
E('div', { 'class': 'cbi-section-node' }, [
|
|
E('div', {
|
|
'class': 'alert alert-info',
|
|
'style': 'margin-bottom: 1rem; display: flex; align-items: center; gap: 1rem'
|
|
}, [
|
|
E('div', { 'style': 'display: flex; align-items: center; gap: 0.5rem' }, [
|
|
E('div', { 'style': 'width: 12px; height: 12px; background: #ef4444; border-radius: 2px' }),
|
|
E('span', _('Upload'))
|
|
]),
|
|
E('div', { 'style': 'display: flex; align-items: center; gap: 0.5rem' }, [
|
|
E('div', { 'style': 'width: 12px; height: 12px; background: #10b981; border-radius: 2px' }),
|
|
E('span', _('Download'))
|
|
]),
|
|
E('span', { 'class': 'text-muted' }, '|'),
|
|
E('span', [
|
|
E('i', { 'class': 'fa fa-sync' }),
|
|
' ',
|
|
_('Auto-refresh: Every %d seconds').format(this.refreshInterval)
|
|
])
|
|
]),
|
|
E('div', { 'id': 'devices-table-container' })
|
|
])
|
|
])
|
|
]);
|
|
},
|
|
|
|
addFooter: function() {
|
|
this.renderDevicesTable();
|
|
},
|
|
|
|
handleSaveApply: null,
|
|
handleSave: null,
|
|
handleReset: null
|
|
});
|