Update chartjs for node statistics

computes/templates/overview.html

@@ -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, {
+    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() {
         $.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();
             memChart.update();
         });

computes/views.py

@@ -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
+        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['Content-Type'] = "text/javascript"
-    response.cookies['cpu'] = datasets['cpu']
-    response.cookies['timer'] = datasets['timer']
-    response.cookies['mem'] = datasets['mem']
     response.write(data)
     return response