{% extends "base.html" %}
{% comment %}© 2012, Multapplied Networks, Inc.{% endcomment %}
{% load speedtest %}
{% load static from staticfiles %}

{% block pagescript %}
<!--[if lte IE 8]><script type="text/javascript" src="{% static "js/lib/excanvas.min.js" %}"></script><![endif]-->
<script type="text/html" id="results-template">
    Throughput: <%= r_mbps.toFixed(2) %> Mbps, <%= r_pkts_ps.toFixed(0) %> packets/sec<br>
    Latency: avg. <%= latency_avg.toFixed(1) %> ms, st. dev <%= latency_st_dev.toFixed(1) %> ms (n=<%= latency_n.toFixed(1) %>)<br>
    Send queue: <% if (s_queue_size_n > 0) { %>avg. queue size <%= s_queue_size_avg.toFixed(0) %> KB (n=<%= s_queue_size_n %>)<% } else { %>not recorded<% }; %><br>
    Packet loss: <%= (100 * pkt_loss).toFixed(2) %>%
</script>
<script type="text/html" id="error-message-template">
    <i class="fa fa-exclamation-circle icon-color-warn"> </i> Error: <%= error_message %>
</script>
<script>
$(function() {
    $('[data-toggle="popover"]').popover();
    // Poll the given URL at frequency to see if there are any results.
    function poll_speedtest(url, frequency, success_fn) {
        function retry() {
            window.setTimeout(
                function () {
                    poll_speedtest(url, frequency, success_fn);
                },
                frequency
            );
        }

        $.ajax({
            url: url,
            data: {},
            dataType: "json"
        }).done(function(data, textStatus, jqXHR) {
            if (data.updated_time === null) {
                retry();
            } else if (data.error_message) {
                on_fail(data.error_message);
            } else {
                // Keep trying to get more data if we are missing the CPU
                // metrics, since they can be delivered late
                var missing_data = data.slave_cpu_load == null
                    || data.master_cpu_load == null
                    || data.slave_stats == null
                    || data.master_stats == null;
                if (missing_data) {
                    retry();
                }
                // If we only get one of slave stats or master stats the results
                // page breaks, so wait for both to be available before calling
                // the request a success.
                if (data.slave_stats != null && data.master_stats != null) {
                    success_fn(data);
                }
            }
        }).fail(function(data, textStatus, jqXHR) {
            // 4xx errors shouldn't keep retrying
            if (data.status >= 400 && data.status < 500) {
                on_fail(jqXHR);
            } else {
                // but everything else should
                retry();
            }
        });
    };

    poll_speedtest(
        "{% url "current:speedtest-detail" bond.id speed_test.id %}",
        1000.0,
        on_speedtest_results
    );
});

var resultsTemplate = _.template($("#results-template").html());
var errorTemplate = _.template($("#error-message-template").html());

function on_fail(errorThrown) {
    $('#results').hide().parent().html(errorTemplate({error_message: errorThrown}));
    $('#chart-loading').hide()
}

