mirror of
https://github.com/retspen/webvirtcloud
synced 2024-12-25 15:45:23 +00:00
Update chartjs for node statistics
This commit is contained in:
parent
455f239093
commit
9ab198bd8c
2 changed files with 120 additions and 91 deletions
|
@ -80,7 +80,7 @@
|
||||||
<h3 class="page-header">{% trans "Performance" %}</h3>
|
<h3 class="page-header">{% trans "Performance" %}</h3>
|
||||||
<div class="panel panel-success">
|
<div class="panel panel-success">
|
||||||
<div class="panel-heading">
|
<div class="panel-heading">
|
||||||
<h3 class="panel-title"><i class="fa fa-long-arrow-right"></i> {% trans "CPU utilization" %}</h3>
|
<h3 class="panel-title"><i class="fa fa-long-arrow-right"></i> {% trans "CPU Utilization" %}</h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="panel-body">
|
<div class="panel-body">
|
||||||
<div class="flot-chart">
|
<div class="flot-chart">
|
||||||
|
@ -92,7 +92,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="panel panel-info">
|
<div class="panel panel-info">
|
||||||
<div class="panel-heading">
|
<div class="panel-heading">
|
||||||
<h3 class="panel-title"><i class="fa fa-long-arrow-right"></i> {% trans "RAM utilization" %}</h3>
|
<h3 class="panel-title"><i class="fa fa-long-arrow-right"></i> {% trans "RAM Utilization" %}</h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="panel-body">
|
<div class="panel-body">
|
||||||
<div class="flot-chart">
|
<div class="flot-chart">
|
||||||
|
@ -106,66 +106,128 @@
|
||||||
</div>
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
{% block script %}
|
{% block script %}
|
||||||
<script src="{% static "js/Chart.min.js" %}"></script>
|
<script src="{% static "js/Chart.bundle.min.js" %}"></script>
|
||||||
<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 cpu_ctx = document.getElementById("cpuChart").getContext("2d");
|
||||||
var cpuChart = new Chart(cpu_ctx).Line(cpuLineData, {
|
var cpuChart = new Chart(cpu_ctx, {
|
||||||
animation: false,
|
type: 'line',
|
||||||
pointDotRadius: 2,
|
data: {
|
||||||
scaleLabel: "<%=value%> %",
|
datasets : [{
|
||||||
scaleOverride: true,
|
label: 'Usage',
|
||||||
scaleSteps: 5,
|
backgroundColor: "rgba(241,72,70,0.5)",
|
||||||
scaleStepWidth: 20,
|
pointRadius: 2,
|
||||||
scaleStartValue: 0,
|
}]
|
||||||
responsive: true
|
},
|
||||||
|
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 memLineData = {
|
var mem_ctx = document.getElementById("memChart").getContext("2d");
|
||||||
labels : [0, 0, 0, 0, 0],
|
var memChart = new Chart(mem_ctx, {
|
||||||
datasets : [
|
type: 'line',
|
||||||
{
|
data: {
|
||||||
fillColor : "rgba(249,134,33,0.5)",
|
datasets: [{
|
||||||
strokeColor : "rgba(249,134,33,1)",
|
pointRadius: 2,
|
||||||
pointColor : "rgba(249,134,33,1)",
|
}]
|
||||||
pointStrokeColor : "#fff",
|
},
|
||||||
pointHighlightFill : "#fff",
|
options: {
|
||||||
pointHighlightStroke : "rgba(151,187,205,1)",
|
responsive: true,
|
||||||
data : [0, 0, 0, 0, 0]
|
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';
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
]
|
}
|
||||||
}
|
|
||||||
|
|
||||||
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
|
|
||||||
});
|
});
|
||||||
|
|
||||||
window.setInterval(function graph_usage() {
|
window.setInterval(function graph_usage() {
|
||||||
$.getJSON('{% url 'compute_graph' compute_id %}', function (data) {
|
$.getJSON('{% url 'compute_graph' compute_id %}', function (data) {
|
||||||
cpuChart.scale.xLabels = data.timeline;
|
cpuChart.data.labels.push(data.timeline);
|
||||||
memChart.scale.xLabels = data.timeline;
|
memChart.data.labels.push(data.timeline);
|
||||||
for (var i = 0; i < 5; i++) {
|
|
||||||
cpuChart.datasets[0].points[i].value = data.cpudata[i];
|
cpuChart.data.datasets[0].data.push(data.cpudata);
|
||||||
memChart.datasets[0].points[i].value = data.memdata[i];
|
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();
|
cpuChart.update();
|
||||||
memChart.update();
|
memChart.update();
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
import time
|
import time
|
||||||
import json
|
import json
|
||||||
|
from django.utils import timezone
|
||||||
from django.http import HttpResponse, HttpResponseRedirect
|
from django.http import HttpResponse, HttpResponseRedirect
|
||||||
from django.core.urlresolvers import reverse
|
from django.core.urlresolvers import reverse
|
||||||
from django.shortcuts import render, get_object_or_404
|
from django.shortcuts import render, get_object_or_404
|
||||||
|
@ -172,59 +173,25 @@ def compute_graph(request, compute_id):
|
||||||
:param request:
|
:param request:
|
||||||
:return:
|
:return:
|
||||||
"""
|
"""
|
||||||
|
|
||||||
points = 5
|
|
||||||
datasets = {}
|
|
||||||
cookies = {}
|
|
||||||
compute = get_object_or_404(Compute, pk=compute_id)
|
compute = get_object_or_404(Compute, pk=compute_id)
|
||||||
current_time = time.strftime("%H:%M:%S")
|
|
||||||
|
|
||||||
try:
|
try:
|
||||||
conn = wvmHostDetails(compute.hostname,
|
conn = wvmHostDetails(compute.hostname,
|
||||||
compute.login,
|
compute.login,
|
||||||
compute.password,
|
compute.password,
|
||||||
compute.type)
|
compute.type)
|
||||||
|
current_time = timezone.now().strftime("%H:%M:%S")
|
||||||
cpu_usage = conn.get_cpu_usage()
|
cpu_usage = conn.get_cpu_usage()
|
||||||
mem_usage = conn.get_memory_usage()
|
mem_usage = conn.get_memory_usage()
|
||||||
conn.close()
|
conn.close()
|
||||||
except libvirtError:
|
except libvirtError:
|
||||||
cpu_usage = 0
|
cpu_usage = {'usage': 0}
|
||||||
mem_usage = 0
|
mem_usage = {'usage': 0}
|
||||||
|
|
||||||
try:
|
data = json.dumps({'cpudata': cpu_usage['usage'],
|
||||||
cookies['cpu'] = request.COOKIES['cpu']
|
'memdata': mem_usage,
|
||||||
cookies['mem'] = request.COOKIES['mem']
|
'timeline': current_time})
|
||||||
cookies['timer'] = request.COOKIES['timer']
|
|
||||||
except KeyError:
|
|
||||||
cookies['cpu'] = None
|
|
||||||
cookies['mem'] = None
|
|
||||||
|
|
||||||
if not cookies['cpu'] or not cookies['mem']:
|
|
||||||
datasets['cpu'] = [0] * points
|
|
||||||
datasets['mem'] = [0] * points
|
|
||||||
datasets['timer'] = [0] * points
|
|
||||||
else:
|
|
||||||
datasets['cpu'] = eval(cookies['cpu'])
|
|
||||||
datasets['mem'] = eval(cookies['mem'])
|
|
||||||
datasets['timer'] = eval(cookies['timer'])
|
|
||||||
|
|
||||||
datasets['timer'].append(current_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 = HttpResponse()
|
||||||
response['Content-Type'] = "text/javascript"
|
response['Content-Type'] = "text/javascript"
|
||||||
response.cookies['cpu'] = datasets['cpu']
|
|
||||||
response.cookies['timer'] = datasets['timer']
|
|
||||||
response.cookies['mem'] = datasets['mem']
|
|
||||||
response.write(data)
|
response.write(data)
|
||||||
return response
|
return response
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue