mirror of
https://github.com/retspen/webvirtcloud
synced 2024-11-01 03:54:15 +00:00
Update chartjs for node statistics
This commit is contained in:
catborise
parent
455f239093
commit
9ab198bd8c
2 changed files with 120 additions and 91 deletions
|
|
@ -80,7 +80,7 @@
|
|||
<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 utilization" %}</h3>
|
||||
<h3 class="panel-title"><i class="fa fa-long-arrow-right"></i> {% trans "CPU Utilization" %}</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="flot-chart">
|
||||
|
|
@ -92,7 +92,7 @@
|
|||
</div>
|
||||
<div class="panel panel-info">
|
||||
<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 class="panel-body">
|
||||
<div class="flot-chart">
|
||||
|
|
@ -106,66 +106,128 @@
|
|||
</div>
|
||||
{% endblock %}
|
||||
{% block script %}
|
||||
<script src="{% static "js/Chart.min.js" %}"></script>
|
||||
<script src="{% static "js/Chart.bundle.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: 5,
|
||||
scaleStepWidth: 20,
|
||||
scaleStartValue: 0,
|
||||
responsive: true
|
||||
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 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 = 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';
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
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() {
|
||||
$.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.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();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import time
|
||||
import json
|
||||
from django.utils import timezone
|
||||
from django.http import HttpResponse, HttpResponseRedirect
|
||||
from django.core.urlresolvers import reverse
|
||||
from django.shortcuts import render, get_object_or_404
|
||||
|
|
@ -172,59 +173,25 @@ def compute_graph(request, compute_id):
|
|||
:param request:
|
||||
:return:
|
||||
"""
|
||||
|
||||
points = 5
|
||||
datasets = {}
|
||||
cookies = {}
|
||||
compute = get_object_or_404(Compute, pk=compute_id)
|
||||
current_time = time.strftime("%H:%M:%S")
|
||||
|
||||
try:
|
||||
conn = wvmHostDetails(compute.hostname,
|
||||
compute.login,
|
||||
compute.password,
|
||||
compute.type)
|
||||
current_time = timezone.now().strftime("%H:%M:%S")
|
||||
cpu_usage = conn.get_cpu_usage()
|
||||
mem_usage = conn.get_memory_usage()
|
||||
conn.close()
|
||||
except libvirtError:
|
||||
cpu_usage = 0
|
||||
mem_usage = 0
|
||||
cpu_usage = {'usage': 0}
|
||||
mem_usage = {'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'] 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']})
|
||||
data = json.dumps({'cpudata': cpu_usage['usage'],
|
||||
'memdata': mem_usage,
|
||||
'timeline': current_time})
|
||||
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
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue