Add back support for response times
Showing
2 changed files
with
69 additions
and
6 deletions
... | @@ -32,6 +32,7 @@ | ... | @@ -32,6 +32,7 @@ |
32 | display: flex; | 32 | display: flex; |
33 | flex-direction: row; | 33 | flex-direction: row; |
34 | margin-top: 20px; | 34 | margin-top: 20px; |
35 | height: 100px; | ||
35 | } | 36 | } |
36 | 37 | ||
37 | .footer { | 38 | .footer { |
... | @@ -42,11 +43,28 @@ | ... | @@ -42,11 +43,28 @@ |
42 | right: 0; | 43 | right: 0; |
43 | bottom: 0; | 44 | bottom: 0; |
44 | } | 45 | } |
46 | |||
47 | .span-controls { | ||
48 | float: right; | ||
49 | } | ||
50 | |||
51 | canvas { | ||
52 | width: 100%; | ||
53 | height: 100%; | ||
54 | } | ||
45 | </style> | 55 | </style> |
46 | </head> | 56 | </head> |
47 | <body> | 57 | <body> |
48 | <div style="width: 400px; margin: auto"> | 58 | <div style="width: 400px; margin: auto"> |
49 | <h3>Express Status</h3> | 59 | <div class="header"> |
60 | <span><b>Express Status</b></span> | ||
61 | <div class="span-controls"> | ||
62 | <span>1M</span> | ||
63 | <span>15M</span> | ||
64 | <span>1H</span> | ||
65 | <span>24H</span> | ||
66 | </div> | ||
67 | </div> | ||
50 | <div class="container"> | 68 | <div class="container"> |
51 | <div class="stats-column"> | 69 | <div class="stats-column"> |
52 | <h5>CPU Usage</h5> | 70 | <h5>CPU Usage</h5> |
... | @@ -68,6 +86,13 @@ | ... | @@ -68,6 +86,13 @@ |
68 | </div> | 86 | </div> |
69 | <canvas id="loadChart" width="400" height="100"></canvas> | 87 | <canvas id="loadChart" width="400" height="100"></canvas> |
70 | </div> | 88 | </div> |
89 | <div class="container"> | ||
90 | <div class="stats-column"> | ||
91 | <h5>Response Time</h5> | ||
92 | <h1 id="responseTimeStat">-</h1> | ||
93 | </div> | ||
94 | <canvas id="responseTimeChart" width="400" height="100"></canvas> | ||
95 | </div> | ||
71 | <div class="footer"> | 96 | <div class="footer"> |
72 | <p>Made with ♥ with Socket.io & Chart.js</p> | 97 | <p>Made with ♥ with Socket.io & Chart.js</p> |
73 | </div> | 98 | </div> |
... | @@ -103,6 +128,13 @@ | ... | @@ -103,6 +128,13 @@ |
103 | pointRadius: 0, | 128 | pointRadius: 0, |
104 | }]; | 129 | }]; |
105 | 130 | ||
131 | var responseTimeDataset = [{ | ||
132 | label: 'Response Time', | ||
133 | data: [], | ||
134 | lineTension: 0.2, | ||
135 | pointRadius: 0, | ||
136 | }]; | ||
137 | |||
106 | var defaultOptions = { | 138 | var defaultOptions = { |
107 | scales: { | 139 | scales: { |
108 | yAxes: [{ | 140 | yAxes: [{ |
... | @@ -128,10 +160,12 @@ | ... | @@ -128,10 +160,12 @@ |
128 | var cpuStat = document.getElementById('cpuStat'); | 160 | var cpuStat = document.getElementById('cpuStat'); |
129 | var memStat = document.getElementById('memStat'); | 161 | var memStat = document.getElementById('memStat'); |
130 | var loadStat = document.getElementById('loadStat'); | 162 | var loadStat = document.getElementById('loadStat'); |
163 | var responseTimeStat = document.getElementById('responseTimeStat'); | ||
131 | 164 | ||
132 | var cpuChartCtx = document.getElementById("cpuChart"); | 165 | var cpuChartCtx = document.getElementById("cpuChart"); |
133 | var memChartCtx = document.getElementById("memChart"); | 166 | var memChartCtx = document.getElementById("memChart"); |
134 | var loadChartCtx = document.getElementById("loadChart"); | 167 | var loadChartCtx = document.getElementById("loadChart"); |
168 | var responseTimeChartCtx = document.getElementById("responseTimeChart"); | ||
135 | 169 | ||
136 | var cpuChart = new Chart(cpuChartCtx, { | 170 | var cpuChart = new Chart(cpuChartCtx, { |
137 | type: 'line', | 171 | type: 'line', |
... | @@ -160,6 +194,14 @@ | ... | @@ -160,6 +194,14 @@ |
160 | options: defaultOptions | 194 | options: defaultOptions |
161 | }); | 195 | }); |
162 | 196 | ||
197 | var responseTimeChart = new Chart(responseTimeChartCtx, { | ||
198 | type: 'line', | ||
199 | data: { | ||
200 | labels: labels, | ||
201 | datasets: responseTimeDataset, | ||
202 | }, | ||
203 | options: defaultOptions | ||
204 | }); | ||
163 | 205 | ||
164 | socket.on('stats', function (data) { | 206 | socket.on('stats', function (data) { |
165 | console.log(data); | 207 | console.log(data); |
... | @@ -177,6 +219,11 @@ | ... | @@ -177,6 +219,11 @@ |
177 | loadChart.data.datasets[0].data = data.os.map(function(point) { return point.load[0]; }); | 219 | loadChart.data.datasets[0].data = data.os.map(function(point) { return point.load[0]; }); |
178 | loadChart.data.labels = data.os.map(function(point) { return point.timestamp; }); | 220 | loadChart.data.labels = data.os.map(function(point) { return point.timestamp; }); |
179 | loadChart.update(); | 221 | loadChart.update(); |
222 | |||
223 | responseTimeStat.textContent = data.responses[data.responses.length - 1].mean.toFixed(2) + 'ms'; | ||
224 | 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; }); | ||
226 | responseTimeChart.update(); | ||
180 | }); | 227 | }); |
181 | </script> | 228 | </script> |
182 | </body> | 229 | </body> | ... | ... |
... | @@ -15,17 +15,33 @@ | ... | @@ -15,17 +15,33 @@ |
15 | }] | 15 | }] |
16 | }; | 16 | }; |
17 | 17 | ||
18 | Array.prototype.last = function() { | ||
19 | return this[this.length - 1]; | ||
20 | }; | ||
21 | |||
18 | const gatherOsMetrics = (io, span) => { | 22 | const gatherOsMetrics = (io, span) => { |
23 | const defaultResponse = { | ||
24 | '2': 0, | ||
25 | '3': 0, | ||
26 | '4': 0, | ||
27 | '5': 0, | ||
28 | count: 0, | ||
29 | mean: 0, | ||
30 | timestamp: Date.now() | ||
31 | }; | ||
32 | |||
19 | pidusage.stat(process.pid, (err, stat) => { | 33 | pidusage.stat(process.pid, (err, stat) => { |
20 | stat.timestamp = Date.now(); | ||
21 | 34 | ||
22 | // Convert from B to MB | 35 | // Convert from B to MB |
23 | stat.memory = stat.memory / 1024 / 1024; | 36 | stat.memory = stat.memory / 1024 / 1024; |
24 | stat.load = os.loadavg(); | 37 | stat.load = os.loadavg(); |
38 | stat.timestamp = Date.now(); | ||
25 | 39 | ||
26 | span.os.push(stat); | 40 | span.os.push(stat); |
41 | if (!span.responses[0] || span.responses.last().timestamp + (span.interval * 1000) < Date.now()) span.responses.push(defaultResponse); | ||
27 | 42 | ||
28 | 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(); | ||
29 | 45 | ||
30 | sendMetrics(io, span); | 46 | sendMetrics(io, span); |
31 | }); | 47 | }); |
... | @@ -80,10 +96,10 @@ | ... | @@ -80,10 +96,10 @@ |
80 | config.spans.forEach((span) => { | 96 | config.spans.forEach((span) => { |
81 | const last = span.responses[span.responses.length - 1]; | 97 | const last = span.responses[span.responses.length - 1]; |
82 | if (last !== undefined && | 98 | if (last !== undefined && |
83 | span.responses[span.responses.length - 1].timestamp / 1000 + span.interval > Date.now() / 1000) { | 99 | span.responses.last().timestamp / 1000 + span.interval > Date.now() / 1000) { |
84 | span.responses[span.responses.length - 1][category]++; | 100 | span.responses.last()[category]++; |
85 | span.responses[span.responses.length - 1].mean = responseTime; | 101 | span.responses.last().mean = responseTime; |
86 | span.responses[span.responses.length - 1].count++; | 102 | span.responses.last().count++; |
87 | } else { | 103 | } else { |
88 | span.responses.push({ | 104 | span.responses.push({ |
89 | '2': category === 2 ? 1 : 0, | 105 | '2': category === 2 ? 1 : 0, | ... | ... |
-
Please register or sign in to post a comment