{% extends 'base_software.html' %}

{% block title %}<center><h4><b>Managed Hosts</b></h4></center>{% endblock %}

{% block head %}

<script>
    $(function() {
        var managed_host_url = "/datatable/api/get_managed_host_details/region/";

        refresh_region_name();

        $('#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
                    };
                },
            },
        });

        // Use delegate pattern for event
        $("#host-datatable").on("click", ".host-delete-link", function() {
            var delete_url = $(this).attr('data-delete-url');
            var delete_host = $(this).attr('delete-host');

            bootbox.confirm("You are about to delete host \'" + delete_host + "\'.  OK to proceed?", function(result) {
                if (result) {
                    $.ajax({
                        url: delete_url,
                        type: 'DELETE',
                        success: function(result) {
                            if (result.status == 'OK') {
                                refresh_host_table(false);
                            } else {
                                bootbox.alert('Delete failed.');
                            }
                        }
                    });
                }
            });
        });

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

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

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

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

        var host_table = $("#host-datatable").dataTable({
            "serverSide": true,
            "ajax": {
                "url": managed_host_url + get_region_from_cookie(),
            },
            "columns": [
                { "data": "hostname" },
                { "data": "region" },
                { "data": "location" },
                { "data": "roles" },
                { "data": "chassis" },
                { "data": "platform" },
                { "data": "software" },
                { "data": "connection" },
                { "data": "host_or_ip" },
                { "data": "port_number" },
                { "data": "username" },
                { "data": "jump_host" }
            ],
            "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": 'location'
            }, {
                "targets": 3,
                "data": 'roles',
                "render": function(data, type, row) {
                    return comma2br(data);
                }
            }, {
                "targets": 4,
                "data": 'chassis'
            },{
                "targets": 5,
                "data": 'platform'
            }, {
                "targets": 6,
                "data": 'software'
            }, {
                "targets": 7,
                "data": 'connection'
            }, {
                "targets": 8,
                "data": 'host_or_ip',
                "render": function(data, type, row) {
                    return '<a href="/home/hosts/' + row['hostname'] + '/edit/">' + comma2br(data) + '</a>';
                }
            }, {
                "targets": 9,
                "data": 'port_number',
                "render": function(data, type, row) {
                    return comma2br(data);
                }
            }, {
                "targets": 10,
                "data": 'username',
            }, {
                "targets": 11,
                "data": 'jump_host'
            }, {
                "targets": 12,
                "data": 'hostname',
                "render": function(data, type, row) {
                    return '<a class="host-delete-link" href="javascript://"  \
                        delete-host="' + data + '" \
                        data-delete-url="/home/hosts/' + data + '/delete/">Delete</a>';
                }
            }, ],
        });

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

        function refresh_host_table(reset_page) {
            if (reset_page) {
                host_table.api().ajax.url(managed_host_url + get_region_from_cookie()).load();
            } else {
                host_table.api().ajax.url(managed_host_url + 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)
                    });
                }
            });
        }

        $('#host-datatable').on( 'length.dt', function ( e, settings, len ) {
            write_page_length_to_cookie(len);
        });


    });
</script>

{% endblock %}

{% block main %}
<div class="container" style="margin-top: 10px">
    <div class="row">
        <div class="col-sm-3">
            <span><strong>Region:&nbsp;</strong></span><span id='selected-region'></span>
        </div>
        <div class="col-sm-9">
            <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>
            </div>
        </div>
    </div>
    <hr>
    <div class="row">
        <table cellspacing="0" class="display table" id="host-datatable">
            <thead>
                <tr>
                    <th>Hostname</th>
                    <th>Region</th>
                    <th>Location</th>
                    <th>roles</th>
                    <th>Chassis</th>
                    <th>Platform</th>
                    <th>Software</th>
                    <th>Connection</th>
                    <th>TS or IP</th>
                    <th>Port</th>
                    <th>Username</th>
                    <th>Jump Server</th>
                    <th>Action</th>
                </tr>
            </thead>
        </table>
    </div>
</div>
{% endblock %}