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 @@
var socket = io('http://localhost:41338');
var labels = [];
var defaultSpan = 0;
var cpuDataset = [{
label: 'CPU Usage in %',
data: [],
lineTension: 0.3,
pointRadius: 0,
}];
var memDataset = [{
label: 'Memory Usage in MB',
data: [],
lineTension: 0.2,
pointRadius: 0,
}];
var loadDataset = [{
label: '1 Minute Load',
var defaultDataset = [{
label: '',
data: [],
lineTension: 0.2,
pointRadius: 0,
}];
var responseTimeDataset = [{
label: 'Response Time',
data: [],
lineTension: 0.2,
pointRadius: 0,
}];
var rpsDataset = [{
label: 'Requests per Second',
data: [],
lineTension: 0.2,
pointRadius: 0,
pointRadius: 0
}];
var defaultOptions = {
......@@ -176,6 +149,23 @@
}
};
var createChart = function (ctx, dataset) {
return new Chart(ctx, {
type: 'line',
data: {
labels: [],
datasets: dataset
},
options: defaultOptions
})
};
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');
......@@ -188,52 +178,13 @@
var responseTimeChartCtx = document.getElementById("responseTimeChart");
var rpsChartCtx = document.getElementById("rpsChart");
var cpuChart = new Chart(cpuChartCtx, {
type: 'line',
data: {
labels: labels,
datasets: cpuDataset,
},
options: defaultOptions
});
var memChart = new Chart(memChartCtx, {
type: 'line',
data: {
labels: labels,
datasets: memDataset,
},
options: defaultOptions
});
var loadChart = new Chart(loadChartCtx, {
type: 'line',
data: {
labels: labels,
datasets: loadDataset,
},
options: defaultOptions
});
var responseTimeChart = new Chart(responseTimeChartCtx, {
type: 'line',
data: {
labels: labels,
datasets: responseTimeDataset,
},
options: defaultOptions
});
var rpsChart = new Chart(rpsChartCtx, {
type: 'line',
data: {
labels: labels,
datasets: rpsDataset,
},
options: defaultOptions
});
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 onSpanChange = function(e) {
var onSpanChange = function (e) {
e.target.classList.add('active');
defaultSpan = Integer.parseInt(e.target.id);
......@@ -243,42 +194,62 @@
}
};
socket.on('start', function(data) {
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[defaultSpan].data = data[defaultSpan].os.map(function(point) { return point.cpu; });
cpuChart.data.labels = data[defaultSpan].os.map(function(point) { return point.timestamp; });
cpuChart.data.datasets[defaultSpan].data = data[defaultSpan].os.map(function (point) {
return point.cpu;
});
cpuChart.data.labels = data[defaultSpan].os.map(function (point) {
return point.timestamp;
});
cpuChart.update();
memStat.textContent = data[defaultSpan].os[data[defaultSpan].os.length - 1].memory.toFixed(1) + 'MB';
memChart.data.datasets[defaultSpan].data = data[defaultSpan].os.map(function(point) { return point.memory; });
memChart.data.labels = data[defaultSpan].os.map(function(point) { return point.timestamp; });
memChart.data.datasets[defaultSpan].data = data[defaultSpan].os.map(function (point) {
return point.memory;
});
memChart.data.labels = data[defaultSpan].os.map(function (point) {
return point.timestamp;
});
memChart.update();
loadStat.textContent = data[defaultSpan].os[data[defaultSpan].os.length - 1].load[defaultSpan].toFixed(2);
loadChart.data.datasets[defaultSpan].data = data[defaultSpan].os.map(function(point) { return point.load[defaultSpan]; });
loadChart.data.labels = data[defaultSpan].os.map(function(point) { return point.timestamp; });
loadChart.data.datasets[defaultSpan].data = data[defaultSpan].os.map(function (point) {
return point.load[defaultSpan];
});
loadChart.data.labels = data[defaultSpan].os.map(function (point) {
return point.timestamp;
});
loadChart.update();
responseTimeStat.textContent = data[defaultSpan].responses[data[defaultSpan].responses.length - 1].mean.toFixed(2) + 'ms';
responseTimeChart.data.datasets[defaultSpan].data = data[defaultSpan].responses.map(function(point) { return point.mean; });
responseTimeChart.data.labels = data[defaultSpan].responses.map(function(point) { return point.timestamp; });
responseTimeChart.data.datasets[defaultSpan].data = data[defaultSpan].responses.map(function (point) {
return point.mean;
});
responseTimeChart.data.labels = data[defaultSpan].responses.map(function (point) {
return point.timestamp;
});
responseTimeChart.update();
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[defaultSpan].data = data[defaultSpan].responses.map(function(point) { return point.count / deltaTime * 1000; });
rpsChart.data.labels = data[defaultSpan].responses.map(function(point) { return point.timestamp; });
rpsChart.data.datasets[defaultSpan].data = data[defaultSpan].responses.map(function (point) {
return point.count / deltaTime * 1000;
});
rpsChart.data.labels = data[defaultSpan].responses.map(function (point) {
return point.timestamp;
});
rpsChart.update();
}
var spanControls = document.getElementById('span-controls');
data.forEach(function(span, index) {
data.forEach(function (span, index) {
var spanNode = document.createElement('span');
var textNode = document.createTextNode((span.retention * span.interval) / 60 + "M");
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!