Actually use cpu values in system graphs

src/views/system.js

@@ -3,6 +3,7 @@
 /* global angular:false */
 /* global $:false */
 /* global asyncForEach */
+/* global Chart */
 
 angular.module('Application').controller('SystemController', ['$scope', '$location', '$timeout', 'Client', function ($scope, $location, $timeout, Client) {
     Client.onReady(function () { if (!Client.getUserInfo().isAtLeastAdmin) $location.path('/'); });
@@ -13,6 +14,7 @@ angular.module('Application').controller('SystemController', ['$scope', '$locati
     $scope.hasRedisServices = false;
     $scope.redisServicesExpanded = false;
     $scope.memory = null;
+    $scope.activeTab = 0;
 
     // http://stackoverflow.com/questions/1484506/random-color-generator-in-javascript
     function getRandomColor() {
@@ -260,6 +262,87 @@ angular.module('Application').controller('SystemController', ['$scope', '$locati
         }
     };
 
+    $scope.graphs = {
+        error: {},
+
+        period: 6,
+        periodLabel: '6 hours',
+        memoryChart: null,
+        diskChart: null,
+
+        setPeriod: function (hours, label) {
+            $scope.graphs.period = hours;
+            $scope.graphs.periodLabel = label;
+            $scope.graphs.show();
+        },
+
+        show: function () {
+            // both in minutes
+            var timePeriod = $scope.graphs.period * 60;
+            var timeBucketSize = $scope.graphs.period > 24 ? (6*60) : 5;
+
+            function fillGraph(canvasId, data, label, chartPropertyName, max, valueDivider) {
+                // translate the data from bytes to MB
+                var datapoints = data.datapoints.map(function (d) { return parseInt((d[0] / valueDivider).toFixed(2)); });
+                var labels = datapoints.map(function (d, index) {
+                    var dateTime = new Date(Date.now() - ((timePeriod - (index * timeBucketSize)) * 60 *1000));
+                    return ('0' + dateTime.getHours()).slice(-2) + ':00';
+                });
+
+                var data = {
+                    labels: labels,
+                    datasets: [{
+                        label: label,
+                        backgroundColor: '#82C4F844',
+                        borderColor: '#2196F3',
+                        borderWidth: 1,
+                        radius: 2,
+                        pointBackgroundColor: 'rgba(151,187,205,1)',
+                        pointBorderColor: '#2196F3',
+                        pointHoverBackgroundColor: '#82C4F8',
+                        pointHoverBorderColor: '#82C4F8',
+                        data: datapoints
+                    }]
+                };
+
+                var options = {
+                    maintainAspectRatio: true,
+                    aspectRatio: 2.5,
+                    legend: {
+                        display: false
+                    },
+                    tooltips: {
+                        intersect: false
+                    },
+                    scales: {
+                        yAxes: [{
+                            ticks: {
+                                min: 0,
+                                max: max,
+                                beginAtZero: true
+                            }
+                        }]
+                    }
+                };
+
+                var ctx = $(canvasId).get(0).getContext('2d');
+
+                if ($scope.graphs[chartPropertyName]) $scope.graphs[chartPropertyName].destroy();
+                $scope.graphs[chartPropertyName] = new Chart(ctx, { type: 'line', data: data, options: options });
+            }
+
+            var systemMemoryuery = 'summarize(sum(collectd.localhost.memory.memory-used, collectd.localhost.swap.swap-used), "' + timeBucketSize + 'min", "avg")';
+            var cpuQuery = 'summarize(sum(collectd.localhost.aggregation-cpu-average.cpu-system, collectd.localhost.aggregation-cpu-average.cpu-user), "' + timeBucketSize + 'min", "avg")';
+
+            Client.graphs([ systemMemoryuery, cpuQuery ], '-' + timePeriod + 'min', {}, function (error, result) {
+                if (error) return console.error(error);
+
+                fillGraph('#graphsSystemMemoryChart', result[0], 'Memory', 'memoryChart', Number.parseInt($scope.memory.memory / 1024 / 1024), 1024 * 1024);
+                fillGraph('#graphsCPUChart', result[1], 'CPU Usage', 'cpuChart', 100, 1);
+            });
+        }
+    };
+
     Client.onReady(function () {
         Client.memory(function (error, memory) {
             if (error) console.error(error);