{% extends "base_general_charts.html" %}

{% block page_title %}{{ system|upper }} - Target FC Ports - InfiniMetrics{% endblock %}

{% block header_title %}{{ system|upper }} – Target FC Ports{% endblock %}

{% block breadcrumbs %}
    <span>Target FC Ports</span>
{% endblock %}

{% block top_menu_items %}
    <li><a href="{{ ports.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 }} Target FC Ports'); return false;">Export Data</a></li>
{% endblock %}

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

{% block content %}
    {{ block.super }}
    <script>

        FCPortChartView = ChartView.extend({
            calcHeight: function() {
                return 250;
            },
        });

        $('#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"
        ]);

        $(document).ready(function() {
            var labels = ['timestamp', {% for p in ports %}"{{ p }}",{% endfor %}];
            var annotations = new AnnotationFormatter({
                collection: new ChartAnnotations([], {url: '{% url "annotations" serial %}'})
            });
            var charts = [
                new FCPortChartView({
                    model: new ChartData({}, {
                        url: '{% url "aggregate_entities_data" serial entity_ids "fc_port_ops" %}',
                        chart_start: chart_start,
                        chart_end: chart_end,
                        polling_interval: 10
                    }),
                    annotations: annotations,
                    chart_type_dynamic: true,
                    chart_options: {
                        title: 'FC PORT IOPS',
                        errorBars: false,
                        labels: labels,
                        colors: colors
                    }
                }),
                new FCPortChartView({
                    model: new ChartData({}, {
                        url: '{% url "aggregate_entities_data" serial entity_ids "fc_port_throughput" %}',
                        chart_start: chart_start,
                        chart_end: chart_end,
                        polling_interval: 10
                    }),
                    annotations: annotations,
                    chart_type_dynamic: true,
                    chart_options: {
                        title: 'FC PORT THROUGHPUT',
                        errorBars: false,
                        labels: labels,
                        colors: colors,
                        labelsKMG2: true,
                        axes: {
                            y: {
                                valueFormatter: formatters.throughput,
                                axisLabelFormatter: formatters.throughput
                            },
                            x: {
                                drawGrid: false
                            }
                        }
                    }
                }),
                new FCPortChartView({
                    model: new ChartData({}, {
                        url: '{% url "aggregate_entities_data" serial entity_ids "fc_port_latency" %}',
                        chart_start: chart_start,
                        chart_end: chart_end,
                        polling_interval: 10
                    }),
                    annotations: annotations,
                    chart_type: 'line',
                    chart_options: {
                        title: 'FC PORT LATENCY',
                        errorBars: false,
                        labels: labels,
                        colors: colors,
                        axes: {
                            y: {
                                valueFormatter: formatters.latency,
                                axisLabelFormatter: formatters.latency,
                            },
                            x: {
                                drawGrid: false
                            }
                        }
                    }
                }),
                new FCPortChartView({
                    model: new ChartData({}, {
                        url: '{% url "aggregate_entities_data" serial entity_ids "fc_port_error_percent" %}',
                        chart_start: chart_start,
                        chart_end: chart_end,
                        polling_interval: 10
                    }),
                    annotations: annotations,
                    chart_type: 'line',
                    chart_options: {
                        title: 'FC PORT ERROR PERCENTAGE',
                        errorBars: false,
                        labels: labels,
                        colors: colors,
                    }
                })
            ];
            MainApp.start({charts: charts});
        });
    </script>
{% endblock %}