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

Fix various display issues in metrics view

Browse Source
This commit is contained in:
Girish Ramakrishnan
2025-09-10 22:28:31 +02:00
parent 2f4766af9d
commit 7ff07804d0
3 changed files with 21 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/src/components/SystemMetrics.vue
+11 -11
View File
@@ -38,7 +38,7 @@ const networkWriteTotal = ref(0);
const blockReadTotal = ref(0);
const blockWriteTotal = ref(0);
const containers = ref([]);
const selectedContainers = ref([]);
const allContainers = ref([]);
// TODO: add redis containers here
@@ -58,7 +58,7 @@ let metricStream = null;
async function liveRefresh() {
const options = {
system: true,
appIds: containers.value.map(c => c.id),
appIds: selectedContainers.value.map(c => c.id),
serviceIds: []
};
metricStream = await systemModel.getMetricStream(options);
@@ -67,7 +67,7 @@ async function liveRefresh() {
const data = JSON.parse(message.data);
for (const [id, metric] of Object.entries(data)) {
const idx = id !== 'system' ? containers.value.findIndex(c => c.id === id) : containers.value.length;
const idx = id !== 'system' ? selectedContainers.value.findIndex(c => c.id === id) : selectedContainers.value.length;
if (cpuGraphItem.value) cpuGraphItem.value.pushData(idx, metric.cpu);
if (memoryGraphItem.value) memoryGraphItem.value.pushData(idx*2, metric.memory, metric.swap || []); // apps have no swap
@@ -98,7 +98,7 @@ function generateConsistentColors(n, saturation = 90, lightness = 90) {
}
function createDatasets() {
const colors = generateConsistentColors((containers.value.length+1)*2); // 1 for the 'system'
const colors = generateConsistentColors((selectedContainers.value.length+1)*2); // 1 for the 'system'
const datasets = {
cpu: [],
@@ -106,9 +106,9 @@ function createDatasets() {
disk: [],
network: [],
};
const appIds = containers.value.map(c => c.id);
const appIds = selectedContainers.value.map(c => c.id);
for (const [idx, id] of appIds.concat(['system']).entries()) { // live stream code depends on this concat order!
const prefix = id === 'system' ? 'System' : containers.value[idx].label;
const prefix = id === 'system' ? 'System' : selectedContainers.value[idx].label;
datasets.cpu.push({ label: `${prefix} CPU`, color: colors[idx*2], stack: `${prefix}-cpu`, data: [] });
datasets.memory.push({ label: `${prefix} Memory`, color: colors[idx*2], stack: `${prefix}-memswap`, data: [] });
@@ -137,13 +137,13 @@ async function rebuild() {
fromSecs: period.value.hours * 60 * 60,
intervalSecs: period.value.intervalSecs,
system: true,
appIds: containers.value.map(c => c.id),
appIds: selectedContainers.value.map(c => c.id),
serviceIds: []
};
const [error, metrics] = await systemModel.getMetrics(options);
if (error) return console.error(error);
const appIds = containers.value.map(c => c.id);
const appIds = selectedContainers.value.map(c => c.id);
for (const [idx, id] of appIds.concat(['system']).entries()) {
if (!metrics[id]) continue;
datasets.cpu[idx].data = metrics[id].cpu;
@@ -183,9 +183,9 @@ onMounted(async () => {
[error, result] = await appsModel.list();
if (error) return console.error(error);
allContainers.value = result.map(a => { return { label: a.label || a.fqdn, id: a.id }; });
allContainers.value.push({ separator: true });
if (result.length) allContainers.value.push({ separator: true });
allContainers.value.push(...serviceContainers);
containers.value = [];
selectedContainers.value = [];
busy.value = false;
await nextTick();
@@ -202,7 +202,7 @@ onUnmounted(async () => {
<template>
<Section :title="$t('system.graphs.title')">
<template #header-buttons>
<MultiSelect @select="rebuild()" v-model="containers" :options="allContainers" option-label="label" :search-threshold="20" select-all-label="Select All"/>
<MultiSelect @select="rebuild()" v-model="selectedContainers" :options="allContainers" option-label="label" :search-threshold="20" select-all-label="Select All"/>
<SingleSelect @select="rebuild()" v-model="period" :options="periods" option-label="label"/>
</template>