a681773a by Rafal Wilinski

:hourglass:️Change indents, refactor defaults

1 parent ea793344
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);
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!