{% extends "base_status.html" %}

{% block title %}Status Overview{% endblock %}
{% block smallheader %}{% endblock %}
{% block adagios_hausinn %}
{% endblock %}
{% block largeheader %}Service Overview
{% endblock %}
{% block nav1 %}{{ block.super }}{% endblock %}
{% load adagiostags %}

{% block sidebar_outer %}
{% endblock %}

{% block content %}
            <table class="table table-condensed well searchtable" id="datatable" style="font-size:12px;">
            <thead>
                <tr>
                    <th class="small">
                        <div class="btn-group" id="select_bar">
                            <a class="" data-toggle="dropdown" href="#">
                                <input style="margin-left: -2px; padding: 0px;" type="checkbox" id="select_many">
                            </a>
                            <ul class="dropdown-menu">
                                <li><a id="select_all"> All</a></li>
                                <li><a id="select_none"> None</a></li>
                                <li><a id="select_unhandled_problems" > Unhandled Problems</a></li>
                                <li><a id="select_problems"> All Problems</a></li>
                            </ul>
                        </div>
                    </th>
                    <!--
                    <th class="small">
                        <i class=" glyph-stopwatch  glyph-grey" title="downtimes"></i>
                    </th>
                    <th class="small">
                        <i class="glyph-chat glyph-grey" title="Comments"></i>
                    </th>
                    <th class="small">
                        <i class="glyph-envelope glyph-grey" title="Notifications"></i>
                    </th>
                    <th class="small">
                        <i class=" glyph-warning-sign glyph-grey" title="Unhandled"></i>
                    </th>
                    -->
                    <th>Host</th>
                    <th>Service Check</th>
                    <td></td>
                    <th>Duration</th>
                    <th>Last Check</th>
                </tr>
            </thead>
            <tbody class="">
                {% for host in hosts %}
                        {% for service in host.services %}
                            <tr class="mainrow">
                            <td class="selectable">
                                <input class="chkbox {{ service.tags }}"  style="margin: -2px; padding: 0px;" type="checkbox">
                                <input type="hidden" class="input_hostname" name="host_name" value="{{ host.name }}">
                                <input type="hidden" class="input_service_description" name="service_description" value="{{ service.description }}">
                            </td>
                            <!--
                                <td>

                                {% if service.downtimes or service.host_downtimes %}
                                    <i class=" glyph-stopwatch  glyph-grey" title="{{ service.downtimes }}"></i>
                                {% endif %}

                            </td>
                            <td>
                            </td>
                            <td>

                                {% if service.max_check_attempts == service.current_attempt and service.state > 0 %}
                                    <i class="glyph-envelope glyph-grey" rel="tooltip" title="Service is in Hard State" data-content="<ul><li>Service has failed at least {{ service.current_attempt  }} times and has reached HARD STATE.</li><li>{% if service.no_more_notifications == 0 %}Nagios is actively sending out notifications because of this problem.{% else %}Nagios has stopped sending out notifications because of this problem{% endif %}</li><li>Last notification was {{ service.last_notification|timestamp|timesince }} ago. </li><li>{% if service.next_notification == 0 %}No more notifications will be sent.{% else %}Next notification will be sent in {{ service.next_notification|timestamp|timeuntil }}{% endif %}</li></ul>"></i>
                                {% endif %}

                            </td>
                            <td>
                                {% if service.state != 0 and service.acknowledged == 0 and service.host_acknowledged  == 0 %}

                                    <i class="glyph-warning-sign glyph-grey" rel=tooltip data-content="You should acknowledge this problem to indicate that someone is working on a fix and stop nagios from sending out more notifications." title="Unhandled problem"></i>

                                {% else %}

                                    acknowledged: {{ service.acknowledged  }}
                                    host_acknowledged: {{ service.host_acknowledged  }}

                                {% endif %}
                            </td>
                            -->
                            <td style="white-space: nowrap;">
                                {% ifchanged host.name %}
                                    <div title="{{ host.plugin_output }}" class="circle circle_{{ host.unhandled }} state_{{ host.state }}"></div>
                                    <a href="{% url status.views.status_detail%}?host_name={{ host.name }}" title='Details for host {{ host.name }}'>{{ host.name }}</a>
                                {% else %}
                                    <div class="repeated_content hide">
                                    <div title="{{ host.plugin_output }}" class="circle circle_{{ host.unhandled }} state_{{ host.state }}"></div>
                                    <a href="{% url status.views.status_detail%}?host_name={{ host.name }}" title='Details for host {{ host.name }}'>{{ host.name }}</a>
                                    </div>
                                {% endifchanged %}
                            </td>
                            <td  colspan=1 style="word-wrap: break-word;">
                                 <a href="{% url status.views.status_detail %}?host_name={{ host.name }}&service_description={{ service.description }}" title='{{ service.status }} for the past {{ service.last_state_change|timestamp|timesince }}'>
                                     <div class="circle circle_{{ service.unhandled }}  state_{{ service.state }}{{ service.unhandled }}"> </div> {{ service.description }}</a>
                                <!-- TODO: Instead of all this slicing crap... proper ellipse effect in CSS -->
                                <span title="{{ service.plugin_output }}" style="font-size: 80%; color: #808080; font-weight: normal;">
                                         {{ service.plugin_output|slice:"70" }}
                                 </span>


                            </td>
                            <td>
                                {% if service.comments  %}
                                    <i class="glyph-chat glyph-grey" data-placement=left rel=tooltip title="Comments" data-content="{% for i in service.comments_with_info %}<div class='alert alert-info'><b>{{ i.1 }}:</b> {{ i.2 }}</div>{% endfor %}"></i>
                                {% endif %}
                            </td>
                            <td style="white-space: nowrap; font-size: 80%;">
                                {{ service.last_state_change|timestamp|timesince }}
                            </td>
                            <td style="white-space: nowrap; font-size: 80%;">
                                {{ service.last_check|timestamp|date:'Y-m-d H:i' }}
                            </td>
                            <!-- <td class="state_{{ service.state }}"><b>{{ service.status }}</b></td> -->
                            </tr>
                        {% endfor %}
                {% endfor %}
            </tbody>
            </table>
{% endblock %}


{% block header %}
    {{ block.super }}


    <style>
        .input-append button.add-on {
            height: inherit !important;
        }
    </style>
    <style>
        form {
            margin: 0px;
        }
    </style>

{% endblock %}

{% block sidebar %}
    <h5>Go to</h5>
    <ul class="nav nav-list">
        <li><a href="{% url status.views.status_hostgroups %}">Hostgroup View</a></li>
        <li><a href="{% url status.views.services %}">Service View</a></li>
        <li><a href="{% url status.views.test_livestatus %}">Test Livestatus</a></li>
    </ul>

{% endblock %}


{% block footer %} {{ block.super }} {% endblock %}