{% extends "base_general_charts.html" %}

{% block top_menu_items %}
    <li><a href="{% url "monitored-entity-list" system.serial %}?id=in:
{{ monitored_entity.id }}
{% if nas_v1_metrics_exist %},{{ nas_entity.id }}{% endif %}
{% if system.has_io_by_size_v2 %},{{ nas_entity_v2.id }}{% endif %}"
target="_blank">View in API Browser</a></li>
    <li><a href="#" onclick="export_data({{ monitored_entity.id }}, '{{ system.name }} SAN IO by size'); return false;">Export SAN Data</a></li>
    <li><a href="#" onclick="exportNasData({{ nas_entity.id }}, {{ nas_entity_v2.id }}, '{{ system.name }} NAS IO by size'); return false;">Export NAS Data</a></li>
{% 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/io_by_size.css" %}' rel="stylesheet">
    {% endcompress %}
{% endblock %}


{% block content %}
    {{ block.super }}
    <script>
        var right_charts = [];
        var left_charts = [];

        const v1Charts = [];
        const v2Charts = []

        $(document).ready(function() {
            var annotations = new AnnotationFormatter({
                collection: new ChartAnnotations([], {url: '{% url "annotations" serial %}?monitored_entity_id={{ monitored_entity_id }}'})
            });

            // SAN charts
            var io_model = new ChartData({}, {
                url: '{% url "entity_data" serial monitored_entity_id "io_by_size" %}',
                chart_start: chart_start,
                chart_end: chart_end,
                polling_interval: {{ monitored_entity.polling_interval }}
            });
            var labels = ['timestamp', '&lt; 4KiB', '&lt; 8KiB', '&lt; 32KiB', '&lt; 64KiB', '&lt; 512KiB', '&ge; 512KiB'];
            left_charts = [
                new ChartView({
                    model: new PartialChartData({}, {parent: io_model, column_indices: [0, 1, 2, 3, 4, 5, 6]}),
                    annotations: annotations,
                    key: '{{ monitored_entity.get_class_name }}_1',
                    chart_type: 'line',
                    chart_options: {
                        title: 'SAN READS PER SECOND',
                        labels: labels,
                        errorBars: iu,
                    }
                }),
                new ChartView({
                    model: new PartialChartData({}, {parent: io_model, column_indices: [0, 19, 20, 21, 22, 23, 24]}),
                    annotations: annotations,
                    key: '{{ monitored_entity.get_class_name }}_2',
                    chart_type: 'line',
                    chart_options: {
                        title: 'SAN WRITES PER SECOND',
                        labels: labels,
                        errorBars: iu,
                    }
                }),
                new ChartView({
                    model: new PartialChartData({}, {parent: io_model, column_indices: [0, 7, 8, 9, 10, 11, 12]}),
                    annotations: annotations,
                    key: '{{ monitored_entity.get_class_name }}_3',
                    chart_type: 'line',
                    chart_options: {
                        title: 'SAN READ THROUGHPUT',
                        labels: labels,
                        errorBars: iu,
                        labelsKMG2: true,
                        axes: {
                            y: {
                                valueFormatter: formatters.throughput,
                                axisLabelFormatter: formatters.throughput
                            },
                            x: {
                                drawGrid: false
                            }
                        }
                    }
                }),
                new ChartView({
                    model: new PartialChartData({}, {parent: io_model, column_indices: [0, 25, 26, 27, 28, 29, 30]}),
                    annotations: annotations,
                    key: '{{ monitored_entity.get_class_name }}_4',
                    chart_type: 'line',
                    chart_options: {
                        title: 'SAN WRITE THROUGHPUT',
                        labels: labels,
                        errorBars: iu,
                        labelsKMG2: true,
                        axes: {
                            y: {
                                valueFormatter: formatters.throughput,
                                axisLabelFormatter: formatters.throughput
                            },
                            x: {
                                drawGrid: false
                            }
                        }
                    }
                }),
                new ChartView({
                    model: new PartialChartData({}, {parent: io_model, column_indices: [0, 13, 14, 15, 16, 17, 18]}),
                    annotations: annotations,
                    key: '{{ monitored_entity.get_class_name }}_5',
                    chart_type: 'line',
                    chart_options: {
                        title: 'SAN READ LATENCY',
                        labels: labels,
                        errorBars: iu,
                        axes: {
                            y: {
                                valueFormatter: formatters.latency,
                                axisLabelFormatter: formatters.latency,
                            },
                            x: {
                                drawGrid: false
                            }
                        }
                    }
                }),
                new ChartView({
                    model: new PartialChartData({}, {parent: io_model, column_indices: [0, 31, 32, 33, 34, 35, 36]}),
                    annotations: annotations,
                    key: '{{ monitored_entity.get_class_name }}_6',
                    chart_type: 'line',
                    chart_options: {
                        title: 'SAN WRITE LATENCY',
                        labels: labels,
                        errorBars: iu,
                        axes: {
                            y: {
                                valueFormatter: formatters.latency,
                                axisLabelFormatter: formatters.latency,
                            },
                            x: {
                                drawGrid: false
                            }
                        }
                    }
                })
            ];

            // NAS charts
            var nas_model = new ChartData({}, {
                url: '{% url "entity_data" serial nas_entity.id "nas_io_by_size" %}',
                chart_start: chart_start,
                chart_end: chart_end,
                polling_interval: {{ nas_entity.polling_interval }}
            });
            {% if nas_entity_v2 %}
            var nas_model_v2 = new ChartData({}, {
                url: '{% url "entity_data" serial nas_entity_v2.id "nas_io_by_size_v2" %}',
                chart_start: chart_start,
                chart_end: chart_end,
                polling_interval: {{ nas_entity_v2.polling_interval }}
            });
            {% endif %}
            
            const nas_labels    = ['timestamp', '&lt; 4KiB', '&lt; 8KiB', '&lt; 32KiB', '&lt; 64KiB', '&lt; 128KiB', '&ge; 128KiB'];
            const nas_labels_v2 = ['timestamp', '&lt; 4KiB', '&lt; 8KiB', '&lt; 32KiB', '&lt; 64KiB', '&lt; 128KiB', '&lt; 256KiB', '&lt; 512KiB', '&lt; 1MiB', '&ge; 1MiB'];

            var chartConfigurations = [
                { 
                    type: 'READ_OPS', 
                    title: 'NAS READS PER SECOND'
                },
                { 
                    type: 'WRITE_OPS', 
                    title: 'NAS WRITES PER SECOND'
                },
                { 
                    type: 'READ_BYTES', 
                    title: 'NAS READ THROUGHPUT',
                    additionalOptions: {
                        labelsKMG2: true,
                        axes: {
                            y: {
                                valueFormatter: formatters.compact_throughput,
                                axisLabelFormatter: formatters.throughput
                            },
                            x: { drawGrid: false }
                        }
                    }
                },
                { 
                    type: 'WRITE_BYTES', 
                    title: 'NAS WRITE THROUGHPUT',
                    additionalOptions: {
                        labelsKMG2: true,
                        axes: {
                            y: {
                                valueFormatter: formatters.compact_throughput,
                                axisLabelFormatter: formatters.throughput
                            },
                            x: { drawGrid: false }
                        }
                    }
                },
                { 
                    type: 'READ_LATENCY', 
                    title: 'NAS READ LATENCY',
                    additionalOptions: {
                        axes: {
                            y: {
                                valueFormatter: formatters.compact_latency,
                                axisLabelFormatter: formatters.latency
                            },
                            x: { drawGrid: false }
                        }
                    }
                },
                {
                    type: 'WRITE_LATENCY', 
                    title: 'NAS WRITE LATENCY',
                    additionalOptions: {
                        axes: {
                            y: {
                                valueFormatter: formatters.compact_latency,
                                axisLabelFormatter: formatters.latency
                            },
                            x: { drawGrid: false }
                        }
                    }
                }
            ];

            // Generate charts dynamically for nas_entity and nas_entity_v2
            chartConfigurations.forEach(config => {
                // Add "legacy" to v1 title only if both v1 and v2 exist
                const v1Title = config.title {% if system.has_io_by_size_v2 %}+ " (LEGACY)"{% endif %};
                const v2Title = config.title;
                // Add chart for nas_entity
                {% if nas_v1_metrics_exist %}
                    // Has v1 data - show legacy charts
                    const currChart = createChartView(
                        new NASIOBySizeChartData({ parent: nas_model, type: config.type }),
                        annotations,
                        `{{ nas_entity.get_class_name }}_${config.type}`,
                        nas_labels,
                        `<div class="chart-switcher">${v1Title}<div>${v2Title}</div></div>`,
                        config.additionalOptions || {}
                    );
                    right_charts.push(currChart);
                    v1Charts.push(currChart);
                {% endif %}
                
                // Add v2 chart for nas_entity_v2 if it exists
                {% if system.has_io_by_size_v2 or not nas_v1_metrics_exist %}
                    // Has only v2, or no data in v1 - show v2 charts
                    const currV2Chart = createChartView(
                        new NASIOBySizeChartDataV2({ parent: nas_model_v2, type: config.type }),
                        annotations,
                        `{{ nas_entity_v2.get_class_name }}_${config.type}`,
                        nas_labels_v2,
                        `<div class="chart-switcher">${v2Title}<div>${v1Title}</div></div>`,
                        config.additionalOptions || {}
                    );
                    currV2Chart.calcHeight = function() {
                        // Make same height as left charts.
                        return left_charts[0].calcHeight();
                    },
                    right_charts.push(currV2Chart);
                    v2Charts.push(currV2Chart);
                {% endif %}
            });

            MainApp.start({
                left_charts: left_charts,
                right_charts: right_charts,
                left_name_prefix: 'SAN ',
                right_name_prefix: 'NAS ',
                id: 'system-io-{{ serial }}'
            });

            v2Charts.forEach(function(item) {
                const legendElement = $(item.el).find('.legend');
                
                if (legendElement.length > 0) {
                    legendElement.addClass('two-cols-legend'); 
                }
            });

            if (v1Charts.length && v2Charts.length) {
                // Both v1 and v2 charts visible - set chart switcher
                set_chart_switcher(v2Charts, v1Charts);
            } else {
                // Only one of v1/v2 charts visible - no chart switcher
                $('.chart-switcher').addClass('disabled');
            }
        });

        function exportNasData(nasEntityId, nasEntityV2Id, chartName) {
            if (v1Charts.length && v2Charts.length) {
                // Check if v2 charts selected
                if ($(`#${v2Charts[0].options.key}`).is(':visible')) {
                    export_data(nasEntityV2Id, chartName);
                } else {
                    export_data(nasEntityId, `${chartName} (legacy)`);
                }
            } else if (v2Charts.length) {
                // Only v2 charts
                export_data(nasEntityV2Id, chartName);
            } else {
                // Only v1 charts
                export_data(nasEntityId, chartName);
            }
        }
    </script>
{% endblock %}