mirror of
https://github.com/retspen/webvirtcloud
synced 2024-12-25 15:45:23 +00:00
Added ChartJS
This commit is contained in:
parent
02ae7336ea
commit
02570cd826
5 changed files with 187 additions and 4 deletions
|
@ -1,4 +1,6 @@
|
||||||
from django.http import HttpResponseRedirect
|
import time
|
||||||
|
import json
|
||||||
|
from django.http import HttpResponse, HttpResponseRedirect
|
||||||
from django.core.urlresolvers import reverse
|
from django.core.urlresolvers import reverse
|
||||||
from django.shortcuts import render
|
from django.shortcuts import render
|
||||||
from computes.models import Compute
|
from computes.models import Compute
|
||||||
|
@ -127,6 +129,7 @@ def computes(request):
|
||||||
error_messages.append(msg_err.as_text())
|
error_messages.append(msg_err.as_text())
|
||||||
return render(request, 'computes.html', locals())
|
return render(request, 'computes.html', locals())
|
||||||
|
|
||||||
|
|
||||||
def overview(request, compute_id):
|
def overview(request, compute_id):
|
||||||
"""
|
"""
|
||||||
:param request:
|
:param request:
|
||||||
|
@ -155,3 +158,68 @@ def overview(request, compute_id):
|
||||||
error_messages.append(lib_err)
|
error_messages.append(lib_err)
|
||||||
|
|
||||||
return render(request, 'overview.html', locals())
|
return render(request, 'overview.html', locals())
|
||||||
|
|
||||||
|
|
||||||
|
def compute_graph(request, compute_id):
|
||||||
|
"""
|
||||||
|
:param request:
|
||||||
|
:return:
|
||||||
|
"""
|
||||||
|
|
||||||
|
if not request.user.is_authenticated():
|
||||||
|
return HttpResponseRedirect(reverse('login'))
|
||||||
|
|
||||||
|
points = 5
|
||||||
|
datasets = {}
|
||||||
|
cookies = {}
|
||||||
|
compute = Compute.objects.get(id=compute_id)
|
||||||
|
curent_time = time.strftime("%H:%M:%S")
|
||||||
|
|
||||||
|
try:
|
||||||
|
conn = wvmHostDetails(compute.hostname,
|
||||||
|
compute.login,
|
||||||
|
compute.password,
|
||||||
|
compute.type)
|
||||||
|
cpu_usage = conn.get_cpu_usage()
|
||||||
|
mem_usage = conn.get_memory_usage()
|
||||||
|
conn.close()
|
||||||
|
except libvirtError:
|
||||||
|
cpu_usage = 0
|
||||||
|
mem_usage = 0
|
||||||
|
|
||||||
|
try:
|
||||||
|
cookies['cpu'] = request.COOKIES['cpu']
|
||||||
|
cookies['mem'] = request.COOKIES['mem']
|
||||||
|
cookies['timer'] = request.COOKIES['timer']
|
||||||
|
except KeyError:
|
||||||
|
cookies['cpu'] = None
|
||||||
|
cookies['mem'] = None
|
||||||
|
|
||||||
|
if not cookies['cpu'] and not cookies['mem']:
|
||||||
|
datasets['cpu'] = [0]
|
||||||
|
datasets['mem'] = [0]
|
||||||
|
datasets['timer'] = [curent_time]
|
||||||
|
else:
|
||||||
|
datasets['cpu'] = eval(cookies['cpu'])
|
||||||
|
datasets['mem'] = eval(cookies['mem'])
|
||||||
|
datasets['timer'] = eval(cookies['timer'])
|
||||||
|
|
||||||
|
datasets['timer'].append(curent_time)
|
||||||
|
datasets['cpu'].append(int(cpu_usage['usage']))
|
||||||
|
datasets['mem'].append(int(mem_usage['usage']) / 1048576)
|
||||||
|
|
||||||
|
if len(datasets['timer']) > points:
|
||||||
|
datasets['timer'].pop(0)
|
||||||
|
if len(datasets['cpu']) > points:
|
||||||
|
datasets['cpu'].pop(0)
|
||||||
|
if len(datasets['mem']) > points:
|
||||||
|
datasets['mem'].pop(0)
|
||||||
|
|
||||||
|
data = json.dumps({'cpudata': datasets['cpu'], 'memdata': datasets['mem'], 'timeline': datasets['timer']})
|
||||||
|
response = HttpResponse()
|
||||||
|
response['Content-Type'] = "text/javascript"
|
||||||
|
response.cookies['cpu'] = datasets['cpu']
|
||||||
|
response.cookies['timer'] = datasets['timer']
|
||||||
|
response.cookies['mem'] = datasets['mem']
|
||||||
|
response.write(data)
|
||||||
|
return response
|
|
@ -142,3 +142,7 @@ p {
|
||||||
#undefine {
|
#undefine {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.flot-chart {
|
||||||
|
max-height: 250px;
|
||||||
|
}
|
11
static/js/Chart.min.js
vendored
Normal file
11
static/js/Chart.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
|
@ -29,7 +29,8 @@
|
||||||
|
|
||||||
{% include 'errors_block.html' %}
|
{% include 'errors_block.html' %}
|
||||||
|
|
||||||
<div class="row">
|
<div class="row" id="max-width-page">
|
||||||
|
<h3 class="page-header">{% trans "Basic details" %}</h3>
|
||||||
<div class="col-xs-4 col-sm-3">
|
<div class="col-xs-4 col-sm-3">
|
||||||
<p>{% trans "Hostname" %}</p>
|
<p>{% trans "Hostname" %}</p>
|
||||||
<p>{% trans "Hypervisor" %}</p>
|
<p>{% trans "Hypervisor" %}</p>
|
||||||
|
@ -49,4 +50,103 @@
|
||||||
<p>{{ uri_conn }}</p>
|
<p>{{ uri_conn }}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="row" id="max-width-page">
|
||||||
|
<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 usage" %}</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="250"></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 usage" %}</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="250"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endblock %}
|
||||||
|
{% block script %}
|
||||||
|
<script src="{{ STATIC_URL }}/js/Chart.min.js"></script>
|
||||||
|
<script>
|
||||||
|
var cpuLineData = {
|
||||||
|
labels : [0, 0, 0, 0, 0],
|
||||||
|
datasets : [
|
||||||
|
{
|
||||||
|
fillColor: "rgba(241,72,70,0.5)",
|
||||||
|
strokeColor: "rgba(241,72,70,1)",
|
||||||
|
pointColor : "rgba(241,72,70,1)",
|
||||||
|
pointStrokeColor : "#fff",
|
||||||
|
pointHighlightFill : "#fff",
|
||||||
|
pointHighlightStroke : "rgba(220,220,220,1)",
|
||||||
|
data : [0, 0, 0, 0, 0]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
var cpu_ctx = document.getElementById("cpuChart").getContext("2d");
|
||||||
|
var cpuChart = new Chart(cpu_ctx).Line(cpuLineData, {
|
||||||
|
animation: false,
|
||||||
|
pointDotRadius: 2,
|
||||||
|
scaleLabel: "<%=value%> %",
|
||||||
|
scaleOverride: true,
|
||||||
|
scaleSteps: 10,
|
||||||
|
scaleStepWidth: 10,
|
||||||
|
scaleStartValue: 0,
|
||||||
|
responsive: true
|
||||||
|
});
|
||||||
|
|
||||||
|
var memLineData = {
|
||||||
|
labels : [0, 0, 0, 0, 0],
|
||||||
|
datasets : [
|
||||||
|
{
|
||||||
|
fillColor : "rgba(249,134,33,0.5)",
|
||||||
|
strokeColor : "rgba(249,134,33,1)",
|
||||||
|
pointColor : "rgba(249,134,33,1)",
|
||||||
|
pointStrokeColor : "#fff",
|
||||||
|
pointHighlightFill : "#fff",
|
||||||
|
pointHighlightStroke : "rgba(151,187,205,1)",
|
||||||
|
data : [0, 0, 0, 0, 0]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
var mem_ctx = $("#memChart").get(0).getContext("2d");
|
||||||
|
var memChart = new Chart(mem_ctx).Line(memLineData, {
|
||||||
|
animation: false,
|
||||||
|
pointDotRadius: 2,
|
||||||
|
scaleLabel: "<%=value%> Mb",
|
||||||
|
responsive: true
|
||||||
|
});
|
||||||
|
|
||||||
|
function hostusage() {
|
||||||
|
$.getJSON('{% url 'compute_graph' compute_id %}', function (data) {
|
||||||
|
cpuChart.scale.xLabels = data.timeline;
|
||||||
|
memChart.scale.xLabels = data.timeline;
|
||||||
|
for (var i = 0; i < 5; i++) {
|
||||||
|
cpuChart.datasets[0].points[i].value = data.cpudata[i];
|
||||||
|
memChart.datasets[0].points[i].value = data.memdata[i];
|
||||||
|
}
|
||||||
|
cpuChart.update();
|
||||||
|
memChart.update();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
$(function () {
|
||||||
|
window.setInterval('hostusage()', 4000);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
{% endblock %}
|
{% endblock %}
|
|
@ -26,7 +26,7 @@ urlpatterns = patterns('',
|
||||||
|
|
||||||
url(r'^compute/secret/(\d+)/$', 'secrets.views.secrets', name='secrets'),
|
url(r'^compute/secret/(\d+)/$', 'secrets.views.secrets', name='secrets'),
|
||||||
|
|
||||||
|
url(r'^compute/statistics/(\d+)/$', 'computes.views.compute_graph', name='compute_graph'),
|
||||||
|
|
||||||
url(r'^console/$', 'console.views.console', name='console'),
|
url(r'^console/$', 'console.views.console', name='console'),
|
||||||
url(r'^create/(\d+)/$', 'create.views.create_instance', name='create_instance'),
|
url(r'^create/(\d+)/$', 'create.views.create_instance', name='create_instance'),
|
||||||
|
|
Loading…
Reference in a new issue