{% extends 'base.html' %}
{% load static from staticfiles %}
{% block title %}{{ block.super }} - {{ instance.name }}{% endblock title %}

{% block content %}

<div class="row">
  <div class="col-xs-12">
    <div class="col-xs-1"><h2><i class="fa fa-desktop"></i></h2></div>
    <div class="col-xs-5"><h2><span class="break"></span>{{ instance.name }}</h2></div>
    <div class="col-xs-4 text-right"><h2><span class="label label-{% if instance.overall_status == instance.PASSING_STATUS %}success{% else %}danger{% endif %}">{{ instance.overall_status|lower|capfirst }}</span> </h2></div>
    <div class="col-xs-2 text-right"><h2><a class = "" href="{% url "duplicate-instance" instance.id %}"><i class="fa fa-copy"></i> </a><a class = "" href="{% url "update-instance" instance.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-home"></i></h5></div>
      <div class="col-xs-3"><h5><span class="break"></span>Address</h5></div>
      <div class="col-xs-8"><h5>{{ instance.address|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 instance.users_to_notify.all %}
        No users subscribed
        {% else %}
        {{ instance.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 instance.email_alert %}<i class="fa fa-envelope"></i> Email{% endif %}
        {% if instance.hipchat_alert %}<i class="fa fa-comment"></i> Hipchat{% endif %}
        {% if instance.sms_alert %}<i class="fa fa-mobile"></i> SMS{% endif %}
        {% if instance.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 (24 hours)</h3></div>
    <div class="col-xs-12">
      <div id="graph" style="height: 150px; margin: 1 0px;"></div>
      <div id="timeline"></div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-xs-12">
    <div class="col-xs-1"><h3><i class="fa fa-gears"></i></h3></div>
    <div class="col-xs-8"><h3>Services</h3></div>
    </div>
{% include 'cabotapp/_service_list.html' with services=instance.service_set.all %}
  </div>
</div>

<hr>

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

<hr>

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

<hr>

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

<hr>

{% include 'cabotapp/_statuscheck_list.html' with checks=instance.icmp_status_checks.all instance=instance checks_type="ICMP" %}

<hr>

<div class="row">
  <div class="col-xs-12">
    <div class="col-xs-1"><h3><i class="fa fa-table"></i></h3></div>
    <div class="col-xs-11">
      <h3>Status check report</h3>
    </div>
    <div class="col-xs-12">
      <form action="{% url "checks-report" %}" method="get">
        <div class="form-group">
          <div class="col-xs-12">
            {{ report_form.instance }}
            <label class="col-xs-2 control-label">{{ report_form.checks.label_tag }}</label>
            <div class="col-xs-10">{{ report_form.checks }}</div>
          </div>
        </div>
        <div class="form-group">
          <div class="col-xs-12">
            <label class="col-xs-2 control-label">{{ report_form.date_from.label_tag }}</label>
            <div class="col-xs-10">{{ report_form.date_from }}</div>
          </div>
        </div>
        <div class="form-group">
          <div class="col-xs-12">
            <label class="col-xs-2 control-label">{{ report_form.date_to.label_tag }}</label>
            <div class="col-xs-10">{{ report_form.date_to }}</div>
          </div>
        </div>
        <div class="col-xs-12">
          <div class="form-group">
            <div class="col-xs-6 col-xs-offset-2">
              <button type="submit" class="btn btn-primary">Get report</button>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

<hr>


{% endblock content %}

{% block js %}
{% load compress %}
{% load jsonify %}
{{ block.super }}
<script type="text/javascript">
  window.INSTANCE_HISTORY = {{ instance.recent_snapshots|jsonify }}
</script>
<script type="text/javascript" src="{% static 'arachnys/js/d3.js' %}"></script>
{% compress js %}
<script type="text/javascript" src="{% static 'arachnys/js/rickshaw.js' %}"></script>
<script type="text/coffeescript">

$(document).ready ->
  data = window.INSTANCE_HISTORY
  labels = {
    num_checks_active: 'blue'
    num_checks_failing: '#f00'
  }
  processedData = formatDataForRickshaw data, labels
  drawRickshaw processedData.series, labels, processedData.events

formatDataForRickshaw = (data, labels) ->
  series = {}
  events = []
  for label, color of labels
    series[label] = {
      color: color
      name: label
      data: []
    }
  for slice in data
    if slice.did_send_alert
      events.push {time: slice.time, message: 'Sent alert'}
    for label, color of labels
      series[label].data.push
        x: slice.time
        y: slice[label]
  ret = []
  for line, val of series
    ret.push val
  return {
    series: ret
    events: events
  }

drawRickshaw = (data, labels, events = []) ->
  rickshawLine = new Rickshaw.Graph
    renderer: 'line'
    element: document.querySelector('#graph')
    series: data
    height: 140
  rickshawLine.render()

  hoverDetail = new Rickshaw.Graph.HoverDetail({graph: rickshawLine})
  xAxis = new Rickshaw.Graph.Axis.Time({graph: rickshawLine})
  xAxis.render()
  yAxis = new Rickshaw.Graph.Axis.Y({graph: rickshawLine})
  yAxis.render()

  window.annotator = annotator = new Rickshaw.Graph.Annotate({
    graph: rickshawLine
    element: document.getElementById('timeline')
  })
  for evt in events
    annotator.add evt.time, evt.message
  annotator.update()

</script>
<script type="text/javascript">
$(function(){
    $(':input.datepicker').datepicker({
        dateFormat: 'yy-mm-dd',
        buttonImage: "{% static 'theme/img/calendar.gif' %}",
        buttonImageOnly: true,
        showOn: 'button'
    });
});
</script>
{% endcompress %}
{% endblock js %}
