mirror of
https://github.com/retspen/webvirtcloud
synced 2024-12-24 23:25:24 +00:00
Merge pull request #239 from catborise/master
Updating chartjs and some others
This commit is contained in:
Anatoliy Guskov
GitHub
commit
e05fa2354b
10 changed files with 420 additions and 288 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
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
Django==1.11.17
|
||||
Django==1.11.20
|
||||
websockify==0.8.0
|
||||
gunicorn==19.9.0
|
||||
lxml==4.2.5
|
||||
libvirt-python==4.10.0
|
||||
pytz
|
||||
|
||||
rwlock
|
||||
|
|
|
|||
|
|
@ -1230,6 +1230,18 @@
|
|||
</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 %}
|
||||
<div class="panel panel-info">
|
||||
<div class="panel-heading">
|
||||
|
|
@ -1332,7 +1344,6 @@
|
|||
|
||||
$.each(data['vols'], function(i, item) {
|
||||
$("#vols").append('<option value=' + item +'>' + item + '</option>');
|
||||
|
||||
})
|
||||
});
|
||||
|
||||
|
|
@ -1568,136 +1579,274 @@ $(document).ready(function () {
|
|||
});
|
||||
});
|
||||
</script>
|
||||
<script src="{% static "js/Chart.min.js" %}"></script>
|
||||
<script src="{% static "js/Chart.bundle.min.js" %}"></script>
|
||||
<script>
|
||||
$('#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 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 = {};
|
||||
{% for disk in disks %}
|
||||
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 %}
|
||||
|
||||
var netChart = {};
|
||||
{% for net in networks %}
|
||||
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 %}
|
||||
|
||||
window.setInterval(function graph_usage() {
|
||||
$.getJSON('{% url 'inst_graph' compute_id vname %}', function (data) {
|
||||
cpuChart.scale.xLabels = data.timeline;
|
||||
for (var i = 0; i < data.cpudata.length; i++) {
|
||||
cpuChart.datasets[0].points[i].value = data.cpudata[i];
|
||||
|
||||
cpuChart.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();
|
||||
}
|
||||
cpuChart.update();
|
||||
|
||||
for (var j = 0; j < data.blkdata.length; j++) {
|
||||
diskChart[data.blkdata[j].dev].scale.xLabels = data.timeline;
|
||||
memChart.data.labels.push(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];
|
||||
diskChart[data.blkdata[j].dev].datasets[0].points[i].value = data.blkdata[j].data[0][i];
|
||||
diskChart[data.blkdata[j].dev].datasets[1].points[i].value = data.blkdata[j].data[1][i];
|
||||
|
||||
memChart.options.scales.yAxes[0].ticks.max = parseInt(data.memdata.total / 1024);
|
||||
memChart.options.scales.yAxes[0].ticks.stepSize = parseInt(data.memdata.total / (1024 * 5));
|
||||
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();
|
||||
}
|
||||
|
||||
for (var j = 0; j < data.netdata.length; j++) {
|
||||
netChart[data.netdata[j].dev].scale.xLabels = data.timeline;
|
||||
for (let j = 0; j < data.netdata.length; j++) {
|
||||
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].datasets[0].points[i].label = 'Time: ' + data.timeline[i];
|
||||
netChart[data.netdata[j].dev].datasets[0].points[i].value = data.netdata[j].data[0][i];
|
||||
netChart[data.netdata[j].dev].datasets[1].points[i].value = data.netdata[j].data[1][i];
|
||||
netChart[data.netdata[j].dev].data.datasets[0].data.push(data.netdata[0].data[0]);
|
||||
netChart[data.netdata[j].dev].data.datasets[1].data.push(data.netdata[0].data[1]);
|
||||
if (netChart[data.netdata[j].dev].data.datasets[0].data.length > 10){
|
||||
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();
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1040,24 +1040,13 @@ def inst_graph(request, compute_id, vname):
|
|||
:param request:
|
||||
:return:
|
||||
"""
|
||||
|
||||
datasets = {}
|
||||
json_blk = []
|
||||
datasets_blk = {}
|
||||
json_net = []
|
||||
datasets_net = {}
|
||||
cookies = {}
|
||||
points = 5
|
||||
current_time = time.strftime("%H:%M:%S")
|
||||
|
||||
compute = get_object_or_404(Compute, pk=compute_id)
|
||||
response = HttpResponse()
|
||||
response['Content-Type'] = "text/javascript"
|
||||
|
||||
def check_points(dataset):
|
||||
if len(dataset) > points:
|
||||
dataset.pop(0)
|
||||
return dataset
|
||||
|
||||
try:
|
||||
conn = wvmInstance(compute.hostname,
|
||||
compute.login,
|
||||
|
|
@ -1065,71 +1054,24 @@ def inst_graph(request, compute_id, vname):
|
|||
compute.type,
|
||||
vname)
|
||||
cpu_usage = conn.cpu_usage()
|
||||
mem_usage = conn.mem_usage()
|
||||
blk_usage = conn.disk_usage()
|
||||
net_usage = conn.net_usage()
|
||||
conn.close()
|
||||
|
||||
try:
|
||||
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'])
|
||||
|
||||
current_time = time.strftime("%H:%M:%S")
|
||||
for blk in blk_usage:
|
||||
if not cookies['blk']:
|
||||
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]
|
||||
json_blk.append({'dev': blk['dev'], 'data': [int(blk['rd']) / 1048576, int(blk['wr']) / 1048576]})
|
||||
|
||||
for net in net_usage:
|
||||
if not cookies['net']:
|
||||
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]
|
||||
json_net.append({'dev': net['dev'], 'data': [int(net['rx']) / 1048576, int(net['tx']) / 1048576]})
|
||||
|
||||
datasets_rx.append(int(net['rx']) / 1048576)
|
||||
datasets_tx.append(int(net['tx']) / 1048576)
|
||||
data = json.dumps({'cpudata': int(cpu_usage['cpu']),
|
||||
'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:
|
||||
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.
|
||||
"""
|
||||
get_all_mem = self.wvm.getInfo()[1] * 1048576
|
||||
get_freemem = self.wvm.getMemoryStats(-1, 0)
|
||||
if type(get_freemem) == dict:
|
||||
free = (get_freemem.values()[0] +
|
||||
get_freemem.values()[2] +
|
||||
get_freemem.values()[3]) * 1024
|
||||
percent = (100 - ((free * 100) / get_all_mem))
|
||||
usage = (get_all_mem - free)
|
||||
mem_usage = {'usage': usage, 'percent': percent}
|
||||
all_mem = self.wvm.getInfo()[1] * 1048576
|
||||
freemem = self.wvm.getMemoryStats(-1, 0)
|
||||
if type(freemem) == dict:
|
||||
free = (freemem.values()[0] +
|
||||
freemem.values()[2] +
|
||||
freemem.values()[3]) * 1024
|
||||
percent = (100 - ((free * 100) / all_mem))
|
||||
usage = (all_mem - free)
|
||||
mem_usage = {'total': all_mem, 'usage': usage, 'percent': percent}
|
||||
else:
|
||||
mem_usage = {'usage': None, 'percent': None}
|
||||
mem_usage = {'total': None, 'usage': None, 'percent': None}
|
||||
return mem_usage
|
||||
|
||||
def get_cpu_usage(self):
|
||||
|
|
|
|||
|
|
@ -526,6 +526,22 @@ class wvmInstance(wvmConnect):
|
|||
cpu_usage['cpu'] = 0
|
||||
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):
|
||||
devices = []
|
||||
dev_usage = []
|
||||
|
|
|
|||
Loading…
Reference in a new issue