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

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

{% block pagescript %}
    <script>
        ba.showPassword('#show-password', '#password-hidden', '#password-display', 10000);
        $('abbr').timeago();

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

            graphs.add({
                chart_id: '#chart_cpu',
                series: [
                    {name: 'steal', measurement: 'aggregation_cpu_average', tags: {node: node_id}, value: 'steal'},
                    {name: 'softirq', measurement: 'aggregation_cpu_average', tags: {node: node_id}, value: 'softirq'},
                    {name: 'wait', measurement: 'aggregation_cpu_average', tags: {node: node_id}, value: 'wait'},
                    {name: 'nice', measurement: 'aggregation_cpu_average', tags: {node: node_id}, value: 'nice'},
                    {name: 'system', measurement: 'aggregation_cpu_average', tags: {node: node_id}, value: 'system'},
                    {name: 'user', measurement: 'aggregation_cpu_average', tags: {node: node_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: node_id,
            });

            graphs.add({
                chart_id: '#chart_conntrack',
                series: [
                    {name: 'current tracking table size', measurement: 'conntrack', tags: {node: node_id}, value: 'current'},
                    {name: 'maximum tracking table size', measurement: 'conntrack', tags: {node: node_id}, value: 'max'},
                ],
                overlay: true,
                type: 'count',
            });

            graphs.add({
                chart_id: '#chart_memory',
                series: [
                    {name: 'used', measurement: 'memory', tags: {node: node_id}, value: 'used'},
                    {name: 'buffered', measurement: 'memory', tags: {node: node_id}, value: 'buffered'},
                    {name: 'cached', measurement: 'memory', tags: {node: node_id}, value: 'cached'},
                    {name: 'free', measurement: 'memory', tags: {node: node_id}, value: 'free'},
                ],
                stacksigned: true,
                type: 'bytes',
            });

            graphs.add({
                chart_id: '#chart_swap',
                series: [
                    {name: 'used', measurement:'swap', tags: {node: node_id}, value: 'used'},
                    {name: 'cached', measurement:'swap', tags: {node: node_id}, value: 'cached'},
                    {name: 'free', measurement:'swap', tags: {node: node_id}, value: 'free'},
                ],
                stacksigned: true,
                type: 'bytes',
            });

            graphs.add({
                chart_id: '#chart_load_average',
                series: [
                    {name: '1 m', measurement: 'load', tags: {node: node_id}, value: 'shortterm'},
                    {name: '5 m', measurement: 'load', tags: {node: node_id}, value: 'midterm'},
                    {name: '15 m', measurement: 'load', tags: {node: node_id}, value: 'longterm'},
                ],
                type: 'load_average',
                min: 0,
            });

            disk_charts({
                chart: graphs,
                db: 'bonding',
                user: '{{ settings.INFLUX_GRAPH_USERNAME }}',
                pass: '{{ settings.INFLUX_GRAPH_PASSWORD }}',
                node_id: {{ node.id }},
            });

            graphs.run({{ settings.BACHART_REFRESH_INTERVAL }});
        {% endif %}
    </script>
{% endblock %}

{% block breadcrumbs %}
    {{ block.super }}
    <li> Nodes</li>
    <li>{{ node.name }}</li>
{% endblock %}

{% block content %}
    <div ng-controller="NodeCtrl" ng-init="init('{% if bonder %}{% url 'current:bonder-detail' node.id %}{% else %}{% url 'current:aggregator-detail' node.id %}{% endif %}')">
        <div class="row">
            <div class="col-md-12">
                <h1>{{ node.name }}</h1>
            </div>
        </div>

        <div class="row">
        <div class="col-md-12">
            <div class="btn-toolbar">
            {% if bonder and perms.bacore.view_bond %}
                <a href="{% url 'bond-details' node.bonder.bond.id %}" target="_parent" class="btn btn-default"><i class="fa fa-hdd-o"></i> Bonder details</a>
            {% endif %}
            {% if aggregator and perms.banode.view_aggregator %}
                <a href="{% url 'aggregator-details' node.aggregator.id %}" target="_parent" class="btn btn-default"><i class="fa fa-hdd-o"></i> Aggregator details</a>
            {% endif %}
            </div>
        </div>
        </div>

        <div class="row">
            <div class="col-lg-6 col-md-12">
                <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 "details_partials/_details.html" %}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-md-12">
                <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 "details_partials/_status.html" %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading" id="performance"><h2>Performance</h2><i class="fa fa-caret-up fa-lg pull-right"> </i></div>
                    <div class="panel-body panel-collapse">
                        <div>
                            {% if node.chart_type == 'bachart' %}
                                {% include "details_partials/_bachart.html" %}
                            {% else %}
                                <div>Charts will be shown when the node connects to the management server.</div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

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