gilles/go2rtc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(index.html): implement system info update handling

Browse Source 
- add timer for periodic updates of system information
- enhance renderInfo function to handle unsupported usage
- improve updateInfo function to manage historical data updates
This commit is contained in:
Sergey Krashevich
2026-02-13 15:34:40 +03:00
parent cfc9c86a66
commit 8d329fea2e
1 changed files with 43 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
www/index.html
+43 -19
View File
@@ -153,6 +153,7 @@
const graphWidth = 36; const graphWidth = 36;
const graphHeight = 8; const graphHeight = 8;
const infoUpdateInterval = window.SYSTEM_INFO_UPDATE_INTERVAL_MS ?? 2000; const infoUpdateInterval = window.SYSTEM_INFO_UPDATE_INTERVAL_MS ?? 2000;
let infoUpdateTimer = null;
function toNumber(value) { function toNumber(value) {
const number = Number(value); const number = Number(value);
@@ -201,19 +202,23 @@
return text + ' '.repeat(Math.max(0, width - text.length)); return text + ' '.repeat(Math.max(0, width - text.length));
} }
function renderInfo(data, cpuUsage, memUsage, memUsed, memTotal) { function renderInfo(data, cpuUsage, memUsage, memUsed, memTotal, isUsageUnsupported) {
const cpuLines = renderAsciiGraphLines(cpuHistory); const detailsLines = [];
const memLines = renderAsciiGraphLines(memHistory); if (isUsageUnsupported) {
const graphLines = []; detailsLines.push('System metrics are not supported on this platform (CPU and MEM usage are 0).');
const graphBlockWidth = graphWidth + 2; // borders } else {
const cpuTitle = `CPU ${cpuUsage.toFixed(1)}%`; const cpuLines = renderAsciiGraphLines(cpuHistory);
const memTitle = `MEM ${memUsage.toFixed(1)}% (${formatBytes(memUsed)} / ${formatBytes(memTotal)})`; const memLines = renderAsciiGraphLines(memHistory);
const graphBlockWidth = graphWidth + 2; // borders
const cpuTitle = `CPU ${cpuUsage.toFixed(1)}%`;
const memTitle = `MEM ${memUsage.toFixed(1)}% (${formatBytes(memUsed)} / ${formatBytes(memTotal)})`;
graphLines.push( detailsLines.push(
`${padRight(cpuTitle, graphBlockWidth)} ${padRight(memTitle, graphBlockWidth)}` `${padRight(cpuTitle, graphBlockWidth)} ${padRight(memTitle, graphBlockWidth)}`
); );
for (let i = 0; i < cpuLines.length; i++) { for (let i = 0; i < cpuLines.length; i++) {
graphLines.push(`${cpuLines[i]} ${memLines[i]}`); detailsLines.push(`${cpuLines[i]} ${memLines[i]}`);
}
} }
const lines = [ const lines = [
@@ -221,30 +226,49 @@
`pid: ${data.pid ?? '-'}`, `pid: ${data.pid ?? '-'}`,
`config: ${data.config_path ?? '-'}`, `config: ${data.config_path ?? '-'}`,
'', '',
...graphLines, ...detailsLines,
]; ];
info.textContent = lines.join('\n'); info.textContent = lines.join('\n');
} }
function startInfoUpdates() {
if (infoUpdateTimer !== null) return;
infoUpdateTimer = setInterval(updateInfo, infoUpdateInterval);
}
function stopInfoUpdates() {
if (infoUpdateTimer === null) return;
clearInterval(infoUpdateTimer);
infoUpdateTimer = null;
}
function updateInfo() { function updateInfo() {
fetch(infoURL, {cache: 'no-cache'}).then(r => r.json()).then(data => { return fetch(infoURL, {cache: 'no-cache'}).then(r => r.json()).then(data => {
const cpuUsage = clampPercent(data.system?.cpu_usage); const cpuUsage = clampPercent(data.system?.cpu_usage);
const memUsed = toNumber(data.system?.mem_used); const memUsed = toNumber(data.system?.mem_used);
const memTotal = toNumber(data.system?.mem_total); const memTotal = toNumber(data.system?.mem_total);
const memUsage = memTotal > 0 ? clampPercent((memUsed * 100) / memTotal) : 0; const memUsage = memTotal > 0 ? clampPercent((memUsed * 100) / memTotal) : 0;
const isUsageUnsupported = cpuUsage === 0 && memUsage === 0;
pushHistory(cpuHistory, cpuUsage); if (!isUsageUnsupported) {
pushHistory(memHistory, memUsage); pushHistory(cpuHistory, cpuUsage);
renderInfo(data, cpuUsage, memUsage, memUsed, memTotal); pushHistory(memHistory, memUsage);
} else {
stopInfoUpdates();
}
renderInfo(data, cpuUsage, memUsage, memUsed, memTotal, isUsageUnsupported);
return !isUsageUnsupported;
}).catch(error => { }).catch(error => {
if (!info.textContent) { if (!info.textContent) {
info.textContent = `Can't load system info: ${error.message}`; info.textContent = `Can't load system info: ${error.message}`;
} }
return true;
}); });
} }
updateInfo(); updateInfo().then(isSupported => {
setInterval(updateInfo, infoUpdateInterval); if (isSupported) startInfoUpdates();
});
reload(); reload();
</script> </script>