secubox-openwrt/package/secubox/luci-app-client-guardian/htdocs/luci-static/resources/view/client-guardian/overview.js

'use strict';
'require view';
'require secubox-theme/theme as Theme';
'require dom';
'require poll';
'require uci';
'require ui';
'require client-guardian.api as api';

return view.extend({
	load: function() {
		return Promise.all([
			api.getStatus(),
			api.getClients(),
			api.getZones(),
			uci.load('client-guardian')
		]);
	},

	render: function(data) {
		var status = data[0];
		var clients = Array.isArray(data[1]) ? data[1] : (data[1].clients || []);
		var zones = Array.isArray(data[2]) ? data[2] : (data[2].zones || []);

		var onlineClients = clients.filter(function(c) { return c.online; });
		var approvedClients = clients.filter(function(c) { return c.status === 'approved'; });
		var quarantineClients = clients.filter(function(c) { return c.status === 'unknown' || c.zone === 'quarantine'; });
		var bannedClients = clients.filter(function(c) { return c.status === 'banned'; });

		var view = E('div', { 'class': 'client-guardian-dashboard' }, [
			E('link', { 'rel': 'stylesheet', 'href': L.resource('secubox-theme/secubox-theme.css') }),
			E('link', { 'rel': 'stylesheet', 'href': L.resource('client-guardian/dashboard.css') }),

			// Header
			E('div', { 'class': 'cg-header' }, [
				E('div', { 'class': 'cg-logo' }, [
					E('div', { 'class': 'cg-logo-icon' }, '🛡️'),
					E('div', { 'class': 'cg-logo-text' }, [
						'Client ',
						E('span', {}, 'Guardian')
					])
				]),
				E('div', { 'class': 'cg-status-badge approved' }, [
					E('span', { 'class': 'cg-status-dot' }),
					'Protection Active'
				])
			]),

			// Stats Grid
			E('div', { 'class': 'cg-stats-grid' }, [
				this.renderStatCard('📱', onlineClients.length, 'Clients En Ligne'),
				this.renderStatCard('✅', approvedClients.length, 'Approuvés'),
				this.renderStatCard('⏳', quarantineClients.length, 'Quarantaine'),
				this.renderStatCard('🚫', bannedClients.length, 'Bannis'),
				this.renderStatCard('⚠️', clients.filter(function(c) { return c.has_threats; }).length, 'Menaces Actives'),
				this.renderStatCard('🌐', zones.length, 'Zones')
			]),

			// Recent Clients Card
			E('div', { 'class': 'cg-card' }, [
				E('div', { 'class': 'cg-card-header' }, [
					E('div', { 'class': 'cg-card-title' }, [
						E('span', { 'class': 'cg-card-title-icon' }, '⚡'),
						'Clients Récents'
					]),
					E('span', { 'class': 'cg-card-badge' }, 'Temps réel')
				]),
				E('div', { 'class': 'cg-card-body' }, [
					E('div', { 'class': 'cg-client-list' },
						onlineClients.slice(0, 5).map(L.bind(this.renderClientItem, this, false))
					)
				])
			]),

			// Pending Approval Card
			quarantineClients.length > 0 ? E('div', { 'class': 'cg-card' }, [
				E('div', { 'class': 'cg-card-header' }, [
					E('div', { 'class': 'cg-card-title' }, [
						E('span', { 'class': 'cg-card-title-icon' }, '⏳'),
						'En Attente d\'Approbation'
					]),
					E('span', { 'class': 'cg-card-badge' }, quarantineClients.length + ' clients')
				]),
				E('div', { 'class': 'cg-card-body' }, [
					E('div', { 'class': 'cg-client-list' },
						quarantineClients.map(L.bind(this.renderClientItem, this, true))
					)
				])
			]) : E('div')
		]);

		// Setup auto-refresh polling based on UCI settings
		var autoRefresh = uci.get('client-guardian', 'config', 'auto_refresh');
		var refreshInterval = parseInt(uci.get('client-guardian', 'config', 'refresh_interval') || '10');

		if (autoRefresh === '1') {
			poll.add(L.bind(function() {
				return this.handleRefresh();
			}, this), refreshInterval);
		}

		return view;
	},

	renderStatCard: function(icon, value, label) {
		return E('div', { 'class': 'cg-stat-card' }, [
			E('div', { 'class': 'cg-stat-icon' }, icon),
			E('div', { 'class': 'cg-stat-value' }, String(value)),
			E('div', { 'class': 'cg-stat-label' }, label)
		]);
	},

	renderClientItem: function(showActions, client) {
		var statusClass = client.online ? 'online' : 'offline';
		if (client.status === 'unknown' || client.zone === 'quarantine')
			statusClass += ' quarantine';
		if (client.status === 'banned')
			statusClass += ' banned';

		var deviceIcon = api.getDeviceIcon(client.hostname || client.name, client.mac);
		var zoneClass = (client.zone || 'unknown').replace('lan_', '');

		var item = E('div', { 'class': 'cg-client-item ' + statusClass }, [
			E('div', { 'class': 'cg-client-avatar' }, deviceIcon),
			E('div', { 'class': 'cg-client-info' }, [
				E('div', { 'class': 'cg-client-name' }, [
					client.online ? E('span', { 'class': 'online-indicator' }) : E('span'),
					client.name || client.hostname || 'Unknown',
					client.has_threats ? E('span', {
						'class': 'cg-threat-badge',
						'title': (client.threat_count || 0) + ' menace(s) active(s), score de risque: ' + (client.risk_score || 0),
						'style': 'margin-left: 8px; color: #ef4444; font-size: 16px; cursor: help;'
					}, '⚠️') : E('span')
				]),
				E('div', { 'class': 'cg-client-meta' }, [
					E('span', {}, client.mac),
					E('span', {}, client.ip || 'N/A'),
					client.has_threats ? E('span', {
						'style': 'color: #ef4444; font-weight: 500; margin-left: 8px;'
					}, 'Risque: ' + (client.risk_score || 0) + '%') : E('span')
				])
			]),
			E('span', { 'class': 'cg-client-zone ' + zoneClass }, client.zone || 'unknown'),
			E('div', { 'class': 'cg-client-traffic' }, [
				E('div', { 'class': 'cg-client-traffic-value' }, '↓ ' + api.formatBytes(client.rx_bytes || 0)),
				E('div', { 'class': 'cg-client-traffic-label' }, '↑ ' + api.formatBytes(client.tx_bytes || 0))
			])
		]);

		if (showActions) {
			var actions = E('div', { 'class': 'cg-client-actions' });

			if (client.status === 'unknown') {
				var approveBtn = E('div', {
					'class': 'cg-client-action approve',
					'title': 'Approuver',
					'data-mac': client.mac
				}, '✅');
				approveBtn.addEventListener('click', L.bind(this.handleApprove, this));
				actions.appendChild(approveBtn);
			}

			if (client.status !== 'banned') {
				var banBtn = E('div', {
					'class': 'cg-client-action ban',
					'title': 'Bannir',
					'data-mac': client.mac
				}, '🚫');
				banBtn.addEventListener('click', L.bind(this.handleBan, this));
				actions.appendChild(banBtn);
			}

			item.appendChild(actions);
		}

		return item;
	},

	handleApprove: function(ev) {
		var mac = ev.currentTarget.dataset.mac;
		var self = this;

		ui.showModal(_('Approuver le Client'), [
			E('p', {}, _('Choisissez une zone pour ce client:')),
			E('select', { 'id': 'approve-zone', 'class': 'cg-select' }, [
				E('option', { 'value': 'lan_private' }, 'LAN Privé'),
				E('option', { 'value': 'iot' }, 'IoT'),
				E('option', { 'value': 'kids' }, 'Enfants'),
				E('option', { 'value': 'guest' }, 'Invités')
			]),
			E('div', { 'class': 'right' }, [
				E('button', {
					'class': 'cg-btn',
					'click': ui.hideModal
				}, _('Annuler')),
				E('button', {
					'class': 'cg-btn cg-btn-success',
					'click': L.bind(function() {
						var zone = document.getElementById('approve-zone').value;
						api.approveClient(mac, '', zone, '').then(L.bind(function() {
							ui.hideModal();
							ui.addNotification(null, E('p', _('Client approved successfully')), 'success');
							this.handleRefresh();
						}, this));
					}, this)
				}, _('Approuver'))
			])
		]);
	},

	handleBan: function(ev) {
		var mac = ev.currentTarget.dataset.mac;

		ui.showModal(_('Bannir le Client'), [
			E('p', {}, _('Voulez-vous vraiment bannir ce client?')),
			E('p', {}, E('strong', {}, mac)),
			E('div', { 'class': 'right' }, [
				E('button', {
					'class': 'cg-btn',
					'click': ui.hideModal
				}, _('Annuler')),
				E('button', {
					'class': 'cg-btn cg-btn-danger',
					'click': L.bind(function() {
						api.banClient(mac, 'Manual ban').then(L.bind(function() {
							ui.hideModal();
							ui.addNotification(null, E('p', _('Client banned successfully')), 'info');
							this.handleRefresh();
						}, this));
					}, this)
				}, _('Bannir'))
			])
		]);
	},

	handleRefresh: function() {
		return Promise.all([
			api.getStatus(),
			api.getClients(),
			api.getZones()
		]).then(L.bind(function(data) {
			// Update dashboard without full page reload
			var container = document.querySelector('.client-guardian-dashboard');
			if (container) {
				// Show loading indicator
				var statusBadge = document.querySelector('.cg-status-badge');
				if (statusBadge) {
					statusBadge.classList.add('loading');
				}

				// Reconstruct data array (status, clients, zones, uci already loaded)
				var newView = this.render(data);
				dom.content(container.parentNode, newView);

				// Remove loading indicator
				if (statusBadge) {
					statusBadge.classList.remove('loading');
				}
			}
		}, this)).catch(function(err) {
			console.error('Failed to refresh Client Guardian dashboard:', err);
		});
	},

	handleLeave: function() {
		// Stop polling when leaving the view to prevent memory leaks
		poll.stop();
	},

	handleSaveApply: null,
	handleSave: null,
	handleReset: null
});