From 6822feb508f8d4d3f7aa3e8af4a82e63ff556ad4 Mon Sep 17 00:00:00 2001 From: Tom Gallacher Date: Mon, 21 Nov 2016 14:09:52 +0000 Subject: [PATCH] B&W graphs: Implementing disk and memory --- .../chartjs-whiskers/client/actions.js | 2 +- .../chartjs-whiskers/client/chart/base.js | 12 +++-- .../chartjs-whiskers/client/chart/cpu.js | 2 +- .../chartjs-whiskers/client/chart/disk.js | 17 +++---- .../chartjs-whiskers/client/chart/mem.js | 9 ++-- .../chartjs-whiskers/client/whisker.js | 1 - .../chartjs-whiskers/server/metric.js | 48 +++++++++++++++---- 7 files changed, 59 insertions(+), 32 deletions(-) diff --git a/spikes/graphs-matrix/chartjs-whiskers/client/actions.js b/spikes/graphs-matrix/chartjs-whiskers/client/actions.js index b0c18201..32a801f5 100644 --- a/spikes/graphs-matrix/chartjs-whiskers/client/actions.js +++ b/spikes/graphs-matrix/chartjs-whiskers/client/actions.js @@ -8,7 +8,7 @@ const actions = { disk: [] }); - const newData = ['cpu', 'mem'].reduce((sum, key) => { + const newData = ['cpu', 'mem', 'disk'].reduce((sum, key) => { const item = { ...action.payload.stats[key], when: action.payload.when diff --git a/spikes/graphs-matrix/chartjs-whiskers/client/chart/base.js b/spikes/graphs-matrix/chartjs-whiskers/client/chart/base.js index af16873f..9a3026a5 100644 --- a/spikes/graphs-matrix/chartjs-whiskers/client/chart/base.js +++ b/spikes/graphs-matrix/chartjs-whiskers/client/chart/base.js @@ -19,7 +19,9 @@ module.exports = React.createClass({ stacked = false, xAxe = false, yAxe = false, - legend = false + legend = false, + max = 100, + min = 0 } = this.props; const _labels = !Array.isArray(labels) @@ -33,13 +35,13 @@ module.exports = React.createClass({ scales: { xAxes: [{ barPercentage: 1.0, - categoryPercentage: 1.0, + categoryPercentage: 1.0 }], yAxes: [{ ticks: { - min: 0, - max: 100 - }, + min: min, + max: max + } }] }, legend: { diff --git a/spikes/graphs-matrix/chartjs-whiskers/client/chart/cpu.js b/spikes/graphs-matrix/chartjs-whiskers/client/chart/cpu.js index 684d5608..dc03d0f8 100644 --- a/spikes/graphs-matrix/chartjs-whiskers/client/chart/cpu.js +++ b/spikes/graphs-matrix/chartjs-whiskers/client/chart/cpu.js @@ -18,7 +18,7 @@ module.exports = ({ label: key, backgroundColor: colors[key], altBackgroundColor: colors['alt'], - data: buildArray(windowSize).map((v, i) => ((data[i] || {})[key] || { firstQuartile: 0, thirdQuartile: 0, median: 0, max: 0, min: 0 })) + data: buildArray(windowSize).map((v, i) => ((data[i] || {})[key] || { firstQuartile: 0, thirdQuartile: 0, median: 0, max: 0, min: 0 })).reverse() }; }); diff --git a/spikes/graphs-matrix/chartjs-whiskers/client/chart/disk.js b/spikes/graphs-matrix/chartjs-whiskers/client/chart/disk.js index 64e0221c..b3f3c56a 100644 --- a/spikes/graphs-matrix/chartjs-whiskers/client/chart/disk.js +++ b/spikes/graphs-matrix/chartjs-whiskers/client/chart/disk.js @@ -4,8 +4,8 @@ const Chart = require('./base'); const React = require('react'); const colors = { - user: 'rgb(255, 99, 132)', - sys: 'rgb(255, 159, 64)' + perc: 'rgba(54, 74, 205, 0.2)', + alt: 'rgba(245, 93, 93, 0.2)' }; module.exports = ({ @@ -14,20 +14,15 @@ module.exports = ({ }) => { const datasets = [{ label: 'disk', - backgroundColor: 'rgb(255, 159, 64)', - data: buildArray(windowSize).map((v, i) => { - return data[i] ? (data[i].total - data[i].free) : 0; - }) + backgroundColor: colors['perc'], + altBackgroundColor: colors['alt'], + data: buildArray(windowSize).map((v, i) => ((data[i] || {})['perc'] || { firstQuartile: 0, thirdQuartile: 0, median: 0, max: 0, min: 0 })).reverse() }]; - const labels = buildArray(windowSize).map((v, i) => { - return data[i] ? pretty(datasets[0].data[i]) : ''; - }); - return ( ); diff --git a/spikes/graphs-matrix/chartjs-whiskers/client/chart/mem.js b/spikes/graphs-matrix/chartjs-whiskers/client/chart/mem.js index a9a0943d..3afb8ed8 100644 --- a/spikes/graphs-matrix/chartjs-whiskers/client/chart/mem.js +++ b/spikes/graphs-matrix/chartjs-whiskers/client/chart/mem.js @@ -3,8 +3,8 @@ const Chart = require('./base'); const React = require('react'); const colors = { - user: 'rgb(255, 99, 132)', - sys: 'rgb(255, 159, 64)' + perc: 'rgba(54, 74, 205, 0.2)', + alt: 'rgba(245, 93, 93, 0.2)' }; module.exports = ({ @@ -13,8 +13,9 @@ module.exports = ({ }) => { const datasets = [{ label: 'mem', - backgroundColor: 'rgb(255, 99, 132)', - data: buildArray(windowSize).map((v, i) => ((data[i] || {}).used || 0)) + backgroundColor: colors['perc'], + altBackgroundColor: colors['alt'], + data: buildArray(windowSize).map((v, i) => ((data[i] || {}).perc || { firstQuartile: 0, thirdQuartile: 0, median: 0, max: 0, min: 0 })).reverse() }]; return ( diff --git a/spikes/graphs-matrix/chartjs-whiskers/client/whisker.js b/spikes/graphs-matrix/chartjs-whiskers/client/whisker.js index 3cedf016..6e4b0c56 100644 --- a/spikes/graphs-matrix/chartjs-whiskers/client/whisker.js +++ b/spikes/graphs-matrix/chartjs-whiskers/client/whisker.js @@ -104,7 +104,6 @@ module.exports = function(Chart) { var obj = me.getDataset().data[index]; var value = Number(obj.stddev); - console.log('stddev >>', value); return value; }, diff --git a/spikes/graphs-matrix/chartjs-whiskers/server/metric.js b/spikes/graphs-matrix/chartjs-whiskers/server/metric.js index 2e1f226e..b4e6f6c9 100644 --- a/spikes/graphs-matrix/chartjs-whiskers/server/metric.js +++ b/spikes/graphs-matrix/chartjs-whiskers/server/metric.js @@ -15,7 +15,7 @@ const getCPU = (fn) => { }; const getPerc = (fn) => { - async.timesSeries(20, (n, next) => { + async.timesSeries(5, (n, next) => { osutils.cpuUsage((p) => { const percentage = p * 100; next(null, percentage); @@ -35,18 +35,48 @@ const getPerc = (fn) => { }; const getMem = (fn) => { - const free = os.freemem(); - const total = os.totalmem(); - const using = total - free; - const perc = (using / total) * 100; - - return fn(null, { - used: perc + async.timesSeries(10, (n, next) => { + const free = os.freemem(); + const total = os.totalmem(); + const using = total - free; + const perc = (using / total) * 100; + setTimeout(() => { + next(null, perc); + }, 500); + }, (err, sample) => { + fn(err, { + perc: { + firstQuartile: statistics.quantile(sample, 0.25), + median: statistics.median(sample), + thirdQuartile: statistics.quantile(sample, 0.75), + max: statistics.max(sample), + min: statistics.min(sample), + stddev: statistics.sampleStandardDeviation(sample) + } + }); }); }; const getDisk = (fn) => { - disk.check('/', fn); + async.timesSeries(5, (n, next) => { + disk.check('/', (err, data) => { + setTimeout(() => { + const perc = (data.available / data.total) * 100; + next(err, perc); + }, 2000); + }); + }, (err, sample) => { + fn(err, { + perc: { + firstQuartile: statistics.quantile(sample, 0.25), + median: statistics.median(sample), + thirdQuartile: statistics.quantile(sample, 0.75), + max: statistics.max(sample), + min: statistics.min(sample), + stddev: statistics.sampleStandardDeviation(sample) + } + }); + }); }; const getStats = (fn) => {