system: add network and disk graph

dashboard/src/components/SystemMetrics.vue

@@ -10,6 +10,7 @@ import moment from 'moment-timezone';
 import { SingleSelect, Spinner } from 'pankow';
 import Section from './Section.vue';
 import SystemModel from '../models/SystemModel.js';
+import { prettyDecimalSize } from 'pankow/utils';
 
 const systemModel = SystemModel.create();
 
@@ -27,11 +28,21 @@ const busy = ref(false);
 const period = ref(0);
 const cpuGraphNode = useTemplateRef('cpuGraphNode');
 const memoryGraphNode = useTemplateRef('memoryGraphNode');
+const networkGraphNode = useTemplateRef('networkGraphNode');
+const diskGraphNode = useTemplateRef('diskGraphNode');
+
+const networkReadTotal = ref(0);
+const networkWriteTotal = ref(0);
+
+const blockReadTotal = ref(0);
+const blockWriteTotal = ref(0);
 
 let systemMemory = {};
 let systemCpus = {};
 let cpuGraph = null;
 let memoryGraph = null;
+let diskGraph = null;
+let networkGraph = null;
 let metricStream = null;
 
 const LIVE_REFRESH_INTERVAL_MSECS = 500;
@@ -44,12 +55,12 @@ function pruneGraphData(dataset, options) {
 }
 
 async function liveRefresh() {
-
   metricStream = await systemModel.getMetricStream(LIVE_REFRESH_INTERVAL_MSECS);
   metricStream.onerror = (error) => console.log('event stream error:', error);
   metricStream.onmessage = (message) => {
     const data = JSON.parse(message.data);
 
+    ///////////// CPU Graph
     if (data.cpu[0]) { // since cpu% is relative, value can be null if no previous value
       cpuGraph.data.datasets[0].data.push({
         x: data.cpu[1] * 1000, // cpuGraph.options.scales.x.max can be used for window edge, if we don't trust server timestamps . but using server timestamps handles network lags better
@@ -60,6 +71,7 @@ async function liveRefresh() {
       cpuGraph.update('none');
     }
 
+    ///////////// Memory Graph
     memoryGraph.data.datasets[0].data.push({
       x: data.memory[1] * 1000,
       y: (data.memory[0] / 1024 / 1024 / 1024).toFixed(2)
@@ -73,43 +85,127 @@ async function liveRefresh() {
     pruneGraphData(memoryGraph.data.datasets[1], memoryGraph.options);
 
     memoryGraph.update('none');
+
+    ///////////// Disk Graph
+    diskGraph.data.datasets[0].data.push({
+      x: data.blockReadRate[1] * 1000,
+      y: data.blockReadRate[0]
+    });
+    pruneGraphData(memoryGraph.data.datasets[0], memoryGraph.options);
+
+    diskGraph.data.datasets[1].data.push({
+      x: data.blockWriteRate[1] * 1000,
+      y: data.blockWriteRate[0]
+    });
+    pruneGraphData(diskGraph.data.datasets[1], diskGraph.options);
+
+    diskGraph.update('none');
+
+    blockReadTotal.value = prettyDecimalSize(data.blockReadTotal);
+    blockWriteTotal.value = prettyDecimalSize(data.blockWriteTotal);
+
+    ///////////// Network Graph
+    networkGraph.data.datasets[0].data.push({
+      x: data.networkReadRate[1] * 1000,
+      y: data.networkReadRate[0]
+    });
+    pruneGraphData(memoryGraph.data.datasets[0], memoryGraph.options);
+
+    networkGraph.data.datasets[1].data.push({
+      x: data.networkWriteRate[1] * 1000,
+      y: data.networkWriteRate[0]
+    });
+    pruneGraphData(networkGraph.data.datasets[1], networkGraph.options);
+
+    networkGraph.update('none');
+
+    networkReadTotal.value = prettyDecimalSize(data.networkReadTotal);
+    networkWriteTotal.value = prettyDecimalSize(data.networkWriteTotal);
+
   };
   // advances the time window by 500ms. this is independent of incoming data
   metricStream.intervalId = setInterval(function () {
-    cpuGraph.options.scales.x.min += LIVE_REFRESH_INTERVAL_MSECS;
+    for (const graph of [ cpuGraph, memoryGraph, diskGraph, networkGraph]) {
-    cpuGraph.options.scales.x.max += LIVE_REFRESH_INTERVAL_MSECS;
+      graph.options.scales.x.min += LIVE_REFRESH_INTERVAL_MSECS;
-    cpuGraph.update('none');
+      graph.options.scales.x.max += LIVE_REFRESH_INTERVAL_MSECS;
-
+      graph.update('none');
-    memoryGraph.options.scales.x.min += LIVE_REFRESH_INTERVAL_MSECS;
+    }
-    memoryGraph.options.scales.x.max += LIVE_REFRESH_INTERVAL_MSECS;
-    memoryGraph.update('none');
   }, LIVE_REFRESH_INTERVAL_MSECS);
 }
 
 async function getMetrics(hours) {
-  if (hours === 0) return { cpuData: [], memoryData: [], swapData: [] };
+  const metrics = {
+    cpu: [],
+    memory: [],
+    swap: [],
+    blockReadRate: [],
+    blockWriteRate: [],
+    networkReadRate: [],
+    networkWriteRate: [],
+
+    // these are just scalars and not timeseries
+    blockReadTotal: 0,
+    blockWriteTotal: 0,
+    networkReadTotal: 0,
+    networkWriteTotal: 0
+  };
+
+  if (hours === 0) return metrics; // empty result. values will come from stream and not graphite
 
   const [error, result] = await systemModel.getMetrics({ fromSecs: hours * 60 * 60, intervalSecs: 300 });
   if (error) return console.error(error);
 
   // time is converted to msecs . cpu is already scaled to cpu*100
-  const cpuData = result.cpu.map(v => { return { x: v[1]*1000, y: v[0] };});
+  metrics.cpu = result.cpu.map(v => { return { x: v[1]*1000, y: v[0] };});
 
-  const memoryData = result.memory.map(v => {
+  metrics.memory = result.memory.map(v => {
     return {
       x: v[1]*1000,
       y: (v[0] / 1024 / 1024 / 1024).toFixed(2)
     };
   });
 
-  const swapData = result.swap.map(v => {
+  metrics.swap = result.swap.map(v => {
     return {
       x: v[1]*1000,
       y: (v[0] / 1024 / 1024 / 1024).toFixed(2)
     };
   });
 
-  return { cpuData, memoryData, swapData };
+  metrics.blockReadRate = result.blockReadRate.map(v => {
+    return {
+      x: v[1]*1000,
+      y: v[0]
+    };
+  });
+
+  metrics.blockWriteRate = result.blockWriteRate.map(v => {
+    return {
+      x: v[1]*1000,
+      y: v[0]
+    };
+  });
+
+  metrics.networkReadRate = result.networkReadRate.map(v => {
+    return {
+      x: v[1]*1000,
+      y: v[0]
+    };
+  });
+
+  metrics.networkWriteRate = result.networkWriteRate.map(v => {
+    return {
+      x: v[1]*1000,
+      y: v[0]
+    };
+  });
+
+  metrics.networkReadTotal = result.networkReadTotal;
+  metrics.networkWriteTotal = result.networkWriteTotal;
+  metrics.blockReadTotal = result.blockReadTotal;
+  metrics.blockWriteTotal = result.blockWriteTota;
+
+  return metrics;
 }
 
 function createGraphOptions({ yscale, realtime }) {
@@ -158,16 +254,16 @@ function createGraphOptions({ yscale, realtime }) {
   };
 }
 
-async function refresh() {
+async function onPeriodChange() {
-  const { cpuData, memoryData, swapData } = await getMetrics(period.value);
+  const metrics = await getMetrics(period.value);
 
+  ///////////// CPU Graph
   const cpuGraphData = {
     datasets: [{
       label: 'CPU',
-      data: cpuData,
+      data: metrics.cpu,
       pointRadius: 0,
-      // https://www.chartjs.org/docs/latest/charts/line.html#line-styling
+      borderWidth: 1, // https://www.chartjs.org/docs/latest/charts/line.html#line-styling
-      borderWidth: 1,
       tension: 0.4,
       showLine: true,
       fill: true
@@ -194,6 +290,7 @@ async function refresh() {
     cpuGraph.update('none');
   }
 
+  ///////////// Memory Graph
   const giB = 1024 * 1024 * 1024;
   const roundedMemory = Math.ceil(systemMemory.memory / giB) * giB; // we have to scale up so that the graph can show the data!
   const roundedSwap = Math.ceil(systemMemory.swap / giB) * giB;
@@ -201,22 +298,20 @@ async function refresh() {
   const memoryGraphData = {
     datasets: [{
       label: 'RAM',
-      data: memoryData,
+      data: metrics.memory,
       stack: 'memory+swap',
       pointRadius: 0,
-      // https://www.chartjs.org/docs/latest/charts/line.html#line-styling
+      borderWidth: 1, // https://www.chartjs.org/docs/latest/charts/line.html#line-styling
-      borderWidth: 1,
       tension: 0.4,
       showLine: true,
       fill: true,
       color: '#9ad0f5'
     },{
       label: 'Swap',
-      data: swapData,
+      data: metrics.swap,
       stack: 'memory+swap',
       pointRadius: 0,
-      // https://www.chartjs.org/docs/latest/charts/line.html#line-styling
+      borderWidth: 1, // https://www.chartjs.org/docs/latest/charts/line.html#line-styling
-      borderWidth: 1,
       tension: 0.4,
       showLine: true,
       fill: true,
@@ -249,6 +344,107 @@ async function refresh() {
     memoryGraph.update('none');
   }
 
+  ///////////// Disk Graph
+  const diskGraphData = {
+    datasets: [{
+      label: 'Block Read',
+      data: metrics.blockReadRate,
+      stack: 'blockread',
+      pointRadius: 0,
+      borderWidth: 1, // https://www.chartjs.org/docs/latest/charts/line.html#line-styling
+      tension: 0.4,
+      showLine: true,
+      fill: true,
+      color: '#9ad0f5'
+    },{
+      label: 'Block Write',
+      data: metrics.blockWriteRate,
+      stack: 'blockwrite',
+      pointRadius: 0,
+      borderWidth: 1, // https://www.chartjs.org/docs/latest/charts/line.html#line-styling
+      tension: 0.4,
+      showLine: true,
+      fill: true,
+      color: '#ffb1c1'
+    }]
+  };
+
+  const diskYscale = {
+    type: 'linear',
+    min: 0,
+    max: 4218880,
+    ticks: {
+      callback: (value) => `${value} Kbps`,
+      maxTicksLimit: 6 // max tick labels to show
+    },
+    beginAtZero: true,
+    stacked: false,
+  };
+
+  const diskGraphOptions = createGraphOptions({ yscale: diskYscale, realtime: period.value === 0 });
+
+  if (!diskGraph) {
+    diskGraph = new Chart(diskGraphNode.value, { type: 'line', data: diskGraphData, options: diskGraphOptions });
+  } else {
+    diskGraph.data = diskGraphData;
+    diskGraph.options = diskGraphOptions;
+    diskGraph.update('none');
+  }
+
+  ///////////// Network Graph
+  const networkGraphData = {
+    datasets: [{
+      label: 'RX',
+      data: metrics.networkReadRate,
+      stack: 'networkread',
+      pointRadius: 0,
+      borderWidth: 1, // https://www.chartjs.org/docs/latest/charts/line.html#line-styling
+      tension: 0.4,
+      showLine: true,
+      fill: true,
+      color: '#9ad0f5'
+    },{
+      label: 'TX',
+      data: metrics.networkWriteRate,
+      stack: 'networkwrite',
+      pointRadius: 0,
+      borderWidth: 1, // https://www.chartjs.org/docs/latest/charts/line.html#line-styling
+      tension: 0.4,
+      showLine: true,
+      fill: true,
+      color: '#ffb1c1'
+    }]
+  };
+
+  const networkYscale = {
+    type: 'linear',
+    min: 0,
+    max: 4218880,
+    ticks: {
+      callback: (value) => `${value} Kbps`,
+      maxTicksLimit: 6 // max tick labels to show
+    },
+    beginAtZero: true,
+    stacked: false,
+  };
+
+  const networkGraphOptions = createGraphOptions({ yscale: networkYscale, realtime: period.value === 0 });
+
+  if (!networkGraph) {
+    networkGraph = new Chart(networkGraphNode.value, { type: 'line', data: networkGraphData, options: networkGraphOptions });
+  } else {
+    networkGraph.data = networkGraphData;
+    networkGraph.options = networkGraphOptions;
+    networkGraph.update('none');
+  }
+
+  ///////////// Scalars
+  networkReadTotal.value = prettyDecimalSize(metrics.networkReadTotal);
+  networkWriteTotal.value = prettyDecimalSize(metrics.networkWriteTotal);
+
+  blockReadTotal.value = prettyDecimalSize(metrics.blockReadTotal);
+  blockWriteTotal.value = prettyDecimalSize(metrics.blockWriteTotal);
+
   if (metricStream) {
     clearInterval(metricStream.intervalId);
     metricStream.close();
@@ -270,7 +466,7 @@ onMounted(async () => {
 
   systemCpus = result;
 
-  await refresh();
+  await onPeriodChange();
 });
 
 onUnmounted(async () => {
@@ -285,7 +481,7 @@ onUnmounted(async () => {
 <template>
   <Section :title="$t('system.graphs.title')">
     <template #header-buttons>
-      <SingleSelect @select="refresh()" v-model="period" :options="periods" option-key="id" option-label="label"/>
+      <SingleSelect @select="onPeriodChange()" v-model="period" :options="periods" option-key="id" option-label="label"/>
     </template>
 
     <div class="graphs">
@@ -300,6 +496,19 @@ onUnmounted(async () => {
       <div class="graph">
         <canvas v-show="!busy" ref="memoryGraphNode"></canvas>
       </div>
+
+      <label style="margin-top: 10px; display: block;">Disk I/O <span class="pull-right text-small">{{ $t('app.graphs.diskIOTotal', { read: blockReadTotal, write: blockWriteTotal }) }}</span></label>
+      <div style="text-align: center" v-if="busy"><Spinner/></div>
+      <div class="graph">
+        <canvas v-show="!busy" ref="diskGraphNode"></canvas>
+      </div>
+
+      <label style="margin-top: 10px; display: block;">Network I/O <span class="pull-right text-small">{{ $t('app.graphs.networkIOTotal', { inbound: networkReadTotal, outbound: networkWriteTotal }) }}</span></label>
+      <div style="text-align: center" v-if="busy"><Spinner/></div>
+      <div class="graph">
+        <canvas v-show="!busy" ref="networkGraphNode"></canvas>
+      </div>
+
     </div>
   </Section>
 </template>

src/metrics.js

@@ -398,21 +398,21 @@ async function getSystemStream(options) {
 
         oldMetrics = metrics;
 
-        const now = Date.now() / 1000;
+        const nowSecs = Date.now() / 1000; // to match graphite return value
         metricsStream.push(JSON.stringify({
-            cpu: [ cpuPercent, now ],
+            cpu: [ cpuPercent, nowSecs ],
-            memory: [ metrics.memoryUsed, now ],
+            memory: [ metrics.memoryUsed, nowSecs ],
-            swap: [ metrics.swapUsed, now ],
+            swap: [ metrics.swapUsed, nowSecs ],
 
-            blockReadRate: [ blockReadRate, now ],
+            blockReadRate: [ blockReadRate, nowSecs ],
-            blockWriteRate: [ blockWriteRate, now ],
+            blockWriteRate: [ blockWriteRate, nowSecs ],
-            blockReadTotal: [ metrics.blockRead, now ],
+            blockReadTotal: metrics.blockRead,
-            blockWriteTotal: [ metrics.blockWrite, now ],
+            blockWriteTotal: metrics.blockWrite,
 
-            networkReadRate: [ networkReadRate, now ],
+            networkReadRate: [ networkReadRate, nowSecs ],
-            networkWriteRate: [ networkWriteRate, now ],
+            networkWriteRate: [ networkWriteRate, nowSecs ],
-            networkReadTotal: [ metrics.networkRead, now ],
+            networkReadTotal: metrics.networkRead,
-            networkWriteTotal: [ metrics.networkWrite, now ],
+            networkWriteTotal: metrics.networkWrite,
         }));
     }, INTERVAL_MSECS);
 
@@ -448,20 +448,20 @@ async function getContainerStream(name, options) {
 
         oldMetrics = metrics;
 
-        const now = Date.now() / 1000;
+        const nowSecs = Date.now() / 1000; // to match graphite return value
         metricsStream.push(JSON.stringify({
-            cpu: [ cpuPercent, now ],
+            cpu: [ cpuPercent, nowSecs ],
-            memory: [ memoryUsed, now ],
+            memory: [ memoryUsed, nowSecs ],
 
-            blockReadRate: [ blockReadRate, now ],
+            blockReadRate: [ blockReadRate, nowSecs ],
-            blockWriteRate: [ blockWriteRate, now ],
+            blockWriteRate: [ blockWriteRate, nowSecs ],
-            blockReadTotal: [ metrics.blockRead, now ],
+            blockReadTotal: metrics.blockRead,
-            blockWriteTotal: [ metrics.blockWrite, now ],
+            blockWriteTotal: metrics.blockWrite,
 
-            networkReadRate: [ networkReadRate, now ],
+            networkReadRate: [ networkReadRate, nowSecs ],
-            networkWriteRate: [ networkWriteRate, now ],
+            networkWriteRate: [ networkWriteRate, nowSecs ],
-            networkReadTotal: [ metrics.networkRead, now ],
+            networkReadTotal: metrics.networkRead,
-            networkWriteTotal: [ metrics.networkWrite, now ],
+            networkWriteTotal: metrics.networkWrite,
 
             cpuCount: os.cpus().length
         }));