Add created chart for images and containers

js/app.js

@@ -14,5 +14,5 @@ angular.module('dockerui', ['dockerui.services', 'dockerui.filters'])
     // You need to set this to the api endpoint without the port i.e. http://192.168.1.9
     .constant('DOCKER_ENDPOINT', '/dockerapi')
     .constant('DOCKER_PORT', '') // Docker port, leave as an empty string if no port is requred.  If you have a port, prefix it with a ':' i.e. :4243
-    .constant('UI_VERSION', 'v0.2.5')
+    .constant('UI_VERSION', 'v0.3')
     .constant('DOCKER_API_VERSION', 'v1.4');

js/controllers.js

@@ -3,16 +3,74 @@ function MastheadController($scope) {
     $scope.template = 'partials/masthead.html';
 }
 
-function DashboardController($scope, Container, Settings) {
+function newLineChart(id, data, getkey) {
+    var chart = getChart(id);
+    var map = {};
+
+    for (var i = 0; i < data.length; i++) {
+        var c = data[i];
+        var key = getkey(c);
+        
+        var count = map[key];
+        if (count === undefined) {
+            count = 0;
+        }
+        count += 1;
+        map[key] = count;
+    }
+
+    var labels = [];
+    var data = [];
+    var keys = Object.keys(map);
+
+    for (var i = keys.length - 1; i > -1; i--) {
+        var k = keys[i];
+        labels.push(k);
+        data.push(map[k]);
+    }
+    var dataset = {
+        fillColor : "rgba(151,187,205,0.5)",
+        strokeColor : "rgba(151,187,205,1)",
+        pointColor : "rgba(151,187,205,1)",
+        pointStrokeColor : "#fff",
+        data : data
+    };
+    chart.Line({
+        labels: labels,
+        datasets: [dataset]
+    }, 
+    {
+        scaleStepWidth: 1, 
+        pointDotRadius:1,
+        scaleOverride: true,
+        scaleSteps: labels.length
+    });
+}
+
+function DashboardController($scope, Container, Image, Settings) {
     $scope.predicate = '-Created';
     $scope.containers = [];
+
+    var getStarted = function(data) {
+        $scope.totalContainers = data.length;
+        newLineChart('#containers-started-chart', data, function(c) { return new Date(c.Created * 1000).toLocaleDateString(); });
+        var s = $scope;
+        Image.query({}, function(d) {
+            s.totalImages = d.length;
+            newLineChart('#images-created-chart', d, function(c) { return new Date(c.Created * 1000).toLocaleDateString(); });
+        });
+    };
+
     var opts = {animation:false};    
     if (Settings.firstLoad) {
+        $('#stats').hide();
         opts.animation = true;
         Settings.firstLoad = false;
         $('#masthead').show();
+
         setTimeout(function() {
             $('#masthead').slideUp('slow');
+            $('#stats').slideDown('slow');
         }, 5000);
     }
    
@@ -34,6 +92,8 @@ function DashboardController($scope, Container, Settings) {
            }
        }
 
+       getStarted(d);
+
        var c = getChart('#containers-chart');
        var data = [
         {
@@ -320,49 +380,7 @@ function ImageController($scope, $q, $routeParams, $location, Image, Container,
             var promise = getContainersFromImage($q, Container, t);
 
             promise.then(function(containers) {
-                var map = {}; 
+                newLineChart('#containers-started-chart', containers, function(c) { return new Date(c.Created * 1000).toLocaleDateString(); });
-                
-                for (var i = 0; i < containers.length; i++) {
-                    var c = containers[i];
-                    var date = new Date(c.Created * 1000).toLocaleDateString();
-                    
-                    var count = map[date];
-                    if (count === undefined) {
-                        count = 0;
-                    }
-                    console.log(map);
-                    count += 1;
-                    map[date] = count;
-                }
-
-                var labels = [];
-                var data = [];
-                var keys = Object.keys(map);
-
-                for (var i = keys.length - 1; i > -1; i--) {
-                    var k = keys[i];
-                    labels.push(k);
-                    data.push(map[k]);
-                };
-                var dataset = {
-                    fillColor : "rgba(151,187,205,0.5)",
-                    strokeColor : "rgba(151,187,205,1)",
-                    pointColor : "rgba(151,187,205,1)",
-                    pointStrokeColor : "#fff",
-                    data : data
-                };
-                console.log(labels, data);
-                var c = getChart('#containers-started-chart');
-                c.Line({
-                    labels: labels,
-                    datasets: [dataset]
-                }, 
-                {
-                    scaleStepWidth: 1, 
-                    pointDotRadius:1,
-                    scaleOverride: true,
-                    scaleSteps: labels.length
-                });
             });
         }
     }, function(e) {

partials/dashboard.html

@@ -10,7 +10,7 @@
                 <a class="btn btn-large btn-success" href="http://docker.io">Learn more.</a>
           </div>
     </div>
-
+    
     <div class="span12">
         <div class="span6">
             <h3>Running Containers</h3>
@@ -22,10 +22,27 @@
             </ul>
         </div>
         <div class="span6 pull-right">
+            <h3 style="float:right">Status</h3>
             <canvas id="containers-chart" style="float:right;">
                 Get a better broswer... Your holding everyone back.
             </canvas>
             <div id="chart-legend" style="float:right;"></div>
         </div>
     </div>
+
+
+    <div class="span12" id="stats">
+        <hr />
+        <h4>Containers created</h4>
+       <canvas id="containers-started-chart" width="700" style="float:left">
+            Get a better broswer... Your holding everyone back.
+       </canvas>
+        <h1 style="float:right">{{ totalContainers }}</h1>
+        <hr />
+        <h4>Images created</h4>
+       <canvas id="images-created-chart" width="700" style="float:left">
+            Get a better broswer... Your holding everyone back.
+       </canvas>
+        <h1 style="float:right">{{ totalImages }}</h1>
+    </div>
 </div>