447c6fad by Rafal Wilinski

:gun: Add requests per second metric

1 parent 8693ffe9
......@@ -93,6 +93,13 @@
</div>
<canvas id="responseTimeChart" width="400" height="100"></canvas>
</div>
<div class="container">
<div class="stats-column">
<h5>Requests per Second</h5>
<h1 id="rpsStat">-</h1>
</div>
<canvas id="rpsChart" width="400" height="100"></canvas>
</div>
<div class="footer">
<p>Made with &#9829; with Socket.io & Chart.js</p>
</div>
......@@ -135,6 +142,13 @@
pointRadius: 0,
}];
var rpsDataset = [{
label: 'Requests per Second',
data: [],
lineTension: 0.2,
pointRadius: 0,
}];
var defaultOptions = {
scales: {
yAxes: [{
......@@ -161,11 +175,13 @@
var memStat = document.getElementById('memStat');
var loadStat = document.getElementById('loadStat');
var responseTimeStat = document.getElementById('responseTimeStat');
var rpsStat = document.getElementById('rpsStat');
var cpuChartCtx = document.getElementById("cpuChart");
var memChartCtx = document.getElementById("memChart");
var loadChartCtx = document.getElementById("loadChart");
var responseTimeChartCtx = document.getElementById("responseTimeChart");
var rpsChartCtx = document.getElementById("rpsChart");
var cpuChart = new Chart(cpuChartCtx, {
type: 'line',
......@@ -203,8 +219,21 @@
options: defaultOptions
});
var rpsChart = new Chart(rpsChartCtx, {
type: 'line',
data: {
labels: labels,
datasets: rpsDataset,
},
options: defaultOptions
});
socket.on('stats', function (data) {
console.log(data);
// Remove last element of Array because it contains malformed responses data.
// To keep consistency we also remove os data.
data.responses.pop();
data.os.pop();
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; });
......@@ -224,6 +253,14 @@
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();
if (data.responses.length >= 2) {
var deltaTime = data.responses[data.responses.length - 1].timestamp - data.responses[data.responses.length - 2].timestamp;
rpsStat.textContent = (data.responses[data.responses.length - 1].count / deltaTime * 1000).toFixed(2);
rpsChart.data.datasets[0].data = data.responses.map(function(point) { return point.count / deltaTime * 1000; });
rpsChart.data.labels = data.responses.map(function(point) { return point.timestamp; });
rpsChart.update();
}
});
</script>
</body>
......
......@@ -41,7 +41,7 @@
if (!span.responses[0] || span.responses.last().timestamp + (span.interval * 1000) < Date.now()) span.responses.push(defaultResponse);
if (span.os.length >= span.retention) span.os.shift();
if (span.responses[0] && span.responses.length >= span.retention) span.responses.shift();
if (span.responses[0] && span.responses.length > span.retention) span.responses.shift();
sendMetrics(io, span);
});
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!