secubox-openwrt/package/secubox/luci-app-media-flow/htdocs/luci-static/resources/view/media-flow/dashboard.js

'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' }, _('Network flow monitoring and statistics'))
		]);

		// Status overview
		var statusSection = E('div', { 'class': 'cbi-section' }, [
			E('h3', {}, _('Status')),
			E('div', { 'class': 'table' }, [
				E('div', { 'class': 'tr' }, [
					E('div', { 'class': 'td left', 'width': '33%' }, [
						E('strong', {}, _('Module: ')),
						E('span', {}, status.enabled ? _('Enabled') : _('Disabled'))
					]),
					E('div', { 'class': 'td left', 'width': '33%' }, [
						E('strong', {}, _('Netifyd: ')),
						E('span', {}, status.netifyd_running ?
							E('span', { 'style': 'color: green' }, '● ' + _('Running') + ' (v' + (status.netifyd_version || '?') + ')') :
							E('span', { 'style': 'color: red' }, '● ' + _('Stopped'))
						)
					]),
					E('div', { 'class': 'td left', 'width': '33%' }, [
						E('strong', {}, _('Active Flows: ')),
						E('span', { 'style': 'font-size: 1.5em; color: #0088cc' }, String(status.active_flows || 0))
					])
				])
			])
		]);
		v.appendChild(statusSection);

		// Netifyd 5.x limitation notice
		var noticeSection = E('div', { 'class': 'cbi-section' }, [
			E('div', { 'class': 'alert-message warning', '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. Currently showing network flow statistics only.'))
			])
		]);
		v.appendChild(noticeSection);

		// Network flow stats
		var flowSection = E('div', { 'class': 'cbi-section' }, [
			E('h3', {}, _('Network Flows')),
			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 note = data.note || '';

				container.innerHTML = '';
				container.appendChild(E('div', { 'class': 'table', 'style': 'background: #f8f9fa; padding: 20px; border-radius: 8px;' }, [
					E('div', { 'class': 'tr' }, [
						E('div', { 'class': 'td', 'style': 'text-align: center;' }, [
							E('div', { 'style': 'font-size: 3em; color: #0088cc; font-weight: bold;' }, String(flowCount)),
							E('div', { 'style': 'color: #666; margin-top: 5px;' }, _('Active Network Flows'))
						])
					])
				]));

				if (note) {
					container.appendChild(E('p', { 'style': 'font-style: italic; color: #666; text-align: center; margin-top: 10px;' }, note));
				}
			});
		};

		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. Stream detection requires netifyd cloud subscription.')));
					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
});