Add option to change timespans
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) { | ... | ... |
-
Please register or sign in to post a comment