<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Shaker Report</title>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet"
          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

    <!-- Optional theme -->
    <link rel="stylesheet"
          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.9/c3.min.js"></script>

    <script type="text/javascript" src="https://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
    <link rel=stylesheet type=text/css href="https://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css">

    <style type="text/css">
        body {
            padding-top: 50px;
        }

        .navbar-fixed-top {
            border: 0 none;
        }

        .navbar-inverse .navbar-brand {
            color: white;
        }

        .sidebar {
            display: none;
        }

        @media (min-width: 768px) {
            .sidebar {
                background-color: #f5f5f5;
                border-right: 1px solid #ccc;
                bottom: 0;
                display: block;
                left: 0;
                overflow-x: hidden;
                overflow-y: auto;
                padding: 12px;
                position: fixed;
                top: 51px;
                z-index: 1000;
            }
        }

        .nav-sidebar {
            margin-bottom: 10px;
            margin-left: -20px;
            margin-right: -21px;
        }

        .nav-sidebar > li > a {
            padding: 5px 20px;
        }

        .nav-sidebar > .active > a, .nav-sidebar > .active > a:hover, .nav-sidebar > .active > a:focus {
            background-color: #428bca;
            color: #fff;
        }

        .main {
            padding: 10px;
        }

        @media (min-width: 768px) {
            .main {
                padding-left: 40px;
                padding-right: 40px;
            }
        }

        h5 {
            font-weight: bold;
        }

/*-- Chart --*/


