{% extends 'base.html' %}
{% load extra %}
{% load static %}

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

{% block content %}

<div class="">
  <div class="col-xs-12">
    <div class="row">
      <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-4 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-2 text-right"><h2><a href="{% url "update-service" service.id %}"><i class="glyphicon glyphicon-edit"></i></a></h2></div>
    </div>
  </div>
  {% if service.overall_status != service.PASSING_STATUS %}
  <div class="col-xs-12 alert alert-warning">
    <div class="row">
    {% if service.unexpired_acknowledgement %}
      <div class="col-xs-4">
        <a href="{% url 'remove-acknowledgement' pk=service.id %}" class="btn btn-lg btn-warning btn-block"><i class="glyphicon glyphicon-play"></i> Re-enable alerts</a>
      </div>
      <div class="col-xs-8">
        {{ service.unexpired_acknowledgement.user.email }} acknowledged an alert against this service at {{ service.unexpired_acknowledgement.time }} - alerts are currently paused. The acknowledgement will expire at {{ service.unexpired_acknowledgement.expires }}
      </div>
    {% else %}
      <div class="col-xs-4">
        <a class="btn btn-success btn-block btn-lg" href="{% url 'acknowledge-alert' pk=service.id %}"><i class="glyphicon glyphicon-pause"></i> Acknowledge alert</a>
      </div>
      <div class="col-xs-8">
        By acknowledging this failure you will pause alerts temporarily from being sent to your alerting systems. If you do not resolve the problem within {% echo_setting 'ACKNOWLEDGEMENT_EXPIRY' %} minutes, or you cancel the acknowledgement, alerts will start firing again.
      </div>
    {% endif %}
    </div>
  </div>
  {% endif %}
</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>
        {% for alert in service.alerts.all %}
          <span class="label label-{% if service.alerts_enabled and alert.enabled %}success{% else %}warning{% endif %}">{{ alert }}</span>
        {% endfor %}
        </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-desktop"></i></h3></div>
    <div class="col-xs-8"><h3>Instances</h3></div>
    <div class="col-xs-3 text-right">
     <h3>
          <a href="{% url "create-instance" %}?service={{ service.id }}" class=""><i class="glyphicon glyphicon-plus" title="Add new instance for this service"></i><i class="fa fa-desktop" title=""></i></a>
     </h3>
    </div>
{% include 'cabotapp/_instance_list.html' with instances=service.instances.all %}
  </div>
</div>



{% for custom_check in custom_check_types %}
<hr>
{% include 'cabotapp/_statuscheck_list.html' with checks=custom_check.objects|for_service:service service=service checks_type=custom_check.check_name %}
{% endfor %}
<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.service }}
            <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>

<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>Documentation</h3>
    </div>
    {% if service.runbook_link %}
    <div class="col-xs-11 col-xs-offset-1">
      Runbook Link: <a href="{{ service.runbook_link }}">{{ service.runbook_link }}</a>
    </div>
    {% else %}
    <div class="col-xs-11 col-xs-offset-1">
      No runbook link configured
    </div>
    {% endif %}
    {% if service.hackpad_id %}
    <div class="col-xs-11 col-xs-offset-1">
      Displaying <a href="{{ service.hackpad_id }}">{{ service.hackpad_id }}</a>:
      <script src="{{ service.hackpad_id }}"></script>
    </div>
    {% else %}
    <div class="col-xs-11 col-xs-offset-1">No embedded recovery instructions configured</div>
    {% endif %}
  </div>
</div>

{% endblock content %}

{% block js %}
{% load compress %}
{% load jsonify %}
{{ block.super }}
<script type="text/javascript">
  window.SERVICE_HISTORY = {{ service.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/javascript">

  (function() {
    var drawRickshaw, formatDataForRickshaw;
  
    $(document).ready(function() {
      var data, labels, processedData;
      data = window.SERVICE_HISTORY;
      labels = {
        num_checks_active: 'blue',
        num_checks_failing: '#f00'
      };
      processedData = formatDataForRickshaw(data, labels);
      return drawRickshaw(processedData.series, labels, processedData.events);
    });
  
    formatDataForRickshaw = function(data, labels) {
      var color, events, label, line, ret, series, slice, val, _i, _len;
      series = {};
      events = [];
      for (label in labels) {
        color = labels[label];
        series[label] = {
          color: color,
          name: label,
          data: []
        };
      }
      for (_i = 0, _len = data.length; _i < _len; _i++) {
        slice = data[_i];
        if (slice.did_send_alert) {
          events.push({
            time: slice.time,
            message: 'Sent alert'
          });
        }
        for (label in labels) {
          color = labels[label];
          series[label].data.push({
            x: slice.time,
            y: slice[label]
          });
        }
      }
      ret = [];
      for (line in series) {
        val = series[line];
        ret.push(val);
      }
      return {
        series: ret,
        events: events
      };
    };
  
    drawRickshaw = function(data, labels, events) {
      var annotator, evt, hoverDetail, rickshawLine, xAxis, yAxis, _i, _len;
      if (events == null) {
        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 (_i = 0, _len = events.length; _i < _len; _i++) {
        evt = events[_i];
        annotator.add(evt.time, evt.message);
      }
      return annotator.update();
    };
  
  }).call(this);

</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 %}
