diff --git a/dashboard/src/components/GraphItem.vue b/dashboard/src/components/GraphItem.vue index e54ff1c9b..95ba3cad1 100644 --- a/dashboard/src/components/GraphItem.vue +++ b/dashboard/src/components/GraphItem.vue @@ -13,6 +13,7 @@ const graphNode = useTemplateRef('graphNode'); let graph = null; let liveRefreshIntervalId = null; +let yscaleUnit = null; const props = defineProps({ title: String, @@ -80,8 +81,12 @@ function createGraphOptions({ yscale, period }) { function transformData(data) { const x = data[1]*1000; // convert to msecs - // in non-memory case, for relative values like cpu, if null make it 0 - const y = props.yscale === 'memory' ? (data[0] / 1024 / 1024 / 1024).toFixed(2) : (data[0] || 0); + let y; + if (props.yscale === 'memory') { + y = yscaleUnit === 'GiB' ? (data[0] / 1024 / 1024 / 1024).toFixed(2) : (data[0] / 1024 / 1024).toFixed(2); + } else { // in non-memory case, for relative values like cpu, if null make it 0 + y = data[0] || 0; + } return { x, y }; } @@ -152,18 +157,19 @@ function onPeriodChanged() { }; } else if (props.yscale === 'memory') { const giB = 1024 * 1024 * 1024; - const roundedMemory = Math.ceil(props.memory.memory / giB) * giB; // we have to scale up so that the graph can show the data! - const roundedSwap = Math.ceil(props.memory.swap / giB) * giB; + const roundedMemoryGiB = Math.ceil(props.memory / giB); + yscaleUnit = roundedMemoryGiB === 1 ? 'MiB' : 'GiB'; + const roundedMemory = yscaleUnit === 'GiB' ? roundedMemoryGiB : roundedMemoryGiB * 1024; yscale = { type: 'linear', min: 0, - max: (roundedMemory + roundedSwap)/ giB, + max: roundedMemory, ticks: { - stepSize: 1, + stepSize: yscaleUnit === 'GiB' ? 1 : 256, autoSkip: true, // skip tick labels as needed autoSkipPadding: 20, // padding between ticks - callback: (value) => `${value} GiB`, + callback: (value) => `${value} ${yscaleUnit}`, maxTicksLimit: 8 // max tick labels to show }, beginAtZero: true, diff --git a/dashboard/src/components/SystemMetrics.vue b/dashboard/src/components/SystemMetrics.vue index 0cebe66f5..7e7fdcdbb 100644 --- a/dashboard/src/components/SystemMetrics.vue +++ b/dashboard/src/components/SystemMetrics.vue @@ -131,7 +131,7 @@ onUnmounted(async () => { yscale="memory" :dataset-labels="['Memory', 'Swap']" :dataset-colors="['#9ad0f5', '#ffb1c1']" - :memory="systemMemory" + :memory="systemMemory.memory + systemMemory.swap" > diff --git a/dashboard/src/components/app/Graphs.vue b/dashboard/src/components/app/Graphs.vue index 868b32d7f..53ef2d12a 100644 --- a/dashboard/src/components/app/Graphs.vue +++ b/dashboard/src/components/app/Graphs.vue @@ -39,7 +39,7 @@ const networkWriteTotal = ref(0); const blockReadTotal = ref(0); const blockWriteTotal = ref(0); -let systemMemory = {}; +const appMemory = app.memoryLimit || app.manifest.memoryLimit || 256*1024*1024; let systemCpus = {}; let metricStream = null; @@ -84,13 +84,7 @@ async function onPeriodChange() { } onMounted(async () => { - let error, result; - [error, result] = await systemModel.memory(); - if (error) return console.error(error); - - systemMemory = result; - - [error, result] = await systemModel.cpus(); + const [error, result] = await systemModel.cpus(); if (error) return console.error(error); systemCpus = result; @@ -124,12 +118,12 @@ onUnmounted(async () => {