{% extends "base_status.html" %}

{% load i18n %}
{% load static %}

{% block title %}Status Overview{% endblock %}
{% block nav2 %}<a href="{% url 'status.views.status_index' %}">{% trans "Overview" %}</a>{% endblock %}
{% block smallheader %}{% endblock %}
{% block largeheader %}Status Overview{% endblock %}

{% block toolbar %}{{ block.super }}{% endblock %}


{% block content %}
        <div class="row-fluid" style="margin-top: 40px;"> &nbsp;</div>
    <div class="row-fluid">
        <div class="span4">
            <table class="table  well table-condensed">
                <thead>
                <tr>
                    <th>{% trans "Status Overview" %}</th>
                    <th><span title="Unhandled Problems">#</span></th>
                    <th><i class="glyph-warning-sign" title="Unhandled Problems"></i></th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>{% trans "Network Parents" %}</td>
                    <td><a href="{% url 'status.views.network_parents' %}">{{ total_network_parents }}</a></td>
                    <td>
                        {% if  total_unhandled_network_problems == 0 %}
                        {% else %}

                                <a href="{%  url 'status.views.network_parents' %}?unhandled">
                                    {{ total_unhandled_network_problems }}
                                </a>

                        {% endif %}
                    </td>
                </tr>
                <tr>
                    <td>{% trans "Hosts" %}</td>
                    <td><a href="{% url 'status.views.hosts' %}">{{ total_hosts }}</a></td>
                    <td>
                        {% if  unhandled_hosts == 0 %}
                        {% else %}
                            <a href="{%  url 'status.views.hosts' %}?unhandled">
                                {{ unhandled_hosts }}
                            </a>
                        {% endif %}
                    </td>
                </tr>
                <tr>
                    <td>{% trans "Services" %}</td>
                    <td><a href="{% url 'status.views.services' %}"> {{ total_services }}</a></td>
                    <td>
                        {% if  unhandled_services == 0 %}
                        {% else %}
                            <a href="{%  url 'status.views.services' %}?unhandled">
                                {{ unhandled_services }}
                            </a>
                        {% endif %}
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="span4" >
            <table class="table well table-condensed">
                <thead>
                <tr><th colspan="2">{% trans "Current Health" %}</th></tr>
                </thead>
                <tbody>
                <tr>
                    <td  style="white-space: nowrap" width=20px>{% trans "All hosts" %}</td>
                    <th>
                        <div class="progress">
                            <div class="bar bar-success" style=" width: {{ host_totals_percent.0 }}%;">{{ host_totals_percent.0|floatformat }}%</div>
                            <div class="bar bar-warning" style=" width: {{ host_totals_percent.1 }}%;"></div>
                            <div class="bar bar-danger" style=" width: {{ host_totals_percent.2 }}%;"></div>
                            <div class="bar bar-unknown" style=" width: {{ host_totals_percent.3 }}%;"></div>
                        </div>

                    </th>
                </tr>
                <tr>
                    <td style="white-space: nowrap" width=20px>{% trans "All services" %}</td>
                    <th>
                        <div class="progress">
                            <div class="bar bar-success" style=" width: {{ service_totals_percent.0 }}%;">{{ service_totals_percent.0|floatformat }}%</div>
                            <div class="bar bar-warning" style=" width: {{ service_totals_percent.1 }}%;"></div>
                            <div class="bar bar-danger" style=" width: {{ service_totals_percent.2 }}%;"></div>
                            <div class="bar bar-unknown" style=" width: {{ service_totals_percent.3 }}%;"></div>
                        </div>

                    </th>
                </tr>
                </tbody>

            </table>
        </div>
        <div class="span4" >
            <table class="table-condensed well table" id="top_alert_producers">
                <thead>
                    <tr>
                        <th>{% trans "Top Alert Producers" %}</th>
                        <th>{% trans "Recent Alerts" %}</th>
                    </tr>
                </thead>
                <tr id="top_alert_producers_loading">
                    <td id="top_alert_loading_message" colspan=2><img src="{% url "media" path="external/select2/spinner.gif" %}"> {% trans "Loading..." %}</td>
                </tr>
            </table>
        </div>
    </div>
    <hr>
    <div id="servicelist_in_overview">
        <h4>{% trans "Unhandled service problems" %}</h4>
        {% include "snippets/status_servicelist_snippet.html" %}
    </div>
    <!--
    <div class="span5">
        <h3>Nagios Components</h3>
        <table class="table-condensed well table">
            <tr>
                <th>Component</th>
                <th>Status</th>
            </tr>
            <tr>
                <td>
                    Nagios Core
                </td>
                <td>
                    <div class="circle state_0"></div>
                    3.4.1
                </td>
            </tr>
            <tr>
                <td>
                    Livestatus Broker Module
                </td>
                <td>
                    <div class="circle state_0"></div>
                </td>
            </tr>
            <tr>
                <td>
                        PNP Broker Module
                </td>
                <td>
                    <div class="circle state_0"></div>

                </td>
            </tr>
            <tr>
                <td>
                        Mod Gearman
                </td>
                <td>
                    <div class="circle state_0"></div>

                </td>
            </tr>
            <tr>
                <td>
                        Git Repository
                </td>
                <td>
                    <div class="circle state_0"></div>

                </td>
            </tr>
        </table>
    </div>
    <div class="span5">
        <h3>Adagios Components</h3>
        <table class="table-condensed well table">
            <tr>
                <th>Component</th>
                <th>Status</th>
            </tr>
            <tr>
                <td>
                    Status Module
                </td>
                <td>
                    <div class="circle state_0"></div>
                </td>
            </tr>
            <tr>
                <td>
                    PNP Module
                </td>
                <td>
                    <div class="circle state_0"></div>
                </td>
            </tr>
            <tr>
                <td>
                    Configuration Module
                </td>
                <td>
                    <div class="circle state_0"></div>

                </td>
            </tr>
            <tr>
                <td>
                    OKConfig Module
                </td>
                <td>
                    <div class="circle state_0"></div>

                </td>
            </tr>
            <tr>
                <td>
                    Git Integration
                </td>
                <td>
                    <div class="circle state_0"></div>

                </td>
            </tr>
        </table>
    </div>
    -->
{% endblock %}

