{% extends "template.html" %}
{% block extrahead %}
    <SCRIPT TYPE="text/javascript" SRC="/static/js/jquery-ui.min.js"></SCRIPT>
    <link rel="stylesheet" type="text/css" href="/static/css/jquery-ui.css" />
{% endblock %}
{% block breadcrumbs %}{{block.super}}<li>{{a.id}}</li>{% endblock %}
{% block content %}
<ul class="object-tools">
    {% if a.status == "A" %}
        {% if is_unassigned %}
            <li><a href="{% url fm:alarm:take a.id %}">Take</a></li>
        {% else %}
            {% if not is_owner %}
                <li><a href="{% url fm:alarm:take a.id %}">Steal</a></li>
            {% endif %}
        {% endif %}
        
        {% if not is_owner %}
            {% if is_subscribed %}
                <li><a href="{% url fm:alarm:unsubscribe a.id %}">Unsubscribe</a></li>
            {% else %}
                <li><a href="{% url fm:alarm:subscribe a.id %}">Subscribe</a></li>
            {% endif %}
        {% endif %}

        {% if can_clear and is_owner %}
            <li><a href="{% url fm:alarm:clear a.id %}">Clear</a></li>
        {% endif %}
    {% endif %}
</ul>
<style>
    div#s-toc ul, div#s-toc li{
        margin: 0px;
        padding: 0px;
        margin-right: 4px;
        display: inline;
        list-style: none;
    }
    
    #root-panel {
        display: none;
        border: 1px solid #c0c0c0;
        padding: 4px;
    }
    
    #severity-panel {
        display: none;
        border: 1px solid #c0c0c0;
        padding: 4px;
    }
    
    .help-title {
        font-weight: bold;
        padding-left: 4px;
    }
    
    .help-text {
        padding-left: 12px;
        padding-bottom: 8px;
        white-space: pre;
    }
    
    .cl0 {
        padding-left: 0px;
    }
    
    .cl1 {
        padding-left: 16px;
    }
    
    .cl2 {
        padding-left: 32px;
    }
    
    .cl3 {
        padding-left: 48px;
    }
    
    .cl4 {
        padding-left: 64px;
    }
    
    #tabs-overview #subject-row {
        width: 100%;
    }
    
    #tabs-overview #subject-row #subject-label {
        font-weight: bold;
        display: inline;
    }
    
    #tabs-overview #subject-row #subject {
        display: inline;
    }
    
    #tabs-overview #body {
        width: 100%;
        border-top: 1px solid #c0c0c0;
        white-space: pre;
    }
    
    #tabs-data .data-key {
        font-weight: bold;
        width: 50px;
    }
    
</style>
<script type="text/javascript">
    function toggle_module(m_selector, l_selector) {
        var $m = $(m_selector);
        var $l = $(l_selector);
        
        if ($m.is(":hidden")) {
            $l.html("[Hide]");
            $m.show();
        } else {
            $l.html("[Show]");
            $m.hide();
        }
        return false;
    }

    
function toggle_severity() {
    var $m = $("#severity-panel");
    var $i = $("#severity-icon");
    
    if ($m.is(":hidden")) {
        $m.show();
        $i.attr("src", "/media/img/admin/selector-removeall.gif");
    } else {
        $m.hide();
        $i.attr("src", "/media/img/admin/selector-addall.gif");
    }
}

function toggle_root() {
    var $m = $("#root-panel");
    var $i = $("#root-icon");
    
    if ($m.is(":hidden")) {
        $m.show();
        $i.attr("src", "/media/img/admin/selector-removeall.gif");
    } else {
        $m.hide();
        $i.attr("src", "/media/img/admin/selector-addall.gif");
    }
}
</script>
<h1>Alarm #{{a.id}}: {{subject}}</h1>
<div class="module">
    <a name="summary"></a>
    <h2>Summary</h2>
    <table WIDTH="100%">
        <tr><TD STYLE="width: 150px"><b>Managed Object:</b></td><td>{{a.managed_object.name}} {% if a.managed_object.platform %}({{a.managed_object.platform}}){% endif %}</td></tr>
        <tr><td><b>Alarm Class:</b></td><td>{{a.alarm_class}}</td></tr>
        <tr>
            <td><b>Root Cause:</b></td>
            <td>{% if root %}
                <a href="{% url fm:alarm:alarm root.id%}">#{{root.id}} ({{root.managed_object.name}}): {{root.alarm_class.name}}</a>
                {% else %}
                    Top Level
                {% endif %}
                {% if is_owner %}
                    <span id="root-panel">
                        <b>New root alarm id:</b>
                        <form method="POST" action="{%url fm:alarm:change_root a.id%}">
                            <input type="text" name="root" value="{% if root %}{{root.id}}{%endif%}" />
                        </form>
                    </span>
                    <a href="#" onclick="return toggle_root();">
                        <img id="root-icon" src="/media/img/admin/selector-addall.gif" title="Change root cause" />
                    </a>
                {% endif %}
            </td>
        </tr>
        <tr><td><b>Severity:</b></td>
            <td style="{{a.effective_style.style}}" id="e_severity">{{severity}} ({{a.severity}})
            {% if is_owner %}
                <span id="severity-panel">
                    <b>Change severity:</b>
                    <a href="{% url fm:alarm:change_severity a.id %}?delta=-1000" title="Decrease severity by 1000">-1000</a>
                    <a href="{% url fm:alarm:change_severity a.id %}?delta=-100" title="Decrease severity by 100">-100</a>
                    <a href="{% url fm:alarm:change_severity a.id %}?delta=100" title="Increase severity by 100">+100</a>
                    <a href="{% url fm:alarm:change_severity a.id %}?delta=1000" title="Increase severity by 1000">+1000</a>
                    <select id="set_severity">
                        {% for s in severities %}
                            <option value="{{s.id}}">{{s.name}}</option>
                        {% endfor %}
                    </select>
                </span>
                <a href="#" onclick="return toggle_severity();">
                    <img id="severity-icon" src="/media/img/admin/selector-addall.gif" title="Change severity" />
                </a>
            {% endif %}
            </td>
        </tr>
        <tr><td><b>Alarm Status:</b></td>
            <td>
                {% if a.status == "A" %}Active{% endif %}
                {% if a.status == "C" %}Cleared{% endif %}
            </td>
        </tr>
        <tr><td><b>Rise Time:</b></td><td>{{a.timestamp}}</TD</tr>
        {% if a.status == "C" %}
            <tr><td><b>Clear Time:</b></td><td>{{a.clear_timestamp}}</td></tr>
        {% endif %}
        <tr><td><b>Duration:</b></td><td>{{a.display_duration}}</TD</tr>
        {% if a.status == "A" %}
            <tr>
                <td><b>Owner:</b></td>
                <td>
                    {% if is_unassigned %}
                        Unassigned
                    {% else %}
                        {{a.owner}}
                    {% endif %}
                </td>
            </tr>
            
            <tr>
                <td><b>Subscribers:</b></td>
                <td>
                    {% for s in subscribers %}
                        {{s}}
                    {% endfor %}
                </td>
            </tr>
        {%endif%}
    </table>
</div>

<div class="module" id="tabs">
    <ul>
        <li><a href="#tabs-overview">Overview</a></li>
        {% if syptoms or probable_causes or recommended_actions %}
            <li><a href="#tabs-help">Help</a></li>
        {% endif %}
        {% if children %}
            <li><a href="#tabs-consequences">Consequences({{n_children}})</a></li>
        {% endif %}
        <li><a href="#tabs-data">Data</a></li>
        <li><a href="#tabs-events">Events({{n_events}})</a></li>
        <li><a href="#tabs-log">Log</a></li>
    </ul>
    
    <div id="tabs-overview">
        <div id="subject-row">
            <div id="subject-label">Subject:</div>
            <div id="subject">{{subject}}</div>
        </div>
        <div id="body">{{body}}</div>
    </div>
    
    {% if syptoms or probable_causes or recommended_actions %}
    <div id="tabs-help">
        {% if symptoms %}
            <div class="help-title">Symptoms:</div>
            <div class="help-text">{{symptoms}}</div>
        {%endif%}
        
        {% if probable_causes %}
            <div class="help-title">Probable causes:</div>
            <div class="help-text">{{probable_causes}}</div>
        {%endif%}
        
        {% if recommended_actions %}
            <div class="help-title">Recommended actions:</div>
            <div class="help-text">{{recommended_actions}}</div>
        {%endif%}    
    </div>
    {% endif %}

    {% if children %}
        <div id="tabs-consequences">
            <table id="t-children" width="100%">
                <thead>
                    <tr>
                        <th>ID</th><th>Timestamp</th><th>Duration</th>
                        <th>Object</th><th>Class</th><th>Subject</th>
                    </tr>
                </thead>
                {% for level, c, s in children %}
                    <tr>
                        <td class="cl{{level}}"><a href="{% url fm:alarm:alarm c.id %}">{{c.id}}</td>
                        <td>{{c.timestamp}}</td>
                        <td>{{c.display_duration}}</td>
                        <td>{{c.managed_object}}</td>
                        <td>{{c.alarm_class.name}}</td>
                        <td>{{s}}</td>
                    </tr>
                {% endfor %}
            </table>
        </div>
    {% endif %}
    
    <div id="tabs-data">
        <table id="t-vars" width="100%">
            {% for k, v in a.vars.items %}
                <tr class="{% cycle 'row1' 'row2' %}">
                    <td class="data-key">{{k}}</td>
                    <td class="data-value">{{v}}</td>
                </tr>
            {% endfor %}
        </table>
    </div>
    
    <div id="tabs-events">
        <table id="t-events" width="100%">
            <thead>
                <tr>
                    <th>ID</th><th>Class</th><th>Timestamp</th><th>Subject</th>
                </tr>
            </thead>
            {% for e_id, e_class, timestamp, subject in events %}
                <tr>
                    <td><a href="{%url fm:event:event e_id %}">{{e_id}}</a></td>
                    <td>{{e_class}}</td>
                    <td>{{timestamp}}</td>
                    <td>{{subject}}</td>
                </tr>
            {% endfor %}
        </table>
    </div>
    
    <div id="tabs-log">
        <table width="100%">
            <thead>
                <tr><th>Timestamp</th><th>Status</th><th>Message</th></tr>
            </thead>
            {% for l in a.log %}
                <tr class="{% cycle 'row1' 'row2' %}">
                    <td>{{l.timestamp}}</td>
                    <td>{{l.from_status}} -&gt; {{l.to_status}}</td>
                    <td>{{l.message}}</td>
                </tr>
            {% endfor %}
            <tr>
                <td colspan="5">
                    <b>Post a message:</b><br/>
                    <form action="{% url fm:alarm:message a.id %}" method="POST" id="message_form">{% csrf_token %}
                        <textarea id="id_message" name="message" rows="5" cols="80"></textarea><br/>
                        <input type="submit" value="Post message" />
                    </form>
                </td>
        </table>
    </div>
</div>

<script>
    $(document).ready(function(){
        $("#e_severity").corner();
        $("#severity-panel").corner();
        $("#set_severity").change(function(){
            document.location = "{% url fm:alarm:change_severity a.id %}?severity=" + $(this).val();
        });
        $("#tabs").tabs();
    });
</script>
{%endblock%}