Skip to content

Commit

Permalink
code refactoring
Browse files Browse the repository at this point in the history
  • Loading branch information
Ziya SARIKAYA committed Aug 23, 2016
1 parent 7ff092e commit f3d886c
Show file tree
Hide file tree
Showing 6 changed files with 524 additions and 321 deletions.
385 changes: 385 additions & 0 deletions app.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,385 @@
// Chart.defaults.global.defaultFontSize = 8;
// Chart.defaults.global.animation.duration = 500;
// Chart.defaults.global.legend.display = false;
// Chart.defaults.global.elements.line.backgroundColor = "rgba(0,0,0,0)";
// Chart.defaults.global.elements.line.borderColor = "rgba(0,0,0,0.9)";
// Chart.defaults.global.elements.line.borderWidth = 2;

// var socket = io(location.protocol + '//' + location.hostname + ':' + location.port);
// var defaultSpan = 0;
// var spans = [];

// var defaultDataset = {
// label: '',
// data: [],
// lineTension: 0.2,
// pointRadius: 0
// };

// var defaultOptions = {
// scales: {
// yAxes: [{
// ticks: {
// beginAtZero: true
// }
// }],
// xAxes: [{
// type: 'time',
// time: {
// unitStepSize: 30
// },
// gridLines: {
// display: false
// }
// }]
// },
// tooltips: {
// enabled: false
// },
// responsive: true,
// maintainAspectRatio: false,
// animation: false
// };

// var createChart = function (ctx, dataset) {
// return new Chart(ctx, {
// type: 'line',
// data: {
// labels: [],
// datasets: dataset
// },
// options: defaultOptions
// });
// };

// var addTimestamp = function (point) {
// return point.timestamp;
// };

// var cpuDataset = [Object.create(defaultDataset)];
// var memDataset = [Object.create(defaultDataset)];
// var loadDataset = [Object.create(defaultDataset)];
// var responseTimeDataset = [Object.create(defaultDataset)];
// var rpsDataset = [Object.create(defaultDataset)];

// var cpuStat = document.getElementById('cpuStat');
// var memStat = document.getElementById('memStat');
// var loadStat = document.getElementById('loadStat');
// var responseTimeStat = document.getElementById('responseTimeStat');
// var rpsStat = document.getElementById('rpsStat');

// var cpuChartCtx = document.getElementById("cpuChart");
// var memChartCtx = document.getElementById("memChart");
// var loadChartCtx = document.getElementById("loadChart");
// var responseTimeChartCtx = document.getElementById("responseTimeChart");
// var rpsChartCtx = document.getElementById("rpsChart");

// var cpuChart = createChart(cpuChartCtx, cpuDataset);
// var memChart = createChart(memChartCtx, memDataset);
// var loadChart = createChart(loadChartCtx, loadDataset);
// var responseTimeChart = createChart(responseTimeChartCtx, responseTimeDataset);
// var rpsChart = createChart(rpsChartCtx, rpsDataset);

// var charts = [cpuChart, memChart, loadChart, responseTimeChart, rpsChart];

// var onSpanChange = function (e) {
// e.target.classList.add('active');
// defaultSpan = parseInt(e.target.id);

// var otherSpans = document.getElementsByTagName('span');
// for (var i = 0; i < otherSpans.length; i++) {
// if (otherSpans[i] !== e.target) otherSpans[i].classList.remove('active');
// }

// socket.emit('change');
// };

// socket.on('start', function (data) {
// // Remove last element of Array because it contains malformed responses data.
// // To keep consistency we also remove os data.
// data[defaultSpan].responses.pop();
// data[defaultSpan].os.pop();

// cpuStat.textContent = data[defaultSpan].os[data[defaultSpan].os.length - 1].cpu.toFixed(1) + '%';
// cpuChart.data.datasets[0].data = data[defaultSpan].os.map(function (point) {
// return point.cpu;
// });
// cpuChart.data.labels = data[defaultSpan].os.map(addTimestamp);

// memStat.textContent = data[defaultSpan].os[data[defaultSpan].os.length - 1].memory.toFixed(1) + 'MB';
// memChart.data.datasets[0].data = data[defaultSpan].os.map(function (point) {
// return point.memory;
// });
// memChart.data.labels = data[defaultSpan].os.map(addTimestamp);

// loadStat.textContent = data[defaultSpan].os[data[defaultSpan].os.length - 1].load[defaultSpan].toFixed(2);
// loadChart.data.datasets[0].data = data[defaultSpan].os.map(function (point) {
// return point.load[0];
// });
// loadChart.data.labels = data[defaultSpan].os.map(addTimestamp);

// responseTimeStat.textContent = data[defaultSpan].responses[data[defaultSpan].responses.length - 1].mean.toFixed(2) + 'ms';
// responseTimeChart.data.datasets[0].data = data[defaultSpan].responses.map(function (point) {
// return point.mean;
// });
// responseTimeChart.data.labels = data[defaultSpan].responses.map(addTimestamp);

