Merge branch 'image-stats' into dev

js/controllers.js

@@ -25,9 +25,8 @@ function DashboardController($scope, Container) {
            }
        }
 
-      var ctx = $("#containers-chart").get(0).getContext("2d");
+       var c = getChart('#containers-chart');
-      var c = new Chart(ctx);
+       var data = [
-      var data = [
         {
             value: running,
             color: '#5bb75b',
@@ -51,6 +50,11 @@ function DashboardController($scope, Container) {
    });
 }
 
+function getChart(id) {
+    var ctx = $(id).get(0).getContext("2d");
+    return new Chart(ctx);
+}
+
 function StatusBarController($scope, Settings) {
     $scope.template = 'partials/statusbar.html';
 
@@ -265,7 +269,7 @@ function ImagesController($scope, Image, ViewSpinner, Messages) {
 }
 
 // Controller for a single image and actions on that image
-function ImageController($scope, $routeParams, $location, Image, Messages) {
+function ImageController($scope, $q, $routeParams, $location, Image, Container, Messages) {
     $scope.history = [];
     $scope.tag = {repo: '', force: false};
 
@@ -300,6 +304,58 @@ function ImageController($scope, $routeParams, $location, Image, Messages) {
 
     Image.get({id: $routeParams.id}, function(d) {
         $scope.image = d;
+        $scope.tag = d.id;
+        var t = $routeParams.tag;
+        if (t && t !== ":") {
+            $scope.tag = t;
+            var promise = getContainersFromImage($q, Container, t);
+
+            promise.then(function(containers) {
+                var map = {}; 
+                
+                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) {
         if (e.status === 404) {
             $('.detail').hide();
@@ -379,3 +435,21 @@ function BuilderController($scope, Dockerfile, Messages) {
 function failedRequestHandler(e, Messages) {
     Messages.send({class: 'text-error', data: e.data});
 }
+
+// This gonna get messy but we don't have a good way to do this right now
+function getContainersFromImage($q, Container, tag) {
+    var defer = $q.defer();
+    
+    Container.query({all:1, notruc:1}, function(d) {
+        var containers = [];
+        for (var i = 0; i < d.length; i++) {
+            var c = d[i];
+            if (c.Image == tag) {
+                containers.push(new ContainerViewModel(c));
+            }
+        }
+        defer.resolve(containers);
+    });
+
+    return defer.promise;
+}

partials/dashboard.html

@@ -16,7 +16,7 @@
             <h3>Running Containers</h3>
             <ul>
                 <li ng-repeat="container in containers|orderBy:predicate">
-                    <a href="/#/containers/{{ container.Id }}/">{{ container.Command }}</a>
+                    <a href="/#/containers/{{ container.Id }}/">{{ container.Image }}</a>
                     <span class="label label-{{ container.Status|statusbadge }}">{{ container.Status }}</span>
                 </li>
             </ul>

partials/image.html

@@ -6,12 +6,18 @@
 
 <div class="detail">
  
-    <h4>Image: {{ image.id }}</h4>
+    <h4>Image: {{ tag }}</h4>
 
     <div class="btn-group detail">
       <button class="btn btn-success" ng-click="create()">Create</button>
     </div>
 
+    <div>
+       <h4>Containers created:</h4>
+       <canvas id="containers-started-chart" width="750">
+                Get a better broswer... Your holding everyone back.
+       </canvas>
+    </div>
 
     <table class="table table-striped">
          <tbody>
@@ -23,10 +29,6 @@
                 <td>Parent:</td>
                 <td><a href="/#/images/{{ image.parent }}/">{{ image.parent }}</a></td>
             </tr>
-            <tr>
-                <td>Container:</td>
-                <td><a href="/#/containers/{{ image.container }}/">{{ image.container }}</a></td>
-            </tr>
             <tr>
                 <td>Size:</td>
                 <td>{{ image.Size|humansize }}</td>
@@ -95,7 +97,6 @@
 
     <hr />
 
-
     <div class="btn-remove">
         <button class="btn btn-large btn-block btn-primary btn-danger" ng-click="remove()">Remove Image</button>
     </div>

partials/images.html

@@ -16,7 +16,6 @@
         <tr>
             <th><input type="checkbox" ng-model="toggle" ng-click="toggleSelectAll()" /> Action</th>
             <th>Id</th>
-            <th>Tag</th>
             <th>Repository</th>
             <th>Created</th>
         </tr>
@@ -24,9 +23,8 @@
     <tbody>
         <tr ng-repeat="image in images | orderBy:predicate">
             <td><input type="checkbox" ng-model="image.Checked" /></td>
-            <td><a href="/#/images/{{ image.Id }}/">{{ image.Id|truncate:20}}</a></td>
+            <td><a href="/#/images/{{ image.Id }}/?tag={{ image.Repository }}:{{ image.Tag }}">{{ image.Id|truncate:20}}</a></td>
-            <td>{{ image.Tag }}</td>
+            <td>{{ image.Repository }}:{{ image.Tag }}</td>
-            <td>{{ image.Repository }}</td>
             <td>{{ image.Created|getdate }}</td>
         </tr>
     </tbody>