120 lines
3.9 KiB
JavaScript
120 lines
3.9 KiB
JavaScript
'use strict';
|
|
'require view';
|
|
'require secubox-theme/bootstrap as Theme';
|
|
'require poll';
|
|
'require dom';
|
|
'require ui';
|
|
'require netifyd-dashboard.api as api';
|
|
|
|
return view.extend({
|
|
title: _('Applications'),
|
|
|
|
load: function() {
|
|
return api.getApplications();
|
|
},
|
|
|
|
render: function(data) {
|
|
var apps = (data || {}).applications || [];
|
|
var totalBytes = apps.reduce(function(sum, a) { return sum + (a.bytes || 0); }, 0);
|
|
var totalFlows = apps.reduce(function(sum, a) { return sum + (a.flows || 0); }, 0);
|
|
|
|
var view = E('div', { 'class': 'netifyd-dashboard' }, [
|
|
// Header
|
|
E('div', { 'class': 'nf-header' }, [
|
|
E('div', { 'class': 'nf-logo' }, [
|
|
E('div', { 'class': 'nf-logo-icon' }, '📱'),
|
|
E('div', { 'class': 'nf-logo-text' }, ['App', E('span', {}, 'lications')])
|
|
]),
|
|
E('div', { 'class': 'nf-header-info' }, [
|
|
E('div', { 'class': 'nf-status-badge' }, [
|
|
E('span', { 'class': 'nf-status-dot' }),
|
|
apps.length + ' Detected'
|
|
])
|
|
])
|
|
]),
|
|
|
|
// Quick Stats
|
|
E('div', { 'class': 'nf-quick-stats' }, [
|
|
E('div', { 'class': 'nf-quick-stat', 'style': '--stat-color: #8b5cf6' }, [
|
|
E('div', { 'class': 'nf-quick-stat-icon' }, '📱'),
|
|
E('div', { 'class': 'nf-quick-stat-value' }, apps.length),
|
|
E('div', { 'class': 'nf-quick-stat-label' }, 'Applications')
|
|
]),
|
|
E('div', { 'class': 'nf-quick-stat', 'style': '--stat-color: #3b82f6' }, [
|
|
E('div', { 'class': 'nf-quick-stat-icon' }, '🔄'),
|
|
E('div', { 'class': 'nf-quick-stat-value' }, totalFlows),
|
|
E('div', { 'class': 'nf-quick-stat-label' }, 'Total Flows')
|
|
]),
|
|
E('div', { 'class': 'nf-quick-stat', 'style': '--stat-color: #10b981' }, [
|
|
E('div', { 'class': 'nf-quick-stat-icon' }, '📊'),
|
|
E('div', { 'class': 'nf-quick-stat-value' }, api.formatBytes(totalBytes)),
|
|
E('div', { 'class': 'nf-quick-stat-label' }, 'Total Traffic')
|
|
])
|
|
]),
|
|
|
|
// Applications Table
|
|
E('div', { 'class': 'nf-card' }, [
|
|
E('div', { 'class': 'nf-card-header' }, [
|
|
E('div', { 'class': 'nf-card-title' }, [
|
|
E('span', { 'class': 'nf-card-title-icon' }, '📋'),
|
|
'Detected Applications'
|
|
])
|
|
]),
|
|
E('div', { 'class': 'nf-card-body', 'style': 'padding:0' }, [
|
|
E('div', { 'class': 'nf-table-container' }, [
|
|
E('table', { 'class': 'nf-table' }, [
|
|
E('thead', {}, [
|
|
E('tr', {}, [
|
|
E('th', {}, 'Application'),
|
|
E('th', {}, 'Category'),
|
|
E('th', {}, 'Flows'),
|
|
E('th', {}, 'Traffic'),
|
|
E('th', {}, '% Total')
|
|
])
|
|
]),
|
|
E('tbody', {},
|
|
apps.map(function(app) {
|
|
var pct = totalBytes > 0 ? ((app.bytes / totalBytes) * 100).toFixed(1) : 0;
|
|
return E('tr', {}, [
|
|
E('td', {}, E('div', { 'class': 'app-name' }, [
|
|
E('span', { 'class': 'app-icon' }, api.getAppIcon(app.name)),
|
|
E('strong', {}, app.name)
|
|
])),
|
|
E('td', {}, E('span', {
|
|
'class': 'nf-category ' + api.getCategoryClass(app.category)
|
|
}, app.category)),
|
|
E('td', { 'class': 'mono' }, app.flows),
|
|
E('td', { 'class': 'mono' }, api.formatBytes(app.bytes)),
|
|
E('td', {}, [
|
|
E('div', { 'style': 'display:flex;align-items:center;gap:8px' }, [
|
|
E('div', {
|
|
'style': 'width:60px;height:6px;background:#1f2937;border-radius:3px;overflow:hidden'
|
|
}, [
|
|
E('div', {
|
|
'style': 'height:100%;width:' + pct + '%;background:linear-gradient(90deg,#8b5cf6,#3b82f6);border-radius:3px'
|
|
})
|
|
]),
|
|
E('span', { 'class': 'mono', 'style': 'font-size:11px' }, pct + '%')
|
|
])
|
|
])
|
|
]);
|
|
})
|
|
)
|
|
])
|
|
])
|
|
])
|
|
])
|
|
]);
|
|
|
|
// Include CSS
|
|
var cssLink = E('link', { 'rel': 'stylesheet', 'href': L.resource('netifyd-dashboard/dashboard.css') });
|
|
document.head.appendChild(cssLink);
|
|
|
|
return view;
|
|
},
|
|
|
|
handleSaveApply: null,
|
|
handleSave: null,
|
|
handleReset: null
|
|
});
|