{% extends "base.html" %} {% load i18n %} {% load static %} {% load 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">{% icon 'dashboard' %} {% trans "Overview" %}</span> </li> <li class="breadcrumb-item"> <a href="{% url 'instances' compute.id %}">{% icon 'server' %} {% trans "Instances" %}</a> </li> <li class="breadcrumb-item"> <a href="{% url 'storages' compute.id %}">{% icon 'hdd-o' %} {% trans "Storages" %}</a> </li> <li class="breadcrumb-item"> <a href="{% url 'networks' compute.id %}">{% icon 'sitemap' %} {% trans "Networks" %}</a> </li> <li class="breadcrumb-item"> <a href="{% url 'interfaces' compute.id %}">{% icon 'wifi' %} {% trans "Interfaces" %}</a> </li> <li class="breadcrumb-item"> <a href="{% url 'nwfilters' compute.id %}">{% icon 'filter' %} {% trans "NWFilters" %}</a> </li> <li class="breadcrumb-item"> <a href="{% url 'virtsecrets' compute.id %}">{% 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> <span class="badge bg-secondary">{% trans 'Libvirt' %} </span> <span class="badge bg-primary">{{ lib_version }}</span> </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"> <i class="fa fa-long-arrow-right"></i> {% trans "CPU Utilization" %} </h5> <canvas id="cpuChart" width="735" height="160"></canvas> </div> </div> <div class="my-3 card border-primary"> <div class="card-body"> <h5 class="card-title "> <i class="fa fa-long-arrow-right"></i> {% trans "RAM Utilization" %} </h5> <canvas id="memChart" width="735" height="160"></canvas> </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'; } } } } }); if (Boolean({{ status }}) === true) { 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 %}