{% extends "base.html" %}
{% comment %}© 2015, Multapplied Networks, Inc.{% endcomment %}
{% load bootstrap %}
{% block title %}{{ bond.bonder.name | escapejs }} Bond Settings Check {{ block.super }}{% endblock %}

{% block breadcrumbs %}
    {{ block.super }}
    <li><a href="{% url 'bonds' %}" target="_parent">Bonds</a></li>
    <li><a href="{% url 'bond-details' bond.id %}" target="_parent">{{ bond.bonder.name }}</a></li>
    <li>Bond Settings Check</li>
{% endblock %}

{% block content %}
<script type="text/ng-template" id="/bond_results.html">
    <p>The following settings are recommended for {{ bond.bonder.name }}:</p>
{% verbatim %}
    <div class="row v-offset-3">
        <div class="col-sm-6">
            <h4>Bond</h4>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-offset-1">
            <div class="row v-offset-1">
                <div class="col-xs-offset-4 col-sm-offset-3 col-md-offset-2 col-xs-4 col-sm-3 col-md-2">
                    <strong>Before</strong>
                </div>
                <div class="col-sm-3 col-md-2 col-xs-4">
                    <strong>After</strong>
                </div>
            </div>
            <div class="row v-offset-1">
                <div class="col-xs-4 col-sm-3 col-md-2">Packet distribution algorithm</div>
                <div class="col-xs-4 col-sm-3 col-md-2">{{ tuning.original_settings.balancing | stylized_balancer }}</div>
                <div class="col-xs-4 col-sm-3 col-md-2">{{ tuning.results.balancing | stylized_balancer }}</div>
            </div>
            <div class="row v-offset-1">
                <div class="col-xs-4 col-sm-3 col-md-2">Proxy enabled</div>
                <div class="col-xs-4 col-sm-3 col-md-2">
                    <i class="fa fa-{{ tuning.original_settings.bridge_enabled | boolean_display_icon }}"> </i>
                </div>
                <div class="col-xs-4 col-sm-3 col-md-2">
                    <i class="fa fa-{{ tuning.results.bridge_enabled | boolean_display_icon }}"> </i>
                </div>
            </div>
            <div class="row v-offset-1">
                <div class="col-xs-4 col-sm-3 col-md-2">Proxy concurrency</div>
                <div class="col-xs-4 col-sm-3 col-md-2">{{ tuning.original_settings.bridge_concurrency }}</div>
                <div ng-if="tuning.results.bridge_enabled" class="col-xs-4 col-sm-3 col-md-2">{{ tuning.results.bridge_concurrency }}</div>
                <div ng-if="!tuning.results.bridge_enabled" class="col-xs-4 col-sm-3 col-md-2"><i class="fa fa-{{ false | boolean_display_icon }}"> </i></div>
            </div>
        </div>
    </div>

    <div class="row v-offset-3">
        <div class="col-sm-6">
            <h4>Legs</h4>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-offset-1">
            <div class="row v-offset-1">
                <div class="col-xs-offset-4 col-sm-offset-3 col-md-offset-2 col-xs-4 col-sm-3 col-md-2">
                    <strong>Before</strong>
                </div>
                <div class="col-xs-4 col-sm-3 col-md-2">
                    <strong>After</strong>
                </div>
            </div>
            <div class="row v-offset-1" ng-repeat="leg_tuner in tuning.leg_tuners">
                <div class="col-xs-4 col-sm-3 col-md-2">
                    {{ leg_tuner.leg_object | display_tuner_leg }}
                </div>
                <div class="col-sm-8" ng-if="leg_tuner.status === 'failed'">
                    Tuning failed.
                </div>
                <div class="col-xs-4 col-sm-3 col-md-2" ng-if="leg_tuner.status !== 'failed'">
                    <div class="nobreak ng-scope">
                        <i class="fa fa-arrow-down"></i>
                        {{ leg_tuner.download.original_speed | number:2 }} Mbps
                    </div>
                    <div class="nobreak ng-scope">
                        <i class="fa fa-arrow-up"></i>
                        {{ leg_tuner.upload.original_speed | number:2 }} Mbps
                    </div>
                </div>
                <div class="col-xs-4 col-sm-3 col-md-2" ng-if="leg_tuner.status !== 'failed'">
                    <div class="nobreak ng-scope">
                        <i class="fa fa-arrow-down"></i>
                        {{ leg_tuner.download.recommended_speed | number:2 }} Mbps <a href="{{ leg_tuner.download.speedtest_comparison }}" target="_parent"><i class="fa fa-line-chart"></i></a>
                    </div>
                    <div class="nobreak ng-scope">
                        <i class="fa fa-arrow-up"></i>
                        {{ leg_tuner.upload.recommended_speed | number:2 }} Mbps <a href="{{ leg_tuner.upload.speedtest_comparison }}" target="_parent"><i class="fa fa-line-chart"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endverbatim %}
</script>

<div class="row">
    <div class="col-md-12">
        <h2 id="top">{{ bond.bonder.name }} bond settings check</h2>
    </div>
</div>

<div class="row"
    ng-controller="BondSettingsCtrl" ng-init="init('{% url 'current:bondtuner-detail' bond.id tuner.id %}')"
    ng-cloak
