e8b378bd7b
1. Add to return the counters of socket timeout; 2. Bugfixes on kb_gen_chart.py; 3. Create testing and tested kloud parallelly; Change-Id: Ie67bcc3c7a4375a885a478352b0c04731b2aca75
122 lines
5.3 KiB
Django/Jinja
122 lines
5.3 KiB
Django/Jinja
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<script src="http://code.jquery.com/jquery.min.js"></script>
|
|
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
|
|
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
|
|
<meta charset="utf-8">
|
|
<script type="text/javascript"
|
|
src="https://www.google.com/jsapi?autoload={
|
|
'modules':[{
|
|
'name':'visualization',
|
|
'version':'1',
|
|
'packages':['corechart']
|
|
}]
|
|
}"></script>
|
|
<script type="text/javascript">
|
|
google.setOnLoadCallback(drawChart);
|
|
|
|
function drawChart() {
|
|
var data = google.visualization.arrayToDataTable([
|
|
['Percentile', 'Latency (msec)'],
|
|
{% for latency_list in latency_stats %}
|
|
{{latency_list}},
|
|
{% endfor %}
|
|
]);
|
|
var ticks =
|
|
[{v:2,f:'50%'},
|
|
{v:4,f:'75%'},
|
|
{v:10,f:'90%'},
|
|
{v:100,f:'99%'},
|
|
{v:1000,f:'99.9%'},
|
|
{v:10000,f:'99.99%'},
|
|
{v:100000,f:'99.999%'},
|
|
];
|
|
var options = {
|
|
title: 'HTTP Requests Latency Distribution',
|
|
curveType: 'function',
|
|
hAxis: {title: 'Percentile', minValue: 0, logScale: true, ticks:ticks },
|
|
vAxis: {title: 'Latency (ms)', minValue: 0, logScale: true, minValue: 0 },
|
|
legend: { position: 'none' }
|
|
};
|
|
|
|
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
|
|
// add tooptips with correct percentile text to data:
|
|
var columns = [0];
|
|
for (var i = 1; i < data.getNumberOfColumns(); i++) {
|
|
columns.push(i);
|
|
columns.push({
|
|
type: 'string',
|
|
properties: {
|
|
role: 'tooltip'
|
|
},
|
|
calc: (function (j) {
|
|
return function (dt, row) {
|
|
var percentile = 100.0 - (100.0/dt.getValue(row, 0));
|
|
return dt.getColumnLabel(j) + ': ' +
|
|
percentile.toPrecision(6) +
|
|
'\%\'ile = ' + dt.getValue(row, j) + ' msec'
|
|
}
|
|
})(i)
|
|
});
|
|
}
|
|
var view = new google.visualization.DataView(data);
|
|
view.setColumns(columns);
|
|
chart.draw(view, options);
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class="container-fluid">
|
|
<h2><i class="glyphicon glyphicon-dashboard"></i> KloudBuster Report</h2>
|
|
<div class="panel panel-primary">
|
|
<div class="panel-heading"><h4>HTTP Scale Results</h4></div>
|
|
<div class="panel-body">
|
|
<div class="row"><!-- ROW1 -->
|
|
<div class="col-md-6">
|
|
<ul class="list-group">
|
|
<li class="list-group-item list-group-item-success">
|
|
<span class="badge">{{ total_connections }}</span>
|
|
Total Concurrent Connections
|
|
</li>
|
|
<li class="list-group-item list-group-item-success">
|
|
<span class="badge">{{ total_server_vms }}</span>
|
|
Server VM count
|
|
</li>
|
|
<li class="list-group-item list-group-item-success">
|
|
<span class="badge">{{ http_total_req }}</span>
|
|
Total Requests/Responses
|
|
</li>
|
|
<li class="list-group-item list-group-item-success">
|
|
<span class="badge">{{ http_sock_err }}</span>
|
|
Total Socket Errors
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="panel">
|
|
Requests/sec <span class="label label-default pull-right">{{ rps }}/{{ rps_max }}</span>
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="{{ rps }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ rps_percent }}%">
|
|
<span">{{ rps_percent }}%</span>
|
|
</div>
|
|
</div>
|
|
|
|
Reception Throughput (Gbps)<span class="label label-default pull-right">{{ rx }}/{{ rx_max }}</span>
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="{{ rx }}" aria-valuemin="0" aria-valuemax="10" style="width: {{ rx_percent }}%">
|
|
<span>{{ rx_percent }}%</span>
|
|
</div>
|
|
</div> </div>
|
|
</div>
|
|
</div><!-- ROW1 -->
|
|
|
|
<div class="row" align="center"><!-- ROW2 -->
|
|
<div id="curve_chart" style="width: 1200px; height: 500px"></div>
|
|
</div><!-- ROW2 -->
|
|
</div><!--/panel-body-->
|
|
</div><!--/panel-->
|
|
</div><!--/container-->
|
|
</body>
|
|
</html> |