JimV-C/jimvc/themes/default/templates/guests_show.html

{% extends theme("layout.html") %}
{% block head %}
    {{ super() }}
    <style type="text/css">
        @media (min-width: 768px) {
            .form-horizontal .control-label {
                text-align: left;
            }
        }

        label>span {
            color: deepskyblue;
        }

        .table {
            font-size: 12px;
            border-width: 1px;
            line-height: 20px;
        }
        .table > thead > tr > th,
        .table > tfoot > tr > th {
            color: #999999;
            font-weight: normal;
            border-bottom: 0 solid #e1e6eb;
            background-color: #F5F6FA;
        }
        
        .table > tbody > tr > td {
            color: #424547;
        }

        .table-bordered > tbody > tr {
            padding-top: 10px;
            padding-bottom: 10px;
            height: 106px;
        }

        .table-bordered > thead > tr > th,
        .table-bordered > tbody > tr > th,
        .table-bordered > tfoot > tr > th,
        .table-bordered > thead > tr > td,
        .table-bordered > tbody > tr > td,
        .table-bordered > tfoot > tr > td {
            border-style: solid;
            border-width: 1px 0 0 0;
        }

        .btn,
        .form-control,
        .form-group>div>div,
        .modal-content {
            border-radius: 0 !important;
        }

        .btn-shortcut {
            font-size: 12px !important;
            padding: 0 26px;
        }

        .show {
            display: inline-block !important;
        }

        .tr-selected td,
        .tr-selected {
            color: #000 !important;
            background: #fafaff !important;
        }

        .dropdown-menu {
            min-width: 86px !important;
        }

        .btn-ability {
            margin-right: 16px;
            height: 50px;
            padding: 8px 20px;
            margin-bottom: 30px;
        }

        .btn-ability-line {
        }

        .project {
            position: relative;
            float: left;
            display: block;
            margin: 0 10px 20px 10px;
            width: 338px;
            height: 208px;
            border-radius: 8px;
            background-color: #F6F6F6;
        }

        .project:hover {
            background-color: #EFEFEF;
        }

        .project:hover > .project_name {
            color: #0275d8;
        }

        .project_name {
            font-size: 36px;
            color: #292b2c;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .project-nav-tabs {
            font-size: smaller;
        }

        .project-nav-tabs > .active > a {
            background: #379cfb !important;
        }

        .project-service-name {
            font-size: 24px;
            font-weight: bold;
            line-height: 1.25;
            margin-top: 24px;
            margin-bottom: 16px;
        }

        .table-bordered-project-service > tbody > tr {
            height: 70px;
        }
    </style>

{% endblock head %}
{% block content %}

