mirror of
https://github.com/retspen/webvirtcloud
synced 2024-11-01 12:04:15 +00:00
Merge pull request #239 from catborise/master
Updating chartjs and some others
This commit is contained in:
commit
e05fa2354b
10 changed files with 420 additions and 288 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
|
||||||
|
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
Django==1.11.17
|
Django==1.11.20
|
||||||
websockify==0.8.0
|
websockify==0.8.0
|
||||||
gunicorn==19.9.0
|
gunicorn==19.9.0
|
||||||
lxml==4.2.5
|
lxml==4.2.5
|
||||||
libvirt-python==4.10.0
|
libvirt-python==4.10.0
|
||||||
pytz
|
pytz
|
||||||
|
rwlock
|
||||||
|
|
|
@ -1230,6 +1230,18 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="panel panel-default">
|
||||||
|
<div class="panel-heading">
|
||||||
|
<h3 class="panel-title"><i class="fa fa-long-arrow-right"></i> {% trans "Memory 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="160"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
{% for net in networks %}
|
{% for net in networks %}
|
||||||
<div class="panel panel-info">
|
<div class="panel panel-info">
|
||||||
<div class="panel-heading">
|
<div class="panel-heading">
|
||||||
|
@ -1332,7 +1344,6 @@
|
||||||
|
|
||||||
$.each(data['vols'], function(i, item) {
|
$.each(data['vols'], function(i, item) {
|
||||||
$("#vols").append('<option value=' + item +'>' + item + '</option>');
|
$("#vols").append('<option value=' + item +'>' + item + '</option>');
|
||||||
|
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -1568,136 +1579,274 @@ $(document).ready(function () {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<script src="{% static "js/Chart.min.js" %}"></script>
|
<script src="{% static "js/Chart.bundle.min.js" %}"></script>
|
||||||
<script>
|
<script>
|
||||||
$('#chartgraphs').on('shown.bs.tab', function (event) {
|
$('#chartgraphs').on('shown.bs.tab', function (event) {
|
||||||
var cpuLineData = {
|
|
||||||
labels : [0, 0, 0, 0, 0],
|
|
||||||
datasets : [
|
|
||||||
{
|
|
||||||
fillColor: "rgba(44,127,184,0.5)",
|
|
||||||
strokeColor: "rgba(44,127,184,1)",
|
|
||||||
pointColor: "rgba(44,127,184,1)",
|
|
||||||
pointStrokeColor: "#fff",
|
|
||||||
data: [0, 0, 0, 0, 0]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
var diskLineData = {
|
|
||||||
labels : [0, 0, 0, 0, 0],
|
|
||||||
datasets : [
|
|
||||||
{
|
|
||||||
fillColor: "rgba(127,205,187,0.5)",
|
|
||||||
strokeColor: "rgba(127,205,187,1)",
|
|
||||||
pointColor: "rgba(127,205,187,1)",
|
|
||||||
pointStrokeColor: "#fff",
|
|
||||||
data: [0, 0, 0, 0, 0],
|
|
||||||
label: "Read"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
fillColor: "rgba(44,127,184,0.5)",
|
|
||||||
strokeColor: "rgba(44,127,184,1)",
|
|
||||||
pointColor: "rgba(44,127,184,1)",
|
|
||||||
pointStrokeColor: "#fff",
|
|
||||||
data: [0, 0, 0, 0, 0],
|
|
||||||
label: "Write"
|
|
||||||
},
|
|
||||||
]
|
|
||||||
};
|
|
||||||
var netLineData = {
|
|
||||||
labels : [0, 0, 0, 0, 0],
|
|
||||||
datasets : [
|
|
||||||
{
|
|
||||||
fillColor: "rgba(127,205,187,0.5)",
|
|
||||||
strokeColor: "rgba(127,205,187,1)",
|
|
||||||
pointColor: "rgba(127,205,187,1)",
|
|
||||||
pointStrokeColor: "#fff",
|
|
||||||
data: [0, 0, 0, 0, 0],
|
|
||||||
label: "Inbound"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
fillColor: "rgba(44,127,184,0.5)",
|
|
||||||
strokeColor: "rgba(44,127,184,1)",
|
|
||||||
pointColor: "rgba(44,127,184,1)",
|
|
||||||
pointStrokeColor: "#fff",
|
|
||||||
data: [0, 0, 0, 0, 0],
|
|
||||||
label: "Outbound"
|
|
||||||
},
|
|
||||||
]
|
|
||||||
};
|
|
||||||
var cpuOpt = {
|
|
||||||
animation: false,
|
|
||||||
pointDotRadius: 2,
|
|
||||||
scaleLabel: "<%=value%> %",
|
|
||||||
tooltipTemplate: "<%=value%> %",
|
|
||||||
scaleShowGridLines : false,
|
|
||||||
scaleOverride: true,
|
|
||||||
scaleSteps: 5,
|
|
||||||
scaleStepWidth: 20,
|
|
||||||
scaleStartValue: 0,
|
|
||||||
responsive: true
|
|
||||||
};
|
|
||||||
var diskOpt = {
|
|
||||||
animation: false,
|
|
||||||
pointDotRadius: 2,
|
|
||||||
scaleLabel: "<%=value%> Mb/s",
|
|
||||||
multiTooltipTemplate: "<%=datasetLabel%> - <%=value%> Mb/s",
|
|
||||||
scaleShowGridLines : false,
|
|
||||||
responsive: true
|
|
||||||
};
|
|
||||||
var netOpt = {
|
|
||||||
animation: false,
|
|
||||||
pointDotRadius: 2,
|
|
||||||
scaleLabel: "<%=value%> Mbps",
|
|
||||||
multiTooltipTemplate: "<%=datasetLabel%> - <%=value%> Mbps",
|
|
||||||
scaleShowGridLines : false,
|
|
||||||
responsive: true,
|
|
||||||
};
|
|
||||||
|
|
||||||
var cpu_ctx = $("#cpuChart").get(0).getContext("2d");
|
var cpu_ctx = $("#cpuChart").get(0).getContext("2d");
|
||||||
var cpuChart = new Chart(cpu_ctx).Line(cpuLineData, cpuOpt);
|
var cpuChart = new Chart(cpu_ctx, {
|
||||||
|
type: 'line',
|
||||||
|
data: {
|
||||||
|
datasets : [{
|
||||||
|
backgroundColor: "rgba(44,127,184,0.5)",
|
||||||
|
label: "Usage"
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
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: {
|
||||||
|
suggestedMax: 100,
|
||||||
|
suggestedMin: 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 mem_ctx = $("#memChart").get(0).getContext("2d");
|
||||||
|
var memChart = new Chart(mem_ctx, {
|
||||||
|
type: 'line',
|
||||||
|
data: {
|
||||||
|
datasets : [{
|
||||||
|
label: "Usage"
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
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: {
|
||||||
|
suggestedMax: 100,
|
||||||
|
suggestedMin: 0,
|
||||||
|
stepSize: 20,
|
||||||
|
callback: function(value, index, values) {
|
||||||
|
return value + ' MB';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}],
|
||||||
|
},
|
||||||
|
tooltips: {
|
||||||
|
callbacks: {
|
||||||
|
label: function (tooltipItem, chart) {
|
||||||
|
var label = chart.datasets[tooltipItem.datasetIndex].label || '';
|
||||||
|
if (label) {
|
||||||
|
label += '(RSS): ';
|
||||||
|
}
|
||||||
|
return label += tooltipItem.yLabel + ' MB';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
var diskChart = {};
|
var diskChart = {};
|
||||||
{% for disk in disks %}
|
{% for disk in disks %}
|
||||||
var disk_ctx_{{ disk.dev }} = $("#blk{{ disk.dev }}Chart").get(0).getContext("2d");
|
var disk_ctx_{{ disk.dev }} = $("#blk{{ disk.dev }}Chart").get(0).getContext("2d");
|
||||||
diskChart['{{ disk.dev }}'] = new Chart(disk_ctx_{{ disk.dev }}).Line(diskLineData, diskOpt);
|
diskChart['{{ disk.dev }}'] = new Chart(disk_ctx_{{ disk.dev }}, {
|
||||||
|
type: 'line',
|
||||||
|
data: {
|
||||||
|
datasets : [{
|
||||||
|
backgroundColor: "rgba(127,205,187,0.5)",
|
||||||
|
label: "Read"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
backgroundColor: "rgba(44,127,184,0.5)",
|
||||||
|
label: "Write"
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
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: {
|
||||||
|
suggestedmax: 100,
|
||||||
|
suggestedMin: 0,
|
||||||
|
callback: function(value, index, values) {
|
||||||
|
return value + ' Mb/s';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}],
|
||||||
|
},
|
||||||
|
tooltips: {
|
||||||
|
callbacks: {
|
||||||
|
label: function (tooltipItem, chart) {
|
||||||
|
var label = chart.datasets[tooltipItem.datasetIndex].label || '';
|
||||||
|
if (label) {
|
||||||
|
label += ': ';
|
||||||
|
}
|
||||||
|
return label += tooltipItem.yLabel + ' Mb/s';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|
||||||
var netChart = {};
|
var netChart = {};
|
||||||
{% for net in networks %}
|
{% for net in networks %}
|
||||||
var net_ctx_{{ forloop.counter0 }} = $("#netEth{{ forloop.counter0 }}Chart").get(0).getContext("2d");
|
var net_ctx_{{ forloop.counter0 }} = $("#netEth{{ forloop.counter0 }}Chart").get(0).getContext("2d");
|
||||||
netChart['{{ forloop.counter0 }}'] = new Chart(net_ctx_{{ forloop.counter0 }}).Line(netLineData, netOpt);
|
netChart['{{ forloop.counter0 }}'] = new Chart(net_ctx_{{ forloop.counter0 }}, {
|
||||||
|
type: 'line',
|
||||||
|
data: {
|
||||||
|
datasets : [
|
||||||
|
{
|
||||||
|
backgroundColor: "rgba(127,205,187,0.5)",
|
||||||
|
label: "Inbound"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
backgroundColor: "rgba(44,127,184,0.5)",
|
||||||
|
label: "Outbound"
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
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: {
|
||||||
|
suggestedMax: 100,
|
||||||
|
suggestedMin: 0,
|
||||||
|
callback: function(value, index, values) {
|
||||||
|
return value + ' Mbps';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}],
|
||||||
|
},
|
||||||
|
tooltips: {
|
||||||
|
callbacks: {
|
||||||
|
label: function (tooltipItem, chart) {
|
||||||
|
var label = chart.datasets[tooltipItem.datasetIndex].label || '';
|
||||||
|
if (label) {
|
||||||
|
label += ': ';
|
||||||
|
}
|
||||||
|
return label += tooltipItem.yLabel + ' Mbps';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|
||||||
window.setInterval(function graph_usage() {
|
window.setInterval(function graph_usage() {
|
||||||
$.getJSON('{% url 'inst_graph' compute_id vname %}', function (data) {
|
$.getJSON('{% url 'inst_graph' compute_id vname %}', function (data) {
|
||||||
cpuChart.scale.xLabels = data.timeline;
|
|
||||||
for (var i = 0; i < data.cpudata.length; i++) {
|
cpuChart.data.labels.push(data.timeline);
|
||||||
cpuChart.datasets[0].points[i].value = data.cpudata[i];
|
|
||||||
|
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();
|
||||||
}
|
}
|
||||||
cpuChart.update();
|
cpuChart.update();
|
||||||
|
|
||||||
for (var j = 0; j < data.blkdata.length; j++) {
|
memChart.data.labels.push(data.timeline);
|
||||||
diskChart[data.blkdata[j].dev].scale.xLabels = data.timeline;
|
|
||||||
|
|
||||||
for (var i = 0; i < data.blkdata[j].data[0].length; i++) {
|
|
||||||
diskChart[data.blkdata[j].dev].datasets[0].points[i].label = 'Time: ' + data.timeline[i];
|
memChart.options.scales.yAxes[0].ticks.max = parseInt(data.memdata.total / 1024);
|
||||||
diskChart[data.blkdata[j].dev].datasets[0].points[i].value = data.blkdata[j].data[0][i];
|
memChart.options.scales.yAxes[0].ticks.stepSize = parseInt(data.memdata.total / (1024 * 5));
|
||||||
diskChart[data.blkdata[j].dev].datasets[1].points[i].value = data.blkdata[j].data[1][i];
|
memChart.data.datasets[0].data.push(data.memdata.used / 1024);
|
||||||
|
if (memChart.data.datasets[0].data.length > 10){
|
||||||
|
memChart.data.labels.shift();
|
||||||
|
memChart.data.datasets[0].data.shift();
|
||||||
}
|
}
|
||||||
|
memChart.update();
|
||||||
|
|
||||||
|
|
||||||
|
for (let j = 0; j < data.blkdata.length; j++) {
|
||||||
|
diskChart[data.blkdata[j].dev].data.labels.push(data.timeline);
|
||||||
|
|
||||||
|
diskChart[data.blkdata[j].dev].data.datasets[0].data.push(data.blkdata[0].data[0]);
|
||||||
|
diskChart[data.blkdata[j].dev].data.datasets[1].data.push(data.blkdata[0].data[1]);
|
||||||
|
if (diskChart[data.blkdata[j].dev].data.datasets[0].data.length > 10){
|
||||||
|
diskChart[data.blkdata[j].dev].data.labels.shift();
|
||||||
|
diskChart[data.blkdata[j].dev].data.datasets[0].data.shift();
|
||||||
|
diskChart[data.blkdata[j].dev].data.datasets[1].data.shift();
|
||||||
|
}
|
||||||
diskChart[data.blkdata[j].dev].update();
|
diskChart[data.blkdata[j].dev].update();
|
||||||
}
|
}
|
||||||
|
|
||||||
for (var j = 0; j < data.netdata.length; j++) {
|
for (let j = 0; j < data.netdata.length; j++) {
|
||||||
netChart[data.netdata[j].dev].scale.xLabels = data.timeline;
|
netChart[data.netdata[j].dev].data.labels.push(data.timeline);
|
||||||
|
|
||||||
for (var i = 0; i < data.netdata[j].data[0].length; i++) {
|
netChart[data.netdata[j].dev].data.datasets[0].data.push(data.netdata[0].data[0]);
|
||||||
netChart[data.netdata[j].dev].datasets[0].points[i].label = 'Time: ' + data.timeline[i];
|
netChart[data.netdata[j].dev].data.datasets[1].data.push(data.netdata[0].data[1]);
|
||||||
netChart[data.netdata[j].dev].datasets[0].points[i].value = data.netdata[j].data[0][i];
|
if (netChart[data.netdata[j].dev].data.datasets[0].data.length > 10){
|
||||||
netChart[data.netdata[j].dev].datasets[1].points[i].value = data.netdata[j].data[1][i];
|
netChart[data.netdata[j].dev].data.labels.shift();
|
||||||
|
netChart[data.netdata[j].dev].data.datasets[0].data.shift();
|
||||||
|
netChart[data.netdata[j].dev].data.datasets[1].data.shift();
|
||||||
}
|
}
|
||||||
|
|
||||||
netChart[data.netdata[j].dev].update();
|
netChart[data.netdata[j].dev].update();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -1040,24 +1040,13 @@ def inst_graph(request, compute_id, vname):
|
||||||
:param request:
|
:param request:
|
||||||
:return:
|
:return:
|
||||||
"""
|
"""
|
||||||
|
|
||||||
datasets = {}
|
|
||||||
json_blk = []
|
json_blk = []
|
||||||
datasets_blk = {}
|
|
||||||
json_net = []
|
json_net = []
|
||||||
datasets_net = {}
|
|
||||||
cookies = {}
|
|
||||||
points = 5
|
|
||||||
current_time = time.strftime("%H:%M:%S")
|
|
||||||
compute = get_object_or_404(Compute, pk=compute_id)
|
compute = get_object_or_404(Compute, pk=compute_id)
|
||||||
response = HttpResponse()
|
response = HttpResponse()
|
||||||
response['Content-Type'] = "text/javascript"
|
response['Content-Type'] = "text/javascript"
|
||||||
|
|
||||||
def check_points(dataset):
|
|
||||||
if len(dataset) > points:
|
|
||||||
dataset.pop(0)
|
|
||||||
return dataset
|
|
||||||
|
|
||||||
try:
|
try:
|
||||||
conn = wvmInstance(compute.hostname,
|
conn = wvmInstance(compute.hostname,
|
||||||
compute.login,
|
compute.login,
|
||||||
|
@ -1065,71 +1054,24 @@ def inst_graph(request, compute_id, vname):
|
||||||
compute.type,
|
compute.type,
|
||||||
vname)
|
vname)
|
||||||
cpu_usage = conn.cpu_usage()
|
cpu_usage = conn.cpu_usage()
|
||||||
|
mem_usage = conn.mem_usage()
|
||||||
blk_usage = conn.disk_usage()
|
blk_usage = conn.disk_usage()
|
||||||
net_usage = conn.net_usage()
|
net_usage = conn.net_usage()
|
||||||
conn.close()
|
conn.close()
|
||||||
|
|
||||||
try:
|
current_time = time.strftime("%H:%M:%S")
|
||||||
cookies['cpu'] = request.COOKIES['cpu']
|
|
||||||
cookies['blk'] = request.COOKIES['blk']
|
|
||||||
cookies['net'] = request.COOKIES['net']
|
|
||||||
cookies['timer'] = request.COOKIES['timer']
|
|
||||||
except KeyError:
|
|
||||||
cookies['cpu'] = cookies['blk'] = cookies['net'] = None
|
|
||||||
|
|
||||||
if not cookies['cpu']:
|
|
||||||
datasets['timer'] = datasets['cpu'] = [0] * points
|
|
||||||
else:
|
|
||||||
datasets['cpu'] = eval(cookies['cpu'])
|
|
||||||
datasets['timer'] = eval(cookies['timer'])
|
|
||||||
|
|
||||||
datasets['timer'].append(current_time)
|
|
||||||
datasets['cpu'].append(int(cpu_usage['cpu']))
|
|
||||||
|
|
||||||
datasets['timer'] = check_points(datasets['timer'])
|
|
||||||
datasets['cpu'] = check_points(datasets['cpu'])
|
|
||||||
|
|
||||||
for blk in blk_usage:
|
for blk in blk_usage:
|
||||||
if not cookies['blk']:
|
json_blk.append({'dev': blk['dev'], 'data': [int(blk['rd']) / 1048576, int(blk['wr']) / 1048576]})
|
||||||
datasets_rd = datasets_wr = [0] * points
|
|
||||||
else:
|
|
||||||
datasets['blk'] = eval(cookies['blk'])
|
|
||||||
datasets_rd = datasets['blk'][blk['dev']][0]
|
|
||||||
datasets_wr = datasets['blk'][blk['dev']][1]
|
|
||||||
|
|
||||||
datasets_rd.append(int(blk['rd']) / 1048576)
|
|
||||||
datasets_wr.append(int(blk['wr']) / 1048576)
|
|
||||||
|
|
||||||
datasets_rd = check_points(datasets_rd)
|
|
||||||
datasets_wr = check_points(datasets_wr)
|
|
||||||
|
|
||||||
json_blk.append({'dev': blk['dev'], 'data': [datasets_rd, datasets_wr]})
|
|
||||||
datasets_blk[blk['dev']] = [datasets_rd, datasets_wr]
|
|
||||||
|
|
||||||
for net in net_usage:
|
for net in net_usage:
|
||||||
if not cookies['net']:
|
json_net.append({'dev': net['dev'], 'data': [int(net['rx']) / 1048576, int(net['tx']) / 1048576]})
|
||||||
datasets_tx = datasets_rx = [0] * points
|
|
||||||
else:
|
|
||||||
datasets['net'] = eval(cookies['net'])
|
|
||||||
datasets_rx = datasets['net'][net['dev']][0]
|
|
||||||
datasets_tx = datasets['net'][net['dev']][1]
|
|
||||||
|
|
||||||
datasets_rx.append(int(net['rx']) / 1048576)
|
data = json.dumps({'cpudata': int(cpu_usage['cpu']),
|
||||||
datasets_tx.append(int(net['tx']) / 1048576)
|
'memdata': mem_usage,
|
||||||
|
'blkdata': json_blk,
|
||||||
|
'netdata': json_net,
|
||||||
|
'timeline': current_time})
|
||||||
|
|
||||||
datasets_rx = check_points(datasets_rx)
|
|
||||||
datasets_tx = check_points(datasets_tx)
|
|
||||||
|
|
||||||
json_net.append({'dev': net['dev'], 'data': [datasets_rx, datasets_tx]})
|
|
||||||
datasets_net[net['dev']] = [datasets_rx, datasets_tx]
|
|
||||||
|
|
||||||
data = json.dumps({'cpudata': datasets['cpu'], 'blkdata': json_blk,
|
|
||||||
'netdata': json_net, 'timeline': datasets['timer']})
|
|
||||||
|
|
||||||
response.cookies['cpu'] = datasets['cpu']
|
|
||||||
response.cookies['timer'] = datasets['timer']
|
|
||||||
response.cookies['blk'] = datasets_blk
|
|
||||||
response.cookies['net'] = datasets_net
|
|
||||||
except libvirtError:
|
except libvirtError:
|
||||||
data = json.dumps({'error': 'Error 500'})
|
data = json.dumps({'error': 'Error 500'})
|
||||||
|
|
||||||
|
|
7
static/js/Chart.bundle.min.js
vendored
Normal file
7
static/js/Chart.bundle.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
11
static/js/Chart.min.js
vendored
11
static/js/Chart.min.js
vendored
File diff suppressed because one or more lines are too long
4
static/js/jquery.js
vendored
4
static/js/jquery.js
vendored
File diff suppressed because one or more lines are too long
|
@ -16,17 +16,17 @@ class wvmHostDetails(wvmConnect):
|
||||||
"""
|
"""
|
||||||
Function return memory usage on node.
|
Function return memory usage on node.
|
||||||
"""
|
"""
|
||||||
get_all_mem = self.wvm.getInfo()[1] * 1048576
|
all_mem = self.wvm.getInfo()[1] * 1048576
|
||||||
get_freemem = self.wvm.getMemoryStats(-1, 0)
|
freemem = self.wvm.getMemoryStats(-1, 0)
|
||||||
if type(get_freemem) == dict:
|
if type(freemem) == dict:
|
||||||
free = (get_freemem.values()[0] +
|
free = (freemem.values()[0] +
|
||||||
get_freemem.values()[2] +
|
freemem.values()[2] +
|
||||||
get_freemem.values()[3]) * 1024
|
freemem.values()[3]) * 1024
|
||||||
percent = (100 - ((free * 100) / get_all_mem))
|
percent = (100 - ((free * 100) / all_mem))
|
||||||
usage = (get_all_mem - free)
|
usage = (all_mem - free)
|
||||||
mem_usage = {'usage': usage, 'percent': percent}
|
mem_usage = {'total': all_mem, 'usage': usage, 'percent': percent}
|
||||||
else:
|
else:
|
||||||
mem_usage = {'usage': None, 'percent': None}
|
mem_usage = {'total': None, 'usage': None, 'percent': None}
|
||||||
return mem_usage
|
return mem_usage
|
||||||
|
|
||||||
def get_cpu_usage(self):
|
def get_cpu_usage(self):
|
||||||
|
|
|
@ -526,6 +526,22 @@ class wvmInstance(wvmConnect):
|
||||||
cpu_usage['cpu'] = 0
|
cpu_usage['cpu'] = 0
|
||||||
return cpu_usage
|
return cpu_usage
|
||||||
|
|
||||||
|
def mem_usage(self):
|
||||||
|
mem_usage = {}
|
||||||
|
if self.get_status() == 1:
|
||||||
|
mem_stats = self.instance.memoryStats()
|
||||||
|
rss = mem_stats['rss'] if mem_stats['rss'] else 0
|
||||||
|
total = mem_stats['actual'] if mem_stats['actual'] else 0
|
||||||
|
available = total - rss
|
||||||
|
if available < 0: available = 0
|
||||||
|
|
||||||
|
mem_usage['used'] = rss
|
||||||
|
mem_usage['total'] = total
|
||||||
|
else:
|
||||||
|
mem_usage['used'] = 0
|
||||||
|
mem_usage['total'] = 0
|
||||||
|
return mem_usage
|
||||||
|
|
||||||
def disk_usage(self):
|
def disk_usage(self):
|
||||||
devices = []
|
devices = []
|
||||||
dev_usage = []
|
dev_usage = []
|
||||||
|
|
Loading…
Reference in a new issue