diff --git a/dashboard/src/components/CpuUsage.vue b/dashboard/src/components/CpuUsage.vue index 740d33167..6c3888794 100644 --- a/dashboard/src/components/CpuUsage.vue +++ b/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 () => {