function on_speedtest_results(speedtest) {
    stats = {
        r_mbps: speedtest.slave_stats.bytes_received * 0.000008 / speedtest.actual_length,
        r_pkts_ps: speedtest.slave_stats.packets_received / speedtest.actual_length,
        latency_avg: speedtest.master_stats.latency.mean * 1000,
        latency_st_dev: speedtest.master_stats.latency.stdev * 1000,
        latency_n: speedtest.master_stats.latency.n,
        s_queue_size_avg: speedtest.master_stats.queue_size.mean / 1000,
        s_queue_size_n: speedtest.master_stats.queue_size.n,
        pkt_loss: speedtest.master_stats.packets_sent ? (speedtest.master_stats.packets_sent - speedtest.slave_stats.packets_received) / speedtest.master_stats.packets_sent : 0.0
    };
    $("#results").html(resultsTemplate(stats));
    $('.cpu-load-container').show();
    progress_results = speedtest.progress_results
    $("#chart-loading").hide();
    if (progress_results.throughput.length > 0) {
        $("#throughput-chart").parent().show();
        $.plot(
            $("#throughput-chart"),
            [
                {
                    data: progress_results.throughput,
                    color: "#24B5EA",
                    label: "Throughput in Mbps",
                    lines: { show: true, fill: true }
                }
            ],
            {
                grid: { backgroundColor: "#fff" },
                legend: { container: "#throughput-legend" }
            }
        );
    }
    if (progress_results.latency.length > 0) {
        $("#latency-chart").parent().show();
        $.plot(
            $("#latency-chart"),
            [
                {
                    data: progress_results.latency,
                    color: "#24B5EA",
                    label: "Latency in ms",
                    points: { show: true },
                }
            ],
            {
                yaxes: { min: 0 },
                xaxes: { min: 0 },
                grid: { backgroundColor: "#fff" },
                legend: { container: "#latency-legend" }
            }
        );
    }
    if (progress_results.queue_size.length > 0) {
        $("#queue-chart").parent().show();
        $.plot(
            $("#queue-chart"),
            [
                {
                    data: progress_results.queue_size,
                    color: "#24B5EA",
                    label: "Queue size in KB",
                    points: { show: true },
                }
            ],
            {
                yaxes: { min: 0 },
                xaxes: { min: 0 },
                grid: { backgroundColor: "#fff" },
                legend: { container: "#queue-legend" }
            }
        );
    }
    var bonder_cpu_load, aggregator_cpu_load;
    if (speedtest.direction == "down") {
        bonder_cpu_load = speedtest.slave_cpu_load;
        aggregator_cpu_load = speedtest.master_cpu_load;
    } else if (speedtest.direction == "up") {
        bonder_cpu_load = speedtest.master_cpu_load;
        aggregator_cpu_load = speedtest.slave_cpu_load;
    }
    if (bonder_cpu_load != null && Object.keys(bonder_cpu_load).length > 0) {
        $("#bonder-cpu-chart-container").show();
        $("#bonder-no-cpu-chart-container").hide();
        points = [];
        _.forEach(bonder_cpu_load, function(item, idx) {
            points.push({
                data: item,
                color: "#24B5EA",
                label: "Bonder CPU#" + idx + " usage",
                lines: { show: true, fill: true, lineWidth: 0 }
            });
        })
        $.plot(
            $("#bonder-cpu-chart"),
            points,
            {
                legend: { show: false },
                yaxis: { min: 0, max: 100},
                xaxes: { min: 0, max: 100},
                grid: { backgroundColor: "#fff" }
            }
        );
    } else {
        $("#bonder-no-cpu-chart-container").show();
        $("#bonder-cpu-chart-container").hide();
    }
    if (aggregator_cpu_load != null && Object.keys(aggregator_cpu_load).length > 0) {
        $("#aggregator-cpu-chart-container").show();
        $("#aggregator-no-cpu-chart-container").hide();
        points = [];
        _.forEach(aggregator_cpu_load, function(item, idx) {
            points.push({
                data: item,
                color: "#24B5EA",
                label: "Aggregator CPU#" + idx + " usage",
                lines: { show: true, fill: true, lineWidth: 0 }
            });
        })
        $.plot(
            $("#aggregator-cpu-chart"),
            points,
            {
                legend: { show: false },
                yaxis: { min: 0, max: 100},
                xaxes: { min: 0, max: 100},
                grid: { backgroundColor: "#fff" }
            }
        );
    } else {
        $("#aggregator-no-cpu-chart-container").show();
        $("#aggregator-cpu-chart-container").hide();
    }
    if (speedtest.slave_above_cpu_threshold || speedtest.master_above_cpu_threshold) {
        var nodes = [];
        if (speedtest.slave_above_cpu_threshold) {
            if (speedtest.direction == "down") {
                nodes.push("bonder");
            } else {
                nodes.push("aggregator");
            }
        }
        if (speedtest.master_above_cpu_threshold) {
            if (speedtest.direction == "down") {
                nodes.push("aggregator");
            } else {
                nodes.push("bonder");
            }
        }
        $(".cpu-warning-nodes").text(nodes.join(" and "));
        $("#cpu-warning").show();
    }
};

(function() {
    var utc_date = moment.utc("{{ speed_test.submitted_time.isoformat }}", moment.ISO_8601);
    $('#submitted_time').html(utc_date.local().format("YYYY-MM-DD HH:mm:ss"));
})();
</script>
{% endblock %}


{% block title %}{{ speed_test | escapejs }} {{ block.super }}{% endblock %}

{% block breadcrumbs %}
    {{ block.super }}
    <li><a href="{% url 'bonds' %}">Bonds</a></li>
    <li><a href="{% url 'bond-details' bond.id %}">{{ bond.bonder.name }}</a></li>
    <li><a href="{% url 'bond-speed-tests' bond.id %}">Speed Tests</a></li>
    <li>{{ speed_test }}</li>
{% endblock %}

