Skip to content

Updating chartjs and some others #239

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
retspen merged 7 commits into from
May 24, 2019
Merged

Updating chartjs and some others #239

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
7986784
Update jQuery 3.3.1 -> 3.4.1
catborise May 21, 2019
3879a1b
Update Chartjs 1.1.1 to 2.8.0
catborise May 21, 2019
98edc59
Update Django requirement 1.11.17 to 1.11.20
catborise May 21, 2019
a014781
Add mem usage function
catborise May 21, 2019
455f239
Add total memory info for memory usage and change var names
catborise May 21, 2019
9ab198b
Update chartjs for node statistics
catborise May 21, 2019
181bd9d
Update chartjs for instance statistics and add memory usage info for …
catborise May 21, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
164 changes: 113 additions & 51 deletions computes/templates/overview.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ <h3 class="page-header">{% trans "Basic details" %}</h3>
<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">
Expand All @@ -92,7 +92,7 @@ <h3 class="panel-title"><i class="fa fa-long-arrow-right"></i> {% trans "CPU uti
</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">
Expand All @@ -106,66 +106,128 @@ <h3 class="panel-title"><i class="fa fa-long-arrow-right"></i> {% trans "RAM uti
</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();
});
Expand Down
47 changes: 7 additions & 40 deletions computes/views.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand Down Expand Up @@ -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

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)
cpu_usage = {'usage': 0}
mem_usage = {'usage': 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

Expand Down
4 changes: 2 additions & 2 deletions conf/requirements.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Loading