9721adcd by Rafal Wilinski

:crossed_flags: Push data only from current span to chart

1 parent 3497fbb4
Showing 1 changed file with 40 additions and 28 deletions
...@@ -133,6 +133,7 @@ ...@@ -133,6 +133,7 @@
133 133
134 var socket = io('http://localhost:41338'); 134 var socket = io('http://localhost:41338');
135 var defaultSpan = 0; 135 var defaultSpan = 0;
136 var spans = [];
136 137
137 var defaultDataset = { 138 var defaultDataset = {
138 label: '', 139 label: '',
...@@ -162,7 +163,8 @@ ...@@ -162,7 +163,8 @@
162 enabled: false 163 enabled: false
163 }, 164 },
164 responsive: true, 165 responsive: true,
165 maintainAspectRatio: false 166 maintainAspectRatio: false,
167 animation: false
166 }; 168 };
167 169
168 var createChart = function (ctx, dataset) { 170 var createChart = function (ctx, dataset) {
...@@ -208,11 +210,11 @@ ...@@ -208,11 +210,11 @@
208 210
209 var onSpanChange = function (e) { 211 var onSpanChange = function (e) {
210 e.target.classList.add('active'); 212 e.target.classList.add('active');
211 defaultSpan = Integer.parseInt(e.target.id); 213 defaultSpan = parseInt(e.target.id);
212 214
213 var otherSpans = document.getElementsByTagName('span'); 215 var otherSpans = document.getElementsByTagName('span');
214 for (var i = 0; i < otherSpans.length; i++) { 216 for (var i = 0; i < otherSpans.length; i++) {
215 if (otherSpans[i] !== e.target) otherSpans[i].classList.remove('remove'); 217 if (otherSpans[i] !== e.target) otherSpans[i].classList.remove('active');
216 } 218 }
217 }; 219 };
218 220
...@@ -261,6 +263,11 @@ ...@@ -261,6 +263,11 @@
261 263
262 var spanControls = document.getElementById('span-controls'); 264 var spanControls = document.getElementById('span-controls');
263 data.forEach(function (span, index) { 265 data.forEach(function (span, index) {
266 spans.push({
267 retention: span.retention,
268 interval: span.interval
269 });
270
264 var spanNode = document.createElement('span'); 271 var spanNode = document.createElement('span');
265 var textNode = document.createTextNode((span.retention * span.interval) / 60 + "M"); 272 var textNode = document.createTextNode((span.retention * span.interval) / 60 + "M");
266 spanNode.appendChild(textNode); 273 spanNode.appendChild(textNode);
...@@ -271,32 +278,37 @@ ...@@ -271,32 +278,37 @@
271 }); 278 });
272 279
273 socket.on('stats', function (data) { 280 socket.on('stats', function (data) {
274 cpuStat.textContent = data.os.cpu.toFixed(1) + '%'; 281 if (data.retention === spans[defaultSpan].retention && data.interval === spans[defaultSpan].interval) {
275 cpuChart.data.datasets[0].data.push(data.os.cpu); 282 cpuStat.textContent = data.os.cpu.toFixed(1) + '%';
276 cpuChart.data.labels.push(data.os.timestamp); 283 cpuChart.data.datasets[0].data.push(data.os.cpu);
277 284 cpuChart.data.labels.push(data.os.timestamp);
278 memStat.textContent = data.os.memory.toFixed(1) + 'MB'; 285
279 memChart.data.datasets[0].data.push(data.os.memory); 286 memStat.textContent = data.os.memory.toFixed(1) + 'MB';
280 memChart.data.labels.push(data.os.timestamp); 287 memChart.data.datasets[0].data.push(data.os.memory);
281 288 memChart.data.labels.push(data.os.timestamp);
282 loadStat.textContent = data.os.load[0].toFixed(2); 289
283 loadChart.data.datasets[0].data.push(data.os.load[0]); 290 loadStat.textContent = data.os.load[0].toFixed(2);
284 loadChart.data.labels.push(data.os.timestamp); 291 loadChart.data.datasets[0].data.push(data.os.load[0]);
285 292 loadChart.data.labels.push(data.os.timestamp);
286 responseTimeStat.textContent = data.responses.mean.toFixed(2) + 'ms'; 293
287 responseTimeChart.data.datasets[0].data.push(data.responses.mean); 294 responseTimeStat.textContent = data.responses.mean.toFixed(2) + 'ms';
288 responseTimeChart.data.labels.push(data.responses.timestamp); 295 responseTimeChart.data.datasets[0].data.push(data.responses.mean);
289 296 responseTimeChart.data.labels.push(data.responses.timestamp);
290 var deltaTime = data.responses.timestamp - rpsChart.data.labels[rpsChart.data.labels.length - 1]; 297
291 rpsStat.textContent = (data.responses.count / deltaTime * 1000).toFixed(2); 298 var deltaTime = data.responses.timestamp - rpsChart.data.labels[rpsChart.data.labels.length - 1];
292 rpsChart.data.datasets[0].data.push(data.responses.count / deltaTime * 1000); 299 rpsStat.textContent = (data.responses.count / deltaTime * 1000).toFixed(2);
293 rpsChart.data.labels.push(data.responses.timestamp); 300 rpsChart.data.datasets[0].data.push(data.responses.count / deltaTime * 1000);
301 rpsChart.data.labels.push(data.responses.timestamp);
302
303 charts.forEach(function (chart) {
304 if (spans[defaultSpan].retention < chart.data.labels.length) {
305 chart.data.datasets[0].data.shift();
306 chart.data.labels.shift();
307 }
294 308
295 charts.forEach(function(chart) { 309 chart.update();
296 chart.data.datasets[0].data.shift(); 310 });
297 chart.data.labels.shift(); 311 }
298 chart.update();
299 });
300 }); 312 });
301 </script> 313 </script>
302 </body> 314 </body>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!