{% block content %}
    <div class="row">
        <div class="col-md-12">
            <h1>{{ speed_test }}</h1>
            {% if perms.baspeedtest.add_speedtest %}
                <div class="btn-toolbar">
                    <a href="{% url 'bond-speed-test-repeat' bond.id speed_test.id %}" class="btn btn-default"><i class="fa fa-repeat"></i> Repeat</a>
                </div>
            {% endif %}
        </div>
    </div>

    <div class="row">
        <div class="col-md-4">
            <div class="panel panel-default">
                <div id="configuration-widget" class="panel-heading">
                    <h2>Configuration</h2><i class="fa fa-caret-up fa-lg pull-right"> </i>
                </div>
                <div class="panel-body panel-collapse">
                    <div>
                        <dl class="dl-horizontal">
                            <dt>Test ID</dt>
                            <dd>{{ speed_test.id }}</dd>

                            <dt>Target</dt>
                            <dd>{{ speed_test.get_target }}</dd>

                            <dt>Description</dt>
                            <dd>{{ speed_test|speed_test_description }}</dd>

                            <dt>Submitted time</dt>
                            <dd id="submitted_time"></dd>

                            <dt>Submitted by</dt>
                            <dd>{{ speed_test.submitted_by | user_description }}</dd>

                            {% if speed_test.get_target == bond %}
                                <dt>Bond configuration</dt>
                                <dd>{% include 'bacore/bonds/speed_test_partials/_bond_configuration.html' %}</dd>
                            {% endif %}

                            {% if speed_test.aggregator_name %}
                                <dt>Aggregator</dt>
                                <dd>{{ speed_test.aggregator_name }}</dd>
                            {% endif %}

                            {% if speed_test.bonder_version and  speed_test.agg_version %}
                                <dt>Versions</dt>
                                <dd>
                                    <ul class="list-unstyled">
                                        <li>Bonder: {{ speed_test.bonder_version }}</li>
                                        <li>Aggregator: {{ speed_test.agg_version }}</li>
                                    </ul>
                                </dd>
                            {% endif %}
                        </dl>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-8">
            <div class="panel panel-default">
                <div id="results-wdiget" class="panel-heading">
                    <h2>Results</h2><i class="fa fa-caret-up fa-lg pull-right"> </i>
                </div>
                <div class="panel-body panel-collapse">
                    <div>
                        <section>
                            <p class="loading" id="results">
                                <img src="{% static "img/spinner-bg-trans.gif" %}" width="16" height="16" alt="Loading indicator">
                            </p>
                        </section>

                        <section id="cpu-warning" style="display: none;">
                            <div class="alert alert-warning" role="alert">
                            <p>
                            High CPU usage (>85%) detected on the <span class="cpu-warning-nodes"></span>.
                            This is known to cause the measured throughput
                            results to be significantly different than what is
                            achievable when forwarding traffic.
                            </p>
                            {% if perms.badoc.view_documentation %}
                            <p>
                            For more information, consult <a href="/docs/bonds/performance-tuning/reviewing-speed-test-results.html#issues-when-running-at-high-cpu-loads" target="_blank">
                            the documentation</a> on issues when running near
                            CPU limits.
                            </p>
                            {% endif %}
                            </div>
                        </section>

                        <section id="chart-loading">
                            <img src="{% static "img/spinner-bg-trans.gif" %}" width="16" height="16" alt="Loading indicator">
                        </section>

                        <section style="display: none;">
                            <h3>Throughput</h3>
                            <div id="throughput-legend"></div>
                            <div id="throughput-chart" class="speed-test-chart"></div>
                        </section>

                        <section style="display: none;">
                            <h3>Latency</h3>
                            <div id="latency-legend"></div>
                            <div id="latency-chart" class="speed-test-chart"></div>
                        </section>

                        <section style="display: none;">
                            <h3>Send queue size</h3>
                            <div id="queue-legend"></div>
                            <div id="queue-chart" class="speed-test-chart"></div>
                        </section>

                        <section class="cpu-load-container" style="display: none;">
                            <h3>
                                Bonder CPU usage
                                <span href="javascript://" title id="question_info" class="label_popover" data-toggle="popover" data-trigger="hover" data-content="How much of the CPU each core is using for the duration of the test.">
                                    <i class="fa fa-question-circle"> </i>
                                </span>
                            </h3>
                            <div id="bonder-cpu-chart-container" style="display: none;">
                                <div id="bonder-cpu-chart" class="speed-test-chart"></div>
                            </div>
                            <div id="bonder-no-cpu-chart-container" style="display: none;">
                                This bonder has not report any CPU measurements.
                                Reporting CPU measurements was added in 6.4
                            </div>
                        </section>

                        <section class="cpu-load-container" style="display: none;">
                            <h3>
                                Aggregator CPU usage
                                <span href="javascript://" title id="question_info" class="label_popover" data-toggle="popover" data-trigger="hover" data-content="How much of the CPU each core is using for the duration of the test.">
                                    <i class="fa fa-question-circle"> </i>
                                </span>
                            </h3>
                            <div id="aggregator-cpu-chart-container" style="display: none;">
                                <div id="aggregator-cpu-chart" class="speed-test-chart"></div>
                            </div>
                            <div id="aggregator-no-cpu-chart-container" style="display: none;">
                                This aggregator has not report any CPU
                                measurements. Reporting CPU measurements was
                                added in 6.4
                            </div>
                        </section>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}