Skip to content

Commit

Permalink
Merge pull request locustio#19 from pancaprima/prima/b_wrong_charts_a…
Browse files Browse the repository at this point in the history 
…mount

Prima BugFix Not all of chart rendered
  • Loading branch information
@pancaprima
pancaprima authored Nov 3, 2017
2 parents ee1d59f + f680be3 commit 85dcd1f
Show file tree
Hide file tree
Showing 3 changed files with 44 additions and 49 deletions.
23 changes: 11 additions & 12 deletions locust/static/chart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
this.dates = [];

this.seriesData = [];
for (var i=0; i<lines.length; i++) {
for (let i=0; i<lines.length; i++) {
this.seriesData.push({
name: lines[i],
type: 'line',
Expand All @@ -42,9 +42,9 @@
animation: true
},
formatter: function (params) {
if (!!params && params.length > 0 && !!params[0].value) {
if (!!params && params.length > 0 && !!params[0].name) {
let protomatch = /^(https?|http):\/\//;
let str = params[0].name;
let str = params[0].name;
for (let i = 0; i < params.length; i++) {
let param = params[i];
let seriesNameFiltered = param.seriesName.substring(0, 64).replace(protomatch, "");
Expand Down Expand Up @@ -130,12 +130,11 @@

addValue(values) {
this.dates.push(new Date().toLocaleTimeString());
this.seriesData = [];
var pointX = this.data[0].length;
for (var i=0; i<values.length; i++) {
var value = Math.round(values[i] * 100) / 100;
this.data[i][pointX] = value;
this.seriesData.push({data: this.data[i]});
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.chart.setOption({
xAxis: {
Expand All @@ -145,10 +144,10 @@
});
}

addLine(key) {
addLine(key, name) {
this.lines.push(key)
this.seriesData.push({
name: key,
name: name,
type: 'line',
showSymbol: true,
hoverAnimation: false,
Expand All @@ -161,7 +160,7 @@
}

isLineExist(value) {
for(i=0; i < this.lines.length; i++) {
for(let i=0; i < this.lines.length; i++) {
if ( value == this.lines[i]) return true;
}
return false;
Expand Down
68 changes: 32 additions & 36 deletions locust/static/locust.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,13 +146,15 @@ $(".stats_label").click(function(event) {
});

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

function updateStats() {
$.get('/stats/requests', function (data) {
Expand Down Expand Up @@ -188,20 +190,24 @@ function updateStats() {
var total = report.stats[report.stats.length-1];

endpointChartSize = report.stats.length - 1
rpsValues = [total.current_rps]
responseTimeValues = [total.avg_response_time]
failureValues = [total.num_failures]
rpsValues = []
responseTimeValues = []
failureValues = []

for(i=0; i< endpointChartSize; i++) {
for (let i=0; i < report.stats.length; i++) {
chartKey = report.stats[i].name
createEndpointCharts(chartKey, (chartKey) => {
endpointResponseTimeCharts[chartKey].addValue([report.stats[i].avg_response_time]);
endpointRpsCharts[chartKey].addValue([report.stats[i].current_rps]);
endpointFailureCharts[chartKey].addValue([report.stats[i].num_failures]);
})
rpsValues.push(report.stats[i].current_rps)
responseTimeValues.push(report.stats[i].avg_response_time)
failureValues.push(report.stats[i].num_failures)
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]);
}
}
failureChart.addValue(failureValues);
rpsChart.addValue(rpsValues);
Expand All @@ -223,25 +229,15 @@ function updateExceptions() {
}
updateExceptions();

function createEndpointCharts(chartKey, callback) {
if(!endpointResponseTimeCharts[chartKey]) {
title = "Average Response Times"
endpointResponseTimeCharts[chartKey] = new LocustLineChart($(".charts-container"), title, chartKey, ["Average Response Time"], "ms", "33.3%");
endpointResponseTimeCharts[chartKey].resize()
}
if(!endpointRpsCharts[chartKey]) {
title = "Requests per Second"
endpointRpsCharts[chartKey] = new LocustLineChart($(".charts-container"), title, chartKey, ["RPS"], "request", "33.3%");
endpointRpsCharts[chartKey].resize()
}
if(!endpointFailureCharts[chartKey]) {
title = "Failures"
endpointFailureCharts[chartKey] = new LocustLineChart($(".charts-container"), title, chartKey, ["Failure"], "failure", "33.3%");
endpointFailureCharts[chartKey].resize()
}
if(!rpsChart.isLineExist(chartKey)) rpsChart.addLine(chartKey);
if(!responseTimeChart.isLineExist(chartKey)) responseTimeChart.addLine(chartKey);
if(!failureChart.isLineExist(chartKey)) failureChart.addLine(chartKey);

callback(chartKey)
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);
callback(chartKey)
}

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%");
endpointFailureCharts[totalKey] = new LocustLineChart($(".charts-container"), "Failure", totalKey.toUpperCase(), ["Failures"], "failure", "33.3%");
}
2 changes: 1 addition & 1 deletion locust/templates/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -169,8 +169,8 @@ <h2>Ramping</h2>
</table>
</div>
<div id="charts" style="display:none;">
<div class="charts-container"></div>
<p class="note">Note: There is no persistence of these charts, if you refresh this page, new charts will be created.</p>
<div class="charts-container"></div>
</div>
<div style="display:none;">
<table id="errors" class="stats">
Expand Down

0 comments on commit 85dcd1f

Please sign in to comment.