Added ChartJS

computes/views.py

@@ -1,4 +1,6 @@
-from django.http import HttpResponseRedirect
+import time
+import json
+from django.http import HttpResponse, HttpResponseRedirect
 from django.core.urlresolvers import reverse
 from django.shortcuts import render
 from computes.models import Compute
@@ -127,6 +129,7 @@ def computes(request):
                     error_messages.append(msg_err.as_text())
     return render(request, 'computes.html', locals())
 
+
 def overview(request, compute_id):
     """
     :param request:
@@ -154,4 +157,69 @@ def overview(request, compute_id):
     except libvirtError as lib_err:
         error_messages.append(lib_err)
 
-    return render(request, 'overview.html', locals())
+    return render(request, 'overview.html', locals())
+
+
+def compute_graph(request, compute_id):
+    """
+    :param request:
+    :return:
+    """
+
+    if not request.user.is_authenticated():
+        return HttpResponseRedirect(reverse('login'))
+
+    points = 5
+    datasets = {}
+    cookies = {}
+    compute = Compute.objects.get(id=compute_id)
+    curent_time = time.strftime("%H:%M:%S")
+
+    try:
+        conn = wvmHostDetails(compute.hostname,
+                              compute.login,
+                              compute.password,
+                              compute.type)
+        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'] and not cookies['mem']:
+        datasets['cpu'] = [0]
+        datasets['mem'] = [0]
+        datasets['timer'] = [curent_time]
+    else:
+        datasets['cpu'] = eval(cookies['cpu'])
+        datasets['mem'] = eval(cookies['mem'])
+        datasets['timer'] = eval(cookies['timer'])
+
+    datasets['timer'].append(curent_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

static/css/webvirtcloud.css

@@ -141,4 +141,8 @@ p {
 
 #undefine {
     margin-top: 20px;
+}
+
+.flot-chart {
+    max-height: 250px;
 }

templates/overview.html

@@ -29,7 +29,8 @@
 
             {% include 'errors_block.html' %}
 
-            <div class="row">
+            <div class="row" id="max-width-page">
+                <h3 class="page-header">{% trans "Basic details" %}</h3>
                 <div class="col-xs-4 col-sm-3">
                     <p>{% trans "Hostname" %}</p>
                     <p>{% trans "Hypervisor" %}</p>
@@ -49,4 +50,103 @@
                     <p>{{ uri_conn }}</p>
                 </div>
             </div>
+            <div class="row" id="max-width-page">
+                <div class="col-lg-12">
+                    <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 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="cpuChart" width="735" height="250"></canvas>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="panel panel-info">
+                        <div class="panel-heading">
+                            <h3 class="panel-title"><i class="fa fa-long-arrow-right"></i> {% trans "RAM 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="250"></canvas>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+{% endblock %}
+{% block script %}
+<script src="{{ STATIC_URL }}/js/Chart.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: 10,
+        scaleStepWidth: 10,
+        scaleStartValue: 0,
+        responsive: true
+    });
+
+    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 = $("#memChart").get(0).getContext("2d");
+    var memChart = new Chart(mem_ctx).Line(memLineData, {
+        animation: false,
+        pointDotRadius: 2,
+        scaleLabel: "<%=value%> Mb",
+        responsive: true
+    });
+
+    function hostusage() {
+        $.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.update();
+            memChart.update();
+        });
+    }
+    $(function () {
+        window.setInterval('hostusage()', 4000);
+    });
+</script>
 {% endblock %}

webvirtcloud/urls.py

@@ -26,7 +26,7 @@ urlpatterns = patterns('',
 
     url(r'^compute/secret/(\d+)/$', 'secrets.views.secrets', name='secrets'),
 
-
+    url(r'^compute/statistics/(\d+)/$', 'computes.views.compute_graph', name='compute_graph'),
 
     url(r'^console/$', 'console.views.console', name='console'),
     url(r'^create/(\d+)/$', 'create.views.create_instance', name='create_instance'),