Added memory usage graph.

app/components/stats/stats.html

@@ -2,8 +2,24 @@
     <div class="col-xs-12">
         <h1>Stats</h1>
         <h2>CPU Usage</h2>
+        <div class="row">
+            <div class="col-sm-8">
                 <canvas id="cpu-stats-chart" width="700" height="300"></canvas>
-        <canvas id="memory-stats-chart" width="700" height="300"></canvas>
+            </div>
+            <div class="col-sm-4">
+                <h3>Other CPU usage data</h3>
+                <p>TODO</p>
+            </div>
+        </div>
         <h2>Memory</h2>
+        <div class="row">
+            <div class="col-sm-8">
+                <canvas id="memory-stats-chart" width="700" height="300"></canvas>
+            </div>
+            <div class="col-sm-4">
+                <h3>Other Memory Stats</h3>
+                <p>TODO</p>
+            </div>
+        </div>
     </div>
 </div>

app/components/stats/statsController.js

@@ -1,24 +1,68 @@
 angular.module('stats', [])
-    .controller('StatsController', ['Settings', '$scope', 'Messages', '$timeout', 'Container', '$routeParams', function (Settings, $scope, Messages, $timeout, Container, $routeParams) {
+    .controller('StatsController', ['Settings', '$scope', 'Messages', '$timeout', 'Container', '$routeParams', 'humansizeFilter', function (Settings, $scope, Messages, $timeout, Container, $routeParams, humansizeFilter) {
-        // TODO: Implement memory chart, force scale to 0-100 for cpu, 0 to limit for memory, fix charts on dashboard
+        // TODO: Implement memory chart, force scale to 0-100 for cpu, 0 to limit for memory, fix charts on dashboard,
+        // TODO: Force memory scale to 0 - max memory
+        //var initialStats = {}; // Used to set scale of memory graph.
+        //
+        //Container.stats({id: $routeParams.id}, function (d) {
+        //    var arr = Object.keys(d).map(function (key) {
+        //        return d[key];
+        //    });
+        //    if (arr.join('').indexOf('no such id') !== -1) {
+        //        Messages.error('Unable to retrieve stats', 'Is this container running?');
+        //        return;
+        //    }
+        //    initialStats = d;
+        //}, function () {
+        //    Messages.error('Unable to retrieve stats', 'Is this container running?');
+        //});
 
-        var labels = [];
+        var cpuLabels = [];
-        var data = [];
+        var cpuData = [];
-        for (var i = 0; i < 40; i ++) {
+        var memoryLabels = [];
-            labels.push('');
+        var memoryData = [];
-            data.push(0);
+        for (var i = 0; i < 40; i++) {
+            cpuLabels.push('');
+            cpuData.push(0);
+            memoryLabels.push('');
+            memoryData.push(0);
         }
-        var dataset = { // CPU Usage
+        var cpuDataset = { // CPU Usage
             fillColor: "rgba(151,187,205,0.5)",
             strokeColor: "rgba(151,187,205,1)",
             pointColor: "rgba(151,187,205,1)",
             pointStrokeColor: "#fff",
-            data: data
+            data: cpuData
+        };
+        var memoryDataset = {
+            fillColor: "rgba(151,187,205,0.5)",
+            strokeColor: "rgba(151,187,205,1)",
+            pointColor: "rgba(151,187,205,1)",
+            pointStrokeColor: "#fff",
+            data: memoryData
         };
 
-        var chart = new Chart($('#cpu-stats-chart').get(0).getContext("2d")).Line({
+
-                labels: labels,
+        var cpuChart = new Chart($('#cpu-stats-chart').get(0).getContext("2d")).Line({
-                datasets: [dataset]
+            labels: cpuLabels,
+            datasets: [cpuDataset]
+        }, {
+            responsive: true
+        });
+
+        var memoryChart = new Chart($('#memory-stats-chart').get(0).getContext('2d')).Line({
+                labels: memoryLabels,
+                datasets: [memoryDataset]
+            },
+            {
+                scaleLabel: function (valueObj) {
+                    return humansizeFilter(parseInt(valueObj.value));
+                },
+                responsive: true,
+                //scaleOverride: true,
+                //scaleSteps: 10,
+                //scaleStepWidth: Math.ceil(initialStats.memory_stats.limit / 10),
+                //scaleStartValue: 0
             });
 
 
@@ -34,6 +78,7 @@ angular.module('stats', [])
 
                 // Update graph with latest data
                 updateChart(d);
+                updateMemoryChart(d);
                 $timeout(updateStats, 1000); // TODO: Switch to setInterval for more consistent readings
             }, function () {
                 Messages.error('Unable to retrieve stats', 'Is this container running?');
@@ -44,11 +89,18 @@ angular.module('stats', [])
 
         function updateChart(data) {
             console.log('updateChart', data);
-            chart.addData([$scope.calculateCPUPercent(data)], new Date(data.read).toLocaleTimeString());
+            cpuChart.addData([calculateCPUPercent(data)], new Date(data.read).toLocaleTimeString());
-            chart.removeData();
+            cpuChart.removeData();
         }
 
-        $scope.calculateCPUPercent = function (stats) {
+        function updateMemoryChart(data) {
+            console.log('updateMemoryChart', data);
+            memoryChart.addData([data.memory_stats.usage], new Date(data.read).toLocaleTimeString());
+            memoryChart.removeData();
+
+        }
+
+        function calculateCPUPercent(stats) {
             // Same algorithm the official client uses: https://github.com/docker/docker/blob/master/api/client/stats.go#L195-L208
             var prevCpu = stats.precpu_stats;
             var curCpu = stats.cpu_stats;
@@ -66,5 +118,6 @@ angular.module('stats', [])
             }
             return Math.random() * 100;
             //return cpuPercent; TODO: Switch back to the real value
-        };
+        }
-    }]);
+    }])
+;