JimV-C/templates/dashboard.html

{% 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 style="width: 35%;">负载</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" style="text-overflow: ellipsis; white-space: nowrap; overflow: hidden;">
                                        <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 class="col-md-4">
                    <div class="content-box">
                        <h3 class="content-box-header" style="background-color: #9e9e9e; opacity: 0.9; color: #fff;">
                            磁盘 IOPS
                        </h3>
                        <div class="content-box-wrapper" style="padding-top: 0;">
                            <table class="table mrg0B mrg10T" style="table-layout: fixed;">
                                <thead>
                                <tr>
                                    <td style="width: 65%;">实例</td>
                                    <td style="width: 35%;">IOPS</td>
                                </tr>
                                </thead>
                                <tbody>
                                {% for item in guests_current_top_10_ret.data.rw_req %}
                                    {% if item.disk_uuid not in disks_mapping_by_uuid %}{% continue %}{% endif %}
                                    {% if disks_mapping_by_uuid[item.disk_uuid].guest_uuid not in guests_mapping_by_uuid %}{% continue %}{% endif %}
                                    <tr>
                                        <td class="text-left" style="text-overflow: ellipsis; white-space: nowrap; overflow: hidden;">
                                            <a href="/disk/detail/{{ item.disk_uuid }}">
                                                {{ guests_mapping_by_uuid[disks_mapping_by_uuid[item.disk_uuid].guest_uuid].label }}/{{ disks_mapping_by_uuid[item.disk_uuid].remark }}
                                            </a>
                                        </td>
                                        <td>
                                            {{ item.rw_req }}
                                        </td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="content-box">
                        <h3 class="content-box-header" style="background-color: #9e9e9e; opacity: 0.9; color: #fff;">
                            磁盘吞吐量
                        </h3>
                        <div class="content-box-wrapper" style="padding-top: 0;">
                            <table class="table mrg0B mrg10T" style="table-layout: fixed;">
                                <thead>
                                <tr>
                                    <td style="width: 65%;">实例</td>
                                    <td style="width: 35%;">吞吐量</td>
                                </tr>
                                </thead>
                                <tbody>
                                {% for item in guests_current_top_10_ret.data.rw_bytes %}
                                    {% if item.disk_uuid not in disks_mapping_by_uuid %}{% continue %}{% endif %}
                                    {% if disks_mapping_by_uuid[item.disk_uuid].guest_uuid not in guests_mapping_by_uuid %}{% continue %}{% endif %}
                                    <tr>
                                        <td class="text-left" style="text-overflow: ellipsis; white-space: nowrap; overflow: hidden;">
                                            <a href="/disk/detail/{{ item.disk_uuid }}">
                                                {{ guests_mapping_by_uuid[disks_mapping_by_uuid[item.disk_uuid].guest_uuid].label }}/{{ disks_mapping_by_uuid[item.disk_uuid].remark }}
                                            </a>
                                        </td>
                                        <td>
                                            <!-- 速率参考链接：https://en.wikipedia.org/wiki/Data_rate_units#Examples_of_bit_rates -->
                                            {% if item.rw_bytes >= 1024**3 %}
                                                {{ '%0.1f'| format(item.rw_bytes / 1024**3) }} GBps
                                            {% elif item.rw_bytes >= 1024**2 %}
                                                {{ '%0.1f'| format(item.rw_bytes / 1024**2) }} MBps
                                            {% elif item.rw_bytes >= 1024 %}
                                                {{ '%0.1f'| format(item.rw_bytes / 1024) }} KBps
                                            {% else %}
                                                {{ item.rw_bytes }} Bps
                                            {% endif %}
                                        </td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div class="content-box">
                        <h3 class="content-box-header bg-green" style="opacity: 0.72;">
                            网络流量
                        </h3>
                        <div class="content-box-wrapper" style="padding-top: 0;">
                            <table class="table mrg0B mrg10T">
                                <thead>
                                <tr>
                                    <td style="width: 65%;">实例</td>
                                    <td style="width: 35%;">流量</td>
                                </tr>
                                </thead>
                                <tbody>
                                {% for item in guests_current_top_10_ret.data.rt_bytes %}
                                    {% if item.guest_uuid not in guests_mapping_by_uuid %}{% continue %}{% endif %}
                                    <tr>
                                        <td class="text-left" style="text-overflow: ellipsis; white-space: nowrap; overflow: hidden;">
                                            <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>
                                            <!-- 速率参考链接：https://en.wikipedia.org/wiki/Data_rate_units#Examples_of_bit_rates -->
                                            {% if item.rt_bytes * 8 >= 1000**3 %}
                                                {{ '%0.1f'| format(item.rt_bytes * 8 / 1000**3) }} Gbps
                                            {% elif item.rt_bytes * 8 >= 1000**2 %}
                                                {{ '%0.1f'| format(item.rt_bytes * 8 / 1000**2) }} Mbps
                                            {% elif item.rt_bytes * 8 >= 1000 %}
                                                {{ '%0.1f'| format(item.rt_bytes * 8 / 1000) }} kbps
                                            {% else %}
                                                {{ item.rt_bytes * 8 }} bps
                                            {% endif %}
                                        </td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                </div>
                <div class="col-md-4">
                </div>
            </div>
        </div>
    </div>
{% endblock content %}