From 181bd9d392ac7c747544276c016cec7bf0705537 Mon Sep 17 00:00:00 2001
From: catborise <catborise@yahoo.com>
Date: Tue, 21 May 2019 09:12:28 +0300
Subject: [PATCH] Update chartjs for instance statistics and add memory usage
 info for instances

---
 instances/templates/instance.html | 357 +++++++++++++++++++++---------
 instances/views.py                |  78 +------
 2 files changed, 263 insertions(+), 172 deletions(-)

diff --git a/instances/templates/instance.html b/instances/templates/instance.html
index 635cdd2..f0464b6 100644
--- a/instances/templates/instance.html
+++ b/instances/templates/instance.html
@@ -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();
                 }
             });
diff --git a/instances/views.py b/instances/views.py
index 67af348..130e2d9 100644
--- a/instances/views.py
+++ b/instances/views.py
@@ -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'})