Layout and statistics improvements
Showing
2 changed files
with
26 additions
and
17 deletions
... | @@ -25,17 +25,13 @@ | ... | @@ -25,17 +25,13 @@ |
25 | } | 25 | } |
26 | 26 | ||
27 | .stats-column { | 27 | .stats-column { |
28 | display: flex; | 28 | flex: 0 0 200px; |
29 | flex-direction: column; | ||
30 | justify-content: center; | ||
31 | align-content: center; | ||
32 | margin-right: 3em; | ||
33 | } | 29 | } |
34 | 30 | ||
35 | .container { | 31 | .container { |
36 | display: flex; | 32 | display: flex; |
37 | flex-direction: row; | 33 | flex-direction: row; |
38 | margin: auto; | 34 | margin-top: 20px; |
39 | } | 35 | } |
40 | 36 | ||
41 | .footer { | 37 | .footer { |
... | @@ -65,6 +61,20 @@ | ... | @@ -65,6 +61,20 @@ |
65 | </div> | 61 | </div> |
66 | <canvas id="memChart" width="400" height="100"></canvas> | 62 | <canvas id="memChart" width="400" height="100"></canvas> |
67 | </div> | 63 | </div> |
64 | <div class="container"> | ||
65 | <div class="stats-column"> | ||
66 | <h5>Requests per second</h5> | ||
67 | <h1 id="rpsStat">1.45</h1> | ||
68 | </div> | ||
69 | <canvas id="rpsChart" width="400" height="100"></canvas> | ||
70 | </div> | ||
71 | <div class="Status Codes"> | ||
72 | <div class="stats-column"> | ||
73 | <h5>Response status codes</h5> | ||
74 | <h1 id="codeStat">OK</h1> | ||
75 | </div> | ||
76 | <canvas id="codeChart" width="400" height="100"></canvas> | ||
77 | </div> | ||
68 | <div class="footer"> | 78 | <div class="footer"> |
69 | <p>Powered by Socket.io</p> | 79 | <p>Powered by Socket.io</p> |
70 | </div> | 80 | </div> |
... | @@ -135,12 +145,13 @@ | ... | @@ -135,12 +145,13 @@ |
135 | }); | 145 | }); |
136 | 146 | ||
137 | socket.on('stats', function (data) { | 147 | socket.on('stats', function (data) { |
148 | console.log(data); | ||
138 | cpuStat.textContent = data.osStats[data.osStats.length - 1].cpu.toFixed(1) + '%'; | 149 | cpuStat.textContent = data.osStats[data.osStats.length - 1].cpu.toFixed(1) + '%'; |
139 | cpuChart.data.datasets[0].data = data.osStats.map((point) => point.cpu); | 150 | cpuChart.data.datasets[0].data = data.osStats.map((point) => point.cpu); |
140 | cpuChart.data.labels = data.osStats.map((point) => point.timestamp); | 151 | cpuChart.data.labels = data.osStats.map((point) => point.timestamp); |
141 | cpuChart.update(); | 152 | cpuChart.update(); |
142 | 153 | ||
143 | memStat.textContent = (data.osStats[data.osStats.length - 1].memory / 1024 / 1024).toFixed(1) + 'MB'; | 154 | memStat.textContent = data.osStats[data.osStats.length - 1].memory.toFixed(1) + 'MB'; |
144 | memChart.data.datasets[0].data = data.osStats.map((point) => point.memory); | 155 | memChart.data.datasets[0].data = data.osStats.map((point) => point.memory); |
145 | memChart.data.labels = data.osStats.map((point) => point.timestamp); | 156 | memChart.data.labels = data.osStats.map((point) => point.timestamp); |
146 | memChart.update(); | 157 | memChart.update(); | ... | ... |
... | @@ -14,19 +14,22 @@ | ... | @@ -14,19 +14,22 @@ |
14 | retention: 100, | 14 | retention: 100, |
15 | }; | 15 | }; |
16 | 16 | ||
17 | const gatherOsMetrics = (io) => { | 17 | const gatherOsMetrics = (io, config) => { |
18 | pidusage.stat(process.pid, (err, stat) => { | 18 | pidusage.stat(process.pid, (err, stat) => { |
19 | stat.timestamp = Date.now(); | 19 | stat.timestamp = Date.now(); |
20 | // Convert from B to MB | ||
21 | stat.memory = stat.memory / 1024 / 1024; | ||
22 | |||
20 | osStats.push(stat); | 23 | osStats.push(stat); |
24 | if (osStats.length >= config.retention) osStats.shift(); | ||
25 | |||
21 | sendMetrics(io); | 26 | sendMetrics(io); |
22 | }); | 27 | }); |
23 | }; | 28 | }; |
24 | 29 | ||
25 | const sendMetrics = (io) => { | 30 | const sendMetrics = (io) => { |
26 | osStats.slice(Math.max(osStats.length - defaultConfig.retention, 1)); | ||
27 | |||
28 | io.emit('stats', { | 31 | io.emit('stats', { |
29 | osStats: osStats.slice(Math.max(osStats.length - defaultConfig.retention, 1)), | 32 | osStats, |
30 | responseTimes | 33 | responseTimes |
31 | }); | 34 | }); |
32 | }; | 35 | }; |
... | @@ -50,11 +53,7 @@ | ... | @@ -50,11 +53,7 @@ |
50 | 53 | ||
51 | const io = require('socket.io')(config.socketPort); | 54 | const io = require('socket.io')(config.socketPort); |
52 | 55 | ||
53 | setInterval(() => gatherOsMetrics(io), config.interval * 1000); | 56 | setInterval(() => gatherOsMetrics(io, config), config.interval * 1000); |
54 | |||
55 | io.on('connection', (socket) => { | ||
56 | |||
57 | }); | ||
58 | 57 | ||
59 | return (req, res, next) => { | 58 | return (req, res, next) => { |
60 | const startTime = process.hrtime(); | 59 | const startTime = process.hrtime(); |
... | @@ -70,7 +69,6 @@ | ... | @@ -70,7 +69,6 @@ |
70 | responseTime, | 69 | responseTime, |
71 | timestamp: Date.now() | 70 | timestamp: Date.now() |
72 | }); | 71 | }); |
73 | |||
74 | }); | 72 | }); |
75 | 73 | ||
76 | next(); | 74 | next(); | ... | ... |
-
Please register or sign in to post a comment