{% extends "redis_metrics/base.html" %}
{% load url from future %}

{% block extrahead %}
{% if gauges.slugs|length %}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load('visualization', '1', {packages:['gauge']});
    google.setOnLoadCallback(drawChart);
    function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ['Gauge', 'Value'],
            {% for gauge, value in gauges.data.items %}
            ['{{ gauge }}', {{ value|default:0 }}]{% if not forloop.last %},{% endif %}
            {% endfor %}
        ]);

        {% comment %}

        NOTE: Google Charts' Gagues have settings for "red" and "yellow"
        indicators (e.g. as Warning levels). These values are highly
        subjective, so you should tweak them according to your own gagues.

        The following values are just an example.

        {% endcomment %}
        var options = {
            width: 400, height: 120,
            redFrom: 90, redTo: 100,        {# Error Levels #}
            yellowFrom:75, yellowTo: 90,    {# Warning Levels #}
            minorTicks: 5
        };

        var chart_div = document.getElementById('gauges_chart');
        var chart = new google.visualization.Gauge(chart_div);
        chart.draw(data, options);
    }
</script>
{% endif %}
{% endblock %}

{% block content %}
    <h1>Gagues</h1>
    {% if gauges.slugs|length %}
        <div id="gauges_chart"></div>

        <table>
        <caption>Gagues</caption>
        <thead>
            <tr><th>Gague</th><th>Value</th></tr>
        </thead>
        <tbody>
            {% for gauge, value in gauges.data.items %}
                <tr>
                    <td>{{ gauge }}</td>
                    <td class="value">{{ value|default_if_none:"-" }}</td>
                </tr>
            {% endfor %}
        </tbody>
        </table>
    {% else %}
        <p>You don't have any gauges set up yet!</p>
    {% endif %}

    <h1>Metrics</h1>
    {% if metric_slugs|length %}
        <p>Click a metric below to view more data.</p>
        <ul>
        {% for slug in metric_slugs %}
            <li>
                <a href="{% url 'redis_metric_detail' slug %}">{{ slug }}</a>
            </li>
        {% endfor %}
        </ul>
    {% else %}
        <p>You don't have any metrics set up yet!</p>
    {% endif %}

{% endblock %}
