️Change indents, refactor defaults
Showing
1 changed file
with
58 additions
and
87 deletions
... | @@ -119,39 +119,12 @@ | ... | @@ -119,39 +119,12 @@ |
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 = [{ | ||
123 | label: 'CPU Usage in %', | ||
124 | data: [], | ||
125 | lineTension: 0.3, | ||
126 | pointRadius: 0, | ||
127 | }]; | ||
128 | |||
129 | var memDataset = [{ | ||
130 | label: 'Memory Usage in MB', | ||
131 | data: [], | ||
132 | lineTension: 0.2, | ||
133 | pointRadius: 0, | ||
134 | }]; | ||
135 | 122 | ||
136 | var loadDataset = [{ | 123 | var defaultDataset = [{ |
137 | label: '1 Minute Load', | 124 | label: '', |
138 | data: [], | 125 | data: [], |
139 | lineTension: 0.2, | 126 | lineTension: 0.2, |
140 | pointRadius: 0, | 127 | 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 | }]; | 128 | }]; |
156 | 129 | ||
157 | var defaultOptions = { | 130 | var defaultOptions = { |
... | @@ -176,6 +149,23 @@ | ... | @@ -176,6 +149,23 @@ |
176 | } | 149 | } |
177 | }; | 150 | }; |
178 | 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 | |||
179 | var cpuStat = document.getElementById('cpuStat'); | 169 | var cpuStat = document.getElementById('cpuStat'); |
180 | var memStat = document.getElementById('memStat'); | 170 | var memStat = document.getElementById('memStat'); |
181 | var loadStat = document.getElementById('loadStat'); | 171 | var loadStat = document.getElementById('loadStat'); |
... | @@ -188,52 +178,13 @@ | ... | @@ -188,52 +178,13 @@ |
188 | var responseTimeChartCtx = document.getElementById("responseTimeChart"); | 178 | var responseTimeChartCtx = document.getElementById("responseTimeChart"); |
189 | var rpsChartCtx = document.getElementById("rpsChart"); | 179 | var rpsChartCtx = document.getElementById("rpsChart"); |
190 | 180 | ||
191 | var cpuChart = new Chart(cpuChartCtx, { | 181 | var cpuChart = createChart(cpuChartCtx, cpuDataset); |
192 | type: 'line', | 182 | var memChart = createChart(memChartCtx, memDataset); |
193 | data: { | 183 | var loadChart = createChart(loadChartCtx, loadDataset); |
194 | labels: labels, | 184 | var responseTimeChart = createChart(responseTimeChartCtx, responseTimeDataset); |
195 | datasets: cpuDataset, | 185 | var rpsChart = createChart(rpsChartCtx, rpsDataset); |
196 | }, | ||
197 | options: defaultOptions | ||
198 | }); | ||
199 | |||
200 | var memChart = new Chart(memChartCtx, { | ||
201 | type: 'line', | ||
202 | data: { | ||
203 | labels: labels, | ||
204 | datasets: memDataset, | ||
205 | }, | ||
206 | options: defaultOptions | ||
207 | }); | ||
208 | |||
209 | var loadChart = new Chart(loadChartCtx, { | ||
210 | type: 'line', | ||
211 | data: { | ||
212 | labels: labels, | ||
213 | datasets: loadDataset, | ||
214 | }, | ||
215 | options: defaultOptions | ||
216 | }); | ||
217 | |||
218 | var responseTimeChart = new Chart(responseTimeChartCtx, { | ||
219 | type: 'line', | ||
220 | data: { | ||
221 | labels: labels, | ||
222 | datasets: responseTimeDataset, | ||
223 | }, | ||
224 | options: defaultOptions | ||
225 | }); | ||
226 | |||
227 | var rpsChart = new Chart(rpsChartCtx, { | ||
228 | type: 'line', | ||
229 | data: { | ||
230 | labels: labels, | ||
231 | datasets: rpsDataset, | ||
232 | }, | ||
233 | options: defaultOptions | ||
234 | }); | ||
235 | 186 | ||
236 | var onSpanChange = function(e) { | 187 | var onSpanChange = function (e) { |
237 | e.target.classList.add('active'); | 188 | e.target.classList.add('active'); |
238 | defaultSpan = Integer.parseInt(e.target.id); | 189 | defaultSpan = Integer.parseInt(e.target.id); |
239 | 190 | ||
... | @@ -243,42 +194,62 @@ | ... | @@ -243,42 +194,62 @@ |
243 | } | 194 | } |
244 | }; | 195 | }; |
245 | 196 | ||
246 | socket.on('start', function(data) { | 197 | socket.on('start', function (data) { |
247 | // Remove last element of Array because it contains malformed responses data. | 198 | // Remove last element of Array because it contains malformed responses data. |
248 | // To keep consistency we also remove os data. | 199 | // To keep consistency we also remove os data. |
249 | data[defaultSpan].responses.pop(); | 200 | data[defaultSpan].responses.pop(); |
250 | data[defaultSpan].os.pop(); | 201 | data[defaultSpan].os.pop(); |
251 | 202 | ||
252 | cpuStat.textContent = data[defaultSpan].os[data[defaultSpan].os.length - 1].cpu.toFixed(1) + '%'; | 203 | 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; }); | 204 | cpuChart.data.datasets[defaultSpan].data = data[defaultSpan].os.map(function (point) { |
254 | cpuChart.data.labels = data[defaultSpan].os.map(function(point) { return point.timestamp; }); | 205 | return point.cpu; |
206 | }); | ||
207 | cpuChart.data.labels = data[defaultSpan].os.map(function (point) { | ||
208 | return point.timestamp; | ||
209 | }); | ||
255 | cpuChart.update(); | 210 | cpuChart.update(); |
256 | 211 | ||
257 | memStat.textContent = data[defaultSpan].os[data[defaultSpan].os.length - 1].memory.toFixed(1) + 'MB'; | 212 | 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; }); | 213 | memChart.data.datasets[defaultSpan].data = data[defaultSpan].os.map(function (point) { |
259 | memChart.data.labels = data[defaultSpan].os.map(function(point) { return point.timestamp; }); | 214 | return point.memory; |
215 | }); | ||
216 | memChart.data.labels = data[defaultSpan].os.map(function (point) { | ||
217 | return point.timestamp; | ||
218 | }); | ||
260 | memChart.update(); | 219 | memChart.update(); |
261 | 220 | ||
262 | loadStat.textContent = data[defaultSpan].os[data[defaultSpan].os.length - 1].load[defaultSpan].toFixed(2); | 221 | 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]; }); | 222 | loadChart.data.datasets[defaultSpan].data = data[defaultSpan].os.map(function (point) { |
264 | loadChart.data.labels = data[defaultSpan].os.map(function(point) { return point.timestamp; }); | 223 | return point.load[defaultSpan]; |
224 | }); | ||
225 | loadChart.data.labels = data[defaultSpan].os.map(function (point) { | ||
226 | return point.timestamp; | ||
227 | }); | ||
265 | loadChart.update(); | 228 | loadChart.update(); |
266 | 229 | ||
267 | responseTimeStat.textContent = data[defaultSpan].responses[data[defaultSpan].responses.length - 1].mean.toFixed(2) + 'ms'; | 230 | 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; }); | 231 | responseTimeChart.data.datasets[defaultSpan].data = data[defaultSpan].responses.map(function (point) { |
269 | responseTimeChart.data.labels = data[defaultSpan].responses.map(function(point) { return point.timestamp; }); | 232 | return point.mean; |
233 | }); | ||
234 | responseTimeChart.data.labels = data[defaultSpan].responses.map(function (point) { | ||
235 | return point.timestamp; | ||
236 | }); | ||
270 | responseTimeChart.update(); | 237 | responseTimeChart.update(); |
271 | 238 | ||
272 | if (data[defaultSpan].responses.length >= 2) { | 239 | 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; | 240 | 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); | 241 | 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; }); | 242 | rpsChart.data.datasets[defaultSpan].data = data[defaultSpan].responses.map(function (point) { |
276 | rpsChart.data.labels = data[defaultSpan].responses.map(function(point) { return point.timestamp; }); | 243 | return point.count / deltaTime * 1000; |
244 | }); | ||
245 | rpsChart.data.labels = data[defaultSpan].responses.map(function (point) { | ||
246 | return point.timestamp; | ||
247 | }); | ||
277 | rpsChart.update(); | 248 | rpsChart.update(); |
278 | } | 249 | } |
279 | 250 | ||
280 | var spanControls = document.getElementById('span-controls'); | 251 | var spanControls = document.getElementById('span-controls'); |
281 | data.forEach(function(span, index) { | 252 | data.forEach(function (span, index) { |
282 | var spanNode = document.createElement('span'); | 253 | var spanNode = document.createElement('span'); |
283 | var textNode = document.createTextNode((span.retention * span.interval) / 60 + "M"); | 254 | var textNode = document.createTextNode((span.retention * span.interval) / 60 + "M"); |
284 | spanNode.appendChild(textNode); | 255 | spanNode.appendChild(textNode); | ... | ... |
-
Please register or sign in to post a comment