CyberMind-FR
30926404dc
- Add media-flow-ndpid-collector script for collecting streaming data from nDPId - Update RPCD backend to detect and use nDPId as primary DPI source - Update frontend dashboard to show DPI source indicator (nDPId/netifyd/none) - Add active streams table displaying real-time streaming activity - Update init.d script to auto-detect and use best available collector - Remove hard dependency on netifyd, make DPI engines optional - Bump version to 0.6.0 nDPId provides local deep packet inspection without requiring cloud subscription, enabling accurate streaming service detection (Netflix, YouTube, Spotify, etc.) with quality estimation. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
390 lines
13 KiB
JavaScript
390 lines
13 KiB
JavaScript
'use strict';
|
|
'require view';
|
|
'require poll';
|
|
'require ui';
|
|
'require media-flow/api as API';
|
|
|
|
return L.view.extend({
|
|
load: function() {
|
|
return Promise.all([
|
|
API.getStatus(),
|
|
API.getActiveStreams(),
|
|
API.getStatsByService()
|
|
]);
|
|
},
|
|
|
|
render: function(data) {
|
|
var status = data[0] || {};
|
|
var streamsData = data[1] || {};
|
|
var statsByService = data[2] || {};
|
|
|
|
var v = E('div', { 'class': 'cbi-map' }, [
|
|
E('link', { 'rel': 'stylesheet', 'href': L.resource('secubox-theme/secubox-theme.css') }),
|
|
E('h2', {}, _('Media Flow Dashboard')),
|
|
E('div', { 'class': 'cbi-map-descr' }, _('Streaming service detection and network flow monitoring'))
|
|
]);
|
|
|
|
// DPI Source indicator
|
|
var dpiSource = status.dpi_source || 'none';
|
|
var dpiColor = dpiSource === 'ndpid' ? '#00cc88' : (dpiSource === 'netifyd' ? '#0088cc' : '#cc0000');
|
|
var dpiLabel = dpiSource === 'ndpid' ? 'nDPId (Local DPI)' : (dpiSource === 'netifyd' ? 'Netifyd' : 'No DPI Engine');
|
|
|
|
// Status overview with DPI source
|
|
var statusSection = E('div', { 'class': 'cbi-section' }, [
|
|
E('h3', {}, _('Status')),
|
|
E('div', { 'class': 'table' }, [
|
|
E('div', { 'class': 'tr' }, [
|
|
E('div', { 'class': 'td left', 'width': '25%' }, [
|
|
E('strong', {}, _('Module: ')),
|
|
E('span', {}, status.enabled ? _('Enabled') : _('Disabled'))
|
|
]),
|
|
E('div', { 'class': 'td left', 'width': '25%' }, [
|
|
E('strong', {}, _('DPI Source: ')),
|
|
E('span', { 'style': 'color: ' + dpiColor + '; font-weight: bold;' }, '● ' + dpiLabel)
|
|
]),
|
|
E('div', { 'class': 'td left', 'width': '25%' }, [
|
|
E('strong', {}, _('Active Flows: ')),
|
|
E('span', { 'style': 'font-size: 1.3em; color: #0088cc' }, String(status.active_flows || 0))
|
|
]),
|
|
E('div', { 'class': 'td left', 'width': '25%' }, [
|
|
E('strong', {}, _('Active Streams: ')),
|
|
E('span', { 'style': 'font-size: 1.3em; color: #ec4899' }, String(status.active_streams || 0))
|
|
])
|
|
]),
|
|
E('div', { 'class': 'tr' }, [
|
|
E('div', { 'class': 'td left', 'width': '25%' }, [
|
|
E('strong', {}, _('nDPId: ')),
|
|
E('span', {}, status.ndpid_running ?
|
|
E('span', { 'style': 'color: green' }, '● ' + _('Running') + (status.ndpid_version !== 'unknown' ? ' (v' + status.ndpid_version + ')' : '')) :
|
|
E('span', { 'style': 'color: #999' }, '○ ' + _('Not running'))
|
|
)
|
|
]),
|
|
E('div', { 'class': 'td left', 'width': '25%' }, [
|
|
E('strong', {}, _('Netifyd: ')),
|
|
E('span', {}, status.netifyd_running ?
|
|
E('span', { 'style': 'color: green' }, '● ' + _('Running') + ' (v' + (status.netifyd_version || '?') + ')') :
|
|
E('span', { 'style': 'color: #999' }, '○ ' + _('Not running'))
|
|
)
|
|
]),
|
|
E('div', { 'class': 'td left', 'width': '25%' }, [
|
|
E('strong', {}, _('nDPId Flows: ')),
|
|
E('span', {}, String(status.ndpid_flows || 0))
|
|
]),
|
|
E('div', { 'class': 'td left', 'width': '25%' }, [
|
|
E('strong', {}, _('History: ')),
|
|
E('span', {}, String(status.history_entries || 0) + ' entries')
|
|
])
|
|
])
|
|
])
|
|
]);
|
|
v.appendChild(statusSection);
|
|
|
|
// Info notice based on DPI source
|
|
var noticeSection;
|
|
if (dpiSource === 'ndpid') {
|
|
noticeSection = E('div', { 'class': 'cbi-section' }, [
|
|
E('div', { 'style': 'background: #d4edda; border: 1px solid #28a745; padding: 15px; border-radius: 4px; margin-bottom: 15px;' }, [
|
|
E('strong', {}, _('nDPId Active: ')),
|
|
E('span', {}, _('Using local deep packet inspection for streaming detection. No cloud subscription required.'))
|
|
])
|
|
]);
|
|
} else if (dpiSource === 'netifyd') {
|
|
noticeSection = E('div', { 'class': 'cbi-section' }, [
|
|
E('div', { 'style': 'background: #fff3cd; border: 1px solid #ffc107; padding: 15px; border-radius: 4px; margin-bottom: 15px;' }, [
|
|
E('strong', {}, _('Notice: ')),
|
|
E('span', {}, _('Netifyd 5.x requires a cloud subscription for streaming service detection. Install nDPId for local detection.'))
|
|
])
|
|
]);
|
|
} else {
|
|
noticeSection = E('div', { 'class': 'cbi-section' }, [
|
|
E('div', { 'style': 'background: #f8d7da; border: 1px solid #dc3545; padding: 15px; border-radius: 4px; margin-bottom: 15px;' }, [
|
|
E('strong', {}, _('No DPI Engine: ')),
|
|
E('span', {}, _('Install nDPId or netifyd for streaming detection capabilities.'))
|
|
])
|
|
]);
|
|
}
|
|
v.appendChild(noticeSection);
|
|
|
|
// Active Streams section (when nDPId provides data)
|
|
var streamsSection = E('div', { 'class': 'cbi-section' }, [
|
|
E('h3', {}, _('Active Streams')),
|
|
E('div', { 'id': 'active-streams-container' })
|
|
]);
|
|
|
|
var categoryIcons = {
|
|
'video': String.fromCodePoint(0x1F3AC),
|
|
'audio': String.fromCodePoint(0x1F3B5),
|
|
'visio': String.fromCodePoint(0x1F4F9)
|
|
};
|
|
|
|
var qualityColors = {
|
|
'4K': '#9333ea',
|
|
'FHD': '#2563eb',
|
|
'HD': '#059669',
|
|
'SD': '#d97706',
|
|
'Lossless': '#9333ea',
|
|
'High': '#2563eb',
|
|
'Normal': '#059669',
|
|
'Low': '#d97706',
|
|
'Audio Only': '#6b7280'
|
|
};
|
|
|
|
var renderActiveStreams = function(streams, dpiSrc) {
|
|
var container = document.getElementById('active-streams-container');
|
|
if (!container) return;
|
|
|
|
container.innerHTML = '';
|
|
|
|
if (!streams || streams.length === 0) {
|
|
container.appendChild(E('div', { 'style': 'text-align: center; padding: 30px; color: #666;' }, [
|
|
E('div', { 'style': 'font-size: 3em; margin-bottom: 10px;' }, String.fromCodePoint(0x1F4E1)),
|
|
E('p', {}, dpiSrc === 'ndpid' ? _('No streaming activity detected') : _('Waiting for streaming data...'))
|
|
]));
|
|
return;
|
|
}
|
|
|
|
var table = E('table', { 'class': 'table', 'style': 'width: 100%;' }, [
|
|
E('tr', { 'class': 'tr table-titles' }, [
|
|
E('th', { 'class': 'th' }, _('Service')),
|
|
E('th', { 'class': 'th' }, _('Client')),
|
|
E('th', { 'class': 'th' }, _('Category')),
|
|
E('th', { 'class': 'th' }, _('Quality')),
|
|
E('th', { 'class': 'th' }, _('Bandwidth')),
|
|
E('th', { 'class': 'th' }, _('Data'))
|
|
])
|
|
]);
|
|
|
|
streams.slice(0, 20).forEach(function(stream) {
|
|
var icon = categoryIcons[stream.category] || String.fromCodePoint(0x1F4CA);
|
|
var qualityColor = qualityColors[stream.quality] || '#6b7280';
|
|
var bytesTotal = (stream.bytes_rx || 0) + (stream.bytes_tx || 0);
|
|
var dataMB = (bytesTotal / 1048576).toFixed(1);
|
|
|
|
table.appendChild(E('tr', { 'class': 'tr' }, [
|
|
E('td', { 'class': 'td' }, [
|
|
E('strong', {}, stream.app || 'Unknown')
|
|
]),
|
|
E('td', { 'class': 'td' }, stream.client || '-'),
|
|
E('td', { 'class': 'td' }, icon + ' ' + (stream.category || 'other')),
|
|
E('td', { 'class': 'td' }, [
|
|
E('span', { 'style': 'background: ' + qualityColor + '; color: white; padding: 2px 8px; border-radius: 4px; font-size: 0.85em;' },
|
|
stream.quality || '-')
|
|
]),
|
|
E('td', { 'class': 'td' }, (stream.bandwidth || 0) + ' kbps'),
|
|
E('td', { 'class': 'td' }, dataMB + ' MB')
|
|
]));
|
|
});
|
|
|
|
container.appendChild(table);
|
|
};
|
|
|
|
// Initial render of streams
|
|
renderActiveStreams(streamsData.streams || [], dpiSource);
|
|
v.appendChild(streamsSection);
|
|
|
|
// Network flow stats
|
|
var flowSection = E('div', { 'class': 'cbi-section' }, [
|
|
E('h3', {}, _('Network Flow Statistics')),
|
|
E('div', { 'id': 'flow-stats-container' })
|
|
]);
|
|
|
|
var updateFlowStats = function() {
|
|
API.getActiveStreams().then(function(data) {
|
|
var container = document.getElementById('flow-stats-container');
|
|
if (!container) return;
|
|
|
|
var flowCount = data.flow_count || 0;
|
|
var dpiSrc = data.dpi_source || 'none';
|
|
var note = data.note || '';
|
|
|
|
container.innerHTML = '';
|
|
container.appendChild(E('div', { 'style': 'display: flex; justify-content: space-around; background: #f8f9fa; padding: 20px; border-radius: 8px;' }, [
|
|
E('div', { 'style': 'text-align: center;' }, [
|
|
E('div', { 'style': 'font-size: 2.5em; color: #0088cc; font-weight: bold;' }, String(flowCount)),
|
|
E('div', { 'style': 'color: #666; margin-top: 5px;' }, _('Total Flows'))
|
|
]),
|
|
E('div', { 'style': 'text-align: center;' }, [
|
|
E('div', { 'style': 'font-size: 2.5em; color: #ec4899; font-weight: bold;' }, String((data.streams || []).length)),
|
|
E('div', { 'style': 'color: #666; margin-top: 5px;' }, _('Streaming Flows'))
|
|
])
|
|
]));
|
|
|
|
if (note) {
|
|
container.appendChild(E('p', { 'style': 'font-style: italic; color: #666; text-align: center; margin-top: 10px;' }, note));
|
|
}
|
|
|
|
// Update active streams table
|
|
renderActiveStreams(data.streams || [], dpiSrc);
|
|
});
|
|
};
|
|
|
|
updateFlowStats();
|
|
v.appendChild(flowSection);
|
|
|
|
// Stats by service (from history)
|
|
var statsSection = E('div', { 'class': 'cbi-section' }, [
|
|
E('h3', {}, _('Historical Usage by Service')),
|
|
E('p', { 'style': 'color: #666; font-size: 0.9em;' }, _('Data collected from previous sessions (if available)')),
|
|
E('div', { 'style': 'display: flex; gap: 20px;' }, [
|
|
E('div', { 'style': 'flex: 0 0 300px;' }, [
|
|
E('canvas', {
|
|
'id': 'service-donut-chart',
|
|
'width': '300',
|
|
'height': '300',
|
|
'style': 'max-width: 100%;'
|
|
})
|
|
]),
|
|
E('div', { 'id': 'service-stats', 'style': 'flex: 1;' })
|
|
])
|
|
]);
|
|
|
|
var serviceColors = [
|
|
'#0088cc', '#00cc88', '#cc0088', '#cc8800', '#8800cc',
|
|
'#00cccc', '#cc00cc', '#cccc00', '#0000cc', '#cc0000'
|
|
];
|
|
|
|
var drawDonutChart = function(services, servicesList, total) {
|
|
var canvas = document.getElementById('service-donut-chart');
|
|
if (!canvas || !canvas.getContext) return;
|
|
|
|
var ctx = canvas.getContext('2d');
|
|
var centerX = 150;
|
|
var centerY = 150;
|
|
var outerRadius = 120;
|
|
var innerRadius = 70;
|
|
|
|
// Clear canvas
|
|
ctx.clearRect(0, 0, 300, 300);
|
|
|
|
if (servicesList.length === 0 || total === 0) {
|
|
ctx.fillStyle = '#999';
|
|
ctx.font = '14px sans-serif';
|
|
ctx.textAlign = 'center';
|
|
ctx.fillText(_('No data'), centerX, centerY);
|
|
return;
|
|
}
|
|
|
|
// Draw donut segments
|
|
var currentAngle = -Math.PI / 2; // Start at top
|
|
|
|
servicesList.slice(0, 10).forEach(function(service, index) {
|
|
var duration = services[service].total_duration_seconds || 0;
|
|
var percentage = duration / total;
|
|
var segmentAngle = percentage * 2 * Math.PI;
|
|
|
|
// Draw segment
|
|
ctx.fillStyle = serviceColors[index % serviceColors.length];
|
|
ctx.beginPath();
|
|
ctx.arc(centerX, centerY, outerRadius, currentAngle, currentAngle + segmentAngle);
|
|
ctx.arc(centerX, centerY, innerRadius, currentAngle + segmentAngle, currentAngle, true);
|
|
ctx.closePath();
|
|
ctx.fill();
|
|
|
|
// Draw border
|
|
ctx.strokeStyle = '#fff';
|
|
ctx.lineWidth = 2;
|
|
ctx.stroke();
|
|
|
|
currentAngle += segmentAngle;
|
|
});
|
|
|
|
// Draw center circle (donut hole)
|
|
ctx.fillStyle = '#f8f9fa';
|
|
ctx.beginPath();
|
|
ctx.arc(centerX, centerY, innerRadius, 0, 2 * Math.PI);
|
|
ctx.fill();
|
|
|
|
// Draw total in center
|
|
ctx.fillStyle = '#333';
|
|
ctx.font = 'bold 16px sans-serif';
|
|
ctx.textAlign = 'center';
|
|
ctx.textBaseline = 'middle';
|
|
var totalHours = Math.floor(total / 3600);
|
|
ctx.fillText(totalHours + 'h', centerX, centerY - 10);
|
|
ctx.font = '12px sans-serif';
|
|
ctx.fillText(_('Total'), centerX, centerY + 10);
|
|
};
|
|
|
|
var updateServiceStats = function() {
|
|
API.getStatsByService().then(function(data) {
|
|
var services = data.services || {};
|
|
var container = document.getElementById('service-stats');
|
|
|
|
if (!container) return;
|
|
|
|
container.innerHTML = '';
|
|
|
|
var servicesList = Object.keys(services);
|
|
if (servicesList.length === 0) {
|
|
container.appendChild(E('p', { 'style': 'font-style: italic' }, _('No historical data available. Start streaming services while nDPId is running to collect data.')));
|
|
drawDonutChart({}, [], 0);
|
|
return;
|
|
}
|
|
|
|
// Calculate total for percentage
|
|
var total = 0;
|
|
servicesList.forEach(function(service) {
|
|
total += services[service].total_duration_seconds || 0;
|
|
});
|
|
|
|
// Sort by duration
|
|
servicesList.sort(function(a, b) {
|
|
return (services[b].total_duration_seconds || 0) - (services[a].total_duration_seconds || 0);
|
|
});
|
|
|
|
// Draw donut chart
|
|
drawDonutChart(services, servicesList, total);
|
|
|
|
// Display top 10
|
|
servicesList.slice(0, 10).forEach(function(service, index) {
|
|
var stats = services[service];
|
|
var duration = stats.total_duration_seconds || 0;
|
|
var percentage = total > 0 ? Math.round((duration / total) * 100) : 0;
|
|
var hours = Math.floor(duration / 3600);
|
|
var minutes = Math.floor((duration % 3600) / 60);
|
|
|
|
var categoryIcon = {
|
|
'video': '🎬',
|
|
'audio': '🎵',
|
|
'visio': '📹'
|
|
}[stats.category] || '📊';
|
|
|
|
var color = serviceColors[index % serviceColors.length];
|
|
|
|
container.appendChild(E('div', { 'style': 'margin: 10px 0' }, [
|
|
E('div', { 'style': 'margin-bottom: 5px' }, [
|
|
E('span', {
|
|
'style': 'display: inline-block; width: 12px; height: 12px; background: ' + color + '; margin-right: 8px; border-radius: 2px;'
|
|
}),
|
|
E('strong', {}, categoryIcon + ' ' + service),
|
|
E('span', { 'style': 'float: right' }, hours + 'h ' + minutes + 'm (' + percentage + '%)')
|
|
]),
|
|
E('div', {
|
|
'style': 'background: #e0e0e0; height: 20px; border-radius: 5px; overflow: hidden'
|
|
}, [
|
|
E('div', {
|
|
'style': 'background: ' + color + '; height: 100%; width: ' + percentage + '%'
|
|
})
|
|
])
|
|
]));
|
|
});
|
|
});
|
|
};
|
|
|
|
updateServiceStats();
|
|
v.appendChild(statsSection);
|
|
|
|
// Setup auto-refresh
|
|
poll.add(L.bind(function() {
|
|
updateFlowStats();
|
|
updateServiceStats();
|
|
}, this), 5);
|
|
|
|
return v;
|
|
},
|
|
|
|
handleSaveApply: null,
|
|
handleSave: null,
|
|
handleReset: null
|
|
});
|