>
    <div class="col-md-12">
        <dl class="dl-horizontal">
            {% verbatim %}
            <dt>ID</dt><dd>{{ tuning.id }}</dd>
            <dt>Submitted time</dt><dd>{{ tuning.created | date:'medium' }}</dd>
            <dt>Submitted by</dt><dd>{{ tuning.submitted_by.name }}</dd>
            <dt>Status</dt><dd>{{ tuning.status | tuner_status }}</dd>
            {% endverbatim %}
            <dt ng-show="tuning.schedule === 'immediate'">Schedule</dt><dd ng-show="tuning.schedule === 'immediate'">Immediate</dd>
            <dt ng-show="tuning.schedule === 'timer'">Schedule</dt><dd ng-show="tuning.schedule === 'timer'">{% verbatim %}{{ tuning.schedule_at | date:'medium' }}{% endverbatim %}</dd>
            <dt ng-show="tuning.schedule === 'online'">Schedule</dt><dd ng-show="tuning.schedule === 'online'">All legs online.</dd>
        </dl>
    </div>
    <div class="col-md-12 v-offset-3">
        <h2 id="top">Recommended settings</h2>
    </div>
    <div class="col-md-12">
        <div ng-if="tuning.results">
            {% verbatim %}
            <div ng-if="tuning.results_acknowledgement === 'accepted' && !tuning.accept_recommendations_automatically" class="alert alert-info" role="alert">Recommended settings were accepted {{ tuning.results_acknowledged_time | date:'medium' }}<span ng-if="tuning.results_acknowledged_by"> by {{ tuning.results_acknowledged_by.name }}</span>.</div>
            <div ng-if="tuning.results_acknowledgement === 'accepted' && tuning.accept_recommendations_automatically" class="alert alert-info" role="alert">Recommended settings were accepted automatically.</div>
            <div ng-if="tuning.results_acknowledgement === 'declined'" class="alert alert-warning" role="alert">Recommended settings were declined {{ tuning.results_acknowledged_time | date:'medium' }}<span ng-if="tuning.results_acknowledged_by"> by {{ tuning.results_acknowledged_by.name }}</span>.</div>
            <div ng-if="tuning.results_acknowledgement === 'pending'" class="well well">
            {% endverbatim %}
                <p>Update the bond with these recommended settings?</p>
                <div class="btn-toolbar" role="toolbar">
                    <button type="button" class="btn btn-primary" ng-click="acceptCheck()">Update bond</button>
                    <button type="button" class="btn btn-default" ng-click="declineCheck()">Keep current bond settings</button>
                </div>
            </div>
            <div ng-include src="'/bond_results.html'"></div>
        </div>
        <div ng-if="!tuning.results">
            <div ng-if="tuning.status === 'running'">
                <p>The settings check is in progress. Recommended settings will be shown when the check is complete.</p>
                <a class="btn btn-default" ng-click="cancelCheck()">Cancel check</a>
            </div>
            <div ng-if="tuning.status === 'scheduled'">
                <p>The settings check is scheduled. Recommended settings will be shown when the check is complete.</p>
                <a class="btn btn-default" ng-click="cancelCheck()">Cancel check</a>
            </div>
            <div ng-if="tuning.status === 'cancelled'">
                {% verbatim %}
                <div class="alert alert-info" role="alert">Check was cancelled {{ tuning.cancelled_time | date:'medium' }}<span ng-if="tuning.cancelled_by"> by {{ tuning.cancelled_by.name }}</span>.</div>
                {% endverbatim %}
                <p>The check was cancelled. You can start a new check from the <a href="{% url 'bond-details' bond.id %}" target="_parent">bond details</a> page.</p>
            </div>
            <div ng-if="tuning.status === 'failed'">
                {% verbatim %}
                <div class="alert alert-danger" role="alert">
                    <p>The check failed with this error: {{ tuning.error_message }}</p>
                    <p>{{ tuning.leg_tuners | getLegFailureReason }}</p>
                </div>
                {% endverbatim %}
                <p>The check failed. You can start a new check from the <a href="{% url 'bond-details' bond.id %}" target="_parent">bond details</a> page.</p>
            </div>
        </div>
    </div>
    {% verbatim %}
    <div class="col-md-12 v-offset-3">
        <h2>Leg tunings</h2>
        <table class="table table-bordered table-striped table-condensed speedtest-table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Submitted</th>
                    <th>Status</th>
                    <th>Details</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="legtuner in tuning.leg_tuners">
                    <td>{{ legtuner.id }}</td>
                    <td>{{ legtuner.created | date:'medium' }}</td>
                    <td>{{ legtuner.status | tuner_status }}</td>
                    <td><a ng-href="/bonds/{{ tuning.bond_id }}/legs/{{ legtuner.leg_id }}/speedcheck/{{ legtuner.id }}/"
                            target="_parent"
                            class="btn btn-default btn-sm" title="Leg tuning details"><i class="fa fa-search-plus"></i></a></td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="col-md-12 v-offset-3">
        <h2>Logs</h2>
        <button class="btn btn-default" ng-click="show_logs.debug = !show_logs.debug">
            <span ng-show="show_logs.debug">Hide</span><span ng-hide="show_logs.debug">Show</span> debug
        </button>
        <button class="btn btn-default" ng-click="show_logs.info = !show_logs.info">
            <span ng-show="show_logs.info">Hide</span><span ng-hide="show_logs.info">Show</span> info
        </button>
        <button class="btn btn-default" ng-click="show_logs.warning = !show_logs.warning">
            <span ng-show="show_logs.warning">Hide</span><span ng-hide="show_logs.warning">Show</span> warning
        </button>

        <div ng-show="show_logs.debug || show_logs.info || show_logs.warning">
            <div ng-show="tuning.logs">
                <table class="table table-condensed table-borderless">
                    <thead>
                        <th>Level</th>
                        <th>Date</th>
                        <th>Message</th>
                    </thead>
                    <tbody ng-repeat="log in tuning.logs">
                        <tr ng-show="show_logs[log.level]">
                            <td><span class="label label-{{ labelLogLevel(log.level) }}">{{ log.level }}</span></td>
                            <td>{{ log.created_at | date:'medium' }}</td>
                            <td>{{ log.message }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    {% endverbatim %}
</div>
{% endblock %}