// if (data[defaultSpan].responses.length >= 2) {
// var deltaTime = data[defaultSpan].responses[data[defaultSpan].responses.length - 1].timestamp - data[defaultSpan].responses[data[defaultSpan].responses.length - 2].timestamp;
// rpsStat.textContent = (data[defaultSpan].responses[data[defaultSpan].responses.length - 1].count / deltaTime * 1000).toFixed(2);
// rpsChart.data.datasets[0].data = data[defaultSpan].responses.map(function (point) {
// return point.count / deltaTime * 1000;
// });
// rpsChart.data.labels = data[defaultSpan].responses.map(addTimestamp);
// }

// charts.forEach(function (chart) {
// chart.update();
// });

// var spanControls = document.getElementById('span-controls');
// if (data.length !== spans.length) {
// data.forEach(function (span, index) {
// spans.push({
// retention: span.retention,
// interval: span.interval
// });

// var spanNode = document.createElement('span');
// var textNode = document.createTextNode((span.retention * span.interval) / 60 + "M");
// spanNode.appendChild(textNode);
// spanNode.setAttribute('id', index);
// spanNode.onclick = onSpanChange;
// spanControls.appendChild(spanNode);
// });
// document.getElementsByTagName('span')[0].classList.add('active');
// }
// });

// socket.on('stats', function (data) {
// if (data.retention === spans[defaultSpan].retention && data.interval === spans[defaultSpan].interval) {
// cpuStat.textContent = data.os.cpu.toFixed(1) + '%';
// cpuChart.data.datasets[0].data.push(data.os.cpu);
// cpuChart.data.labels.push(data.os.timestamp);

// memStat.textContent = data.os.memory.toFixed(1) + 'MB';
// memChart.data.datasets[0].data.push(data.os.memory);
// memChart.data.labels.push(data.os.timestamp);

// loadStat.textContent = data.os.load[0].toFixed(2);
// loadChart.data.datasets[0].data.push(data.os.load[0]);
// loadChart.data.labels.push(data.os.timestamp);

// responseTimeStat.textContent = data.responses.mean.toFixed(2) + 'ms';
// responseTimeChart.data.datasets[0].data.push(data.responses.mean);
// responseTimeChart.data.labels.push(data.responses.timestamp);

// var deltaTime = data.responses.timestamp - rpsChart.data.labels[rpsChart.data.labels.length - 1];
// rpsStat.textContent = (data.responses.count / deltaTime * 1000).toFixed(2);
// rpsChart.data.datasets[0].data.push(data.responses.count / deltaTime * 1000);
// rpsChart.data.labels.push(data.responses.timestamp);

// charts.forEach(function (chart) {
// if (spans[defaultSpan].retention < chart.data.labels.length) {
// chart.data.datasets[0].data.shift();
// chart.data.labels.shift();
// }

// chart.update();
// });
// }
// });

'use strict';

Chart.defaults.global.defaultFontSize = 8;
Chart.defaults.global.animation.duration = 500;
Chart.defaults.global.legend.display = false;
Chart.defaults.global.elements.line.backgroundColor = "rgba(0,0,0,0)";
Chart.defaults.global.elements.line.borderColor = "rgba(0,0,0,0.9)";
Chart.defaults.global.elements.line.borderWidth = 2;

var socket = io(location.protocol + '//' + location.hostname + ':' + location.port);
var defaultSpan = 0;
var spans = [];

var defaultDataset = {
label: '',
data: [],
lineTension: 0.2,
pointRadius: 0
};

var defaultOptions = {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
type: 'time',
time: {
unitStepSize: 30
},
gridLines: {
display: false
}
}]
},
tooltips: {
enabled: false
},
responsive: true,
maintainAspectRatio: false,
animation: false
};

var createChart = function (ctx, dataset) {
return new Chart(ctx, {
type: 'line',
data: {
labels: [],
datasets: dataset
},
options: defaultOptions
});
};

var addTimestamp = function(point) {
return point.timestamp;
};

var cpuDataset = [Object.create(defaultDataset)];
var memDataset = [Object.create(defaultDataset)];
var loadDataset = [Object.create(defaultDataset)];
var responseTimeDataset = [Object.create(defaultDataset)];
var rpsDataset = [Object.create(defaultDataset)];

var cpuStat = document.getElementById('cpuStat');
var memStat = document.getElementById('memStat');
var loadStat = document.getElementById('loadStat');
var responseTimeStat = document.getElementById('responseTimeStat');
var rpsStat = document.getElementById('rpsStat');

var cpuChartCtx = document.getElementById("cpuChart");
var memChartCtx = document.getElementById("memChart");
var loadChartCtx = document.getElementById("loadChart");
var responseTimeChartCtx = document.getElementById("responseTimeChart");
var rpsChartCtx = document.getElementById("rpsChart");