<script type="text/javascript">
    var page = 1;
    var page_size = 10;
    var keyword = '';
    var resource_path = window.location.pathname;
    var cur_url = resource_path;
    var show_real_password_for_renew = false;
    var sheet_tag = window.location.hash;

    $(document).ready(function() {
        page_size = $('#page_size').val();
        cur_url = resource_path + '?page=' + page + '&page_size=' + page_size;

        var last_ready = null;
        $('#content_search').keydown(function() {
            if (last_ready !== null) {
                clearTimeout(last_ready);
            }
            last_ready = setTimeout(function () {
                keyword = $('#content_search').val();
                cur_url = resource_path + '?page=' + page + '&page_size=' + page_size;
                if (keyword.length > 0) {
                    cur_url = resource_path + '?page=' + page + '&page_size=' + page_size + '&keyword=' + keyword;
                }
                window.location.href=cur_url;
            }, 1000);
        });

        $('#page_size').change(function () {
            keyword = $('#content_search').val();
            page_size = $('#page_size').val();
            cur_url = resource_path + '?page=' + page + '&page_size=' + page_size;
            if (keyword.length > 0) {
                cur_url = resource_path + '?page=' + page + '&page_size=' + page_size + '&keyword=' + keyword;
            }
            window.location.href=cur_url;
        });

        $("thead").on('click', ".all_selector", function() {
            if ($("thead .all_selector").is(':checked')) {
                $("tbody tr").find('td input[type="checkbox"]:eq(0)').prop('checked', true);
                $(".all_selector").prop('checked', true);
            } else {
                $("tbody tr").find('td input[type="checkbox"]:eq(0)').prop('checked', false);
                $(".all_selector").prop('checked', false);
            }

            select_item_action();
        });

        $("tfoot").on('click', ".all_selector", function() {
            if ($("tfoot .all_selector").is(':checked')) {
                $("tbody tr").find('td input[type="checkbox"]:eq(0)').prop('checked', true);
                $(".all_selector").prop('checked', true);
            } else {
                $("tbody tr").find('td input[type="checkbox"]:eq(0)').prop('checked', false);
                $(".all_selector").prop('checked', false);
            }

            select_item_action();
        });

        $("tbody tr").on('click', "input[type='checkbox']", function() {
            select_item_action();
        });

        $('body').addClass('add-transition');
        $('.add-page-transition').on('click', function(){
            var transAttr = $(this).attr('data-transition');
            $('.add-transition').attr('class', 'add-transition');
            $('.add-transition').addClass(transAttr);
        });

        $('#edit_remark_modal').on('show.bs.modal', function (me) {
            $('#edit_remark_instance_uuid').val($(me.relatedTarget).parent().parent().prev().prev().text());
            $('#edit_remark').val($(me.relatedTarget).prev().text());
        });

        $('#migrate_host').chosen({
            "disable_search": true
        });

        $('#migrate_modal').on('show.bs.modal', function (me) {
            $('#migrate_instance_uuid').val(
                $(me.relatedTarget).parent().parent().parent().parent().parent().children()[0].textContent);
            $.ajax({
                url : '/api/hosts?alive',
                type : 'GET',
                contentType: "application/json; charset=utf-8",
                dataType: 'json',
                error : function() {
                },
                success : function(data, textStatus, xhr) {
                    $('#migrate_host').empty();
                    $.each(data.data, function(k, v) {
                        $('#migrate_host').append(
                            $('<option>', {value: v['hostname'], text: v['hostname']})
                        );
                    });
                    $('#migrate_host').trigger("chosen:updated");
                }
            });
        });

        $('#reset_password_modal').on('show.bs.modal', function (me) {
            $('#reset_password_instance_uuid').val(
                $(me.relatedTarget).parent().parent().parent().parent().parent().children()[0].textContent);

            show_real_password_for_renew = false;
            $('#show_new_password_button').removeClass("icon-elusive-eye").addClass("icon-elusive-eye-off");
            $('#new_password').val('');
            $('#new_password').attr({type: "password"});
        });

        $('#allocate_bandwidth_modal').on('show.bs.modal', function (me) {
            $('#bandwidth_unit').on('changed.bs.select', function (me) {
                render_bandwidth_slider($("#bandwidth"), 'update', $('#bandwidth_unit').val())
            });

            render_bandwidth_slider($("#bandwidth"), 'create', 'm');
        });

        $('#batch_allocate_bandwidth_modal').on('show.bs.modal', function (me) {
            $('#batch_bandwidth_unit').on('changed.bs.select', function (me) {
                render_bandwidth_slider($("#batch_bandwidth"), 'update', $('#batch_bandwidth_unit').val())
            });

            render_bandwidth_slider($("#batch_bandwidth"), 'create', 'm');
        });

        $('#adjust_ability_form').formValidation({
            framework: 'bootstrap4',
            icon: {
                valid: 'fa fa-check',
                invalid: 'fa fa-times',
                validating: 'fa fa-refresh'
            },
            // Since the Bootstrap Button hides the radio and checkbox
            // We exclude the disabled elements only
            excluded: ':disabled',
            locale: 'zh_CN',
            fields: {
                ability: {
                    validators: {
                        notEmpty: {
                        }
                    }
                }
            }
        })
        .on('success.field.fv', function(e, data) {
            if (data.fv.getInvalidFields().length > 0) {    // There is invalid field
                $('#adjust_ability_form_button').prop('disabled', true);
            } else {
                $('#adjust_ability_form_button').prop('disabled', false);
            }
        });

        $('#batch_adjust_ability_form').formValidation({
            framework: 'bootstrap4',
            icon: {
                valid: 'fa fa-check',
                invalid: 'fa fa-times',
                validating: 'fa fa-refresh'
            },
            // Since the Bootstrap Button hides the radio and checkbox
            // We exclude the disabled elements only
            excluded: ':disabled',
            locale: 'zh_CN',
            fields: {
                ability: {
                    validators: {
                        notEmpty: {
                        }
                    }
                }
            }
        })
        .on('success.field.fv', function(e, data) {
            if (data.fv.getInvalidFields().length > 0) {    // There is invalid field
                $('#batch_adjust_ability_form_button').prop('disabled', true);
            } else {
                $('#batch_adjust_ability_form_button').prop('disabled', false);
            }
        });

        $('#adjust_ability_modal').on('show.bs.modal', function (me) {
            $('#adjust_ability_modal input:radio[name="ability"]').prop('checked',false);
            $('#adjust_ability_modal .btn-ability-line label').removeClass('active');
            $('#adjust_ability_form_button').prop('disabled', true);
            $('#adjust_ability_modal .form-group').removeClass('has-success');
        });

        $('#batch_adjust_ability_modal').on('show.bs.modal', function (me) {
            $('#batch_adjust_ability_modal input:radio[name="ability"]').prop('checked',false);
            $('#batch_adjust_ability_modal .btn-ability-line label').removeClass('active');
            $('#batch_adjust_ability_form_button').prop('disabled', true);
            $('#batch_adjust_ability_modal .form-group').removeClass('has-success');
        });

        nav_to_sheet_tag();

        $('#create_project_modal').formValidation({
            framework: 'bootstrap4',
            icon: {
                valid: 'fa fa-check',
                invalid: 'fa fa-times',
                validating: 'fa fa-refresh'
            },
            // Since the Bootstrap Button hides the radio and checkbox
            // We exclude the disabled elements only
            excluded: ':disabled',
            locale: 'zh_CN',
            fields: {
                name: {
                    validators: {
                        notEmpty: {},
                        stringLength: {
                            min: 2,
                            max: 255
                        }
                    }
                }
            }
        })
        .on('success.field.fv', function(e, data) {
            if (data.fv.getInvalidFields().length > 0) {    // There is invalid field
                data.fv.disableSubmitButtons(true);
            }
        }).on('success.form.fv', function (e, data) {
            project_create();
        });

        $('#create_service_modal').formValidation({
            framework: 'bootstrap4',
            icon: {
                valid: 'fa fa-check',
                invalid: 'fa fa-times',
                validating: 'fa fa-refresh'
            },
            // Since the Bootstrap Button hides the radio and checkbox
            // We exclude the disabled elements only
            excluded: ':disabled',
            locale: 'zh_CN',
            fields: {
                name: {
                    validators: {
                        notEmpty: {},
                        stringLength: {
                            min: 2,
                            max: 255
                        }
                    }
                }
            }
        })
            .on('success.field.fv', function(e, data) {
                if (data.fv.getInvalidFields().length > 0) {    // There is invalid field
                    data.fv.disableSubmitButtons(true);
                }
            }).on('success.form.fv', function (e, data) {
            service_create();
        });

        refresh_prepared_by_menu();
    });

    function refresh() {
        keyword = $('#content_search').val();
        page = $('#pagination li.active a').text();
        page_size = $('#page_size').val();
        cur_url = resource_path + '?page=' + page + '&page_size=' + page_size;
        if (keyword.length > 0) {
            cur_url = resource_path + '?page=' + page + '&page_size=' + page_size + '&keyword=' + keyword;
        }
        window.location.href=cur_url;
    }

    function row_onmouseover(me) {
        $(me).find(".edit_remark_trigger").css('display','inline-flex');
    }

    function row_onmouseout(me) {
        $(me).find(".edit_remark_trigger").css('display','none');
    }

    function remark_update(me) {
        var uuid = $('#edit_remark_instance_uuid').val();
        var remark = $('#edit_remark').val();
        $('#edit_remark_modal').modal('hide');
        $.ajax({
            url : '/api/guest/' + uuid,
            type : 'PATCH',
            contentType: "application/json; charset=utf-8",
            data : JSON.stringify({
                remark: remark
            }),
            error : function() {
                alter_danger('实例备注更新失败！');
            },
            success : function() {
                $('.guest_list tbody').find('td:contains(' + uuid + ')').next().next().find('p').text(remark);
                alter_success('实例备注更新成功！');
            }
        });
    }

    function get_selected_element(checked) {
        if (checked === null) {
            checked = true;
        }

        if (checked) {
            return $('tbody :checked');
        } else {

            return $('tbody input:not(:checked)');
        }
    }
    
    function highlight_selected_element() {
        var selected_element = get_selected_element(true);
        var no_selected_element = get_selected_element(false);

        selected_element.each(function(i, e) {
            $(e).parent().parent().toggleClass('tr-selected', true);
        });

        no_selected_element.each(function(i, e) {
            $(e).parent().parent().toggleClass('tr-selected', false);
        });
    }
    
    function shortcut_bar_enable() {
        var selected_element = get_selected_element(true);

        if (selected_element.length > 0) {
            $('.btn-shortcut').toggleClass('disabled', false);
        } else {
            $('.btn-shortcut').toggleClass('disabled', true);
        }
    }

    function select_item_action() {
        highlight_selected_element();
        shortcut_bar_enable();
    }

    function boot(uuids) {
        $.ajax({
            url : '/api/guests/_boot/' + uuids.join(','),
            type : 'PUT',
            contentType: "application/json; charset=utf-8",
            error : function() {
                alter_danger('实例启动指令发送失败！');
            },
            success : function() {
                alter_success('实例启动指令发送成功！');
            }
        });
    }

    function reboot(uuids) {
        $.ajax({
            url : '/api/guests/_reboot/' + uuids.join(','),
            type : 'PUT',
            contentType: "application/json; charset=utf-8",
            error : function() {
                alter_danger('实例重启指令发送失败！');
            },
            success : function() {
                alter_success('实例重启指令发送成功！');
            }
        });
    }

    function force_reboot(uuids) {
        $.ajax({
            url : '/api/guests/_force_reboot/' + uuids.join(','),
            type : 'PUT',
            contentType: "application/json; charset=utf-8",
            error : function() {
                alter_danger('实例强制重启指令发送失败！');
            },
            success : function() {
                alter_success('实例强制重启指令发送成功！');
            }
        });
    }

    function shutdown(uuids) {
        $.ajax({
            url : '/api/guests/_shutdown/' + uuids.join(','),
            type : 'PUT',
            contentType: "application/json; charset=utf-8",
            error : function() {
                alter_danger('实例停止指令发送失败！');
            },
            success : function() {
                alter_success('实例停止指令发送成功！');
            }
        });
    }

    function force_shutdown(uuids) {
        $.ajax({
            url : '/api/guests/_force_shutdown/' + uuids.join(','),
            type : 'PUT',
            contentType: "application/json; charset=utf-8",
            error : function() {
                alter_danger('实例强制停止指令发送失败！');
            },
            success : function() {
                alter_success('实例强制停止指令发送成功！');
            }
        });
    }

    function create_snapshot(uuid, label) {
        $.ajax({
            url : '/api/snapshot',
            type : 'POST',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data : JSON.stringify({guest_uuid: uuid, label: label}),
            error : function(data, textStatus, xhr) {
                alter_danger('实例创建快照指令发送失败！');
            },
            success : function(data, textStatus, xhr) {
                alter_success('实例创建快照指令发送成功！');
                setTimeout(function() {
                    window.location.href="/snapshots";
                }, 1000);
            }
        });
    }

    function suspend(uuids) {
        $.ajax({
            url : '/api/guests/_suspend/' + uuids.join(','),
            type : 'PUT',
            contentType: "application/json; charset=utf-8",
            error : function() {
                alter_danger('实例暂停指令发送失败！');
            },
            success : function() {
                alter_success('实例暂停指令发送成功！');
            }
        });
    }

    function resume(uuids) {
        $.ajax({
            url : '/api/guests/_resume/' + uuids.join(','),
            type : 'PUT',
            contentType: "application/json; charset=utf-8",
            error : function() {
                alter_danger('实例恢复指令发送失败！');
            },
            success : function() {
                alter_success('实例恢复指令发送成功！');
            }
        });
    }

    function allocate_bandwidth(uuids, bandwidth, bandwidth_unit) {
        $.ajax({
            url : '/api/guests/_allocate_bandwidth/' + uuids.join(',') + '/' + bandwidth + '/' + bandwidth_unit,
            type : 'PUT',
            contentType: "application/json; charset=utf-8",
            error : function() {
                alter_danger('实例分配带宽指令发送失败！');
            },
            success : function() {
                alter_success('实例分配带宽指令发送成功！');
            }
        });
    }

    function adjust_ability(uuids, cpu, memory) {
        $.ajax({
            url : '/api/guests/_adjust_ability/' + uuids.join(',') + '/' + cpu + '/' + memory,
            type : 'PUT',
            contentType: "application/json; charset=utf-8",
            error : function() {
                alter_danger('实例变更配置指令发送失败！');
            },
            success : function() {
                alter_success('实例变更配置指令发送成功！');
            }
        });
    }

    function remove(uuids) {
        $.ajax({
            url : '/api/guests/' + uuids.join(','),
            type : 'DELETE',
            contentType: "application/json; charset=utf-8",
            error : function() {
                alter_danger('实例删除指令发送失败！');
            },
            success : function() {
                alter_success('实例删除指令发送成功！');
            }
        });
    }

    function migrate(uuids, host) {
        $.ajax({
            url : '/api/guests/_migrate/' + uuids.join(',') + '/' + host,
            type : 'PUT',
            contentType: "application/json; charset=utf-8",
            error : function() {
                alter_danger('实例迁移指令发送失败！');
            },
            success : function() {
                alter_success('实例迁移指令发送成功！');
            }
        });
    }

    function reset_password(uuids, password) {
        $.ajax({
            url : '/api/guests/_reset_password/' + uuids.join(',') + '/' + password,
            type : 'PUT',
            contentType: "application/json; charset=utf-8",
            error : function() {
                alter_danger('实例重置密码指令发送失败！');
            },
            success : function() {
                alter_success('实例重置密码指令发送成功！');
            }
        });
    }

    function boot_at(me) {
        var uuid = $('#instance_uuid').val();
        boot([uuid]);
        $('#boot_modal').modal('hide');
    }

    function reboot_at(me) {
        var uuid = $('#instance_uuid').val();
        reboot([uuid]);
        $('#reboot_modal').modal('hide');
    }

    function force_reboot_at(me) {
        var uuid = $('#instance_uuid').val();
        force_reboot([uuid]);
        $('#force_reboot_modal').modal('hide');
    }

    function shutdown_at(me) {
        var uuid = $('#instance_uuid').val();
        shutdown([uuid]);
        $('#shutdown_modal').modal('hide');
    }

    function force_shutdown_at(me) {
        var uuid = $('#instance_uuid').val();
        force_shutdown([uuid]);
        $('#force_shutdown_modal').modal('hide');
    }

    function create_snapshot_at(me) {
        var uuid = $('#instance_uuid').val();
        var label = $('#snapshot_label').val();
        create_snapshot(uuid, label);
        $('#create_snapshot_modal').modal('hide');
    }

    function suspend_at(me) {
        var uuid = $('#instance_uuid').val();
        suspend([uuid]);
        $('#suspend_modal').modal('hide');
    }

    function resume_at(me) {
        var uuid = $('#instance_uuid').val();
        resume([uuid]);
        $('#resume_modal').modal('hide');
    }

    function allocate_bandwidth_at(me) {
        var uuid = $('#instance_uuid').val();
        allocate_bandwidth([uuid], $('#bandwidth').val(), $('#bandwidth_unit').val());
        $('#allocate_bandwidth_modal').modal('hide');
    }

    function adjust_ability_at(me) {
        var uuid = $('#instance_uuid').val();
        var adjust_ability_value = $('#adjust_ability_modal input:radio[name="ability"]:checked').val();

        adjust_ability_value = adjust_ability_value.match(/^(\d+)c(\d+)g$/i);

        if (adjust_ability_value === null) {
            alter_danger('实例变更配置失败，指定的配置取值有误！');
            return
        }

        var cpu = adjust_ability_value[1];
        var memory = adjust_ability_value[2];

        adjust_ability([uuid], cpu, memory);

        $('#adjust_ability_modal').modal('hide');
    }

    function delete_at(me) {
        var uuid = $('#instance_uuid').val();
        remove([uuid]);
        $('#delete_modal').modal('hide');
    }

    function migrate_go() {
        var migrate_type = $('#migrate_type').val();
        var uuids = [];
        if (migrate_type === 'single') {
            uuids = [$('#migrate_instance_uuid').val()];
        } else {
            uuids = get_checked_uuids();
        }
        var host = $('#migrate_host').val();
        $('#migrate_modal').modal('hide');
        migrate([uuids], host);
    }

    function reset_password_go() {
        var migrate_type = $('#reset_password_type').val();
        var uuids = [];
        if (migrate_type === 'single') {
            uuids = [$('#reset_password_instance_uuid').val()];
        } else {
            uuids = get_checked_uuids();
        }
        var password = $('#new_password').val();
        $('#reset_password_modal').modal('hide');
        reset_password([uuids], password);
    }

    function get_selected_uuids() {
        var selected_element = get_selected_element(true);
        var uuids = [];

        selected_element.each(function(i, e) {
            var uuid = $(e).parent().prev().text();
            uuids.push(uuid);
        });

        return uuids;
    }

    function get_checked_uuids() {
        var uuids = get_selected_uuids();

        if (uuids.length < 1) {
            alter_warning('未选择任何可操作的实例！');
            return false;
        }

        return uuids;
    }

    function batch_boot() {
        var uuids = get_checked_uuids();
        if (uuids) {
            boot(uuids);
        }
        $('#batch_boot_modal').modal('hide');
    }

    function batch_reboot() {
        var uuids = get_checked_uuids();
        if (uuids) {
            reboot(uuids);
        }
        $('#batch_reboot_modal').modal('hide');
    }

    function batch_force_reboot() {
        var uuids = get_checked_uuids();
        if (uuids) {
            force_reboot(uuids);
        }
        $('#batch_force_reboot_modal').modal('hide');
    }

    function batch_shutdown() {
        var uuids = get_checked_uuids();
        if (uuids) {
            shutdown(uuids);
        }
        $('#batch_shutdown_modal').modal('hide');
    }

    function batch_force_shutdown() {
        var uuids = get_checked_uuids();
        if (uuids) {
            force_shutdown(uuids);
        }
        $('#batch_force_shutdown_modal').modal('hide');
    }

    function batch_suspend() {
        var uuids = get_checked_uuids();
        if (uuids) {
            suspend(uuids);
        }
        $('#batch_suspend_modal').modal('hide');
    }

    function batch_resume() {
        var uuids = get_checked_uuids();
        if (uuids) {
            resume(uuids);
        }
        $('#batch_resume_modal').modal('hide');
    }

    function batch_allocate_bandwidth() {
        var uuids = get_checked_uuids();
        if (uuids) {
            allocate_bandwidth(uuids, $('#batch_bandwidth').val(), $('#batch_bandwidth_unit').val());
        }
        $('#batch_allocate_bandwidth_modal').modal('hide');
    }

    function batch_adjust_ability() {
        var uuids = get_checked_uuids();

        var adjust_ability_value = $('#batch_adjust_ability_modal input:radio[name="ability"]:checked').val();

        adjust_ability_value = adjust_ability_value.match(/^(\d+)c(\d+)g$/i);

        if (adjust_ability_value === null) {
            alter_danger('实例批量变更配置失败，指定的配置取值有误！');
            return
        }

        var cpu = adjust_ability_value[1];
        var memory = adjust_ability_value[2];

        if (uuids) {
            adjust_ability(uuids, cpu, memory);
        }

        $('#batch_adjust_ability_modal').modal('hide');
    }

    function batch_delete() {
        var uuids = get_checked_uuids();
        if (uuids) {
            remove(uuids);
        }
        $('#batch_delete_modal').modal('hide');
    }

    var show_real_password = false;
    function change_display_password(me) {
        if (show_real_password) {
            show_real_password = false;
            $(me).removeClass("icon-elusive-eye").addClass("icon-elusive-eye-off");
            $('.real_password').toggle();
            $('.unreal_password').toggle();
        } else {
            show_real_password = true;
            $(me).removeClass("icon-elusive-eye-off").addClass("icon-elusive-eye");
            $('.unreal_password').toggle();
            $('.real_password').toggle();
        }
    }

    function change_display_password_for_row(me) {
        if ($(me).hasClass("icon-elusive-eye")) {
            $(me).removeClass("icon-elusive-eye").addClass("icon-elusive-eye-off");
            $(me).parent().children(".real_password").toggle();
            $(me).parent().children(".unreal_password").toggle();
        } else {
            $(me).removeClass("icon-elusive-eye-off").addClass("icon-elusive-eye");
            $(me).parent().children(".unreal_password").toggle();
            $(me).parent().children(".real_password").toggle();
        }
    }

    function change_display_password_for_renew(me) {
        if (show_real_password_for_renew) {
            show_real_password_for_renew = false;
            $(me).removeClass("icon-elusive-eye").addClass("icon-elusive-eye-off");
            $('#new_password').attr({type: "password"});
        } else {
            show_real_password_for_renew = true;
            $(me).removeClass("icon-elusive-eye-off").addClass("icon-elusive-eye");
            $('#new_password').attr({type: "text"});
        }
    }

    function select_this(me) {
        $(me).parent().parent().children().removeClass('active');
        $(me).parent().addClass('active');

        $('#view_by_original, #view_by_project').css('display', 'none');

        if (me.id === 'view_by_project_label') {
            $('#view_by_project').css('display', 'grid');
            history.replaceState(null, null, window.location.pathname);
            window.location.hash = "project";
            refresh_project();
        } else {
            $('#view_by_original').css('display', 'unset');
            history.replaceState(null, null, ' ');
        }
    }

    function nav_to_sheet_tag() {
        var view_by_original_label = $('#view_by_original_label');
        var view_by_project_label = $('#view_by_project_label');

        view_by_original_label.parent().parent().children().removeClass('active');

        $('#view_by_original, #view_by_project').css('display', 'none');

        if (sheet_tag.indexOf('#project') != -1) {
            view_by_project_label.parent().addClass('active');
            $('#view_by_project').css('display', 'grid');
            refresh_project();
        } else {
            view_by_original_label.parent().addClass('active');
            $('#view_by_original').css('display', 'unset');
        }
    }

    function project_create() {
        $('#create_project_modal').modal('hide');

        var data = {
            name: $('#project_create_name').val(),
            description: $('#project_create_desc').val()
        };

        $.ajax({
            url : '/api/project',
            type : 'POST',
            contentType: "application/json; charset=utf-8",
            async: false,
            dataType: "json",
            data : JSON.stringify(data),
            error : function(data, textStatus, xhr) {
                alter_warning('创建项目失败！');
                alter_danger(data.responseText);
            },
            success : function(data, textStatus, xhr) {
                alter_success('您所提交的项目已创建。页面将在3秒钟后自动跳转！');
            }
        });

        setTimeout(function() {
            window.location.reload();
        }, 3000);
    }

    function go_into_project(me) {
        var project_id = $(me).data('project_id');
        window.location.hash = ['project', project_id].join('#');
        refresh_project();
    }

    function refresh_projects_card() {
        $.ajax({
            url : '/api/projects',
            type : 'GET',
            contentType: "application/json; charset=utf-8",
            dataType: 'json',
            error : function() {
            },
            success : function(data, textStatus, xhr) {
                $('#project_tool_bar').css('display', 'unset');
                $('#projects_card').css('display', 'unset');
                $('#projects_card').empty();
                $.each(data.data, function(k, v) {
                    $('#projects_card').append(
                        '<a class="project" href="javascript:;" onclick="go_into_project(this);" data-project_id="' + v['id'] + '"><span class="project_name">' + v['name'] + '</span></a>'
                    );
                });
            }
        });
    }

    function exchange_disabled(status, set) {
        if (status in set) {
            return 'disabled'
        }
    }

    function exchange_by_snapshot_not_creatable_disabled(status) {
        if (!status) {
            return 'disabled'
        }
    }

    function exchange_guest_for_tr(guest) {
        return '<tr role="row" class="odd" onmouseover="row_onmouseover(this);" onmouseout="row_onmouseout(this);">' +
                '<td style="display: none;">' + guest.uuid + '</td>' +
                '<td><input title="选中" type="checkbox"></td>' +
                '<td width="180px;">' +
                    '<div><a href="/guest/detail/' + guest.uuid + '">' + guest.label + '</a></div>' +
                    '<div><p style="display: inline-block;">' + guest.remark + '</p>' +
                        '<a href="javascript:;" class="edit_remark_trigger" data-toggle="modal" data-target="#edit_remark_modal" style="display: none; float: right;">' +
                            '<span class="glyph-icon icon-elusive-pencil" style="width: 20px; height: 20px; margin-left: 10px; border-radius: 0; border: 1px solid rgb(220, 233, 255); background-color: #ffffff;"></span>' +
                        '</a>' +
                    '</div>' +
                '</td>' +
                '<td width="40px" style="padding-left: 12px;">' +
                    '<span class="' + guest.html.logo + '" title="' + guest.html.os_template_label + '"></span>' +
                '</td>' +
                '<td>' + guest.html.status + '</td>' +
                '<td>' + guest.hostname + '</td>' +
                '<td>' +
                    'CPU :&nbsp;&nbsp;' + guest.cpu + '&nbsp;核<br />' +
                    '内存 :&nbsp;&nbsp;' + guest.memory + '&nbsp;GB<br />' +
                    '带宽 :&nbsp;' + guest.html.bandwidth + '</td>' +
                '<td>' + guest.ip + '</td>' +
                '<td width="150px;"><a href="javascript:;" class="glyph-icon icon-elusive-eye-off" onclick="change_display_password_for_row(this);" style="color: #014c8c;"></a><span class="unreal_password">******</span><span class="real_password" style="display: none;">' + guest.password + '</span></td>' +
                '<td>' +
                    '<div class="dropdown inline-block">' +
                        '<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">更多</a>' +
                    '<ul class="dropdown-menu">' +
                    '<li class="' + exchange_disabled(guest.status, [5, 6, 7]) + '">' +
                        '<a href="javascript:;" data-toggle="modal" data-target="#boot_modal"' +
                            'onclick="$(\'#instance_uuid\').val($($(this).parent().parent().parent().parent().parent().children()[0]).text());' +
                            '$(\'#boot_instance_desc\').text($($(this).parent().parent().parent().parent().parent().children()[2]).find(\'div a\')[0].textContent + \'/\' + $($(this).parent().parent().parent().parent().parent().children()[2]).find(\'div p\')[0].textContent)">' +
                            '启动' +
                        '</a>' +
                    '</li>' +
                    '<li class="' + exchange_disabled(guest.status, [2]) + '">' +
                        '<a href="javascript:;" data-toggle="modal" data-target="#reboot_modal"' +
                            'onclick="$(\'#instance_uuid\').val($($(this).parent().parent().parent().parent().parent().children()[0]).text());' +
                            '$(\'#reboot_instance_desc\').text($($(this).parent().parent().parent().parent().parent().children()[2]).find(\'div a\')[0].textContent + \'/\' + $($(this).parent().parent().parent().parent().parent().children()[2]).find(\'div p\')[0].textContent)">' +
                            '重启' +
                        '</a>' +
                    '</li>' +
                    '<li class="' + exchange_disabled(guest.status, [2]) + '">' +
                        '<a href="javascript:;" data-toggle="modal" data-target="#force_reboot_modal"' +
                            'onclick="$(\'#instance_uuid\').val($($(this).parent().parent().parent().parent().parent().children()[0]).text());' +
                            '$(\'#force_reboot_instance_desc\').text($($(this).parent().parent().parent().parent().parent().children()[2]).find(\'div a\')[0].textContent + \'/\' + $($(this).parent().parent().parent().parent().parent().children()[2]).find(\'div p\')[0].textContent)">' +
                            '强制重启' +
                        '</a>' +
                    '</li>' +
                    '<li class="' + exchange_disabled(guest.status, [2]) + '">' +
                        '<a href="javascript:;" data-toggle="modal" data-target="#shutdown_modal"' +
                            'onclick="$(\'#instance_uuid\').val($($(this).parent().parent().parent().parent().parent().children()[0]).text());' +
                            '$(\'#shutdown_instance_desc\').text($($(this).parent().parent().parent().parent().parent().children()[2]).find(\'div a\')[0].textContent + \'/\' + $($(this).parent().parent().parent().parent().parent().children()[2]).find(\'div p\')[0].textContent)">' +
                            '停止' +
                        '</a>' +
                    '</li>' +
                    '<li class="' + exchange_disabled(guest.status, [2]) + '">' +
                        '<a href="javascript:;" data-toggle="modal" data-target="#force_shutdown_modal"' +
                            'onclick="$(\'#instance_uuid\').val($($(this).parent().parent().parent().parent().parent().children()[0]).text());' +
                            '$(\'#force_shutdown_instance_desc\').text($($(this).parent().parent().parent().parent().parent().children()[2]).find(\'div a\')[0].textContent + \'/\' + $($(this).parent().parent().parent().parent().parent().children()[2]).find(\'div p\')[0].textContent)">' +
                            '强制停止' +
                        '</a>' +
                    '</li>' +
                    '<li class="divider"></li>' +
                    '<li class="' + exchange_by_snapshot_not_creatable_disabled(guest.snapshot.creatable) + '">' +
                        '<a href="javascript:;" data-toggle="modal" data-target="#create_snapshot_modal"' +
                            'onclick="$(\'#instance_uuid\').val($($(this).parent().parent().parent().parent().parent().children()[0]).text());' +
                            '$(\'#create_snapshot_instance_desc\').text($($(this).parent().parent().parent().parent().parent().children()[2]).find(\'div a\')[0].textContent + \'/\' + $($(this).parent().parent().parent().parent().parent().children()[2]).find(\'div p\')[0].textContent);' +
                            '$(\'#snapshot_label\').val($($(this).parent().parent().parent().parent().parent().children()[2]).find(\'div a\')[0].textContent + \'/\' + $($(this).parent().parent().parent().parent().parent().children()[2]).find(\'div p\')[0].textContent)">' +
                            '创建快照' +
                        '</a>' +
                    '</li>' +
                    '<li class="divider"></li>' +
                    '<li class="' + exchange_disabled(guest.status, [2]) + '">' +
                        '<a href="javascript:;" data-toggle="modal" data-target="#suspend_modal"' +
                            'onclick="$(\'#instance_uuid\').val($($(this).parent().parent().parent().parent().parent().children()[0]).text());' +
                            '$(\'#suspend_instance_desc\').text($($(this).parent().parent().parent().parent().parent().children()[2]).find(\'div a\')[0].textContent + \'/\' + $($(this).parent().parent().parent().parent().parent().children()[2]).find(\'div p\')[0].textContent)">' +
                            '暂停' +
                        '</a>' +
                    '</li>' +
                    '<li class="' + exchange_disabled(guest.status, [4]) + '">' +
                        '<a href="javascript:;" data-toggle="modal" data-target="#resume_modal"' +
                            'onclick="$(\'#instance_uuid\').val($($(this).parent().parent().parent().parent().parent().children()[0]).text());' +
                            '$(\'#resume_instance_desc\').text($($(this).parent().parent().parent().parent().parent().children()[2]).find(\'div a\')[0].textContent + \'/\' + $($(this).parent().parent().parent().parent().parent().children()[2]).find(\'div p\')[0].textContent)">' +
                            '恢复' +
                        '</a>' +
                    '</li>' +
                    '<li class="divider"></li>' +
                    '<li class="' + exchange_disabled(guest.status, [1, 2]) + '">' +
                        '<a href="/guest/vnc/' + guest.uuid+ '" target="_blank">远程连接</a>' +
                    '</li>' +
                    '<li class="divider"></li>' +
                    '<li class="dropdown-submenu prepared-by">' +
                        '<a href="javascript:;">变更编制</a>' +
                            '<ul class="dropdown-menu" style="position: absolute; transform: translate3d(-80px, 0px, 0px); top: 0px; left: 0px; will-change: transform;">' +
                            '</ul>' +
                    '</li>' +
                    '<li class="divider"></li>' +
                    '<li class="">' +
                        '<a href="javascript:;" data-toggle="modal" data-target="#allocate_bandwidth_modal"' +
                            'onclick="$(\'#instance_uuid\').val($($(this).parent().parent().parent().parent().parent().children()[0]).text());' +
                            '$(\'#allocate_bandwidth_instance_desc\').text($($(this).parent().parent().parent().parent().parent().children()[2]).find(\'div a\')[0].textContent + \'/\' + $($(this).parent().parent().parent().parent().parent().children()[2]).find(\'div p\')[0].textContent)">' +
                            '分配带宽' +
                        '</a>' +
                    '</li>' +
                    '<li class="' + exchange_disabled(guest.status, [6]) + '">' +
                        '<a href="javascript:;" data-toggle="modal" data-target="#adjust_ability_modal"' +
                            'onclick="$(\'#instance_uuid\').val($($(this).parent().parent().parent().parent().parent().children()[0]).text());' +
                            '$(\'#adjust_ability_instance_desc\').text($($(this).parent().parent().parent().parent().parent().children()[2]).find(\'div a\')[0].textContent + \'/\' + $($(this).parent().parent().parent().parent().parent().children()[2]).find(\'div p\')[0].textContent)">' +
                            '变更配置' +
                        '</a>' +
                    '<li class="divider"></li>' +
                    '<li class="' + exchange_disabled(guest.status, [2]) + '">' +
                        '<a href="javascript:;" data-toggle="modal" data-target="#reset_password_modal"' +
                            'onclick="$(\'#reset_password_type\').val(\'single\')">密码重置</a>' +
                    '</li>' +
                    '<li class="' + exchange_disabled(guest.status, [2, 4, 5, 6, 7]) + '">' +
                        '<a href="javascript:;" data-toggle="modal" data-target="#migrate_modal"' +
                            'onclick="$(\'#migrate_type\').val(\'single\')">' +
                                '迁移到' +
                        '</a>' +
                    '</li>' +
                    '<li class="divider"></li>' +
                    '<li class=" ' + exchange_disabled(guest.status, [5, 6, 7, 255]) + '">' +
                        '<a href="javascript:;" data-toggle="modal" data-target="#delete_modal"' +
                            'onclick="$(\'#instance_uuid\').val($($(this).parent().parent().parent().parent().parent().children()[0]).text());' +
                            '$(\'#delete_instance_desc\').text($($(this).parent().parent().parent().parent().parent().children()[2]).find(\'div a\')[0].textContent + \'/\' + $($(this).parent().parent().parent().parent().parent().children()[2]).find(\'div p\')[0].textContent)">' +
                                '删除' +
                        '</a>' +
                    '</li>' +
                    '</ul>' +
                    '</div>' +
                '</td>' +
            '</tr>'
    }

    function get_service_html(service_id) {
        var html = '';

        $.ajax({
            url : '/api/guests?filter=service_id:eq:' + service_id,
            type : 'GET',
            contentType: "application/json; charset=utf-8",
            dataType: 'json',
            async: false,
            error : function() {
            },
            success : function(data, textStatus, xhr) {
                $.each(data.data, function(k, v) {
                    html += exchange_guest_for_tr(v);
                });
            }
        });
        return html
    }

    function refresh_services(project_id) {
        $('#project_services').css('display', 'unset');
        $('#project_services').empty();

        $.ajax({
            url : '/api/projects/' + project_id,
            type : 'GET',
            contentType: "application/json; charset=utf-8",
            async: false,
            dataType: 'json',
            error : function() {
            },
            success : function(data, textStatus, xhr) {
                $('#project_desc').css('display', 'unset');
                $('#project_desc').text(data.data['description']);
                $('#project_services').append(
                    '<div id="service_tool_bar" class="row" style="padding: 10px 10px 10px 0; width: 100%; display: unset;">' +
                    '    <div class="col-sm-12" style="padding-right: 0;">' +
                    '        <div class="pull-right">' +
                    '            <a class="btn btn-info" href="javascript:;" data-toggle="modal" data-target="#create_service_modal" style="border-radius: 0; padding-left: 40px; padding-right: 40px;">添加服务组</a>' +
                    '        </div>' +
                    '    </div>' +
                    '</div>'
                );

                $.each(data.data.services, function(k, v) {
                    var html = '<div class="project-service-name">' + v['name'] + '</div>' +
                        '<div>' +
                        '    <table class="table-hover table-bordered-project-service guest_list" cellspacing="0" width="100%" role="grid"' +
                        '           style="width: 100%; margin-bottom: 4px; border-bottom-width: 0;">' +
                        '        <tbody>';
                    html += get_service_html(v['id']);
                    html += '        </tbody>' +
                        '    </table>' +
                        '</div>';
                    $('#project_services').append(html);
                });
            }
        });
    }

    function refresh_project() {
        var project_id = window.location.hash.replace(/\#/, "").split('#');

        $('#project_tool_bar').css('display', 'none');
        $('#projects_card').css('display', 'none');
        $('#projects_tab').css('display', 'none');
        $('#project_desc').css('display', 'none');
        $('#project_services').css('display', 'none');

        if (project_id.length === 2) {
            project_id = project_id[1];

            $.ajax({
                url : '/api/projects',
                type : 'GET',
                contentType: "application/json; charset=utf-8",
                async: false,
                dataType: 'json',
                error : function() {
                },
                success : function(data, textStatus, xhr) {
                    $('#projects_tab').css('display', 'unset');
                    $('#projects_tab').empty();
                    $('#projects_tab').append('<ul class="nav nav-tabs project-nav-tabs mrg25B"></ul>');
                    $.each(data.data, function(k, v) {
                        if (v['id'].toString() === project_id) {
                            $('#projects_tab > ul').append(
                                '<li class="active"><a href="javascript:;" onclick="go_into_project(this);" data-project_id="' + v['id'] + '">' + v['name'] + '</a></li>'
                            );
                        } else {
                            $('#projects_tab > ul').append(
                                '<li><a href="javascript:;" onclick="go_into_project(this);" data-project_id="' + v['id'] + '">' + v['name'] + '</a></li>'
                            );
                        }
                    });
                }
            });

            refresh_services(project_id);
            refresh_prepared_by_menu();
        } else {
            refresh_projects_card();
        }
    }

    function service_create() {
        $('#create_service_modal').modal('hide');

        var data = {
            project_id: $('#projects_tab ul li.active a').data('project_id'),
            name: $('#service_create_name').val(),
            description: $('#service_create_desc').val()
        };

        $.ajax({
            url : '/api/service',
            type : 'POST',
            contentType: "application/json; charset=utf-8",
            async: false,
            dataType: "json",
            data : JSON.stringify(data),
            error : function(data, textStatus, xhr) {
                alter_warning('创建服务组失败！');
                alter_danger(data.responseText);
            },
            success : function(data, textStatus, xhr) {
                alter_success('您所提交的服务组已创建。页面将在3秒钟后自动跳转！');
            }
        });

        setTimeout(function() {
            window.location.reload();
        }, 3000);
    }

    function get_services_menu(services) {
        var html = '<ul class="dropdown-menu" style="position: absolute; transform: translate3d(-80px, 0px, 0px); top: 0px; left: 0px; will-change: transform;">';
        $.each(services, function(index, value) {
            html += '<li><a href="javascript:;" onclick="$(\'#instance_uuid\').val($($(this).parent().parent().parent().parent().parent().parent().parent().parent().parent().children()[0]).text());change_service(this);" data-service_id="' + value.id + '">' + value.name + '</a></li>';
        });
        html += '</ul>';
        return html;
    }

    function refresh_prepared_by_menu() {
        $.ajax({
            url : '/api/projects',
            type : 'GET',
            contentType: "application/json; charset=utf-8",
            async: false,
            dataType: 'json',
            error : function() {
            },
            success : function(data, textStatus, xhr) {
                var prepared_by_menu = $('.prepared-by > ul');
                prepared_by_menu.empty();
                $.each(data.data, function(k, v) {
                    var html = '<li class="dropdown-submenu">';
                    html += '<a href="javascript:;">' + v.name + '</a>';
                    html += get_services_menu(v.services);
                    html += '</li>';
                    prepared_by_menu.append(html);
                });
            }
        });
    }

    function change_service(me) {
        var uuid = $('#instance_uuid').val();
        var service_id = $(me).data('service_id');
        $.ajax({
            url : '/api/guest/' + uuid,
            type : 'PATCH',
            contentType: "application/json; charset=utf-8",
            data : JSON.stringify({
                service_id: service_id
            }),
            error : function() {
                alter_danger('实例编制更新失败！');
            },
            success : function() {
                alter_success('实例编制更新成功。页面将在3秒钟后自动跳转！');
            }
        });

        setTimeout(function() {
            window.location.reload();
        }, 3000);
    }
</script>
<div class="panel">
    <div class="panel-body">
        <ul class="nav nav-tabs mrg25B">
            <li class="active"><a href="javascript:;" onclick="select_this(this);" id="view_by_original_label">原始视图</a></li>
            <li><a href="javascript:;" onclick="select_this(this);" id="view_by_project_label">项目视图</a></li>
        </ul>
        <div>
            <div id="view_by_original" class="dataTables_wrapper form-inline">
                <div class="row" style="padding: 10px 10px 10px 0; width: 100%;">
                    <div class="col-sm-12" style="padding-right: 0;">
                        <div id="datatable-row-highlight_filter" class="dataTables_filter" style="display: inline-block;">
                            <input id="content_search" type="search" class="form-control" placeholder="模糊搜索..." value="{%- if keyword -%} {{ keyword }} {%- endif -%}" style="margin-left: 0; border-radius: 0;">
                        </div>
                        <div class="pull-right">
                            <button class="btn btn-default" onclick="refresh()" style="border-radius: 0;"><span class="glyph-icon icon-elusive-arrows-cw"></span></button>
                            <a class="btn btn-info add-page-transition" href="/guests/create" data-transition="pt-page-moveFromRight-init" style="border-radius: 0; padding-left: 40px; padding-right: 40px;">创建实例</a>
                        </div>
                    </div>
                </div>
                <table class="table table-bordered table-hover guest_list" cellspacing="0" width="100%" role="grid"
                       style="width: 100%; margin-bottom: 0; border-bottom-width: 0;">
                <thead>
                <tr role="row">
                    <th style="display: none;">UUID</th>
                    <th><input class="all_selector" title="选取所有" type="checkbox"></th>
                    <th width="180px;">名称</th>
                    <th></th>
                    <th>状态</th>
                    <th>计算节点</th>
                    <th>配置</th>
                    <th>IP</th>
                    <th width="150px;">密码&nbsp;&nbsp;<a href="#" class="glyph-icon icon-elusive-eye-off" onclick="change_display_password(this);" style="color: #014c8c;"></a></th>
                    <th>创建时间</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                {% for item in guests %}
                <tr role="row" class="odd" onmouseover="row_onmouseover(this);" onmouseout="row_onmouseout(this);">
                    <td style="display: none;">{{ item.uuid }}</td>
                    <td><input title="选中" type="checkbox"></td>
                    <td>
                        <div>
                            <a href="/guest/detail/{{ item.uuid }}">{{ item.label }}</a>
                        </div>
                        <div>
                            <p style="display: inline-block;">{{ item.remark }}</p>
                            <a href="javascript:;" class="edit_remark_trigger" data-toggle="modal" data-target="#edit_remark_modal" style="display: none; float: right;">
                                <span class="glyph-icon icon-elusive-pencil" style="width: 20px; height: 20px; margin-left: 10px; border-radius: 0; border: 1px solid rgb(220, 233, 255); background-color: #ffffff;"></span>
                            </a>
                        </div>
                    </td>
                    <td>
                        {% if os_templates_image_mapping_by_id[item.os_template_image_id | string].logo == "" %}
                            <span class="{{ os_templates_profile_mapping_by_id[os_templates_image_mapping_by_id[item.os_template_image_id | string].os_template_profile_id].icon }}" title="{{ os_templates_image_mapping_by_id[item.os_template_image_id | string].label }}"></span>
                        {% else %}
                            <span class="{{ os_templates_image_mapping_by_id[item.os_template_image_id | string].logo }}" title="{{ os_templates_image_mapping_by_id[item.os_template_image_id | string].label }}"></span>
                        {% endif %}
                    </td>
                    <td>{{ format_guest_status(item.status, item.progress)|safe }}</td>
                    <td>{{ hosts_mapping_by_node_id[item.node_id | string].hostname }}</td>
                    <td>
                        CPU :&nbsp;&nbsp;{{ item.cpu }}&nbsp;核<br />
                        内存 :&nbsp;&nbsp;{{ item.memory }}&nbsp;GB<br />
                        带宽 :&nbsp;
                            {% if item.bandwidth == 0 %}
                                <span style="font-size: 16px;" title="无限带宽">
                                &nbsp;∞
                                </span>
                            {% elif item.bandwidth > 0 and item.bandwidth < 1000**2 %}
                                {{ item.bandwidth // 1000 }}

                            {% elif item.bandwidth >= 1000**2 and item.bandwidth < 1000**3 %}
                                {{ item.bandwidth // 1000**2 }}

                            {% else %}
                                {{ item.bandwidth // 1000**3 }}

                            {% endif %}

                            {% if item.bandwidth == 0 %}
                            {% elif item.bandwidth > 0 and item.bandwidth < 1000**2 %}
                                Kbps
                            {% elif item.bandwidth >= 1000**2 and item.bandwidth < 1000**3 %}
                                Mbps
                            {% else %}
                                Gbps
                            {% endif %}
                    </td>
                    <td>{{ item.ip }}</td>
                    <td><span class="unreal_password">*********</span><span class="real_password" style="display: none;">{{ item.password }}</span></td>
                    <td>{{ format_datetime_by_tus(item.create_time) }}</td>
                    <td>
                        <div class="dropdown inline-block">
                            <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
                                更多
                            </a>
                            <ul class="dropdown-menu">
                                <li class="{% if item.status not in [5, 6, 7] %} disabled {% endif %}">
                                    <a href="javascript:;" data-toggle="modal" data-target="#boot_modal"
                                       onclick="$('#instance_uuid').val($($(this).parent().parent().parent().parent().parent().children()[0]).text());
                                                $('#boot_instance_desc').text($($(this).parent().parent().parent().parent().parent().children()[2]).find('div a')[0].textContent + '/' + $($(this).parent().parent().parent().parent().parent().children()[2]).find('div p')[0].textContent)">
                                       启动
                                    </a>
                                </li>
                                <li class="{% if item.status not in [2] %} disabled {% endif %}">
                                    <a href="javascript:;" data-toggle="modal" data-target="#reboot_modal"
                                       onclick="$('#instance_uuid').val($($(this).parent().parent().parent().parent().parent().children()[0]).text());
                                                $('#reboot_instance_desc').text($($(this).parent().parent().parent().parent().parent().children()[2]).find('div a')[0].textContent + '/' + $($(this).parent().parent().parent().parent().parent().children()[2]).find('div p')[0].textContent)">
                                       重启
                                    </a>
                                </li>
                                <li class="{% if item.status not in [2] %} disabled {% endif %}">
                                    <a href="javascript:;" data-toggle="modal" data-target="#force_reboot_modal"
                                       onclick="$('#instance_uuid').val($($(this).parent().parent().parent().parent().parent().children()[0]).text());
                                                $('#force_reboot_instance_desc').text($($(this).parent().parent().parent().parent().parent().children()[2]).find('div a')[0].textContent + '/' + $($(this).parent().parent().parent().parent().parent().children()[2]).find('div p')[0].textContent)">
                                       强制重启
                                    </a>
                                </li>
                                <li class="{% if item.status not in [2] %} disabled {% endif %}">
                                    <a href="javascript:;" data-toggle="modal" data-target="#shutdown_modal"
                                       onclick="$('#instance_uuid').val($($(this).parent().parent().parent().parent().parent().children()[0]).text());
                                                $('#shutdown_instance_desc').text($($(this).parent().parent().parent().parent().parent().children()[2]).find('div a')[0].textContent + '/' + $($(this).parent().parent().parent().parent().parent().children()[2]).find('div p')[0].textContent)">
                                       停止
                                    </a>
                                </li>
                                <li class="{% if item.status not in [2] %} disabled {% endif %}">
                                    <a href="javascript:;" data-toggle="modal" data-target="#force_shutdown_modal"
                                       onclick="$('#instance_uuid').val($($(this).parent().parent().parent().parent().parent().children()[0]).text());
                                                $('#force_shutdown_instance_desc').text($($(this).parent().parent().parent().parent().parent().children()[2]).find('div a')[0].textContent + '/' + $($(this).parent().parent().parent().parent().parent().children()[2]).find('div p')[0].textContent)">
                                       强制停止
                                    </a>
                                </li>
                                <li class="divider"></li>
                                <li class="{% if not item.snapshot.creatable %} disabled {% endif %}">
                                    <a href="javascript:;" data-toggle="modal" data-target="#create_snapshot_modal"
                                       onclick="$('#instance_uuid').val($($(this).parent().parent().parent().parent().parent().children()[0]).text());
                                                $('#create_snapshot_instance_desc').text($($(this).parent().parent().parent().parent().parent().children()[2]).find('div a')[0].textContent + '/' + $($(this).parent().parent().parent().parent().parent().children()[2]).find('div p')[0].textContent);
                                                $('#snapshot_label').val($($(this).parent().parent().parent().parent().parent().children()[2]).find('div a')[0].textContent + '/' + $($(this).parent().parent().parent().parent().parent().children()[2]).find('div p')[0].textContent)">
                                        创建快照
                                    </a>
                                </li>
                                <li class="divider"></li>
                                <li class="{% if item.status not in [2] %} disabled {% endif %}">
                                    <a href="javascript:;" data-toggle="modal" data-target="#suspend_modal"
                                       onclick="$('#instance_uuid').val($($(this).parent().parent().parent().parent().parent().children()[0]).text());
                                                $('#suspend_instance_desc').text($($(this).parent().parent().parent().parent().parent().children()[2]).find('div a')[0].textContent + '/' + $($(this).parent().parent().parent().parent().parent().children()[2]).find('div p')[0].textContent)">
                                       暂停
                                    </a>
                                </li>
                                <li class="{% if item.status not in [4] %} disabled {% endif %}">
                                    <a href="javascript:;" data-toggle="modal" data-target="#resume_modal"
                                       onclick="$('#instance_uuid').val($($(this).parent().parent().parent().parent().parent().children()[0]).text());
                                                $('#resume_instance_desc').text($($(this).parent().parent().parent().parent().parent().children()[2]).find('div a')[0].textContent + '/' + $($(this).parent().parent().parent().parent().parent().children()[2]).find('div p')[0].textContent)">
                                       恢复
                                    </a>
                                </li>
                                <li class="divider"></li>
                                <li class="{% if item.status not in [1, 2] %} disabled {% endif %}">
                                    <a href="/guest/vnc/{{ item.uuid }}" target="_blank">远程连接</a>
                                </li>
                                <li class="divider"></li>
                                <li class="dropdown-submenu prepared-by">
                                    <a href="javascript:;">变更编制</a>
                                    <ul class="dropdown-menu" style="position: absolute; transform: translate3d(-80px, 0px, 0px); top: 0px; left: 0px; will-change: transform;">
                                    </ul>
                                </li>
                                <li class="divider"></li>
                                <li class="">
                                    <a href="javascript:;" data-toggle="modal" data-target="#allocate_bandwidth_modal"
                                       onclick="$('#instance_uuid').val($($(this).parent().parent().parent().parent().parent().children()[0]).text());
                                                $('#allocate_bandwidth_instance_desc').text($($(this).parent().parent().parent().parent().parent().children()[2]).find('div a')[0].textContent + '/' + $($(this).parent().parent().parent().parent().parent().children()[2]).find('div p')[0].textContent)">
                                       分配带宽
                                    </a>
                                </li>
                                <li class="{% if item.status not in [6] %} disabled {% endif %}">
                                    <a href="javascript:;" data-toggle="modal" data-target="#adjust_ability_modal"
                                       onclick="$('#instance_uuid').val($($(this).parent().parent().parent().parent().parent().children()[0]).text());
                                                $('#adjust_ability_instance_desc').text($($(this).parent().parent().parent().parent().parent().children()[2]).find('div a')[0].textContent + '/' + $($(this).parent().parent().parent().parent().parent().children()[2]).find('div p')[0].textContent)">
                                       变更配置
                                    </a>
                                <li class="divider"></li>
                                <li class="{% if item.status not in [2] %} disabled {% endif %}">
                                    <a href="javascript:;" data-toggle="modal" data-target="#reset_password_modal"
                                       onclick="$('#reset_password_type').val('single')">
                                        密码重置
                                    </a>
                                </li>
                                <li class="{% if item.status not in [2, 4, 5, 6, 7] %} disabled {% endif %}">
                                    <a href="javascript:;" data-toggle="modal" data-target="#migrate_modal"
                                       onclick="$('#migrate_type').val('single')">
                                        迁移到
                                    </a>
                                </li>
                                <li class="divider"></li>
                                <li class="{% if item.status not in [5, 6, 7, 255] %} disabled {% endif %}">
                                    <a href="javascript:;" data-toggle="modal" data-target="#delete_modal"
                                       onclick="$('#instance_uuid').val($($(this).parent().parent().parent().parent().parent().children()[0]).text());
                                                $('#delete_instance_desc').text($($(this).parent().parent().parent().parent().parent().children()[2]).find('div a')[0].textContent + '/' + $($(this).parent().parent().parent().parent().parent().children()[2]).find('div p')[0].textContent)">
                                        删除
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </td>
                </tr>
                {% endfor %}
                </tbody>
                </table>

                <table class="table table-bordered" style="border-top-width: 0; z-index: 99; position: sticky; bottom: 0;">
                    <tfoot>
                    <tr style="height: 70px;">
                        <th><input type="checkbox" title="选取所有" class="all_selector"></th>
                        <th>
                            <div class="row">
                                <div class="col-sm-6">
                                    <button class="btn btn-default btn-shortcut disabled" data-toggle="modal" data-target="#batch_boot_modal">启动</button>
                                    <button class="btn btn-default btn-shortcut disabled" data-toggle="modal" data-target="#batch_reboot_modal">重启</button>
                                    <button class="btn btn-default btn-shortcut disabled" data-toggle="modal" data-target="#batch_shutdown_modal">停止</button>
                                    <button class="btn btn-default btn-shortcut disabled" data-toggle="modal" data-target="#batch_suspend_modal">暂停</button>
                                    <button class="btn btn-default btn-shortcut disabled" data-toggle="modal" data-target="#batch_resume_modal">恢复</button>
                                    <div class="dropup inline-block">
                                        <button href="javascript:;" class="dropdown-toggle btn btn-default btn-shortcut disabled" data-toggle="dropdown">
                                            更多
                                        </button>
                                        <ul class="dropdown-menu" style="width: 60px;">
                                            <li>
                                                <a href="javascript:;" data-toggle="modal" data-target="#batch_delete_modal">删除</a>
                                            </li>
                                            <li class="divider"></li>
                                            <li>
                                                <a href="javascript:;" onclick="$('#migrate_type').val('batch');"
                                                   data-toggle="modal" data-target="#migrate_modal" >
                                                    迁移到
                                                </a>
                                            </li>
                                            <li>
                                                <a href="javascript:;" onclick="$('#reset_password_type').val('batch');"
                                                   data-toggle="modal" data-target="#reset_password_modal">
                                                    密码重置
                                                </a>
                                            </li>
                                            <li class="divider"></li>
                                            <li>
                                                <a href="javascript:;" data-toggle="modal" data-target="#batch_allocate_bandwidth_modal">分配带宽</a>
                                            </li>
                                            <li>
                                                <a href="javascript:;" data-toggle="modal" data-target="#batch_adjust_ability_modal">变更配置</a>
                                            </li>
                                            <li class="divider"></li>
                                            <li>
                                                <a href="javascript:;" data-toggle="modal" data-target="#batch_force_shutdown_modal">强制停止</a>
                                            </li>
                                            <li>
                                                <a href="javascript:;" data-toggle="modal" data-target="#batch_force_reboot_modal">强制重启</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="col-sm-3" style="font-size: 12px; padding-top: 5px; text-align: right;">
                                    共有{{ paging.total }}条，每页显示：
                                    <select id="page_size" name="datatable-row-highlight_length" title="page_size" class="form-control" style="height: 22px; vertical-align: baseline;">
                                        <option value="10" {% if page_size == 10 %} selected {% endif %}>10</option>
                                        <option value="20" {% if page_size == 20 %} selected {% endif %}>20</option>
                                        <option value="50" {% if page_size == 50  %} selected {% endif %}>50</option>
                                    </select>&nbsp;&nbsp;条
                                </div>
                                <div class="col-sm-3" style="text-align: left;">
                                    <div class="dataTables_paginate paging_bootstrap" id="datatable-row-highlight_paginate">
                                        <ul id="pagination" class="pagination">
                                            <li class="{% if page == 1 %} disabled {% endif %}">
                                                <a href="{{ resource_path }}?page={{ page - 1 }}&page_size={{ page_size }}{% if keyword %}&keyword={{ keyword }}{% endif %}">«</a>
                                            </li>
                                            {% for item in pages %}
                                            <li class="{% if item == page %} active {% endif %}">
                                                <a href="{{ resource_path }}?page={{ item }}&page_size={{ page_size }}{% if keyword %}&keyword={{ keyword }}{% endif %}">{{ item }}</a>
                                            </li>
                                            {% endfor %}
                                            <li class="{% if page == last_page %} disabled {% endif %}">
                                                <a href="{{ resource_path }}?page={{ page + 1 }}&page_size={{ page_size }}{% if keyword %}&keyword={{ keyword }}{% endif %}">»</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </th>
                    </tr>
                    </tfoot>
                </table>
            </div>
            <div id="view_by_project" class="dataTables_wrapper form-inline" style="display: none;">
                <div id="project_tool_bar" class="row" style="padding: 10px 10px 10px 0; width: 100%; display: none;">
                    <div class="col-sm-12" style="padding-right: 0;">
                        <div class="pull-right">
                            <a class="btn btn-info" href="javascript:;" data-toggle="modal" data-target="#create_project_modal" style="border-radius: 0; padding-left: 40px; padding-right: 40px;">新建项目</a>
                        </div>
                    </div>
                </div>
                <div style="margin-top: 20px;">
                    <div id="projects_tab" style="display: none;"></div>
                    <div id="project_desc" style="display: none;"></div>
                    <div id="project_services" style="display: none;"></div>
                    <div id="projects_card" style="display: none;"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="create_project_modal" tabindex="-1" role="dialog" style="margin-top: 100px;">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">创建项目：</h4>
            </div>
            <div class="modal-body" style="padding-top: 0; padding-bottom: 0;">
                <div class="example-box-wrapper">
                    <form id="create_project_form" class="form-horizontal bordered-row" action="javascript:;">
                        <div class="form-group">
                            <div class="col-sm-2"></div>
                            <label class="col-sm-2 control-label"><span class="glyph-icon icon-elusive-compass-circled"></span>&nbsp;&nbsp;名称</label>
                            <div class="col-sm-6">
                                <input id="project_create_name" name="name" type="text" title="项目名称" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-2"></div>
                            <label class="col-sm-2 control-label"><span class="glyph-icon icon-key"></span>&nbsp;&nbsp;描述</label>
                            <div class="col-sm-6">
                                <textarea id="project_create_desc" name="project_desc" title="项目描述" class="form-control"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-4"></div>
                            <div class="col-sm-6 pull-right">
                                <button type="submit" class="btn btn-blue-alt" style="width: 180px; height: 40px; font-size: 16px;" disabled>创建</button>
                                <button class="btn btn-default" style="width: 64px; height: 40px; font-size: 16px;" data-dismiss="modal">取消</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="create_service_modal" tabindex="-1" role="dialog" style="margin-top: 100px;">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">添加服务组：</h4>
            </div>
            <div class="modal-body" style="padding-top: 0; padding-bottom: 0;">
                <div class="example-box-wrapper">
                    <form id="create_service_form" class="form-horizontal bordered-row" action="javascript:;">
                        <div class="form-group">
                            <div class="col-sm-2"></div>
                            <label class="col-sm-2 control-label"><span class="glyph-icon icon-elusive-compass-circled"></span>&nbsp;&nbsp;名称</label>
                            <div class="col-sm-6">
                                <input id="service_create_name" name="name" type="text" title="服务组名称" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-2"></div>
                            <label class="col-sm-2 control-label"><span class="glyph-icon icon-key"></span>&nbsp;&nbsp;描述</label>
                            <div class="col-sm-6">
                                <textarea id="service_create_desc" name="project_desc" title="服务组描述" class="form-control"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-4"></div>
                            <div class="col-sm-6 pull-right">
                                <button type="submit" class="btn btn-blue-alt" style="width: 180px; height: 40px; font-size: 16px;" disabled>创建</button>
                                <button class="btn btn-default" style="width: 64px; height: 40px; font-size: 16px;" data-dismiss="modal">取消</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="edit_remark_modal" tabindex="-1" role="dialog" style="margin-top: 100px;">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">编辑实例名称：</h4>
            </div>
            <div class="modal-body">
                <input id="edit_remark_instance_uuid" title="实例 UUID" class="form-control" name="uuid" hidden>
                <input id="edit_remark" title="实例名称" class="form-control" name="remark">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-primary" onclick="remark_update();">确定</button>
                <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="migrate_modal" tabindex="-1" role="dialog" style="margin-top: 100px;">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">实例迁移至：</h4>
            </div>
            <div class="modal-body">
                <input id="migrate_type" title="迁移类型" class="form-control" name="migrate_type" value="single" hidden>
                <input id="migrate_instance_uuid" title="实例 UUID" class="form-control" name="uuid" hidden>
                <select id="migrate_host" name="migrate_host" title="可迁移计算节点" class="chosen-select">
                </select>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-primary" onclick="migrate_go();">确定</button>
                <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="reset_password_modal" tabindex="-1" role="dialog" style="margin-top: 100px;">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">重置密码：</h4>
            </div>
            <div class="modal-body">
                <div class="form-group" style="height: 20px;">
                    <input id="reset_password_type" title="重置密码类型" class="form-control" name="reset_password_type" value="single" hidden>
                    <input id="reset_password_instance_uuid" title="实例 UUID" class="form-control" name="uuid" hidden>
                    <div class="col-sm-8">
                        <input id="new_password" title="新密码" class="form-control" name="new_password" type="password" placeholder="新密码">
                    </div>
                    <div class="col-sm-2">
                        <button id="show_new_password_button" class="form-control glyph-icon icon-elusive-eye-off" onclick="change_display_password_for_renew(this);" style="color: #014c8c; width: 35px;"></button>
                    </div>
                    <div class="col-sm-2">
                        <button class="form-control glyph-icon icon-elusive-key" onclick="$('#new_password').val(new RandomPassword().create(16));" style="color: #014c8c; width: 35px;"></button>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-primary" onclick="reset_password_go();">确定</button>
                <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<input id="instance_uuid" title="实例 UUID" class="form-control" name="uuid" hidden>

<div class="modal" id="delete_modal" tabindex="-1" role="dialog" style="margin-top: 100px;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">删除虚拟机：</h4>
            </div>
            <div class="modal-body">
                <p>删除的虚拟机将无法找回，上面数据将永久消失。您确定要删除该虚拟机吗？</p>
                <h3 style="color: orangered;" id="delete_instance_desc"></h3>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-primary" onclick="delete_at();">确定</button>
                <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="batch_delete_modal" tabindex="-1" role="dialog" style="margin-top: 100px;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">批量删除虚拟机：</h4>
            </div>
            <div class="modal-body">
                <p></p>
                <p>删除的虚拟机将无法找回，上面数据将永久消失。您确定要执行批量删除选定的虚拟机吗？</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-primary" onclick="batch_delete();">确定</button>
                <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="reboot_modal" tabindex="-1" role="dialog" style="margin-top: 100px;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">重启虚拟机：</h4>
            </div>
            <div class="modal-body">
                <p>您确定要重启该虚拟机吗？</p>
                <h3 style="color: orangered;" id="reboot_instance_desc"></h3>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-primary" onclick="reboot_at();">确定</button>
                <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="batch_reboot_modal" tabindex="-1" role="dialog" style="margin-top: 100px;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">批量重启虚拟机：</h4>
            </div>
            <div class="modal-body">
                <p></p>
                <p>您确定要执行批量重启选定的虚拟机吗？</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-primary" onclick="batch_reboot();">确定</button>
                <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="force_reboot_modal" tabindex="-1" role="dialog" style="margin-top: 100px;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">强制重启虚拟机：</h4>
            </div>
            <div class="modal-body">
                <p>您确定要强制重启该虚拟机吗？</p>
                <h3 style="color: orangered;" id="force_reboot_instance_desc"></h3>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-primary" onclick="force_reboot_at();">确定</button>
                <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="batch_force_reboot_modal" tabindex="-1" role="dialog" style="margin-top: 100px;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">批量强制重启虚拟机：</h4>
            </div>
            <div class="modal-body">
                <p></p>
                <p>您确定要执行批量强制重启选定的虚拟机吗？</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-primary" onclick="batch_force_reboot();">确定</button>
                <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="shutdown_modal" tabindex="-1" role="dialog" style="margin-top: 100px;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">停止虚拟机：</h4>
            </div>
            <div class="modal-body">
                <p>您确定要停止该虚拟机吗？</p>
                <h3 style="color: orangered;" id="shutdown_instance_desc"></h3>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-primary" onclick="shutdown_at();">确定</button>
                <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="batch_shutdown_modal" tabindex="-1" role="dialog" style="margin-top: 100px;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">批量停止虚拟机：</h4>
            </div>
            <div class="modal-body">
                <p></p>
                <p>您确定要执行批量停止选定的虚拟机吗？</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-primary" onclick="batch_shutdown();">确定</button>
                <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="force_shutdown_modal" tabindex="-1" role="dialog" style="margin-top: 100px;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">强制停止虚拟机：</h4>
            </div>
            <div class="modal-body">
                <p>您确定要强制停止该虚拟机吗？</p>
                <h3 style="color: orangered;" id="force_shutdown_instance_desc"></h3>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-primary" onclick="force_shutdown_at();">确定</button>
                <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="batch_force_shutdown_modal" tabindex="-1" role="dialog" style="margin-top: 100px;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">批量强制停止虚拟机：</h4>
            </div>
            <div class="modal-body">
                <p></p>
                <p>您确定要执行批量强制停止选定的虚拟机吗？</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-primary" onclick="batch_force_shutdown();">确定</button>
                <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="create_snapshot_modal" tabindex="-1" role="dialog" style="margin-top: 100px;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">创建快照：</h4>
            </div>
            <div class="modal-body">
                <p>您确定要为该虚拟机创建快照吗？</p>
                <h3 style="color: orangered;" id="create_snapshot_instance_desc"></h3>
                <p></p>
                <input id="snapshot_label" title="快照名称" class="form-control" name="snapshot_label" placeholder="快照名称">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-primary" onclick="create_snapshot_at();">确定</button>
                <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="suspend_modal" tabindex="-1" role="dialog" style="margin-top: 100px;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">暂停虚拟机：</h4>
            </div>
            <div class="modal-body">
                <p>您确定要暂停该虚拟机吗？</p>
                <h3 style="color: orangered;" id="suspend_instance_desc"></h3>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-primary" onclick="suspend_at();">确定</button>
                <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="batch_suspend_modal" tabindex="-1" role="dialog" style="margin-top: 100px;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">批量暂停虚拟机：</h4>
            </div>
            <div class="modal-body">
                <p></p>
                <p>您确定要执行批量暂停选定的虚拟机吗？</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-primary" onclick="batch_suspend();">确定</button>
                <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="resume_modal" tabindex="-1" role="dialog" style="margin-top: 100px;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">恢复暂停的虚拟机：</h4>
            </div>
            <div class="modal-body">
                <p>您确定要恢复暂停的该虚拟机吗？</p>
                <h3 style="color: orangered;" id="resume_instance_desc"></h3>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-primary" onclick="resume_at();">确定</button>
                <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="batch_resume_modal" tabindex="-1" role="dialog" style="margin-top: 100px;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">批量恢复暂停的虚拟机：</h4>
            </div>
            <div class="modal-body">
                <p></p>
                <p>您确定要执行批量恢复暂停的选定的虚拟机吗？</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-primary" onclick="batch_resume();">确定</button>
                <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="boot_modal" tabindex="-1" role="dialog" style="margin-top: 100px;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">启动虚拟机：</h4>
            </div>
            <div class="modal-body">
                <p>您确定要启动该虚拟机吗？</p>
                <h3 style="color: orangered;" id="boot_instance_desc"></h3>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-primary" onclick="boot_at();">确定</button>
                <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="batch_boot_modal" tabindex="-1" role="dialog" style="margin-top: 100px;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">批量启动虚拟机：</h4>
            </div>
            <div class="modal-body">
                <p></p>
                <p>您确定要执行批量启动选定的虚拟机吗？</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-primary" onclick="batch_boot();">确定</button>
                <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="allocate_bandwidth_modal" tabindex="-1" role="dialog" style="margin-top: 100px;">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">给虚拟机重新分配带宽：</h4>
            </div>
            <div class="modal-body" style="padding-top: 0;">
                <div class="example-box-wrapper">
                    <form class="form-horizontal bordered-row">
                        <div class="form-group">
                            <div class="col-sm-1"></div>
                            <label class="col-sm-2 control-label"><span class="glyph-icon icon-elusive-compass-circled"></span>&nbsp;&nbsp;实例名称</label>
                            <div class="col-sm-9">
                                <h3 style="color: orangered;" id="allocate_bandwidth_instance_desc"></h3>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-1"></div>
                            <label class="col-sm-2 control-label"><span class="glyph-icon icon-signal"></span>&nbsp;&nbsp;带宽</label>
                            <div class="col-sm-7">
                                <input id="bandwidth" title="带宽" type="text" name="bandwidth">
                            </div>
                            <div class="col-sm-2" style="bottom: -10px;">
                                <select id="bandwidth_unit" name="bandwidth_unit" title="单位..." class="selectpicker" data-width="80%">
                                    <option value="k">&nbsp;&nbsp;Kbps</option>
                                    <option value="m" selected>&nbsp;&nbsp;Mbps</option>
                                    <option value="g">&nbsp;&nbsp;Gbps</option>
                                </select>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-primary" onclick="allocate_bandwidth_at();">确定</button>
                <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="batch_allocate_bandwidth_modal" tabindex="-1" role="dialog" style="margin-top: 100px;">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">批量分配带宽给虚拟机：</h4>
            </div>
            <div class="modal-body">
                <p></p>
                <p>您确定要给选定的虚拟机重新分配带宽吗？</p>
                <p></p>
                <div class="example-box-wrapper">
                    <form class="form-horizontal bordered-row">
                        <div class="form-group">
                            <div class="col-sm-1"></div>
                            <label class="col-sm-2 control-label"><span class="glyph-icon icon-signal"></span>&nbsp;&nbsp;带宽</label>
                            <div class="col-sm-7">
                                <input id="batch_bandwidth" title="带宽" type="text" name="batch_bandwidth">
                            </div>
                            <div class="col-sm-2" style="bottom: -10px;">
                                <select id="batch_bandwidth_unit" name="batch_bandwidth_unit" title="单位..." class="selectpicker" data-width="80%">
                                    <option value="k">&nbsp;&nbsp;Kbps</option>
                                    <option value="m" selected>&nbsp;&nbsp;Mbps</option>
                                    <option value="g">&nbsp;&nbsp;Gbps</option>
                                </select>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-primary" onclick="batch_allocate_bandwidth();">确定</button>
                <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="adjust_ability_modal" tabindex="-1" role="dialog" style="margin-top: 100px;">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">给虚拟机变更配置：</h4>
            </div>
            <div class="modal-body" style="padding-top: 0;">
                <div class="example-box-wrapper">
                    <form id="adjust_ability_form" class="form-horizontal bordered-row">
                        <div class="form-group">
                            <div class="col-sm-1"></div>
                            <label class="col-sm-2 control-label"><span class="glyph-icon icon-elusive-compass-circled"></span>&nbsp;&nbsp;实例名称</label>
                            <div class="col-sm-9">
                                <h3 style="color: orangered;" id="adjust_ability_instance_desc"></h3>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-1"></div>
                            <label class="col-sm-2 control-label"><span class="glyph-icon icon-elusive-gauge"></span>&nbsp;&nbsp;运算能力</label>
                            <div class="col-sm-9">
                                <div class="btn-ability-line" data-toggle="buttons">
                                    <label class="btn btn-default btn-ability">
                                        <input title="1 CPU 1GB Memory" name="ability" type="radio" value="1c1g">1&nbsp;&nbsp;核&nbsp;&nbsp;1&nbsp;&nbsp;GB
                                    </label>
                                    <label class="btn btn-default btn-ability">
                                        <input title="1 CPU 2GB Memory" name="ability" type="radio" value="1c2g">1&nbsp;&nbsp;核&nbsp;&nbsp;2&nbsp;&nbsp;GB
                                    </label>
                                    <label class="btn btn-default btn-ability">
                                        <input title="2 CPU 2GB Memory" name="ability" type="radio" value="2c2g">2&nbsp;&nbsp;核&nbsp;&nbsp;2&nbsp;&nbsp;GB
                                    </label>
                                    <label class="btn btn-default btn-ability">
                                        <input title="2 CPU 4GB Memory" name="ability" type="radio" value="2c4g">2&nbsp;&nbsp;核&nbsp;&nbsp;4&nbsp;&nbsp;GB
                                    </label>
                                    <label class="btn btn-default btn-ability">
                                        <input title="4 CPU 4GB Memory" name="ability" type="radio" value="4c4g">4&nbsp;&nbsp;核&nbsp;&nbsp;4&nbsp;&nbsp;GB
                                    </label>
                                    <label class="btn btn-default btn-ability">
                                        <input title="4 CPU 8GB Memory" name="ability" type="radio" value="4c8g">4&nbsp;&nbsp;核&nbsp;&nbsp;8&nbsp;&nbsp;GB
                                    </label>
                                    <label class="btn btn-default btn-ability">
                                        <input title="8 CPU 8GB Memory" name="ability" type="radio" value="8c8g">8&nbsp;&nbsp;核&nbsp;&nbsp;8&nbsp;&nbsp;GB
                                    </label>
                                    <label class="btn btn-default btn-ability">
                                        <input title="8 CPU 16GB Memory" name="ability" type="radio" value="8c16g">8&nbsp;&nbsp;核&nbsp;&nbsp;16GB
                                    </label>
                                    <label class="btn btn-default btn-ability">
                                        <input title="1 CPU 16GB Memory" name="ability" type="radio" value="1c16g">1&nbsp;&nbsp;核&nbsp;&nbsp;16GB
                                    </label>
                                    <label class="btn btn-default btn-ability">
                                        <input title="4 CPU 32GB Memory" name="ability" type="radio" value="4c32g">4&nbsp;&nbsp;核&nbsp;&nbsp;32GB
                                    </label>
                                    <label class="btn btn-default btn-ability">
                                        <input title="4 CPU 64GB Memory" name="ability" type="radio" value="4c64g">4&nbsp;&nbsp;核&nbsp;&nbsp;64GB
                                    </label>
                                    <label class="btn btn-default btn-ability">
                                        <input title="8 CPU 64GB Memory" name="ability" type="radio" value="8c64g">8&nbsp;&nbsp;核&nbsp;&nbsp;64GB
                                    </label>
                                    <label class="btn btn-default btn-ability">
                                        <input title="16 CPU 16GB Memory" name="ability" type="radio" value="16c16g">16核&nbsp;&nbsp;16GB
                                    </label>
                                    <label class="btn btn-default btn-ability">
                                        <input title="24 CPU 24GB Memory" name="ability" type="radio" value="24c24g">24核&nbsp;&nbsp;24GB
                                    </label>
                                    <label class="btn btn-default btn-ability">
                                        <input title="32 CPU 32GB Memory" name="ability" type="radio" value="32c32g">32核&nbsp;&nbsp;32GB
                                    </label>
                                    <label class="btn btn-default btn-ability">
                                        <input title="64 CPU 64GB Memory" name="ability" type="radio" value="64c64g">64核&nbsp;&nbsp;64GB
                                    </label>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button id="adjust_ability_form_button" disabled type="button" class="btn btn-sm btn-primary" onclick="adjust_ability_at();">确定</button>
                <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="batch_adjust_ability_modal" tabindex="-1" role="dialog" style="margin-top: 100px;">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">批量变更虚拟机配置：</h4>
            </div>
            <div class="modal-body">
                <p></p>
                <p>您确定要给选定的虚拟机变更配置吗？</p>
                <p></p>
                <div class="example-box-wrapper">
                    <form id="batch_adjust_ability_form" class="form-horizontal bordered-row">
                        <div class="form-group">
                            <div class="col-sm-1"></div>
                            <label class="col-sm-2 control-label"><span class="glyph-icon icon-elusive-gauge"></span>&nbsp;&nbsp;运算能力</label>
                            <div class="col-sm-9">
                                <div class="btn-ability-line" data-toggle="buttons">
                                    <label class="btn btn-default btn-ability">
                                        <input title="1 CPU 1GB Memory" name="ability" type="radio" value="1c1g">1&nbsp;&nbsp;核&nbsp;&nbsp;1&nbsp;&nbsp;GB
                                    </label>
                                    <label class="btn btn-default btn-ability">
                                        <input title="1 CPU 2GB Memory" name="ability" type="radio" value="1c2g">1&nbsp;&nbsp;核&nbsp;&nbsp;2&nbsp;&nbsp;GB
                                    </label>
                                    <label class="btn btn-default btn-ability">
                                        <input title="2 CPU 2GB Memory" name="ability" type="radio" value="2c2g">2&nbsp;&nbsp;核&nbsp;&nbsp;2&nbsp;&nbsp;GB
                                    </label>
                                    <label class="btn btn-default btn-ability">
                                        <input title="2 CPU 4GB Memory" name="ability" type="radio" value="2c4g">2&nbsp;&nbsp;核&nbsp;&nbsp;4&nbsp;&nbsp;GB
                                    </label>
                                    <label class="btn btn-default btn-ability">
                                        <input title="4 CPU 4GB Memory" name="ability" type="radio" value="4c4g">4&nbsp;&nbsp;核&nbsp;&nbsp;4&nbsp;&nbsp;GB
                                    </label>
                                    <label class="btn btn-default btn-ability">
                                        <input title="4 CPU 8GB Memory" name="ability" type="radio" value="4c8g">4&nbsp;&nbsp;核&nbsp;&nbsp;8&nbsp;&nbsp;GB
                                    </label>
                                    <label class="btn btn-default btn-ability">
                                        <input title="8 CPU 8GB Memory" name="ability" type="radio" value="8c8g">8&nbsp;&nbsp;核&nbsp;&nbsp;8&nbsp;&nbsp;GB
                                    </label>
                                    <label class="btn btn-default btn-ability">
                                        <input title="8 CPU 16GB Memory" name="ability" type="radio" value="8c16g">8&nbsp;&nbsp;核&nbsp;&nbsp;16GB
                                    </label>
                                    <label class="btn btn-default btn-ability">
                                        <input title="1 CPU 16GB Memory" name="ability" type="radio" value="1c16g">1&nbsp;&nbsp;核&nbsp;&nbsp;16GB
                                    </label>
                                    <label class="btn btn-default btn-ability">
                                        <input title="4 CPU 32GB Memory" name="ability" type="radio" value="4c32g">4&nbsp;&nbsp;核&nbsp;&nbsp;32GB
                                    </label>
                                    <label class="btn btn-default btn-ability">
                                        <input title="4 CPU 64GB Memory" name="ability" type="radio" value="4c64g">4&nbsp;&nbsp;核&nbsp;&nbsp;64GB
                                    </label>
                                    <label class="btn btn-default btn-ability">
                                        <input title="8 CPU 64GB Memory" name="ability" type="radio" value="8c64g">8&nbsp;&nbsp;核&nbsp;&nbsp;64GB
                                    </label>
                                    <label class="btn btn-default btn-ability">
                                        <input title="16 CPU 16GB Memory" name="ability" type="radio" value="16c16g">16核&nbsp;&nbsp;16GB
                                    </label>
                                    <label class="btn btn-default btn-ability">
                                        <input title="24 CPU 24GB Memory" name="ability" type="radio" value="24c24g">24核&nbsp;&nbsp;24GB
                                    </label>
                                    <label class="btn btn-default btn-ability">
                                        <input title="32 CPU 32GB Memory" name="ability" type="radio" value="32c32g">32核&nbsp;&nbsp;32GB
                                    </label>
                                    <label class="btn btn-default btn-ability">
                                        <input title="64 CPU 64GB Memory" name="ability" type="radio" value="64c64g">64核&nbsp;&nbsp;64GB
                                    </label>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button id="batch_adjust_ability_form_button" type="button" class="btn btn-sm btn-primary" onclick="batch_adjust_ability();">确定</button>
                <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
{% endblock content %}