CyberMind-FR
1bbd345cee
Convert 90+ LuCI view files from legacy cbi-button-* classes to KissTheme kiss-btn-* classes for consistent dark theme styling. Pattern conversions applied: - cbi-button-positive → kiss-btn-green - cbi-button-negative/remove → kiss-btn-red - cbi-button-apply → kiss-btn-cyan - cbi-button-action → kiss-btn-blue - cbi-button (plain) → kiss-btn Also replaced hardcoded colors (#080, #c00, #888, etc.) with CSS variables (--kiss-green, --kiss-red, --kiss-muted, etc.) for proper dark theme compatibility. Apps updated include: ai-gateway, auth-guardian, bandwidth-manager, cloner, config-advisor, crowdsec-dashboard, dns-provider, exposure, glances, haproxy, hexojs, iot-guard, jellyfin, ksm-manager, mac-guardian, magicmirror2, master-link, meshname-dns, metablogizer, metabolizer, mqtt-bridge, netdata-dashboard, picobrew, routes-status, secubox-admin, secubox-mirror, secubox-p2p, secubox-security-threats, service-registry, simplex, streamlit, system-hub, tor-shield, traffic-shaper, vhost-manager, vortex-dns, vortex-firewall, webradio, wireguard-dashboard, zigbee2mqtt, zkp, and more. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
352 lines
12 KiB
JavaScript
352 lines
12 KiB
JavaScript
'use strict';
|
|
'require view';
|
|
'require dom';
|
|
'require poll';
|
|
'require rpc';
|
|
'require ui';
|
|
'require secubox/kiss-theme';
|
|
|
|
var callGetDpiApplications = rpc.declare({
|
|
object: 'luci.bandwidth-manager',
|
|
method: 'get_dpi_applications',
|
|
expect: { applications: [], dpi_source: 'none' }
|
|
});
|
|
|
|
var callGetSmartSuggestions = rpc.declare({
|
|
object: 'luci.bandwidth-manager',
|
|
method: 'get_smart_suggestions',
|
|
expect: { suggestions: [] }
|
|
});
|
|
|
|
var callApplyDpiRule = rpc.declare({
|
|
object: 'luci.bandwidth-manager',
|
|
method: 'apply_dpi_rule',
|
|
params: ['app_name', 'priority', 'limit_down', 'limit_up'],
|
|
expect: { success: false, message: '' }
|
|
});
|
|
|
|
var callGetClasses = rpc.declare({
|
|
object: 'luci.bandwidth-manager',
|
|
method: 'get_classes',
|
|
expect: { classes: [] }
|
|
});
|
|
|
|
return view.extend({
|
|
handleSaveApply: null,
|
|
handleSave: null,
|
|
handleReset: null,
|
|
|
|
applications: [],
|
|
suggestions: [],
|
|
classes: [],
|
|
dpiSource: 'none',
|
|
|
|
load: function() {
|
|
return Promise.all([
|
|
callGetDpiApplications(),
|
|
callGetSmartSuggestions(),
|
|
callGetClasses()
|
|
]);
|
|
},
|
|
|
|
renderStats: function() {
|
|
var c = KissTheme.colors;
|
|
var dpiActive = this.dpiSource !== 'none';
|
|
return [
|
|
KissTheme.stat(dpiActive ? 'Active' : 'Inactive', 'DPI Engine', dpiActive ? c.green : c.red),
|
|
KissTheme.stat(this.dpiSource === 'none' ? 'None' : this.dpiSource, 'Source', c.cyan),
|
|
KissTheme.stat(this.applications.length, 'Applications', c.blue),
|
|
KissTheme.stat(this.suggestions.length, 'Suggestions', c.purple)
|
|
];
|
|
},
|
|
|
|
renderDpiStatus: function() {
|
|
var statusColor, statusText, statusIcon;
|
|
switch (this.dpiSource) {
|
|
case 'ndpid':
|
|
statusColor = 'var(--kiss-green)';
|
|
statusText = 'nDPId Active';
|
|
statusIcon = '\u2713';
|
|
break;
|
|
case 'netifyd':
|
|
statusColor = 'var(--kiss-blue)';
|
|
statusText = 'Netifyd Active';
|
|
statusIcon = '\u2713';
|
|
break;
|
|
default:
|
|
statusColor = 'var(--kiss-red)';
|
|
statusText = 'No DPI Engine';
|
|
statusIcon = '\u2717';
|
|
}
|
|
|
|
return E('div', {
|
|
'style': 'display: flex; align-items: center; gap: 16px; padding: 16px; background: var(--kiss-bg2); border-radius: 10px; border-left: 4px solid ' + statusColor + ';'
|
|
}, [
|
|
E('div', {
|
|
'style': 'width: 48px; height: 48px; background: ' + statusColor + '20; color: ' + statusColor + '; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px;'
|
|
}, statusIcon),
|
|
E('div', { 'style': 'flex: 1;' }, [
|
|
E('div', { 'style': 'font-weight: 600; color: ' + statusColor + ';' }, statusText),
|
|
E('div', { 'style': 'font-size: 13px; color: var(--kiss-muted);' },
|
|
this.dpiSource !== 'none'
|
|
? 'Deep Packet Inspection is analyzing your network traffic'
|
|
: 'Install nDPId or netifyd to enable application detection')
|
|
]),
|
|
E('div', { 'style': 'font-size: 13px;' }, [
|
|
E('span', { 'style': 'color: var(--kiss-muted);' }, 'Detected: '),
|
|
E('strong', {}, this.applications.length.toString())
|
|
])
|
|
]);
|
|
},
|
|
|
|
renderSuggestions: function() {
|
|
var self = this;
|
|
|
|
if (this.suggestions.length === 0) {
|
|
return E('p', { 'style': 'color: var(--kiss-muted); text-align: center; padding: 30px;' },
|
|
this.dpiSource === 'none' ?
|
|
'Enable a DPI engine to get smart suggestions' :
|
|
'No optimization suggestions at this time');
|
|
}
|
|
|
|
var typeIcons = { gaming: '\ud83c\udfae', streaming: '\ud83c\udfa5', videoconf: '\ud83d\udcf9', downloads: '\u2b07\ufe0f' };
|
|
var typeColors = { gaming: 'purple', streaming: 'orange', videoconf: 'blue', downloads: 'cyan' };
|
|
|
|
return E('div', { 'style': 'display: flex; flex-direction: column; gap: 12px;' },
|
|
this.suggestions.map(function(suggestion) {
|
|
var icon = typeIcons[suggestion.type] || '\ud83d\udca1';
|
|
var color = typeColors[suggestion.type] || 'blue';
|
|
|
|
return E('div', {
|
|
'style': 'display: flex; align-items: flex-start; gap: 12px; padding: 16px; background: var(--kiss-bg); border-radius: 8px;'
|
|
}, [
|
|
E('div', {
|
|
'style': 'width: 40px; height: 40px; background: var(--kiss-' + color + ')20; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0;'
|
|
}, icon),
|
|
E('div', { 'style': 'flex: 1;' }, [
|
|
E('div', { 'style': 'font-weight: 600; margin-bottom: 4px;' }, suggestion.title),
|
|
E('div', { 'style': 'font-size: 13px; color: var(--kiss-muted); margin-bottom: 8px;' }, suggestion.description),
|
|
E('div', { 'style': 'display: flex; gap: 8px;' }, [
|
|
KissTheme.badge('P' + suggestion.priority, color),
|
|
KissTheme.badge(suggestion.affected_devices + ' devices', 'muted')
|
|
])
|
|
]),
|
|
E('button', {
|
|
'class': 'kiss-btn kiss-btn-green',
|
|
'click': function() { self.applySuggestion(suggestion); }
|
|
}, 'Apply')
|
|
]);
|
|
})
|
|
);
|
|
},
|
|
|
|
renderApplications: function() {
|
|
var self = this;
|
|
|
|
if (this.applications.length === 0) {
|
|
return E('p', { 'style': 'color: var(--kiss-muted); text-align: center; padding: 30px;' },
|
|
'No applications detected');
|
|
}
|
|
|
|
var sortedApps = this.applications.slice().sort(function(a, b) {
|
|
return (b.total_bytes || 0) - (a.total_bytes || 0);
|
|
});
|
|
|
|
var rows = sortedApps.slice(0, 20).map(function(app) {
|
|
return E('tr', {}, [
|
|
E('td', { 'style': 'font-weight: 500;' }, app.name || 'Unknown'),
|
|
E('td', {}, String(app.flow_count || 0)),
|
|
E('td', {}, self.formatBytes(app.total_bytes || 0)),
|
|
E('td', {}, [
|
|
E('button', {
|
|
'class': 'kiss-btn kiss-btn-blue',
|
|
'style': 'font-size: 11px; padding: 4px 10px;',
|
|
'click': function() { self.showRuleDialog(app); }
|
|
}, 'Create Rule')
|
|
])
|
|
]);
|
|
});
|
|
|
|
return E('table', { 'class': 'kiss-table' }, [
|
|
E('thead', {}, [
|
|
E('tr', {}, [
|
|
E('th', {}, 'Application'),
|
|
E('th', {}, 'Flows'),
|
|
E('th', {}, 'Traffic'),
|
|
E('th', {}, 'Actions')
|
|
])
|
|
]),
|
|
E('tbody', {}, rows)
|
|
]);
|
|
},
|
|
|
|
render: function(data) {
|
|
var self = this;
|
|
var dpiData = data[0] || { applications: [], dpi_source: 'none' };
|
|
var suggestionsData = data[1] || { suggestions: [] };
|
|
var classesData = data[2] || { classes: [] };
|
|
|
|
this.applications = dpiData.applications || [];
|
|
this.dpiSource = dpiData.dpi_source || 'none';
|
|
this.suggestions = suggestionsData.suggestions || [];
|
|
this.classes = classesData.classes || [];
|
|
|
|
poll.add(L.bind(this.pollData, this), 10);
|
|
|
|
var content = [
|
|
// Header
|
|
E('div', { 'style': 'margin-bottom: 24px;' }, [
|
|
E('div', { 'style': 'display: flex; align-items: center; gap: 16px;' }, [
|
|
E('h2', { 'style': 'font-size: 24px; font-weight: 700; margin: 0;' }, 'Smart QoS'),
|
|
this.dpiSource !== 'none' ? KissTheme.badge('DPI Active', 'green') : KissTheme.badge('DPI Inactive', 'red')
|
|
]),
|
|
E('p', { 'style': 'color: var(--kiss-muted); margin: 8px 0 0 0;' },
|
|
'AI-powered traffic classification using Deep Packet Inspection')
|
|
]),
|
|
|
|
// Stats
|
|
E('div', { 'class': 'kiss-grid kiss-grid-4', 'id': 'smart-qos-stats', 'style': 'margin: 20px 0;' },
|
|
this.renderStats()),
|
|
|
|
// DPI Status
|
|
E('div', { 'id': 'dpi-status', 'style': 'margin-bottom: 20px;' }, this.renderDpiStatus()),
|
|
|
|
// Two column layout
|
|
E('div', { 'class': 'kiss-grid kiss-grid-2', 'style': 'margin-bottom: 20px;' }, [
|
|
KissTheme.card(
|
|
E('div', { 'style': 'display: flex; justify-content: space-between; align-items: center;' }, [
|
|
E('span', {}, 'Smart Suggestions'),
|
|
KissTheme.badge(this.suggestions.length + ' suggestions', 'purple')
|
|
]),
|
|
E('div', { 'id': 'suggestions-container' }, this.renderSuggestions())
|
|
),
|
|
KissTheme.card(
|
|
E('div', { 'style': 'display: flex; justify-content: space-between; align-items: center;' }, [
|
|
E('span', {}, 'Detected Applications'),
|
|
KissTheme.badge(this.applications.length + ' apps', 'blue')
|
|
]),
|
|
E('div', { 'id': 'apps-container' }, this.renderApplications())
|
|
)
|
|
])
|
|
];
|
|
|
|
return KissTheme.wrap(content, 'admin/services/bandwidth-manager/smart-qos');
|
|
},
|
|
|
|
pollData: function() {
|
|
var self = this;
|
|
return Promise.all([
|
|
callGetDpiApplications(),
|
|
callGetSmartSuggestions()
|
|
]).then(function(data) {
|
|
self.applications = (data[0] && data[0].applications) || [];
|
|
self.dpiSource = (data[0] && data[0].dpi_source) || 'none';
|
|
self.suggestions = (data[1] && data[1].suggestions) || [];
|
|
|
|
var statsEl = document.getElementById('smart-qos-stats');
|
|
var dpiEl = document.getElementById('dpi-status');
|
|
var suggestionsEl = document.getElementById('suggestions-container');
|
|
var appsEl = document.getElementById('apps-container');
|
|
|
|
if (statsEl) dom.content(statsEl, self.renderStats());
|
|
if (dpiEl) dom.content(dpiEl, self.renderDpiStatus());
|
|
if (suggestionsEl) dom.content(suggestionsEl, self.renderSuggestions());
|
|
if (appsEl) dom.content(appsEl, self.renderApplications());
|
|
});
|
|
},
|
|
|
|
applySuggestion: function(suggestion) {
|
|
var self = this;
|
|
|
|
ui.showModal('Apply Suggestion', [
|
|
E('p', {}, suggestion.description),
|
|
E('p', { 'style': 'color: var(--kiss-muted);' }, 'This will create a QoS rule with priority ' + suggestion.priority + '.'),
|
|
E('div', { 'style': 'display: flex; justify-content: flex-end; gap: 12px; margin-top: 20px;' }, [
|
|
E('button', { 'class': 'kiss-btn', 'click': ui.hideModal }, 'Cancel'),
|
|
E('button', {
|
|
'class': 'kiss-btn kiss-btn-green',
|
|
'click': function() {
|
|
ui.hideModal();
|
|
var appName = {
|
|
gaming: 'Gaming', streaming: 'Streaming',
|
|
videoconf: 'Video Conferencing', downloads: 'Downloads'
|
|
}[suggestion.type] || '';
|
|
|
|
callApplyDpiRule(appName, suggestion.priority, 0, 0).then(function(res) {
|
|
if (res.success) {
|
|
ui.addNotification(null, E('p', {}, res.message), 'success');
|
|
} else {
|
|
ui.addNotification(null, E('p', {}, res.message || 'Failed to apply rule'), 'error');
|
|
}
|
|
});
|
|
}
|
|
}, 'Apply')
|
|
])
|
|
]);
|
|
},
|
|
|
|
showRuleDialog: function(app) {
|
|
var self = this;
|
|
|
|
ui.showModal('Create QoS Rule for ' + app.name, [
|
|
E('div', { 'style': 'margin-bottom: 16px;' }, [
|
|
E('label', { 'style': 'display: block; margin-bottom: 6px;' }, 'Priority Class'),
|
|
E('select', {
|
|
'id': 'rule-priority',
|
|
'style': 'width: 100%; padding: 8px; background: var(--kiss-bg); border: 1px solid var(--kiss-line); border-radius: 6px; color: var(--kiss-text);'
|
|
}, this.classes.map(function(c) {
|
|
return E('option', { 'value': c.priority }, c.priority + ' - ' + c.name);
|
|
}))
|
|
]),
|
|
E('div', { 'style': 'display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px;' }, [
|
|
E('div', {}, [
|
|
E('label', { 'style': 'display: block; margin-bottom: 6px;' }, 'Download Limit (Kbps)'),
|
|
E('input', {
|
|
'type': 'number', 'id': 'rule-limit-down', 'value': '0', 'min': '0',
|
|
'style': 'width: 100%; padding: 8px; background: var(--kiss-bg); border: 1px solid var(--kiss-line); border-radius: 6px; color: var(--kiss-text);'
|
|
})
|
|
]),
|
|
E('div', {}, [
|
|
E('label', { 'style': 'display: block; margin-bottom: 6px;' }, 'Upload Limit (Kbps)'),
|
|
E('input', {
|
|
'type': 'number', 'id': 'rule-limit-up', 'value': '0', 'min': '0',
|
|
'style': 'width: 100%; padding: 8px; background: var(--kiss-bg); border: 1px solid var(--kiss-line); border-radius: 6px; color: var(--kiss-text);'
|
|
})
|
|
])
|
|
]),
|
|
E('p', { 'style': 'font-size: 12px; color: var(--kiss-muted);' }, '0 = unlimited'),
|
|
E('div', { 'style': 'display: flex; justify-content: flex-end; gap: 12px; margin-top: 20px;' }, [
|
|
E('button', { 'class': 'kiss-btn', 'click': ui.hideModal }, 'Cancel'),
|
|
E('button', {
|
|
'class': 'kiss-btn kiss-btn-green',
|
|
'click': function() {
|
|
var priority = parseInt(document.getElementById('rule-priority').value) || 5;
|
|
var limitDown = parseInt(document.getElementById('rule-limit-down').value) || 0;
|
|
var limitUp = parseInt(document.getElementById('rule-limit-up').value) || 0;
|
|
|
|
ui.hideModal();
|
|
callApplyDpiRule(app.name, priority, limitDown, limitUp).then(function(res) {
|
|
if (res.success) {
|
|
ui.addNotification(null, E('p', {}, 'Rule created for ' + app.name), 'success');
|
|
} else {
|
|
ui.addNotification(null, E('p', {}, res.message || 'Failed to create rule'), 'error');
|
|
}
|
|
});
|
|
}
|
|
}, 'Create Rule')
|
|
])
|
|
]);
|
|
},
|
|
|
|
formatBytes: function(bytes) {
|
|
if (!bytes || bytes === 0) return '0 B';
|
|
var units = ['B', 'KB', 'MB', 'GB', 'TB'];
|
|
var i = 0;
|
|
while (bytes >= 1024 && i < units.length - 1) {
|
|
bytes /= 1024;
|
|
i++;
|
|
}
|
|
return bytes.toFixed(1) + ' ' + units[i];
|
|
}
|
|
});
|