1
0
Fork 0
mirror of https://github.com/retspen/webvirtcloud synced 2024-12-25 15:45:23 +00:00
webvirtcloud/computes/templates/overview.html

249 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> &nbsp;
<span class="badge bg-secondary text-light">{% trans 'Libvirt' %} </span>
<span class="badge bg-primary text-light">{{ 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">
<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 %}