JimV-C/templates/disks_show.html

{% extends "layout.html" %}
{% block head %}
    {{ super() }}
    <style type="text/css">

        @media (min-width: 768px) {
            .form-horizontal .control-label {
                text-align: left;
            }
        }

        label>span {
            color: deepskyblue;
        }

        #batch_change_disk_quota_form label {
            padding-left: 0;
            padding-right: 0;
        }

        .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,
        .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;
        }
    </style>

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

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

    $(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) {
            $('#instance_uuid').val($(me.relatedTarget).parent().parent().find('div a')[0].text);
            $('#edit_remark').val($(me.relatedTarget).prev().text());
        });

        $('#mount_modal').on('show.bs.modal', function (me) {
            var url = '/api/guests?page=1&page_size=10000';

            // 单机版加入与磁盘同一计算节点的过滤
            {% if show_on_host %}
                var on_host = $(me.relatedTarget).parent().parent().parent().parent().prev().prev().prev().text();
                url += '&filter=on_host:eq:' + on_host;
            {% endif %}

            $.ajax({
                url : url,
                type : 'GET',
                contentType: "application/json; charset=utf-8",
                dataType: 'json',
                error : function() {
                },
                success : function(data, textStatus, xhr) {
                    $('#mountable_guest').empty();
                    $.each(data.data, function(k, v) {
                        $('#mountable_guest').append(
                            $('<option>', {value: v['uuid'], text: v['label'], 'data-subtext': v['remark']})
                        );
                    });
                    $('#mountable_guest').selectpicker('refresh');
                }
            });
        });

        $('#show_area').on('changed.bs.select', function (me) {
            $('#content_search').val('');
            refresh();
        });

        register_iops_bps_event();
    });

    function refresh() {
        keyword = $('#content_search').val();
        page = 1;
        page_size = $('#page_size').val();
        show_area = $('#show_area').val();
        cur_url = resource_path + '?page=' + page + '&page_size=' + page_size;
        if (keyword.length > 0) {
            cur_url += '&keyword=' + keyword;
        }
        if (show_area.length > 0) {
            cur_url += '&show_area=' + show_area;
        }
        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 = $('#instance_uuid').val();
        var remark = $('#edit_remark').val();
        $('#edit_remark_modal').modal('hide');
        $.ajax({
            url : '/api/disks/' + uuid,
            type : 'PATCH',
            contentType: "application/json; charset=utf-8",
            data : JSON.stringify({
                remark: remark
            }),
            error : function() {
                alter_danger('磁盘备注更新失败！');
            },
            success : function() {
                $('#disk_list tbody').find('td:contains(' + uuid + ')').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 mount(uuid, disk_uuid) {
        $.ajax({
            url : '/api/guest/_attach_disk/' + uuid + '/' + disk_uuid,
            type : 'PUT',
            contentType: "application/json; charset=utf-8",
            error : function() {
                alter_danger('实例挂载指令发送失败！');
            },
            success : function() {
                alter_success('实例挂载指令发送成功！');
            }
        });
    }

    function unmount(disk_uuid) {
        $.ajax({
            url : '/api/guest/_detach_disk/' + disk_uuid,
            type : 'PUT',
            contentType: "application/json; charset=utf-8",
            error : function() {
                alter_danger('实例卸载指令发送失败！');
            },
            success : function() {
                alter_success('实例卸载指令发送成功！');
            }
        });
    }

    function resize(disk_uuid, size) {
        $.ajax({
            url : '/api/disk/_disk_resize/' + disk_uuid + '/' + size,
            type : 'PUT',
            contentType: "application/json; charset=utf-8",
            error : function() {
                alter_danger('实例扩容指令发送失败！');
            },
            success : function() {
                alter_success('实例扩容指令发送成功！');
            }
        });
    }

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

    function mount_at(me) {
        var guest_uuid = $('#mountable_guest').val();
        var disk_uuid = $('#instance_uuid').val();
        mount(guest_uuid, disk_uuid);
        $('#mount_modal').modal('hide');
    }

    function unmount_at(me) {
        var disk_uuid = $($(me).parent().parent().parent().parent().parent().children()[1]).find('div a')[0].text;
        unmount(disk_uuid);
    }

    function resize_at(me) {
        var disk_uuid = $('#instance_uuid').val();
        var size = $('#size').val();
        resize(disk_uuid, size);
        $('#resize_modal').modal('hide');
    }

    function reset_resize_value(me) {
        var min = $(me).parent().parent().parent().parent().parent().children()[3].textContent.split(' ')[0];
        $(function() { "use strict";
            $("#size").TouchSpin({
                max: 10240,
                min: min,
                verticalbuttons: true,
                verticalupclass: 'glyph-icon icon-plus',
                verticaldownclass: 'glyph-icon icon-minus'
            });
        });
    }

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

    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_remark_update() {
        var uuids = get_checked_uuids();
        if (uuids) {
            var remark = $('#batch_edit_remark').val();
            $.ajax({
                url : '/api/disks/' + uuids.join(','),
                type : 'PATCH',
                contentType: "application/json; charset=utf-8",
                data : JSON.stringify({
                    remark: remark
                }),
                error : function() {
                    alter_danger('磁盘备注更新失败！');
                },
                success : function() {
                    alter_success('磁盘备注更新成功！');
                    setTimeout(function() {
                        refresh();
                    }, 1000);
                }
            });
        }
        $('#batch_remark_modal').modal('hide');
    }

    function batch_change_disk_quota() {
        var uuids = get_checked_uuids();
        if (uuids) {
            $.ajax({
                url : '/api/disks/' + uuids.join(','),
                type : 'PATCH',
                contentType: "application/json; charset=utf-8",
                data : JSON.stringify({
                    iops: parseInt($('#iops').val()),
                    iops_rd: parseInt($('#iops_rd').val()),
                    iops_wr: parseInt($('#iops_wr').val()),
                    iops_max: parseInt($('#iops_max').val()),
                    iops_max_length: parseInt($('#iops_max_length').val()),
                    bps: parseInt($('#bps').val()) * 1024 * 1024,
                    bps_rd: parseInt($('#bps_rd').val()) * 1024 * 1024,
                    bps_wr: parseInt($('#bps_wr').val()) * 1024 * 1024,
                    bps_max: parseInt($('#bps_max').val()) * 1024 * 1024,
                    bps_max_length: parseInt($('#bps_max_length').val())
                }),
                error : function() {
                    alter_danger('磁盘备注更新失败！');
                },
                success : function() {
                    alter_success('磁盘备注更新成功！');
                    setTimeout(function() {
                        refresh();
                    }, 1000);
                }
            });
        }
        $('#batch_change_disk_quota_modal').modal('hide');
    }

   $(function() { "use strict";
        $("#iops").TouchSpin({
            max: {{ config_ret.data.iops_cap }},
            min: 0,
            verticalbuttons: true,
            verticalupclass: 'glyph-icon icon-plus',
            verticaldownclass: 'glyph-icon icon-minus'
        });
    });

    $(function() { "use strict";
        $("#iops_rd").TouchSpin({
            max: {{ config_ret.data.iops_cap }},
            min: 0,
            verticalbuttons: true,
            verticalupclass: 'glyph-icon icon-plus',
            verticaldownclass: 'glyph-icon icon-minus'
        });
    });

    $(function() { "use strict";
        $("#iops_wr").TouchSpin({
            max: {{ config_ret.data.iops_cap }},
            min: 0,
            verticalbuttons: true,
            verticalupclass: 'glyph-icon icon-plus',
            verticaldownclass: 'glyph-icon icon-minus'
        });
    });

    $(function() { "use strict";
        $("#iops_max").TouchSpin({
            max: {{ config_ret.data.iops_max }},
            min: 0,
            verticalbuttons: true,
            verticalupclass: 'glyph-icon icon-plus',
            verticaldownclass: 'glyph-icon icon-minus'
        });
    });

    $(function() { "use strict";
        $("#iops_max_length").TouchSpin({
            max: {{ config_ret.data.iops_max_length }},
            min: 0,
            verticalbuttons: true,
            verticalupclass: 'glyph-icon icon-plus',
            verticaldownclass: 'glyph-icon icon-minus'
        });
    });

    $(function() { "use strict";
        $("#bps").TouchSpin({
            max: {{ (config_ret.data.bps_cap / 1024 / 1024) | int }},
            min: 0,
            verticalbuttons: true,
            verticalupclass: 'glyph-icon icon-plus',
            verticaldownclass: 'glyph-icon icon-minus'
        });
    });

    $(function() { "use strict";
        $("#bps_rd").TouchSpin({
            max: {{ (config_ret.data.bps_cap / 1024 / 1024) | int }},
            min: 0,
            verticalbuttons: true,
            verticalupclass: 'glyph-icon icon-plus',
            verticaldownclass: 'glyph-icon icon-minus'
        });
    });

    $(function() { "use strict";
        $("#bps_wr").TouchSpin({
            max: {{ (config_ret.data.bps_cap / 1024 / 1024) | int }},
            min: 0,
            verticalbuttons: true,
            verticalupclass: 'glyph-icon icon-plus',
            verticaldownclass: 'glyph-icon icon-minus'
        });
    });

    $(function() { "use strict";
        $("#bps_max").TouchSpin({
            max: {{ (config_ret.data.bps_max / 1024 / 1024) | int }},
            min: 0,
            verticalbuttons: true,
            verticalupclass: 'glyph-icon icon-plus',
            verticaldownclass: 'glyph-icon icon-minus'
        });
    });

    $(function() { "use strict";
        $("#bps_max_length").TouchSpin({
            max: {{ config_ret.data.bps_max_length }},
            min: 0,
            verticalbuttons: true,
            verticalupclass: 'glyph-icon icon-plus',
            verticaldownclass: 'glyph-icon icon-minus'
        });
    });

    function register_iops_bps_event() {
        $('#iops').on('change', function(){
            $("#iops_rd").trigger("touchspin.updatesettings", {max: $('#iops').val() - $('#iops_wr').val()});
            $("#iops_wr").trigger("touchspin.updatesettings", {max: $('#iops').val() - $('#iops_rd').val()});
        });

        $('#iops_rd').on('change', function(){
            $("#iops_wr").trigger("touchspin.updatesettings", {max: $('#iops').val() - $('#iops_rd').val()});
        });

        $('#iops_wr').on('change', function(){
            $("#iops_rd").trigger("touchspin.updatesettings", {max: $('#iops').val() - $('#iops_wr').val()});
        });

        $('#bps').on('change', function(){
            $("#bps_rd").trigger("touchspin.updatesettings", {max: $('#bps').val() - $('#bps_wr').val()});
            $("#bps_wr").trigger("touchspin.updatesettings", {max: $('#bps').val() - $('#bps_rd').val()});
        });

        $('#bps_rd').on('change', function(){
            $("#bps_wr").trigger("touchspin.updatesettings", {max: $('#bps').val() - $('#bps_rd').val()});
        });

        $('#bps_wr').on('change', function(){
            $("#bps_rd").trigger("touchspin.updatesettings", {max: $('#bps').val() - $('#bps_wr').val()});
        });
    }
</script>
<div class="panel">
    <div class="panel-body">
        <h3 class="title-hero" style="font-size: 24px;">
            磁盘实例
        </h3>
        <div>
            <div id="datatable-row-highlight_wrapper" 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;">
                            <select id="show_area" name="show_area" title="显示域" class="selectpicker">
                                <option value="unmount" data-subtext="显示所有未挂载的磁盘" {% if show_area == 'unmount' %} selected {% endif %}>未挂载</option>
                                <option value="data_disk" data-subtext="显示所有数据盘" {% if show_area == 'data_disk' %} selected {% endif %}>数据盘</option>
                                <option value="all" data-subtext="显示所有磁盘，包含系统盘" {% if show_area == 'all' %} selected {% endif %}>ALL</option>
                            </select>
                        </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="/disks/create" data-transition="pt-page-moveFromRight-init" style="border-radius: 0; padding-left: 40px; padding-right: 40px;">创建磁盘</a>
                        </div>
                    </div>
                </div>
                <table id="disk_list" class="table table-bordered table-hover" cellspacing="0" width="100%" role="grid"
                       style="width: 100%; margin-bottom: 0; border-bottom-width: 0;">
                <thead>
                <tr role="row">
                    <th><input class="all_selector" title="选取所有" type="checkbox"></th>
                    <th width="280px;">UUID</th>
                    <th>状态</th>
                    <th>设备号</th>
                    <th>大小</th>
                    <th>IOPS</th>
                    <th>BPS</th>
                    <th>所属虚拟机</th>
                    <th style="{% if not show_on_host %}display: none;{% endif %}">所属计算节点</th>
                    <th>磁盘性别</th>
                    <th>创建时间</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                {% for item in disks_ret.data %}
                <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="/disk/detail/{{ item.uuid }}">{{ item.uuid }}</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>{{ format_disk_state(item.state)|safe }}</td>
                    <td>{{ format_sequence_to_device_name(item.sequence) }}</td>
                    <td>{{ item.size }} GB</td>
                    <td>{{ item.iops }}</td>
                    <td>{{ (item.bps / 1024 / 1024) | int }} MiB</td>
                    <td><a href="/guest/detail/{{ item.guest_uuid }}" {% if 'guest' not in item %}style="display: none"{% endif %}>{% if 'guest' in item %}
                        {{ item.guest.label }}/{{ item.guest.remark }}
                    {% endif %}</a>
                    </td>
                    <td style="{% if not show_on_host %}display: none;{% endif %}">{{ item.on_host }}</td>
                    <td>
                        {% if item.sequence == 0 %}
                            系统盘
                        {% else %}
                            数据盘
                        {% endif %}
                    </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.state not in [1] %} disabled {% endif %}" style="{% if item.sequence == 0 %} display: none; {% endif %}">
                                    <a href="javascript:;" data-toggle="modal" data-target="#mount_modal"
                                       onclick="$('#instance_uuid').val($($(this).parent().parent().parent().parent().parent().children()[1]).find('div a')[0].text);">
                                        挂载
                                    </a>
                                </li>
                                <li class="{% if item.sequence == 0 or item.state not in [2] %} disabled {% endif %}" style="{% if item.sequence == 0 %}display: none;{% endif %}">
                                    <a href="javascript:;" onclick="unmount_at(this);">卸载</a>
                                </li>
                                <li class="divider" style="{% if item.sequence == 0 %} display: none; {% endif %}"></li>
                                <li class="{% if item.state not in [1, 2] %} disabled {% endif %}">
                                    <a href="javascript:;" data-toggle="modal" data-target="#resize_modal"
                                       onclick="$('#instance_uuid').val($($(this).parent().parent().parent().parent().parent().children()[1]).find('div a')[0].text);reset_resize_value(this);">
                                        磁盘扩容
                                    </a>
                                </li>
                                <li class="divider" style="{% if item.sequence == 0 %} display: none; {% endif %}"></li>
                                <li class="{% if item.state not in [1, 255] %} disabled {% endif %}" style="{% if item.sequence == 0 %} display: none; {% endif %}">
                                    <a href="javascript:;" data-toggle="modal" data-target="#delete_modal"
                                       onclick="$('#instance_uuid').val($($(this).parent().parent().parent().parent().parent().children()[1]).find('div a')[0].text);
                                       $('#delete_instance_desc').text($('#instance_uuid').val().split('-')[0] + '/' + $($(this).parent().parent().parent().parent().parent().children()[1]).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_remark_modal">备注</button>
                                    <button class="btn btn-default btn-shortcut disabled" data-toggle="modal" data-target="#batch_change_disk_quota_modal">变更配额</button>
                                </div>
                                <div class="col-sm-3" style="font-size: 12px; padding-top: 5px; text-align: right;">
                                    共有{{ disks_ret.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 %}{% if order_by %}&order_by={{ order_by }}{% endif %}{% if order %}&order={{ order }}{% endif %}{% if show_area %}&show_area={{ show_area }}{% 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 %}{% if order_by %}&order_by={{ order_by }}{% endif %}{% if order %}&order={{ order }}{% endif %}{% if show_area %}&show_area={{ show_area }}{% 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 %}{% if order_by %}&order_by={{ order_by }}{% endif %}{% if order %}&order={{ order }}{% endif %}{% if show_area %}&show_area={{ show_area }}{% endif %}">»</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </th>
                    </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
</div>

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

<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" 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="mount_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">
                <select class="selectpicker" data-show-subtext="true" id="mountable_guest" name="mountable_guest" title="挂载至 ...">
                </select>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-primary" onclick="mount_at();">确定</button>
                <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="resize_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">
                    <input id="size" title="磁盘大小" class="form-control" type="text" value="100" name="size">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-primary" onclick="resize_at();">确定</button>
                <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<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_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="batch_edit_remark" title="批量备注" class="form-control">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-primary" onclick="batch_remark_update();">确定</button>
                <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>


<div class="modal" id="batch_change_disk_quota_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-left: 8%;">
                <form id="batch_change_disk_quota_form" class="form-horizontal bordered-row">
                    <div class="form-group" style="margin-bottom: 0;">
                        <label class="col-sm-2 control-label">
                            <span class="glyph-icon icon-exchange" style="transform: rotate(90deg); display: inline-flex;"></span>
                            &nbsp;&nbsp;IOPS
                        </label>
                        <div class="col-sm-3">
                            <input id="iops" title="IOPS" class="form-control" type="text" value="{{ config_ret.data.iops_base }}" name="iops">
                        </div>
                        <span class="col-sm-1"></span>
                        <label class="col-sm-2 control-label"><span class="glyph-icon icon-openid"></span>&nbsp;&nbsp;BPS(MiB)</label>
                        <div class="col-sm-3">
                            <input id="bps" title="BPS" class="form-control" type="text" value="{{ (config_ret.data.bps_base / 1024 / 1024) | int }}" name="bps">
                        </div>
                        <span class="col-sm-1"></span>
                    </div>
                    <div class="form-group" style="margin-bottom: 0;">
                        <label class="col-sm-2 control-label">
                            <span class="glyph-icon icon-exchange" style="transform: rotate(90deg); display: inline-flex;"></span>
                            &nbsp;&nbsp;IOPS 读
                        </label>
                        <div class="col-sm-3">
                            <input id="iops_rd" title="IOPS_RD" class="form-control" type="text" value="0" name="iops_rd">
                        </div>
                        <span class="col-sm-1"></span>
                        <label class="col-sm-2 control-label"><span class="glyph-icon icon-openid"></span>&nbsp;&nbsp;BPS 读 (MiB)</label>
                        <div class="col-sm-3">
                            <input id="bps_rd" title="BPS_RD" class="form-control" type="text" value="0" name="bps_rd">
                        </div>
                        <span class="col-sm-1"></span>
                    </div>
                    <div class="form-group" style="margin-bottom: 0;">
                        <label class="col-sm-2 control-label">
                            <span class="glyph-icon icon-exchange" style="transform: rotate(90deg); display: inline-flex;"></span>
                            &nbsp;&nbsp;IOPS 写
                        </label>
                        <div class="col-sm-3">
                            <input id="iops_wr" title="IOPS_WR" class="form-control" type="text" value="0" name="iops_wr">
                        </div>
                        <span class="col-sm-1"></span>
                        <label class="col-sm-2 control-label"><span class="glyph-icon icon-openid"></span>&nbsp;&nbsp;BPS 写 (MiB)</label>
                        <div class="col-sm-3">
                            <input id="bps_wr" title="BPS_WR" class="form-control" type="text" value="0" name="bps_wr">
                        </div>
                        <span class="col-sm-1"></span>
                    </div>
                    <div class="form-group" style="margin-bottom: 0;">
                        <label class="col-sm-2 control-label">
                            <span class="glyph-icon icon-exchange" style="transform: rotate(90deg); display: inline-flex;"></span>
                            <span class="glyph-icon icon-bitbucket" style="margin-left: -4px;"></span>
                            &nbsp;&nbsp;IOPS 桶宽
                        </label>
                        <div class="col-sm-3">
                            <input id="iops_max" title="IOPS_MAX" class="form-control" type="text" value="{{ config_ret.data.iops_max }}" name="iops_max">
                        </div>
                        <span class="col-sm-1"></span>
                        <label class="col-sm-2 control-label"><span class="glyph-icon icon-openid"></span><span class="glyph-icon icon-bitbucket"></span>&nbsp;&nbsp;BPS 桶宽 (MiB)</label>
                        <div class="col-sm-3">
                            <input id="bps_max" title="BPS_MAX" class="form-control" type="text" value="{{ (config_ret.data.bps_max / 1024 / 1024) | int }}" name="bps_max">
                        </div>
                        <span class="col-sm-1"></span>
                    </div>
                    <div class="form-group" style="margin-bottom: 0;">
                        <label class="col-sm-2 control-label">
                            <span class="glyph-icon icon-exchange" style="transform: rotate(90deg); display: inline-flex;"></span>
                            <span class="glyph-icon icon-bitbucket" style="margin-left: -4px;"></span>
                            &nbsp;&nbsp;IOPS 桶高 (秒)
                        </label>
                        <div class="col-sm-3">
                            <input id="iops_max_length" title="IOPS_MAX_LENGTH" class="form-control" type="text" value="{{ config_ret.data.iops_max_length }}" name="iops_max_length">
                        </div>
                        <span class="col-sm-1"></span>
                        <label class="col-sm-2 control-label"><span class="glyph-icon icon-openid"></span><span class="glyph-icon icon-bitbucket"></span>&nbsp;&nbsp;BPS 桶高 (秒)</label>
                        <div class="col-sm-3">
                            <input id="bps_max_length" title="BPS_MAX_LENGTH" class="form-control" type="text" value="{{ config_ret.data.bps_max_length }}" name="bps_max_length">
                        </div>
                        <span class="col-sm-1"></span>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-primary" onclick="batch_change_disk_quota();">确定</button>
                <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
{% endblock content %}