var cpuChart = createChart(cpuChartCtx, cpuDataset);
var memChart = createChart(memChartCtx, memDataset);
var loadChart = createChart(loadChartCtx, loadDataset);
var responseTimeChart = createChart(responseTimeChartCtx, responseTimeDataset);
var rpsChart = createChart(rpsChartCtx, rpsDataset);

var charts = [cpuChart, memChart, loadChart, responseTimeChart, rpsChart];

var onSpanChange = function (e) {
e.target.classList.add('active');
defaultSpan = parseInt(e.target.id);

var otherSpans = document.getElementsByTagName('span');
for (var i = 0; i < otherSpans.length; i++) {
if (otherSpans[i] !== e.target) otherSpans[i].classList.remove('active');
}

socket.emit('change');
};

socket.on('start', function (data) {
// Remove last element of Array because it contains malformed responses data.
// To keep consistency we also remove os data.
data[defaultSpan].responses.pop();
data[defaultSpan].os.pop();

cpuStat.textContent = data[defaultSpan].os[data[defaultSpan].os.length - 1].cpu.toFixed(1) + '%';
cpuChart.data.datasets[0].data = data[defaultSpan].os.map(function (point) {
return point.cpu;
});
cpuChart.data.labels = data[defaultSpan].os.map(addTimestamp);

memStat.textContent = data[defaultSpan].os[data[defaultSpan].os.length - 1].memory.toFixed(1) + 'MB';
memChart.data.datasets[0].data = data[defaultSpan].os.map(function (point) {
return point.memory;
});
memChart.data.labels = data[defaultSpan].os.map(addTimestamp);

loadStat.textContent = data[defaultSpan].os[data[defaultSpan].os.length - 1].load[defaultSpan].toFixed(2);
loadChart.data.datasets[0].data = data[defaultSpan].os.map(function (point) {
return point.load[0];
});
loadChart.data.labels = data[defaultSpan].os.map(addTimestamp);

responseTimeStat.textContent = data[defaultSpan].responses[data[defaultSpan].responses.length - 1].mean.toFixed(2) + 'ms';
responseTimeChart.data.datasets[0].data = data[defaultSpan].responses.map(function (point) {
return point.mean;
});
responseTimeChart.data.labels = data[defaultSpan].responses.map(addTimestamp);

if (data[defaultSpan].responses.length >= 2) {
var deltaTime = data[defaultSpan].responses[data[defaultSpan].responses.length - 1].timestamp - data[defaultSpan].responses[data[defaultSpan].responses.length - 2].timestamp;
rpsStat.textContent = (data[defaultSpan].responses[data[defaultSpan].responses.length - 1].count / deltaTime * 1000).toFixed(2);
rpsChart.data.datasets[0].data = data[defaultSpan].responses.map(function (point) {
return point.count / deltaTime * 1000;
});
rpsChart.data.labels = data[defaultSpan].responses.map(addTimestamp);
}

charts.forEach(function(chart) {
chart.update();
});

var spanControls = document.getElementById('span-controls');
if (data.length !== spans.length) {
data.forEach(function (span, index) {
spans.push({
retention: span.retention,
interval: span.interval
});

var spanNode = document.createElement('span');
var textNode = document.createTextNode((span.retention * span.interval) / 60 + "M");
spanNode.appendChild(textNode);
spanNode.setAttribute('id', index);
spanNode.onclick = onSpanChange;
spanControls.appendChild(spanNode);
});
document.getElementsByTagName('span')[0].classList.add('active');
}
});

socket.on('stats', function (data) {
if (data.retention === spans[defaultSpan].retention && data.interval === spans[defaultSpan].interval) {
cpuStat.textContent = data.os.cpu.toFixed(1) + '%';
cpuChart.data.datasets[0].data.push(data.os.cpu);
cpuChart.data.labels.push(data.os.timestamp);

memStat.textContent = data.os.memory.toFixed(1) + 'MB';
memChart.data.datasets[0].data.push(data.os.memory);
memChart.data.labels.push(data.os.timestamp);

loadStat.textContent = data.os.load[0].toFixed(2);
loadChart.data.datasets[0].data.push(data.os.load[0]);
loadChart.data.labels.push(data.os.timestamp);

responseTimeStat.textContent = data.responses.mean.toFixed(2) + 'ms';
responseTimeChart.data.datasets[0].data.push(data.responses.mean);
responseTimeChart.data.labels.push(data.responses.timestamp);

var deltaTime = data.responses.timestamp - rpsChart.data.labels[rpsChart.data.labels.length - 1];
rpsStat.textContent = (data.responses.count / deltaTime * 1000).toFixed(2);
rpsChart.data.datasets[0].data.push(data.responses.count / deltaTime * 1000);
rpsChart.data.labels.push(data.responses.timestamp);

charts.forEach(function (chart) {
if (spans[defaultSpan].retention < chart.data.labels.length) {
chart.data.datasets[0].data.shift();
chart.data.labels.shift();
}

chart.update();
});
}
});
Loading

0 comments on commit f3d886c

Please sign in to comment.