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

Added ChartJS

This commit is contained in:
Retspen 2015-03-19 15:37:16 +02:00
parent 02ae7336ea
commit 02570cd826
5 changed files with 187 additions and 4 deletions

View file

@ -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

View file

@ -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

File diff suppressed because one or more lines are too long

View file

@ -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 %}

View file

@ -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'),