webvirtcloud/computes/templates/overview.html

{% extends "base.html" %}
{% load i18n %}
{% load staticfiles %}
{% block title %}{% trans "Overview" %} - {{ compute.name }}{% endblock %}
{% block content %}
            <!-- Page Heading -->
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">{{ compute.name }}</h1>
                    <ol class="breadcrumb">
                        <li class="active">
                            <i class="fa fa-dashboard"></i> {% trans "Overview" %}
                        </li>
                        <li>
                            <i class="fa fa-server"></i> <a href="{% url 'instances' compute.id %}">{% trans "Instances" %}</a>
                        </li>
                        <li>
                            <i class="fa fa-hdd-o"></i> <a href="{% url 'storages' compute.id %}">{% trans "Storages" %}</a>
                        </li>
                        <li>
                            <i class="fa fa-sitemap"></i> <a href="{% url 'networks' compute.id %}">{% trans "Networks" %}</a>
                        </li>
                        <li>
                            <i class="fa fa-wifi"></i> <a href="{% url 'interfaces' compute.id %}">{% trans "Interfaces" %}</a>
                        </li>
                        <li>
                            <i class="fa fa-filter"></i> <a href="{% url 'nwfilters' compute.id %}">{% trans "NWFilters" %}</a>
                        </li>
                        <li>
                            <i class="fa fa-key"></i> <a href="{% url 'secrets' compute.id %}">{% trans "Secrets" %}</a>
                        </li>
                    </ol>
                </div>
            </div>
            <!-- /.row -->

            {% include 'errors_block.html' %}

            <div class="row" id="max-width-page">
                <h3 class="page-header">{% trans "Basic details" %}</h3>
                <div class="col-xs-4 col-sm-3">
                    <p>{% trans "Hostname" %}</p>
                    <p>{% trans "Hypervisors" %}</p>
                    <p>{% trans "Emulator" %}</p>
                    <p>{% trans "Version" %}</p>
                    <p>{% trans "Memory" %}</p>
                    <p>{% trans "Architecture" %}</p>
                    <p>{% trans "Logical CPUs" %}</p>
                    <p>{% trans "Processor" %}</p>
                    <p>{% trans "Connection" %}</p>
					<p>{% trans "Details" %}</p>
                </div>
                <div class="col-xs-8 col-sm-9">
                    <p>{{ hostname }}</p>
                    <p>{% for arch, hpv in hypervisor.items %}
                          <span class="glyphicon glyphicon-chevron-right"></span>
                          <span class="label label-default">{{ arch }}</span>
                          {% for h in hpv %}
                              <span class="label label-primary">{{ h }}</span>
                          {% endfor %}
                        {% endfor %}
                    </p>
                    <p>{{ emulator }}</p>
                    <p>
                        <span class="label label-default">{% trans 'Qemu' %} </span>
                        <span class="label label-primary">{{ version }}</span> &nbsp;
                        <span class="label label-default">{% trans 'Libvirt' %} </span>
                        <span class="label label-primary">{{ lib_version }}</span> &nbsp;
                    </p>
                    <p>{{ host_memory|filesizeformat }}</p>
                    <p>{{ host_arch }}</p>
                    <p>{{ logical_cpu }}</p>
                    <p>{{ model_cpu }}</p>
                    <p>{{ uri_conn }}</p>
					<p>{{ compute.details }}</p>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <h3 class="page-header">{% trans "Performance" %}</h3>
                    <div class="panel panel-success">
                        <div class="panel-heading">
                            <h3 class="panel-title"><i class="fa fa-long-arrow-right"></i> {% trans "CPU Utilization" %}</h3>
                        </div>
                        <div class="panel-body">
                            <div class="flot-chart">
                                <div class="flot-chart-content" id="flot-moving-line-chart" style="padding: 0px; position: relative;">
                                    <canvas id="cpuChart" width="735" height="160"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-info">
                        <div class="panel-heading">
                            <h3 class="panel-title"><i class="fa fa-long-arrow-right"></i> {% trans "RAM Utilization" %}</h3>
                        </div>
                        <div class="panel-body">
                            <div class="flot-chart">
                                <div class="flot-chart-content" id="flot-moving-line-chart" style="padding: 0px; position: relative;">
                                    <canvas id="memChart" width="735" height="160"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
{% endblock %}
{% block script %}
<script src="{% static "js/Chart.bundle.min.js" %}"></script>
<script>

    var cpu_ctx = document.getElementById("cpuChart").getContext("2d");
    var cpuChart = new Chart(cpu_ctx, {
        type: 'line',
        data: {
            datasets : [{
                label: 'Usage',
                backgroundColor: "rgba(241,72,70,0.5)",
                pointRadius: 2,
            }]
        },
        options: {
            responsive: true,
            legend: {
                display: false
            },
            scales: {
                xAxes:[{
                    offset: false,
                    ticks: {
                        beginAtZero: false,
                        autoSkip: true,
                        maxTicksLimit: 10,
                        maxRotation: 0,
                        minRotation: 0,
                        stepSize: 10,
                    },
                }],
                yAxes: [{
                    ticks: {
                        max: 100,
                        min: 0,
                        stepSize: 20,
                        callback: function(value, index, values) {
                            return value + ' %';
                        }
                    },
                }],
            },
            tooltips: {
                 callbacks: {
                     label: function (tooltipItem, chart) {
                         var label = chart.datasets[tooltipItem.datasetIndex].label || '';
                         if (label) {
                            label += ': ';
                         }
                         return label += tooltipItem.yLabel + ' %';
                     }
                 }
            }
        }
    });

    var mem_ctx = document.getElementById("memChart").getContext("2d");
    var memChart = new Chart(mem_ctx, {
        type: 'line',
        data: {
            datasets: [{
                pointRadius: 2,
            }]
        },
        options: {
            responsive: true,
            legend: {
                display: false
            },
            scales: {
                xAxes:[{
                    offset: false,
                    ticks: {
                        beginAtZero: false,
                        autoSkip: true,
                        maxTicksLimit: 10,
                        maxRotation: 0,
                        minRotation: 0
                    }
                }],
                yAxes: [{
                    ticks:{
                        suggestedMin: 0,
                        suggestedMax: 100,
                        callback: function(value, index, values) {
                            return value + ' MB';
                        }
                    },
                }],
            },
            tooltips: {
                 callbacks: {
                     label: function (tooltipItem, chart) {
                         var label = chart.datasets[tooltipItem.datasetIndex].label || '';
                         if (label) {
                            label += ': ';
                         }
                         return label += tooltipItem.yLabel  + ' MB';
                     }
                 }
            }
        }
    });

    window.setInterval(function graph_usage() {
        $.getJSON('{% url 'compute_graph' compute_id %}', function (data) {
            cpuChart.data.labels.push(data.timeline);
            memChart.data.labels.push(data.timeline);

            cpuChart.data.datasets[0].data.push(data.cpudata);
            if (cpuChart.data.datasets[0].data.length > 10){
                cpuChart.data.labels.shift();
                cpuChart.data.datasets[0].data.shift();
            }
            memChart.options.scales.yAxes[0].ticks.max = parseInt(data.memdata.total / 1048576);
            memChart.options.scales.yAxes[0].ticks.stepSize = parseInt(data.memdata.total / (1048576 * 5));
            memChart.data.datasets[0].data.push(parseInt(data.memdata.usage / 1048576));

            if (memChart.data.datasets[0].data.length > 10){
                memChart.data.labels.shift();
                memChart.data.datasets[0].data.shift();
            }

            cpuChart.update();
            memChart.update();
        });
    }, 5000);
</script>
{% endblock %}