jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

system: add network and disk graph

Browse Source
This commit is contained in:
Girish Ramakrishnan
2025-07-01 22:32:59 +02:00
parent 846986987d
commit 4a7aa032c2
2 changed files with 258 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/src/components/SystemMetrics.vue
+235 -26
View File
@@ -10,6 +10,7 @@ import moment from 'moment-timezone';
import { SingleSelect, Spinner } from 'pankow';
import Section from './Section.vue';
import SystemModel from '../models/SystemModel.js';
import { prettyDecimalSize } from 'pankow/utils';
const systemModel = SystemModel.create();
@@ -27,11 +28,21 @@ const busy = ref(false);
const period = ref(0);
const cpuGraphNode = useTemplateRef('cpuGraphNode');
const memoryGraphNode = useTemplateRef('memoryGraphNode');
const networkGraphNode = useTemplateRef('networkGraphNode');
const diskGraphNode = useTemplateRef('diskGraphNode');
const networkReadTotal = ref(0);
const networkWriteTotal = ref(0);
const blockReadTotal = ref(0);
const blockWriteTotal = ref(0);
let systemMemory = {};
let systemCpus = {};
let cpuGraph = null;
let memoryGraph = null;
let diskGraph = null;
let networkGraph = null;
let metricStream = null;
const LIVE_REFRESH_INTERVAL_MSECS = 500;
@@ -44,12 +55,12 @@ function pruneGraphData(dataset, options) {
}
async function liveRefresh() {
metricStream = await systemModel.getMetricStream(LIVE_REFRESH_INTERVAL_MSECS);
metricStream.onerror = (error) => console.log('event stream error:', error);
metricStream.onmessage = (message) => {
const data = JSON.parse(message.data);
///////////// CPU Graph
if (data.cpu[0]) { // since cpu% is relative, value can be null if no previous value
cpuGraph.data.datasets[0].data.push({
x: data.cpu[1] * 1000, // cpuGraph.options.scales.x.max can be used for window edge, if we don't trust server timestamps . but using server timestamps handles network lags better
@@ -60,6 +71,7 @@ async function liveRefresh() {
cpuGraph.update('none');
}
///////////// Memory Graph
memoryGraph.data.datasets[0].data.push({
x: data.memory[1] * 1000,
y: (data.memory[0] / 1024 / 1024 / 1024).toFixed(2)
@@ -73,43 +85,127 @@ async function liveRefresh() {
pruneGraphData(memoryGraph.data.datasets[1], memoryGraph.options);
memoryGraph.update('none');
///////////// Disk Graph
diskGraph.data.datasets[0].data.push({
x: data.blockReadRate[1] * 1000,
y: data.blockReadRate[0]
});
pruneGraphData(memoryGraph.data.datasets[0], memoryGraph.options);
diskGraph.data.datasets[1].data.push({
x: data.blockWriteRate[1] * 1000,
y: data.blockWriteRate[0]
});
pruneGraphData(diskGraph.data.datasets[1], diskGraph.options);
diskGraph.update('none');
blockReadTotal.value = prettyDecimalSize(data.blockReadTotal);
blockWriteTotal.value = prettyDecimalSize(data.blockWriteTotal);
///////////// Network Graph
networkGraph.data.datasets[0].data.push({
x: data.networkReadRate[1] * 1000,
y: data.networkReadRate[0]
});
pruneGraphData(memoryGraph.data.datasets[0], memoryGraph.options);
networkGraph.data.datasets[1].data.push({
x: data.networkWriteRate[1] * 1000,
y: data.networkWriteRate[0]
});
pruneGraphData(networkGraph.data.datasets[1], networkGraph.options);
networkGraph.update('none');
networkReadTotal.value = prettyDecimalSize(data.networkReadTotal);
networkWriteTotal.value = prettyDecimalSize(data.networkWriteTotal);
};
// advances the time window by 500ms. this is independent of incoming data
metricStream.intervalId = setInterval(function () {
cpuGraph.options.scales.x.min += LIVE_REFRESH_INTERVAL_MSECS;
cpuGraph.options.scales.x.max += LIVE_REFRESH_INTERVAL_MSECS;
cpuGraph.update('none');
memoryGraph.options.scales.x.min += LIVE_REFRESH_INTERVAL_MSECS;
memoryGraph.options.scales.x.max += LIVE_REFRESH_INTERVAL_MSECS;
memoryGraph.update('none');
for (const graph of [ cpuGraph, memoryGraph, diskGraph, networkGraph]) {
graph.options.scales.x.min += LIVE_REFRESH_INTERVAL_MSECS;
graph.options.scales.x.max += LIVE_REFRESH_INTERVAL_MSECS;
graph.update('none');
}
}, LIVE_REFRESH_INTERVAL_MSECS);
}
async function getMetrics(hours) {
if (hours === 0) return { cpuData: [], memoryData: [], swapData: [] };
const metrics = {
cpu: [],
memory: [],
swap: [],
blockReadRate: [],
blockWriteRate: [],
networkReadRate: [],
networkWriteRate: [],
// these are just scalars and not timeseries
blockReadTotal: 0,
blockWriteTotal: 0,
networkReadTotal: 0,
networkWriteTotal: 0
};
if (hours === 0) return metrics; // empty result. values will come from stream and not graphite
const [error, result] = await systemModel.getMetrics({ fromSecs: hours * 60 * 60, intervalSecs: 300 });
if (error) return console.error(error);
// time is converted to msecs . cpu is already scaled to cpu*100
const cpuData = result.cpu.map(v => { return { x: v[1]*1000, y: v[0] };});
metrics.cpu = result.cpu.map(v => { return { x: v[1]*1000, y: v[0] };});
const memoryData = result.memory.map(v => {
metrics.memory = result.memory.map(v => {
return {
x: v[1]*1000,
y: (v[0] / 1024 / 1024 / 1024).toFixed(2)
};
});
const swapData = result.swap.map(v => {
metrics.swap = result.swap.map(v => {
return {
x: v[1]*1000,
y: (v[0] / 1024 / 1024 / 1024).toFixed(2)
};
});
return { cpuData, memoryData, swapData };
metrics.blockReadRate = result.blockReadRate.map(v => {
return {
x: v[1]*1000,
y: v[0]
};
});
metrics.blockWriteRate = result.blockWriteRate.map(v => {
return {
x: v[1]*1000,
y: v[0]
};
});
metrics.networkReadRate = result.networkReadRate.map(v => {
return {
x: v[1]*1000,
y: v[0]
};
});
metrics.networkWriteRate = result.networkWriteRate.map(v => {
return {
x: v[1]*1000,
y: v[0]
};
});
metrics.networkReadTotal = result.networkReadTotal;
metrics.networkWriteTotal = result.networkWriteTotal;
metrics.blockReadTotal = result.blockReadTotal;
metrics.blockWriteTotal = result.blockWriteTota;
return metrics;
}
function createGraphOptions({ yscale, realtime }) {
@@ -158,16 +254,16 @@ function createGraphOptions({ yscale, realtime }) {
};
}
async function refresh() {
const { cpuData, memoryData, swapData } = await getMetrics(period.value);
async function onPeriodChange() {
const metrics = await getMetrics(period.value);
///////////// CPU Graph
const cpuGraphData = {
datasets: [{
label: 'CPU',
data: cpuData,
data: metrics.cpu,
pointRadius: 0,
// https://www.chartjs.org/docs/latest/charts/line.html#line-styling
borderWidth: 1,
borderWidth: 1, // https://www.chartjs.org/docs/latest/charts/line.html#line-styling
tension: 0.4,
showLine: true,
fill: true
@@ -194,6 +290,7 @@ async function refresh() {
cpuGraph.update('none');
}
///////////// Memory Graph
const giB = 1024 * 1024 * 1024;
const roundedMemory = Math.ceil(systemMemory.memory / giB) * giB; // we have to scale up so that the graph can show the data!
const roundedSwap = Math.ceil(systemMemory.swap / giB) * giB;
@@ -201,22 +298,20 @@ async function refresh() {
const memoryGraphData = {
datasets: [{
label: 'RAM',
data: memoryData,
data: metrics.memory,
stack: 'memory+swap',
pointRadius: 0,
// https://www.chartjs.org/docs/latest/charts/line.html#line-styling
borderWidth: 1,
borderWidth: 1, // https://www.chartjs.org/docs/latest/charts/line.html#line-styling
tension: 0.4,
showLine: true,
fill: true,
color: '#9ad0f5'
},{
label: 'Swap',
data: swapData,
data: metrics.swap,
stack: 'memory+swap',
pointRadius: 0,
// https://www.chartjs.org/docs/latest/charts/line.html#line-styling
borderWidth: 1,
borderWidth: 1, // https://www.chartjs.org/docs/latest/charts/line.html#line-styling
tension: 0.4,
showLine: true,
fill: true,
@@ -249,6 +344,107 @@ async function refresh() {
memoryGraph.update('none');
}
///////////// Disk Graph
const diskGraphData = {
datasets: [{
label: 'Block Read',
data: metrics.blockReadRate,
stack: 'blockread',
pointRadius: 0,
borderWidth: 1, // https://www.chartjs.org/docs/latest/charts/line.html#line-styling
tension: 0.4,
showLine: true,
fill: true,
color: '#9ad0f5'
},{
label: 'Block Write',
data: metrics.blockWriteRate,
stack: 'blockwrite',
pointRadius: 0,
borderWidth: 1, // https://www.chartjs.org/docs/latest/charts/line.html#line-styling
tension: 0.4,
showLine: true,
fill: true,
color: '#ffb1c1'
}]
};
const diskYscale = {
type: 'linear',
min: 0,
max: 4218880,
ticks: {
callback: (value) => `${value} Kbps`,
maxTicksLimit: 6 // max tick labels to show
},
beginAtZero: true,
stacked: false,
};
const diskGraphOptions = createGraphOptions({ yscale: diskYscale, realtime: period.value === 0 });
if (!diskGraph) {
diskGraph = new Chart(diskGraphNode.value, { type: 'line', data: diskGraphData, options: diskGraphOptions });
} else {
diskGraph.data = diskGraphData;
diskGraph.options = diskGraphOptions;
diskGraph.update('none');
}
///////////// Network Graph
const networkGraphData = {
datasets: [{
label: 'RX',
data: metrics.networkReadRate,
stack: 'networkread',
pointRadius: 0,
borderWidth: 1, // https://www.chartjs.org/docs/latest/charts/line.html#line-styling
tension: 0.4,
showLine: true,
fill: true,
color: '#9ad0f5'
},{
label: 'TX',
data: metrics.networkWriteRate,
stack: 'networkwrite',
pointRadius: 0,
borderWidth: 1, // https://www.chartjs.org/docs/latest/charts/line.html#line-styling
tension: 0.4,
showLine: true,
fill: true,
color: '#ffb1c1'
}]
};
const networkYscale = {
type: 'linear',
min: 0,
max: 4218880,
ticks: {
callback: (value) => `${value} Kbps`,
maxTicksLimit: 6 // max tick labels to show
},
beginAtZero: true,
stacked: false,
};
const networkGraphOptions = createGraphOptions({ yscale: networkYscale, realtime: period.value === 0 });
if (!networkGraph) {
networkGraph = new Chart(networkGraphNode.value, { type: 'line', data: networkGraphData, options: networkGraphOptions });
} else {
networkGraph.data = networkGraphData;
networkGraph.options = networkGraphOptions;
networkGraph.update('none');
}
///////////// Scalars
networkReadTotal.value = prettyDecimalSize(metrics.networkReadTotal);
networkWriteTotal.value = prettyDecimalSize(metrics.networkWriteTotal);
blockReadTotal.value = prettyDecimalSize(metrics.blockReadTotal);
blockWriteTotal.value = prettyDecimalSize(metrics.blockWriteTotal);
if (metricStream) {
clearInterval(metricStream.intervalId);
metricStream.close();
@@ -270,7 +466,7 @@ onMounted(async () => {
systemCpus = result;
await refresh();
await onPeriodChange();
});
onUnmounted(async () => {
@@ -285,7 +481,7 @@ onUnmounted(async () => {
<template>
<Section :title="$t('system.graphs.title')">
<template #header-buttons>
<SingleSelect @select="refresh()" v-model="period" :options="periods" option-key="id" option-label="label"/>
<SingleSelect @select="onPeriodChange()" v-model="period" :options="periods" option-key="id" option-label="label"/>
</template>
<div class="graphs">
@@ -300,6 +496,19 @@ onUnmounted(async () => {
<div class="graph">
<canvas v-show="!busy" ref="memoryGraphNode"></canvas>
</div>
<label style="margin-top: 10px; display: block;">Disk I/O <span class="pull-right text-small">{{ $t('app.graphs.diskIOTotal', { read: blockReadTotal, write: blockWriteTotal }) }}</span></label>
<div style="text-align: center" v-if="busy"><Spinner/></div>
<div class="graph">
<canvas v-show="!busy" ref="diskGraphNode"></canvas>
</div>
<label style="margin-top: 10px; display: block;">Network I/O <span class="pull-right text-small">{{ $t('app.graphs.networkIOTotal', { inbound: networkReadTotal, outbound: networkWriteTotal }) }}</span></label>
<div style="text-align: center" v-if="busy"><Spinner/></div>
<div class="graph">
<canvas v-show="!busy" ref="networkGraphNode"></canvas>
</div>
</div>
</Section>
</template>