Skip to content

Commit

Permalink
Merge pull request locustio#27 from erlanggakrisnamukti/master
Browse files Browse the repository at this point in the history 
ChainSync master to develop
  • Loading branch information
@pancaprima
pancaprima authored Nov 10, 2017
2 parents 85dcd1f + cb262ef commit a71329e
Show file tree
Hide file tree
Showing 2 changed files with 100 additions and 41 deletions.
45 changes: 39 additions & 6 deletions locust/static/chart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,21 +9,27 @@
this.subtitle = subtitle;
this.lines = lines;
this.width = width;
this.xIndex = 0;

this.element = $('<div class="chart"></div>').css("width", width).css("float","left").appendTo(container);
this.data = [];
this.dates = [];

this.seriesData = [];
for (let i=0; i<lines.length; i++) {
this.data.push({
key : lines[i],
name : lines[i],
values : []
});
this.seriesData.push({
key : lines[i],
name: lines[i],
type: 'line',
showSymbol: true,
hoverAnimation: false,
data: [],
data: this.data[i].values,
});
this.data.push([]);
}

this.chart = echarts.init(this.element[0], 'vintage');
Expand Down Expand Up @@ -130,12 +136,12 @@

addValue(values) {
this.dates.push(new Date().toLocaleTimeString());
var pointX = (typeof(this.data[0]) != "undefined") ? this.data[0].length : 0;
for(let i=0; i<values.length; i++) {
let value = Math.round(values[i] * 100) / 100;
this.data[i][pointX] = value;
this.seriesData[i].data = this.data[i];
this.data[i].values[this.xIndex] = value;
this.seriesData[i].data = this.data[i].values;
}
this.xIndex++;
this.chart.setOption({
xAxis: {
data: this.dates,
Expand All @@ -146,14 +152,37 @@

addLine(key, name) {
this.lines.push(key)
this.data.push({
key : key,
name : name,
values : []
})
if(this.data.length > 1) {
this.data = this.data.sort(function(a, b) {
let keyA = a.key.toUpperCase(); // ignore upper and lowercase
let keyB = b.key.toUpperCase(); // ignore upper and lowercase
if (keyA < keyB) return -1;
if (keyA > keyB) return 1;
return 0;
})
}
this.seriesData.push({
key : key,
name: name,
type: 'line',
showSymbol: true,
hoverAnimation: false,
data: [],
});
this.data.push([]);
if(this.data.length > 1) {
this.seriesData = this.seriesData.sort(function(a, b) {
let keyA = a.key.toUpperCase(); // ignore upper and lowercase
let keyB = b.key.toUpperCase(); // ignore upper and lowercase
if (keyA < keyB) return -1;
if (keyA > keyB) return 1;
return 0;
})
}
this.chart.setOption({
series: this.seriesData
});
Expand All @@ -169,6 +198,10 @@
resize() {
this.chart.resize();
}

dispose() {
this.chart.dispose();
}
}
window.LocustLineChart = LocustLineChart;
})();
96 changes: 61 additions & 35 deletions locust/static/locust.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ $('#ramp_form').submit(function(event) {
$("a.new_test").fadeOut();
$("a.edit_test").fadeIn();
$(".user_count").fadeIn();
resetCharts();
}
}
);
Expand All @@ -65,14 +66,16 @@ var alternate = false;
$("ul.tabs").tabs("div.panes > div").on("onClick", function(event) {
if (event.target == $(".chart-tab-link")[0]) {
// trigger resizing of charts
rpsChart.resize();
responseTimeChart.resize();
usersChart.resize();
failureChart.resize();
for (var chartKey in endpointResponseTimeCharts) {
endpointResponseTimeCharts[chartKey].resize();
endpointRpsCharts[chartKey].resize();
endpointFailureCharts[chartKey].resize();
if (!!rpsChart) rpsChart.resize()
if (!!responseTimeChart) responseTimeChart.resize()
if (!!usersChart) usersChart.resize()
if (!!failureChart) failureChart.resize()
if (!!endpointResponseTimeCharts) {
for (var chartKey in endpointResponseTimeCharts) {
endpointResponseTimeCharts[chartKey].resize()
endpointRpsCharts[chartKey].resize()
endpointFailureCharts[chartKey].resize()
}
}
}
});
Expand All @@ -93,6 +96,7 @@ $('#swarm_form').submit(function(event) {
$("a.new_test").fadeOut();
$("a.edit_test").fadeIn();
$(".user_count").fadeIn();
resetCharts();
}
}
);
Expand Down Expand Up @@ -146,15 +150,8 @@ $(".stats_label").click(function(event) {
});

// init charts
var rpsChart = new LocustLineChart($(".charts-container"), "Requests per Second", "", [], "reqs/s", "100%");
var responseTimeChart = new LocustLineChart($(".charts-container"), "Average Response Time", "", [], "ms", "100%");
var usersChart = new LocustLineChart($(".charts-container"), "Number of Users", "", ["Total"], "users", "100%");
var failureChart = new LocustLineChart($(".charts-container"), "Number of Failures", "", [], "failures", "100%");
var endpointResponseTimeCharts = []
var endpointRpsCharts = []
var endpointFailureCharts = []
var rpsChart, responseTimeChart, usersChart, failureChart, endpointResponseTimeCharts, endpointRpsCharts, endpointFailureCharts;
const totalKey = "total"
initTotalCharts()

function updateStats() {
$.get('/stats/requests', function (data) {
Expand Down Expand Up @@ -193,22 +190,27 @@ function updateStats() {
rpsValues = []
responseTimeValues = []
failureValues = []

for (let i=0; i < report.stats.length; i++) {
chartKey = report.stats[i].name
if (total != report.stats[i]) {
chartKey = chartKey + i
createEndpointLines(chartKey, report.stats[i].name, (chartKey) => {
rpsValues.push(report.stats[i].current_rps)
responseTimeValues.push(report.stats[i].avg_response_time)
failureValues.push(report.stats[i].num_failures)
})
} else {
endpointResponseTimeCharts[totalKey].addValue([report.stats[i].avg_response_time]);
endpointRpsCharts[totalKey].addValue([report.stats[i].current_rps]);
endpointFailureCharts[totalKey].addValue([report.stats[i].num_failures]);
}
let statsNoTotal = report.stats.splice(0,endpointChartSize)
if(statsNoTotal.length > 1) {
statsNoTotal = statsNoTotal.sort(function(a, b) {
let keyA = a.name.toUpperCase() + a.method.toUpperCase(); // ignore upper and lowercase
let keyB = b.name.toUpperCase() + b.method.toUpperCase(); // ignore upper and lowercase
if (keyA < keyB) return -1;
if (keyA > keyB) return 1;
return 0;
})
}
for (let i=0; i < statsNoTotal.length; i++) {
chartKey = statsNoTotal[i].name.toUpperCase() + statsNoTotal[i].method.toUpperCase()
createEndpointLines(chartKey, statsNoTotal[i].name, (chartKey) => {
rpsValues.push(statsNoTotal[i].current_rps)
responseTimeValues.push(statsNoTotal[i].avg_response_time)
failureValues.push(statsNoTotal[i].num_failures)
})
}
endpointResponseTimeCharts[totalKey].addValue([total.avg_response_time]);
endpointRpsCharts[totalKey].addValue([total.current_rps]);
endpointFailureCharts[totalKey].addValue([total.num_failures]);
failureChart.addValue(failureValues);
rpsChart.addValue(rpsValues);
responseTimeChart.addValue(responseTimeValues);
Expand All @@ -229,13 +231,37 @@ function updateExceptions() {
}
updateExceptions();

function createEndpointLines(chartKey, endpointName, callback) {
if(!rpsChart.isLineExist(chartKey)) rpsChart.addLine(chartKey, endpointName);
if(!responseTimeChart.isLineExist(chartKey)) responseTimeChart.addLine(chartKey, endpointName);
if(!failureChart.isLineExist(chartKey)) failureChart.addLine(chartKey, endpointName);
function createEndpointLines(chartKey, name, callback) {
if(!rpsChart.isLineExist(chartKey)) rpsChart.addLine(chartKey, name);
if(!responseTimeChart.isLineExist(chartKey)) responseTimeChart.addLine(chartKey , name);
if(!failureChart.isLineExist(chartKey)) failureChart.addLine(chartKey, name);
callback(chartKey)
}

function resetCharts() {
if (!!rpsChart) rpsChart.dispose()
if (!!responseTimeChart) responseTimeChart.dispose()
if (!!usersChart) usersChart.dispose()
if (!!failureChart) failureChart.dispose()
if (!!endpointResponseTimeCharts) {
for (var chartKey in endpointResponseTimeCharts) {
endpointResponseTimeCharts[chartKey].dispose()
endpointRpsCharts[chartKey].dispose()
endpointFailureCharts[chartKey].dispose()
}
}
$('.charts-container').empty()
rpsChart = new LocustLineChart($(".charts-container"), "Requests per Second", "", [], "reqs/s", "100%");
responseTimeChart = new LocustLineChart($(".charts-container"), "Average Response Time", "", [], "ms", "100%");
usersChart = new LocustLineChart($(".charts-container"), "Number of Users", "", ["Total"], "users", "100%");
failureChart = new LocustLineChart($(".charts-container"), "Number of Failures", "", [], "failures", "100%");
endpointResponseTimeCharts = []
endpointRpsCharts = []
endpointFailureCharts = []
initTotalCharts()
}
resetCharts()

function initTotalCharts() {
endpointResponseTimeCharts[totalKey] = new LocustLineChart($(".charts-container"), "Average Responses Time", totalKey.toUpperCase(), ["Average Responses Time"], "ms", "33.3%");
endpointRpsCharts[totalKey] = new LocustLineChart($(".charts-container"), "Requests Per Second", totalKey.toUpperCase(), ["RPS"], "request", "33.3%");
Expand Down

0 comments on commit a71329e

Please sign in to comment.