{% extends "system.html" %}

{% load humanize static compress %}

{% block extra_head %}
    {{ block.super }}
    {% compress css %}
        <link type="text/css" href='{% static "jquery-ui-timepicker-addon/dist/jquery-ui-timepicker-addon.css" %}' rel="stylesheet">
        <link type="text/css" href='{% static "css/datepicker.css" %}' rel="stylesheet">
    {% endcompress %}
    <script>
        var serial = '{{ serial }}';  // Used by state_controller.js
    </script>
    {% compress js %}
        <script src='{% static "moment.js" %}'></script>
        <script src='{% static "jquery-ui-timepicker-addon.js" %}'></script>
        <script src='{% static "js/lib/jquery.plugin.js" %}'></script>
        <script src='{% static "js/lib/jquery.timeentry.js" %}'></script>
        <script src='{% static "js/entities_with_averages.js" %}'></script>
        <script src='{% static "js/state_controller.js" %}'></script>
    {% endcompress %}
{% endblock %}

{% block navbar_contents %}
{{ block.super }}
 <li><a class="menu-view" onclick="export_top_tables('{{ model_name }}', '{{ parent_col }}');return false;">Export data</a></li>
{% endblock %}

{% block toolbar %}
    <div id="query-toolbar">
        {% block entity_status_filter %}
            {% include "entity_status_filter.html" %}
        {% endblock %}
        {% include "system_search.html" %}
        <div class="form-table">
            <select id="chart-range">
                <option value="1">Last hour</option>
                <option value="3">Last 3 hours</option>
                <option value="8">Last 8 hours</option>
                <option value="24">Last day</option>
                <option value="72">3 days</option>
                <option value="168">7 days</option>
                <option value="720">1 month</option>
                <option value="2184">3 months</option>
                <option value="4368">6 months</option>
                <option value="8760">1 year</option>
                <option value="custom">Custom</option>
            </select>
            <div class="form-field" style="display: inline-block;">
                <input id="start" name="start" type="text" autocomplete="off" readonly class="datepicker">&mdash;
                <input id="end" name="end" type="text" autocomplete="off" readonly class="datepicker">
            </div>
        </div>
    </div>
    <div id="system-toolbar">
        {% block toolbar_buttons %}
            <button class="button multi-selection-needed" type="button" onclick="aggregate();" disabled><i class="icon-chart-area"></i> <span>Aggregate</span></button>
        {% endblock %}
    </div>

{% endblock %}

{% block entities_table %}

    <thead>
        <tr>
            {% for data_field, col_info in model_class.entity_level_cols_for_table.items %}
                <th data-field="{{ data_field }}"
                    {% if col_info.width %} width="{{ col_info.width }}"{% endif %}
                    {% if data_field == 'name' %}
                        class="always-visible checkbox-cell sorting_asc"
                    {% endif %}>
                    {{ col_info.text }} <div class="sort"></div>
                    {% if parent_col and data_field == 'name' %}
                        <!-- always put parent after name -->
                        <th width="24%" id="th-parent" data-field="parent">{{ parent_col }} <div class="sort"></div></th>
                    {% endif %}
                </th>
            {% endfor %}
            {% block entities_table_fields %}
                <th data-field="avg_ops" width="12%">Average {% if tab == 'Filesystems' %}OPS{% else %}IOPS{% endif %} <div class="sort"></div></th>
                <th data-field="avg_bytes" width="12%">Average Throughput <div class="sort"></div></th>
                <th data-field="avg_latency" width="12%">Average Latency <div class="sort"></div></th>
            {% endblock %}
        </tr>
    </thead>
    <tbody>
    </tbody>

    <script type="text/template" id="row-template">
        <tr data-id="<%- entity.id %>">
            <td class="wrappable checkbox-cell">
                <div class="checkbox"><input type="checkbox" id="select_<%= entity.id %>"><label for="select_<%= entity.id %>"></label></div>
                <a href="<%= entity.id %>/io/" onclick="drilldown($(this)); return false;"><%- entity.name %></a>
                <%= entityStatusBadge(entity) %>
            </td>
            {% if parent_col %}
                <td class="wrappable"><%- entity.parent || '--' %></td>
            {% endif %}
            {% for data_field in model_class.entity_level_cols_for_table %}
                {% if data_field != 'name' %}
                    <td><%- entity.{{ data_field }} %></td>
                {% endif %}
            {% endfor %}
            {% block entities_table_values %}
                <td><%- numfmt(entity.avg_ops) %></td>
                <td><%- numfmt(entity.avg_bytes) %> <span class="muted">MiB/S</span></td>
                <td><%- numfmt(entity.avg_latency) %> <span class="muted">ms</span></td>
            {% endblock %}
        </tr>
    </script>

    {% if parent_col %}
        <script>
            var parent_names = [ {% for name in parent_names %}'{{ name|escapejs }}', {% endfor %}];
        </script>
    {% endif %}

{% endblock %}