{% extends "base_charts.html" %}

{% block page_title %}{{ system|upper }} - {{ tab | upper}} - InfiniMetrics{% endblock %}

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

{% block header_title %}{{ system|upper }} – {{ tab | upper}}{% endblock %}

{% block breadcrumbs %}
    <span><a href="../..">{{ tab }}</a></span>
    <span>Aggregate</span>
{% endblock %}

{% block top_menu_items %}
{{ block.super }}
    <li><a href="#" onclick="export_joint_io_data('{{ ids }}', '{{ tab }}'); return false;">Export Data</a></li>
{% endblock %}

{% block content %}
    {{ block.super }}
    <script>
        $(document).ready(function() {
            var MultiEntitiesModel = new ChartData({}, {
                {% if tab == 'S3 Buckets' %}
                    url: '{% url "aggregate_entities_data" serial ids "s3_reqs,s3_throughput,s3_first_byte_latency,s3_req_size,s3_total_req_latency" %}',
                {% else %}
                    url: '{% url "aggregate_entities_data" serial ids "nas_ops,nas_bytes,nas_latency,nas_block_size" %}',
                {% endif %}
                chart_start: chart_start,
                chart_end: chart_end,
                polling_interval: {{ polling_interval }}
            });

            $.get('{% url "names" serial ids %}', function(names) {
                var labels = ['timestamp'].concat(names);
                var extendedLabels = labels.concat('Average');

                var annotations = new AnnotationFormatter({
                    collection: new ChartAnnotations([], {url: '{% url "annotations" serial %}'})
                });

                var charts = [
                    new ChartView({
                        model: new MultiEntitiesChartData({parent: MultiEntitiesModel, type: 'nas_ops', numberOfEntities: {{ entities|length }} }),
                        annotations: annotations,
                        chart_type: 'stacked',
                        chart_options: {
                            {% if tab == 'S3 Buckets' %}
                                title: 'REQUESTS PER SECOND {{ experimental|experimental_label }}',
                            {% else %}
                                title: 'OPS {{ experimental|experimental_label }}',
                            {% endif %}
                            labels: labels
                        },
                        show_total: true
                    }),
                    new ChartView({
                        model: new MultiEntitiesChartData({parent: MultiEntitiesModel, type: 'nas_bytes', numberOfEntities: {{ entities|length }} }),
                        annotations: annotations,
                        chart_type: 'stacked',
                        chart_options: {
                            {% if tab == 'S3 Buckets' %}
                                title: 'REQUEST THROUGHPUT {{ experimental|experimental_label }}',
                            {% else %}
                                title: 'THROUGHPUT {{ experimental|experimental_label }}',
                            {% endif %}
                            labels: labels,
                            labelsKMG2: true,
                            axes: {
                                y: {
                                    valueFormatter: formatters.throughput,
                                    axisLabelFormatter: formatters.throughput
                                },
                                x: {
                                    drawGrid: false
                                }
                            }
                        },
                        show_total: true,
                        total_formatter: formatters.throughput
                    }),
                    new ChartView({
                        model: new MultiEntitiesChartData({parent: MultiEntitiesModel, type: 'nas_latency', numberOfEntities: {{ entities|length }} }),
                        annotations: annotations,
                        chart_type: 'line',
                        key: 'LATENCY',
                        chart_options: {
                            {% if tab == 'S3 Buckets' %}
                                title: '<div class="chart-switcher">FIRST BYTE LATENCY<div>TOTAL REQUEST DURATION</div></div>',
                            {% else %}
                                title: 'LATENCY {{ experimental|experimental_label }}',
                            {% endif %}
                            labels: extendedLabels,
                            axes: {
                                y: {
                                    valueFormatter: formatters.latency,
                                    axisLabelFormatter: formatters.latency,
                                },
                                x: {
                                    drawGrid: false
                                }
                            },
                            errorBars: false
                        }
                    }),
                    {% if tab == 'S3 Buckets' %}
                        new ChartView({
                            model: new MultiEntitiesChartData({parent: MultiEntitiesModel, type: 'total_req_latency', numberOfEntities: {{ entities|length }} }),
                            annotations: annotations,
                            key: 'S3_TOTAL_REQUEST_DURATION',
                            chart_type: 'line',
                            chart_options: {
                                title: '<div class="chart-switcher">TOTAL REQUEST DURATION<div>FIRST BYTE LATENCY</div></div>',
                                labels: extendedLabels,
                                axes: {
                                    y: {
                                        valueFormatter: formatters.latency,
                                        axisLabelFormatter: formatters.latency,
                                    },
                                    x: {
                                        drawGrid: false
                                    }
                                },
                                errorBars: false
                            }
                        }),
                    {% endif %}
                    new ChartView({
                        model: new MultiEntitiesChartData({parent: MultiEntitiesModel, type: 'nas_block_size', numberOfEntities: {{ entities|length }} }),
                        annotations: annotations,
                        chart_type: 'line',
                        chart_options: {
                            {% if tab == 'S3 Buckets' %}
                                title: 'AVERAGE REQUEST SIZE {{ experimental|experimental_label }}',
                            {% else %}
                                title: 'AVERAGE BLOCK SIZE {{ experimental|experimental_label }}',
                            {% endif %}
                            labels: extendedLabels,
                            labelsKMG2: true,
                            axes: {
                                y: {
                                    valueFormatter: formatters.blocksize,
                                    axisLabelFormatter: formatters.blocksize
                                },
                                x: {
                                    drawGrid: false
                                }
                            },
                            errorBars: false
                        }
                    })
                ];

                MainApp.start({charts: charts});

                {% if tab == 'S3 Buckets' %}
                    // FIRST BYTE LATENCY and TOTAL REQUEST DURATION
                    set_chart_switcher([charts[2]], [charts[3]]);
                {% endif %}
            });
        });
    </script>
{% endblock %}