theater/tendrils
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add utilization percentage to hovercards with compact units

Browse Source 
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Ian Gulliver
2026-02-01 17:09:41 -08:00
parent 451196f162
commit 7b96f62f31
1 changed files with 20 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
static/js/ui.js
View File

@@ -48,6 +48,22 @@ export function buildClickableList(container, items, label, plainFormat, flowInf
});
}
function formatShortMbps(bytesPerSec) {
const mbps = (bytesPerSec * 8) / 1000000;
return Math.round(mbps) + 'Mb';
}
function formatShortKpps(pps) {
const kpps = pps / 1000;
return kpps.toFixed(1) + 'Kp';
}
function formatUtilization(bytesPerSec, speed) {
if (!speed) return '?%';
const util = (bytesPerSec * 8 / speed) * 100;
return util.toFixed(0) + '%';
}
export function buildLinkStats(container, portLabel, speed, errIn, errOut, rates) {
const plainLines = [];
if (portLabel) {
@@ -58,10 +74,12 @@ export function buildLinkStats(container, portLabel, speed, errIn, errOut, rates
container.appendChild(document.createTextNode('\n'));
addClickableValue(container, 'ERR', 'RX ' + errIn + ' / TX ' + errOut, plainLines);
if (rates) {
const rxUtil = formatUtilization(rates.rxBytes, speed);
const txUtil = formatUtilization(rates.txBytes, speed);
container.appendChild(document.createTextNode('\n'));
addClickableValue(container, 'RX', formatMbps(rates.rxBytes) + ' (' + formatPps(rates.rxPkts) + ')', plainLines);
addClickableValue(container, 'RX', rxUtil + ' ' + formatShortMbps(rates.rxBytes) + ' ' + formatShortKpps(rates.rxPkts), plainLines);
container.appendChild(document.createTextNode('\n'));
addClickableValue(container, 'TX', formatMbps(rates.txBytes) + ' (' + formatPps(rates.txPkts) + ')', plainLines);
addClickableValue(container, 'TX', txUtil + ' ' + formatShortMbps(rates.txBytes) + ' ' + formatShortKpps(rates.txPkts), plainLines);
}
container.addEventListener('click', (e) => {
e.stopPropagation();