{% block view_buttons %}
<div class="btn-group pull-left" id="view_buttons">
    <a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="#">
        <i class="glyph-eye-open" title="View"> </i> <span class="caret"></span></a>
    <ul class="dropdown-menu">
        <li><a href="{% url 'adagios.status.views.problems' %}?q={{ request.GET.q }}&unhandled"> {% trans "Open Problems" %}</a></li>
        <li><a href="{% url 'adagios.status.views.problems' %}?q={{ request.GET.q }}&state__isnot=0"> {% trans "All Problems" %}</a></li>
        <li><a href="{% url 'adagios.status.views.problems' %}?q={{ request.GET.q }}&state=0"> {% trans "All OK" %}</a></li>
        <li><a href="{% url 'adagios.status.views.problems' %}?q={{ request.GET.q }}&acknowledged=1"> {% trans "All Acknowledged" %}</a></li>
        <li><a href="{% url 'adagios.status.views.problems' %}?q={{ request.GET.q }}&scheduled_downtime_depth__isnot=0"> {% trans "All in Downtime" %}</a></li>
        <li><a href="{% url 'adagios.status.views.problems' %}?q={{ request.GET.q }}"> {% trans "Everything" %}</a></li>
    </ul>
</div>
{% endblock %}


{% block bottom_left %}
    <div id="updates_avail">
        {% blocktrans %}Adagios version: {{ adagios_version }}. Latest: <span id="latest_version">...</span>{% endblocktrans %}
    </div>
{% endblock bottom_left %}


{% block footer %}
    {{ block.super }}
    <script type="text/javascript" xmlns="http://www.w3.org/1999/html">

        $(document).ready(function() {
            // Update top_alert_producers
            update_top_alert_producers(3);

            // Get latest adagios version:
            $('#latest_version').adagios_version();

            // Set a reload in X seconds
            adagios.misc.timed_reload({{ user_data.refresh_rate }});
        });

        // Fetch information about top_alert_producers ajax style and update table
        // with id "top_alert_producers"
        function update_top_alert_producers(limit) {
            var table=document.getElementById("top_alert_producers");

            adagios.rest.status.top_alert_producers({'limit': limit})
                    .done( function(data) {
                        // Hide the loading message
                        $('#top_alert_producers_loading').hide();
                        var host_name;
                        var number_of_alerts;
                        var cell1_html;
                        var cell2_html;

                        for (var i=0;i<data.length;i++){
                            row = data[i];
                            host_name = row[0];
                            number_of_alerts = row[1];

                            // Add a new row to our table
                            var row=table.insertRow(i+1);
                            var cell1=row.insertCell(0);
                            var cell2=row.insertCell(1);
                            cell1_html = '<a href="{% url 'status.views.detail'  %}?host_name=' + host_name + '">' + host_name + '</a>';
                            cell2_html = '<a href="{% url 'status.views.detail' %}?&host_name=' + host_name + '#tab_events">' + number_of_alerts + '</a>';
                            cell1.innerHTML=cell1_html;
                            cell2.innerHTML=cell2_html;
                        }
                    })
                    .fail( function(data) {
                        // Fail scenario
                        var td = document.getElementById("top_alert_loading_message");
                        td.innerHTML = "update_top_alert_producers() failed";
                        return data;
                    });
        }

    </script>
{% endblock %}

