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>
388 lines
13 KiB
JavaScript
388 lines
13 KiB
JavaScript
'use strict';
|
|
'require view';
|
|
'require ui';
|
|
'require poll';
|
|
'require dom';
|
|
'require bandwidth-manager/api as API';
|
|
'require secubox/kiss-theme';
|
|
|
|
return view.extend({
|
|
handleSaveApply: null,
|
|
handleSave: null,
|
|
handleReset: null,
|
|
|
|
realtimeData: [],
|
|
maxDataPoints: 60,
|
|
|
|
load: function() {
|
|
return Promise.all([
|
|
API.getHistoricalTraffic('24h', 'hour'),
|
|
API.getTopTalkers('24h', 10),
|
|
API.getProtocolBreakdown('24h'),
|
|
API.getStatus()
|
|
]);
|
|
},
|
|
|
|
renderStats: function(status) {
|
|
var c = KissTheme.colors;
|
|
return [
|
|
KissTheme.stat(status.total_rx ? this.formatBytes(status.total_rx) : '0', 'Download', c.green),
|
|
KissTheme.stat(status.total_tx ? this.formatBytes(status.total_tx) : '0', 'Upload', c.blue),
|
|
KissTheme.stat(status.active_clients || 0, 'Clients', c.purple),
|
|
KissTheme.stat(status.rule_count || 0, 'Rules', c.cyan)
|
|
];
|
|
},
|
|
|
|
renderRealtimeGraph: function() {
|
|
return E('div', {
|
|
'style': 'background: var(--kiss-bg); border-radius: 8px; padding: 16px;'
|
|
}, [
|
|
E('canvas', {
|
|
'id': 'realtime-chart',
|
|
'width': '800',
|
|
'height': '200',
|
|
'style': 'width: 100%; background: #0a0a0f; border-radius: 6px;'
|
|
})
|
|
]);
|
|
},
|
|
|
|
renderHistoricalGraph: function() {
|
|
return E('div', {
|
|
'style': 'background: var(--kiss-bg); border-radius: 8px; padding: 16px;'
|
|
}, [
|
|
E('canvas', {
|
|
'id': 'historical-chart',
|
|
'width': '800',
|
|
'height': '300',
|
|
'style': 'width: 100%; background: #0a0a0f; border-radius: 6px;'
|
|
})
|
|
]);
|
|
},
|
|
|
|
renderTopTalkers: function(topTalkers) {
|
|
var self = this;
|
|
|
|
if (topTalkers.length === 0) {
|
|
return E('p', { 'style': 'color: var(--kiss-muted); text-align: center; padding: 30px;' },
|
|
'No data available');
|
|
}
|
|
|
|
var maxUsage = topTalkers[0].used_mb || 1;
|
|
|
|
return E('div', { 'style': 'display: flex; flex-direction: column; gap: 12px;' },
|
|
topTalkers.map(function(talker, index) {
|
|
var percent = (talker.used_mb / maxUsage) * 100;
|
|
return E('div', { 'style': 'display: flex; align-items: center; gap: 12px;' }, [
|
|
E('span', { 'style': 'width: 24px; font-weight: 700; color: var(--kiss-purple);' }, '#' + (index + 1)),
|
|
E('div', { 'style': 'flex: 1;' }, [
|
|
E('div', { 'style': 'font-weight: 500;' }, talker.hostname || talker.mac),
|
|
E('div', { 'style': 'font-size: 11px; color: var(--kiss-muted);' }, talker.ip || '')
|
|
]),
|
|
E('div', { 'style': 'width: 120px;' }, [
|
|
E('div', { 'style': 'height: 6px; background: var(--kiss-bg2); border-radius: 3px; overflow: hidden; margin-bottom: 4px;' }, [
|
|
E('div', { 'style': 'height: 100%; width: ' + percent + '%; background: var(--kiss-purple);' })
|
|
]),
|
|
E('div', { 'style': 'font-size: 11px; color: var(--kiss-muted); text-align: right;' }, self.formatBytes(talker.used_mb * 1024 * 1024))
|
|
])
|
|
]);
|
|
})
|
|
);
|
|
},
|
|
|
|
renderProtocolLegend: function(protocols) {
|
|
var self = this;
|
|
var colors = ['var(--kiss-cyan)', 'var(--kiss-green)', 'var(--kiss-purple)', 'var(--kiss-orange)', 'var(--kiss-red)'];
|
|
|
|
return E('div', { 'style': 'display: flex; flex-direction: column; gap: 8px;' },
|
|
protocols.map(function(proto, index) {
|
|
return E('div', { 'style': 'display: flex; align-items: center; gap: 8px;' }, [
|
|
E('span', { 'style': 'width: 12px; height: 12px; background: ' + colors[index % colors.length] + '; border-radius: 2px;' }),
|
|
E('span', { 'style': 'flex: 1; font-size: 13px; text-transform: uppercase;' }, proto.protocol || 'Unknown'),
|
|
E('span', { 'style': 'font-size: 12px; color: var(--kiss-muted);' },
|
|
proto.connections ? proto.connections + ' conn' : self.formatBytes(proto.bytes || 0))
|
|
]);
|
|
})
|
|
);
|
|
},
|
|
|
|
render: function(data) {
|
|
var self = this;
|
|
var historical = (data[0] && data[0].data) || [];
|
|
var topTalkers = (data[1] && data[1].talkers) || [];
|
|
var protocols = (data[2] && data[2].protocols) || [];
|
|
var status = data[3] || {};
|
|
|
|
// Initialize realtime data
|
|
for (var i = 0; i < this.maxDataPoints; i++) {
|
|
this.realtimeData.push({ rx: 0, tx: 0 });
|
|
}
|
|
|
|
poll.add(L.bind(this.pollRealtime, this), 2);
|
|
|
|
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;' }, 'Traffic Graphs'),
|
|
E('div', { 'style': 'display: flex; align-items: center; gap: 6px; padding: 4px 12px; background: rgba(34, 197, 94, 0.1); border-radius: 12px;' }, [
|
|
E('span', { 'style': 'width: 8px; height: 8px; background: var(--kiss-green); border-radius: 50%; animation: pulse 2s infinite;' }),
|
|
E('span', { 'style': 'font-size: 12px; color: var(--kiss-green);' }, 'Live')
|
|
])
|
|
]),
|
|
E('p', { 'style': 'color: var(--kiss-muted); margin: 8px 0 0 0;' },
|
|
'Real-time and historical bandwidth visualization')
|
|
]),
|
|
|
|
// Stats
|
|
E('div', { 'class': 'kiss-grid kiss-grid-4', 'style': 'margin: 20px 0;' },
|
|
this.renderStats(status)),
|
|
|
|
// Realtime Stats
|
|
E('div', { 'style': 'display: flex; gap: 16px; margin-bottom: 20px;' }, [
|
|
E('div', { 'style': 'flex: 1; background: var(--kiss-bg2); border-left: 4px solid var(--kiss-green); padding: 16px; border-radius: 8px;' }, [
|
|
E('div', { 'style': 'display: flex; align-items: center; gap: 12px;' }, [
|
|
E('span', { 'style': 'font-size: 24px;' }, '\u2b07\ufe0f'),
|
|
E('div', {}, [
|
|
E('div', { 'id': 'realtime-download', 'style': 'font-size: 28px; font-weight: 700; color: var(--kiss-green);' }, '0'),
|
|
E('div', { 'style': 'font-size: 12px; color: var(--kiss-muted);' }, 'Download (Mbps)')
|
|
])
|
|
])
|
|
]),
|
|
E('div', { 'style': 'flex: 1; background: var(--kiss-bg2); border-left: 4px solid var(--kiss-blue); padding: 16px; border-radius: 8px;' }, [
|
|
E('div', { 'style': 'display: flex; align-items: center; gap: 12px;' }, [
|
|
E('span', { 'style': 'font-size: 24px;' }, '\u2b06\ufe0f'),
|
|
E('div', {}, [
|
|
E('div', { 'id': 'realtime-upload', 'style': 'font-size: 28px; font-weight: 700; color: var(--kiss-blue);' }, '0'),
|
|
E('div', { 'style': 'font-size: 12px; color: var(--kiss-muted);' }, 'Upload (Mbps)')
|
|
])
|
|
])
|
|
])
|
|
]),
|
|
|
|
// Realtime Graph
|
|
KissTheme.card('Real-time Bandwidth', this.renderRealtimeGraph()),
|
|
|
|
// Historical Graph
|
|
KissTheme.card(
|
|
E('div', { 'style': 'display: flex; justify-content: space-between; align-items: center;' }, [
|
|
E('span', {}, 'Historical Traffic'),
|
|
E('div', { 'id': 'period-selector', 'style': 'display: flex; gap: 8px;' }, [
|
|
E('button', { 'class': 'kiss-btn kiss-btn-blue', 'data-period': '24h' }, '24h'),
|
|
E('button', { 'class': 'kiss-btn', 'data-period': '7d', 'click': function() { self.changePeriod('7d', this); } }, '7d'),
|
|
E('button', { 'class': 'kiss-btn', 'data-period': '30d', 'click': function() { self.changePeriod('30d', this); } }, '30d')
|
|
])
|
|
]),
|
|
this.renderHistoricalGraph()
|
|
),
|
|
|
|
// Two column layout
|
|
E('div', { 'class': 'kiss-grid kiss-grid-2', 'style': 'margin-top: 20px;' }, [
|
|
KissTheme.card(
|
|
E('div', { 'style': 'display: flex; justify-content: space-between; align-items: center;' }, [
|
|
E('span', {}, 'Top Bandwidth Users'),
|
|
KissTheme.badge(topTalkers.length + ' users', 'purple')
|
|
]),
|
|
E('div', { 'id': 'top-talkers' }, this.renderTopTalkers(topTalkers))
|
|
),
|
|
KissTheme.card(
|
|
E('div', { 'style': 'display: flex; justify-content: space-between; align-items: center;' }, [
|
|
E('span', {}, 'Protocol Distribution'),
|
|
KissTheme.badge(protocols.length + ' protocols', 'cyan')
|
|
]),
|
|
E('div', { 'id': 'protocol-legend' }, this.renderProtocolLegend(protocols))
|
|
)
|
|
])
|
|
];
|
|
|
|
// Initialize charts after DOM is ready
|
|
requestAnimationFrame(function() {
|
|
self.initRealtimeChart();
|
|
self.drawHistoricalChart(historical);
|
|
});
|
|
|
|
return KissTheme.wrap(content, 'admin/services/bandwidth-manager/traffic-graphs');
|
|
},
|
|
|
|
pollRealtime: function() {
|
|
var self = this;
|
|
return API.getRealtimeBandwidth().then(function(data) {
|
|
if (data && typeof data.rx_mbps !== 'undefined') {
|
|
var dlEl = document.getElementById('realtime-download');
|
|
var ulEl = document.getElementById('realtime-upload');
|
|
if (dlEl) dlEl.textContent = data.rx_mbps.toFixed(1);
|
|
if (ulEl) ulEl.textContent = data.tx_mbps.toFixed(1);
|
|
|
|
self.realtimeData.push({ rx: data.rx_mbps, tx: data.tx_mbps });
|
|
if (self.realtimeData.length > self.maxDataPoints) {
|
|
self.realtimeData.shift();
|
|
}
|
|
|
|
self.drawRealtimeChart();
|
|
}
|
|
});
|
|
},
|
|
|
|
initRealtimeChart: function() {
|
|
var canvas = document.getElementById('realtime-chart');
|
|
if (!canvas) return;
|
|
|
|
var ctx = canvas.getContext('2d');
|
|
var rect = canvas.parentElement.getBoundingClientRect();
|
|
canvas.width = rect.width * window.devicePixelRatio;
|
|
canvas.height = 200 * window.devicePixelRatio;
|
|
canvas.style.width = rect.width + 'px';
|
|
canvas.style.height = '200px';
|
|
ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
|
|
|
|
this.drawRealtimeChart();
|
|
},
|
|
|
|
drawRealtimeChart: function() {
|
|
var canvas = document.getElementById('realtime-chart');
|
|
if (!canvas) return;
|
|
|
|
var ctx = canvas.getContext('2d');
|
|
var width = canvas.width / window.devicePixelRatio;
|
|
var height = canvas.height / window.devicePixelRatio;
|
|
|
|
ctx.clearRect(0, 0, width, height);
|
|
|
|
var maxVal = 10;
|
|
this.realtimeData.forEach(function(d) {
|
|
maxVal = Math.max(maxVal, d.rx, d.tx);
|
|
});
|
|
maxVal = Math.ceil(maxVal / 10) * 10;
|
|
|
|
// Grid
|
|
ctx.strokeStyle = 'rgba(255,255,255,0.1)';
|
|
ctx.lineWidth = 1;
|
|
for (var i = 0; i <= 4; i++) {
|
|
var y = height - (height * i / 4);
|
|
ctx.beginPath();
|
|
ctx.moveTo(40, y);
|
|
ctx.lineTo(width, y);
|
|
ctx.stroke();
|
|
|
|
ctx.fillStyle = 'rgba(255,255,255,0.5)';
|
|
ctx.font = '11px monospace';
|
|
ctx.textAlign = 'right';
|
|
ctx.fillText((maxVal * i / 4).toFixed(0), 35, y + 4);
|
|
}
|
|
|
|
var self = this;
|
|
|
|
// Download line
|
|
ctx.strokeStyle = '#22c55e';
|
|
ctx.lineWidth = 2;
|
|
ctx.beginPath();
|
|
this.realtimeData.forEach(function(d, i) {
|
|
var x = 40 + (i / (self.maxDataPoints - 1)) * (width - 50);
|
|
var y = height - (d.rx / maxVal) * height;
|
|
if (i === 0) ctx.moveTo(x, y);
|
|
else ctx.lineTo(x, y);
|
|
});
|
|
ctx.stroke();
|
|
|
|
// Upload line
|
|
ctx.strokeStyle = '#3b82f6';
|
|
ctx.lineWidth = 2;
|
|
ctx.beginPath();
|
|
this.realtimeData.forEach(function(d, i) {
|
|
var x = 40 + (i / (self.maxDataPoints - 1)) * (width - 50);
|
|
var y = height - (d.tx / maxVal) * height;
|
|
if (i === 0) ctx.moveTo(x, y);
|
|
else ctx.lineTo(x, y);
|
|
});
|
|
ctx.stroke();
|
|
|
|
// Legend
|
|
ctx.fillStyle = '#22c55e';
|
|
ctx.fillRect(width - 100, 10, 10, 10);
|
|
ctx.fillStyle = 'rgba(255,255,255,0.7)';
|
|
ctx.textAlign = 'left';
|
|
ctx.fillText('Download', width - 85, 19);
|
|
|
|
ctx.fillStyle = '#3b82f6';
|
|
ctx.fillRect(width - 100, 26, 10, 10);
|
|
ctx.fillStyle = 'rgba(255,255,255,0.7)';
|
|
ctx.fillText('Upload', width - 85, 35);
|
|
},
|
|
|
|
drawHistoricalChart: function(data) {
|
|
var canvas = document.getElementById('historical-chart');
|
|
if (!canvas) return;
|
|
|
|
var ctx = canvas.getContext('2d');
|
|
var rect = canvas.parentElement.getBoundingClientRect();
|
|
canvas.width = rect.width * window.devicePixelRatio;
|
|
canvas.height = 300 * window.devicePixelRatio;
|
|
canvas.style.width = rect.width + 'px';
|
|
canvas.style.height = '300px';
|
|
ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
|
|
|
|
var width = rect.width;
|
|
var height = 300;
|
|
var self = this;
|
|
|
|
ctx.clearRect(0, 0, width, height);
|
|
|
|
if (data.length === 0) {
|
|
ctx.fillStyle = 'rgba(255,255,255,0.5)';
|
|
ctx.font = '14px sans-serif';
|
|
ctx.textAlign = 'center';
|
|
ctx.fillText('No historical data available', width / 2, height / 2);
|
|
return;
|
|
}
|
|
|
|
var maxVal = 0;
|
|
data.forEach(function(d) {
|
|
maxVal = Math.max(maxVal, d.rx_bytes || 0, d.tx_bytes || 0);
|
|
});
|
|
if (maxVal === 0) maxVal = 1;
|
|
|
|
var barWidth = (width - 60) / data.length - 2;
|
|
|
|
data.forEach(function(d, i) {
|
|
var x = 50 + i * ((width - 60) / data.length);
|
|
var rxHeight = ((d.rx_bytes || 0) / maxVal) * (height - 50);
|
|
var txHeight = ((d.tx_bytes || 0) / maxVal) * (height - 50);
|
|
|
|
ctx.fillStyle = '#22c55e';
|
|
ctx.fillRect(x, height - 30 - rxHeight, barWidth / 2 - 1, rxHeight);
|
|
|
|
ctx.fillStyle = '#3b82f6';
|
|
ctx.fillRect(x + barWidth / 2, height - 30 - txHeight, barWidth / 2 - 1, txHeight);
|
|
});
|
|
|
|
// Y-axis
|
|
ctx.fillStyle = 'rgba(255,255,255,0.5)';
|
|
ctx.font = '11px monospace';
|
|
ctx.textAlign = 'right';
|
|
for (var i = 0; i <= 4; i++) {
|
|
var val = (maxVal * i / 4);
|
|
var y = height - 30 - ((height - 50) * i / 4);
|
|
ctx.fillText(self.formatBytes(val), 45, y + 4);
|
|
}
|
|
},
|
|
|
|
changePeriod: function(period, btn) {
|
|
var self = this;
|
|
document.querySelectorAll('#period-selector button').forEach(function(b) {
|
|
b.classList.remove('kiss-btn-blue');
|
|
});
|
|
btn.classList.add('kiss-btn-blue');
|
|
|
|
API.getHistoricalTraffic(period, 'hour').then(function(result) {
|
|
self.drawHistoricalChart(result.data || []);
|
|
});
|
|
},
|
|
|
|
formatBytes: function(bytes) {
|
|
if (bytes === 0) return '0 B';
|
|
var k = 1024;
|
|
var sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
|
|
var i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
|
}
|
|
});
|