diff --git a/dashboard/src/components/SystemMetrics.vue b/dashboard/src/components/SystemMetrics.vue index c10a3cd1b..ed69a20ce 100644 --- a/dashboard/src/components/SystemMetrics.vue +++ b/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; - cpuGraph.options.scales.x.max += LIVE_REFRESH_INTERVAL_MSECS; - cpuGraph.update('none'); - - memoryGraph.options.scales.x.min += LIVE_REFRESH_INTERVAL_MSECS; - memoryGraph.options.scales.x.max += LIVE_REFRESH_INTERVAL_MSECS; - memoryGraph.update('none'); + for (const graph of [ cpuGraph, memoryGraph, diskGraph, networkGraph]) { + graph.options.scales.x.min += LIVE_REFRESH_INTERVAL_MSECS; + graph.options.scales.x.max += LIVE_REFRESH_INTERVAL_MSECS; + graph.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() { - const { cpuData, memoryData, swapData } = await getMetrics(period.value); +async function onPeriodChange() { + 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, + borderWidth: 1, // https://www.chartjs.org/docs/latest/charts/line.html#line-styling 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, + borderWidth: 1, // https://www.chartjs.org/docs/latest/charts/line.html#line-styling 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, + borderWidth: 1, // https://www.chartjs.org/docs/latest/charts/line.html#line-styling 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 () => { diff --git a/src/metrics.js b/src/metrics.js index ff3f09a08..15147fcdf 100644 --- a/src/metrics.js +++ b/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 ], - memory: [ metrics.memoryUsed, now ], - swap: [ metrics.swapUsed, now ], + cpu: [ cpuPercent, nowSecs ], + memory: [ metrics.memoryUsed, nowSecs ], + swap: [ metrics.swapUsed, nowSecs ], - blockReadRate: [ blockReadRate, now ], - blockWriteRate: [ blockWriteRate, now ], - blockReadTotal: [ metrics.blockRead, now ], - blockWriteTotal: [ metrics.blockWrite, now ], + blockReadRate: [ blockReadRate, nowSecs ], + blockWriteRate: [ blockWriteRate, nowSecs ], + blockReadTotal: metrics.blockRead, + blockWriteTotal: metrics.blockWrite, - networkReadRate: [ networkReadRate, now ], - networkWriteRate: [ networkWriteRate, now ], - networkReadTotal: [ metrics.networkRead, now ], - networkWriteTotal: [ metrics.networkWrite, now ], + networkReadRate: [ networkReadRate, nowSecs ], + networkWriteRate: [ networkWriteRate, nowSecs ], + networkReadTotal: metrics.networkRead, + 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 ], - memory: [ memoryUsed, now ], + cpu: [ cpuPercent, nowSecs ], + memory: [ memoryUsed, nowSecs ], - blockReadRate: [ blockReadRate, now ], - blockWriteRate: [ blockWriteRate, now ], - blockReadTotal: [ metrics.blockRead, now ], - blockWriteTotal: [ metrics.blockWrite, now ], + blockReadRate: [ blockReadRate, nowSecs ], + blockWriteRate: [ blockWriteRate, nowSecs ], + blockReadTotal: metrics.blockRead, + blockWriteTotal: metrics.blockWrite, - networkReadRate: [ networkReadRate, now ], - networkWriteRate: [ networkWriteRate, now ], - networkReadTotal: [ metrics.networkRead, now ], - networkWriteTotal: [ metrics.networkWrite, now ], + networkReadRate: [ networkReadRate, nowSecs ], + networkWriteRate: [ networkWriteRate, nowSecs ], + networkReadTotal: metrics.networkRead, + networkWriteTotal: metrics.networkWrite, cpuCount: os.cpus().length }));