ea793344 by Rafal Wilinski

:calling: Add option to change timespans

1 parent e63a64ef
Showing 1 changed file with 54 additions and 29 deletions
...@@ -24,6 +24,19 @@ ...@@ -24,6 +24,19 @@
24 color: #888888; 24 color: #888888;
25 } 25 }
26 26
27 span {
28 cursor: pointer;
29 }
30
31 canvas {
32 width: 100%;
33 height: 100%;
34 }
35
36 .active {
37 text-decoration: underline;
38 }
39
27 .stats-column { 40 .stats-column {
28 flex: 0 0 200px; 41 flex: 0 0 200px;
29 } 42 }
...@@ -47,22 +60,13 @@ ...@@ -47,22 +60,13 @@
47 .span-controls { 60 .span-controls {
48 float: right; 61 float: right;
49 } 62 }
50
51 canvas {
52 width: 100%;
53 height: 100%;
54 }
55 </style> 63 </style>
56 </head> 64 </head>
57 <body> 65 <body>
58 <div style="width: 400px; margin: auto"> 66 <div style="width: 400px; margin: auto">
59 <div class="header"> 67 <div class="header">
60 <span><b>Express Status</b></span> 68 <span><b>Express Status</b></span>
61 <div class="span-controls"> 69 <div id="span-controls" class="span-controls">
62 <span>1M</span>
63 <span>15M</span>
64 <span>1H</span>
65 <span>24H</span>
66 </div> 70 </div>
67 </div> 71 </div>
68 <div class="container"> 72 <div class="container">
...@@ -114,6 +118,7 @@ ...@@ -114,6 +118,7 @@
114 118
115 var socket = io('http://localhost:41338'); 119 var socket = io('http://localhost:41338');
116 var labels = []; 120 var labels = [];
121 var defaultSpan = 0;
117 var cpuDataset = [{ 122 var cpuDataset = [{
118 label: 'CPU Usage in %', 123 label: 'CPU Usage in %',
119 data: [], 124 data: [],
...@@ -228,39 +233,59 @@ ...@@ -228,39 +233,59 @@
228 options: defaultOptions 233 options: defaultOptions
229 }); 234 });
230 235
236 var onSpanChange = function(e) {
237 e.target.classList.add('active');
238 defaultSpan = Integer.parseInt(e.target.id);
239
240 var otherSpans = document.getElementsByTagName('span');
241 for (var i = 0; i < otherSpans.length; i++) {
242 if (otherSpans[i] !== e.target) otherSpans[i].classList.remove('remove');
243 }
244 };
245
231 socket.on('start', function(data) { 246 socket.on('start', function(data) {
232 // Remove last element of Array because it contains malformed responses data. 247 // Remove last element of Array because it contains malformed responses data.
233 // To keep consistency we also remove os data. 248 // To keep consistency we also remove os data.
234 data[0].responses.pop(); 249 data[defaultSpan].responses.pop();
235 data[0].os.pop(); 250 data[defaultSpan].os.pop();
236 251
237 cpuStat.textContent = data[0].os[data[0].os.length - 1].cpu.toFixed(1) + '%'; 252 cpuStat.textContent = data[defaultSpan].os[data[defaultSpan].os.length - 1].cpu.toFixed(1) + '%';
238 cpuChart.data.datasets[0].data = data[0].os.map(function(point) { return point.cpu; }); 253 cpuChart.data.datasets[defaultSpan].data = data[defaultSpan].os.map(function(point) { return point.cpu; });
239 cpuChart.data.labels = data[0].os.map(function(point) { return point.timestamp; }); 254 cpuChart.data.labels = data[defaultSpan].os.map(function(point) { return point.timestamp; });
240 cpuChart.update(); 255 cpuChart.update();
241 256
242 memStat.textContent = data[0].os[data[0].os.length - 1].memory.toFixed(1) + 'MB'; 257 memStat.textContent = data[defaultSpan].os[data[defaultSpan].os.length - 1].memory.toFixed(1) + 'MB';
243 memChart.data.datasets[0].data = data[0].os.map(function(point) { return point.memory; }); 258 memChart.data.datasets[defaultSpan].data = data[defaultSpan].os.map(function(point) { return point.memory; });
244 memChart.data.labels = data[0].os.map(function(point) { return point.timestamp; }); 259 memChart.data.labels = data[defaultSpan].os.map(function(point) { return point.timestamp; });
245 memChart.update(); 260 memChart.update();
246 261
247 loadStat.textContent = data[0].os[data[0].os.length - 1].load[0].toFixed(2); 262 loadStat.textContent = data[defaultSpan].os[data[defaultSpan].os.length - 1].load[defaultSpan].toFixed(2);
248 loadChart.data.datasets[0].data = data[0].os.map(function(point) { return point.load[0]; }); 263 loadChart.data.datasets[defaultSpan].data = data[defaultSpan].os.map(function(point) { return point.load[defaultSpan]; });
249 loadChart.data.labels = data[0].os.map(function(point) { return point.timestamp; }); 264 loadChart.data.labels = data[defaultSpan].os.map(function(point) { return point.timestamp; });
250 loadChart.update(); 265 loadChart.update();
251 266
252 responseTimeStat.textContent = data[0].responses[data[0].responses.length - 1].mean.toFixed(2) + 'ms'; 267 responseTimeStat.textContent = data[defaultSpan].responses[data[defaultSpan].responses.length - 1].mean.toFixed(2) + 'ms';
253 responseTimeChart.data.datasets[0].data = data[0].responses.map(function(point) { return point.mean; }); 268 responseTimeChart.data.datasets[defaultSpan].data = data[defaultSpan].responses.map(function(point) { return point.mean; });
254 responseTimeChart.data.labels = data[0].responses.map(function(point) { return point.timestamp; }); 269 responseTimeChart.data.labels = data[defaultSpan].responses.map(function(point) { return point.timestamp; });
255 responseTimeChart.update(); 270 responseTimeChart.update();
256 271
257 if (data[0].responses.length >= 2) { 272 if (data[defaultSpan].responses.length >= 2) {
258 var deltaTime = data[0].responses[data[0].responses.length - 1].timestamp - data[0].responses[data[0].responses.length - 2].timestamp; 273 var deltaTime = data[defaultSpan].responses[data[defaultSpan].responses.length - 1].timestamp - data[defaultSpan].responses[data[defaultSpan].responses.length - 2].timestamp;
259 rpsStat.textContent = (data[0].responses[data[0].responses.length - 1].count / deltaTime * 1000).toFixed(2); 274 rpsStat.textContent = (data[defaultSpan].responses[data[defaultSpan].responses.length - 1].count / deltaTime * 1000).toFixed(2);
260 rpsChart.data.datasets[0].data = data[0].responses.map(function(point) { return point.count / deltaTime * 1000; }); 275 rpsChart.data.datasets[defaultSpan].data = data[defaultSpan].responses.map(function(point) { return point.count / deltaTime * 1000; });
261 rpsChart.data.labels = data[0].responses.map(function(point) { return point.timestamp; }); 276 rpsChart.data.labels = data[defaultSpan].responses.map(function(point) { return point.timestamp; });
262 rpsChart.update(); 277 rpsChart.update();
263 } 278 }
279
280 var spanControls = document.getElementById('span-controls');
281 data.forEach(function(span, index) {
282 var spanNode = document.createElement('span');
283 var textNode = document.createTextNode((span.retention * span.interval) / 60 + "M");
284 spanNode.appendChild(textNode);
285 spanNode.setAttribute('id', index);
286 spanNode.onclick = onSpanChange;
287 spanControls.appendChild(spanNode);
288 });
264 }); 289 });
265 290
266 socket.on('stats', function (data) { 291 socket.on('stats', function (data) {
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!