{% extends 'base_software.html' %}

{% from 'host/common.html' import edit_field %}

{% block head %}

<script src="/static/jquery/js/browse_server_dialog.js"></script>
<script charset="utf-8">
    $(function() {

        var use_utc_timezone = "{{ system_option.use_utc_timezone }}" == 'True'
        var browse_spinner = $('#browse-spinner');
        browse_spinner.hide();

        // Initialize
        refresh_region_name();
        refresh_host_and_region_counts();

        $('#search-region-selector').select2({
            placeholder: "Filter Hosts by Region",
            allowClear: true,
            ajax: {
                url: "/home/api/get_regions/",
                dataType: 'json',
                processResults: function(data, page) {
                    return {
                        results: data.data
                    };
                },
                data: function(params) {
                    return {
                        q: params.term, // search term
                        show_all: true,
                        page: params.page
                    };
                },
            },
        });


        $(".host-delete-link").on("click", function() {
            var delete_url = $(this).attr('delete-url');
            var delete_host = $(this).attr('delete-host');
            var host_type = $(this).attr('host-type');

            bootbox.confirm("You are about to delete \'" + delete_host + "\'.  OK to proceed?", function(result) {
                if (result) {
                    $.ajax({
                        url: delete_url,
                        type: 'DELETE',
                        success: function(result) {
                            if (result.status == 'OK') {
                                window.location = "{{ url_for('home') }}";
                            } else {
                                display_delete_error(delete_host, host_type);
                            }
                        },
                        error: function(XMLHttpRequest, textStatus, errorThrown) {
                            display_delete_error(delete_host, host_type);
                        }
                    });
                }
            });
        });

        var host_platform_table = $("#host-platform-table").dataTable({
            "order": [
                [0, "asc"],
                [1, "asc"]
            ],
            "bLengthChange": false,
            "paging": false,
            "info": false,
            "columnDefs": [{
                "targets": 0,
                "data": 'software_platform',
            }, {
                "targets": 1,
                "data": 'software_version',
            }, {
                "targets": 2,
                "data": 'count',
            }],
            "ajax": {
                "url": "/home/api/get_host_platform_and_version_summary/region/" + get_region_from_cookie()
            },
        });


        function display_delete_error(name, host_type) {
            var message = "Unable to delete \'" + name + "\'";

            if (host_type == 'jump_host') {
                message = "Unable to delete jump host \'" + name + "\'.  Verify that it is not used by other hosts.";
            } else if (host_type == 'region') {
                message = "Unable to delete region \'" + name + "\'.  Verify that it is not used by other hosts.";
            } else if (host_type == 'server') {
                message = "Unable to delete server repository \'" + name + "\'.  Verify that it is not used by other regions.";
            }

            bootbox.alert(message);
        }

        function get_region_from_cookie() {
            return parseInt(read_cookie_value('main-selected-region', 0));
        }

        function get_page_length_from_cookie() {
            return parseInt(read_cookie_value('host_datatable_page_length', 10));
        }

        function write_region_to_cookie(region_id) {
            write_cookie_value('main-selected-region', region_id);
        }

        function write_page_length_to_cookie(page_length) {
            write_cookie_value('host_datatable_page_length', page_length);
        }

        $('#managed-host-datatable').on( 'length.dt', function ( e, settings, len ) {
            write_page_length_to_cookie(len);
        });
        function define_column_names(d) {
            var column_names = [];
            for(index = 0; index < d.columns.length; index++) {
                column_names.push(d.columns[index].data)
            }
            d.column_names = column_names.join(',');
        }

        // https://datatables.net/manual/server-side#Returned-data
        var host_table = $("#managed-host-datatable").dataTable({
            "serverSide": true,
            "ajax": {
                "url": "/datatable/api/get_managed_hosts/region/" + get_region_from_cookie(),
                "data": function (d) {
                    define_column_names(d);
                }
            },
            "columns": [
                { "data": "hostname" },
                { "data": "region" },
                { "data": "host_or_ip" },
                { "data": "chassis" },
                { "data": "platform" },
                { "data": "software" },
                { "data": "last_successful_retrieval", "orderable": false }
            ],
            "pageLength": get_page_length_from_cookie(),
            "columnDefs": [{
                "targets": 0,
                "data": 'hostname',
                "render": function(data, type, row) {
                    return '<a href="/host_dashboard/hosts/' + data + '/">' + data + '</a>';
                }
            }, {
                "targets": 1,
                "data": 'region'
            }, {
                "targets": 2,
                "data": 'host_or_ip',
                "render": function(data, type, row) {
                    return '<a href="/home/hosts/' + row['hostname'] + '/edit/">' + comma2br(data) + '</a>';
                }
            }, {
                "targets": 3,
                "data": 'chassis'
            }, {
                "targets": 4,
                "data": 'platform'
            }, {
                "targets": 5,
                "data": 'software'
            }, {
                "targets": 6,
                "data": 'last_successful_retrieval',
                "render": function(data, type, row) {
                    if (row['inventory_retrieval_status'] == 'in-progress') {
                        return data + '<img src=\"{{ url_for('static', filename='spinner.gif') }}\">';
                    } else if (row['inventory_retrieval_status'] == 'failed') {
                        return '<span style="color:red;">' + data + '</span>';
                    }
                    return data
                }
            }, {
                "targets": 7,
                "data": 'hostname',
                "render": function(data, type, row) {
                    return '<a href="/install/hosts/' + data + '/schedule_install/">Install</a>';
                }
            }, ],
        }).on('draw.dt', function(e, settings, json) {
            $('#region_hosts_count').html(host_table.api().page.info().recordsTotal);
        });

        function refresh_host_platform_table() {
             host_platform_table.api().ajax.url("/home/api/get_host_platform_and_version_summary/region/" + get_region_from_cookie()).load(null, false);
        }

        function refresh_region_name() {
            $.ajax({
                url: "/home/api/get_region_name/region/" + get_region_from_cookie(),
                dataType: 'json',
                success: function(data) {
                    $.each(data, function(index, element) {
                        $('#selected-region').html(element[0].region_name);
                    });
                }
            });
        }

        function refresh_host_table_with_new_region() {
            host_table.api().ajax.url("/datatable/api/get_managed_hosts/region/" + get_region_from_cookie()).load();
        }

        function refresh_host_table() {
            // user paging is not reset on reload - https://datatables.net/reference/api/ajax.reload()
            host_table.api().ajax.reload(null, false);
        }

        function refresh_host_and_region_counts() {
            $.ajax({
                url: "{{ url_for('home.get_host_and_region_counts') }}",
                dataType: 'json',
                success: function(data) {
                    $.each(data, function(index, element) {
                        $('#total-region-count').html(element[0].total_region_count);
                        $('#total-host-count').html(element[0].total_host_count);
                    });
                }
            });
        }

        $('#search-region-selector').on('change', function(e) {
            write_region_to_cookie($(this).val());

            refresh_region_name();
            refresh_host_table_with_new_region();
            refresh_host_platform_table();
        });


        $("#managed-jump-host-datatable").dataTable({
            "iDisplayLength": 10
        });

        $("#managed-region-datatable").dataTable({
            "iDisplayLength": 10
        });

        $("#managed-server-datatable").dataTable({
            "iDisplayLength": 10
        });

        var selected_tab = $.cookie('main-dashboard-tab') == null ? '#managed-hosts' : $.cookie('main-dashboard-tab');
        $('a[href=' + selected_tab + ']').tab('show');

        $('#main-dashboard-tab').on('shown.bs.tab', function() {
            $.cookie('main-dashboard-tab', $('.nav-tabs .active > a').attr('href'));
        });

        get_server_time();

        function get_server_time() {
            $.ajax({
                url: "/home/api/get_server_time",
                dataType: 'json',
                success: function(data) {
                    $.each(data, function(index, element) {
                        $('#server-time').html(getDateStringfromUTCString(element.server_time, use_utc_timezone).replace(' ', '<br>'));
                        $('#server-uptime').html(element.uptime);
                    });
                },
                error: function(xhr, status, error) {
                    $('#server-time').html('<img src=\"{{ url_for('static', filename='error.png') }}\" title="Lost Connection">');
                }
            });
        }

        function refresh_page() {
            refresh_region_name();
            get_server_time();
            refresh_host_and_region_counts();
            refresh_host_platform_table();
            refresh_host_table();
        }

        setInterval(function() {
            refresh_page();
        }, 10000);

        var file_list_table = $("#file-list-table").dataTable({
            "scrollY": "250px",
            "bSort": false,
            "iDisplayLength": 5000,
            "sDom": 'ift',
        });

        <!-- hide the table header to preserve space -->
        $(".hide-header").hide();

        $('#browse-server-button').on('click', function() {
            // Initializes the variables
            $('#dialog_server').val(-1);
            $('#dialog_server_directory').html('');
            file_list_table.api().clear().draw();

            $('#select-server-dialog').modal({
                show: true
            })
        });

        $('#dialog_server').on('change', function(e) {
            retrieve_directory_and_file_list(browse_spinner, $('#dialog_server').val(), $('#dialog_server_directory'), '', file_list_table);
        });

        $('#dialog_server_directory').on('change', function(e) {
            retrieve_directory_and_file_list(browse_spinner, $('#dialog_server').val(), $('#dialog_server_directory'), $('#dialog_server_directory').val(), file_list_table)
        });

        $('#dialog-move-up').on('click', function(e) {
            retrieve_directory_and_file_list(browse_spinner, $('#dialog_server').val(), $('#dialog_server_directory'), get_parent_folder($('#dialog_server_directory').val()), file_list_table);
        });

        $('#dialog-reset-server-directory').on('click', function(e) {
            reset_server_directory(browse_spinner, $('#dialog_server').val(), $('#dialog_server_directory'), $('#dialog_server_directory').val(), file_list_table);
        });

    });
