{% extends "base.html" %}
{% comment %}© 2012, Multapplied Networks, Inc.{% endcomment %}
{% load site %}
{% load angular %}
{% load site %}
{% load static %}
{% load compress %}
{% load disk %}

{% block script %}
    {% compress js %}
    <script src="{% static "js/bond-configupdates.js" %}"></script>
    {% endcompress %}
{% endblock %}

{% block style %}
    {% compress css %}
    <link rel="stylesheet" type="text/css" href="/static/legs/styles.css">
    {{ block.super }}
    {% endcompress %}
{% endblock %}

{% block pagescript %}
    {% if settings.IS_RUNSERVER %}
        <script type="text/javascript" src="/frontend-static/legs/runtime.js"></script>
        <script type="text/javascript" src="/frontend-static/legs/polyfills.js"></script>
        <script type="text/javascript" src="/frontend-static/legs/styles.js"></script>
        <script type="text/javascript" src="/frontend-static/legs/scripts.js"></script>
        <script type="text/javascript" src="/frontend-static/legs/vendor.js"></script>
        <script type="text/javascript" src="/frontend-static/legs/main.js"></script>
    {% else %}
        {% compress js %}
        <script type="text/javascript" src="/static/legs/runtime.js"></script>
        <script type="text/javascript" src="/static/legs/polyfills.js"></script>
        <script type="text/javascript" src="/static/legs/scripts.js"></script>
        <script type="text/javascript" src="/static/legs/main.js"></script>
        {% endcompress %}
    {% endif %}
    <script>
    $(function() {
        ba.load_completed("{% url 'aggregator-config-updates' agg.id %}", '#completed_updates', {{ agg.id }});
        ba.load_pending("{% url 'aggregator-config-updates' agg.id %}", '#pending_updates');

        ba.showPassword('#show-password', '#password-hidden', '#password-display', 10000);

        {% if not agg.supports_dynamic_routing %}
            {% if agg.has_interfaces or agg.has_protocols %}
                ba.messages.warning(
                    'This aggregator contains interfaces or protocols that ' +
                    'are not supported by its version of bonding. As a ' +
                    'result, this aggregator will be unable to properly ' +
                    'route traffic according to those configuration items. ' +
                    'Update the aggregator to 6.5 or newer or remove the ' +
                    'configuration items to resolve this.'
                );
            {% endif %}

            {% if agg.has_private_wan_v3_spaces %}
                ba.messages.error(
                    'This aggregator contains one or more bonds in spaces ' +
                    'with a private WAN mode unsupported by this ' +
                    'aggregator\'s version of bonding. As a result, this ' +
                    'aggregator will be unable to route traffic to the ' +
                    'private WAN. Update the aggregator to 6.5 or newer, ' +
                    'move the bonds to a newer aggregator, or change the ' +
                    'private WAN mode of the spaces of all bonds on this '+
                    'aggregator to "With private WAN routers" to resolve ' +
                    'this.'
                );
            {% elif agg.has_secondary_private_wan_v3_spaces %}
                ba.messages.warning(
                    'This aggregator is configured as a secondary ' +
                    'aggregator for one or more bonds in spaces with a ' +
                    'private WAN mode unsupported by this aggregator\'s ' +
                    'version of bonding. As a result, this aggregator will ' +
                    'be unable to route traffic for those bonds to their ' +
                    'private WAN networks in the event their primary ' +
                    'aggregator fails . Update this aggregator to 6.5 or ' +
                    'newer, change the secondary aggregator of the bonds ' +
                    'to a newer aggregator, or change the private WAN mode ' +
                    'of the spaces of all bonds with this aggregator as ' +
                    'secondary to "With private WAN routers" to  resolve ' +
                    'this.'
                );
            {% endif %}
        {% endif %}

        {% if agg.is_missing_space_ipv4_address %}
            ba.messages.warning(
                'This aggregator has at least one space VLAN interface ' +
                'without a space IPv4 address for a routing group VLAN ' +
                'assignment with an IPv4 address pool configured. ' +
                'Increase the configured pool size or reduce ' +
                'the number of aggregators in this routing group active in ' +
                'the space to get an IPv4 address.'
            );
        {% endif %}

        {% if agg.is_missing_space_ipv6_address %}
            ba.messages.warning(
                'This aggregator has at least one space VLAN interface ' +
                'without a space IPv6 address for a routing group VLAN ' +
                'assignment with an IPv6 address pool configured. ' +
                'Increase the configured pool size or reduce ' +
                'the number of aggregators in this routing group active in ' +
                'the space to get an IPv6 address.'
            );
        {% endif %}

        $('#delete-modal').on('shown', function () {
            // Adding a class when this is shown simplifies Selenium tests.
            $('#delete-modal').addClass('animation-stopped');
        });
        $('#delete-button').click( function() {
            $.ajax({
                type: 'DELETE',
                url: '{% url 'current:aggregator-detail' agg.id %}'
            }).done( function() {
                ba.messages.successDefer('{{ agg }} has been deleted.');
                window.location.href = '{% url 'aggregators' %}';
            }).fail(function (xhr, textStatus, errorThrown) {
                if (xhr.status != 0) {
                    $('#delete-modal').modal('hide');
                    ba.messages.error(xhr.responseJSON);
                }
            });
        });

        {% if agg.chart_type == 'bachart' %}
            var agg_id = {{ agg.id }};
            var graphs = bachart.make({
                db: 'bonding',
                user: '{{ settings.INFLUX_GRAPH_USERNAME }}',
                pass: '{{ settings.INFLUX_GRAPH_PASSWORD }}',
                reporting_interval: {{ agg.metric_reporting_interval }},
                collection_interval: {{ agg.metric_collection_interval }}
            });

            graphs.add({
                chart_id: '#chart_link_data',
                series: [
                    {name: 'bits sent', measurement: 'aggregator_tunnel_bytes', tags: {node: agg_id}, value: 'tx', color_increment: 0, sign: 'positive'},
                    {name: 'bits received', measurement: 'aggregator_tunnel_bytes', tags: {node: agg_id}, value: 'rx', color_increment: 1, sign: 'negative'},
                ],
                stacksigned: true,
                type: 'bits/sec',
                aggregator: 'max'
            });
            graphs.add({
                chart_id: '#chart_cpu',
                series: [
                    {name: 'steal', measurement: 'aggregation_cpu_average', tags: {node: agg_id}, value: 'steal'},
                    {name: 'softirq', measurement: 'aggregation_cpu_average', tags: {node: agg_id}, value: 'softirq'},
                    {name: 'wait', measurement: 'aggregation_cpu_average', tags: {node: agg_id}, value: 'wait'},
                    {name: 'nice', measurement: 'aggregation_cpu_average', tags: {node: agg_id}, value: 'nice'},
                    {name: 'system', measurement: 'aggregation_cpu_average', tags: {node: agg_id}, value: 'system'},
                    {name: 'user', measurement: 'aggregation_cpu_average', tags: {node: agg_id}, value: 'user'},
                ],
                stacksigned: true,
                type: 'percent',
                max: 100,
                columns: 2
            });
            cpu_cores_charts({
                chart: graphs,
                db: 'bonding',
                user: '{{ settings.INFLUX_GRAPH_USERNAME }}',
                pass: '{{ settings.INFLUX_GRAPH_PASSWORD }}',
                node_id: agg_id,
            });

            graphs.run({{ settings.BACHART_REFRESH_INTERVAL }});
        {% endif %}

    });
    </script>
    {% include "banode/aggregators/js_partials/failed.html" %}
{% endblock %}

