Skip to content

Jabis Sev贸n / esm

Go to a project
Toggle navigation
Toggle navigation pinning
8693ffe9 by Rafal Wilinski
Options

:thermometer: Add back support for response times

1 parent f4d86a89
Inline Side-by-side
Showing 2 changed files with 69 additions and 6 deletions
index.html
...@@ -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 &#9829; with Socket.io & Chart.js</p> 97 <p>Made with &#9829; 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>
......
index.js
...@@ -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,
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!