JimV-C/templates/hosts_show.html

{% extends "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() {
        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 panel_onmouseover(me) {
        $(me).find(".show_detail_link").css('display','block');
    }

    function panel_onmouseout(me) {
        $(me).find(".show_detail_link").css('display','none');
    }
</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_ret.data %}
                    <div class="col-md-4" onmouseover="panel_onmouseover(this);" onmouseout="panel_onmouseout(this);">
                        <div class="host-box content-box">
                            <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>
                            </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>
                                <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>
                                <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>
{% endblock content %}