{% extends "base_charts.html" %}

{% block breadcrumbs %}
    <span><a href="../..">Pools</a></span>
    <span>
        {{ monitored_entity }}
        {% if monitored_entity.get_additional_info %}
            <span id="entity-additional-info">{{ monitored_entity.get_additional_info }}</span>
        {% endif %}
    </span>
    
{% endblock %}

{% block nav_dropdown %}
    {% include "entity_autocomplete.html" %}
    {% include "charts_menu.html" %}
{% endblock %}

{% block top_menu_items %}
    {% if monitored_entity.enabled %}
        <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:{{ monitored_entity.id }}{% if not is_vvol %},{{ nas_entity.id }} {% endif %}" target="_blank">View in API Browser</a></li>
    {% endif %}
    <li><a href="#" onclick="export_data({{ monitored_entity.id }}, '{{ system.name }} {{ monitored_entity.name }} SAN totals'); return false;">Export SAN Data</a></li>
    {% if not is_vvol %}
    <li><a href="#" onclick="export_data({{ nas_entity.id }}, '{{ system.name }} {{ nas_entity.name }} NAS totals'); return false;">Export NAS Data</a></li>
    {% endif %}
{% endblock %}

{% block content %}
    {{ block.super }}

    <script>
        {% if not is_vvol %}
            function build_dynamic_context_menu_items(chart_id) {
                if (chart_id.startsWith('SAN')) {
                    return {
                        volumes: {
                            name: 'View volumes in pool',
                            callback: function() {
                                window.location.href = '{% url "volumes" system.serial %}?parent={{ monitored_entity.name }}';
                            }
                        }
                    }
                }
                else {
                    return {
                        filesystems: {
                            name: 'View filesystems in pool',
                            callback: function() {
                                window.location.href = '{% url "filesystems" system.serial %}?parent={{ monitored_entity.name }}';
                            }
                        }
                    }
                }
            }
        {% endif %}


        $(document).ready(function() {
            let cache_funcs = {% include "cache_funcs.js" %}

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


            // SAN charts
            let io_model = new ChartData({}, {
                url: '{% url "entity_data" serial monitored_entity_id "io" %}',
                chart_start: chart_start,
                chart_end: chart_end,
                polling_interval: {{ monitored_entity.polling_interval }}
            });
            
            var san_io_model = new ChartData({}, {
                url: '{% url "entity_data" serial san_io_entity.id "io" %}',
                chart_start: chart_start,
                chart_end: chart_end,
                polling_interval: {{ monitored_entity.polling_interval }}
            });

            let left_charts = {% include 'io_charts.js' %};

            // SAN Cache charts
            let san_cache_hit_ratio_chart = cache_funcs.getSummedCacheChart(io_model, 'READ CACHE HIT RATIO', 17, 18)
            left_charts.push(san_cache_hit_ratio_chart);
            {% if system.is_internal_user %}
                let san_detailed_hit_ratio_chart = cache_funcs.getStackedCacheChart(io_model, 'READ CACHE HIT RATIO BREAKDOWN', 17, 18);
                left_charts.push(san_detailed_hit_ratio_chart)
            {% endif %}

            // Prepend "SAN" to titles
            _.each(left_charts, function(chart) {
                if (chart.options.chart_options.title.indexOf('chart-switcher') == -1) {
                    chart.options.chart_options.title = 'SAN ' + chart.options.chart_options.title;
                }
            });

            // NAS charts
            let nas_model = new ChartData({}, {
                url: '{% url "entity_data" serial nas_entity.id "nas" %}',
                chart_start: chart_start,
                chart_end: chart_end,
                polling_interval: {{ nas_entity.polling_interval }}
            });

            right_charts = {% include "nas_charts.js" %}

            // NAS Cache charts
            let nas_cache_hit_ratio_chart = cache_funcs.getSummedCacheChart(nas_model, 'NAS READ CACHE HIT RATIO', 10, 11)
            right_charts.push(nas_cache_hit_ratio_chart);
            {% if system.is_internal_user %}
                let nas_detailed_hit_ratio_chart = cache_funcs.getStackedCacheChart(nas_model, 'NAS READ CACHE HIT RATIO BREAKDOWN', 10, 11);
                right_charts.push(nas_detailed_hit_ratio_chart)
            {% endif %}

            // Make all charts of same height
            ChartView.prototype.calcHeight = function() {
                return 212;
            }
            
            MainApp.start({
                left_charts: left_charts,
                right_charts: right_charts,
                left_name_prefix: 'SAN ',
                right_name_prefix: 'NAS ',
                id: 'system-io-{{ serial }}'
            });

            // SAN_LATENCY is always chart 2 in io_charts.js
            // SAN_INTERNAL_VS_TOTAL_LATENCY is always chart 3 in io_charts.js
            set_chart_switcher([left_charts[2]], [left_charts[3]]);
        });
    </script>
{% endblock %}