{% extends "entities_with_averages.html" %}

{% block entities_table_url %}/infinibox/{{ system.serial }}/entities/monitorednasclienttotals/{% endblock %}

{% block entity_status_filter %}
{% endblock %}

{% block navbar_contents %}
<li><a class="menu-api"  href="{% url "system-detail" system.serial %}" target="_blank">View in API Browser</a></li>
<li><a class="menu-view" onclick="export_top_tables('{{ model_name }}', '{{ parent_col }}');return false;">Export data</a></li>
{% endblock %}

{% block breadcrumbs %}
    {{ block.super }}
    {% if not system.collect_nas_clients %}
        <span style="font-size:12px;">
            <i class="icon-attention" style="color: #ff8031"></i> NAS client performance monitoring is disabled. It can be enabled in the Settings tab.
        </span>
    {% endif %}
{% 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>
                </th>
            {% endfor %}
            <th data-field="avg_ops" width="8%">Average IOPS <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="10%">Average Latency <div class="sort"></div></th>
        </tr>
    </thead>
    <tbody>
    </tbody>

    <script type="text/template" id="row-template">
        <tr data-id="<%- entity.id %>">
            <td class="wrappable checkbox-cell" sorttable_customkey="<%- entity.name.split('.').map(p => p.padStart(3,'0')).join('-') %>">
                <div class="checkbox"><input type="checkbox" id="select_<%= entity.id %>"><label for="select_<%= entity.id %>"></label></div>
                <a id="client-ip-<%= entity.id %>" href="<%= entity.id %>/io/" onclick="drilldown($(this)); return false;"><%- entity.name %></a>
            </td>
            <td>
                <button id="edit-btn-<%- entity.id %>" class="button-transparent" onclick="editItem(<%- entity.id %>)"><i class="icon-pencil" style="color: black;"></i></button>
                <button id="save-btn-<%- entity.id %>" style="display:none;" class="button-transparent" onclick="saveItem(<%- entity.id %>)"><i class="icon-ok" style="color: #39b54a;"></i></button>
                <button id="cancel-btn-<%- entity.id %>" style="display:none;" class="button-transparent" onclick="cancelEdit(<%- entity.id %>)"><i class="icon-cancel" style="color: #e74c3c;"></i></button>
                <div id="desc-text-<%- entity.id %>" style="display: inline; white-space: normal;"><%- entity.description %></div>
                <input type="text" id="edit-input-<%- entity.id %>" maxlength="250" value="<%- entity.description %>" style="display:none; width:fit-content;" />
            </td>
            <td>
                <span> 
                    <button id="resolve-btn-<%- entity.id %>" class="button-transparent" onclick="resolveName(<%- entity.id %>)"><i class="icon-arrows-cw" style="color: black;"></i></button>
                </span>
                <span id="client-name-<%- entity.id %>"><%- entity.client_name %></span>
            </td>
            <% let lastSeen = entity.last_seen; %>
            <td><%- lastSeen ? moment.utc(lastSeen, moment.defaultFormat).fromNow() : "Never" %></td>
            <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>
        </tr>
    </script>
    
<script>
    function aggregate() {
        var ids = get_selected_ids();
        if (ids.length > 32) {
            show_error('You have chosen ' + ids.length + ' clients while aggregation<br>is limited to a maximum of 32 hosts.');
        }
        else {
            window.location = '/infinibox/{{ system.serial }}/nas_client/' + ids.join(',') + '/io/?range=24';
        }
    }

    function editItem(itemId) {
        loading = true;  // Stop refreshing table when editing
        // Hide the span text and show the input field
        $(`#desc-text-${itemId}`).hide();
        $(`#edit-input-${itemId}`).show().focus().select();

        // Hide "Edit" button, show "Save" & "Cancel" buttons
        $(`#edit-btn-${itemId}`).hide();
        $(`#save-btn-${itemId}`).show();
        $(`#cancel-btn-${itemId}`).show();

        // Listen for Enter key to save
        $(`#edit-input-${itemId}`).keypress(function(event) {
            if (event.which === 13) { // Enter key
                saveItem(itemId);
            }
        });
    }

    function cancelEdit(itemId) {
        let textElement = $(`#desc-text-${itemId}`);
        let inputElement = $(`#edit-input-${itemId}`);

        // Reset input field to original value
        inputElement.val(textElement.text().trim());

        // Hide input, show text again
        inputElement.hide();
        textElement.show();

        // Restore button visibility
        $(`#edit-btn-${itemId}`).show();
        $(`#save-btn-${itemId}`).hide();
        $(`#cancel-btn-${itemId}`).hide();
        loading = false;  // Resume refreshing table
    }

    function saveItem(itemId) {
        $.ajax({
            url: `${itemId}/set_description/`,
            method: "POST",
            data: {
                description: $("#edit-input-" + itemId).val(),
            },
            success: function(response) {
                $(`#desc-text-${itemId}`).text(response.newDescription);
                $(`#desc-text-${itemId}`).show();
                $(`#edit-input-${itemId}`).hide();
                $(`#edit-btn-${itemId}`).show();
                $(`#save-btn-${itemId}`).hide();
                $(`#cancel-btn-${itemId}`).hide();
                loading = false;  // Resume refreshing table
            },
            error: function(response) {
                show_error(`Error in request: ${response.responseJSON.error}`);
            }
        });
    }

    function resolveName(itemId) {
        $.ajax({
            url: `${itemId}/resolve_name/`,
            method: "POST",
            data: {
                ip: $(`#client-ip-${itemId}`).text(),
            },
            success: function(response) {
                $(`#client-name-${itemId}`).text(response.name);
            },
            error: function(response) {
                if (response.status == 404) {
                    $(`#client-name-${itemId}`).empty();
                }
                show_error(response.responseJSON.error);
            }
        });
    }
</script>
{% endblock %}