igpu updates
This commit is contained in:
devdatt
parent
de6caee5b6
commit
70631342f4
|
|
@ -20,11 +20,6 @@ include 'header.php'; ?>
|
||||||
<div class="chart-wrap"><canvas id="ramChart"></canvas></div>
|
<div class="chart-wrap"><canvas id="ramChart"></canvas></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="card">
|
|
||||||
<h3>Intel iGPU Engines (%)</h3>
|
|
||||||
<div class="chart-wrap"><canvas id="gpuChart"></canvas></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<h3>Network (KB/s)</h3>
|
<h3>Network (KB/s)</h3>
|
||||||
<div class="chart-wrap"><canvas id="netChart"></canvas></div>
|
<div class="chart-wrap"><canvas id="netChart"></canvas></div>
|
||||||
|
|
@ -35,6 +30,11 @@ include 'header.php'; ?>
|
||||||
<div class="chart-wrap"><canvas id="diskChart"></canvas></div>
|
<div class="chart-wrap"><canvas id="diskChart"></canvas></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h3>Intel iGPU Engines (%)</h3>
|
||||||
|
<div class="chart-wrap"><canvas id="gpuChart"></canvas></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="margin-top:12px;color:#9fb2d6;display:flex;justify-content:space-between;">
|
<div style="margin-top:12px;color:#9fb2d6;display:flex;justify-content:space-between;">
|
||||||
|
|
@ -52,142 +52,234 @@ include 'header.php'; ?>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
const POLL_MS = 1000;
|
const POLL_MS = 1000;
|
||||||
const JSON_URL = "metrics.json";
|
const JSON_URL = "metrics.json";
|
||||||
const toKB = v => Math.round(v/1024);
|
const toKB = v => Math.round(v / 1024);
|
||||||
|
|
||||||
/* CPU */
|
/* CPU */
|
||||||
const cpuChart = new Chart(document.getElementById('cpuChart'),{
|
const cpuChart = new Chart(document.getElementById('cpuChart'), {
|
||||||
type:'line',
|
type: 'line',
|
||||||
data:{labels:[],datasets:[{label:'CPU %',data:[],tension:0.2}]},
|
data: {
|
||||||
options:{responsive:true,maintainAspectRatio:false,scales:{y:{min:0,max:100}}}
|
labels: [],
|
||||||
});
|
datasets: [{
|
||||||
|
label: 'CPU %',
|
||||||
/* RAM */
|
data: [],
|
||||||
const ramChart = new Chart(document.getElementById('ramChart'),{
|
tension: 0.2
|
||||||
type:'line',
|
}]
|
||||||
data:{labels:[],datasets:[{label:'RAM %',data:[],tension:0.2}]},
|
},
|
||||||
options:{responsive:true,maintainAspectRatio:false,scales:{y:{min:0,max:100}}}
|
options: {
|
||||||
});
|
responsive: true,
|
||||||
|
maintainAspectRatio: false,
|
||||||
/* GPU multi-engine */
|
scales: {
|
||||||
const gpuChart = new Chart(document.getElementById('gpuChart'),{
|
y: {
|
||||||
type:'line',
|
min: 0,
|
||||||
data:{
|
max: 100
|
||||||
labels:[],
|
}
|
||||||
datasets:[
|
|
||||||
{label:'Total',data:[],tension:0.2},
|
|
||||||
{label:'Video',data:[],tension:0.2},
|
|
||||||
{label:'Render',data:[],tension:0.2},
|
|
||||||
{label:'Blitter',data:[],tension:0.2},
|
|
||||||
{label:'Enhance',data:[],tension:0.2}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
options:{
|
|
||||||
responsive:true,
|
|
||||||
maintainAspectRatio:false,
|
|
||||||
scales:{y:{min:0,max:100}}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
/* Network */
|
|
||||||
const netChart = new Chart(document.getElementById('netChart'),{
|
|
||||||
type:'line',
|
|
||||||
data:{
|
|
||||||
labels:[],
|
|
||||||
datasets:[
|
|
||||||
{label:'Net In (KB/s)',data:[],tension:0.2},
|
|
||||||
{label:'Net Out (KB/s)',data:[],tension:0.2}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
options:{responsive:true,maintainAspectRatio:false,scales:{y:{beginAtZero:true}}}
|
|
||||||
});
|
|
||||||
|
|
||||||
/* Disk */
|
|
||||||
const diskChart = new Chart(document.getElementById('diskChart'),{
|
|
||||||
type:'line',
|
|
||||||
data:{
|
|
||||||
labels:[],
|
|
||||||
datasets:[
|
|
||||||
{label:'Disk Read (KB/s)',data:[],tension:0.2},
|
|
||||||
{label:'Disk Write (KB/s)',data:[],tension:0.2},
|
|
||||||
{label:'Disk %',data:[],yAxisID:'percent',tension:0.2}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
options:{
|
|
||||||
responsive:true,
|
|
||||||
maintainAspectRatio:false,
|
|
||||||
scales:{
|
|
||||||
y:{position:'left',beginAtZero:true},
|
|
||||||
percent:{
|
|
||||||
position:'right',
|
|
||||||
min:0,
|
|
||||||
max:100,
|
|
||||||
grid:{display:false},
|
|
||||||
ticks:{callback:v=>v+'%'}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
});
|
||||||
});
|
|
||||||
|
|
||||||
async function update(){
|
/* RAM */
|
||||||
try{
|
const ramChart = new Chart(document.getElementById('ramChart'), {
|
||||||
const res = await fetch(JSON_URL+"?_="+Date.now(),{cache:'no-store'});
|
type: 'line',
|
||||||
if(!res.ok) throw new Error(res.status);
|
data: {
|
||||||
const j = await res.json();
|
labels: [],
|
||||||
|
datasets: [{
|
||||||
const labels = j.timestamps.map(t=>new Date(t).toLocaleTimeString());
|
label: 'RAM %',
|
||||||
|
data: [],
|
||||||
/* CPU */
|
tension: 0.2
|
||||||
cpuChart.data.labels=labels;
|
}]
|
||||||
cpuChart.data.datasets[0].data=j.cpu_percent;
|
},
|
||||||
|
options: {
|
||||||
/* RAM */
|
responsive: true,
|
||||||
ramChart.data.labels=labels;
|
maintainAspectRatio: false,
|
||||||
ramChart.data.datasets[0].data=j.ram_percent;
|
scales: {
|
||||||
|
y: {
|
||||||
/* GPU */
|
min: 0,
|
||||||
gpuChart.data.labels=labels;
|
max: 100
|
||||||
gpuChart.data.datasets[0].data=j.gpu_total;
|
}
|
||||||
gpuChart.data.datasets[1].data=j.gpu_video;
|
}
|
||||||
gpuChart.data.datasets[2].data=j.gpu_render;
|
|
||||||
gpuChart.data.datasets[3].data=j.gpu_blitter;
|
|
||||||
gpuChart.data.datasets[4].data=j.gpu_videoenhance;
|
|
||||||
|
|
||||||
/* NET */
|
|
||||||
netChart.data.labels=labels;
|
|
||||||
netChart.data.datasets[0].data=j.net_in_Bps.map(toKB);
|
|
||||||
netChart.data.datasets[1].data=j.net_out_Bps.map(toKB);
|
|
||||||
|
|
||||||
/* DISK */
|
|
||||||
diskChart.data.labels=labels;
|
|
||||||
diskChart.data.datasets[0].data=j.disk_read_Bps.map(toKB);
|
|
||||||
diskChart.data.datasets[1].data=j.disk_write_Bps.map(toKB);
|
|
||||||
diskChart.data.datasets[2].data=j.disk_percent;
|
|
||||||
|
|
||||||
cpuChart.update();
|
|
||||||
ramChart.update();
|
|
||||||
gpuChart.update();
|
|
||||||
netChart.update();
|
|
||||||
diskChart.update();
|
|
||||||
|
|
||||||
const last=labels.length-1;
|
|
||||||
if(last>=0){
|
|
||||||
lastUpdate.textContent=labels[last];
|
|
||||||
lastCpu.textContent=j.cpu_percent[last];
|
|
||||||
lastRam.textContent=j.ram_percent[last];
|
|
||||||
lastGpu.textContent=j.gpu_total[last];
|
|
||||||
lastIn.textContent=toKB(j.net_in_Bps[last]);
|
|
||||||
lastOut.textContent=toKB(j.net_out_Bps[last]);
|
|
||||||
}
|
}
|
||||||
|
});
|
||||||
|
|
||||||
}catch(e){
|
/* GPU multi-engine */
|
||||||
console.error("metrics fetch error",e);
|
const gpuChart = new Chart(document.getElementById('gpuChart'), {
|
||||||
|
type: 'line',
|
||||||
|
data: {
|
||||||
|
labels: [],
|
||||||
|
datasets: [{
|
||||||
|
label: 'Total',
|
||||||
|
data: [],
|
||||||
|
tension: 0.2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Video',
|
||||||
|
data: [],
|
||||||
|
tension: 0.2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Render',
|
||||||
|
data: [],
|
||||||
|
tension: 0.2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Blitter',
|
||||||
|
data: [],
|
||||||
|
tension: 0.2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Enhance',
|
||||||
|
data: [],
|
||||||
|
tension: 0.2
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
responsive: true,
|
||||||
|
maintainAspectRatio: false,
|
||||||
|
scales: {
|
||||||
|
y: {
|
||||||
|
min: 0,
|
||||||
|
max: 100
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
/* Network */
|
||||||
|
const netChart = new Chart(document.getElementById('netChart'), {
|
||||||
|
type: 'line',
|
||||||
|
data: {
|
||||||
|
labels: [],
|
||||||
|
datasets: [{
|
||||||
|
label: 'Net In (KB/s)',
|
||||||
|
data: [],
|
||||||
|
tension: 0.2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Net Out (KB/s)',
|
||||||
|
data: [],
|
||||||
|
tension: 0.2
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
responsive: true,
|
||||||
|
maintainAspectRatio: false,
|
||||||
|
scales: {
|
||||||
|
y: {
|
||||||
|
beginAtZero: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
/* Disk */
|
||||||
|
const diskChart = new Chart(document.getElementById('diskChart'), {
|
||||||
|
type: 'line',
|
||||||
|
data: {
|
||||||
|
labels: [],
|
||||||
|
datasets: [{
|
||||||
|
label: 'Disk Read (KB/s)',
|
||||||
|
data: [],
|
||||||
|
tension: 0.2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Disk Write (KB/s)',
|
||||||
|
data: [],
|
||||||
|
tension: 0.2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Disk %',
|
||||||
|
data: [],
|
||||||
|
yAxisID: 'percent',
|
||||||
|
tension: 0.2
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
responsive: true,
|
||||||
|
maintainAspectRatio: false,
|
||||||
|
scales: {
|
||||||
|
y: {
|
||||||
|
position: 'left',
|
||||||
|
beginAtZero: true
|
||||||
|
},
|
||||||
|
percent: {
|
||||||
|
position: 'right',
|
||||||
|
min: 0,
|
||||||
|
max: 100,
|
||||||
|
grid: {
|
||||||
|
display: false
|
||||||
|
},
|
||||||
|
ticks: {
|
||||||
|
callback: v => v + '%'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
async function update() {
|
||||||
|
try {
|
||||||
|
const res = await fetch(JSON_URL + "?_=" + Date.now(), {
|
||||||
|
cache: 'no-store'
|
||||||
|
});
|
||||||
|
if (!res.ok) throw new Error(res.status);
|
||||||
|
const j = await res.json();
|
||||||
|
|
||||||
|
const labels = j.timestamps.map(t => new Date(t).toLocaleTimeString());
|
||||||
|
|
||||||
|
/* CPU */
|
||||||
|
cpuChart.data.labels = labels;
|
||||||
|
cpuChart.data.datasets[0].data = j.cpu_percent;
|
||||||
|
|
||||||
|
/* RAM */
|
||||||
|
ramChart.data.labels = labels;
|
||||||
|
ramChart.data.datasets[0].data = j.ram_percent;
|
||||||
|
|
||||||
|
/* GPU */
|
||||||
|
gpuChart.data.labels = labels;
|
||||||
|
gpuChart.data.datasets[0].data = j.gpu_total;
|
||||||
|
gpuChart.data.datasets[1].data = j.gpu_video;
|
||||||
|
gpuChart.data.datasets[2].data = j.gpu_render;
|
||||||
|
gpuChart.data.datasets[3].data = j.gpu_blitter;
|
||||||
|
gpuChart.data.datasets[4].data = j.gpu_videoenhance;
|
||||||
|
|
||||||
|
/* NET */
|
||||||
|
netChart.data.labels = labels;
|
||||||
|
netChart.data.datasets[0].data = j.net_in_Bps.map(toKB);
|
||||||
|
netChart.data.datasets[1].data = j.net_out_Bps.map(toKB);
|
||||||
|
|
||||||
|
/* DISK */
|
||||||
|
diskChart.data.labels = labels;
|
||||||
|
diskChart.data.datasets[0].data = j.disk_read_Bps.map(toKB);
|
||||||
|
diskChart.data.datasets[1].data = j.disk_write_Bps.map(toKB);
|
||||||
|
diskChart.data.datasets[2].data = j.disk_percent;
|
||||||
|
|
||||||
|
cpuChart.update();
|
||||||
|
ramChart.update();
|
||||||
|
gpuChart.update();
|
||||||
|
netChart.update();
|
||||||
|
diskChart.update();
|
||||||
|
|
||||||
|
const last = labels.length - 1;
|
||||||
|
if (last >= 0) {
|
||||||
|
lastUpdate.textContent = labels[last];
|
||||||
|
lastCpu.textContent = j.cpu_percent[last];
|
||||||
|
lastRam.textContent = j.ram_percent[last];
|
||||||
|
lastGpu.textContent = j.gpu_total[last];
|
||||||
|
lastIn.textContent = toKB(j.net_in_Bps[last]);
|
||||||
|
lastOut.textContent = toKB(j.net_out_Bps[last]);
|
||||||
|
}
|
||||||
|
|
||||||
|
} catch (e) {
|
||||||
|
console.error("metrics fetch error", e);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
setInterval(update,POLL_MS);
|
setInterval(update, POLL_MS);
|
||||||
update();
|
update();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<?php include 'footer.php'; ?>
|
<?php include 'footer.php'; ?>
|
||||||
Loading…
Reference in New Issue