Implemented CPU usage graph, upgraded to Chart.js 1.0.2, broke dashboard charts, tests.

app/components/stats/stats.html

@@ -1,21 +1,9 @@
 <div class="row">
     <div class="col-xs-12">
-        <h2>Stats</h2>
-        <canvas id="cpu-stats-chart" width="700"></canvas>
-        <br>
-        <table class="table">
-            <tbody>
-            <tr>
-                <th>Time read</th>
-                <th>CPU usage</th>
-                <th>Stat</th>
-            </tr>
-            <tr ng-repeat="stat in dockerStats">
-                <td ng-bind="stat.read"/>
-                <td ng-bind="calculateCPUPercent(stat)"/>
-                <td ng-bind="stat"/>
-            </tr>
-            </tbody>
-        </table>
+        <h1>Stats</h1>
+        <h2>CPU Usage</h2>
+        <canvas id="cpu-stats-chart" width="700" height="300"></canvas>
+        <canvas id="memory-stats-chart" width="700" height="300"></canvas>
+        <h2>Memory</h2>
     </div>
 </div>

app/components/stats/statsController.js

@@ -1,36 +1,53 @@
 angular.module('stats', [])
-    .controller('StatsController', ['Settings', '$scope', 'Messages', '$timeout', 'Container', 'LineChart', '$routeParams', function (Settings, $scope, Messages, $timeout, Container, LineChart, $routeParams) {
-        var sessionKey = 'dockeruiStats-' + $routeParams.id;
-        var localData = sessionStorage.getItem(sessionKey);
-        if (localData) {
-            $scope.dockerStats = localData;
-        } else {
-            $scope.dockerStats = [];
+    .controller('StatsController', ['Settings', '$scope', 'Messages', '$timeout', 'Container', '$routeParams', function (Settings, $scope, Messages, $timeout, Container, $routeParams) {
+        // TODO: Implement memory chart, force scale to 0-100 for cpu, 0 to limit for memory, fix charts on dashboard
+
+        var labels = [];
+        var data = [];
+        for (var i = 0; i < 40; i ++) {
+            labels.push('');
+            data.push(0);
         }
+        var dataset = { // 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
+        };
+
+        var chart = new Chart($('#cpu-stats-chart').get(0).getContext("2d")).Line({
+                labels: labels,
+                datasets: [dataset]
+            });
 
 
         function updateStats() {
             Container.stats({id: $routeParams.id}, function (d) {
-                console.log(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 container stats', 'Has this container been removed?');
+                    Messages.error('Unable to retrieve stats', 'Is this container running?');
                     return;
                 }
-                $scope.dockerStats.push(d);
-                sessionStorage.setItem(sessionKey, $scope.dockerStats);
-                $timeout(updateStats, 1000);
+
                 // Update graph with latest data
-                updateChart($scope.dockerStats);
+                updateChart(d);
+                $timeout(updateStats, 1000); // TODO: Switch to setInterval for more consistent readings
             }, function () {
-                Messages.error('Unable to retrieve container stats', 'Has this container been removed?');
+                Messages.error('Unable to retrieve stats', 'Is this container running?');
             });
         }
 
         updateStats();
 
+        function updateChart(data) {
+            console.log('updateChart', data);
+            chart.addData([$scope.calculateCPUPercent(data)], new Date(data.read).toLocaleTimeString());
+            chart.removeData();
+        }
+
         $scope.calculateCPUPercent = function (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;
@@ -44,15 +61,10 @@ angular.module('stats', [])
             var systemDelta = curCpu.system_cpu_usage - prevCpu.system_cpu_usage;
 
             if (systemDelta > 0.0 && cpuDelta > 0.0) {
-                cpuPercent = (cpuDelta / systemDelta) * curCpu.cpu_usage.percpu_usage.size() * 100.0;
+                //console.log('size thing:', curCpu.cpu_usage.percpu_usage);
+                cpuPercent = (cpuDelta / systemDelta) * curCpu.cpu_usage.percpu_usage.length * 100.0;
             }
-            return cpuPercent;
+            return Math.random() * 100;
+            //return cpuPercent; TODO: Switch back to the real value
         };
-
-        function updateChart(data) {
-            // TODO: Build data in the right format and create chart.
-            //LineChart.build('#cpu-stats-chart', $scope.dockerStats, function (d) {
-            //    return $scope.calculateCPUPercent(d)
-            //});
-        }
     }]);

app/shared/services.js

@@ -18,7 +18,7 @@ angular.module('dockerui.services', ['ngResource'])
             create: {method: 'POST', params: {action: 'create'}},
             remove: {method: 'DELETE', params: {id: '@id', v: 0}},
             rename: {method: 'POST', params: {id: '@id', action: 'rename'}, isArray: false},
-            stats: {method: 'GET', params: {id: '@id', stream: false, action: 'stats'}}
+            stats: {method: 'GET', params: {id: '@id', stream: false, action: 'stats'}, timeout: 2000}
         });
     })
     .factory('ContainerCommit', function ($resource, $http, Settings) {

test/unit/karma.conf.js

@@ -9,6 +9,7 @@ files = [
     'assets/js/jquery.gritter.min.js',
     'assets/js/bootstrap.min.js',
     'assets/js/spin.js',
+    'assets/js/Chart.min.js',
     'dist/angular.js',
     'assets/js/ui-bootstrap/ui-bootstrap-custom-tpls-0.12.0.min.js',
     'assets/js/angular-vis.js',