Skip to content

Jabis Sevón / esm

Go to a project
Toggle navigation
Toggle navigation pinning
a681773a by Rafal Wilinski
Options

:hourglass:️Change indents, refactor defaults

1 parent ea793344
Inline Side-by-side
Showing 1 changed file with 272 additions and 301 deletions
index.html
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <head> 3 <head>
4 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.bundle.min.js"></script> 4 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.bundle.min.js"></script>
5 <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.5/socket.io.min.js"></script> 5 <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.5/socket.io.min.js"></script>
6 <style> 6 <style>
7 * { 7 * {
8 font-family: Helvetica Neue, Helvetica, Arial, sans-serif; 8 font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
9 } 9 }
10 10
11 h1 { 11 h1 {
12 font-size: 3em; 12 font-size: 3em;
13 color: #222222; 13 color: #222222;
14 margin: 0; 14 margin: 0;
15 } 15 }
16 16
17 h5 { 17 h5 {
18 margin: 0; 18 margin: 0;
19 color: #888888; 19 color: #888888;
20 } 20 }
21 21
22 p { 22 p {
23 font-size: 0.7em; 23 font-size: 0.7em;
24 color: #888888; 24 color: #888888;
25 } 25 }
26 26
27 span { 27 span {
28 cursor: pointer; 28 cursor: pointer;
29 } 29 }
30 30
31 canvas { 31 canvas {
32 width: 100%; 32 width: 100%;
33 height: 100%; 33 height: 100%;
34 } 34 }
35 35
36 .active { 36 .active {
37 text-decoration: underline; 37 text-decoration: underline;
38 } 38 }
39 39
40 .stats-column { 40 .stats-column {
41 flex: 0 0 200px; 41 flex: 0 0 200px;
42 } 42 }
43 43
44 .container { 44 .container {
45 display: flex; 45 display: flex;
46 flex-direction: row; 46 flex-direction: row;
47 margin-top: 20px; 47 margin-top: 20px;
48 height: 100px; 48 height: 100px;
49 } 49 }
50 50
51 .footer { 51 .footer {
52 position: fixed; 52 position: fixed;
53 margin: auto; 53 margin: auto;
54 text-align: center; 54 text-align: center;
55 left: 0; 55 left: 0;
56 right: 0; 56 right: 0;
57 bottom: 0; 57 bottom: 0;
58 } 58 }
59 59
60 .span-controls { 60 .span-controls {
61 float: right; 61 float: right;
62 } 62 }
63 </style> 63 </style>
64 </head> 64 </head>
65 <body> 65 <body>
66 <div style="width: 400px; margin: auto"> 66 <div style="width: 400px; margin: auto">
67 <div class="header"> 67 <div class="header">
68 <span><b>Express Status</b></span> 68 <span><b>Express Status</b></span>
69 <div id="span-controls" class="span-controls"> 69 <div id="span-controls" class="span-controls">
70 </div>
71 </div>
72 <div class="container">
73 <div class="stats-column">
74 <h5>CPU Usage</h5>
75 <h1 id="cpuStat">- %</h1>
76 </div>
77 <canvas id="cpuChart" width="400" height="100"></canvas>
78 </div> 70 </div>
79 <div class="container"> 71 </div>
80 <div class="stats-column"> 72 <div class="container">
81 <h5>Memory Usage</h5> 73 <div class="stats-column">
82 <h1 id="memStat">- %</h1> 74 <h5>CPU Usage</h5>
83 </div> 75 <h1 id="cpuStat">- %</h1>
84 <canvas id="memChart" width="400" height="100"></canvas>
85 </div> 76 </div>
86 <div class="container"> 77 <canvas id="cpuChart" width="400" height="100"></canvas>
87 <div class="stats-column"> 78 </div>
88 <h5>One Minute Load Avg</h5> 79 <div class="container">
89 <h1 id="loadStat">-</h1> 80 <div class="stats-column">
90 </div> 81 <h5>Memory Usage</h5>
91 <canvas id="loadChart" width="400" height="100"></canvas> 82 <h1 id="memStat">- %</h1>
92 </div> 83 </div>
93 <div class="container"> 84 <canvas id="memChart" width="400" height="100"></canvas>
94 <div class="stats-column"> 85 </div>
95 <h5>Response Time</h5> 86 <div class="container">
96 <h1 id="responseTimeStat">-</h1> 87 <div class="stats-column">
97 </div> 88 <h5>One Minute Load Avg</h5>
98 <canvas id="responseTimeChart" width="400" height="100"></canvas> 89 <h1 id="loadStat">-</h1>
99 </div> 90 </div>
100 <div class="container"> 91 <canvas id="loadChart" width="400" height="100"></canvas>
101 <div class="stats-column"> 92 </div>
102 <h5>Requests per Second</h5> 93 <div class="container">
103 <h1 id="rpsStat">-</h1> 94 <div class="stats-column">
104 </div> 95 <h5>Response Time</h5>
105 <canvas id="rpsChart" width="400" height="100"></canvas> 96 <h1 id="responseTimeStat">-</h1>
106 </div> 97 </div>
107 <div class="footer"> 98 <canvas id="responseTimeChart" width="400" height="100"></canvas>
108 <p>Made with &#9829; with Socket.io & Chart.js</p> 99 </div>
100 <div class="container">
101 <div class="stats-column">
102 <h5>Requests per Second</h5>
103 <h1 id="rpsStat">-</h1>
109 </div> 104 </div>
105 <canvas id="rpsChart" width="400" height="100"></canvas>
106 </div>
107 <div class="footer">
108 <p>Made with &#9829; with Socket.io & Chart.js</p>
109 </div>
110 </div> 110 </div>
111 <script> 111 <script>
112 Chart.defaults.global.defaultFontSize = 8; 112 Chart.defaults.global.defaultFontSize = 8;
113 Chart.defaults.global.animation.duration = 500; 113 Chart.defaults.global.animation.duration = 500;
114 Chart.defaults.global.legend.display = false; 114 Chart.defaults.global.legend.display = false;
115 Chart.defaults.global.elements.line.backgroundColor = "rgba(0,0,0,0)"; 115 Chart.defaults.global.elements.line.backgroundColor = "rgba(0,0,0,0)";
116 Chart.defaults.global.elements.line.borderColor = "rgba(0,0,0,0.9)"; 116 Chart.defaults.global.elements.line.borderColor = "rgba(0,0,0,0.9)";
117 Chart.defaults.global.elements.line.borderWidth = 2; 117 Chart.defaults.global.elements.line.borderWidth = 2;
118 118
119 var socket = io('http://localhost:41338'); 119 var socket = io('http://localhost:41338');
120 var labels = []; 120 var labels = [];
121 var defaultSpan = 0; 121 var defaultSpan = 0;
122 var cpuDataset = [{ 122
123 label: 'CPU Usage in %', 123 var defaultDataset = [{
124 data: [], 124 label: '',
125 lineTension: 0.3, 125 data: [],
126 pointRadius: 0, 126 lineTension: 0.2,
127 }]; 127 pointRadius: 0
128 128 }];
129 var memDataset = [{ 129
130 label: 'Memory Usage in MB', 130 var defaultOptions = {
131 data: [], 131 scales: {
132 lineTension: 0.2, 132 yAxes: [{
133 pointRadius: 0, 133 ticks: {
134 }]; 134 beginAtZero: true
135
136 var loadDataset = [{
137 label: '1 Minute Load',
138 data: [],
139 lineTension: 0.2,
140 pointRadius: 0,
141 }];
142
143 var responseTimeDataset = [{
144 label: 'Response Time',
145 data: [],
146 lineTension: 0.2,
147 pointRadius: 0,
148 }];
149
150 var rpsDataset = [{
151 label: 'Requests per Second',
152 data: [],
153 lineTension: 0.2,
154 pointRadius: 0,
155 }];
156
157 var defaultOptions = {
158 scales: {
159 yAxes: [{
160 ticks: {
161 beginAtZero: true
162 }
163 }],
164 xAxes: [{
165 type: 'time',
166 time: {
167 unitStepSize: 30
168 },
169 gridLines: {
170 display: false
171 }
172 }]
173 },
174 tooltips: {
175 enabled: false
176 } 135 }
177 }; 136 }],
178 137 xAxes: [{
179 var cpuStat = document.getElementById('cpuStat'); 138 type: 'time',
180 var memStat = document.getElementById('memStat'); 139 time: {
181 var loadStat = document.getElementById('loadStat'); 140 unitStepSize: 30
182 var responseTimeStat = document.getElementById('responseTimeStat');
183 var rpsStat = document.getElementById('rpsStat');
184
185 var cpuChartCtx = document.getElementById("cpuChart");
186 var memChartCtx = document.getElementById("memChart");
187 var loadChartCtx = document.getElementById("loadChart");
188 var responseTimeChartCtx = document.getElementById("responseTimeChart");
189 var rpsChartCtx = document.getElementById("rpsChart");
190
191 var cpuChart = new Chart(cpuChartCtx, {
192 type: 'line',
193 data: {
194 labels: labels,
195 datasets: cpuDataset,
196 }, 141 },
197 options: defaultOptions 142 gridLines: {
143 display: false
144 }
145 }]
146 },
147 tooltips: {
148 enabled: false
149 }
150 };
151
152 var createChart = function (ctx, dataset) {
153 return new Chart(ctx, {
154 type: 'line',
155 data: {
156 labels: [],
157 datasets: dataset
158 },
159 options: defaultOptions
160 })
161 };
162
163 var cpuDataset = Object.create(defaultDataset);
164 var memDataset = Object.create(defaultDataset);
165 var loadDataset = Object.create(defaultDataset);
166 var responseTimeDataset = Object.create(defaultDataset);
167 var rpsDataset = Object.create(defaultDataset);
168
169 var cpuStat = document.getElementById('cpuStat');
170 var memStat = document.getElementById('memStat');
171 var loadStat = document.getElementById('loadStat');
172 var responseTimeStat = document.getElementById('responseTimeStat');
173 var rpsStat = document.getElementById('rpsStat');
174
175 var cpuChartCtx = document.getElementById("cpuChart");
176 var memChartCtx = document.getElementById("memChart");
177 var loadChartCtx = document.getElementById("loadChart");
178 var responseTimeChartCtx = document.getElementById("responseTimeChart");
179 var rpsChartCtx = document.getElementById("rpsChart");
180
181 var cpuChart = createChart(cpuChartCtx, cpuDataset);
182 var memChart = createChart(memChartCtx, memDataset);
183 var loadChart = createChart(loadChartCtx, loadDataset);
184 var responseTimeChart = createChart(responseTimeChartCtx, responseTimeDataset);
185 var rpsChart = createChart(rpsChartCtx, rpsDataset);
186
187 var onSpanChange = function (e) {
188 e.target.classList.add('active');
189 defaultSpan = Integer.parseInt(e.target.id);
190
191 var otherSpans = document.getElementsByTagName('span');
192 for (var i = 0; i < otherSpans.length; i++) {
193 if (otherSpans[i] !== e.target) otherSpans[i].classList.remove('remove');
194 }
195 };
196
197 socket.on('start', function (data) {
198 // Remove last element of Array because it contains malformed responses data.
199 // To keep consistency we also remove os data.
200 data[defaultSpan].responses.pop();
201 data[defaultSpan].os.pop();
202
203 cpuStat.textContent = data[defaultSpan].os[data[defaultSpan].os.length - 1].cpu.toFixed(1) + '%';
204 cpuChart.data.datasets[defaultSpan].data = data[defaultSpan].os.map(function (point) {
205 return point.cpu;
198 }); 206 });
199 207 cpuChart.data.labels = data[defaultSpan].os.map(function (point) {
200 var memChart = new Chart(memChartCtx, { 208 return point.timestamp;
201 type: 'line',
202 data: {
203 labels: labels,
204 datasets: memDataset,
205 },
206 options: defaultOptions
207 }); 209 });
210 cpuChart.update();
208 211
209 var loadChart = new Chart(loadChartCtx, { 212 memStat.textContent = data[defaultSpan].os[data[defaultSpan].os.length - 1].memory.toFixed(1) + 'MB';
210 type: 'line', 213 memChart.data.datasets[defaultSpan].data = data[defaultSpan].os.map(function (point) {
211 data: { 214 return point.memory;
212 labels: labels,
213 datasets: loadDataset,
214 },
215 options: defaultOptions
216 }); 215 });
217 216 memChart.data.labels = data[defaultSpan].os.map(function (point) {
218 var responseTimeChart = new Chart(responseTimeChartCtx, { 217 return point.timestamp;
219 type: 'line',
220 data: {
221 labels: labels,
222 datasets: responseTimeDataset,
223 },
224 options: defaultOptions
225 }); 218 });
219 memChart.update();
226 220
227 var rpsChart = new Chart(rpsChartCtx, { 221 loadStat.textContent = data[defaultSpan].os[data[defaultSpan].os.length - 1].load[defaultSpan].toFixed(2);
228 type: 'line', 222 loadChart.data.datasets[defaultSpan].data = data[defaultSpan].os.map(function (point) {
229 data: { 223 return point.load[defaultSpan];
230 labels: labels,
231 datasets: rpsDataset,
232 },
233 options: defaultOptions
234 }); 224 });
235 225 loadChart.data.labels = data[defaultSpan].os.map(function (point) {
236 var onSpanChange = function(e) { 226 return point.timestamp;
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
246 socket.on('start', function(data) {
247 // Remove last element of Array because it contains malformed responses data.
248 // To keep consistency we also remove os data.
249 data[defaultSpan].responses.pop();
250 data[defaultSpan].os.pop();
251
252 cpuStat.textContent = data[defaultSpan].os[data[defaultSpan].os.length - 1].cpu.toFixed(1) + '%';
253 cpuChart.data.datasets[defaultSpan].data = data[defaultSpan].os.map(function(point) { return point.cpu; });
254 cpuChart.data.labels = data[defaultSpan].os.map(function(point) { return point.timestamp; });
255 cpuChart.update();
256
257 memStat.textContent = data[defaultSpan].os[data[defaultSpan].os.length - 1].memory.toFixed(1) + 'MB';
258 memChart.data.datasets[defaultSpan].data = data[defaultSpan].os.map(function(point) { return point.memory; });
259 memChart.data.labels = data[defaultSpan].os.map(function(point) { return point.timestamp; });
260 memChart.update();
261
262 loadStat.textContent = data[defaultSpan].os[data[defaultSpan].os.length - 1].load[defaultSpan].toFixed(2);
263 loadChart.data.datasets[defaultSpan].data = data[defaultSpan].os.map(function(point) { return point.load[defaultSpan]; });
264 loadChart.data.labels = data[defaultSpan].os.map(function(point) { return point.timestamp; });
265 loadChart.update();
266
267 responseTimeStat.textContent = data[defaultSpan].responses[data[defaultSpan].responses.length - 1].mean.toFixed(2) + 'ms';
268 responseTimeChart.data.datasets[defaultSpan].data = data[defaultSpan].responses.map(function(point) { return point.mean; });
269 responseTimeChart.data.labels = data[defaultSpan].responses.map(function(point) { return point.timestamp; });
270 responseTimeChart.update();
271
272 if (data[defaultSpan].responses.length >= 2) {
273 var deltaTime = data[defaultSpan].responses[data[defaultSpan].responses.length - 1].timestamp - data[defaultSpan].responses[data[defaultSpan].responses.length - 2].timestamp;
274 rpsStat.textContent = (data[defaultSpan].responses[data[defaultSpan].responses.length - 1].count / deltaTime * 1000).toFixed(2);
275 rpsChart.data.datasets[defaultSpan].data = data[defaultSpan].responses.map(function(point) { return point.count / deltaTime * 1000; });
276 rpsChart.data.labels = data[defaultSpan].responses.map(function(point) { return point.timestamp; });
277 rpsChart.update();
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 });
289 }); 227 });
228 loadChart.update();
290 229
291 socket.on('stats', function (data) { 230 responseTimeStat.textContent = data[defaultSpan].responses[data[defaultSpan].responses.length - 1].mean.toFixed(2) + 'ms';
292 cpuStat.textContent = data.os.cpu.toFixed(1) + '%'; 231 responseTimeChart.data.datasets[defaultSpan].data = data[defaultSpan].responses.map(function (point) {
293 cpuChart.data.datasets[0].data.push(data.os.cpu); 232 return point.mean;
294 cpuChart.data.labels.push(data.os.timestamp); 233 });
295 cpuChart.data.datasets[0].data.shift(); 234 responseTimeChart.data.labels = data[defaultSpan].responses.map(function (point) {
296 cpuChart.data.labels.shift(); 235 return point.timestamp;
297 cpuChart.update(); 236 });
298 237 responseTimeChart.update();
299 memStat.textContent = data.os.memory.toFixed(1) + 'MB'; 238
300 memChart.data.datasets[0].data.push(data.os.memory); 239 if (data[defaultSpan].responses.length >= 2) {
301 memChart.data.labels.push(data.os.timestamp); 240 var deltaTime = data[defaultSpan].responses[data[defaultSpan].responses.length - 1].timestamp - data[defaultSpan].responses[data[defaultSpan].responses.length - 2].timestamp;
302 memChart.data.datasets[0].data.shift(); 241 rpsStat.textContent = (data[defaultSpan].responses[data[defaultSpan].responses.length - 1].count / deltaTime * 1000).toFixed(2);
303 memChart.data.labels.shift(); 242 rpsChart.data.datasets[defaultSpan].data = data[defaultSpan].responses.map(function (point) {
304 memChart.update(); 243 return point.count / deltaTime * 1000;
305 244 });
306 loadStat.textContent = data.os.load[0].toFixed(2); 245 rpsChart.data.labels = data[defaultSpan].responses.map(function (point) {
307 loadChart.data.datasets[0].data.push(data.os.load[0]); 246 return point.timestamp;
308 loadChart.data.labels.push(data.os.timestamp); 247 });
309 loadChart.data.datasets[0].data.shift(); 248 rpsChart.update();
310 loadChart.data.labels.shift(); 249 }
311 loadChart.update(); 250
312 251 var spanControls = document.getElementById('span-controls');
313 responseTimeStat.textContent = data.responses.mean.toFixed(2) + 'ms'; 252 data.forEach(function (span, index) {
314 responseTimeChart.data.datasets[0].data.push(data.responses.mean); 253 var spanNode = document.createElement('span');
315 responseTimeChart.data.labels.push(data.responses.timestamp); 254 var textNode = document.createTextNode((span.retention * span.interval) / 60 + "M");
316 responseTimeChart.data.datasets[0].data.shift(); 255 spanNode.appendChild(textNode);
317 responseTimeChart.data.labels.shift(); 256 spanNode.setAttribute('id', index);
318 responseTimeChart.update(); 257 spanNode.onclick = onSpanChange;
319 258 spanControls.appendChild(spanNode);
320 var deltaTime = data.responses.timestamp - rpsChart.data.labels[rpsChart.data.labels.length - 1];
321 rpsStat.textContent = (data.responses.count / deltaTime * 1000).toFixed(2);
322 rpsChart.data.datasets[0].data.push(data.responses.count / deltaTime * 1000);
323 rpsChart.data.labels.push(data.responses.timestamp);
324 rpsChart.data.datasets[0].data.shift();
325 rpsChart.data.labels.shift();
326 rpsChart.update();
327 }); 259 });
260 });
261
262 socket.on('stats', function (data) {
263 cpuStat.textContent = data.os.cpu.toFixed(1) + '%';
264 cpuChart.data.datasets[0].data.push(data.os.cpu);
265 cpuChart.data.labels.push(data.os.timestamp);
266 cpuChart.data.datasets[0].data.shift();
267 cpuChart.data.labels.shift();
268 cpuChart.update();
269
270 memStat.textContent = data.os.memory.toFixed(1) + 'MB';
271 memChart.data.datasets[0].data.push(data.os.memory);
272 memChart.data.labels.push(data.os.timestamp);
273 memChart.data.datasets[0].data.shift();
274 memChart.data.labels.shift();
275 memChart.update();
276
277 loadStat.textContent = data.os.load[0].toFixed(2);
278 loadChart.data.datasets[0].data.push(data.os.load[0]);
279 loadChart.data.labels.push(data.os.timestamp);
280 loadChart.data.datasets[0].data.shift();
281 loadChart.data.labels.shift();
282 loadChart.update();
283
284 responseTimeStat.textContent = data.responses.mean.toFixed(2) + 'ms';
285 responseTimeChart.data.datasets[0].data.push(data.responses.mean);
286 responseTimeChart.data.labels.push(data.responses.timestamp);
287 responseTimeChart.data.datasets[0].data.shift();
288 responseTimeChart.data.labels.shift();
289 responseTimeChart.update();
290
291 var deltaTime = data.responses.timestamp - rpsChart.data.labels[rpsChart.data.labels.length - 1];
292 rpsStat.textContent = (data.responses.count / deltaTime * 1000).toFixed(2);
293 rpsChart.data.datasets[0].data.push(data.responses.count / deltaTime * 1000);
294 rpsChart.data.labels.push(data.responses.timestamp);
295 rpsChart.data.datasets[0].data.shift();
296 rpsChart.data.labels.shift();
297 rpsChart.update();
298 });
328 </script> 299 </script>
329 </body> 300 </body>
330 </html> 301 </html>
...\ No newline at end of file ...\ No newline at end of file
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!