{% extends "base_status.html" %}

{% block title %}Status Overview{% endblock %}
{% block nav2 %}<a href="{% url status.views.status_index %}">Overview</a>{% endblock %}
{% block smallheader %}{% endblock %}
{% block largeheader %}Status Overview{% 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>Status Overview</th>
                    <th>#</th>
                    <th><i class="glyph-warning-sign" title="Unhandled Problems"></i></th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>Network Parents</td>
                    <td><a href="{% url status.views.status_parents %}">{{ total_network_parents }}</a></td>
                    <td>
                        {% if  total_unhandled_network_problems == 0 %}
                        {% else %}

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

                        {% endif %}
                    </td>
                </tr>
                <tr>
                    <td>Hosts</td>
                    <td><a href="{% url status.views.status_host %}">{{ total_hosts }}</a></td>
                    <td>
                        {% if  unhandled_hosts == 0 %}
                        {% else %}
                            <a href="{%  url status.views.status_host %}?unhandled">
                                {{ unhandled_hosts }}
                            </a>
                        {% endif %}
                    </td>
                </tr>
                <tr>
                    <td>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">Current Health</th></tr>
                </thead>
                <tbody>
                <tr>
                    <td  style="white-space: nowrap" width=20px>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>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>Top Alert Producers</th>
                        <th>Recent Alerts</th>
                    </tr>
                </thead>
                <tr id="top_alert_producers_loading">
                    <td id="top_alert_loading_message" colspan=2><img src="{% url media path="select2/spinner.gif" %}"> Loading...</td>
                </tr>
            </table>
        </div>
    </div>
    <hr>
    <div id="servicelist_in_overview">
        <h4>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 header %} {{ block.super }}
{% endblock %}



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

    $(document).ready(function() {
        // Hide the action buttons
        //$('#action_buttons').hide();

        // Update top_alert_producers
        update_top_alert_producers(3);

    });
    // Fetch information about top_alert_producers ajax style and update table
    // with id "top_alert_producers"
    function update_top_alert_producers(limit) {
        var url = '{% url rest/status %}json/top_alert_producers?limit=' + limit;
        var table=document.getElementById("top_alert_producers");
        var top_alert_producers = $.getJSON(url)
        .done( function(data) {
            // Hide the loading message
            $('#top_alert_producers_loading').hide();
            for (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.status_detail  %}?host_name=' + host_name + '">' + host_name + '</a>';
                cell2_html = '<a href="{% url status.views.status_detail %}?&host_name=' + host_name + '#tab_events">' + number_of_alerts + '</a>';
                cell1.innerHTML=cell1_html;
                cell2.innerHTML=cell2_html;
                console.log(host_name);
            }
        })
        .fail( function(data) {
                        // Fail scenario
                        var td = document.getElementById("top_alert_loading_message");
                        td.innerHTML = "update_top_alert_producers() failed";
                        return data;
        });


    }
    </script>
{% endblock %}

{% block head %}
{% endblock %}