130 lines
4.7 KiB
Django/Jinja
130 lines
4.7 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>
|
|
<script src="http://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
|
|
<link href="http://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
|
|
<style media="all" type="text/css">
|
|
.alignRight { text-align: right; }
|
|
</style>
|
|
<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(
|
|
{{kbstats.latency_tuples}}
|
|
);
|
|
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,
|
|
gridlines: {count: 8},
|
|
minorGridlines: {count: 1},
|
|
minValue: 0 },
|
|
legend: { position: 'bottom' }
|
|
};
|
|
|
|
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 +
|
|
'\%\'ile = ' + dt.getValue(row, j) + ' msec'
|
|
}
|
|
})(i)
|
|
});
|
|
}
|
|
var view = new google.visualization.DataView(data);
|
|
view.setColumns(columns);
|
|
chart.draw(view, options);
|
|
}
|
|
// For jquery dataTable
|
|
$(document).ready(function() {
|
|
$('#runs_table').dataTable({
|
|
"searching": {{kbstats.search_page}},
|
|
"paging": {{kbstats.search_page}},
|
|
"bInfo" : {{kbstats.search_page}},
|
|
"aoColumnDefs": [
|
|
{ "sClass": "alignRight", "aTargets": [ 1, 2, 3, 4, 5, 6 ] }
|
|
]
|
|
});
|
|
} );
|
|
</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"><h3>HTTP Scale Results</h3></div>
|
|
<div class="panel-body">
|
|
|
|
{% if kbstats.table %}
|
|
<div class="row"><!-- ROW1 -->
|
|
<table id="runs_table" class="table hover display compact" cellspacing="0" width="100%">
|
|
<thead>
|
|
<tr>
|
|
{% for col_name in kbstats.table.col_names %}
|
|
<th>{{col_name}}</th>
|
|
{% endfor %}
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
{% for row in kbstats.table.rows %}
|
|
<tr>
|
|
{% for cell in row.cells %}
|
|
<td>{{cell}}</td>
|
|
{% endfor %}
|
|
<td>
|
|
<div class="progress-bar" role="progressbar" style="width:{{row.rx.percent}}%;min-width: 20px">
|
|
<span>{{ row.rx.value }}</span>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div><!-- ROW1 -->
|
|
{% endif %}
|
|
|
|
|
|
<div class="row" align="center"><!-- LATENCY CHART ROW -->
|
|
<div id="curve_chart" style="width: 900px; height: 500px"></div>
|
|
</div><!-- LATENCY CHART ROW -->
|
|
</div><!--/panel-body-->
|
|
</div><!--/panel-->
|
|
</div><!--/container-->
|
|
</body>
|
|
</html>
|