{% extends "base_general_charts.html" %}

{% block page_title %}{{ system|upper }} - IO BY SIZE - InfiniMetrics{% endblock %}

{% block extra_head %}
    {{ block.super }}
    {% load static compress %}
    {% compress css %}
        <link type="text/css" href='{% static "css/chart_2_cols_legend.css" %}' rel="stylesheet">
        <link type="text/css" href='{% static "css/s3_io_by_size.css" %}' rel="stylesheet">
    {% endcompress %}
{% endblock %}

{% block top_menu_items %}
    <li><a href="{% url "monitored-entity-list" system.serial %}?id=in:{{ upload_entity.id }},{{ download_entity.id }}" target="_blank">View in API Browser</a></li>
    <li><a href="#" onclick="export_data_multiple_files({ '{{ system.name }} S3 IO by size - Upload': {{ upload_entity.id }}, '{{ system.name }} S3 IO by size - Download': {{ download_entity.id }} }); return false;">Export Data</a></li>
{% endblock %}

{% block breadcrumbs %}
    <span>
        IO by size
    </span>
{% endblock %}

{% block content %}
    {{ block.super }}
    <script>
        $(document).ready(function() {
            // Override chart height
            ChartView.prototype.calcHeight = function() {
                return 182;
            }

            const labels = ['timestamp', '&lt; 4KiB', '&lt; 16KiB', '&lt; 64KiB', '&lt; 256KiB', '&lt; 1MiB', '&lt; 4MiB', '&lt; 16MiB', '&lt; 256MiB', '&lt; 1GiB', '&ge; 1GiB'];
            var annotations = new AnnotationFormatter({
                collection: new ChartAnnotations([], {url: '{% url "annotations" serial %}?monitored_entity_id={{ upload_entity.id }}'})
            });
            let upload_model = new ChartData({}, {
                url: '{% url "entity_data" serial upload_entity.id "s3_io_by_size" %}',
                chart_start: chart_start,
                chart_end: chart_end,
                polling_interval: {{ upload_entity.polling_interval }}
            });
            let download_model = new ChartData({}, {
                url: '{% url "entity_data" serial download_entity.id "s3_io_by_size" %}',
                chart_start: chart_start,
                chart_end: chart_end,
                polling_interval: {{ download_entity.polling_interval }}
            });
            let throughput_options = {
                labelsKMG2: true,
                axes: {
                    y: {
                        valueFormatter: formatters.compact_throughput,
                        axisLabelFormatter: formatters.throughput
                    },
                    x: { drawGrid: false }
                }
            };
            let latency_options = {
                axes: {
                    y: {
                        valueFormatter: formatters.compact_latency,
                        axisLabelFormatter: formatters.latency
                    },
                    x: { drawGrid: false }
                }
            };

            var charts = [
                createChartView(
                    new PartialChartData({}, {parent: download_model, column_indices: {{ reqs_indices }}}),
                    annotations,
                    'DOWNLOAD_REQS',
                    labels,
                    'S3 DOWNLOADS PER SECOND'
                ),
                createChartView(
                    new PartialChartData({}, {parent: upload_model, column_indices: {{ reqs_indices }}}),
                    annotations,
                    'UPLOAD_REQS',
                    labels,
                    'S3 UPLOADS PER SECOND'
                ),
                createChartView(
                    new PartialChartData({}, {parent: download_model, column_indices: {{ bytes_indices }}}),
                    annotations,
                    'DOWNLOAD_BYTES',
                    labels,
                    'S3 DOWNLOAD THROUGHPUT',
                    throughput_options
                ),
                createChartView(
                    new PartialChartData({}, {parent: upload_model, column_indices: {{ bytes_indices }}}),
                    annotations,
                    'UPLOAD_BYTES',
                    labels,
                    'S3 UPLOAD THROUGHPUT',
                    throughput_options
                ),
                createChartView(
                    new PartialChartData({}, {parent: download_model, column_indices: {{ first_byte_latency_indices }}}),
                    annotations,
                    'DOWNLOAD_FIRST_BYTE_LATENCY',
                    labels,
                    '<div class="chart-switcher">S3 DOWNLOAD FIRST BYTE LATENCY<div>S3 DOWNLOAD TOTAL REQUEST DURATION</div></div>',
                    latency_options
                ),
                createChartView(
                    new PartialChartData({}, {parent: download_model, column_indices: {{ total_req_latency_indices }}}),
                    annotations,
                    'DOWNLOAD_TOTAL_REQ_DURATION',
                    labels,
                    '<div class="chart-switcher">S3 DOWNLOAD TOTAL REQUEST DURATION<div>S3 DOWNLOAD FIRST BYTE LATENCY</div></div>',
                    latency_options
                ),
                createChartView(
                    new PartialChartData({}, {parent: upload_model, column_indices: {{ first_byte_latency_indices }}}),
                    annotations,
                    'UPLOAD_FIRST_BYTE_LATENCY',
                    labels,
                    '<div class="chart-switcher">S3 UPLOAD FIRST BYTE LATENCY<div>S3 UPLOAD TOTAL REQUEST DURATION</div></div>',
                    latency_options
                ),
                createChartView(
                    new PartialChartData({}, {parent: upload_model, column_indices: {{ total_req_latency_indices }}}),
                    annotations,
                    'UPLOAD_TOTAL_REQ_DURATION',
                    labels,
                    '<div class="chart-switcher">S3 UPLOAD TOTAL REQUEST DURATION<div>S3 UPLOAD FIRST BYTE LATENCY</div></div>',
                    latency_options
                ),
            ];
            MainApp.start({charts: charts});

            // S3 DOWNLOAD FIRST BYTE LATENCY and S3 DOWNLOAD TOTAL REQUEST DURATION
            // S3 UPLOAD FIRST BYTE LATENCY   and S3 UPLOAD TOTAL REQUEST DURATION
            set_chart_switcher([charts[4], charts[6]], [charts[5], charts[7]]);

            charts.forEach(function(item) {
                const legendElement = $(item.el).find('.legend');
                
                if (legendElement.length > 0) {
                    legendElement.addClass('two-cols-legend'); 
                }
            });
        });
    </script>
{% endblock %}