mirror of
https://github.com/retspen/webvirtcloud
synced 2024-11-01 03:54:15 +00:00
248 lines
10 KiB
HTML
248 lines
10 KiB
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">
|
|
<h2 class="page-header">{{ compute.name }}</h2>
|
|
<nav aria-label="breadcrumb">
|
|
<ol class="breadcrumb bg-light shadow-sm">
|
|
<li class="breadcrumb-item active">
|
|
<span class="font-weight-bold"><i class="fa fa-dashboard"></i> {% trans "Overview" %}</span>
|
|
</li>
|
|
<li class="breadcrumb-item">
|
|
<a href="{% url 'instances' compute.id %}"><i class="fa fa-server"></i> {% trans "Instances" %}</a>
|
|
</li>
|
|
<li class="breadcrumb-item">
|
|
<a href="{% url 'storages' compute.id %}"><i class="fa fa-hdd-o"></i> {% trans "Storages" %}</a>
|
|
</li>
|
|
<li class="breadcrumb-item">
|
|
<a href="{% url 'networks' compute.id %}"><i class="fa fa-sitemap"></i> {% trans "Networks" %}</a>
|
|
</li>
|
|
<li class="breadcrumb-item">
|
|
<a href="{% url 'interfaces' compute.id %}"><i class="fa fa-wifi"></i> {% trans "Interfaces" %}</a>
|
|
</li>
|
|
<li class="breadcrumb-item">
|
|
<a href="{% url 'nwfilters' compute.id %}"><i class="fa fa-filter"></i> {% trans "NWFilters" %}</a>
|
|
</li>
|
|
<li class="breadcrumb-item">
|
|
<a href="{% url 'secrets' compute.id %}"><i class="fa fa-key"></i> {% trans "Secrets" %}</a>
|
|
</li>
|
|
</ol>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
<!-- /.row -->
|
|
|
|
{% include 'errors_block.html' %}
|
|
|
|
<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="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
{{ arch }}
|
|
</button>
|
|
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
|
{% 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="dropdownMenuButton{{ forloop.counter0 }}" data-toggle="dropdown">
|
|
{{ hypervisor.items|slice:"4:"|length }} {% trans 'more' %}...
|
|
</button>
|
|
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton{{ 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 text-light">{% trans 'Qemu' %} </span>
|
|
<span class="badge bg-primary text-light">{{ version }}</span>
|
|
<span class="badge bg-secondary text-light">{% trans 'Libvirt' %} </span>
|
|
<span class="badge bg-primary text-light">{{ 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>
|
|
{% 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 %}
|