{% extends "system.html" %}

{% load compress static %}

{% block extra_head %}
    {{ block.super }}
    {% compress js %}
        <script src='{% static "js/edit_system.js" %}'></script>
        <script src='{% static "js/data_collection_settings.js" %}'></script>
    {% endcompress %}
    {% compress css %}
        <link type="text/css" href='{% static "css/edit_system.css" %}' rel="stylesheet">
        <link type="text/css" href='{% static "css/lib/horizontal_spinner.css" %}' rel="stylesheet">
        <link type="text/css" href='{% static "css/data_collection_settings.css" %}' rel="stylesheet">
    {% endcompress %}
{% endblock %}

{% block main %}

    <div class="blocks">

        <h2>DATABASE SIZE</h2>

        <div class="block disk-usage-block">
            <div id="disk-usage-wrapper">
                <canvas id="disk-usage-canvas" width="185" height="185"></canvas>
                <div>{{ used_percent }}%</div>
            </div>
            <div>
                <div class="pill" style="background: #bcc6d3;"></div>
                <b>{{ ch_disk_GB|floatformat:2 }} GB</b>
                <br>
                Total disk space
            </div>
            <div>
                <div class="pill" style="background: #ffd86b;"></div>
                <b>{{ db_total_GB|floatformat:2 }} GB <small>({{ used_percent }}%)</small></b>
                <br>
                Used disk space
            </div>
            <div>
                <div class="pill" style="background: #871BFF;"></div>
                <b>{{ db_system_GB|floatformat:2 }} GB</b>
                <br>
                Used by this system
            </div>
            <script>
                var canvas = document.getElementById('disk-usage-canvas');
                var context = canvas.getContext('2d');
                context.lineWidth = 18;
                var x = canvas.width / 2;
                var y = canvas.height / 2;
                var radius = (canvas.width - context.lineWidth) / 2;
                var startAngle = 1.5 * Math.PI;
                // Whole circle
                context.beginPath();
                context.strokeStyle = '#bcc6d3';
                context.arc(x, y, radius, 0, 2 * Math.PI);
                context.stroke();
                // Total used
                context.beginPath();
                context.strokeStyle = '#ffd86b';
                var endAngle = startAngle + 2 * Math.PI * Math.max(0.5, {{ used_percent }}) / 100;
                context.arc(x, y, radius, startAngle, endAngle);
                context.stroke();
                // Own used
                context.beginPath();
                context.strokeStyle = '#871BFF';
                var endAngle = startAngle + 2 * Math.PI * Math.max(0.5, {% widthratio db_system_size ch_disk_size 100 %}) / 100;
                context.arc(x, y, radius, startAngle, endAngle);
                context.stroke();
            </script>

        </div>

        <h2>
            CONNECTION SETTINGS
            {% if request.GET.updated %}
                <span id="updated"><i class="icon-ok">Updated</i></span>
            {% endif %}
        </h2>

        <div class="block">
            <form id="settings" method="post" action="." autocomplete="off">
                <div class="form-body">
                    {% if not request.POST and system.status == 'UNREACHABLE' %}
                        <div><ul class="errorlist nonfield"><li>System is unreachable - the URL may be wrong.</li></ul></div>
                    {% endif %}
                    {% if not request.POST and system.status == 'AUTH FAILED' %}
                        <div><ul class="errorlist nonfield"><li>Cannot authenticate - username or password may be wrong.</li></ul></div>
                    {% endif %}
                    {% with form=system_form %}
                        {% include "render_form.html" %}
                    {% endwith %}
                    <div id="form-footer" class="form-left-bottom grey-text">
                        <div class="grey-icon ui-icon ui-icon-info"></div>
                        Enter a user that has a READ_ONLY role
                    </div>
                    <button type="submit" class="button button-green" name="update_system">Update</button>
                </div>

                <script>
                    // If there are errors in the form, hide the form footer.
                    if ($(".errorlist.nonfield").length > 0){
                        $("#form-footer")[0].style.visibility = 'hidden';   
                    };
                </script>
            </form>
        </div>

        <h2 id="refresh">
            REESTABLISH CONNECTION
            {% if messages %}
                {% for message in messages %}
                    {% if message.level == DEFAULT_MESSAGE_LEVELS.SUCCESS %}
                        <span id="updated"><i class="icon-ok">{{ message }}</i></span>
                    {% endif %}
                {% endfor %}
            {% endif %}
        </h2>

        <div class="block">
            <p>
                Reestablish the connection with the monitored machine and update the configuration.
                <br>
                <span class="muted-note">Note: This process may take a few minutes to complete.</span>
            </p>
            {% if messages %}
                <div class="error-messages">
                    {% for message in messages %}
                        {% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}
                            <span{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
                        {% endif %}
                    {% endfor %}
                </div>
            {% endif %}
            <form id="refresh-form" method="post" action="{% url 'refresh_system' serial %}">
                {% csrf_token %}
                <span id="reconnect-spinner" class="lds-ellipsis"><span></span><span></span><span></span><span></span></span>
                <button id="refresh-button" type="submit" class="button button-green">Reconnect</button>
            </form>
        </div>

        <h2>COLLECT LOGS</h2>

        <div class="block">
            <p>
                Generate an archive of log files for sending to the
                INFINIDAT support team.
                <br>
                <span class="muted-note">Note: This process may take a few minutes to complete.</span>
            </p>
            <a onclick="collect_logs({{ system.pk }});" class="button button-green">Download</a>
        </div>

        {% if system.has_nas_clients_collectors %}
            <h2>
                NAS CLIENT PERFORMANCE MONITORING
                <span class="experimental">EXPERIMENTAL</span>
            </h2>

            <div class="block">
                <p>
                    This experimental feature enables performance monitoring for NAS clients.
                    <br>
                    <span class="muted-note">
                        {% if is_power_user %}
                            Notes: Enabling this feature might result in a drastic increase in the local database size.<br>
                            Refer to the documentation for more details.<br>
                            Allow up to a minute for this feature state to change, during which all monitoring is paused.
                        {% else %}
                            Only the IMX_ADMIN user can enable or disable this feature.
                        {% endif %}
                    </span>
                </p>
                <span id="monitor-nas-clients-spinner" class="lds-ellipsis"><span></span><span></span><span></span><span></span></span>
                <!-- data-status is the current collection status -->
                <a id="monitor-nas-clients-btn" class="button button-green" data-status='{{ system.collect_nas_clients|yesno:'true,false' }}' onclick="monitorNasClients(); return false;"{% if not is_power_user %} disabled {% endif %}>{{ system.collect_nas_clients|yesno:'Disable,Enable' }}</a>
            </div>
        {% endif %}

        {% if system.has_collection_settings %}
            <h2>
                DATA COLLECTION
                <span id="updated-data-collection" style="display: none;"><i class="icon-ok">Updated</i></span>
            </h2>

            <div class="block">
                <form method="post" id="collection-settings-form">
                    {% csrf_token %}
                    {% include "data_collection_table.html" with system_settings_page=True %}
                    <div class="checkbox form-field">
                        <input type="checkbox" name="also_set_as_default" id="also_set_as_default" class="ios-switch bigswitch green">
                        <label for="also_set_as_default">
                            Also apply these settings to all newly monitored systems
                        </label>
                    </div>
                    <div id="collection-form-footer">
                        <p>
                            <span class="muted-note">
                                {% if is_power_user %}
                                    To update all monitored systems, go to the 'Data Collection' tab in global Settings.
                                {% else %}
                                    Only the IMX_ADMIN user can change data collection settings.
                                {% endif %}
                            </span>
                        </p>
                        <span id="data-collection-spinner" class="lds-ellipsis"><span></span><span></span><span></span><span></span></span>
                        <button id="update-collection-settings-btn" class="button button-green" type="submit" {% if not is_power_user %} disabled {% endif %}>Update</button>
                    </div>
                </form>
            </div>
        {% endif %}

        {% if is_system_admin or is_power_user %}
            <h2>REMOVE SYSTEM</h2>

            <div class="block">
                <p>
                    InfiniMetrics will stop monitoring and displaying information about {{ system.name }}.
                </p>
                <a class="button button-red" href="#" onclick="remove_system('{{ serial }}', '{{ is_power_user }}'=='True'); return false;">Remove</a>
            </div>
        {% endif %}
    </div>

    <script>

        {% if not is_power_user %}
        $(document).ready(function() {
            $('#collection-settings-form input[type="checkbox"]').prop("disabled", true);
        });
        {% endif %}
        // Show spinner on submit of refresh
        $(document).on('submit', '#refresh-form', function(){
            $('#refresh-button').css('display', 'none');
            $('#reconnect-spinner').css('display', 'inline-block');
        });

        function toggleNasClientsMonitoring(isEnabled) {
            $('#monitor-nas-clients-btn').css('display', 'none');
            $('#monitor-nas-clients-spinner').css('display', 'inline-block');
            fetch('{% url "toggle_nas_clients_monitoring" serial %}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': '{{ csrf_token }}'
                },
                body: JSON.stringify({
                    "enabled": isEnabled
                }),
            })
            .then((response) => {
                if (!response.ok) {
                    response.json().then(response => { show_error(`${response.error}`) })
                } else {
                    $("#nas-clients-sidebar").show();
                    $('#monitor-nas-clients-btn')
                            .data('status', isEnabled)
                            .text(isEnabled ? 'Disable' : 'Enable');
                }
                $('#monitor-nas-clients-btn').css('display', 'inline-block');
                $('#monitor-nas-clients-spinner').css('display', 'none');
            });
        }

        function monitorNasClients() {
            let monitorNasBtn = $('#monitor-nas-clients-btn');
            if (monitorNasBtn.data('status') === true) {
                // User is disabling monitoring
                toggleNasClientsMonitoring(false);
            } else {
                // User is enabling monitoring
                show_areyousure({
                    title: 'Enable Monitoring for NAS Clients',
                    message: 'Allow up to a minute for this feature state to change, during which all monitoring is paused.<br><br>Are you sure you want to continue?',
                    action: 'Yes',
                    action_class: 'button-green',
                    action_callback: function() {
                        toggleNasClientsMonitoring(true);
                    }
                });
            }
        }
    </script>

{% endblock %}