JimV-C/templates/dashboard.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">
                资源概览
            </h3>
            <div class="example-box-wrapper">
                <div class="row">
                    <div class="col-md-2">
                        <a href="/hosts" title="宿主机 CPU 总计" class="tile-box tile-box-shortcut btn-info">
                            <div class="tile-content-wrapper">
                                <i class="webhh icon-cpu-processor"></i>
                                <div style="font-size: 20px; margin-top: 18px; right: 10px; position: absolute;">
                                    64 核
                                </div>
                                <div class="tile-header" style="opacity: .70;">
                                    宿主机 CPU 总计
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="col-md-2">
                        <a href="/hosts" title="宿主机内存总计" class="tile-box tile-box-shortcut btn-warning">
                            <div class="tile-content-wrapper">
                                <i class="webhh icon-ram"></i>
                                <div style="font-size: 20px; margin-top: 18px; right: 10px; position: absolute;">
                                    733 GB
                                </div>
                                <div class="tile-header" style="opacity: .70;">
                                    宿主机内存总计
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="col-md-2">
                        <a href="/guests" title="虚拟机 CPU 总计" class="tile-box tile-box-shortcut btn-blue-alt">
                            <div class="tile-content-wrapper">
                                <i class="webhh icon-stampalt"></i>
                                <div style="font-size: 20px; margin-top: 18px; right: 10px; position: absolute;">
                                    64 核
                                </div>
                                <div class="tile-header" style="opacity: .70;">
                                    虚拟机 CPU 总计
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="col-md-3">
                        <a href="/guests" title="虚拟机内存总计" class="tile-box tile-box-shortcut btn-purple">
                            <div class="tile-content-wrapper">
                                <i class="webhh icon-ruler"></i>
                                <div style="font-size: 20px; margin-top: 18px; right: 10px; position: absolute;">
                                    1233 GB
                                </div>
                                <div class="tile-header" style="opacity: .70;">
                                    虚拟机内存总计
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="col-md-3">
                        <a href="/disks" title="虚拟机磁盘空间总计" class="tile-box tile-box-shortcut btn-black-opacity">
                            <div class="tile-content-wrapper">
                                <i class="webhh icon-diskspace"></i>
                                <div style="font-size: 20px; margin-top: 18px; right: 10px; position: absolute;">
                                    103733 GB
                                </div>
                                <div class="tile-header" style="opacity: .70;">
                                    虚拟机磁盘空间总计
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock content %}