{% extends 'base.html' %}

{% block title %}{{ block.super }} - {{ service.name }}{% endblock title %}

{% block content %}

<div class="row">
  <div class="col-xs-12">
    <div class="col-xs-1"><h2><i class="fa fa-gears"></i></h2></div>
    <div class="col-xs-5"><h2><span class="break"></span>{{ service.name }}</h2></div>
    <div class="col-xs-5 text-right"><h2><span class="label label-{% if service.overall_status == service.PASSING_STATUS %}success{% else %}danger{% endif %}">{{ service.overall_status|lower|capfirst }}</span> <span class="label label-{% if service.alerts_enabled %}success{% else %}warning{% endif %}">{% if service.alerts_enabled %}Alerts enabled{%else %}Alerts disabled{% endif %}</span></h2></div>
    <div class="col-xs-1 text-right"><h2><a href="{% url update-service service.id %}"><i class="glyphicon glyphicon-edit"></i></a></h2></div>
  </div>
</div>
<hr>
<div class="row">
  <div class="col-md-6 col-xs-12">
    <div class="col-xs-1"><h3><i class="fa fa-cog"></i></h3></div>
    <div class="col-xs-11"><h3>Configuration</h3></div>
    <div class="col-xs-12">
      <div class="col-xs-1"><h5><i class="glyphicon glyphicon-link"></i></h5></div>
      <div class="col-xs-3"><h5><span class="break"></span>Service URL</h5></div>
      <div class="col-xs-8"><h5>{{ service.url|urlize|default:"None configured" }}</h5></div>
    </div>
    <div class="col-xs-12">
      <div class="col-xs-1"><h5><i class="glyphicon glyphicon-user"></i></h5></div>
      <div class="col-xs-3"><h5><span class="break"></span>Users watching</h5></div>
      <div class="col-xs-8"><h5>
        {% if not service.users_to_notify.all %}
        No users subscribed
        {% else %}
        {{ service.users_to_notify.all|join:", " }}
        {% endif %}
      </h5></div>
    </div>
    <div class="col-xs-12">
      <div class="col-xs-1"><h5><i class="fa fa-exclamation-triangle"></i></h5></div>
      <div class="col-xs-3"><h5><span class="break"></span>Alert types</h5></div>
      <div class="col-xs-8">
        <h5>
        {% if service.email_alert %}<i class="fa fa-envelope"></i> Email{% endif %}
        {% if service.hipchat_alert %}<i class="fa fa-comment"></i> Hipchat{% endif %}
        {% if service.sms_alert %}<i class="fa fa-mobile"></i> SMS{% endif %}
        {% if service.telephone_alert %}<i class="fa fa-phone"></i> Telephone{% endif %}
        </h5>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-md-6">
    <div class="col-xs-1"><h3><i class="fa fa-bar-chart-o"></i></h3></div>
    <div class="col-xs-11"><h3>Status (4 hours)</h3></div>
    <div class="col-xs-12" id="graph" style="height:150px;"></div>
  </div>
</div>

<hr>

{% include 'cabotapp/_statuscheck_list.html' with checks=service.graphite_status_checks.all service=service checks_type="Graphite" %}

<hr>

{% include 'cabotapp/_statuscheck_list.html' with checks=service.http_status_checks.all service=service checks_type="Http" %}

<hr>

{% include 'cabotapp/_statuscheck_list.html' with checks=service.jenkins_status_checks.all service=service checks_type="Jenkins" %}

<hr>

<div class="row">
  <div class="col-xs-12">
    <div class="col-xs-1"><h3><i class="fa fa-exclamation-triangle"></i></h3></div>
    <div class="col-xs-11">
      <h3>Recovery instructions</h3>
    </div>
    {% if service.hackpad_id %}
      <script src="https://arachnys.hackpad.com/{{ service.hackpad_id }}.js"></script>
    {% else %}
    <div class="col-xs-11 col-xs-offset-1">No hackpad configured</div>
    {% endif %}
    </div>
  </div>
</div>

{% endblock content %}

{% block js %}
{% load compress %}
{% load jsonify %}
{{ block.super }}
<script type="text/javascript">
  window.SERVICE_HISTORY = {{ service.recent_snapshots|jsonify }}
</script>
{% compress js %}
<script type="text/javascript" src="{{ STATIC_URL }}arachnys/js/raphael.js"></script>
<script type="text/coffeescript">

$(document).ready ->
  data = window.SERVICE_HISTORY
  series = []
  events = []
  labels = ['num_checks_active',
            'num_checks_failing']
  for slice in data
    if slice.did_send_alert
      events.push slice.time*1000
    tmp = {}
    tmp.time = slice.time*1000
    for label in labels
      tmp[label] = slice[label]
    series.push tmp
  drawMorris series, labels, events

drawMorris = (data, labels, events) ->
  window.morrisLine = Morris.Line
    element: 'graph'
    data: data
    xkey: 'time'
    ykeys: labels
    labels: labels
    hideHover: 'auto'
    pointSize: '3px'
    events: events
    eventLineColors: ['#ff0000']
    eventStrokeWidth: '2px'

</script>
{% endcompress %}
{% endblock js %}