{% extends "base_charts.html" %}

{% block page_title %}{{ system|upper }} - {{ entity_type|upper }}S - InfiniMetrics{% endblock %}

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

{% block header_title %}{{ system|upper }} – {{ entity_type|upper }}S{% endblock %}

{% block breadcrumbs %}
    <span><a href="../..">{{ entity_type|title }}s</a></span>
    <span>Aggregate</span>
{% endblock %}


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

{% block content %}
    {{ block.super }}
    <script>
        $(document).ready(function() {

            var MultiEntitiesModel = new ChartData({}, {
                url: '{% url "aggregate_entities_data" serial ids "san_ops,san_bytes,san_latency,san_block_size" %}',
                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: 'san_ops', numberOfEntities: {{ entities|length }} }),
                        annotations: annotations,
                        chart_type: 'stacked',
                        chart_options: {
                            title: 'IOPS',
                            labels: labels
                        },
                        show_total: true
                    }),

                    new ChartView({
                        model: new MultiEntitiesChartData({parent: MultiEntitiesModel, type: 'san_bytes', numberOfEntities: {{ entities|length }} }),
                        annotations: annotations,
                        chart_type: 'stacked',
                        chart_options: {
                            title: 'THROUGHPUT',
                            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: 'san_latency', numberOfEntities: {{ entities|length }} }),
                        annotations: annotations,
                        chart_type: 'line',
                        chart_options: {
                            title: 'LATENCY',
                            labels: extendedLabels,
                            axes: {
                                y: {
                                    valueFormatter: formatters.latency,
                                    axisLabelFormatter: formatters.latency,
                                },
                                x: {
                                    drawGrid: false
                                }
                            },
                            errorBars: false
                        }
                    }),

                    new ChartView({
                        model: new MultiEntitiesChartData({parent: MultiEntitiesModel, type: 'san_block_size', numberOfEntities: {{ entities|length }} }),
                        annotations: annotations,
                        chart_type: 'line',
                        chart_options: {
                            title: 'AVERAGE BLOCK SIZE',
                            labels: extendedLabels,
                            axes: {
                                y: {
                                    valueFormatter: formatters.blocksize,
                                    axisLabelFormatter: formatters.blocksize
                                },
                                x: {
                                    drawGrid: false
                                }
                            },
                            errorBars: false
                        }
                    })
                ];


                MainApp.start({charts: charts});

            });


        });

    </script>

{% endblock %}