secubox-openwrt/luci-app-bandwidth-manager/htdocs/luci-static/resources/view/bandwidth-manager/quotas.js
CyberMind-FR fa9bb2aee7 feat: complete Bandwidth Manager implementation with QoS and quotas
Implements comprehensive bandwidth management system with QoS traffic shaping,
client quotas, and SQM/CAKE integration for OpenWrt.

Features:
- QoS traffic shaping with rule-based control (application/port/IP/MAC)
- Per-rule download/upload limits with 8-level priority system
- Time-based scheduling support for rules
- Monthly data quotas per client (MAC address)
- iptables-based usage tracking with real-time statistics
- Configurable quota actions: throttle, block, or notify
- Automatic monthly reset with configurable reset day
- SQM/CAKE integration with NAT-aware configuration
- Link overhead compensation (Ethernet, PPPoE, VLAN)
- Alternative FQ_CoDel and HTB qdisc support

Components:
- RPCD backend (luci.bandwidth-manager): 10 ubus methods
  * status, list_rules, add_rule, delete_rule
  * list_quotas, get_quota, set_quota, reset_quota
  * get_usage_realtime, get_usage_history
- 5 JavaScript views: overview, rules, quotas, usage, settings
- ACL with read/write permissions for all methods
- UCI config with global, SQM, tracking, alerts, rules, and quotas sections
- Comprehensive README with API docs and examples

Technical implementation:
- Traffic tracking via iptables BW_TRACKING chain
- Usage database in /tmp/bandwidth_usage.db (pipe-delimited format)
- Real-time client usage with 5-second auto-refresh
- Historical data with configurable timeframes (1h to 30d)
- Per-client quota progress visualization with color-coded bars
- TC (traffic control) integration for QoS enforcement

Architecture follows SecuBox standards:
- RPCD naming convention (luci. prefix)
- Menu paths match view file structure
- All JavaScript in strict mode
- Form-based configuration management
- Comprehensive error handling

Dependencies: tc, kmod-sched-core, kmod-sched-cake, kmod-ifb, sqm-scripts,
iptables, iptables-mod-conntrack-extra, ip-full

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-24 10:48:51 +01:00

115 lines
3.3 KiB
JavaScript

'use strict';
'require view';
'require ui';
'require form';
'require bandwidth-manager/api as API';
return L.view.extend({
load: function() {
return API.listQuotas();
},
render: function(quotas) {
var m = new form.Map('bandwidth', _('Client Quotas'),
_('Set monthly data quotas for individual clients by MAC address'));
var s = m.section(form.GridSection, 'quota', _('Quotas'));
s.anonymous = false;
s.addremove = true;
s.sortable = true;
s.modaltitle = function(section_id) {
return _('Edit Quota: ') + section_id;
};
// Custom render to show usage progress bars
s.addModalOptions = function(s, section_id, ev) {
var mac = this.section.formvalue(section_id, 'mac');
if (!mac) {
ui.addNotification(null, E('p', _('MAC address is required')), 'error');
return;
}
// Save quota via API
var name = this.section.formvalue(section_id, 'name') || '';
var limit_mb = parseInt(this.section.formvalue(section_id, 'limit_mb')) || 0;
var action = this.section.formvalue(section_id, 'action') || 'throttle';
var reset_day = parseInt(this.section.formvalue(section_id, 'reset_day')) || 1;
API.setQuota(mac, name, limit_mb, action, reset_day).then(function(result) {
if (result.success) {
ui.addNotification(null, E('p', '✓ ' + result.message), 'info');
window.location.reload();
} else {
ui.addNotification(null, E('p', '✗ ' + result.message), 'error');
}
});
};
var o;
o = s.option(form.Value, 'mac', _('MAC Address'));
o.rmempty = false;
o.datatype = 'macaddr';
o.placeholder = 'AA:BB:CC:DD:EE:FF';
o = s.option(form.Value, 'name', _('Client Name'));
o.placeholder = 'iPhone John';
o.description = _('Friendly name for this client');
o = s.option(form.Value, 'limit_mb', _('Monthly Limit (MB)'));
o.rmempty = false;
o.datatype = 'uinteger';
o.placeholder = '10240';
o.description = _('Monthly data limit in megabytes (e.g., 10240 = 10GB)');
o = s.option(form.ListValue, 'action', _('Action When Exceeded'));
o.value('throttle', _('Throttle bandwidth'));
o.value('block', _('Block all traffic'));
o.value('notify', _('Notify only'));
o.default = 'throttle';
o = s.option(form.Value, 'reset_day', _('Reset Day'));
o.datatype = 'range(1,28)';
o.default = '1';
o.description = _('Day of month to reset quota (1-28)');
o = s.option(form.Flag, 'enabled', _('Enabled'));
o.default = o.enabled;
// Show current usage
s.renderRowActions = function(section_id) {
var config_name = this.uciconfig || this.map.config;
var mac = this.cfgvalue(section_id, 'mac');
var resetBtn = E('button', {
'class': 'cbi-button cbi-button-action',
'click': function(ev) {
ev.preventDefault();
if (confirm(_('Reset quota counter for this client?'))) {
API.resetQuota(mac).then(function(result) {
if (result.success) {
ui.addNotification(null, E('p', '✓ ' + result.message), 'info');
window.location.reload();
} else {
ui.addNotification(null, E('p', '✗ ' + result.message), 'error');
}
});
}
}
}, _('Reset Counter'));
var actions = form.GridSection.prototype.renderRowActions.call(this, section_id);
actions.appendChild(resetBtn);
return actions;
};
return m.render();
},
handleSaveApply: null,
handleSave: null,
handleReset: null
});