f4d86a89 by Rafal Wilinski

:gear: Load Stat added

1 parent a541985e
......@@ -63,27 +63,13 @@
</div>
<div class="container">
<div class="stats-column">
<h5>Requests per second</h5>
<h1 id="rpsStat">-</h1>
<h5>One Minute Load Avg</h5>
<h1 id="loadStat">-</h1>
</div>
<canvas id="rpsChart" width="400" height="100"></canvas>
</div>
<div class="container">
<div class="stats-column">
<h5>Response Time Mean</h5>
<h1 id="responseTimeStat">- ms</h1>
</div>
<canvas id="responseTimeChart" width="400" height="100"></canvas>
</div>
<div class="container">
<div class="stats-column">
<h5>Response status codes</h5>
<h1 id="statusCodeStat">-</h1>
</div>
<canvas id="statusCodeChart" width="400" height="100"></canvas>
<canvas id="loadChart" width="400" height="100"></canvas>
</div>
<div class="footer">
<p>Powered by Socket.io & Chart.js</p>
<p>Made with &#9829; with Socket.io & Chart.js</p>
</div>
</div>
<script>
......@@ -106,28 +92,14 @@
var memDataset = [{
label: 'Memory Usage in MB',
data: [],
lineTension: 0.6,
lineTension: 0.2,
pointRadius: 0,
}];
var responseTimeDataset = [{
label: 'Mean Response time',
data: [],
lineTension: 0.6,
pointRadius: 0,
}];
var rpsDataset = [{
label: 'Requests per second',
data: [],
lineTension: 0.6,
pointRadius: 0,
}];
var statusCodesDataset = [{
label: 'Memory Usage in MB',
var loadDataset = [{
label: '1 Minute Load',
data: [],
lineTension: 0.6,
lineTension: 0.2,
pointRadius: 0,
}];
......@@ -155,13 +127,12 @@
var cpuStat = document.getElementById('cpuStat');
var memStat = document.getElementById('memStat');
var responseTimeStat = document.getElementById('responseTimeStat');
var rpsStat = document.getElementById('rpsStat');
var loadStat = document.getElementById('loadStat');
var cpuChartCtx = document.getElementById("cpuChart");
var memChartCtx = document.getElementById("memChart");
var rpsChartCtx = document.getElementById("rpsChart");
var responseTimeChartCtx = document.getElementById("responseTimeChart");
var statusCodeChartCtx = document.getElementById("statusCodeChart");
var loadChartCtx = document.getElementById("loadChart");
var cpuChart = new Chart(cpuChartCtx, {
type: 'line',
data: {
......@@ -180,55 +151,32 @@
options: defaultOptions
});
var rpsChart = new Chart(rpsChartCtx, {
type: 'line',
data: {
labels: labels,
datasets: responseTimeDataset,
},
options: defaultOptions
});
var responseTimeChart = new Chart(responseTimeChartCtx, {
var loadChart = new Chart(loadChartCtx, {
type: 'line',
data: {
labels: labels,
datasets: responseTimeDataset,
datasets: loadDataset,
},
options: defaultOptions
});
var statusCodeChart = new Chart(statusCodeChartCtx, {
type: 'line',
data: {
labels: labels,
datasets: statusCodesDataset,
},
options: defaultOptions
});
socket.on('stats', function (data) {
console.log(data);
cpuStat.textContent = data.osStats[data.osStats.length - 1].cpu.toFixed(1) + '%';
cpuChart.data.datasets[0].data = data.osStats.map(function(point) { return point.cpu; });
cpuChart.data.labels = data.osStats.map(function(point) { return point.timestamp; });
cpuStat.textContent = data.os[data.os.length - 1].cpu.toFixed(1) + '%';
cpuChart.data.datasets[0].data = data.os.map(function(point) { return point.cpu; });
cpuChart.data.labels = data.os.map(function(point) { return point.timestamp; });
cpuChart.update();
memStat.textContent = data.osStats[data.osStats.length - 1].memory.toFixed(1) + 'MB';
memChart.data.datasets[0].data = data.osStats.map(function(point) { return point.memory; });
memChart.data.labels = data.osStats.map(function(point) { return point.timestamp; });
memStat.textContent = data.os[data.os.length - 1].memory.toFixed(1) + 'MB';
memChart.data.datasets[0].data = data.os.map(function(point) { return point.memory; });
memChart.data.labels = data.os.map(function(point) { return point.timestamp; });
memChart.update();
if (data.responses.length > 0) {
responseTimeStat.textContent = data.responses[data.responses.length - 1].mean.toFixed(1) + 'ms';
responseTimeChart.data.datasets[0].data = data.responses.map(function (point) {
return point.mean;
});
responseTimeChart.data.labels = data.responses.map(function (point) {
return point.timestamp;
});
responseTimeChart.update();
}
loadStat.textContent = data.os[data.os.length - 1].load[0].toFixed(2);
loadChart.data.datasets[0].data = data.os.map(function(point) { return point.load[0]; });
loadChart.data.labels = data.os.map(function(point) { return point.timestamp; });
loadChart.update();
});
</script>
</body>
......
......@@ -2,6 +2,7 @@
'use strict';
const path = require('path');
const os = require('os');
const onHeaders = require('on-headers');
const pidusage = require('pidusage');
......@@ -20,10 +21,11 @@
// Convert from B to MB
stat.memory = stat.memory / 1024 / 1024;
stat.load = os.loadavg();
span.osStats.push(stat);
if (span.osStats.length >= span.retention) span.osStats.shift();
if (span.responses[0] && span.responses[0].timestamp + (span.interval * span.retention * 1000) < Date.now()) span.responses.shift();
span.os.push(stat);
if (span.os.length >= span.retention) span.os.shift();
sendMetrics(io, span);
});
......@@ -31,7 +33,7 @@
const sendMetrics = (io, span) => {
io.emit('stats', {
osStats: span.osStats,
os: span.os,
responses: span.responses,
});
};
......@@ -60,7 +62,7 @@
});
config.spans.forEach((span) => {
span.osStats = [];
span.os = [];
span.responses = [];
setInterval(() => gatherOsMetrics(io, span), span.interval * 1000);
});
......@@ -76,9 +78,11 @@
const category = Math.floor(res.statusCode / 100);
config.spans.forEach((span) => {
if (span.responses[span.responses.length - 1] !== undefined &&
const last = span.responses[span.responses.length - 1];
if (last !== undefined &&
span.responses[span.responses.length - 1].timestamp / 1000 + span.interval > Date.now() / 1000) {
span.responses[span.responses.length - 1][category]++;
span.responses[span.responses.length - 1].mean = responseTime;
span.responses[span.responses.length - 1].count++;
} else {
span.responses.push({
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!