webvirtcloud/computes/templates/overview.html

{% extends "base.html" %}
{% load i18n %}
{% load static %}
{% load bootstrap_icons %}

{% block title %}{% trans "Overview" %} - {{ compute.name }}{% endblock %}

{% block page_heading %}{{ compute.name }}{% endblock page_heading %}

{% block content %}
    <div class="row">
        <nav aria-label="breadcrumb">
        <ol class="breadcrumb shadow-sm">
            <li class="breadcrumb-item" aria-current="page">
                <span class="fw-bold">{% bs_icon 'laptop' %} {% trans "Overview" %}</span>
            </li>
            <li class="breadcrumb-item">
                <a href="{% url 'instances' compute.id %}">{% bs_icon 'server' %} {% trans "Instances" %}</a>
            </li>
            <li class="breadcrumb-item">
                <a href="{% url 'storages' compute.id %}">{% bs_icon 'device-hdd' %} {% trans "Storages" %}</a>
            </li>
            <li class="breadcrumb-item">
                <a href="{% url 'networks' compute.id %}">{% bs_icon 'hdd-network' %} {% trans "Networks" %}</a>
            </li>
            <li class="breadcrumb-item">
                <a href="{% url 'interfaces' compute.id %}">{% bs_icon 'wifi' %} {% trans "Interfaces" %}</a>
            </li>
            <li class="breadcrumb-item">
                <a href="{% url 'nwfilters' compute.id %}">{% bs_icon 'filter' %} {% trans "NWFilters" %}</a>
            </li>
            <li class="breadcrumb-item">
                <a href="{% url 'virtsecrets' compute.id %}">{% bs_icon 'key' %} {% trans "Secrets" %}</a>
            </li>
        </ol>
        </nav>
        </div>

    <div class="shadow-sm">
        <h3 class="page-header">{% trans "Basic details" %}</h3>
        <dl class="mx-3 row">
            <dt class="col-3">{% trans "Hostname" %}</dt>
            <dd class="col-9">{{ hostname }}</dd>
            <dt class="col-3">{% trans "Hypervisors" %}</dt>
            <dd class="col-9">
                <div class="dropdown">
                    {% for arch, hpv in hypervisor.items|slice:":4" %}
                    <button class="btn btn-sm btn-outline-primary dropdown-toggle" type="button" id="hpvArchDrop{{ forloop.counter0 }}" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        {{ arch }}
                    </button>
                    <div class="dropdown-menu" aria-labelledby="hpvArchDrop{{ forloop.counter0 }}">
                        {% for h in hpv %}
                            <a class="dropdown-item" href="#">{{ h }}</a>
                        {% endfor %}
                    </div>
                    {% endfor %}
                </div>
                <div class="dropdown">
                  {% if hypervisor.items|length > 4 %}
                    <button class="btn btn-sm btn-outline-primary dropdown-toggle" type="button" id="hpvDrop{{ forloop.counter0 }}" data-bs-toggle="dropdown">
                        {{ hypervisor.items|slice:"4:"|length }} {% trans 'more' %}...
                    </button>
                    <div class="dropdown-menu" aria-labelledby="hpvDrop{{ forloop.counter0 }}" role="menu">
                        {% for arc in hypervisor.keys|slice:"4:" %}
                                <a class="dropdown-item" tabindex="-1" href="#">{{ arc }}</a>
                        {% endfor %}
                    </div>
                    {% endif %}
                </div>
            </dd>  
            <dt class="col-3">{% trans "Emulator" %}</dt>
            <dd class="col-9">{{ emulator }}</dd>
            <dt class="col-3">{% trans "Version" %}</dt>
            <dd class="col-9">
                <span class="badge bg-secondary">{% trans 'Qemu' %} </span>
                <span class="badge bg-primary">{{ version }}</span> &nbsp;
                <span class="badge bg-secondary">{% trans 'Libvirt' %} </span>
                <span class="badge bg-primary">{{ lib_version }}</span> &nbsp;
            </dd>
            <dt class="col-3">{% trans "Memory" %}</dt>
            <dd class="col-9">{{ host_memory|filesizeformat }}</dd>
            <dt class="col-3">{% trans "Architecture" %}</dt>
            <dd class="col-9">{{ host_arch }}</dd>
            <dt class="col-3">{% trans "Logical CPUs" %}</dt>
            <dd class="col-9">{{ logical_cpu }}</dd>
            <dt class="col-3">{% trans "Processor" %}</dt>
            <dd class="col-9">{{ model_cpu }}</dd>
            <dt class="col-3">{% trans "Connection" %}</dt>
            <dd class="col-9">{{ uri_conn }}</dd>
            <dt class="col-3">{% trans "Details" %}</dt>
            <dd class="col-9">{{ compute.details }}</dd>
        </dl>

        <h3 class="page-header">{% trans "Performance" %}</h3>
        <div class="mx-3 shadow-sm">
            <div class="my-3 card border-success">
                <div class="card-body">
                    <h5 class="card-title">
                        {% bs_icon 'arrow-right' %} 
                        {% trans "CPU Utilization" %}
                    </h5>
                    <div class="chart"><canvas id="cpuChart" role="img" aria-label="{% trans "CPU Utilization" %}"></canvas></div>
                </div>
            </div>

            <div class="my-3 card border-primary">
                    <div class="card-body">
                        <h5 class="card-title ">
                            {% bs_icon 'arrow-right'%} {% trans "RAM Utilization" %}
                        </h5>
                        <div class="chart"><canvas id="memChart" role="img" aria-label="{% trans "RAM Utilization" %}"></canvas></div>
                    </div>
                </div>
            </div>
        </div>
{% endblock %}
{% block script %}
<script src="{% static "js/chart.umd.min.js" %}"></script>
<script src="{% static "js/charts.js" %}"></script>
<script src="{% static "js/poll.js" %}"></script>
<script>

    {% trans "average over" as average_over %}
    // the seconds each CPU point averages
    var cpuWindows = [];
    var cpuChart = lineChart(document.getElementById("cpuChart"), "%", ["Usage"], {
        max: 100,
        tooltip: function (context, text) {
            var span = cpuWindows[context.dataIndex];
            return span ? text + ' ({{ average_over|escapejs }} ' + span + ' s)' : text;
        },
    });
    var memChart = lineChart(document.getElementById("memChart"), "MB", ["Usage"]);
    if (Boolean({{ status }}) === true) {
        // the CPU sample of the previous answer: usage is taken since then
        var cpuSample = null;
        pollWhileVisible(5000, function () {
            return $.getJSON('{% url 'compute_graph' compute_id %}', cpuSample ? {cpu_sample: cpuSample} : {});
        }, function graph_usage(data) {
            cpuSample = data.cpu_sample || null;
            cpuWindows.push(data.window);
            if (cpuWindows.length > CHART_POINTS) {
                cpuWindows.shift();
            }
            addPoint(cpuChart, data.timeline, [data.cpudata]);
            // a host that could not be read gives no memory value: a gap, same axis
            if (data.memdata.total) {
                memChart.options.scales.y.max = Math.round(data.memdata.total / 1048576);
                addPoint(memChart, data.timeline, [Math.round(data.memdata.usage / 1048576)]);
            } else {
                addPoint(memChart, data.timeline, [null]);
            }
        });
    }
</script>
{% endblock %}