</script>

<style>
    .modal-dialog {
        /* new custom width */
        width: 700px;
    }
    .btn-select {
        line-height: 10px;
    }
</style>

{% endblock %}

{% block main %}
<div id="select-server-dialog" class="modal" role="dialog">
    <div class="modal-dialog">
        <form method="post" class="form-horizontal">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">x</button>
                    <h4>Browse Server Repository
                        <img id="browse-spinner" src="{{ url_for('static', filename='spinner.gif') }}">
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="form-group ">
                        <label class="col-sm-4 control-label"></label>
                        <div class="col-sm-8"><label class="col-sm-4 control-label"></label></div>
                    </div>
                    {{ edit_field(form.dialog_server, field_width="col-sm-8", class="form-control") }}
                    <div class="form-group ">
                        <label class="col-sm-4 control-label" id="label_dialog_server_directory" for="dialog_server_directory">Server Directory</label>
                        <div class=col-sm-6>
                            <select class="form-control" id="dialog_server_directory" name="dialog_server_directory">
                                <option value=""></option>
                            </select>
                        </div>
                        <a href="javascript://">
                        <img id='dialog-move-up' src="/static/up_arrow.png" title="Go to Parent Folder">
                        <img id='dialog-reset-server-directory' src="/static/remove.png" title="Reset Server Directory">
                        </a>
                    </div>
                    <hr>
                    <table class="display table" id="file-list-table">
                        <thead class="hide-header">
                            <tr>
                                <th>&nbsp;</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </form>
    </div>
