{% extends "base_charts.html" %}

{% block body_class %}{{ block.super }} wide-legend{% endblock %}

{% block breadcrumbs %}
    <span>{{ tab }}</span>
{% endblock %}

{% block top_menu_items %}
    <li><a href="{{ monitored_entity.get_gui_url }}" target="_blank">Open in System GUI</a></li>
    <li><a href="{% url "monitored-entity-list" system.serial %}?id=in:{% for link in links %}{{ link.id }}{% if not forloop.last %},{% endif %}{% endfor %}" target="_blank">View in API Browser</a></li>
    <li><a href="#" onclick="export_data({{ monitored_entity.id }}, '{{ system.name }} Replication'); return false;">Export Data</a></li>
{% endblock %}

{% block resampling_mode %}
{% endblock %}

{% block content %}
    {{ block.super }}
    <script>
        $(document).ready(function() {
            var annotations = new AnnotationFormatter({
                collection: new ChartAnnotations([], {url: '{% url "annotations" serial %}'})
            });
            var links_model = new ChartData({}, {
                url: '{% url "replication_links_data" serial %}',
                chart_start: chart_start,
                chart_end: chart_end,
                polling_interval: 10
            });
            var charts = [
                {% for link in links %}
                    new ChartView({
                        model: new ReplicationLinksChartData({
                            parent: links_model,
                            link_index: {{ forloop.counter0 }}
                        }),
                        annotations: annotations,
                        chart_options: {
                            title: 'LINK WITH {{ link|upper }}',
                            labels: ['timestamp', 'Async replication from {{ link|upper }}', 'Async replication to {{ link|upper }}', 'Total'],
                            labelsKMG2: true,
                            axes: {
                                y: {
                                    valueFormatter: formatters.throughput,
                                    axisLabelFormatter: formatters.throughput
                                },
                                x: {
                                    drawGrid: false
                                }
                            },
                            visibility: [true, true, false],
                            colors: brightenColors(['#2ECC71', '#F64747', '#F4D03F']),
                            errorBars: false
                        }
                    }),
                {% endfor %}
            ];
            MainApp.start({charts: charts});
        });
    </script>
{% endblock %}