112 lines
3.3 KiB
JavaScript
112 lines
3.3 KiB
JavaScript
let sumCompute, detailCompute, pgCompute, detailEncoder, pgEncoder, detailDecoder, pgDecoder, coreTemp, memoryUsed, pgMemory, procList;
|
|
|
|
window.addEventListener('load', () => {
|
|
loadElements();
|
|
setTimeout(tick, 2000);
|
|
});
|
|
|
|
function loadElements() {
|
|
sumCompute = document.getElementById("sum-compute");
|
|
detailCompute = document.getElementById("detail-compute");
|
|
pgCompute = document.getElementById("pg-compute");
|
|
|
|
detailEncoder = document.getElementById("detail-encoder");
|
|
pgEncoder = document.getElementById("pg-encoder");
|
|
|
|
detailDecoder = document.getElementById("detail-decoder");
|
|
pgDecoder = document.getElementById("pg-decoder");
|
|
|
|
coreTemp = document.getElementById("core-temp");
|
|
|
|
memoryUsed = document.getElementById("memory-used");
|
|
pgMemory = document.getElementById("pg-memory");
|
|
|
|
procList = document.getElementById("proc-list");
|
|
}
|
|
|
|
function tick() {
|
|
update();
|
|
setTimeout(tick, 2000);
|
|
}
|
|
|
|
function update() {
|
|
const jsonURL = location.href + "/json"
|
|
|
|
axios({
|
|
method: 'get',
|
|
url: jsonURL
|
|
}).then((res) => {
|
|
const gpu = res.data;
|
|
setCompute(gpu.usage.compute);
|
|
setEncoder(gpu.usage.encoder);
|
|
setDecoder(gpu.usage.decoder);
|
|
setCoreTemp(gpu.temperature);
|
|
setMemory(gpu.memory.used, gpu.memory.total);
|
|
setProcessList(gpu.processes);
|
|
})
|
|
}
|
|
|
|
function setCompute(value) {
|
|
const placeholder = `${value}%`;
|
|
sumCompute.innerText = placeholder;
|
|
detailCompute.innerText = placeholder;
|
|
pgCompute.style.width = placeholder;
|
|
pgCompute.setAttribute("aria-valuenow", value);
|
|
}
|
|
|
|
function setEncoder(value) {
|
|
const placeholder = `${value}%`;
|
|
detailEncoder.innerText = placeholder;
|
|
pgEncoder.style.width = placeholder;
|
|
pgEncoder.setAttribute("aria-valuenow", value);
|
|
}
|
|
|
|
function setDecoder(value) {
|
|
const placeholder = `${value}%`;
|
|
detailDecoder.innerText = placeholder;
|
|
pgDecoder.style.width = placeholder;
|
|
pgDecoder.setAttribute("aria-valuenow", value);
|
|
}
|
|
|
|
function setCoreTemp(value) {
|
|
const placeholder = `${value.Current}°C (min: ${value.Min}°C, max: ${value.Max}°C)`;
|
|
coreTemp.innerText = placeholder;
|
|
}
|
|
|
|
function setMemory(used, total) {
|
|
const placeholder = formatBytes(used);
|
|
const p = (used/total)*100;
|
|
memoryUsed.innerText = placeholder;
|
|
pgMemory.style.width = p+'%';
|
|
pgMemory.setAttribute("aria-valuenow", p);
|
|
}
|
|
|
|
function setProcessList(processes) {
|
|
procList.innerHTML = "";
|
|
for (const process of processes) {
|
|
const row = document.createElement("tr");
|
|
|
|
const pid = document.createElement("td");
|
|
pid.innerText = process.pid;
|
|
const type = document.createElement("td");
|
|
type.innerText = process.type;
|
|
const name = document.createElement("td");
|
|
name.innerText = process.commandLine;
|
|
const mem = document.createElement("td");
|
|
mem.innerText = formatBytes(process.memoryUsed);
|
|
row.append(pid, type, name, mem);
|
|
procList.append(row);
|
|
}
|
|
}
|
|
|
|
function formatBytes(bytes, decimals = 2) {
|
|
if (!+bytes) return '0 Bytes'
|
|
|
|
const k = 1024
|
|
const dm = decimals < 0 ? 0 : decimals
|
|
const sizes = ['B', 'KB', 'MB', 'GB']
|
|
|
|
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
|
|
|
return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))}${sizes[i]}`
|
|
} |