.c3 svg {
  font: 10px sans-serif;
}
.c3 path, .c3 line {
  fill: none;
  stroke: #000;
}
.c3 text {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.c3-legend-item-tile,
.c3-xgrid-focus,
.c3-ygrid,
.c3-event-rect,
.c3-bars path {
  shape-rendering: crispEdges;
}

.c3-chart-arc path {
  stroke: #fff;

}
.c3-chart-arc text {
  fill: #fff;
  font-size: 13px;
}

/*-- Axis --*/

.c3-axis-x .tick {
}
.c3-axis-x-label {
}

.c3-axis-y .tick {
}
.c3-axis-y-label {
}

.c3-axis-y2 .tick {
}
.c3-axis-y2-label {
}

/*-- Grid --*/

.c3-grid line {
  stroke: #aaa;
}
.c3-grid text {
  fill: #aaa;
}
.c3-xgrid, .c3-ygrid {
  stroke-dasharray: 3 3;
}
.c3-xgrid-focus {
}

/*-- Text on Chart --*/

.c3-text {
}

.c3-text.c3-empty {
  fill: #808080;
  font-size: 2em;
}

/*-- Line --*/

.c3-line {
  stroke-width: 1px;
}
/*-- Point --*/

.c3-circle._expanded_ {
  stroke-width: 1px;
  stroke: white;
}
.c3-selected-circle {
  fill: white;
  stroke-width: 2px;
}

/*-- Bar --*/

.c3-bar {
  stroke-width: 0;
}
.c3-bar._expanded_ {
  fill-opacity: 0.75;
}

/*-- Arc --*/

.c3-chart-arcs-title {
  font-size: 1.3em;
}

/*-- Focus --*/

.c3-target.c3-focused {
  opacity: 1;
}
.c3-target.c3-focused path.c3-line, .c3-target.c3-focused path.c3-step {
  stroke-width: 2px;
}
.c3-target.c3-defocused {
  opacity: 0.3 !important;
}


/*-- Region --*/

.c3-region {
  fill: steelblue;
  fill-opacity: .1;
}

/*-- Brush --*/

.c3-brush .extent {
  fill-opacity: .1;
}

/*-- Select - Drag --*/

.c3-dragarea {
}

/*-- Legend --*/

.c3-legend-item {
  font-size: 12px;
}
.c3-legend-item-hidden {
  opacity: 0.15;
}

.c3-legend-background {
  opacity: 0.75;
  fill: white;
  stroke: lightgray;
  stroke-width: 1
}

/*-- Tooltip --*/

.c3-tooltip-container {
  z-index: 10;
}
.c3-tooltip {
  border-collapse:collapse;
  border-spacing:0;
  background-color:#fff;
  empty-cells:show;
  -webkit-box-shadow: 7px 7px 12px -9px rgb(119,119,119);
     -moz-box-shadow: 7px 7px 12px -9px rgb(119,119,119);
          box-shadow: 7px 7px 12px -9px rgb(119,119,119);
  opacity: 0.9;
}
.c3-tooltip tr {
  border:1px solid #CCC;
}
.c3-tooltip th {
  background-color: #aaa;
  font-size:14px;
  padding:2px 5px;
  text-align:left;
  color:#FFF;
}
.c3-tooltip td {
  font-size:13px;
  padding: 3px 6px;
  background-color:#fff;
  border-left:1px dotted #999;
}
.c3-tooltip td > span {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
}
.c3-tooltip td.value{
  text-align: right;
}

.c3-area {
  stroke-width: 0;
  opacity: 0.2;
}

.c3-chart-arcs .c3-chart-arcs-background {
  fill: #e0e0e0;
  stroke: none;
}
.c3-chart-arcs .c3-chart-arcs-gauge-unit {
  fill: #000;
  font-size: 16px;
}
.c3-chart-arcs .c3-chart-arcs-gauge-max {
  fill: #777;
}
.c3-chart-arcs .c3-chart-arcs-gauge-min {
  fill: #777;
}

.c3-chart-arc .c3-gauge-value {
  fill: #000;
/*  font-size: 28px !important;*/
}

    </style>

    <script type="application/javascript">
        $(document).ready(function () {
            $("#scenario_agents").dataTable({
                "autoWidth": true,
                "paging":   false,
                "ordering": false,
                "info":     false
            });
        });

    </script>

</head>

<body>

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed"
                    data-toggle="collapse" data-target="#navbar"
                    aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
            </button>
            <a class="navbar-brand">Shaker Report</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="https://github.com/stackforge/shaker">About</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<div class="container-fluid">
    <div class="row tabbable">
        <div class="col-sm-3 col-md-2 sidebar">
            <ul class="nav nav-sidebar">
                <li class="active"><a href="#scenario" data-toggle="tab">Overview</a>
                </li>

                {% set tests = report.result %}

                {% for test in tests %}
                    <li><a href="#test-{{ test.definition.uuid }}" data-toggle="tab">
                        {% if test.definition.title %}
                            {{ test.definition.title }}
                        {% else %}
                            Test {{ test.definition }}
                        {% endif %}
                    </a></li>

                    {% set iterations = test.results_per_iteration|length %}
                    {% for result_per_iteration in test.results_per_iteration %}
                        {% set cnt = result_per_iteration.agents|length %}
                        <li class="col-md-offset-1"><a href="#test-{{ test.definition.uuid }}-{{ cnt }}" data-toggle="tab">
                            {% if iterations == 1 %}
                                Details
                            {% else %}
                                {{ cnt }} Threads
                            {% endif %}
                        </a></li>
                    {% endfor %}
                {% endfor %}
            </ul>
        </div>

        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <div class="tab-content">
                <div id="scenario" class="tab-pane active">
                    <h3>Scenario:</h3>
                    <pre>{{ report.scenario|yaml }}</pre>

                    <h3>Agents:</h3>
                    <table id="scenario_agents">
                        <thead><tr><th>Agent</th><th>Mode</th><th>IP</th><th>Node</th><th>Instance Name</th></tr></thead>
                        <tbody>
                        {% for agent in report.agents %}
                            {% if agent.mode != 'slave' %}
                                <tr>
                                    <td>{{ agent.id }}</td>
                                    <td>{{ agent.mode }}</td>
                                    <td>{{ agent.ip }}</td>
                                    <td>{{ agent.node }}</td>
                                    <td>{{ agent.instance_name }}</td>
                                </tr>
                                {% if agent.slave %}
                                    <tr style="background-color: #efefef">
                                        <td style="padding-left: 2em;">{{ agent.slave.id }}</td>
                                        <td>{{ agent.slave.mode }}</td>
                                        <td>{{ agent.slave.ip }}</td>
                                        <td>{{ agent.slave.node }}</td>
                                        <td>{{ agent.slave.instance_name }}</td>
                                    </tr>
                                {% endif %}
                            {% endif %}
                        {% endfor %}
                        </tbody>
                    </table>
                </div>

                {% set tests = report.result %}
                {% for test in tests %}
                    <div id="test-{{ test.definition.uuid }}" class="tab-pane">
                        <h3>Test Case Specification</h3>
                        <pre>{{ test.definition|yaml }}</pre>

                        {# show summary only of number of iterations > 1 #}
                        {% set iteration_cnt = test.results_per_iteration|length %}
                        {% if iteration_cnt > 1 %}

                        {% if test.chart %}
                            <div id="chart-{{ test.definition.uuid }}"></div>
                            <script type="application/javascript">
                                $(document).ready(function () {
                                c3.generate({
                                    bindto: '#chart-{{ test.definition.uuid }}',
                                    data: {
                                        x: 'x',
                                        columns: {{ test.chart|json }},
                                        type: 'step'
                                    },
                                    axis: {
                                        x: { label: '# threads' },
                                        y: { label: 'Bandwidth, Mbits/s', min: 0 }
                                    }
                                });
                                });
                            </script>
                        {% endif %}
                        {% endif %}
                    </div>

                    {% for result_per_iteration in test.results_per_iteration %}
                        {% set cnt = result_per_iteration.agents|length %}
                        <div id="test-{{ test.definition.uuid }}-{{ cnt }}" class="tab-pane">

                            <h3>Iteration Summary</h3>

                            {# show summary only of number of agents > 1 #}
                            {% set agent_cnt = result_per_iteration.results_per_agent|length %}
                            {% if agent_cnt > 1 %}

                            {% if result_per_iteration.stats %}
                                <div class="row">
                                {% for stat_title, stat_values in result_per_iteration.stats.items() %}
                                    <div class="col-md-4">
                                        <h5>Stats for {{ stat_title }}</h5>

                                        <dl class="dl-horizontal">
                                            <dt>Max</dt><dd>{{ stat_values.max|round(2) }} {{ stat_values.unit }}</dd>
                                            <dt>Min</dt><dd>{{ stat_values.min|round(2) }} {{ stat_values.unit }}</dd>
                                            <dt>Mean</dt><dd>{{ stat_values.mean|round(2) }} {{ stat_values.unit }}</dd>
                                        </dl>
                                    </div>
                                {% endfor %}
                                </div>
                            {% endif %}

                            {% if result_per_iteration.chart %}
                                <div id="chart-{{ result_per_iteration.uuid }}"></div>
                                <script type="application/javascript">
                                    $(document).ready(function () {
                                    c3.generate({
                                        bindto: '#chart-{{ result_per_iteration.uuid }}',
                                        data: {
                                            x: 'time',
                                            columns: {{ result_per_iteration.chart|json }},
                                            types: { bandwidth: 'area' }
                                        },
                                        axis: {
                                            x: { label: 'time' },
                                            y: { label: 'Bandwidth, Mbits/s', min: 0 }
                                        }
                                    });
                                    });
                                </script>
                            {% endif %}

                            {% if result_per_iteration.node_chart %}
                                <h5>Per-node stats</h5>
                                    <div id="chart-{{ result_per_iteration.uuid }}-node"></div>
                                    <script type="application/javascript">
                                        $(document).ready(function () {
                                        c3.generate({
                                            bindto: '#chart-{{ result_per_iteration.uuid }}-node',
                                            data: {
                                                x: 'x',
                                                columns: {{ result_per_iteration.node_chart|json }},
                                                type: 'step',
                                                order: null
                                            },
                                            axis: {
                                                x: { type: 'category' }
                                            }
                                        });
                                        });
                                    </script>
                            {% endif %}
                            {% endif %}

                            {####  PER-AGENT DATA  ####}
                            {% for result_per_agent in result_per_iteration.results_per_agent %}
                                <h4>Agent {{ result_per_agent.agent.id }}
                                    ({{ result_per_agent.agent.ip }}, {{ result_per_agent.agent.node }})</h4>

                                {% if result_per_agent.samples %}
                                    {% if result_per_agent.stats %}
                                        <div class="row">
                                        {% for stat_title, stat_values in result_per_agent.stats.items() %}
                                            <div class="col-md-4">
                                                <h5>Stats for {{ stat_title }}</h5>

                                                <dl class="dl-horizontal">
                                                  <dt>Max</dt><dd>{{ stat_values.max|round(2) }} {{ stat_values.unit }}</dd>
                                                  <dt>Min</dt><dd>{{ stat_values.min|round(2) }} {{ stat_values.unit }}</dd>
                                                  <dt>Mean</dt><dd>{{ stat_values.mean|round(2) }} {{ stat_values.unit }}</dd>
                                                </dl>
                                            </div>
                                        {% endfor %}
                                        </div>
                                    {% endif %}

                                    {% if result_per_agent.chart %}
                                    <div id="chart-{{ result_per_agent.uuid }}"></div>
                                    <script type="application/javascript">
                                        $(document).ready(function () {
                                        c3.generate({
                                            bindto: '#chart-{{ result_per_agent.uuid }}',
                                            data: {
                                                x: 'time',
                                                columns: {{ result_per_agent.chart|json }},
                                                types: { bandwidth: 'area' }
                                            },
                                            axis: {
                                                x: { label: 'time' },
                                                y: { label: 'Bandwidth, Mbits/s', min: 0 }
                                            }
                                        });
                                        });
                                    </script>
                                    {% endif %}
                                {% endif %}

                                {% if result_per_agent.command %}
                                    <h5>Command:</h5>
                                    <pre>{{ result_per_agent.command }}</pre>
                                {% endif %}

                                {% if result_per_agent.stdout %}
                                    <h5>Stdout:</h5>
                                    <pre>{{ result_per_agent.stdout }}</pre>
                                {% endif %}

                                {% if result_per_agent.stderr %}
                                    <h5>Stderr:</h5>
                                    <pre>{{ result_per_agent.stderr }}</pre>
                                {% endif %}
                            {% endfor %}
                        </div>
                    {% endfor %}
                {% endfor %}
            </div>
        </div>
    </div>
</div>

</body>
</html>
