graphs: show swap

dashboard/src/components/SystemMetrics.vue

@@ -34,7 +34,7 @@ const periods = [
 ];
 
 const busy = ref(false);
-const period = ref(6);
+const period = ref(0);
 const cpuGraphNode = useTemplateRef('cpuGraphNode');
 const memoryGraphNode = useTemplateRef('memoryGraphNode');
 
@@ -56,11 +56,11 @@ async function liveRefresh() {
       cpuGraph.update('none');
     }
 
-    if (data.memory[0]) {
-      memoryGraph.data.labels.push(moment(data.memory[1]*1000).format('hh:mm'));
-      memoryGraph.data.datasets[0].data.push((data.memory[0] / 1024 / 1024 / 1024).toFixed(2));
-      memoryGraph.update('none');
-    }
+    memoryGraph.data.labels.push(moment(data.memory[1]*1000).format('hh:mm'));
+    memoryGraph.data.datasets[0].data.push((data.memory[0] / 1024 / 1024 / 1024).toFixed(2));
+    memoryGraph.data.datasets[1].data.push((data.swap[0] / 1024 / 1024 / 1024).toFixed(2) + 2);
+
+    memoryGraph.update('none');
   };
 }
 
@@ -106,9 +106,7 @@ async function refresh() {
       },
       y: {
         ticks: {
-          callback: (value) => {
-            return `${value}%`;
-          },
+          callback: (value) => `${value}%`,
           maxTicksLimit: 6 // max tick labels to show
         },
         min: 0,
@@ -126,7 +124,6 @@ async function refresh() {
   if (cpuGraph) cpuGraph.destroy();
   cpuGraph = new Chart(cpuGraphNode.value, { type: 'line', data: cpuGraphData, options: cpuGraphOptions });
 
-  // memory
   const memoryLabels = result.memory.map(v => {
     return moment(v[1]*1000).format('hh:mm');
   });
@@ -135,28 +132,49 @@ async function refresh() {
     return (v[0] / 1024 / 1024 / 1024).toFixed(2);
   });
 
+  const swapData = result.swap.map(v => { // assume that there is 1:1 timeline for swap and memory
+    return (v[0] / 1024 / 1024 / 1024).toFixed(2);
+  });
+
   const giB = 1024 * 1024 * 1024;
   const quarterGiB = 0.25 * giB;
   const roundedMemory = Math.round(systemMemory.memory / quarterGiB) * quarterGiB;
-  const roundedMemoryGiB = (roundedMemory / giB).toFixed(2);
+  const roundedSwap = Math.round(systemMemory.swap / quarterGiB) * quarterGiB;
 
   const memoryGraphData = {
     labels: memoryLabels,
     datasets: [{
-      label: 'Memory',
+      label: 'RAM',
       data: memoryData,
+      stack: 'memory+swap',
       pointRadius: 0,
       // https://www.chartjs.org/docs/latest/charts/line.html#line-styling
       borderWidth: 1,
       tension: 0.4,
       showLine: true,
-      fill: true
+      fill: true,
+      color: '#9ad0f5'
+    },{
+      label: 'Swap',
+      data: swapData,
+      stack: 'memory+swap',
+      pointRadius: 0,
+      // https://www.chartjs.org/docs/latest/charts/line.html#line-styling
+      borderWidth: 1,
+      tension: 0.4,
+      showLine: true,
+      fill: true,
+      color: '#ffb1c1'
     }]
   };
 
   const memoryGraphOptions = {
     plugins: {
-      legend: false
+      legend: {
+        display: true,
+        position: 'bottom',
+        align: 'center'
+      }
     },
     scales: {
       x: {
@@ -169,14 +187,18 @@ async function refresh() {
       },
       y: {
         ticks: {
-          callback: (value) => {
-            return `${value} GiB`;
+          callback: (value) => `${value} GiB`,
+          color: (value /* ,index, ticks */) => {
+            const tickValue = parseFloat(value['tick']['value']);
+            console.log(value);
+            return ((tickValue * 1024 * 1024 * 1024) > roundedMemory) ? '#ff7d98' : '#46a9ec';
           },
           maxTicksLimit: 6 // max tick labels to show
         },
         min: 0,
-        max: roundedMemoryGiB,
+        max: ((roundedMemory + roundedSwap)/ giB).toFixed(2), // string
         beginAtZero: true,
+        stacked: true,
       }
     },
     interaction: {