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

metrics: fix up app graphs after api changes

Browse Source
This commit is contained in:
Girish Ramakrishnan
2025-07-07 20:09:09 +02:00
parent 4cf1739604
commit 6b2e98b9be
5 changed files with 58 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/src/components/app/Graphs.vue
+51 -32
View File
@@ -43,44 +43,71 @@ const appMemory = app.memoryLimit || app.manifest.memoryLimit || 256*1024*1024;
let systemCpus = {};
let metricStream = null;
function createDatasets() {
const datasets = {
cpu: [{ label: 'CPU', color: '#9ad0f5', stack: 'cpu', data: [] }],
memory: [{ label: 'Memory', color: '#9ad0f5', stack: 'memory', data: [] }],
disk: [
{ label: 'Read', color: '#9ad0f5', stack: 'read', data: [] },
{ label: 'Write', color: '#ffb1c1', stack: 'write', data: [] }
],
network: [
{ label: 'RX', color: '#9ad0f5', stack: 'rx', data: [] },
{ label: 'TX', color: '#ffb1c1', stack: 'tx', data: [] }
],
};
return datasets;
}
async function liveRefresh() {
metricStream = await appsModel.getMetricStream(app.id);
metricStream.onerror = (error) => console.log('event stream error:', error);
metricStream.onmessage = (message) => {
const data = JSON.parse(message.data);
cpuGraphItem.value.pushData(data.cpu);
memoryGraphItem.value.pushData(data.memory);
diskGraphItem.value.pushData(data.blockReadRate, data.blockWriteRate);
networkGraphItem.value.pushData(data.networkReadRate, data.networkWriteRate);
cpuGraphItem.value.pushData(0, data[app.id].cpu);
memoryGraphItem.value.pushData(0, data[app.id].memory);
diskGraphItem.value.pushData(0, data[app.id].blockReadRate, data[app.id].blockWriteRate);
networkGraphItem.value.pushData(0, data[app.id].networkReadRate, data[app.id].networkWriteRate);
blockReadTotal.value = prettyDecimalSize(data.blockReadTotal);
blockWriteTotal.value = prettyDecimalSize(data.blockWriteTotal);
networkReadTotal.value = prettyDecimalSize(data.networkReadTotal);
networkWriteTotal.value = prettyDecimalSize(data.networkWriteTotal);
blockReadTotal.value = prettyDecimalSize(data[app.id].blockReadTotal);
blockWriteTotal.value = prettyDecimalSize(data[app.id].blockWriteTotal);
networkReadTotal.value = prettyDecimalSize(data[app.id].networkReadTotal);
networkWriteTotal.value = prettyDecimalSize(data[app.id].networkWriteTotal);
};
}
async function onPeriodChange() {
async function rebuild() {
if (metricStream) {
metricStream.close();
metricStream = null;
}
const datasets = createDatasets();
if (period.value.hours !== 0) {
const [error, metrics] = await appsModel.getMetrics(app.id, { fromSecs: period.value.hours * 60 * 60, intervalSecs: period.value.intervalSecs });
if (error) return console.error(error);
datasets.cpu[0].data = metrics[app.id].cpu;
datasets.memory[0].data = metrics[app.id].memory;
datasets.disk[0].data = metrics[app.id].blockReadRate;
datasets.disk[1].data = metrics[app.id].blockWriteRate;
datasets.network[0].data = metrics[app.id].networkReadRate;
datasets.network[1].data = metrics[app.id].networkWriteRate;
networkReadTotal.value = prettyDecimalSize(metrics.networkReadTotal);
networkWriteTotal.value = prettyDecimalSize(metrics.networkWriteTotal);
blockReadTotal.value = prettyDecimalSize(metrics.blockReadTotal);
blockWriteTotal.value = prettyDecimalSize(metrics.blockWriteTotal);
}
cpuGraphItem.value.setDatasets(datasets.cpu);
memoryGraphItem.value.setDatasets(datasets.memory);
diskGraphItem.value.setDatasets(datasets.disk);
networkGraphItem.value.setDatasets(datasets.network);
if (period.value.hours === 0) return await liveRefresh();
const [error, metrics] = await appsModel.getMetrics(app.id, { fromSecs: period.value.hours * 60 * 60, intervalSecs: period.value.intervalSecs });
if (error) return console.error(error);
cpuGraphItem.value.setData(metrics.cpu);
memoryGraphItem.value.setData(metrics.memory);
diskGraphItem.value.setData(metrics.blockReadRate, metrics.blockWriteRate);
networkGraphItem.value.setData(metrics.networkReadRate, metrics.networkWriteRate);
networkReadTotal.value = prettyDecimalSize(metrics.networkReadTotal);
networkWriteTotal.value = prettyDecimalSize(metrics.networkWriteTotal);
blockReadTotal.value = prettyDecimalSize(metrics.blockReadTotal);
blockWriteTotal.value = prettyDecimalSize(metrics.blockWriteTotal);
}
onMounted(async () => {
@@ -92,7 +119,7 @@ onMounted(async () => {
busy.value = false;
await nextTick();
await onPeriodChange();
await rebuild();
});
onUnmounted(async () => {
@@ -103,15 +130,13 @@ onUnmounted(async () => {
<template>
<div class="graphs" v-if="!busy">
<div style="text-align: right"><SingleSelect @select="onPeriodChange()" v-model="period" :options="periods" option-label="label"/></div>
<div style="text-align: right"><SingleSelect @select="rebuild()" v-model="period" :options="periods" option-label="label"/></div>
<GraphItem ref="cpuGraphItem"
:title="$t('system.cpuUsage.title')"
:subtext="`${app.cpuQuota}% of ${systemCpus.length} Core ${systemCpus[0].model}`"
:period="period"
yscale="cpu"
:dataset-labels="['CPU']"
:dataset-colors="['#9ad0f5']"
:cpu-count="systemCpus.length"
:high-mark="systemCpus.length * app.cpuQuota/100"
>
@@ -122,8 +147,6 @@ onUnmounted(async () => {
:subtext="`RAM: ${prettyBinarySize(app.memoryLimit || app.manifest.memoryLimit || 256*1024*1024)}`"
:period="period"
yscale="memory"
:dataset-labels="['Memory']"
:dataset-colors="['#9ad0f5']"
:memory="appMemory"
:high-mark="appMemory"
>
@@ -134,8 +157,6 @@ onUnmounted(async () => {
:subtext="$t('app.graphs.diskIOTotal', { read: blockReadTotal, write: blockWriteTotal })"
:period="period"
yscale="disk"
:dataset-labels="['Read', 'Write']"
:dataset-colors="['#9ad0f5', '#ffb1c1']"
>
</GraphItem>
@@ -144,8 +165,6 @@ onUnmounted(async () => {
:subtext="$t('app.graphs.networkIOTotal', { inbound: networkReadTotal, outbound: networkWriteTotal })"
:period="period"
yscale="network"
:dataset-labels="['RX', 'TX']"
:dataset-colors="['#9ad0f5', '#ffb1c1']"
>
</GraphItem>
</div>