mirror of
https://github.com/kiddin9/op-packages.git
synced 2026-11-02 18:13:56 +08:00
⛄ Sync 2026-10-05 06:17:58
This commit is contained in:
github-actions[bot] committed
1 parent
c0e26fb987
commit
4f24db0fde
7 files changed
+1299
-3
No files matched your search
@@ -0,0 +1,609 @@
|
||||
'use strict';
|
||||
'require baseclass';
|
||||
|
||||
// ─── State ────────────────────────────────────────────────────────────────────
|
||||
let prev = {};
|
||||
let last_time = Date.now();
|
||||
let _pollAdded = false;
|
||||
let _container = null;
|
||||
|
||||
// Peak speeds per direction (bits/s)
|
||||
let peakRx = 0;
|
||||
let peakTx = 0;
|
||||
|
||||
// Previous speeds for trending arrows
|
||||
let lastRxSpeed = 0;
|
||||
let lastTxSpeed = 0;
|
||||
|
||||
// Sparkline history – last 30 samples (~60 s at 2 s poll)
|
||||
const SPARK_LEN = 30;
|
||||
let sparkRx = new Array(SPARK_LEN).fill(0);
|
||||
let sparkTx = new Array(SPARK_LEN).fill(0);
|
||||
|
||||
// ─── CSS Loader (theme-aware, no busy-poll) ───────────────────────────────────
|
||||
(function loadDynamicCSS() {
|
||||
let loadedCss = null;
|
||||
|
||||
function isDarkMode() {
|
||||
try {
|
||||
const bg = getComputedStyle(document.body).backgroundColor;
|
||||
if (!bg || bg === 'transparent') return false;
|
||||
const rgb = bg.match(/\d+/g);
|
||||
if (!rgb || rgb.length < 3) return false;
|
||||
const [r, g, b] = rgb.map(Number);
|
||||
return (r * 299 + g * 587 + b * 114) / 1000 < 100;
|
||||
} catch (_) { return false; }
|
||||
}
|
||||
|
||||
function applyCSS() {
|
||||
const file = isDarkMode() ? 'netstat_dark.css' : 'netstat.css';
|
||||
if (loadedCss === file) return;
|
||||
loadedCss = file;
|
||||
|
||||
document.querySelectorAll('link[data-netstat-css]').forEach(l => l.remove());
|
||||
|
||||
const link = document.createElement('link');
|
||||
link.rel = 'stylesheet';
|
||||
link.setAttribute('data-netstat-css', '1');
|
||||
link.href = '/luci-static/resources/netstat/' + file + '?t=' + Date.now();
|
||||
document.head.appendChild(link);
|
||||
}
|
||||
|
||||
requestAnimationFrame(() => setTimeout(applyCSS, 50));
|
||||
|
||||
if (window.matchMedia) {
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', applyCSS);
|
||||
}
|
||||
|
||||
const mo = new MutationObserver(applyCSS);
|
||||
const waitForBody = setInterval(() => {
|
||||
if (!document.body) return;
|
||||
clearInterval(waitForBody);
|
||||
mo.observe(document.body, { attributes: true, attributeFilter: ['style', 'class'] });
|
||||
applyCSS();
|
||||
}, 50);
|
||||
})();
|
||||
|
||||
// ─── Helpers ──────────────────────────────────────────────────────────────────
|
||||
function parseNetdev(raw) {
|
||||
const stats = {};
|
||||
for (const line of raw.split('\n')) {
|
||||
const m = line.trim().match(/^([^:]+):\s+(.*)$/);
|
||||
if (!m) continue;
|
||||
const vals = m[2].trim().split(/\s+/).map(v => parseInt(v) || 0);
|
||||
if (vals.length >= 9)
|
||||
stats[m[1].trim()] = { rx: vals[0], tx: vals[8] };
|
||||
}
|
||||
return stats;
|
||||
}
|
||||
|
||||
function getBestWAN(stats, preferred) {
|
||||
for (const i of preferred) if (stats[i]) return i;
|
||||
|
||||
const dynamic = Object.keys(stats).find(i =>
|
||||
/^(wwan|usb|ppp|lte|qmi|modem)/.test(i) && i.includes('_'));
|
||||
if (dynamic) return dynamic;
|
||||
|
||||
for (const i of ['pppoe-wan','lte0','usb0','wan','eth1','tun0','wg0'])
|
||||
if (stats[i]) return i;
|
||||
|
||||
return Object.keys(stats).find(k => k !== 'lo') || '';
|
||||
}
|
||||
|
||||
function formatRate(bps) {
|
||||
const units = ['Bps','Kbps','Mbps','Gbps'];
|
||||
let i = 0;
|
||||
while (bps >= 1000 && i < units.length - 1) { bps /= 1000; i++; }
|
||||
return { number: bps.toFixed(i > 0 ? 1 : 0), unit: units[i] + '/s' };
|
||||
}
|
||||
|
||||
function formatBytes(v) {
|
||||
if (v >= 1099511627776) return (v / 1099511627776).toFixed(2) + ' TB';
|
||||
if (v >= 1073741824) return (v / 1073741824).toFixed(2) + ' GB';
|
||||
if (v >= 1048576) return (v / 1048576).toFixed(2) + ' MB';
|
||||
if (v >= 1024) return (v / 1024).toFixed(2) + ' KB';
|
||||
return v + ' B';
|
||||
}
|
||||
|
||||
function formatUptime(sec) {
|
||||
const d = Math.floor(sec / 86400);
|
||||
const h = Math.floor((sec % 86400) / 3600);
|
||||
const m = Math.floor((sec % 3600) / 60);
|
||||
if (d > 0) return d + 'd ' + h + 'h';
|
||||
if (h > 0) return h + 'h ' + m + 'm';
|
||||
return m + 'm ' + (sec % 60) + 's';
|
||||
}
|
||||
|
||||
// trend arrow: +1 = rising, -1 = falling, 0 = stable
|
||||
function trendArrow(current, previous) {
|
||||
const ratio = previous > 0 ? current / previous : 1;
|
||||
if (ratio > 1.10) return { char: '▲', cls: 'ns-trend-up' };
|
||||
if (ratio < 0.90) return { char: '▼', cls: 'ns-trend-down' };
|
||||
return { char: '●', cls: 'ns-trend-flat' };
|
||||
}
|
||||
|
||||
// ─── Sparkline SVG ────────────────────────────────────────────────────────────
|
||||
function drawSparkline(values, colorVar) {
|
||||
const W = 90, H = 28;
|
||||
const max = Math.max(...values, 1);
|
||||
const step = W / (values.length - 1);
|
||||
|
||||
const points = values.map((v, i) => {
|
||||
const x = i * step;
|
||||
const y = H - (v / max) * (H - 2) - 1;
|
||||
return x.toFixed(1) + ',' + y.toFixed(1);
|
||||
}).join(' ');
|
||||
|
||||
// filled area path
|
||||
const areaPoints =
|
||||
'0,' + H + ' ' + points + ' ' + (W) + ',' + H;
|
||||
|
||||
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
||||
svg.setAttribute('width', W);
|
||||
svg.setAttribute('height', H);
|
||||
svg.setAttribute('viewBox', '0 0 ' + W + ' ' + H);
|
||||
svg.style.display = 'block';
|
||||
svg.style.overflow = 'visible';
|
||||
|
||||
const defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
|
||||
const grad = document.createElementNS('http://www.w3.org/2000/svg', 'linearGradient');
|
||||
grad.setAttribute('id', 'sg-' + colorVar.replace(/[^a-z]/gi,''));
|
||||
grad.setAttribute('x1', '0'); grad.setAttribute('y1', '0');
|
||||
grad.setAttribute('x2', '0'); grad.setAttribute('y2', '1');
|
||||
|
||||
const s1 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
|
||||
s1.setAttribute('offset', '0%');
|
||||
s1.setAttribute('stop-color', 'var(' + colorVar + ')');
|
||||
s1.setAttribute('stop-opacity', '0.35');
|
||||
const s2 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
|
||||
s2.setAttribute('offset', '100%');
|
||||
s2.setAttribute('stop-color', 'var(' + colorVar + ')');
|
||||
s2.setAttribute('stop-opacity', '0.03');
|
||||
|
||||
grad.appendChild(s1); grad.appendChild(s2);
|
||||
defs.appendChild(grad); svg.appendChild(defs);
|
||||
|
||||
const area = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
|
||||
area.setAttribute('points', areaPoints);
|
||||
area.setAttribute('fill', 'url(#sg-' + colorVar.replace(/[^a-z]/gi,'') + ')');
|
||||
svg.appendChild(area);
|
||||
|
||||
const line = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
|
||||
line.setAttribute('points', points);
|
||||
line.setAttribute('fill', 'none');
|
||||
line.setAttribute('stroke', 'var(' + colorVar + ')');
|
||||
line.setAttribute('stroke-width', '1.5');
|
||||
line.setAttribute('stroke-linejoin', 'round');
|
||||
line.setAttribute('stroke-linecap', 'round');
|
||||
svg.appendChild(line);
|
||||
|
||||
return svg;
|
||||
}
|
||||
|
||||
// Replace sparkline SVG inside a container (identified by class)
|
||||
function updateSparkline(container, cls, values, colorVar) {
|
||||
const box = container.querySelector('.' + cls);
|
||||
if (!box) return;
|
||||
const wrap = box.querySelector('.ns-spark');
|
||||
if (!wrap) return;
|
||||
wrap.innerHTML = '';
|
||||
wrap.appendChild(drawSparkline(values, colorVar));
|
||||
}
|
||||
|
||||
// ─── Fetch with timeout ───────────────────────────────────────────────────────
|
||||
function fetchWithTimeout(url, ms) {
|
||||
const ctrl = typeof AbortController !== 'undefined' ? new AbortController() : null;
|
||||
const tid = ctrl ? setTimeout(() => ctrl.abort(), ms) : null;
|
||||
return fetch(url, ctrl ? { signal: ctrl.signal } : {})
|
||||
.then(r => r.json())
|
||||
.finally(() => tid && clearTimeout(tid));
|
||||
}
|
||||
|
||||
// ─── DOM builders ─────────────────────────────────────────────────────────────
|
||||
function createRateBox(label, value, unit, extraClass, colorVar, sparkValues, peak) {
|
||||
const cls = 'netstat-box ' + extraClass;
|
||||
const peakFmt = formatRate(peak * 8);
|
||||
|
||||
const box = E('div', { class: cls }, [
|
||||
E('div', { class: 'ns-spark' }), // sparkline goes here
|
||||
E('div', { class: 'ns-rate-row' }, [
|
||||
E('div', { class: 'netstat-number' }, value),
|
||||
E('div', { class: 'netstat-unit' }, unit)
|
||||
]),
|
||||
E('div', { class: 'ns-peak' }, _('Peak') + ': ' + peakFmt.number + ' ' + peakFmt.unit),
|
||||
E('div', { class: 'netstat-label' }, label)
|
||||
]);
|
||||
|
||||
// draw initial sparkline
|
||||
const wrap = box.querySelector('.ns-spark');
|
||||
wrap.appendChild(drawSparkline(sparkValues, colorVar));
|
||||
|
||||
return box;
|
||||
}
|
||||
|
||||
function createStatBox(label, value, unit, extraClass) {
|
||||
const cls = 'netstat-box' + (extraClass ? ' ' + extraClass : '');
|
||||
const box = E('div', { class: cls }, [
|
||||
E('div', { class: 'ns-stat-value-row' }, [
|
||||
E('div', { class: 'netstat-number' }, value),
|
||||
unit ? E('div', { class: 'netstat-unit' }, unit) : null
|
||||
].filter(Boolean)),
|
||||
E('div', { class: 'netstat-label' }, label)
|
||||
]);
|
||||
return box;
|
||||
}
|
||||
|
||||
|
||||
function createStatusCard(status, ip) {
|
||||
const up = status === 'Connected';
|
||||
return E('div', { class: 'netstat-box netstat-center ' + (up ? 'is-up' : 'is-down') }, [
|
||||
E('div', { class: 'netstat-center-title' }, _('Internet')),
|
||||
E('div', { class: 'netstat-center-status' }, up ? _('Connected') : _('Disconnected')),
|
||||
E('div', { class: 'netstat-center-sep' }),
|
||||
E('div', { class: 'netstat-center-title' }, _('IP')),
|
||||
E('div', { class: 'netstat-center-ip' }, ip || 'N/A'),
|
||||
]);
|
||||
}
|
||||
|
||||
// ─── Inline SVG icons ─────────────────────────────────────────────────────────
|
||||
function svgIcon(path, color) {
|
||||
const ns = 'http://www.w3.org/2000/svg';
|
||||
const svg = document.createElementNS(ns, 'svg');
|
||||
svg.setAttribute('viewBox', '0 0 24 24');
|
||||
svg.setAttribute('width', '16');
|
||||
svg.setAttribute('height', '16');
|
||||
svg.setAttribute('fill', 'none');
|
||||
svg.setAttribute('stroke', color || 'currentColor');
|
||||
svg.setAttribute('stroke-width', '2');
|
||||
svg.setAttribute('stroke-linecap', 'round');
|
||||
svg.setAttribute('stroke-linejoin', 'round');
|
||||
svg.style.flexShrink = '0';
|
||||
svg.innerHTML = path;
|
||||
return svg;
|
||||
}
|
||||
|
||||
// clock icon
|
||||
function iconUptime() {
|
||||
return svgIcon('<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>', 'var(--ns-muted)');
|
||||
}
|
||||
// database/memory icon
|
||||
function iconMem() {
|
||||
return svgIcon('<ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5v14c0 1.66 4.03 3 9 3s9-1.34 9-3V5"/><path d="M3 12c0 1.66 4.03 3 9 3s9-1.34 9-3"/>', 'var(--ns-mem-color)');
|
||||
}
|
||||
// thermometer/temperature icon
|
||||
function iconTemp() {
|
||||
return svgIcon('<path d="M14 14.76V3.5a2.5 2.5 0 0 0-5 0v11.26a4.5 4.5 0 1 0 5 0z"/>', 'var(--ns-temp-color)');
|
||||
}
|
||||
// hard-drive/disk icon
|
||||
function iconDisk() {
|
||||
return svgIcon('<line x1="22" y1="12" x2="2" y2="12"/><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/><line x1="6" y1="16" x2="6.01" y2="16"/><line x1="10" y1="16" x2="10.01" y2="16"/>', 'var(--ns-disk-color)');
|
||||
}
|
||||
|
||||
// Pill-style bar: filled background + "used MB / total MB (pct%)" text overlay
|
||||
function makePillBar(pct, used, total, fillId, textId) {
|
||||
const clampedPct = Math.min(100, Math.max(0, pct));
|
||||
const fill = E('div', { class: 'ns-pill-fill', id: fillId });
|
||||
fill.style.width = clampedPct + '%';
|
||||
const label = E('span', { class: 'ns-pill-text', id: textId },
|
||||
used + ' / ' + total + ' (' + clampedPct + '%)');
|
||||
return E('div', { class: 'ns-pill-bar' }, [fill, label]);
|
||||
}
|
||||
|
||||
// Card 1: RAM + Storage pill bars
|
||||
function createInfoCard(memPct, memUsed, memTotal, diskPct, diskUsed, diskTotal) {
|
||||
const card = E('div', { class: 'netstat-box netstat-info-card' });
|
||||
|
||||
// RAM row
|
||||
const memRow = E('div', { class: 'ns-info-row' });
|
||||
memRow.appendChild(iconMem());
|
||||
const memBlock = E('div', { class: 'ns-info-block ns-info-block-grow' });
|
||||
memBlock.appendChild(E('div', { class: 'ns-info-tag' }, _('RAM')));
|
||||
memBlock.appendChild(makePillBar(memPct,
|
||||
memUsed + ' MB', memTotal + ' MB', 'ns-mem-bar', 'ns-mem-sub'));
|
||||
memRow.appendChild(memBlock);
|
||||
card.appendChild(memRow);
|
||||
|
||||
card.appendChild(E('div', { class: 'netstat-center-sep' }));
|
||||
|
||||
// Storage row
|
||||
const diskRow = E('div', { class: 'ns-info-row' });
|
||||
diskRow.appendChild(iconDisk());
|
||||
const diskBlock = E('div', { class: 'ns-info-block ns-info-block-grow' });
|
||||
diskBlock.appendChild(E('div', { class: 'ns-info-tag' }, _('STORAGE')));
|
||||
diskBlock.appendChild(makePillBar(diskPct,
|
||||
diskUsed + ' MB', diskTotal + ' MB', 'ns-disk-bar', 'ns-disk-sub'));
|
||||
diskRow.appendChild(diskBlock);
|
||||
card.appendChild(diskRow);
|
||||
|
||||
return card;
|
||||
}
|
||||
|
||||
// Card 2: CPU Temperature + Uptime
|
||||
function createTempCard(cpuTemp, uptime) {
|
||||
const card = E('div', { class: 'netstat-box netstat-info-card' });
|
||||
|
||||
// Temp row
|
||||
const tempRow = E('div', { class: 'ns-info-row' });
|
||||
tempRow.appendChild(iconTemp());
|
||||
const tempBlock = E('div', { class: 'ns-info-block ns-info-block-grow' });
|
||||
const tempVal = cpuTemp != null ? cpuTemp + '°C' : 'N/A';
|
||||
tempBlock.appendChild(E('div', { class: 'ns-info-value ns-temp-val', id: 'ns-temp-val' }, tempVal));
|
||||
tempBlock.appendChild(E('div', { class: 'ns-info-tag' }, _('CPU TEMP')));
|
||||
tempRow.appendChild(tempBlock);
|
||||
card.appendChild(tempRow);
|
||||
|
||||
card.appendChild(E('div', { class: 'netstat-center-sep' }));
|
||||
|
||||
// Uptime row
|
||||
const uptimeRow = E('div', { class: 'ns-info-row' });
|
||||
uptimeRow.appendChild(iconUptime());
|
||||
const uptimeBlock = E('div', { class: 'ns-info-block ns-info-block-grow' });
|
||||
uptimeBlock.appendChild(E('div', { class: 'ns-info-value', id: 'ns-uptime-val' }, uptime));
|
||||
uptimeBlock.appendChild(E('div', { class: 'ns-info-tag' }, _('UPTIME')));
|
||||
uptimeRow.appendChild(uptimeBlock);
|
||||
card.appendChild(uptimeRow);
|
||||
|
||||
return card;
|
||||
}
|
||||
|
||||
// ─── In-place DOM patch ───────────────────────────────────────────────────────
|
||||
function patchText(el, sel, val) {
|
||||
const n = el && el.querySelector(sel);
|
||||
if (n && n.textContent !== val) n.textContent = val;
|
||||
}
|
||||
|
||||
function updateContainer(container, data, dt) {
|
||||
const stats = data.stats || {};
|
||||
const preferred = data.preferred || [];
|
||||
const iface = getBestWAN(stats, preferred);
|
||||
const curr = stats[iface] || { rx: 0, tx: 0 };
|
||||
curr.rx = parseInt(curr.rx) || 0;
|
||||
curr.tx = parseInt(curr.tx) || 0;
|
||||
|
||||
const ps = prev[iface] || { rx: curr.rx, tx: curr.tx };
|
||||
const rxSpeed = Math.max(0, (curr.rx - ps.rx) / dt);
|
||||
const txSpeed = Math.max(0, (curr.tx - ps.tx) / dt);
|
||||
prev[iface] = { rx: curr.rx, tx: curr.tx };
|
||||
|
||||
// peaks
|
||||
if (rxSpeed > peakRx) peakRx = rxSpeed;
|
||||
if (txSpeed > peakTx) peakTx = txSpeed;
|
||||
|
||||
// sparkline ring buffers
|
||||
sparkRx.push(rxSpeed); if (sparkRx.length > SPARK_LEN) sparkRx.shift();
|
||||
sparkTx.push(txSpeed); if (sparkTx.length > SPARK_LEN) sparkTx.shift();
|
||||
|
||||
// trend
|
||||
const tRx = trendArrow(rxSpeed, lastRxSpeed);
|
||||
const tTx = trendArrow(txSpeed, lastTxSpeed);
|
||||
lastRxSpeed = rxSpeed;
|
||||
lastTxSpeed = txSpeed;
|
||||
|
||||
const rxRate = formatRate(rxSpeed * 8);
|
||||
const txRate = formatRate(txSpeed * 8);
|
||||
const totalRx = formatBytes(curr.rx).split(' ');
|
||||
const totalTx = formatBytes(curr.tx).split(' ');
|
||||
const peakRxFmt = formatRate(peakRx * 8);
|
||||
const peakTxFmt = formatRate(peakTx * 8);
|
||||
|
||||
const boxes = container.querySelectorAll('.netstat-box');
|
||||
if (boxes.length < 7) return false; // stale, rebuild
|
||||
|
||||
// download rate box
|
||||
patchText(container, '.is-download .netstat-number', rxRate.number);
|
||||
patchText(container, '.is-download .netstat-unit', rxRate.unit);
|
||||
patchText(container, '.is-download .ns-peak',
|
||||
_('Peak') + ': ' + peakRxFmt.number + ' ' + peakRxFmt.unit);
|
||||
|
||||
// trend on download
|
||||
const dlTrend = container.querySelector('.is-download .ns-trend');
|
||||
if (dlTrend) { dlTrend.textContent = tRx.char; dlTrend.className = 'ns-trend ' + tRx.cls; }
|
||||
|
||||
// upload rate box
|
||||
patchText(container, '.is-upload .netstat-number', txRate.number);
|
||||
patchText(container, '.is-upload .netstat-unit', txRate.unit);
|
||||
patchText(container, '.is-upload .ns-peak',
|
||||
_('Peak') + ': ' + peakTxFmt.number + ' ' + peakTxFmt.unit);
|
||||
|
||||
// trend on upload
|
||||
const ulTrend = container.querySelector('.is-upload .ns-trend');
|
||||
if (ulTrend) { ulTrend.textContent = tTx.char; ulTrend.className = 'ns-trend ' + tTx.cls; }
|
||||
|
||||
// sparklines
|
||||
updateSparkline(container, 'is-download', sparkRx, '--ns-dl-color');
|
||||
updateSparkline(container, 'is-upload', sparkTx, '--ns-ul-color');
|
||||
|
||||
// center status card
|
||||
const center = container.querySelector('.netstat-center');
|
||||
if (center) {
|
||||
const up = (data.status || '') === 'Connected';
|
||||
center.className = 'netstat-box netstat-center ' + (up ? 'is-up' : 'is-down');
|
||||
patchText(center, '.netstat-center-status', up ? _('Connected') : _('Disconnected'));
|
||||
patchText(center, '.netstat-center-ip', data.ip || 'N/A');
|
||||
}
|
||||
|
||||
// totals
|
||||
const totals = container.querySelectorAll('.is-total');
|
||||
if (totals[0]) {
|
||||
patchText(totals[0], '.netstat-number', totalRx[0]);
|
||||
patchText(totals[0], '.netstat-unit', totalRx[1] || '');
|
||||
}
|
||||
if (totals[1]) {
|
||||
patchText(totals[1], '.netstat-number', totalTx[0]);
|
||||
patchText(totals[1], '.netstat-unit', totalTx[1] || '');
|
||||
}
|
||||
|
||||
// uptime in status card
|
||||
patchText(container, '#ns-uptime-val', formatUptime(data.uptime || 0));
|
||||
|
||||
// temp
|
||||
const tempVal = data.cpu_temp != null ? data.cpu_temp + '°C' : 'N/A';
|
||||
patchText(container, '#ns-temp-val', tempVal);
|
||||
|
||||
// pill bar: update fill width + text label
|
||||
const memPct = data.mem_pct || 0;
|
||||
const diskPct = data.disk_pct || 0;
|
||||
|
||||
const memFill = container.querySelector('#ns-mem-bar');
|
||||
if (memFill) memFill.style.width = Math.min(100, Math.max(0, memPct)) + '%';
|
||||
patchText(container, '#ns-mem-sub',
|
||||
(data.mem_used || 0) + ' MB / ' + (data.mem_total || 0) + ' MB (' + memPct + '%)');
|
||||
|
||||
const diskFill = container.querySelector('#ns-disk-bar');
|
||||
if (diskFill) diskFill.style.width = Math.min(100, Math.max(0, diskPct)) + '%';
|
||||
patchText(container, '#ns-disk-sub',
|
||||
(data.disk_used || 0) + ' MB / ' + (data.disk_total || 0) + ' MB (' + diskPct + '%)');
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
// ─── Cached public IP (refreshed every 60 s, not on every 2 s poll) ──────────
|
||||
let _cachedIp = 'N/A';
|
||||
let _lastIpFetch = 0;
|
||||
const IP_REFRESH_MS = 300000;
|
||||
|
||||
function maybeRefreshIp() {
|
||||
const now = Date.now();
|
||||
if (now - _lastIpFetch < IP_REFRESH_MS) return;
|
||||
_lastIpFetch = now;
|
||||
// Full fetch (no ?fast=1) to get public IP; update cache on success
|
||||
fetchWithTimeout('/cgi-bin/luci/admin/tools/get_netdev_stats', 8000)
|
||||
.then(r => { if (r && r.ip && r.ip !== 'N/A') _cachedIp = r.ip; })
|
||||
.catch(() => {});
|
||||
}
|
||||
|
||||
// ─── Main baseclass ───────────────────────────────────────────────────────────
|
||||
return baseclass.extend({
|
||||
title: _(''),
|
||||
|
||||
load() {
|
||||
// Use ?fast=1 to skip slow public-IP APIs — response is near-instant
|
||||
return fetchWithTimeout('/cgi-bin/luci/admin/tools/get_netdev_stats?fast=1', 5000)
|
||||
.then(r => {
|
||||
// Seed the cached IP from the local WAN address on first load
|
||||
if (r && r.ip && r.ip !== 'N/A') _cachedIp = r.ip;
|
||||
return {
|
||||
stats: (r && r.stats) || {},
|
||||
ip: _cachedIp,
|
||||
status: (r && r.status) || 'Disconnected',
|
||||
uptime: (r && r.uptime) || 0,
|
||||
cpu_pct: (r && r.cpu_pct) || 0,
|
||||
cpu_temp: (r && r.cpu_temp) != null ? r.cpu_temp : null,
|
||||
mem_pct: (r && r.mem_pct) || 0,
|
||||
mem_used: (r && r.mem_used) || 0,
|
||||
mem_total: (r && r.mem_total) || 0,
|
||||
disk_pct: (r && r.disk_pct) || 0,
|
||||
disk_used: (r && r.disk_used) || 0,
|
||||
disk_total: (r && r.disk_total) || 0,
|
||||
preferred: (r && r.prefer_iface) ? [r.prefer_iface] : []
|
||||
};
|
||||
})
|
||||
.catch(() => ({ stats: {}, ip: 'N/A', status: 'Disconnected',
|
||||
uptime: 0, cpu_pct: 0, cpu_temp: null, mem_pct: 0, mem_used: 0, mem_total: 0,
|
||||
disk_pct: 0, disk_used: 0, disk_total: 0, preferred: [] }));
|
||||
},
|
||||
|
||||
render(data) {
|
||||
const now = Date.now();
|
||||
const dt = Math.max(0.1, (now - last_time) / 1000);
|
||||
last_time = now;
|
||||
|
||||
const stats = data.stats || {};
|
||||
const preferred = data.preferred || [];
|
||||
|
||||
if (!stats || typeof stats !== 'object' || Array.isArray(stats))
|
||||
return E('div', { style: 'padding:20px;text-align:center;color:#999;font-size:13px' },
|
||||
_('Loading network stats...'));
|
||||
|
||||
const iface = getBestWAN(stats, preferred);
|
||||
const curr = stats[iface] || { rx: 0, tx: 0 };
|
||||
curr.rx = parseInt(curr.rx) || 0;
|
||||
curr.tx = parseInt(curr.tx) || 0;
|
||||
|
||||
const ps = prev[iface] || { rx: curr.rx, tx: curr.tx };
|
||||
const rxSpeed = Math.max(0, (curr.rx - ps.rx) / dt);
|
||||
const txSpeed = Math.max(0, (curr.tx - ps.tx) / dt);
|
||||
prev[iface] = { rx: curr.rx, tx: curr.tx };
|
||||
|
||||
if (rxSpeed > peakRx) peakRx = rxSpeed;
|
||||
if (txSpeed > peakTx) peakTx = txSpeed;
|
||||
|
||||
sparkRx.push(rxSpeed); if (sparkRx.length > SPARK_LEN) sparkRx.shift();
|
||||
sparkTx.push(txSpeed); if (sparkTx.length > SPARK_LEN) sparkTx.shift();
|
||||
|
||||
const tRx = trendArrow(rxSpeed, lastRxSpeed);
|
||||
const tTx = trendArrow(txSpeed, lastTxSpeed);
|
||||
lastRxSpeed = rxSpeed;
|
||||
lastTxSpeed = txSpeed;
|
||||
|
||||
const rxRate = formatRate(rxSpeed * 8);
|
||||
const txRate = formatRate(txSpeed * 8);
|
||||
const totalRx = formatBytes(curr.rx).split(' ');
|
||||
const totalTx = formatBytes(curr.tx).split(' ');
|
||||
|
||||
// Build download box manually to inject trend badge
|
||||
const dlBox = createRateBox(_('download'), rxRate.number, rxRate.unit,
|
||||
'is-download', '--ns-dl-color', [...sparkRx], peakRx);
|
||||
const dlTrend = E('span', { class: 'ns-trend ' + tRx.cls }, tRx.char);
|
||||
dlBox.querySelector('.ns-rate-row').appendChild(dlTrend);
|
||||
|
||||
const ulBox = createRateBox(_('upload'), txRate.number, txRate.unit,
|
||||
'is-upload', '--ns-ul-color', [...sparkTx], peakTx);
|
||||
const ulTrend = E('span', { class: 'ns-trend ' + tTx.cls }, tTx.char);
|
||||
ulBox.querySelector('.ns-rate-row').appendChild(ulTrend);
|
||||
|
||||
// Desktop order: DOWNLOAD | UPLOAD | TEMP | INTERNET STATUS | DISK+RAM | DOWNLOADED | UPLOADED
|
||||
const row = E('div', { class: 'netstat-row' }, [
|
||||
dlBox,
|
||||
ulBox,
|
||||
createTempCard(data.cpu_temp != null ? data.cpu_temp : null,
|
||||
formatUptime(data.uptime || 0)),
|
||||
createStatusCard(data.status || 'Disconnected', data.ip),
|
||||
createInfoCard(data.mem_pct || 0, data.mem_used || 0, data.mem_total || 0,
|
||||
data.disk_pct || 0, data.disk_used || 0, data.disk_total || 0),
|
||||
createStatBox(_('downloaded'), totalRx[0], totalRx[1], 'is-total is-downloaded'),
|
||||
createStatBox(_('uploaded'), totalTx[0], totalTx[1], 'is-total is-uploaded'),
|
||||
]);
|
||||
|
||||
const container = E('div', { class: 'stats-grid netstat-wrap' }, row);
|
||||
_container = container;
|
||||
|
||||
if (!_pollAdded) {
|
||||
_pollAdded = true;
|
||||
L.Poll.add(() => {
|
||||
// Periodically refresh the public IP in the background (non-blocking)
|
||||
maybeRefreshIp();
|
||||
return fetchWithTimeout('/cgi-bin/luci/admin/tools/get_netdev_stats?fast=1', 5000)
|
||||
.then(r => {
|
||||
const now2 = Date.now();
|
||||
const dt2 = Math.max(0.1, (now2 - last_time) / 1000);
|
||||
last_time = now2;
|
||||
|
||||
// Update cached IP from local WAN if we got a valid one
|
||||
if (r && r.ip && r.ip !== 'N/A') _cachedIp = r.ip;
|
||||
|
||||
if (_container && _container.isConnected) {
|
||||
updateContainer(_container, {
|
||||
stats: (r && r.stats) || {},
|
||||
ip: _cachedIp,
|
||||
status: (r && r.status) || 'Disconnected',
|
||||
uptime: (r && r.uptime) || 0,
|
||||
cpu_pct: (r && r.cpu_pct) || 0,
|
||||
cpu_temp: (r && r.cpu_temp) != null ? r.cpu_temp : null,
|
||||
mem_pct: (r && r.mem_pct) || 0,
|
||||
mem_used: (r && r.mem_used) || 0,
|
||||
mem_total: (r && r.mem_total) || 0,
|
||||
disk_pct: (r && r.disk_pct) || 0,
|
||||
disk_used: (r && r.disk_used) || 0,
|
||||
disk_total: (r && r.disk_total) || 0,
|
||||
preferred: (r && r.prefer_iface) ? [r.prefer_iface] : []
|
||||
}, dt2);
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
}, 2);
|
||||
}
|
||||
|
||||
return container;
|
||||
}
|
||||
});
|
||||
Reference in new issue
Block a user