metrics: add stream api for system info

dashboard/src/components/CpuUsage.vue

@@ -38,33 +38,25 @@ const period = ref(6);
 const busy = ref(true);
 
 let gGraph = null;
-
-let gLiveDataPoints = {};
+let gMetricStream = null;
 
 async function liveRefresh() {
-  // stop and clear
-  if (period.value !== 0) return gLiveDataPoints = {};
+  gMetricStream = await systemModel.getMetricStream();
+  gMetricStream.onerror = (error) => console.log('event stream error:', error);
+  gMetricStream.onmessage = (message) => {
+    const data = JSON.parse(message.data);
+    if (data.cpu[0]) return; // value can be null if no previous value
+    gGraph.data.labels.push(moment(data.cpu[1]*1000).format('hh:mm'));
+    gGraph.data.datasets[0].data.push(data.cpu[0]);
 
-  const [error, result] = await systemModel.getMetrics({ fromSecs: 60, intervalSecs: 300 });
-  if (error) return console.error(error);
+    // Limit the number of data points to keep the chart readable
+    if (gGraph.data.datasets[0].data.length > 40) {
+      gGraph.data.labels.shift();
+      gGraph.data.datasets[0].data.shift();
+    }
 
-  for (const v of result.cpu) {
-    if (gLiveDataPoints[v[1]]) continue;
-
-    gLiveDataPoints[v[1]] = v[0];
-    gGraph.data.labels.push(moment(v[1]*1000).format('hh:mm'));
-    gGraph.data.datasets[0].data.push(v[0]);
-  }
-
-  // Limit the number of data points to keep the chart readable
-  if (gGraph.data.datasets[0].data.length > 40) {
-    gGraph.data.labels.shift();
-    gGraph.data.datasets[0].data.shift();
-  }
-
-  gGraph.update();
-
-  setTimeout(liveRefresh, 2000);
+    gGraph.update();
+  };
 }
 
 async function refresh() {
@@ -79,6 +71,10 @@ async function refresh() {
 
   const data = result.cpu.map(v => v[0]); // already scaled to cpu*100
 
+  if (gMetricStream) {
+    gMetricStream.close();
+    gMetricStream = null;
+  }
   if (gGraph) gGraph.destroy();
   gGraph = new Chart(graph.value, {
     type: 'line',