447c6fad by Rafal Wilinski

:gun: Add requests per second metric

1 parent 8693ffe9
...@@ -93,6 +93,13 @@ ...@@ -93,6 +93,13 @@
93 </div> 93 </div>
94 <canvas id="responseTimeChart" width="400" height="100"></canvas> 94 <canvas id="responseTimeChart" width="400" height="100"></canvas>
95 </div> 95 </div>
96 <div class="container">
97 <div class="stats-column">
98 <h5>Requests per Second</h5>
99 <h1 id="rpsStat">-</h1>
100 </div>
101 <canvas id="rpsChart" width="400" height="100"></canvas>
102 </div>
96 <div class="footer"> 103 <div class="footer">
97 <p>Made with &#9829; with Socket.io & Chart.js</p> 104 <p>Made with &#9829; with Socket.io & Chart.js</p>
98 </div> 105 </div>
...@@ -135,6 +142,13 @@ ...@@ -135,6 +142,13 @@
135 pointRadius: 0, 142 pointRadius: 0,
136 }]; 143 }];
137 144
145 var rpsDataset = [{
146 label: 'Requests per Second',
147 data: [],
148 lineTension: 0.2,
149 pointRadius: 0,
150 }];
151
138 var defaultOptions = { 152 var defaultOptions = {
139 scales: { 153 scales: {
140 yAxes: [{ 154 yAxes: [{
...@@ -161,11 +175,13 @@ ...@@ -161,11 +175,13 @@
161 var memStat = document.getElementById('memStat'); 175 var memStat = document.getElementById('memStat');
162 var loadStat = document.getElementById('loadStat'); 176 var loadStat = document.getElementById('loadStat');
163 var responseTimeStat = document.getElementById('responseTimeStat'); 177 var responseTimeStat = document.getElementById('responseTimeStat');
178 var rpsStat = document.getElementById('rpsStat');
164 179
165 var cpuChartCtx = document.getElementById("cpuChart"); 180 var cpuChartCtx = document.getElementById("cpuChart");
166 var memChartCtx = document.getElementById("memChart"); 181 var memChartCtx = document.getElementById("memChart");
167 var loadChartCtx = document.getElementById("loadChart"); 182 var loadChartCtx = document.getElementById("loadChart");
168 var responseTimeChartCtx = document.getElementById("responseTimeChart"); 183 var responseTimeChartCtx = document.getElementById("responseTimeChart");
184 var rpsChartCtx = document.getElementById("rpsChart");
169 185
170 var cpuChart = new Chart(cpuChartCtx, { 186 var cpuChart = new Chart(cpuChartCtx, {
171 type: 'line', 187 type: 'line',
...@@ -203,8 +219,21 @@ ...@@ -203,8 +219,21 @@
203 options: defaultOptions 219 options: defaultOptions
204 }); 220 });
205 221
222 var rpsChart = new Chart(rpsChartCtx, {
223 type: 'line',
224 data: {
225 labels: labels,
226 datasets: rpsDataset,
227 },
228 options: defaultOptions
229 });
230
206 socket.on('stats', function (data) { 231 socket.on('stats', function (data) {
207 console.log(data); 232 // Remove last element of Array because it contains malformed responses data.
233 // To keep consistency we also remove os data.
234 data.responses.pop();
235 data.os.pop();
236
208 cpuStat.textContent = data.os[data.os.length - 1].cpu.toFixed(1) + '%'; 237 cpuStat.textContent = data.os[data.os.length - 1].cpu.toFixed(1) + '%';
209 cpuChart.data.datasets[0].data = data.os.map(function(point) { return point.cpu; }); 238 cpuChart.data.datasets[0].data = data.os.map(function(point) { return point.cpu; });
210 cpuChart.data.labels = data.os.map(function(point) { return point.timestamp; }); 239 cpuChart.data.labels = data.os.map(function(point) { return point.timestamp; });
...@@ -224,6 +253,14 @@ ...@@ -224,6 +253,14 @@
224 responseTimeChart.data.datasets[0].data = data.responses.map(function(point) { return point.mean; }); 253 responseTimeChart.data.datasets[0].data = data.responses.map(function(point) { return point.mean; });
225 responseTimeChart.data.labels = data.responses.map(function(point) { return point.timestamp; }); 254 responseTimeChart.data.labels = data.responses.map(function(point) { return point.timestamp; });
226 responseTimeChart.update(); 255 responseTimeChart.update();
256
257 if (data.responses.length >= 2) {
258 var deltaTime = data.responses[data.responses.length - 1].timestamp - data.responses[data.responses.length - 2].timestamp;
259 rpsStat.textContent = (data.responses[data.responses.length - 1].count / deltaTime * 1000).toFixed(2);
260 rpsChart.data.datasets[0].data = data.responses.map(function(point) { return point.count / deltaTime * 1000; });
261 rpsChart.data.labels = data.responses.map(function(point) { return point.timestamp; });
262 rpsChart.update();
263 }
227 }); 264 });
228 </script> 265 </script>
229 </body> 266 </body>
......
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
41 if (!span.responses[0] || span.responses.last().timestamp + (span.interval * 1000) < Date.now()) span.responses.push(defaultResponse); 41 if (!span.responses[0] || span.responses.last().timestamp + (span.interval * 1000) < Date.now()) span.responses.push(defaultResponse);
42 42
43 if (span.os.length >= span.retention) span.os.shift(); 43 if (span.os.length >= span.retention) span.os.shift();
44 if (span.responses[0] && span.responses.length >= span.retention) span.responses.shift(); 44 if (span.responses[0] && span.responses.length > span.retention) span.responses.shift();
45 45
46 sendMetrics(io, span); 46 sendMetrics(io, span);
47 }); 47 });
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!