{% block title %}{{ agg.name | escapejs }} {{ block.super }}{% endblock %}

{% block breadcrumbs %}
    {{ block.super }}
    <li><a href="{% url 'aggregators' %}" target="_parent">Aggregators</a></li>
    <li>{{ agg.name | escapeangular_unsafe }}</li>
{% endblock %}

{% block content %}
<div ng-controller="AggCtrl" ng-init="
        init({
            apiurl: '{% url 'current:aggregator-detail' agg.id %}',
        })
    ">

    <div class="row">
        <div class="col-md-12">
            <h1>{{ agg.name | escapeangular_unsafe }}</h1>
            <div class="btn-toolbar">
                {% if perms.banode.change_aggregator %}
                    <a href="{% url 'aggregator-edit' agg.id %}" target="_parent" id="edit" class="btn btn-default"><i class="fa fa-pencil-square-o"></i> Edit</a>
                {% endif %}
                {% if perms.banode.delete_aggregator %}
                    <a href="#delete-modal"
                        class="btn btn-danger"
                        data-toggle="modal"
                        id="delete-dialog-button"
                    >
                        <i class="fa fa-trash-o"></i> Delete
                    </a>
                {% endif %}
                {% if perms.bacore.view_bond %}
                    {% with agg.primary_and_secondary_bonds.count as bond_count %}
                        <a href="{% url 'aggregator-bonds' agg.id %}" target="_parent" class="btn btn-default"><i class="fa fa-table"></i> Bonds ({{ bond_count }})</a>
                    {% endwith %}
                {% endif %}
                <a ng-cloak ng-hide="global.branding.parent_support_email === ''" ng-href="mailto:{% verbatim %}{{ global.branding.parent_support_email }}{% endverbatim %}?subject={% email_prefix %}{{ agg.id }} - {{ agg }} %3Cshort description of problem%3E&body=Aggregator: {{ agg.id }} - {{ agg }}%0D%0ADescribe the problem:%0D%0ATroubleshooting steps already taken:%0D%0AWhat date and time did the issue begin?%0D%0AWhat steps can be taken to reproduce the problem?%0D%0A" class="btn btn-default"><i class="fa fa-envelope"></i> Support</a>
                {% if perms.banode.view_aggregator %}
                    <a href="{% url 'node-details' agg.id %}" target="_parent" class="btn btn-default"><i class="fa fa-hdd-o"></i> Node details</a>
                {% endif %}
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading"><h2>Details</h2><i class="fa fa-caret-up fa-lg pull-right"> </i></div>
                <div class="panel-body panel-collapse">
                    <div>
                        {% include "banode/aggregators/details_partials/_agg_details.html" %}
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading"><h2>Status</h2><i class="fa fa-caret-up fa-lg pull-right"> </i></div>
                <div class="panel-body panel-collapse">
                    <div>
                        {% include "banode/aggregators/details_partials/_agg_status.html" %}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-heading" id="routing"><h2>Network details</h2><i class="fa fa-caret-up fa-lg pull-right"> </i></div>
        <div class="panel-body panel-collapse">
            <div>
                <app-root aggregator_id="{{ agg.id }}">Loading...</app-root>
            </div>
        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-heading" id="updates"><h2>Updates</h2><i class="fa fa-caret-up fa-lg pull-right"> </i></div>
        <div class="panel-body panel-collapse">
            <div>
                {% include "banode/aggregators/details_partials/_updates.html" %}
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading"><h2>Performance</h2><i class="fa fa-caret-up fa-lg pull-right"> </i></div>
                <div class="panel-body panel-collapse">
                    <div>
                        {% if agg.chart_type == 'bachart' %}
                            {% include "banode/aggregators/details_partials/_bachart.html" %}
                        {% else %}
                            <div>Charts will be shown when the aggregator connects to the management server.</div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal: Delete aggregator -->
    <div id="delete-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="delete-modal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h3>Delete aggregator</h3>
                </div>
                {% if agg.primary_and_secondary_bonds.count > 0 %}
                    <div class="modal-body">
                        <p>
                            Before deleting this aggregator, assign its <a href="{% url 'aggregator-bonds' agg.id %}" target="_parent">bonds</a> to
                            another aggregator.
                        <p>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Dismiss</button>
                    </div>
                {% else %}
                    <div class="modal-body">
                        <p>
                            Are you sure you want to delete <strong>{{ agg }}</strong>?
                            This cannot be undone.
                        </p>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Cancel</button>
                        <button class="btn btn-primary btn-danger" id="delete-button"><i class="fa fa-trash-o"></i> Delete</button>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block api-footer %}
    <a href="{% url 'current:aggregator-detail' agg.id %}" target="_parent" id="api-link"><i class="fa fa-code"></i> {% url 'current:aggregator-detail' agg.id %}</a>
{% endblock %}