Add experimental live cpu graph

dashboard/src/components/CpuUsage.vue

@@ -14,6 +14,7 @@ import SystemModel from '../models/SystemModel.js';
 const systemModel = SystemModel.create();
 
 function trKeyFromPeriod(period) {
+  if (period === 0) return 'app.graphs.period.live';
   if (period === 6) return 'app.graphs.period.6h';
   if (period === 12) return 'app.graphs.period.12h';
   if (period === 24) return 'app.graphs.period.24h';
@@ -24,6 +25,7 @@ function trKeyFromPeriod(period) {
 }
 
 const periods = [
+  { id: 0,     label: t(trKeyFromPeriod(0)) },
   { id: 6,     label: t(trKeyFromPeriod(6)) },
   { id: 12,    label: t(trKeyFromPeriod(12)) },
   { id: 24,    label: t(trKeyFromPeriod(24)) },
@@ -37,10 +39,38 @@ const busy = ref(true);
 
 let gGraph = null;
 
+let gLiveDataPoints = {};
+
+async function liveRefresh() {
+  // stop and clear
+  if (period.value !== 0) return gLiveDataPoints = {};
+
+  const [error, result] = await systemModel.graphs({ fromSecs: 60, intervalSecs: 300 });
+  if (error) return console.error(error);
+
+  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);
+}
+
 async function refresh() {
   busy.value = true;
 
-  const [error, result] = await systemModel.graphs({ fromSecs: period.value * 60 * 60, intervalSecs: 300 });
+  const [error, result] = await systemModel.graphs({ fromSecs: (period.value || 0.1) * 60 * 60, intervalSecs: 300 });
   if (error) return console.error(error);
 
   const labels = result.cpu.map(v => {
@@ -98,6 +128,8 @@ async function refresh() {
   });
 
   busy.value = false;
+
+  if (period.value === 0) liveRefresh();
 }
 
 onMounted(async () => {