{% extends "layout.html" %}
{% block head %}
    {{ super() }}

    <style type="text/css">
        [class^="content-box"] {
            border-radius: 0 !important;
        }
    </style>
{% endblock head %}
{% block content %}

<script type="text/javascript">
    var resource_path = window.location.pathname;
    var cur_url = resource_path;

    $(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);
        });
    });
</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;">
                                    {{ hosts_sum.cpu }} 核
                                </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;">
                                    {{ (hosts_sum.memory / 1024 / 1024 / 1024)|int }} 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;">
                                    {{ guests_distribute_count_ret.data.cpu }} 核
                                </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;">
                                    {{ guests_distribute_count_ret.data.memory }} 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;">
                                    {{ disks_distribute_count_ret.data.total_size }} GB
                                </div>
                                <div class="tile-header" style="opacity: .70;">
                                    虚拟机磁盘空间总计
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="panel">
        <div class="panel-body">
            <h3 class="title-hero">
                虚拟机 TOP <span style="font-size: 17px;">10</span>
            </h3>
            <div class="row">
                <div class="col-md-4">
                    <div class="content-box">
                        <h3 class="content-box-header bg-blue-alt">
                            CPU
                        </h3>
                        <div class="content-box-wrapper" style="padding-top: 0;">
                            <table class="table mrg0B mrg10T">
                                <thead>
                                <tr>
                                    <td style="width: 65%;">实例</td>
                                    <td>负载</td>
                                </tr>
                                </thead>
                                <tbody>
                                {% for item in guests_current_top_10_ret.data.cpu_load %}
                                    {% if item.guest_uuid not in guests_mapping_by_uuid %}{% continue %}{% endif %}
                                <tr>
                                    <td class="text-left">
                                        <a href="/guest/detail/{{ item.guest_uuid }}">
                                            {{ guests_mapping_by_uuid[item.guest_uuid].label }}/{{ guests_mapping_by_uuid[item.guest_uuid].remark }}
                                        </a>
                                    </td>
                                    <td>
                                        <div class="progressbar-small progressbar" data-value="{{ item.cpu_load }}">
                                            <div class="progressbar-value tooltip-button {% if item.cpu_load >= 85 %}bg-red{% elif item.cpu_load >= 65 %}bg-orange{% else %}bg-green{% endif %}" title="{{ item.cpu_load }}%">
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock content %}