metrics: make the memory y-unit scale more flexible

system memory is in GiB. app memory is usually in MiB

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,

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"
         >
       </GraphItem>
 

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 () => {
 
       <GraphItem ref="memoryGraphItem"
         title="Memory"
-        :subtext="`RAM: ${prettyBinarySize(app.memoryLimit || 256*1024*1024)}`"
+        :subtext="`RAM: ${prettyBinarySize(app.memoryLimit || app.manifest.memoryLimit || 256*1024*1024)}`"
         :period="period"
         yscale="memory"
         :dataset-labels="['Memory']"
         :dataset-colors="['#9ad0f5']"
-        :memory="systemMemory"
+        :memory="appMemory"
         >
       </GraphItem>