Merge branch 'charts' into dev

css/app.css

@@ -109,3 +109,14 @@
     overflow-y: scroll;
     overflow-x: hidden;
 }
+
+.legend {
+    width: 7em;
+}
+
+.legend .title {
+    margin: 0.5em;
+    border-style: solid;
+    border-width: 0 0 0 1em;
+    padding: 0 0.3em;
+}

index.html

@@ -30,7 +30,6 @@
 
     <div class="container">
         <div ng-include="template" ng-controller="MastheadController"></div>
-        <div ng-include="template" ng-controller="MessageController"></div>
 
         <div id="view" ng-view></div>
 
@@ -59,6 +58,8 @@
     <script src="lib/angular/angular-resource.js"></script>
 
     <script src="lib/jquery.gritter.min.js"></script>
+    <script src="lib/Chart.min.js"></script>
+    <script src="lib/legend.js"></script>
 
     <script src="js/app.js"></script>
     <script src="js/services.js"></script>

js/controllers.js

@@ -4,22 +4,50 @@ function MastheadController($scope) {
 }
 
 function DashboardController($scope, Container) {
-}
+    $scope.predicate = '-Created';
+    $scope.containers = [];
    
-function MessageController($scope, Messages) {
-    $scope.template = 'partials/messages.html';
-    $scope.messages = [];
-    $scope.$watch('messages.length', function(o, n) {
-       $('#message-display').show();
-    });
+    Container.query({all: 1}, function(d) {
+       var running = 0
+       var ghost = 0;
+       var stopped = 0;
 
-    $scope.$on(Messages.event, function(e, msg) {
-       $scope.messages.push(msg);
-       var s = $scope;
-       setTimeout(function() {
-           $('#message-display').hide('slow');
-           s.messages = [];
-       }, 20000);
+       for (var i = 0; i < d.length; i++) {
+           var item = d[i];
+
+           if (item.Status === "Ghost") {
+               ghost += 1;
+           } else if (item.Status.indexOf('Exit') !== -1) {
+               stopped += 1;
+           } else {
+               running += 1;
+               $scope.containers.push(new ContainerViewModel(item));
+           }
+       }
+
+      var ctx = $("#containers-chart").get(0).getContext("2d");
+      var c = new Chart(ctx);
+      var data = [
+        {
+            value: running,
+            color: '#5bb75b',
+            title: 'Running'
+        }, // running
+        {
+            value: stopped,
+            color: '#C7604C',
+            title: 'Stopped'
+        }, // stopped
+        {
+            value: ghost,
+            color: '#E2EAE9',
+            title: 'Ghost'
+        } // ghost
+      ];
+        
+      c.Doughnut(data, {}); 
+      var lgd = $('#chart-legend').get(0);
+      legend(lgd, data);
    });
 }
 
@@ -64,7 +92,7 @@ function ContainerController($scope, $routeParams, $location, Container, Message
 
     $scope.stop = function() {
         Container.stop({id: $routeParams.id}, function(d) {
-            Messages.success("Container stopped", $routeParams.id);
+            Messages.send("Container stopped", $routeParams.id);
         }, function(e) {
             Messages.error("Failure", "Container failed to stop." + e.data);
         });
@@ -72,7 +100,7 @@ function ContainerController($scope, $routeParams, $location, Container, Message
 
     $scope.kill = function() {
         Container.kill({id: $routeParams.id}, function(d) {
-            Messages.success("Container killed", $routeParams.id);
+            Messages.send("Container killed", $routeParams.id);
         }, function(e) {
             Messages.error("Failure", "Container failed to die." + e.data);
         });
@@ -80,7 +108,7 @@ function ContainerController($scope, $routeParams, $location, Container, Message
 
     $scope.remove = function() {
         Container.remove({id: $routeParams.id}, function(d) {
-            Messages.success("Container removed", $routeParams.id);
+            Messages.send("Container removed", $routeParams.id);
         }, function(e){
             Messages.error("Failure", "Container failed to remove." + e.data);
         });
@@ -124,7 +152,7 @@ function ContainersController($scope, Container, Settings, Messages, ViewSpinner
         });
     };
 
-    var batch = function(items, action) {
+    var batch = function(items, action, msg) {
         ViewSpinner.spin();
         var counter = 0;
         var complete = function() {
@@ -137,7 +165,7 @@ function ContainersController($scope, Container, Settings, Messages, ViewSpinner
            if (c.Checked) {
                counter = counter + 1;
                action({id: c.Id}, function(d) {
-                    Messages.error("Container Removed", c.Id);
+                    Messages.send("Container " + msg, c.Id);
                     var index = $scope.containers.indexOf(c);
                     $scope.containers.splice(index, 1);
                     complete();
@@ -166,19 +194,19 @@ function ContainersController($scope, Container, Settings, Messages, ViewSpinner
     };
 
     $scope.startAction = function() {
-        batch($scope.containers, Container.start);
+        batch($scope.containers, Container.start, "Started");
     };
 
     $scope.stopAction = function() {
-        batch($scope.containers, Container.stop);
+        batch($scope.containers, Container.stop, "Stopped");
     };
 
     $scope.killAction = function() {
-        batch($scope.containers, Container.kill);
+        batch($scope.containers, Container.kill, "Killed");
     };
 
     $scope.removeAction = function() {
-        batch($scope.containers, Container.remove);
+        batch($scope.containers, Container.remove, "Removed");
     };
 
     update({all: $scope.displayAll ? 1 : 0});

partials/dashboard.html

@@ -1,5 +1,5 @@
  
-<div class="row-fluid">
+<div class="row-fluid center">
     <!--<div class="sidebar span4">
         <div ng-include="template" ng-controller="SideBarController"></div>
     </div>-->
@@ -10,4 +10,22 @@
                 <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>
+            <ul>
+                <li ng-repeat="container in containers|orderBy:predicate">
+                    <a href="/#/containers/{{ container.Id }}/">{{ container.Command }}</a>
+                    <span class="label label-{{ container.Status|statusbadge }}">{{ container.Status }}</span>
+                </li>
+            </ul>
+        </div>
+        <div class="span6">
+            <canvas id="containers-chart">
+                Get a better broswer... Your holding everyone back.
+            </canvas>
+            <div id="chart-legend"></div>
+        </div>
+    </div>
 </div>

partials/messages.html

@@ -1,4 +0,0 @@
-<div class="alert alert-error" id="error-message" style="display:none">
-    {{ error }}
-</div>
-