</div>
<!-- Main -->
<div class="container">
    <!-- upper section -->
    <div class="row">
        <div class="col-sm-3">
            <span><strong>Selected Region:&nbsp;</strong></span><span id='selected-region'></span>
            <hr>
            <div class="panel panel-info">
                <div class="panel-heading">CSM Server</div>
                <table class="table table-striped">
                    <tbody>
                        <tr>
                            <td>Server Time</td>
                            <td id="server-time" ></td>
                        </tr>
                        <tr>
                            <td>Server Uptime</td>
                            <td id="server-uptime"></td>
                        </tr>
                        <tr>
                            <td>Server Version</td>
                            <td>{{ build_date }}</td>
                        </tr>
                        <tr>
                            <td>Login User</td>
                            <td>{{ current_user.username }}</td>
                        </tr>
                        <tr>
                            <td>Privilege</td>
                            <td>{{ current_user.privilege }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="panel panel-info">
                <div class="panel-heading">Summary</div>
                <table class="table table-striped">
                    <tbody>
                        <tr>
                            <td>Total Regions</td>
                            <td id="total-region-count"></td>
                        </tr>
                        <tr>
                            <td>Total Hosts</td>
                            <td id="total-host-count"></td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div class="panel panel-info">
                <div class="panel-heading">
                    Region Hosts:
                    <span id="region_hosts_count"></span>
                </div>
                <div class="panel-body" style="max-height:500px;overflow:scroll;white-space:nowrap;">
                    <table class="display table" id="host-platform-table">
                        <thead>
                            <tr>
                                <th>Platform</th>
                                <th>Software</th>
                                <th>#</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-sm-9">
            <!-- left -->
            <div class="input-group">
                <span title="Filter Hosts" class="input-group-addon glyphicon glyphicon-filter"></span>
                <input type="hidden" class="select2" id="search-region-selector">
                <span class="DodgerBlue pull-right"><img src="{{ url_for('static', filename='date_time.png') }}">&nbsp;
                <a href="/install/batch_schedule_install/?return_url=install_dashboard.home">Schedule Batch Installations</a>
                </span>
            </div>
            <hr style="margin-top:12px;">
            <ul class="nav nav-tabs" id="main-dashboard-tab">
                <li><a data-toggle="tab" href="#managed-hosts">Managed Hosts</a>  </li>
                <li><a data-toggle="tab" href="#managed-jump-hosts">Jump Servers</a></li>
                <li><a data-toggle="tab" href="#managed-regions">Regions</a></li>
                <!-- Required to be a privilege user -->
                <li><a data-toggle="tab" href="#managed-servers">Server Repositories</a></li>
                <li class="dropdown">
                    <a data-toggle="dropdown" class="dropdown-toggle" href="#">Create <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a data-toggle="main-tab" href="{{ url_for('home.host_create') }}">Host</a></li>
                        <li><a data-toggle="main-tab" href="{{ url_for('home.jump_host_create') }}">Jump Server</a></li>
                        <li class="divider"></li>
                        <li><a data-toggle="main-tab" href="{{ url_for('home.region_create') }}">Region</a></li>
                        <!-- Required to be a privilege user -->
                        <li><a data-toggle="main-tab" href="{{ url_for('home.server_create') }}">Server Repository</a></li>
                    </ul>
                </li>
            </ul>
            <div class="tab-content" style="margin-top:20px;">
                <div id="managed-hosts" class="tab-pane fade in active">
                    <table cellspacing="0" class="display table" id="managed-host-datatable">
                        <thead>
                            <tr>
                                <th>Hostname</th>
                                <th>Region</th>
                                <th>TS or IP</th>
                                <th>Chassis</th>
                                <th>Platform</th>
                                <th>Software</th>
                                <th>Last<br> Successful<br> Retrieval</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                    </table>
                </div>
                <div id="managed-jump-hosts" class="tab-pane fade">
                    <table cellspacing="0" class="display table" id="managed-jump-host-datatable">
                        <thead>
                            <tr>
                                <th>Jump Server</th>
                                <th>Name or IP</th>
                                <th>Username</th>
                                <th>Connection</th>
                                <th>Port</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for jump_host in jump_hosts %}
                            <tr>
                                <td><a href="{{ url_for('home.jump_host_edit', hostname = jump_host.hostname) }}">{{ jump_host.hostname }}</a></td>
                                <td>{{ jump_host.host_or_ip }}</td>
                                <td>{{ jump_host.username }}</td>
                                <td>{{ jump_host.connection_type }}</td>
                                {% if jump_host.port_number %}
                                    <td>{{ jump_host.port_number }}</td>
                                {% else %}
                                    <td>Default</td>
                                {% endif %}
                                <td>
                                    <a class="host-delete-link" href="#"
                                        host-type="jump_host"
                                        delete-host="{{ jump_host.hostname }}"
                                        delete-url="{{ url_for('home.jump_host_delete', hostname = jump_host.hostname) }}">Delete</a>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                <div id="managed-regions" class="tab-pane fade">
                    <table cellspacing="0" class="display table" id="managed-region-datatable">
                        <thead>
                            <tr>
                                <th>Region</th>
                                <th>Server Repository</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for region in regions %}
                            <tr>
                                <td><a href="{{ url_for('home.region_edit', region_name = region.name) }}">{{ region.name }}</a></td>
                                {% if region.servers %}
                                    <td>
                                        <ul style="list-style-type:square;margin:0;">
                                            {% for server in region.servers %}
                                            <li><a href="{{ url_for('home.server_edit', hostname = server.hostname) }}">{{ server.hostname }}</a></li>
                                            {% endfor %}
                                        </ul>
                                    </td>
                                {% else %}
                                    <td>&nbsp;</td>
                                {% endif %}
                                <td>
                                    <a class="host-delete-link" href="#"
                                        host-type="region"
                                        delete-host="{{ region.name }}"
                                        delete-url="{{ url_for('home.region_delete', region_name = region.name) }}">Delete</a>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                <!-- Required to be a privilege user -->
                <div id="managed-servers" class="tab-pane fade">
                    <div class="pull-right">
                        <a id="browse-server-button" href="javascript://"><img src="{{ url_for('static', filename='browse_server.png') }}">Browse Repository</a>
                    </div>
                    <table cellspacing="0" class="display table" id="managed-server-datatable">
                        <thead>
                            <tr>
                                <th>Server Repository</th>
                                <th>Server Type</th>
                                <th>Server Information</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for server in servers %}
                            <tr>
                                <td><a href="{{ url_for('home.server_edit', hostname = server.hostname) }}">{{ server.hostname }}</a></td>
                                <td>{{ server.server_type }}</td>
                                <td>
                                    <span style="color: Gray;"><b>URL:</b></span> {{ server.server_url }}<br/>
                                    {% if server.vrf %}
                                        <span style="color: Gray;"><b>VRF:</b></span> {{ server.vrf }}<br/>
                                    {% endif %}

                                    {% if server.server_directory %}
                                        <span style="color: Gray;">
                                        {% if server.server_type == "FTP" or server.server_type == "SFTP" or server.server_type == "SCP" %}
                                            <b>Home Directory:</b>
                                        {% else %}
                                            <b>File Directory:</b>
                                        {% endif %}
                                        </span>
                                        {{ server.server_directory }}
                                    {% endif %}
                                </td>
                                <td>
                                    <a class="host-delete-link" href="#"
                                        host-type="server"
                                        delete-host="{{ server.hostname }}"
                                        delete-url="{{ url_for('home.server_delete', hostname = server.hostname) }}">Delete</a>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            <!-- /tab-content -->
        </div>
    </div>
    <!-- /upper section -->
</div>
<!-- Main -->
{% endblock %}