1
0
Fork 0
mirror of https://github.com/retspen/webvirtcloud synced 2024-11-01 03:54:15 +00:00
webvirtcloud/computes/templates/overview.html

237 lines
9.5 KiB
HTML
Raw Normal View History

2015-02-27 12:25:41 +00:00
{% extends "base.html" %}
2015-02-27 08:53:51 +00:00
{% load i18n %}
2015-04-06 07:51:50 +00:00
{% load staticfiles %}
2015-03-04 13:43:29 +00:00
{% block title %}{% trans "Overview" %} - {{ compute.name }}{% endblock %}
2015-02-27 12:25:41 +00:00
{% block content %}
2015-03-05 09:55:15 +00:00
<!-- 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>
2015-03-05 09:55:15 +00:00
<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>
2018-09-21 13:50:44 +00:00
<li>
<i class="fa fa-filter"></i> <a href="{% url 'nwfilters' compute.id %}">{% trans "NWFilters" %}</a>
</li>
2015-03-05 09:55:15 +00:00
<li>
<i class="fa fa-key"></i> <a href="{% url 'secrets' compute.id %}">{% trans "Secrets" %}</a>
</li>
</ol>
</div>
</div>
<!-- /.row -->
2015-02-27 08:53:51 +00:00
2015-03-03 09:34:09 +00:00
{% include 'errors_block.html' %}
2015-02-27 08:53:51 +00:00
2015-03-19 13:37:16 +00:00
<div class="row" id="max-width-page">
<h3 class="page-header">{% trans "Basic details" %}</h3>
2015-03-05 09:55:15 +00:00
<div class="col-xs-4 col-sm-3">
<p>{% trans "Hostname" %}</p>
<p>{% trans "Hypervisors" %}</p>
<p>{% trans "Emulator" %}</p>
<p>{% trans "Version" %}</p>
2015-03-05 09:55:15 +00:00
<p>{% trans "Memory" %}</p>
<p>{% trans "Architecture" %}</p>
<p>{% trans "Logical CPUs" %}</p>
<p>{% trans "Processor" %}</p>
<p>{% trans "Connection" %}</p>
2016-03-18 18:21:44 +00:00
<p>{% trans "Details" %}</p>
2015-03-05 09:55:15 +00:00
</div>
<div class="col-xs-8 col-sm-9">
2015-03-05 09:55:15 +00:00
<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>
2015-03-05 09:55:15 +00:00
<p>{{ host_memory|filesizeformat }}</p>
<p>{{ host_arch }}</p>
2015-03-05 09:55:15 +00:00
<p>{{ logical_cpu }}</p>
<p>{{ model_cpu }}</p>
<p>{{ uri_conn }}</p>
2016-03-18 18:21:44 +00:00
<p>{{ compute.details }}</p>
2015-03-05 09:55:15 +00:00
</div>
2015-02-27 09:28:22 +00:00
</div>
2015-04-21 11:46:58 +00:00
<div class="row">
2015-03-19 13:37:16 +00:00
<div class="col-lg-12">
<h3 class="page-header">{% trans "Performance" %}</h3>
<div class="panel panel-success">
<div class="panel-heading">
2019-05-21 06:10:32 +00:00
<h3 class="panel-title"><i class="fa fa-long-arrow-right"></i> {% trans "CPU Utilization" %}</h3>
2015-03-19 13:37:16 +00:00
</div>
<div class="panel-body">
<div class="flot-chart">
<div class="flot-chart-content" id="flot-moving-line-chart" style="padding: 0px; position: relative;">
2015-04-21 11:46:58 +00:00
<canvas id="cpuChart" width="735" height="160"></canvas>
2015-03-19 13:37:16 +00:00
</div>
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
2019-05-21 06:10:32 +00:00
<h3 class="panel-title"><i class="fa fa-long-arrow-right"></i> {% trans "RAM Utilization" %}</h3>
2015-03-19 13:37:16 +00:00
</div>
<div class="panel-body">
<div class="flot-chart">
<div class="flot-chart-content" id="flot-moving-line-chart" style="padding: 0px; position: relative;">
2015-04-21 11:46:58 +00:00
<canvas id="memChart" width="735" height="160"></canvas>
2015-03-19 13:37:16 +00:00
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block script %}
2019-05-21 06:10:32 +00:00
<script src="{% static "js/Chart.bundle.min.js" %}"></script>
2015-03-19 13:37:16 +00:00
<script>
var cpu_ctx = document.getElementById("cpuChart").getContext("2d");
2019-05-21 06:10:32 +00:00
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 + ' %';
}
}
}
}
2015-03-19 13:37:16 +00:00
});
2019-05-21 06:10:32 +00:00
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';
}
}
2015-03-19 13:37:16 +00:00
}
2019-05-21 06:10:32 +00:00
}
2015-03-19 13:37:16 +00:00
});
2015-03-23 13:47:47 +00:00
window.setInterval(function graph_usage() {
2015-03-19 13:37:16 +00:00
$.getJSON('{% url 'compute_graph' compute_id %}', function (data) {
2019-05-21 06:10:32 +00:00
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();
2015-03-19 13:37:16 +00:00
}
2019-05-21 06:10:32 +00:00
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();
}
2015-03-19 13:37:16 +00:00
cpuChart.update();
memChart.update();
});
2015-03-23 13:47:47 +00:00
}, 5000);
2015-03-19 13:37:16 +00:00
</script>
{% endblock %}