mirror of https://github.com/apache/jmeter.git
1650 lines
59 KiB
Plaintext
1650 lines
59 KiB
Plaintext
/*
|
|
Licensed to the Apache Software Foundation (ASF) under one or more
|
|
contributor license agreements. See the NOTICE file distributed with
|
|
this work for additional information regarding copyright ownership.
|
|
The ASF licenses this file to You under the Apache License, Version 2.0
|
|
(the "License"); you may not use this file except in compliance with
|
|
the License. You may obtain a copy of the License at
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
See the License for the specific language governing permissions and
|
|
limitations under the License.
|
|
*/
|
|
$(document).ready(function() {
|
|
|
|
$(".click-title").mouseenter( function( e){
|
|
e.preventDefault();
|
|
this.style.cursor="pointer";
|
|
});
|
|
$(".click-title").mousedown( function(event){
|
|
event.preventDefault();
|
|
});
|
|
|
|
// Ugly code while this script is shared among several pages
|
|
try{
|
|
refreshHitsPerSecond(true);
|
|
} catch(e){}
|
|
try{
|
|
refreshResponseTimeOverTime(true);
|
|
} catch(e){}
|
|
try{
|
|
refreshResponseTimePercentiles();
|
|
} catch(e){}
|
|
$(".portlet-header").css("cursor", "auto");
|
|
});
|
|
|
|
var showControllersOnly = ${showControllersOnly?c!"false"};
|
|
var seriesFilter = ${seriesFilter!"undefined"};
|
|
var filtersOnlySampleSeries = ${filtersOnlySampleSeries?c!"false"};
|
|
|
|
// Fixes time stamps
|
|
function fixTimeStamps(series, offset){
|
|
$.each(series, function(index, item) {
|
|
$.each(item.data, function(index, coord) {
|
|
coord[0] += offset;
|
|
});
|
|
});
|
|
}
|
|
|
|
// Check if the specified jquery object is a graph
|
|
function isGraph(object){
|
|
return object.data('plot') !== undefined;
|
|
}
|
|
|
|
/**
|
|
* Export graph to a PNG
|
|
*/
|
|
function exportToPNG(graphName, target) {
|
|
var plot = $("#"+graphName).data('plot');
|
|
var flotCanvas = plot.getCanvas();
|
|
var image = flotCanvas.toDataURL();
|
|
image = image.replace("image/png", "image/octet-stream");
|
|
|
|
var downloadAttrSupported = ("download" in document.createElement("a"));
|
|
if(downloadAttrSupported === true) {
|
|
target.download = graphName + ".png";
|
|
target.href = image;
|
|
}
|
|
else {
|
|
document.location.href = image;
|
|
}
|
|
|
|
}
|
|
|
|
// Override the specified graph options to fit the requirements of an overview
|
|
function prepareOverviewOptions(graphOptions){
|
|
var overviewOptions = {
|
|
series: {
|
|
shadowSize: 0,
|
|
lines: {
|
|
lineWidth: 1
|
|
},
|
|
points: {
|
|
// Show points on overview only when linked graph does not show
|
|
// lines
|
|
show: getProperty('series.lines.show', graphOptions) == false,
|
|
radius : 1
|
|
}
|
|
},
|
|
xaxis: {
|
|
ticks: 2,
|
|
axisLabel: null
|
|
},
|
|
yaxis: {
|
|
ticks: 2,
|
|
axisLabel: null
|
|
},
|
|
legend: {
|
|
show: false,
|
|
container: null
|
|
},
|
|
grid: {
|
|
hoverable: false
|
|
},
|
|
tooltip: false
|
|
};
|
|
return $.extend(true, {}, graphOptions, overviewOptions);
|
|
}
|
|
|
|
// Force axes boundaries using graph extra options
|
|
function prepareOptions(options, data) {
|
|
options.canvas = true;
|
|
var extraOptions = data.extraOptions;
|
|
if(extraOptions !== undefined){
|
|
var xOffset = options.xaxis.mode === "time" ? ${(timeZoneOffset?c)!0} : 0;
|
|
var yOffset = options.yaxis.mode === "time" ? ${(timeZoneOffset?c)!0} : 0;
|
|
|
|
if(!isNaN(extraOptions.minX))
|
|
options.xaxis.min = parseFloat(extraOptions.minX) + xOffset;
|
|
|
|
if(!isNaN(extraOptions.maxX))
|
|
options.xaxis.max = parseFloat(extraOptions.maxX) + xOffset;
|
|
|
|
if(!isNaN(extraOptions.minY))
|
|
options.yaxis.min = parseFloat(extraOptions.minY) + yOffset;
|
|
|
|
if(!isNaN(extraOptions.maxY))
|
|
options.yaxis.max = parseFloat(extraOptions.maxY) + yOffset;
|
|
}
|
|
}
|
|
|
|
// Filter, mark series and sort data
|
|
/**
|
|
* @param data
|
|
* @param noMatchColor if defined and true, series.color are not matched with index
|
|
*/
|
|
function prepareSeries(data, noMatchColor){
|
|
var result = data.result;
|
|
|
|
// Keep only series when needed
|
|
if(seriesFilter && (!filtersOnlySampleSeries || result.supportsControllersDiscrimination)){
|
|
// Insensitive case matching
|
|
var regexp = new RegExp(seriesFilter, 'i');
|
|
result.series = $.grep(result.series, function(series, index){
|
|
return regexp.test(series.label);
|
|
});
|
|
}
|
|
|
|
// Keep only controllers series when supported and needed
|
|
if(result.supportsControllersDiscrimination && showControllersOnly){
|
|
result.series = $.grep(result.series, function(series, index){
|
|
return series.isController;
|
|
});
|
|
}
|
|
|
|
// Sort data and mark series
|
|
$.each(result.series, function(index, series) {
|
|
series.data.sort(compareByXCoordinate);
|
|
if(!(noMatchColor && noMatchColor===true)) {
|
|
series.color = index;
|
|
}
|
|
});
|
|
}
|
|
|
|
// Set the zoom on the specified plot object
|
|
function zoomPlot(plot, xmin, xmax, ymin, ymax){
|
|
var axes = plot.getAxes();
|
|
// Override axes min and max options
|
|
$.extend(true, axes, {
|
|
xaxis: {
|
|
options : { min: xmin, max: xmax }
|
|
},
|
|
yaxis: {
|
|
options : { min: ymin, max: ymax }
|
|
}
|
|
});
|
|
|
|
// Redraw the plot
|
|
plot.setupGrid();
|
|
plot.draw();
|
|
}
|
|
|
|
// Prepares DOM items to add zoom function on the specified graph
|
|
function setGraphZoomable(graphSelector, overviewSelector){
|
|
var graph = $(graphSelector);
|
|
var overview = $(overviewSelector);
|
|
|
|
// Ignore mouse down event
|
|
graph.bind("mousedown", function() { return false; });
|
|
overview.bind("mousedown", function() { return false; });
|
|
|
|
// Zoom on selection
|
|
graph.bind("plotselected", function (event, ranges) {
|
|
// clamp the zooming to prevent infinite zoom
|
|
if (ranges.xaxis.to - ranges.xaxis.from < 0.00001) {
|
|
ranges.xaxis.to = ranges.xaxis.from + 0.00001;
|
|
}
|
|
if (ranges.yaxis.to - ranges.yaxis.from < 0.00001) {
|
|
ranges.yaxis.to = ranges.yaxis.from + 0.00001;
|
|
}
|
|
|
|
// Do the zooming
|
|
var plot = graph.data('plot');
|
|
zoomPlot(plot, ranges.xaxis.from, ranges.xaxis.to, ranges.yaxis.from, ranges.yaxis.to);
|
|
plot.clearSelection();
|
|
|
|
// Synchronize overview selection
|
|
overview.data('plot').setSelection(ranges, true);
|
|
});
|
|
|
|
// Zoom linked graph on overview selection
|
|
overview.bind("plotselected", function (event, ranges) {
|
|
graph.data('plot').setSelection(ranges);
|
|
});
|
|
|
|
// Reset linked graph zoom when reseting overview selection
|
|
overview.bind("plotunselected", function () {
|
|
var overviewAxes = overview.data('plot').getAxes();
|
|
zoomPlot(graph.data('plot'), overviewAxes.xaxis.min, overviewAxes.xaxis.max, overviewAxes.yaxis.min, overviewAxes.yaxis.max);
|
|
});
|
|
}
|
|
|
|
var responseTimePercentilesInfos = {
|
|
data: ${responseTimePercentiles!"{}"},
|
|
getOptions: function() {
|
|
return {
|
|
series: {
|
|
points: { show: false }
|
|
},
|
|
legend: {
|
|
noColumns: 2,
|
|
show: true,
|
|
container: '#legendResponseTimePercentiles'
|
|
},
|
|
xaxis: {
|
|
tickDecimals: 1,
|
|
axisLabel: "Percentiles",
|
|
axisLabelUseCanvas: true,
|
|
axisLabelFontSizePixels: 12,
|
|
axisLabelFontFamily: 'Verdana, Arial',
|
|
axisLabelPadding: 20,
|
|
},
|
|
yaxis: {
|
|
axisLabel: "Percentile value in ms",
|
|
axisLabelUseCanvas: true,
|
|
axisLabelFontSizePixels: 12,
|
|
axisLabelFontFamily: 'Verdana, Arial',
|
|
axisLabelPadding: 20
|
|
},
|
|
grid: {
|
|
hoverable: true // IMPORTANT! this is needed for tooltip to
|
|
// work
|
|
},
|
|
tooltip: true,
|
|
tooltipOpts: {
|
|
content: "%s : %x.2 percentile was %y ms"
|
|
},
|
|
selection: { mode: "xy" },
|
|
};
|
|
},
|
|
createGraph: function() {
|
|
var data = this.data;
|
|
var dataset = prepareData(data.result.series, $("#choicesResponseTimePercentiles"));
|
|
var options = this.getOptions();
|
|
prepareOptions(options, data);
|
|
$.plot($("#flotResponseTimesPercentiles"), dataset, options);
|
|
// setup overview
|
|
$.plot($("#overviewResponseTimesPercentiles"), dataset, prepareOverviewOptions(options));
|
|
}
|
|
};
|
|
|
|
// Response times percentiles
|
|
function refreshResponseTimePercentiles() {
|
|
var infos = responseTimePercentilesInfos;
|
|
prepareSeries(infos.data);
|
|
if (isGraph($("#flotResponseTimesPercentiles"))){
|
|
infos.createGraph();
|
|
} else {
|
|
var choiceContainer = $("#choicesResponseTimePercentiles");
|
|
createLegend(choiceContainer, infos);
|
|
infos.createGraph();
|
|
setGraphZoomable("#flotResponseTimesPercentiles", "#overviewResponseTimesPercentiles");
|
|
$('#bodyResponseTimePercentiles .legendColorBox > div').each(function(i){
|
|
$(this).clone().prependTo(choiceContainer.find("li").eq(i));
|
|
});
|
|
}
|
|
}
|
|
|
|
var responseTimeDistributionInfos = {
|
|
data: ${responseTimeDistribution!"{}"},
|
|
getOptions: function() {
|
|
var granularity = this.data.result.granularity;
|
|
return {
|
|
legend: {
|
|
noColumns: 2,
|
|
show: true,
|
|
container: '#legendResponseTimeDistribution'
|
|
},
|
|
xaxis:{
|
|
axisLabel: "Response times in ms",
|
|
axisLabelUseCanvas: true,
|
|
axisLabelFontSizePixels: 12,
|
|
axisLabelFontFamily: 'Verdana, Arial',
|
|
axisLabelPadding: 20,
|
|
},
|
|
yaxis: {
|
|
axisLabel: "Number of responses",
|
|
axisLabelUseCanvas: true,
|
|
axisLabelFontSizePixels: 12,
|
|
axisLabelFontFamily: 'Verdana, Arial',
|
|
axisLabelPadding: 20,
|
|
},
|
|
bars : {
|
|
show: true,
|
|
barWidth: this.data.result.granularity
|
|
},
|
|
grid: {
|
|
hoverable: true // IMPORTANT! this is needed for tooltip to
|
|
// work
|
|
},
|
|
tooltip: true,
|
|
tooltipOpts: {
|
|
content: function(label, xval, yval, flotItem){
|
|
return yval + " responses for " + label + " were between " + xval + " and " + (xval + granularity) + " ms";
|
|
}
|
|
}
|
|
};
|
|
},
|
|
createGraph: function() {
|
|
var data = this.data;
|
|
var options = this.getOptions();
|
|
prepareOptions(options, data);
|
|
$.plot($("#flotResponseTimeDistribution"), prepareData(data.result.series, $("#choicesResponseTimeDistribution")), options);
|
|
}
|
|
|
|
};
|
|
|
|
// Response time distribution
|
|
function refreshResponseTimeDistribution() {
|
|
var infos = responseTimeDistributionInfos;
|
|
prepareSeries(infos.data);
|
|
if (isGraph($("#flotResponseTimeDistribution"))){
|
|
infos.createGraph();
|
|
}else{
|
|
var choiceContainer = $("#choicesResponseTimeDistribution");
|
|
createLegend(choiceContainer, infos);
|
|
infos.createGraph();
|
|
$('#footerResponseTimeDistribution .legendColorBox > div').each(function(i){
|
|
$(this).clone().prependTo(choiceContainer.find("li").eq(i));
|
|
});
|
|
}
|
|
};
|
|
|
|
|
|
var syntheticResponseTimeDistributionInfos = {
|
|
data: ${syntheticResponseTimeDistribution!"{}"},
|
|
getOptions: function() {
|
|
return {
|
|
legend: {
|
|
noColumns: 2,
|
|
show: true,
|
|
container: '#legendSyntheticResponseTimeDistribution'
|
|
},
|
|
xaxis:{
|
|
axisLabel: "Response times ranges",
|
|
axisLabelUseCanvas: true,
|
|
axisLabelFontSizePixels: 12,
|
|
axisLabelFontFamily: 'Verdana, Arial',
|
|
axisLabelPadding: 20,
|
|
tickLength:0,
|
|
min:-0.5,
|
|
max:3.5
|
|
},
|
|
yaxis: {
|
|
axisLabel: "Number of responses",
|
|
axisLabelUseCanvas: true,
|
|
axisLabelFontSizePixels: 12,
|
|
axisLabelFontFamily: 'Verdana, Arial',
|
|
axisLabelPadding: 20,
|
|
},
|
|
bars : {
|
|
show: true,
|
|
align: "center",
|
|
barWidth: 0.25,
|
|
fill:.75
|
|
},
|
|
grid: {
|
|
hoverable: true // IMPORTANT! this is needed for tooltip to
|
|
// work
|
|
},
|
|
tooltip: true,
|
|
tooltipOpts: {
|
|
content: function(label, xval, yval, flotItem){
|
|
return yval + " " + label;
|
|
}
|
|
}
|
|
};
|
|
},
|
|
createGraph: function() {
|
|
var data = this.data;
|
|
var options = this.getOptions();
|
|
prepareOptions(options, data);
|
|
options.xaxis.ticks = data.result.ticks;
|
|
$.plot($("#flotSyntheticResponseTimeDistribution"), prepareData(data.result.series, $("#choicesSyntheticResponseTimeDistribution")), options);
|
|
}
|
|
|
|
};
|
|
|
|
// Response time distribution
|
|
function refreshSyntheticResponseTimeDistribution() {
|
|
var infos = syntheticResponseTimeDistributionInfos;
|
|
prepareSeries(infos.data, true);
|
|
if (isGraph($("#flotSyntheticResponseTimeDistribution"))){
|
|
infos.createGraph();
|
|
}else{
|
|
var choiceContainer = $("#choicesSyntheticResponseTimeDistribution");
|
|
createLegend(choiceContainer, infos);
|
|
infos.createGraph();
|
|
$('#footerSyntheticResponseTimeDistribution .legendColorBox > div').each(function(i){
|
|
$(this).clone().prependTo(choiceContainer.find("li").eq(i));
|
|
});
|
|
}
|
|
};
|
|
|
|
var activeThreadsOverTimeInfos = {
|
|
data: ${activeThreadsOverTime!"{}"},
|
|
getOptions: function() {
|
|
return {
|
|
series: {
|
|
stack: true,
|
|
lines: {
|
|
show: true,
|
|
fill: true
|
|
},
|
|
points: {
|
|
show: true
|
|
}
|
|
},
|
|
xaxis: {
|
|
mode: "time",
|
|
timeformat: "%H:%M:%S",
|
|
axisLabel: getElapsedTimeLabel(this.data.result.granularity),
|
|
axisLabelUseCanvas: true,
|
|
axisLabelFontSizePixels: 12,
|
|
axisLabelFontFamily: 'Verdana, Arial',
|
|
axisLabelPadding: 20,
|
|
},
|
|
yaxis: {
|
|
axisLabel: "Number of active threads",
|
|
axisLabelUseCanvas: true,
|
|
axisLabelFontSizePixels: 12,
|
|
axisLabelFontFamily: 'Verdana, Arial',
|
|
axisLabelPadding: 20
|
|
},
|
|
legend: {
|
|
noColumns: 6,
|
|
show: true,
|
|
container: '#legendActiveThreadsOverTime'
|
|
},
|
|
grid: {
|
|
hoverable: true // IMPORTANT! this is needed for tooltip to
|
|
// work
|
|
},
|
|
selection: {
|
|
mode: 'xy'
|
|
},
|
|
tooltip: true,
|
|
tooltipOpts: {
|
|
content: "%s : At %x there were %y active threads"
|
|
}
|
|
};
|
|
},
|
|
createGraph: function() {
|
|
var data = this.data;
|
|
var dataset = prepareData(data.result.series, $("#choicesActiveThreadsOverTime"));
|
|
var options = this.getOptions();
|
|
prepareOptions(options, data);
|
|
$.plot($("#flotActiveThreadsOverTime"), dataset, options);
|
|
// setup overview
|
|
$.plot($("#overviewActiveThreadsOverTime"), dataset, prepareOverviewOptions(options));
|
|
}
|
|
};
|
|
|
|
// Active Threads Over Time
|
|
function refreshActiveThreadsOverTime(fixTimestamps) {
|
|
var infos = activeThreadsOverTimeInfos;
|
|
prepareSeries(infos.data);
|
|
if(fixTimestamps) {
|
|
fixTimeStamps(infos.data.result.series, ${(timeZoneOffset?c)!0});
|
|
}
|
|
if(isGraph($("#flotActiveThreadsOverTime"))) {
|
|
infos.createGraph();
|
|
}else{
|
|
var choiceContainer = $("#choicesActiveThreadsOverTime");
|
|
createLegend(choiceContainer, infos);
|
|
infos.createGraph();
|
|
setGraphZoomable("#flotActiveThreadsOverTime", "#overviewActiveThreadsOverTime");
|
|
$('#footerActiveThreadsOverTime .legendColorBox > div').each(function(i){
|
|
$(this).clone().prependTo(choiceContainer.find("li").eq(i));
|
|
});
|
|
}
|
|
};
|
|
|
|
var timeVsThreadsInfos = {
|
|
data: ${timeVsThreads!"{}"},
|
|
getOptions: function() {
|
|
return {
|
|
series: {
|
|
lines: {
|
|
show: true
|
|
},
|
|
points: {
|
|
show: true
|
|
}
|
|
},
|
|
xaxis: {
|
|
axisLabel: "Number of active threads",
|
|
axisLabelUseCanvas: true,
|
|
axisLabelFontSizePixels: 12,
|
|
axisLabelFontFamily: 'Verdana, Arial',
|
|
axisLabelPadding: 20,
|
|
},
|
|
yaxis: {
|
|
axisLabel: "Average response times in ms",
|
|
axisLabelUseCanvas: true,
|
|
axisLabelFontSizePixels: 12,
|
|
axisLabelFontFamily: 'Verdana, Arial',
|
|
axisLabelPadding: 20
|
|
},
|
|
legend: { noColumns: 2,show: true, container: '#legendTimeVsThreads' },
|
|
selection: {
|
|
mode: 'xy'
|
|
},
|
|
grid: {
|
|
hoverable: true // IMPORTANT! this is needed for tooltip to work
|
|
},
|
|
tooltip: true,
|
|
tooltipOpts: {
|
|
content: "%s: At %x.2 active threads, Average response time was %y.2 ms"
|
|
}
|
|
};
|
|
},
|
|
createGraph: function() {
|
|
var data = this.data;
|
|
var dataset = prepareData(data.result.series, $("#choicesTimeVsThreads"));
|
|
var options = this.getOptions();
|
|
prepareOptions(options, data);
|
|
$.plot($("#flotTimesVsThreads"), dataset, options);
|
|
// setup overview
|
|
$.plot($("#overviewTimesVsThreads"), dataset, prepareOverviewOptions(options));
|
|
}
|
|
};
|
|
|
|
// Time vs threads
|
|
function refreshTimeVsThreads(){
|
|
var infos = timeVsThreadsInfos;
|
|
prepareSeries(infos.data);
|
|
if(isGraph($("#flotTimesVsThreads"))){
|
|
infos.createGraph();
|
|
}else{
|
|
var choiceContainer = $("#choicesTimeVsThreads");
|
|
createLegend(choiceContainer, infos);
|
|
infos.createGraph();
|
|
setGraphZoomable("#flotTimesVsThreads", "#overviewTimesVsThreads");
|
|
$('#footerTimeVsThreads .legendColorBox > div').each(function(i){
|
|
$(this).clone().prependTo(choiceContainer.find("li").eq(i));
|
|
});
|
|
}
|
|
};
|
|
|
|
var bytesThroughputOverTimeInfos = {
|
|
data : ${bytesThroughputOverTime!"{}"},
|
|
getOptions : function(){
|
|
return {
|
|
series: {
|
|
lines: {
|
|
show: true
|
|
},
|
|
points: {
|
|
show: true
|
|
}
|
|
},
|
|
xaxis: {
|
|
mode: "time",
|
|
timeformat: "%H:%M:%S",
|
|
axisLabel: getElapsedTimeLabel(this.data.result.granularity) ,
|
|
axisLabelUseCanvas: true,
|
|
axisLabelFontSizePixels: 12,
|
|
axisLabelFontFamily: 'Verdana, Arial',
|
|
axisLabelPadding: 20,
|
|
},
|
|
yaxis: {
|
|
axisLabel: "Bytes / sec",
|
|
axisLabelUseCanvas: true,
|
|
axisLabelFontSizePixels: 12,
|
|
axisLabelFontFamily: 'Verdana, Arial',
|
|
axisLabelPadding: 20,
|
|
},
|
|
legend: {
|
|
noColumns: 2,
|
|
show: true,
|
|
container: '#legendBytesThroughputOverTime'
|
|
},
|
|
selection: {
|
|
mode: "xy"
|
|
},
|
|
grid: {
|
|
hoverable: true // IMPORTANT! this is needed for tooltip to
|
|
// work
|
|
},
|
|
tooltip: true,
|
|
tooltipOpts: {
|
|
content: "%s at %x was %y"
|
|
}
|
|
};
|
|
},
|
|
createGraph : function() {
|
|
var data = this.data;
|
|
var dataset = prepareData(data.result.series, $("#choicesBytesThroughputOverTime"));
|
|
var options = this.getOptions();
|
|
prepareOptions(options, data);
|
|
$.plot($("#flotBytesThroughputOverTime"), dataset, options);
|
|
// setup overview
|
|
$.plot($("#overviewBytesThroughputOverTime"), dataset, prepareOverviewOptions(options));
|
|
}
|
|
};
|
|
|
|
// Bytes throughput Over Time
|
|
function refreshBytesThroughputOverTime(fixTimestamps) {
|
|
var infos = bytesThroughputOverTimeInfos;
|
|
prepareSeries(infos.data);
|
|
if(fixTimestamps) {
|
|
fixTimeStamps(infos.data.result.series, ${(timeZoneOffset?c)!0});
|
|
}
|
|
if(isGraph($("#flotBytesThroughputOverTime"))){
|
|
infos.createGraph();
|
|
}else{
|
|
var choiceContainer = $("#choicesBytesThroughputOverTime");
|
|
createLegend(choiceContainer, infos);
|
|
infos.createGraph();
|
|
setGraphZoomable("#flotBytesThroughputOverTime", "#overviewBytesThroughputOverTime");
|
|
$('#footerBytesThroughputOverTime .legendColorBox > div').each(function(i){
|
|
$(this).clone().prependTo(choiceContainer.find("li").eq(i));
|
|
});
|
|
}
|
|
}
|
|
|
|
var responseTimesOverTimeInfos = {
|
|
data: ${responseTimesOverTime!"{}"},
|
|
getOptions: function(){
|
|
return {
|
|
series: {
|
|
lines: {
|
|
show: true
|
|
},
|
|
points: {
|
|
show: true
|
|
}
|
|
},
|
|
xaxis: {
|
|
mode: "time",
|
|
timeformat: "%H:%M:%S",
|
|
axisLabel: getElapsedTimeLabel(this.data.result.granularity),
|
|
axisLabelUseCanvas: true,
|
|
axisLabelFontSizePixels: 12,
|
|
axisLabelFontFamily: 'Verdana, Arial',
|
|
axisLabelPadding: 20,
|
|
},
|
|
yaxis: {
|
|
axisLabel: "Average response time in ms",
|
|
axisLabelUseCanvas: true,
|
|
axisLabelFontSizePixels: 12,
|
|
axisLabelFontFamily: 'Verdana, Arial',
|
|
axisLabelPadding: 20,
|
|
},
|
|
legend: {
|
|
noColumns: 2,
|
|
show: true,
|
|
container: '#legendResponseTimesOverTime'
|
|
},
|
|
selection: {
|
|
mode: 'xy'
|
|
},
|
|
grid: {
|
|
hoverable: true // IMPORTANT! this is needed for tooltip to
|
|
// work
|
|
},
|
|
tooltip: true,
|
|
tooltipOpts: {
|
|
content: "%s : at %x Average response time was %y ms"
|
|
}
|
|
};
|
|
},
|
|
createGraph: function() {
|
|
var data = this.data;
|
|
var dataset = prepareData(data.result.series, $("#choicesResponseTimesOverTime"));
|
|
var options = this.getOptions();
|
|
prepareOptions(options, data);
|
|
$.plot($("#flotResponseTimesOverTime"), dataset, options);
|
|
// setup overview
|
|
$.plot($("#overviewResponseTimesOverTime"), dataset, prepareOverviewOptions(options));
|
|
}
|
|
};
|
|
|
|
// Response Times Over Time
|
|
function refreshResponseTimeOverTime(fixTimestamps) {
|
|
var infos = responseTimesOverTimeInfos;
|
|
prepareSeries(infos.data);
|
|
if(fixTimestamps) {
|
|
fixTimeStamps(infos.data.result.series, ${(timeZoneOffset?c)!0});
|
|
}
|
|
if(isGraph($("#flotResponseTimesOverTime"))){
|
|
infos.createGraph();
|
|
}else{
|
|
var choiceContainer = $("#choicesResponseTimesOverTime");
|
|
createLegend(choiceContainer, infos);
|
|
infos.createGraph();
|
|
setGraphZoomable("#flotResponseTimesOverTime", "#overviewResponseTimesOverTime");
|
|
$('#footerResponseTimesOverTime .legendColorBox > div').each(function(i){
|
|
$(this).clone().prependTo(choiceContainer.find("li").eq(i));
|
|
});
|
|
}
|
|
};
|
|
|
|
var latenciesOverTimeInfos = {
|
|
data: ${latenciesOverTime!"{}"},
|
|
getOptions: function() {
|
|
return {
|
|
series: {
|
|
lines: {
|
|
show: true
|
|
},
|
|
points: {
|
|
show: true
|
|
}
|
|
},
|
|
xaxis: {
|
|
mode: "time",
|
|
timeformat: "%H:%M:%S",
|
|
axisLabel: getElapsedTimeLabel(this.data.result.granularity),
|
|
axisLabelUseCanvas: true,
|
|
axisLabelFontSizePixels: 12,
|
|
axisLabelFontFamily: 'Verdana, Arial',
|
|
axisLabelPadding: 20,
|
|
},
|
|
yaxis: {
|
|
axisLabel: "Average response latencies in ms",
|
|
axisLabelUseCanvas: true,
|
|
axisLabelFontSizePixels: 12,
|
|
axisLabelFontFamily: 'Verdana, Arial',
|
|
axisLabelPadding: 20,
|
|
},
|
|
legend: {
|
|
noColumns: 2,
|
|
show: true,
|
|
container: '#legendLatenciesOverTime'
|
|
},
|
|
selection: {
|
|
mode: 'xy'
|
|
},
|
|
grid: {
|
|
hoverable: true // IMPORTANT! this is needed for tooltip to
|
|
// work
|
|
},
|
|
tooltip: true,
|
|
tooltipOpts: {
|
|
content: "%s : at %x Average latency was %y ms"
|
|
}
|
|
};
|
|
},
|
|
createGraph: function () {
|
|
var data = this.data;
|
|
var dataset = prepareData(data.result.series, $("#choicesLatenciesOverTime"));
|
|
var options = this.getOptions();
|
|
prepareOptions(options, data);
|
|
$.plot($("#flotLatenciesOverTime"), dataset, options);
|
|
// setup overview
|
|
$.plot($("#overviewLatenciesOverTime"), dataset, prepareOverviewOptions(options));
|
|
}
|
|
};
|
|
|
|
// Latencies Over Time
|
|
function refreshLatenciesOverTime(fixTimestamps) {
|
|
var infos = latenciesOverTimeInfos;
|
|
prepareSeries(infos.data);
|
|
if(fixTimestamps) {
|
|
fixTimeStamps(infos.data.result.series, ${(timeZoneOffset?c)!0});
|
|
}
|
|
if(isGraph($("#flotLatenciesOverTime"))) {
|
|
infos.createGraph();
|
|
}else {
|
|
var choiceContainer = $("#choicesLatenciesOverTime");
|
|
createLegend(choiceContainer, infos);
|
|
infos.createGraph();
|
|
setGraphZoomable("#flotLatenciesOverTime", "#overviewLatenciesOverTime");
|
|
$('#footerLatenciesOverTime .legendColorBox > div').each(function(i){
|
|
$(this).clone().prependTo(choiceContainer.find("li").eq(i));
|
|
});
|
|
}
|
|
};
|
|
|
|
var connectTimeOverTimeInfos = {
|
|
data: ${connectTimeOverTime!"{}"},
|
|
getOptions: function() {
|
|
return {
|
|
series: {
|
|
lines: {
|
|
show: true
|
|
},
|
|
points: {
|
|
show: true
|
|
}
|
|
},
|
|
xaxis: {
|
|
mode: "time",
|
|
timeformat: "%H:%M:%S",
|
|
axisLabel: getConnectTimeLabel(this.data.result.granularity),
|
|
axisLabelUseCanvas: true,
|
|
axisLabelFontSizePixels: 12,
|
|
axisLabelFontFamily: 'Verdana, Arial',
|
|
axisLabelPadding: 20,
|
|
},
|
|
yaxis: {
|
|
axisLabel: "Average Connect Time in ms",
|
|
axisLabelUseCanvas: true,
|
|
axisLabelFontSizePixels: 12,
|
|
axisLabelFontFamily: 'Verdana, Arial',
|
|
axisLabelPadding: 20,
|
|
},
|
|
legend: {
|
|
noColumns: 2,
|
|
show: true,
|
|
container: '#legendConnectTimeOverTime'
|
|
},
|
|
selection: {
|
|
mode: 'xy'
|
|
},
|
|
grid: {
|
|
hoverable: true // IMPORTANT! this is needed for tooltip to
|
|
// work
|
|
},
|
|
tooltip: true,
|
|
tooltipOpts: {
|
|
content: "%s : at %x Average connect time was %y ms"
|
|
}
|
|
};
|
|
},
|
|
createGraph: function () {
|
|
var data = this.data;
|
|
var dataset = prepareData(data.result.series, $("#choicesConnectTimeOverTime"));
|
|
var options = this.getOptions();
|
|
prepareOptions(options, data);
|
|
$.plot($("#flotConnectTimeOverTime"), dataset, options);
|
|
// setup overview
|
|
$.plot($("#overviewConnectTimeOverTime"), dataset, prepareOverviewOptions(options));
|
|
}
|
|
};
|
|
|
|
// Connect Time Over Time
|
|
function refreshConnectTimeOverTime(fixTimestamps) {
|
|
var infos = connectTimeOverTimeInfos;
|
|
prepareSeries(infos.data);
|
|
if(fixTimestamps) {
|
|
fixTimeStamps(infos.data.result.series, ${(timeZoneOffset?c)!0});
|
|
}
|
|
if(isGraph($("#flotConnectTimeOverTime"))) {
|
|
infos.createGraph();
|
|
}else {
|
|
var choiceContainer = $("#choicesConnectTimeOverTime");
|
|
createLegend(choiceContainer, infos);
|
|
infos.createGraph();
|
|
setGraphZoomable("#flotConnectTimeOverTime", "#overviewConnectTimeOverTime");
|
|
$('#footerConnectTimeOverTime .legendColorBox > div').each(function(i){
|
|
$(this).clone().prependTo(choiceContainer.find("li").eq(i));
|
|
});
|
|
}
|
|
};
|
|
|
|
var responseTimePercentilesOverTimeInfos = {
|
|
data: ${responseTimePercentilesOverTime!"{}"},
|
|
getOptions: function() {
|
|
return {
|
|
series: {
|
|
lines: {
|
|
show: true,
|
|
fill: true
|
|
},
|
|
points: {
|
|
show: true
|
|
}
|
|
},
|
|
xaxis: {
|
|
mode: "time",
|
|
timeformat: "%H:%M:%S",
|
|
axisLabel: getElapsedTimeLabel(this.data.result.granularity),
|
|
axisLabelUseCanvas: true,
|
|
axisLabelFontSizePixels: 12,
|
|
axisLabelFontFamily: 'Verdana, Arial',
|
|
axisLabelPadding: 20,
|
|
},
|
|
yaxis: {
|
|
axisLabel: "Response Time in ms",
|
|
axisLabelUseCanvas: true,
|
|
axisLabelFontSizePixels: 12,
|
|
axisLabelFontFamily: 'Verdana, Arial',
|
|
axisLabelPadding: 20,
|
|
},
|
|
legend: {
|
|
noColumns: 2,
|
|
show: true,
|
|
container: '#legendResponseTimePercentilesOverTime'
|
|
},
|
|
selection: {
|
|
mode: 'xy'
|
|
},
|
|
grid: {
|
|
hoverable: true // IMPORTANT! this is needed for tooltip to
|
|
// work
|
|
},
|
|
tooltip: true,
|
|
tooltipOpts: {
|
|
content: "%s : at %x Response time was %y ms"
|
|
}
|
|
};
|
|
},
|
|
createGraph: function () {
|
|
var data = this.data;
|
|
var dataset = prepareData(data.result.series, $("#choicesResponseTimePercentilesOverTime"));
|
|
var options = this.getOptions();
|
|
prepareOptions(options, data);
|
|
$.plot($("#flotResponseTimePercentilesOverTime"), dataset, options);
|
|
// setup overview
|
|
$.plot($("#overviewResponseTimePercentilesOverTime"), dataset, prepareOverviewOptions(options));
|
|
}
|
|
};
|
|
|
|
// Response Time Percentiles Over Time
|
|
function refreshResponseTimePercentilesOverTime(fixTimestamps) {
|
|
var infos = responseTimePercentilesOverTimeInfos;
|
|
prepareSeries(infos.data);
|
|
if(fixTimestamps) {
|
|
fixTimeStamps(infos.data.result.series, ${(timeZoneOffset?c)!0});
|
|
}
|
|
if(isGraph($("#flotResponseTimePercentilesOverTime"))) {
|
|
infos.createGraph();
|
|
}else {
|
|
var choiceContainer = $("#choicesResponseTimePercentilesOverTime");
|
|
createLegend(choiceContainer, infos);
|
|
infos.createGraph();
|
|
setGraphZoomable("#flotResponseTimePercentilesOverTime", "#overviewResponseTimePercentilesOverTime");
|
|
$('#footerResponseTimePercentilesOverTime .legendColorBox > div').each(function(i){
|
|
$(this).clone().prependTo(choiceContainer.find("li").eq(i));
|
|
});
|
|
}
|
|
};
|
|
|
|
|
|
var responseTimeVsRequestInfos = {
|
|
data: ${responseTimeVsRequest!"{}"},
|
|
getOptions: function() {
|
|
return {
|
|
series: {
|
|
lines: {
|
|
show: false
|
|
},
|
|
points: {
|
|
show: true
|
|
}
|
|
},
|
|
xaxis: {
|
|
axisLabel: "Global number of requests per second",
|
|
axisLabelUseCanvas: true,
|
|
axisLabelFontSizePixels: 12,
|
|
axisLabelFontFamily: 'Verdana, Arial',
|
|
axisLabelPadding: 20,
|
|
},
|
|
yaxis: {
|
|
axisLabel: "Median Response Time in ms",
|
|
axisLabelUseCanvas: true,
|
|
axisLabelFontSizePixels: 12,
|
|
axisLabelFontFamily: 'Verdana, Arial',
|
|
axisLabelPadding: 20,
|
|
},
|
|
legend: {
|
|
noColumns: 2,
|
|
show: true,
|
|
container: '#legendResponseTimeVsRequest'
|
|
},
|
|
selection: {
|
|
mode: 'xy'
|
|
},
|
|
grid: {
|
|
hoverable: true // IMPORTANT! this is needed for tooltip to work
|
|
},
|
|
tooltip: true,
|
|
tooltipOpts: {
|
|
content: "%s : Median response time at %x req/s was %y ms"
|
|
},
|
|
colors: ["#9ACD32", "#FF6347"]
|
|
};
|
|
},
|
|
createGraph: function () {
|
|
var data = this.data;
|
|
var dataset = prepareData(data.result.series, $("#choicesResponseTimeVsRequest"));
|
|
var options = this.getOptions();
|
|
prepareOptions(options, data);
|
|
$.plot($("#flotResponseTimeVsRequest"), dataset, options);
|
|
// setup overview
|
|
$.plot($("#overviewResponseTimeVsRequest"), dataset, prepareOverviewOptions(options));
|
|
|
|
}
|
|
};
|
|
|
|
// Response Time vs Request
|
|
function refreshResponseTimeVsRequest() {
|
|
var infos = responseTimeVsRequestInfos;
|
|
prepareSeries(infos.data);
|
|
if (isGraph($("#flotResponseTimeVsRequest"))){
|
|
infos.create();
|
|
}else{
|
|
var choiceContainer = $("#choicesResponseTimeVsRequest");
|
|
createLegend(choiceContainer, infos);
|
|
infos.createGraph();
|
|
setGraphZoomable("#flotResponseTimeVsRequest", "#overviewResponseTimeVsRequest");
|
|
$('#footerResponseRimeVsRequest .legendColorBox > div').each(function(i){
|
|
$(this).clone().prependTo(choiceContainer.find("li").eq(i));
|
|
});
|
|
}
|
|
};
|
|
|
|
|
|
var latenciesVsRequestInfos = {
|
|
data: ${latencyVsRequest!"{}"},
|
|
getOptions: function() {
|
|
return{
|
|
series: {
|
|
lines: {
|
|
show: false
|
|
},
|
|
points: {
|
|
show: true
|
|
}
|
|
},
|
|
xaxis: {
|
|
axisLabel: "Global number of requests per second",
|
|
axisLabelUseCanvas: true,
|
|
axisLabelFontSizePixels: 12,
|
|
axisLabelFontFamily: 'Verdana, Arial',
|
|
axisLabelPadding: 20,
|
|
},
|
|
yaxis: {
|
|
axisLabel: "Median Latency in ms",
|
|
axisLabelUseCanvas: true,
|
|
axisLabelFontSizePixels: 12,
|
|
axisLabelFontFamily: 'Verdana, Arial',
|
|
axisLabelPadding: 20,
|
|
},
|
|
legend: { noColumns: 2,show: true, container: '#legendLatencyVsRequest' },
|
|
selection: {
|
|
mode: 'xy'
|
|
},
|
|
grid: {
|
|
hoverable: true // IMPORTANT! this is needed for tooltip to work
|
|
},
|
|
tooltip: true,
|
|
tooltipOpts: {
|
|
content: "%s : Median response time at %x req/s was %y ms"
|
|
},
|
|
colors: ["#9ACD32", "#FF6347"]
|
|
};
|
|
},
|
|
createGraph: function () {
|
|
var data = this.data;
|
|
var dataset = prepareData(data.result.series, $("#choicesLatencyVsRequest"));
|
|
var options = this.getOptions();
|
|
prepareOptions(options, data);
|
|
$.plot($("#flotLatenciesVsRequest"), dataset, options);
|
|
// setup overview
|
|
$.plot($("#overviewLatenciesVsRequest"), dataset, prepareOverviewOptions(options));
|
|
}
|
|
};
|
|
|
|
// Latencies vs Request
|
|
function refreshLatenciesVsRequest() {
|
|
var infos = latenciesVsRequestInfos;
|
|
prepareSeries(infos.data);
|
|
if(isGraph($("#flotLatenciesVsRequest"))){
|
|
infos.createGraph();
|
|
}else{
|
|
var choiceContainer = $("#choicesLatencyVsRequest");
|
|
createLegend(choiceContainer, infos);
|
|
infos.createGraph();
|
|
setGraphZoomable("#flotLatenciesVsRequest", "#overviewLatenciesVsRequest");
|
|
$('#footerLatenciesVsRequest .legendColorBox > div').each(function(i){
|
|
$(this).clone().prependTo(choiceContainer.find("li").eq(i));
|
|
});
|
|
}
|
|
};
|
|
|
|
var hitsPerSecondInfos = {
|
|
data: ${hitsPerSecond!"{}"},
|
|
getOptions: function() {
|
|
return {
|
|
series: {
|
|
lines: {
|
|
show: true
|
|
},
|
|
points: {
|
|
show: true
|
|
}
|
|
},
|
|
xaxis: {
|
|
mode: "time",
|
|
timeformat: "%H:%M:%S",
|
|
axisLabel: getElapsedTimeLabel(this.data.result.granularity),
|
|
axisLabelUseCanvas: true,
|
|
axisLabelFontSizePixels: 12,
|
|
axisLabelFontFamily: 'Verdana, Arial',
|
|
axisLabelPadding: 20,
|
|
},
|
|
yaxis: {
|
|
axisLabel: "Number of hits / sec",
|
|
axisLabelUseCanvas: true,
|
|
axisLabelFontSizePixels: 12,
|
|
axisLabelFontFamily: 'Verdana, Arial',
|
|
axisLabelPadding: 20
|
|
},
|
|
legend: {
|
|
noColumns: 2,
|
|
show: true,
|
|
container: "#legendHitsPerSecond"
|
|
},
|
|
selection: {
|
|
mode : 'xy'
|
|
},
|
|
grid: {
|
|
hoverable: true // IMPORTANT! this is needed for tooltip to
|
|
// work
|
|
},
|
|
tooltip: true,
|
|
tooltipOpts: {
|
|
content: "%s at %x was %y.2 hits/sec"
|
|
}
|
|
};
|
|
},
|
|
createGraph: function createGraph() {
|
|
var data = this.data;
|
|
var dataset = prepareData(data.result.series, $("#choicesHitsPerSecond"));
|
|
var options = this.getOptions();
|
|
prepareOptions(options, data);
|
|
$.plot($("#flotHitsPerSecond"), dataset, options);
|
|
// setup overview
|
|
$.plot($("#overviewHitsPerSecond"), dataset, prepareOverviewOptions(options));
|
|
}
|
|
};
|
|
|
|
// Hits per second
|
|
function refreshHitsPerSecond(fixTimestamps) {
|
|
var infos = hitsPerSecondInfos;
|
|
prepareSeries(infos.data);
|
|
if(fixTimestamps) {
|
|
fixTimeStamps(infos.data.result.series, ${(timeZoneOffset?c)!0});
|
|
}
|
|
if (isGraph($("#flotHitsPerSecond"))){
|
|
infos.createGraph();
|
|
}else{
|
|
var choiceContainer = $("#choicesHitsPerSecond");
|
|
createLegend(choiceContainer, infos);
|
|
infos.createGraph();
|
|
setGraphZoomable("#flotHitsPerSecond", "#overviewHitsPerSecond");
|
|
$('#footerHitsPerSecond .legendColorBox > div').each(function(i){
|
|
$(this).clone().prependTo(choiceContainer.find("li").eq(i));
|
|
});
|
|
}
|
|
}
|
|
|
|
var codesPerSecondInfos = {
|
|
data: ${codesPerSecond!"{}"},
|
|
getOptions: function(){
|
|
return {
|
|
series: {
|
|
lines: {
|
|
show: true
|
|
},
|
|
points: {
|
|
show: true
|
|
}
|
|
},
|
|
xaxis: {
|
|
mode: "time",
|
|
timeformat: "%H:%M:%S",
|
|
axisLabel: getElapsedTimeLabel(this.data.result.granularity),
|
|
axisLabelUseCanvas: true,
|
|
axisLabelFontSizePixels: 12,
|
|
axisLabelFontFamily: 'Verdana, Arial',
|
|
axisLabelPadding: 20,
|
|
},
|
|
yaxis: {
|
|
axisLabel: "Number of responses / sec",
|
|
axisLabelUseCanvas: true,
|
|
axisLabelFontSizePixels: 12,
|
|
axisLabelFontFamily: 'Verdana, Arial',
|
|
axisLabelPadding: 20,
|
|
},
|
|
legend: {
|
|
noColumns: 2,
|
|
show: true,
|
|
container: "#legendCodesPerSecond"
|
|
},
|
|
selection: {
|
|
mode: 'xy'
|
|
},
|
|
grid: {
|
|
hoverable: true // IMPORTANT! this is needed for tooltip to
|
|
// work
|
|
},
|
|
tooltip: true,
|
|
tooltipOpts: {
|
|
content: "Number of Response Codes %s at %x was %y.2 responses / sec"
|
|
}
|
|
};
|
|
},
|
|
createGraph: function() {
|
|
var data = this.data;
|
|
var dataset = prepareData(data.result.series, $("#choicesCodesPerSecond"));
|
|
var options = this.getOptions();
|
|
prepareOptions(options, data);
|
|
$.plot($("#flotCodesPerSecond"), dataset, options);
|
|
// setup overview
|
|
$.plot($("#overviewCodesPerSecond"), dataset, prepareOverviewOptions(options));
|
|
}
|
|
};
|
|
|
|
// Codes per second
|
|
function refreshCodesPerSecond(fixTimestamps) {
|
|
var infos = codesPerSecondInfos;
|
|
prepareSeries(infos.data);
|
|
if(fixTimestamps) {
|
|
fixTimeStamps(infos.data.result.series, ${(timeZoneOffset?c)!0});
|
|
}
|
|
if(isGraph($("#flotCodesPerSecond"))){
|
|
infos.createGraph();
|
|
}else{
|
|
var choiceContainer = $("#choicesCodesPerSecond");
|
|
createLegend(choiceContainer, infos);
|
|
infos.createGraph();
|
|
setGraphZoomable("#flotCodesPerSecond", "#overviewCodesPerSecond");
|
|
$('#footerCodesPerSecond .legendColorBox > div').each(function(i){
|
|
$(this).clone().prependTo(choiceContainer.find("li").eq(i));
|
|
});
|
|
}
|
|
};
|
|
|
|
var transactionsPerSecondInfos = {
|
|
data: ${transactionsPerSecond!"{}"},
|
|
getOptions: function(){
|
|
return {
|
|
series: {
|
|
lines: {
|
|
show: true
|
|
},
|
|
points: {
|
|
show: true
|
|
}
|
|
},
|
|
xaxis: {
|
|
mode: "time",
|
|
timeformat: "%H:%M:%S",
|
|
axisLabel: getElapsedTimeLabel(this.data.result.granularity),
|
|
axisLabelUseCanvas: true,
|
|
axisLabelFontSizePixels: 12,
|
|
axisLabelFontFamily: 'Verdana, Arial',
|
|
axisLabelPadding: 20,
|
|
},
|
|
yaxis: {
|
|
axisLabel: "Number of transactions / sec",
|
|
axisLabelUseCanvas: true,
|
|
axisLabelFontSizePixels: 12,
|
|
axisLabelFontFamily: 'Verdana, Arial',
|
|
axisLabelPadding: 20
|
|
},
|
|
legend: {
|
|
noColumns: 2,
|
|
show: true,
|
|
container: "#legendTransactionsPerSecond"
|
|
},
|
|
selection: {
|
|
mode: 'xy'
|
|
},
|
|
grid: {
|
|
hoverable: true // IMPORTANT! this is needed for tooltip to
|
|
// work
|
|
},
|
|
tooltip: true,
|
|
tooltipOpts: {
|
|
content: "%s at %x was %y transactions / sec"
|
|
}
|
|
};
|
|
},
|
|
createGraph: function () {
|
|
var data = this.data;
|
|
var dataset = prepareData(data.result.series, $("#choicesTransactionsPerSecond"));
|
|
var options = this.getOptions();
|
|
prepareOptions(options, data);
|
|
$.plot($("#flotTransactionsPerSecond"), dataset, options);
|
|
// setup overview
|
|
$.plot($("#overviewTransactionsPerSecond"), dataset, prepareOverviewOptions(options));
|
|
}
|
|
};
|
|
|
|
// Transactions per second
|
|
function refreshTransactionsPerSecond(fixTimestamps) {
|
|
var infos = transactionsPerSecondInfos;
|
|
prepareSeries(infos.data);
|
|
if(fixTimestamps) {
|
|
fixTimeStamps(infos.data.result.series, ${(timeZoneOffset?c)!0});
|
|
}
|
|
if(isGraph($("#flotTransactionsPerSecond"))){
|
|
infos.createGraph();
|
|
}else{
|
|
var choiceContainer = $("#choicesTransactionsPerSecond");
|
|
createLegend(choiceContainer, infos);
|
|
infos.createGraph();
|
|
setGraphZoomable("#flotTransactionsPerSecond", "#overviewTransactionsPerSecond");
|
|
$('#footerTransactionsPerSecond .legendColorBox > div').each(function(i){
|
|
$(this).clone().prependTo(choiceContainer.find("li").eq(i));
|
|
});
|
|
}
|
|
};
|
|
|
|
var totalTPSInfos = {
|
|
data: ${totalTPS!"{}"},
|
|
getOptions: function(){
|
|
return {
|
|
series: {
|
|
lines: {
|
|
show: true
|
|
},
|
|
points: {
|
|
show: true
|
|
}
|
|
},
|
|
xaxis: {
|
|
mode: "time",
|
|
timeformat: "%H:%M:%S",
|
|
axisLabel: getElapsedTimeLabel(this.data.result.granularity),
|
|
axisLabelUseCanvas: true,
|
|
axisLabelFontSizePixels: 12,
|
|
axisLabelFontFamily: 'Verdana, Arial',
|
|
axisLabelPadding: 20,
|
|
},
|
|
yaxis: {
|
|
axisLabel: "Number of transactions / sec",
|
|
axisLabelUseCanvas: true,
|
|
axisLabelFontSizePixels: 12,
|
|
axisLabelFontFamily: 'Verdana, Arial',
|
|
axisLabelPadding: 20
|
|
},
|
|
legend: {
|
|
noColumns: 2,
|
|
show: true,
|
|
container: "#legendTotalTPS"
|
|
},
|
|
selection: {
|
|
mode: 'xy'
|
|
},
|
|
grid: {
|
|
hoverable: true // IMPORTANT! this is needed for tooltip to
|
|
// work
|
|
},
|
|
tooltip: true,
|
|
tooltipOpts: {
|
|
content: "%s at %x was %y transactions / sec"
|
|
},
|
|
colors: ["#9ACD32", "#FF6347"]
|
|
};
|
|
},
|
|
createGraph: function () {
|
|
var data = this.data;
|
|
var dataset = prepareData(data.result.series, $("#choicesTotalTPS"));
|
|
var options = this.getOptions();
|
|
prepareOptions(options, data);
|
|
$.plot($("#flotTotalTPS"), dataset, options);
|
|
// setup overview
|
|
$.plot($("#overviewTotalTPS"), dataset, prepareOverviewOptions(options));
|
|
}
|
|
};
|
|
|
|
// Total Transactions per second
|
|
function refreshTotalTPS(fixTimestamps) {
|
|
var infos = totalTPSInfos;
|
|
prepareSeries(infos.data);
|
|
if(fixTimestamps) {
|
|
fixTimeStamps(infos.data.result.series, ${(timeZoneOffset?c)!0});
|
|
}
|
|
if(isGraph($("#flotTotalTPS"))){
|
|
infos.createGraph();
|
|
}else{
|
|
var choiceContainer = $("#choicesTotalTPS");
|
|
createLegend(choiceContainer, infos);
|
|
infos.createGraph();
|
|
setGraphZoomable("#flotTotalTPS", "#overviewTotalTPS");
|
|
$('#footerTotalTPS .legendColorBox > div').each(function(i){
|
|
$(this).clone().prependTo(choiceContainer.find("li").eq(i));
|
|
});
|
|
}
|
|
};
|
|
|
|
// Collapse the graph matching the specified DOM element depending the collapsed
|
|
// status
|
|
function collapse(elem, collapsed){
|
|
if(collapsed){
|
|
$(elem).parent().find(".fa-chevron-up").removeClass("fa-chevron-up").addClass("fa-chevron-down");
|
|
} else {
|
|
$(elem).parent().find(".fa-chevron-down").removeClass("fa-chevron-down").addClass("fa-chevron-up");
|
|
if (elem.id == "bodyBytesThroughputOverTime") {
|
|
if (isGraph($(elem).find('.flot-chart-content')) == false) {
|
|
refreshBytesThroughputOverTime(true);
|
|
}
|
|
document.location.href="#bytesThroughputOverTime";
|
|
} else if (elem.id == "bodyLatenciesOverTime") {
|
|
if (isGraph($(elem).find('.flot-chart-content')) == false) {
|
|
refreshLatenciesOverTime(true);
|
|
}
|
|
document.location.href="#latenciesOverTime";
|
|
} else if (elem.id == "bodyConnectTimeOverTime") {
|
|
if (isGraph($(elem).find('.flot-chart-content')) == false) {
|
|
refreshConnectTimeOverTime(true);
|
|
}
|
|
document.location.href="#connectTimeOverTime";
|
|
} else if (elem.id == "bodyResponseTimePercentilesOverTime") {
|
|
if (isGraph($(elem).find('.flot-chart-content')) == false) {
|
|
refreshResponseTimePercentilesOverTime(true);
|
|
}
|
|
document.location.href="#responseTimePercentilesOverTime";
|
|
} else if (elem.id == "bodyResponseTimeDistribution") {
|
|
if (isGraph($(elem).find('.flot-chart-content')) == false) {
|
|
refreshResponseTimeDistribution();
|
|
}
|
|
document.location.href="#responseTimeDistribution" ;
|
|
} else if (elem.id == "bodySyntheticResponseTimeDistribution") {
|
|
if (isGraph($(elem).find('.flot-chart-content')) == false) {
|
|
refreshSyntheticResponseTimeDistribution();
|
|
}
|
|
document.location.href="#syntheticResponseTimeDistribution" ;
|
|
} else if (elem.id == "bodyActiveThreadsOverTime") {
|
|
if (isGraph($(elem).find('.flot-chart-content')) == false) {
|
|
refreshActiveThreadsOverTime(true);
|
|
}
|
|
document.location.href="#activeThreadsOverTime";
|
|
} else if (elem.id == "bodyTimeVsThreads") {
|
|
if (isGraph($(elem).find('.flot-chart-content')) == false) {
|
|
refreshTimeVsThreads();
|
|
}
|
|
document.location.href="#timeVsThreads" ;
|
|
} else if (elem.id == "bodyCodesPerSecond") {
|
|
if (isGraph($(elem).find('.flot-chart-content')) == false) {
|
|
refreshCodesPerSecond(true);
|
|
}
|
|
document.location.href="#codesPerSecond";
|
|
} else if (elem.id == "bodyTransactionsPerSecond") {
|
|
if (isGraph($(elem).find('.flot-chart-content')) == false) {
|
|
refreshTransactionsPerSecond(true);
|
|
}
|
|
document.location.href="#transactionsPerSecond";
|
|
} else if (elem.id == "bodyTotalTPS") {
|
|
if (isGraph($(elem).find('.flot-chart-content')) == false) {
|
|
refreshTotalTPS(true);
|
|
}
|
|
document.location.href="#totalTPS";
|
|
} else if (elem.id == "bodyResponseTimeVsRequest") {
|
|
if (isGraph($(elem).find('.flot-chart-content')) == false) {
|
|
refreshResponseTimeVsRequest();
|
|
}
|
|
document.location.href="#responseTimeVsRequest";
|
|
} else if (elem.id == "bodyLatenciesVsRequest") {
|
|
if (isGraph($(elem).find('.flot-chart-content')) == false) {
|
|
refreshLatenciesVsRequest();
|
|
}
|
|
document.location.href="#latencyVsRequest";
|
|
}
|
|
}
|
|
}
|
|
|
|
// Collapse
|
|
$(function() {
|
|
$('.collapse').on('shown.bs.collapse', function(){
|
|
collapse(this, false);
|
|
}).on('hidden.bs.collapse', function(){
|
|
collapse(this, true);
|
|
});
|
|
});
|
|
|
|
$(function() {
|
|
$(".glyphicon").mousedown( function(event){
|
|
var tmp = $('.in:not(ul)');
|
|
tmp.parent().parent().parent().find(".fa-chevron-up").removeClass("fa-chevron-down").addClass("fa-chevron-down");
|
|
tmp.removeClass("in");
|
|
tmp.addClass("out");
|
|
});
|
|
});
|
|
|
|
/*
|
|
* Activates or deactivates all series of the specified graph (represented by id parameter)
|
|
* depending on checked argument.
|
|
*/
|
|
function toggleAll(id, checked){
|
|
var placeholder = document.getElementById(id);
|
|
|
|
var cases = $(placeholder).find(':checkbox');
|
|
cases.prop('checked', checked);
|
|
$(cases).parent().children().children().toggleClass("legend-disabled", !checked);
|
|
|
|
var choiceContainer;
|
|
if ( id == "choicesBytesThroughputOverTime"){
|
|
choiceContainer = $("#choicesBytesThroughputOverTime");
|
|
refreshBytesThroughputOverTime(false);
|
|
} else if(id == "choicesResponseTimesOverTime"){
|
|
choiceContainer = $("#choicesResponseTimesOverTime");
|
|
refreshResponseTimeOverTime(false);
|
|
} else if ( id == "choicesLatenciesOverTime"){
|
|
choiceContainer = $("#choicesLatenciesOverTime");
|
|
refreshLatenciesOverTime(false);
|
|
} else if ( id == "choicesConnectTimeOverTime"){
|
|
choiceContainer = $("#choicesConnectTimeOverTime");
|
|
refreshConnectTimeOverTime(false);
|
|
} else if ( id == "responseTimePercentilesOverTime"){
|
|
choiceContainer = $("#choicesResponseTimePercentilesOverTime");
|
|
refreshResponseTimePercentilesOverTime(false);
|
|
} else if ( id == "choicesResponseTimePercentiles"){
|
|
choiceContainer = $("#choicesResponseTimePercentiles");
|
|
refreshResponseTimePercentiles();
|
|
} else if(id == "choicesActiveThreadsOverTime"){
|
|
choiceContainer = $("#choicesActiveThreadsOverTime");
|
|
refreshActiveThreadsOverTime(false);
|
|
} else if ( id == "choicesTimeVsThreads"){
|
|
choiceContainer = $("#choicesTimeVsThreads");
|
|
refreshTimeVsThreads();
|
|
} else if ( id == "choicesSyntheticResponseTimeDistribution"){
|
|
choiceContainer = $("#choicesSyntheticResponseTimeDistribution");
|
|
refreshSyntheticResponseTimeDistribution();
|
|
} else if ( id == "choicesResponseTimeDistribution"){
|
|
choiceContainer = $("#choicesResponseTimeDistribution");
|
|
refreshResponseTimeDistribution();
|
|
} else if ( id == "choicesHitsPerSecond"){
|
|
choiceContainer = $("#choicesHitsPerSecond");
|
|
refreshHitsPerSecond(false);
|
|
} else if(id == "choicesCodesPerSecond"){
|
|
choiceContainer = $("#choicesCodesPerSecond");
|
|
refreshCodesPerSecond(false);
|
|
} else if ( id == "choicesTransactionsPerSecond"){
|
|
choiceContainer = $("#choicesTransactionsPerSecond");
|
|
refreshTransactionsPerSecond(false);
|
|
} else if ( id == "choicesTotalTPS"){
|
|
choiceContainer = $("#choicesTotalTPS");
|
|
refreshTotalTPS(false);
|
|
} else if ( id == "choicesResponseTimeVsRequest"){
|
|
choiceContainer = $("#choicesResponseTimeVsRequest");
|
|
refreshResponseTimeVsRequest();
|
|
} else if ( id == "choicesLatencyVsRequest"){
|
|
choiceContainer = $("#choicesLatencyVsRequest");
|
|
refreshLatenciesVsRequest();
|
|
}
|
|
var color = checked ? "black" : "#818181";
|
|
choiceContainer.find("label").each(function(){
|
|
this.style.color = color;
|
|
});
|
|
}
|
|
|
|
// Unchecks all boxes for "Hide all samples" functionality
|
|
function uncheckAll(id){
|
|
toggleAll(id, false);
|
|
}
|
|
|
|
// Checks all boxes for "Show all samples" functionality
|
|
function checkAll(id){
|
|
toggleAll(id, true);
|
|
}
|
|
|
|
// Prepares data to be consumed by plot plugins
|
|
function prepareData(series, choiceContainer, customizeSeries){
|
|
var datasets = [];
|
|
|
|
// Add only selected series to the data set
|
|
choiceContainer.find("input:checked").each(function (index, item) {
|
|
var key = $(item).attr("name");
|
|
var i = 0;
|
|
var size = series.length;
|
|
while(i < size && series[i].label != key)
|
|
i++;
|
|
if(i < size){
|
|
var currentSeries = series[i];
|
|
datasets.push(currentSeries);
|
|
if(customizeSeries)
|
|
customizeSeries(currentSeries);
|
|
}
|
|
});
|
|
return datasets;
|
|
}
|
|
|
|
/*
|
|
* Ignore case comparator
|
|
*/
|
|
function sortAlphaCaseless(a,b){
|
|
return a.toLowerCase() > b.toLowerCase() ? 1 : -1;
|
|
};
|
|
|
|
/*
|
|
* Creates a legend in the specified element with graph information
|
|
*/
|
|
function createLegend(choiceContainer, infos) {
|
|
// Sort series by name
|
|
var keys = [];
|
|
$.each(infos.data.result.series, function(index, series){
|
|
keys.push(series.label);
|
|
});
|
|
keys.sort(sortAlphaCaseless);
|
|
|
|
// Create list of series with support of activation/deactivation
|
|
$.each(keys, function(index, key) {
|
|
var id = choiceContainer.attr('id') + index;
|
|
$('<li />')
|
|
.append($('<input id="' + id + '" name="' + key + '" type="checkbox" checked="checked" hidden />'))
|
|
.append($('<label />', { 'text': key , 'for': id }))
|
|
.appendTo(choiceContainer);
|
|
});
|
|
choiceContainer.find("label").click( function(){
|
|
if (this.style.color !== "rgb(129, 129, 129)" ){
|
|
this.style.color="#818181";
|
|
}else {
|
|
this.style.color="black";
|
|
}
|
|
$(this).parent().children().children().toggleClass("legend-disabled");
|
|
});
|
|
choiceContainer.find("label").mousedown( function(event){
|
|
event.preventDefault();
|
|
});
|
|
choiceContainer.find("label").mouseenter(function(){
|
|
this.style.cursor="pointer";
|
|
});
|
|
|
|
// Recreate graphe on series activation toggle
|
|
choiceContainer.find("input").click(function(){
|
|
infos.createGraph();
|
|
});
|
|
}
|