{% extends theme("layout.html") %}
{% block head %}
    {{ super() }}
{% 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;

    $(document).ready(function() {
        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);
        });

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

    function refresh() {
        window.location.href=resource_path;
    }

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

    function delete_at(me) {
        var node_id = $('#instance_node_id').val();
        remove([node_id]);
        refresh()
    }

    function panel_onmouseover(me) {
        $(me).find(".show_detail_link").css('display','block');
    }

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

    function nonrandom_click_handler(hostname, nonrandom) {
        $.ajax({
            url : '/api/hosts/' + hostname + '/' + (! nonrandom),
            type : 'PUT',
            error : function() {
                alter_danger('计算节点随机分配模式指令发送失败！');
            },
            success : function() {
                alter_success('计算节点随机分配模式指令发送成功！');
                setTimeout(function() {
                    refresh();
                }, 1000);
            }
        });
    }
</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;">
                            </div>
                            <div class="pull-right">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    {% for item in hosts %}
                    <div class="col-md-4" onmouseover="panel_onmouseover(this);" onmouseout="panel_onmouseout(this);">
                        <div class="host-box content-box {% if not item.alive %}panel-gray{% endif %}">
                            <h2 class="bg-black host-title">{{ item.hostname }}
                                <i style="float: right;" class="glyph-icon icon-circle font-size-23 {% if item.alive == true %}font-green{% else %}font-red{% endif %}"></i>
                                <a href="javascript:;" onclick="nonrandom_click_handler('{{ item.hostname }}', {{ item.nonrandom | lower }});" title="{% if item.nonrandom == true %}加入{% else %}取消{% endif %}自动分配" style="float: left; margin-top: 8%;" class="glyph-icon icon-elusive-shuffle font-size-12 {% if item.nonrandom == true %}font-gray{% else %}font-green{% endif %}"></a>
                            </h2>
                            <div class="bg-blue host-specs">
                                <div class="show_detail_link" style="display: none; position: absolute; z-index: 9999; margin-top: 20px; right: 2%;">
                                    <a href="/host/detail/{{ item.node_id }}" style="color: white; background-color: black;">&nbsp;&nbsp;&nbsp;&nbsp;主机详情&nbsp;&nbsp;&nbsp;&nbsp;</a>
                                </div>
                                <div style="{% if item.alive == true %}display: none;{% endif %}position: absolute; z-index: 9999; margin-top: 0; top: 56px; right: 0; left: 0;">
                                    <span style="color: white; background-color: black; font-size: 13px; display: block; color: #2d2d2d; background-color: #cbcbcb;">&nbsp;&nbsp;&nbsp;&nbsp;最后在线时间: {{ format_datetime_by_tus(item.timestamp * 1000 * 1000) }}&nbsp;&nbsp;&nbsp;&nbsp;
                                        <span style="display: none;">{{ item.node_id }}</span>
                                        <a href="javascript:;" style="color: black;" data-toggle="modal" data-target="#delete_modal"
                                           onclick="$('#instance_node_id').val($(this).prev().text());
                                                $('#delete_instance_desc').text($(this).parent().parent().parent().prev()[0].innerText)">
                                        删除该计算节点
                                        </a>
                                    </span>
                                </div>
                                <span>{{ '%0.2f'| format(item.system_load[0] / item.cpu) }}</span>
                                <i>当前系统负载</i>
                            </div>
                            <div class="bg-orange host-specs">
                                <span>{{(((item.memory - item.memory_available) / item.memory) * 100) | int}}%</span>
                                <i>内存使用率</i>
                            </div>
                            <ul {% if not item.alive %}class="bg-gray"{% endif %}>
                                <li>CPU: {{ item.cpu }} 核</li>
                                <li>内存: {{ (item.memory / 1024 / 1024 / 1024)|int }} GB</li>
                                <!--<li><i class="glyph-icon icon-circle font-size-23 {% if item.alive == true %}font-green{% else %}font-red{% endif %}"></i></li>-->
                                {% for nic_name, nic in item.interfaces.iteritems() %}
                                    <li>网卡: {{ nic_name }} | IP: {{ nic.ip }}</li>
                                {% endfor %}
                                {% for mountpoint, disk in item.disks.iteritems() %}
                                    <li>挂载点: {{ mountpoint }} | {{ (disk.total / 1024 / 1024 / 1024) | int }} GB | 使用率: {{ disk.percent }}%</li>
                                {% endfor %}
                            </ul>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>

    <input id="instance_node_id" title="实例 node id" class="form-control" name="node_id" 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>
{% endblock content %}