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

graphs: make live graphs better

Browse Source
This commit is contained in:
Girish Ramakrishnan
2025-05-22 18:45:05 +02:00
parent 89e3ce06fa
commit e682a77858
1 changed files with 27 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/src/components/SystemMetrics.vue
+27 -12
View File
@@ -43,6 +43,7 @@ const cpuGraphNode = useTemplateRef('cpuGraphNode');
const memoryGraphNode = useTemplateRef('memoryGraphNode');
let systemMemory = {};
let systemCpus = {};
let cpuGraph = null;
let memoryGraph = null;
let metricStream = null;
@@ -68,15 +69,28 @@ async function liveRefresh() {
};
}
async function getMetrics(fromSecs) {
if (fromSecs === 0) return { cpuLabels: [], cpuData: [], memoryLabels: [], memoryData: [], swapData: [] };
const [error, result] = await systemModel.getMetrics({ fromSecs: fromSecs * 60 * 60, intervalSecs: 300 });
if (error) return console.error(error);
const cpuLabels = result.cpu.map(v => v[1]*1000); // convert to msecs
const cpuData = result.cpu.map(v => v[0]); // already scaled to cpu*100
const memoryLabels = result.memory.map(v => v[1]*1000); // convert to msecs
const memoryData = result.memory.map(v => (v[0] / 1024 / 1024 / 1024).toFixed(2));
// assume that there is 1:1 timeline for swap and memory data
const swapData = result.swap.map(v => (v[0] / 1024 / 1024 / 1024).toFixed(2));
return { cpuLabels, cpuData, memoryLabels, memoryData, swapData };
}
async function refresh() {
busy.value = true;
const [error, result] = await systemModel.getMetrics({ fromSecs: (period.value || 0.1) * 60 * 60, intervalSecs: 300 });
if (error) return console.error(error);
const now = Date.now();
const cpuLabels = result.cpu.map(v => v[1]*1000); // convert to msecs
const cpuData = result.cpu.map(v => v[0]); // already scaled to cpu*100
const { cpuLabels, cpuData, memoryLabels, memoryData, swapData } = await getMetrics(period.value);
const cpuGraphData = {
labels: cpuLabels,
@@ -116,7 +130,7 @@ async function refresh() {
y: {
type: 'linear',
min: 0,
max: result.cpuCount * 100,
max: systemCpus.length * 100,
ticks: {
callback: (value) => `${value}%`,
maxTicksLimit: 6 // max tick labels to show
@@ -134,11 +148,6 @@ async function refresh() {
if (cpuGraph) cpuGraph.destroy();
cpuGraph = new Chart(cpuGraphNode.value, { type: 'line', data: cpuGraphData, options: cpuGraphOptions });
const memoryLabels = result.memory.map(v => v[1]*1000); // convert to msecs
const memoryData = result.memory.map(v => (v[0] / 1024 / 1024 / 1024).toFixed(2));
// assume that there is 1:1 timeline for swap and memory data
const swapData = result.swap.map(v => (v[0] / 1024 / 1024 / 1024).toFixed(2));
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;
@@ -227,11 +236,17 @@ async function refresh() {
}
onMounted(async () => {
const [error, result] = await systemModel.memory();
let error, result;
[error, result] = await systemModel.memory();
if (error) return console.error(error);
systemMemory = result;
[error, result] = await systemModel.cpus();
if (error) return console.error(error);
systemCpus = result;
await refresh();
});