Add requests per second metric
Showing
2 changed files
with
39 additions
and
2 deletions
... | @@ -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 ♥ with Socket.io & Chart.js</p> | 104 | <p>Made with ♥ 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 | }); | ... | ... |
-
Please register or sign in to post a comment