{% extends "base_general_charts.html" %}

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

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

{% block breadcrumbs %}
    <span>{{ page_name }}</span>
{% endblock %}

{% block top_menu_items %}
    <li><a href="{{ ips.0.get_gui_url }}" target="_blank">Open in System GUI</a></li>
    <li><a href="{% url 'monitored-entity-list' system.serial %}?id=in:{{ entity_ids }}" target="_blank">View in API Browser</a></li>
    <li><a href="#" onclick="export_data('{{ entity_ids }}', '{{ system.name }} {{ page_name }}'); return false;">Export Data</a></li>
{% endblock %}

{% block nav_dropdown %}
    {{ block.super }}
    {% if network_spaces|length > 1 %}
        <select id="network-space" multiple="multiple">
            {% for network_space in network_spaces %}
                <option value="{{ network_space.1 }}"
                        {% if network_space.1 in network_space_ids %}selected="selected"{% endif %}>
                    {{ network_space.0 }}
                </option>
            {% endfor %}
        </select>
    {% else %}
        <span id="network-space-name">{{ network_spaces.0.0 }}</span>
    {% endif %}
{% endblock %}

{% block content %}
    {{ block.super }}
    <style>
        .legend {
            width: 520px;
        }
        .legend-item {
            display: inline-block;
            width: 160px;
            margin-right: 20px;
        }
        .legend-item:has(.is-last-in-row) {
            margin-right: 0;
        }
        .legend-item:nth-last-child(2):not(.toggle-group),
        .legend-item:nth-last-child(3):not(.toggle-group) {
            /* Remove the bottom-border of the bottom legend items (last one is being done in charts.css) */
            border: none;
        }
        #network-space-name {
            color: #262F3B;
            line-height: 36px;
        }

        button.ui-selectmenu-button.ui-button,
        button.ui-selectmenu-button.ui-button:hover,
        button.ui-selectmenu-button.ui-button:focus,
        button.ui-selectmenu-button.ui-button:active {
            font-weight: unset !important;
            padding: unset !important;
            color: unset;
            background: unset;
        }

        button.ui-selectmenu-button.ui-button:hover,
        button.ui-selectmenu-button.ui-button:focus,
        button.ui-selectmenu-button.ui-button:active {
            border-top: unset;
            border-right: unset;
            border-left: unset;
            margin-bottom: -1px;
        }

        ul.ui-multiselect-checkboxes > li > label.ui-state-hover {
            border: 1px solid #cccccc;
        }

        input[type="checkbox"] {
            accent-color: #520FAE;
        }

        .ui-multiselect-menu label{
            line-height: 36px;
        }

        .ui-multiselect-menu > ul {
            padding: 0px;
        }
    </style>

    <script>
        function getSelectedNames() {
            let selected = [];
            let selectedOptions = $("#network-space option:selected");
            $.each(selectedOptions, function (K, V) {
                selected.push(truncateString(V.text, 60 / selectedOptions.length));  // 60 letters in total for all NS names
            });
            return selected.join(", ");
        }

        // Navigation between network spaces
        $('#network-space').multiselect({linkInfo: {open: {icon: '<span class="ui-selectmenu-icon ui-icon ui-icon-triangle-1-s"></span>'}},
                                         header: false, buttonWidth: 500,
                                         noneSelectedText:'Select network spaces', selectedText: getSelectedNames(),

                                         click: function(e){
                                            if ($(this).multiselect("widget").find("input:checked").length > 4){
                                                $("#network-space").multiselect("buttonMessage", "Select up to 4 network spaces");
                                                return false;
                                            }
        }});

        $("#network-space").on("multiselectclose", function(){
            var selected = [];
             $.each($("#network-space option:selected"), function (K, V) {
                selected.push(V.value);
            });
            {% comment %}
                // url part is rendered in django before JS can run, and before the user selection.
                // So I have to put a placeholder and replace it later.
                // 9999999999 is a placeholder.
            {% endcomment %}
            var url = "{% url 'all_target_ips' system.serial service '9999999999' %}"  
            selected = selected.join();
            url = url.replace('9999999999', selected);
            if (selected && url != window.location.pathname){  // only if select was changed and at least 1 selected
                window.location.href = url;
            }
        });


        // Force the dropdown selection if network spaces are changed.
        $('#chart-type option:contains({{ page_name }})').attr('selected', 'selected');

        // Force the system tab to be selected
        $('#sidebar-system').addClass('active');

        var colors = brightenColors([
                "#F0F000", "#1CE6FF", "#FF34FF", "#FF4A46", "#008941", "#006FA6", "#A30059", "#61615A",
                "#FFDBE5", "#7A4900", "#0000A6", "#63FFAC", "#B79762", "#004D43", "#8FB0FF", "#997D87",
                "#0AA6D8", "#809693", "#D16100", "#1B4400", "#4FC601", "#3B5DFF", "#4A3B53", "#FF2F80",
                "#FF9F40", "#39FF14", "#DC2A76", "#FFF200", "#FF4E55", "#0082A8", "#FF5DA7", "#00FF8C",
                "#FFC400", "#00B917", "#FF6E41", "#FF1A59", "#39FF8F", "#0060CD", "#FF00F6", "#FF7A5B",
                "#00C2A0", "#FFAA92", "#FFAE42", "#00B9FF", "#E3C800", "#8F1402", "#006A66", "#F97306",
                "#8CC665", "#FF8A9A", "#9A0ECD", "#4B5D16", "#2A7B19"
            ]);

        $(document).ready(function() {
            $(".ui-multiselect").addClass('ui-selectmenu-button ui-button');
            $(".ui-multiselect-menu").addClass('ui-menu');

            var labels = ['timestamp', {% for ns_name, ips_list in ns_to_ips.items %}{% for ip in ips_list %}'<div data-group="{{ns_name}}">{{ip}}</div>', {% endfor %}{% endfor %}];
            var groups = [{% for ns_name in ns_to_ips %}"{{ns_name}}", {% endfor %}]
            TargetIPChartView = ChartView.extend({
                groups: groups,
                legend_items_in_row: 3,  // 3 ips in each row
                
                calcHeight: function() {
                    return Math.max($(".legend").height(), 250);
                },
        });
            var annotations = new AnnotationFormatter({
                collection: new ChartAnnotations([], {url: '{% url "annotations" serial %}'})
            });
            var charts = [
                new TargetIPChartView({
                    model: new ChartData({}, {
                        url: '{% url "aggregate_entities_data" serial entity_ids "target_ip_ops" %}',
                        chart_start: chart_start,
                        chart_end: chart_end,
                        polling_interval: 10
                    }),
                    annotations: annotations,
                    chart_type_dynamic: true,
                    chart_options: {
                        title: 'TARGET IP IOPS',
                        errorBars: false,
                        labels: labels,
                        colors: colors
                    }
                }),
                new TargetIPChartView({
                    model: new ChartData({}, {
                        url: '{% url "aggregate_entities_data" serial entity_ids "target_ip_throughput" %}',
                        chart_start: chart_start,
                        chart_end: chart_end,
                        polling_interval: 10
                    }),
                    annotations: annotations,
                    chart_type_dynamic: true,
                    chart_options: {
                        title: 'TARGET IP THROUGHPUT',
                        errorBars: false,
                        labels: labels,
                        colors: colors,
                        labelsKMG2: true,
                        axes: {
                            y: {
                                valueFormatter: formatters.compact_throughput,
                                axisLabelFormatter: formatters.throughput
                            },
                            x: {
                                drawGrid: false
                            }
                        }
                    }
                }),
                new TargetIPChartView({
                    model: new ChartData({}, {
                        url: '{% url "aggregate_entities_data" serial entity_ids "target_ip_latency" %}',
                        chart_start: chart_start,
                        chart_end: chart_end,
                        polling_interval: 10
                    }),
                    annotations: annotations,
                    chart_type: 'line',
                    chart_options: {
                        title: 'TARGET IP LATENCY',
                        errorBars: false,
                        labels: labels,
                        colors: colors,
                        axes: {
                            y: {
                                valueFormatter: formatters.latency,
                                axisLabelFormatter: formatters.latency,
                            },
                            x: {
                                drawGrid: false
                            }
                        }
                    }
                }),
            ];
            MainApp.start({charts: charts});
        });
    </script>
{% endblock %}