<!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>
