{% extends "basic.j2" %}

{% block head %}
<link href="/static/css/c3.min.css" rel="stylesheet" type="text/css">
{% endblock head %}

{% block body %}
<script src="/static/js/d3.min.js" charset="utf-8"></script>
<script src="/static/js/c3.min.js"></script>
<script src="/static/js/gnocchi.js"></script>
<div class="container-fluid">
  <div class="page-header">
    <h1>Resource {{ data.id }}</h1>
  </div>

  <div class="page-body">
    <dl>
      {% for key, value in data.iteritems() %}
        {%- if key != 'metrics' -%}
          <dt>{{ key }}</dt>
          <dd>{{ value }}</dd>
        {% endif %}
      {% endfor %}

      <dt>metrics</dt>
      <dd>
        <ul>
          {% for metric in data.metrics %}
            <li>
              <a href="/v1/metric/{{ metric.id | e }}/measures">
                {{ metric.name | e }}
              </a>
              <div id="{{ metric.name|e }}-chart"></div>
            </li>
          {% endfor %}
        </ul>
      </dd>
    </dl>
    </div>
  </div>

<script>
$(function () {
    var metrics = {{ data.metrics|tojson }}
    $.each(metrics, function(idx, metric) {
        debugger
        url = '/v1/metric/' + metric.id + '/measures'
        $.get(url, function(measures) {
            drawGraph('#' + metric.name + '-chart', measures)
        });
    });
});
</script>
{% endblock body %}
