JimV-C/jimvc/themes/default/templates/config_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;
        }

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

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

        .bootstrap-switch-handle-on {
            border-top-left-radius: 0 !important;
            border-bottom-left-radius: 0 !important;
        }
    </style>
{% endblock head %}
{% block content %}
    <script>
        $(document).ready(function() {
            $('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);
            });

            $('#storage_mode').on('changed.bs.select', function (me) {
                if ($('#storage_mode').val() == '2' || $('#storage_mode').val() == '3') {
                    $('#dfs_volume_label').css('display', 'unset');
                    $('#dfs_volume').css('display', 'unset');
                } else {
                    $('#dfs_volume_label').css('display', 'none');
                    $('#dfs_volume').css('display', 'none');
                }
            });

            register_iops_bps_event();
            refresh_ip_pools();

            $('input.input-switch[name="activity"]').on('switchChange.bootstrapSwitch', function(event, state) {
                console.log(this); // DOM element
                console.log(event); // jQuery event
                console.log(state); // true | false
                if (state) {
                    put_ip_pool_activity($(this).data('id'));
                }
            });
        });

        function refresh() {
            window.location.reload();
        }

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

            $('#jimv_system_config, #quota, #ip_pool, #auxiliary').css('display', 'none');

            if (me.id === 'quota_label') {
                $('#quota').css('display', 'unset');

            } else if (me.id === 'ip_pool_label') {
                $('#ip_pool').css('display', 'unset');

            } else if (me.id === 'auxiliary_label') {
                $('#auxiliary').css('display', 'unset');

            } else {
                $('#jimv_system_config').css('display', 'unset');
            }
        }

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

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

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

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

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

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

        $(function() { "use strict";
            $("#bps_pre_unit").TouchSpin({
                max: 10,
                min: 0,
                step: 0.01,
                decimals: 2,
                postfix: 'MiB',
                verticalbuttons: true,
                verticalupclass: 'glyph-icon icon-plus',
                verticaldownclass: 'glyph-icon icon-minus'
            });
        });

        $(function() { "use strict";
            $("#bps_cap").TouchSpin({
                max: 1024 * 2,
                min: 0,
                postfix: 'MiB',
                verticalbuttons: true,
                verticalupclass: 'glyph-icon icon-plus',
                verticaldownclass: 'glyph-icon icon-minus'
            });
        });

        $(function() { "use strict";
            $("#bps_max").TouchSpin({
                max: 1024 * 10,
                min: 0,
                postfix: 'MiB',
                verticalbuttons: true,
                verticalupclass: 'glyph-icon icon-plus',
                verticaldownclass: 'glyph-icon icon-minus'
            });
        });

        $(function() { "use strict";
            $("#bps_max_length").TouchSpin({
                max: 600,
                min: 0,
                postfix: '秒',
                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()});
            });
        }

        function update_quota() {
            $.ajax({
                url : '/api/config/_quota',
                type : 'PATCH',
                contentType: "application/json; charset=utf-8",
                data : JSON.stringify({
                    iops_base: parseInt($('#iops_base').val()),
                    iops_pre_unit: parseInt($('#iops_pre_unit').val()),
                    iops_cap: parseInt($('#iops_cap').val()),
                    iops_max: parseInt($('#iops_max').val()),
                    iops_max_length: parseInt($('#iops_max_length').val()),
                    bps_base: parseInt($('#bps_base').val()) * 1024 * 1024,
                    bps_pre_unit: parseFloat($('#bps_pre_unit').val()) * 1024 * 1024,
                    bps_cap: parseInt($('#bps_cap').val()) * 1024 * 1024,
                    bps_max: parseInt($('#bps_max').val()) * 1024 * 1024,
                    bps_max_length: parseInt($('#bps_max_length').val()),
                    influence_current_guest: $('#influence_current_guest').prop('checked')
                }),
                error : function() {
                    alter_danger('性能配额更新失败！');
                },
                success : function() {
                    alter_success('性能配额更新成功！');
                    setTimeout(function() {
                        refresh();
                    }, 1000);
                }
            });
        }

        function refresh_guest_state() {
            $.ajax({
                url : '/api/guests/_refresh_guest_state',
                type : 'PATCH',
                error : function() {
                    alter_danger('刷新虚拟机状态失败！');
                },
                success : function() {
                    alter_success('刷新虚拟机状态成功！');
                    setTimeout(function() {
                        refresh();
                    }, 1000);
                }
            });
        }

        function exchange_ip_pool_for_panel(ip_pool) {
            var activity_checked = '';
            if (ip_pool.activity > 0) {
                activity_checked = 'checked';
            }

            return '<div class="panel">\n' +
                '    <div class="panel-body">\n' +
                '        <form class="form-horizontal bordered-row" style="padding-left: 8%;">\n' +
                '            <input title="IP Pool ID" class="form-control" name="id" type="text" value="' + ip_pool.id + '" hidden>\n' +
                '            <div class="form-group">\n' +
                '                <label class="col-sm-2 control-label">起始 IP</label>\n' +
                '                <div class="col-sm-3">\n' +
                '                    <input title="起始 IP" class="form-control" name="start_ip" type="text" value="' + ip_pool.start_ip + '">\n' +
                '                </div>\n' +
                '                <label class="col-sm-2 control-label">截止 IP</label>\n' +
                '                <div class="col-sm-3">\n' +
                '                    <input title="截止 IP" class="form-control" name="end_ip" type="text" value="' + ip_pool.end_ip + '">\n' +
                '                </div>\n' +
                '            </div>\n' +
                '            <div class="form-group">\n' +
                '                <label class="col-sm-2 control-label">子网掩码</label>\n' +
                '                <div class="col-sm-3">\n' +
                '                    <input title="子网掩码" class="form-control" name="netmask" type="text" value="' + ip_pool.netmask + '">\n' +
                '                </div>\n' +
                '                <label class="col-sm-2 control-label">网关</label>\n' +
                '                <div class="col-sm-3">\n' +
                '                    <input title="网关" class="form-control" name="gateway" type="text" value="' + ip_pool.gateway + '">\n' +
                '                </div>\n' +
                '            </div>\n' +
                '            <div class="form-group">\n' +
                '                <label class="col-sm-2 control-label">DNS1</label>\n' +
                '                <div class="col-sm-3">\n' +
                '                    <input title="DNS1" class="form-control" name="dns1" type="text" value="' + ip_pool.dns1 + '">\n' +
                '                </div>\n' +
                '                <label class="col-sm-2 control-label">DNS2</label>\n' +
                '                <div class="col-sm-3">\n' +
                '                    <input title="DNS2" class="form-control" name="dns2" type="text" value="' + ip_pool.dns2 + '">\n' +
                '                </div>\n' +
                '            </div>\n' +
                '            <div class="form-group">\n' +
                '                <label class="col-sm-2 control-label">名称</label>\n' +
                '                <div class="col-sm-3">\n' +
                '                    <input title="名称" class="form-control" name="name" type="text" value="' + ip_pool.name + '">\n' +
                '                </div>\n' +
                '                <label class="col-sm-2 control-label">备注</label>\n' +
                '                <div class="col-sm-3">\n' +
                '                    <textarea title="备注" class="form-control" name="description">'+ip_pool.description+'</textarea>\n' +
                '                </div>\n' +
                '            </div>\n' +
                '            <div class="form-group" style="margin-bottom: 0;">\n' +
                '                <div class="col-sm-6">\n' +
                '                    <input type="checkbox" name="activity" data-on-color="info" class="input-switch" data-id="' + ip_pool.id + '" ' + activity_checked + ' data-size="medium" data-on-text="活跃" data-off-text="非活跃">\n' +
                '                </div>\n' +
                '                <div class="col-sm-6">\n' +
                '                    <div style="padding: 0; text-align: right;">\n' +
                '                        <button type="button" class="btn btn-sm btn-primary" style="right: 10%;" data-id="' + ip_pool.id + '" onclick="update_ip_pool(this);">更新</button>\n' +
                '                        <button type="button" class="btn btn-sm btn-danger" style="right: 4%;" onclick="delete_ip_pool(this);">删除</button>\n' +
                '                    </div>\n' +
                '                </div>\n' +
                '            </div>\n' +
                '        </form>\n' +
                '    </div>\n' +
                '</div>';
        }


        function get_ip_pools_html() {
            var html = '<div class="row" style="padding: 10px 10px 10px 0; width: 100%;">\n' +
                '    <div class="col-sm-12" style="padding-right: 0;">\n' +
                '        <div class="pull-right">\n' +
                '            <button class="btn btn-default" onclick="window.location.reload();" style="border-radius: 0;"><span class="glyph-icon icon-elusive-arrows-cw"></span></button>\n' +
                '            <a class="btn btn-info" href="javascript:;" data-toggle="modal" data-target="#add_ip_pool_modal" style="border-radius: 0; padding-left: 40px; padding-right: 40px;">添加 IP 池</a>\n' +
                '        </div>\n' +
                '    </div>\n' +
                '</div>';

            $.ajax({
                url : '/api/ip_pools',
                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_ip_pool_for_panel(v);
                    });
                }
            });
            return html
        }

        function refresh_ip_pools() {
            var html = get_ip_pools_html();
            $('#ip_pool').append(html);
        }

        function get_ip_pool_field_value(me, name) {
            return $(me).parent().parent().parent().parent().serializeArray().filter(
                function(field) {return field.name == name})[0].value;
        }

        function update_ip_pool(me) {
            var id = get_ip_pool_field_value(me, 'id');
            var start_ip = get_ip_pool_field_value(me, 'start_ip');
            var end_ip = get_ip_pool_field_value(me, 'end_ip');
            var netmask = get_ip_pool_field_value(me, 'netmask');
            var gateway = get_ip_pool_field_value(me, 'gateway');
            var dns1 = get_ip_pool_field_value(me, 'dns1');
            var dns2 = get_ip_pool_field_value(me, 'dns2');
            var name = get_ip_pool_field_value(me, 'name');
            var description = get_ip_pool_field_value(me, 'description');

            var data = {
                start_ip: start_ip,
                end_ip: end_ip,
                netmask: netmask,
                gateway: gateway,
                dns1: dns1,
                dns2: dns2,
                name: name,
                description: description
            };

            $.ajax({
                url : '/api/ip_pools/' + String(id),
                type : 'PATCH',
                contentType: "application/json; charset=utf-8",
                async: false,
                dataType: "json",
                data : JSON.stringify(data),
                error : function(data, textStatus, xhr) {
                    alter_danger(data.responseText);
                    alter_warning('更新 IP 池失败！');
                },
                success : function(data, textStatus, xhr) {
                    alter_success('更新 IP 池成功！');
                }
            });

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

        function create_ip_pool(me) {
            $('#add_ip_pool_modal').modal('hide');

            var start_ip = get_ip_pool_field_value(me, 'start_ip');
            var end_ip = get_ip_pool_field_value(me, 'end_ip');
            var netmask = get_ip_pool_field_value(me, 'netmask');
            var gateway = get_ip_pool_field_value(me, 'gateway');
            var dns1 = get_ip_pool_field_value(me, 'dns1');
            var dns2 = get_ip_pool_field_value(me, 'dns2');
            var name = get_ip_pool_field_value(me, 'name');
            var description = get_ip_pool_field_value(me, 'description');
            var activity = $('#activity').prop('checked');

            var data = {
                start_ip: start_ip,
                end_ip: end_ip,
                netmask: netmask,
                gateway: gateway,
                dns1: dns1,
                dns2: dns2,
                name: name,
                description: description,
                activity: activity
            };

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

            setTimeout(function() {
                window.location.reload();
            }, 3000);
        }
        
        function put_ip_pool_activity(id) {
            $.ajax({
                url : '/api/ip_pool/' + String(id),
                type : 'PUT',
                async: false,
                dataType: "json",
                error : function(data, textStatus, xhr) {
                    alter_danger(data.responseText);
                    alter_warning('IP 池激活失败！');
                },
                success : function(data, textStatus, xhr) {
                    alter_success('IP 池激活成功！');
                }
            });

            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="jimv_system_config_label">JimV 系统配置</a></li>
                <li><a href="javascript:;" onclick="select_this(this);" id="ip_pool_label">IP 池</a></li>
                <li><a href="javascript:;" onclick="select_this(this);" id="quota_label">性能配额</a></li>
                <li><a href="javascript:;" onclick="select_this(this);" id="auxiliary_label">辅助</a></li>
            </ul>
            <div id="jimv_system_config" class="example-box-wrapper">
                <form class="form-horizontal bordered-row" style="padding-left: 8%;">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">网桥(业务网络)</label>
                        <div class="col-sm-3">
                            <input title="Guest 业务网络" class="form-control" name="vm_network" type="text" disabled value="{{ config.vm_network }}">
                        </div>
                        <label class="col-sm-2 control-label">网桥(管理网络)</label>
                        <div class="col-sm-3">
                            <input title="Guest 管理网络" class="form-control" name="vm_manage_network" type="text" disabled value="{{ config.vm_manage_network }}">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">虚拟机磁盘存储模式</label>
                        <div class="col-sm-3">
                            <select id="storage_mode" title="虚拟机磁盘存储模式" class="selectpicker" name="storage_mode" data-width="100%" disabled>
                                <option {% if config.storage_mode == 0 %}selected{% endif %} value="0">本地存储</option>
                                <option {% if config.storage_mode == 1 %}selected{% endif %} value="1" data-subtext="NFS">挂载共享</option>
                                <option {% if config.storage_mode == 2 %}selected{% endif %} value="2">Ceph</option>
                                <option {% if config.storage_mode == 3 %}selected{% endif %} value="3">GlusterFS</option>
                            </select>
                        </div>
                        <label id="dfs_volume_label" class="col-sm-2 control-label" style="display: {% if config.storage_mode in [3] %}unset{% else %}none{% endif %};">分布式文件系统存储卷</label>
                        <div class="col-sm-3">
                            <input id="dfs_volume" title="分布式文件系统存储卷" class="form-control" name="dfs_volume" type="text" style="display: {% if config.storage_mode in [3] %}unset{% else %}none{% endif %};" disabled value="{{ config.dfs_volume }}">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">虚拟机磁盘存放路径</label>
                        <div class="col-sm-3">
                            <input title="虚拟机磁盘存放路径" class="form-control" name="storage_path" type="text" disabled value="{{ config.storage_path }}">
                        </div>
                    </div>
                </form>
            </div>
            <div id="quota" class="example-box-wrapper" style="display: none;">
                <form class="form-horizontal bordered-row" style="padding-left: 8%;">
                    <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_base" title="IOPS 基准值" class="form-control" type="text" value="{{ config.iops_base }}" name="iops_base">
                        </div>
                        <span class="col-sm-1"></span>
                        <label class="col-sm-2 control-label"><span class="glyph-icon icon-openid"></span>&nbsp;&nbsp;BPS 基准值</label>
                        <div class="col-sm-3">
                            <input id="bps_base" title="BPS 基准值" class="form-control" type="text" value="{{ (config.bps_base / 1024 / 1024) | int }}" name="bps_base">
                        </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/GiB 增益
                        </label>
                        <div class="col-sm-3">
                            <input id="iops_pre_unit" title="IOPS/GiB 增益" class="form-control" type="text" value="{{ config.iops_pre_unit }}" name="iops_pre_unit">
                        </div>
                        <span class="col-sm-1"></span>
                        <label class="col-sm-2 control-label"><span class="glyph-icon icon-openid"></span>&nbsp;&nbsp;BPS/GiB 增益</label>
                        <div class="col-sm-3">
                            <input id="bps_pre_unit" title="BPS/GiB 增益 (MiB)" class="form-control" type="text" value="{{ '%0.2f'|format(config.bps_pre_unit / 1024 / 1024) }}" name="bps_pre_unit">
                        </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_cap" title="IOPS 增益上限" class="form-control" type="text" value="{{ config.iops_cap }}" name="iops_cap">
                        </div>
                        <span class="col-sm-1"></span>
                        <label class="col-sm-2 control-label"><span class="glyph-icon icon-openid"></span>&nbsp;&nbsp;BPS 增益上限</label>
                        <div class="col-sm-3">
                            <input id="bps_cap" title="BPS 增益上限 (MiB)" class="form-control" type="text" value="{{ (config.bps_cap / 1024 / 1024) | int }}" name="bps_cap">
                        </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 桶宽" class="form-control" type="text" value="{{ config.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 桶宽</label>
                        <div class="col-sm-3">
                            <input id="bps_max" title="BPS 桶宽 (MiB)" class="form-control" type="text" value="{{ (config.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 桶高 (秒)" class="form-control" type="text" value="{{ config.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 桶高 (秒)" class="form-control" type="text" value="{{ config.bps_max_length }}" name="bps_max_length">
                        </div>
                        <span class="col-sm-1"></span>
                    </div>
                    <div class="form-group" style="margin-bottom: 0;">
                        <div class="col-sm-6">
                            <label>
                                <input id="influence_current_guest" type="checkbox" name="influence_current_guest">
                                同时更新已存在的实例
                            </label>
                        </div>
                        <div class="col-sm-6">
                            <div style="padding: 0; text-align: right;">
                                <button type="button" class="btn btn-sm btn-primary" style="right: 10%;" onclick="update_quota();">更新</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div id="ip_pool" class="example-box-wrapper" style="display: none;">
            </div>
            <div id="auxiliary" class="example-box-wrapper" style="display: none;">
                <form class="form-horizontal bordered-row" style="padding-left: 8%;">
                    <div class="form-group" style="margin-bottom: 0;">
                        <div class="col-sm-3">
                            <button type="button" class="btn btn-primary" onclick="refresh_guest_state();">刷新虚拟机状态</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

<div class="modal" id="add_ip_pool_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">添加 IP 池：</h4>
            </div>
            <div class="panel">
                <div class="panel-body">
                    <form class="form-horizontal bordered-row" style="padding-left: 16%;">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">起始 IP</label>
                            <div class="col-sm-3">
                                <input title="起始 IP" class="form-control" name="start_ip" type="text">
                            </div>
                            <label class="col-sm-2 control-label">截止 IP</label>
                            <div class="col-sm-3">
                                <input title="截止 IP" class="form-control" name="end_ip" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">子网掩码</label>
                            <div class="col-sm-3">
                                <input title="子网掩码" class="form-control" name="netmask" type="text">
                            </div>
                            <label class="col-sm-2 control-label">网关</label>
                            <div class="col-sm-3">
                                <input title="网关" class="form-control" name="gateway" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">DNS1</label>
                            <div class="col-sm-3">
                                <input title="DNS1" class="form-control" name="dns1" type="text">
                            </div>
                            <label class="col-sm-2 control-label">DNS2</label>
                            <div class="col-sm-3">
                                <input title="DNS2" class="form-control" name="dns2" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">名称</label>
                            <div class="col-sm-3">
                                <input title="名称" class="form-control" name="name" type="text">
                            </div>
                            <label class="col-sm-2 control-label">备注</label>
                            <div class="col-sm-3">
                                <textarea title="备注" class="form-control" name="description"></textarea>
                            </div>
                        </div>
                        <div class="form-group" style="margin-bottom: 0;">
                            <div class="col-sm-6">
                                <div class="checkbox checkbox-info">
                                    <label>
                                        <input id="activity" name="activity" type="checkbox" checked class="custom-checkbox">
                                        设为默认
                                    </label>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div style="padding: 0; text-align: right;">
                                    <button type="button" class="btn btn-sm btn-primary" style="right: 20%;" onclick="create_ip_pool(this);">创建</button>
                                    <button type="button" class="btn btn-sm btn-default" style="right: 10%;" data-dismiss="modal">取消</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock content %}