Spearhead/joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

B&W graphs: Implementing disk and memory

Browse Source
This commit is contained in:
Tom Gallacher 2016-11-21 14:09:52 +00:00 committed by Sérgio Ramos
parent fe99517cb3
commit 6822feb508
7 changed files with 59 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
spikes/graphs-matrix/chartjs-whiskers/client/actions.js
View File

@ -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

12
spikes/graphs-matrix/chartjs-whiskers/client/chart/base.js
View File

@ -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: {

2
spikes/graphs-matrix/chartjs-whiskers/client/chart/cpu.js
View File

@ -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()
};
});

17
spikes/graphs-matrix/chartjs-whiskers/client/chart/disk.js
View File

@ -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 (
<Chart
datasets={datasets}
labels={labels}
labels={datasets[0].data.length}
legend={true}
/>
);

9
spikes/graphs-matrix/chartjs-whiskers/client/chart/mem.js
View File

@ -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 (

1
spikes/graphs-matrix/chartjs-whiskers/client/whisker.js
View File

@ -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;
},

40
spikes/graphs-matrix/chartjs-whiskers/server/metric.js
View File

@ -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) => {
async.timesSeries(10, (n, next) => {
const free = os.freemem();
const total = os.totalmem();
const using = total - free;
const perc = (using / total) * 100;
return fn(null, {
used: perc
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) => {