Added pause/unpause to containers,

Auto-update /container and /containers views after performing an action,
Display spinner when container actions are being performed,
Unified style

js/controllers.js

@@ -155,34 +155,83 @@ function SettingsController($scope, System, Docker, Settings, Messages) {
 function ContainerController($scope, $routeParams, $location, Container, Messages, ViewSpinner) {
     $scope.changes = [];
 
+    var update = function() {
+        Container.get({id: $routeParams.id}, function(d) {
+            $scope.container = d;
+            ViewSpinner.stop();
+        }, function(e) {
+            if (e.status === 404) {
+                $('.detail').hide();
+                Messages.error("Not found", "Container not found.");
+            } else {
+                Messages.error("Failure", e.data);
+            }
+            ViewSpinner.stop();
+        });
+    };
+
     $scope.start = function(){
+        ViewSpinner.spin();
         Container.start({id: $routeParams.id}, function(d) {
+            update();
             Messages.send("Container started", $routeParams.id);
         }, function(e) {
+            update();
             Messages.error("Failure", "Container failed to start." + e.data);
         });
     };
 
     $scope.stop = function() {
+        ViewSpinner.spin();
         Container.stop({id: $routeParams.id}, function(d) {
+            update();
             Messages.send("Container stopped", $routeParams.id);
         }, function(e) {
+            update();
             Messages.error("Failure", "Container failed to stop." + e.data);
         });
     };
 
     $scope.kill = function() {
+        ViewSpinner.spin();
         Container.kill({id: $routeParams.id}, function(d) {
+            update();
             Messages.send("Container killed", $routeParams.id);
         }, function(e) {
+            update();
             Messages.error("Failure", "Container failed to die." + e.data);
         });
     };
 
+    $scope.pause = function() {
+        ViewSpinner.spin();
+        Container.pause({id: $routeParams.id}, function(d) {
+            update();
+            Messages.send("Container paused", $routeParams.id);
+        }, function(e) {
+            update();
+            Messages.error("Failure", "Container failed to pause." + e.data);
+        });
+    };
+
+    $scope.unpause = function() {
+        ViewSpinner.spin();
+        Container.unpause({id: $routeParams.id}, function(d) {
+            update();
+            Messages.send("Container unpaused", $routeParams.id);
+        }, function(e) {
+            update();
+            Messages.error("Failure", "Container failed to unpause." + e.data);
+        });
+    };
+
     $scope.remove = function() {
+        ViewSpinner.spin();
         Container.remove({id: $routeParams.id}, function(d) {
+            update();
             Messages.send("Container removed", $routeParams.id);
         }, function(e){
+            update();
             Messages.error("Failure", "Container failed to remove." + e.data);
         });
     };
@@ -192,22 +241,14 @@ function ContainerController($scope, $routeParams, $location, Container, Message
     };
 
     $scope.getChanges = function() {
+        ViewSpinner.spin();
         Container.changes({id: $routeParams.id}, function(d) {
             $scope.changes = d;
+            ViewSpinner.stop();
         });
     };
 
-    Container.get({id: $routeParams.id}, function(d) {
+    update();
-        $scope.container = d;
-    }, function(e) {
-        if (e.status === 404) {
-            $('.detail').hide();
-            Messages.error("Not found", "Container not found.");
-        } else {
-            Messages.error("Failure", e.data);
-        }
-    });
-
     $scope.getChanges();
 }
 
@@ -233,6 +274,7 @@ function ContainersController($scope, Container, Settings, Messages, ViewSpinner
             counter = counter -1;
             if (counter === 0) {
                 ViewSpinner.stop();
+                update({all: Settings.displayAll ? 1 : 0});
             }
         };
         angular.forEach(items, function(c) {
@@ -241,7 +283,6 @@ function ContainersController($scope, Container, Settings, Messages, ViewSpinner
                 action({id: c.Id}, function(d) {
                     Messages.send("Container " + msg, c.Id);
                     var index = $scope.containers.indexOf(c);
-                    $scope.containers.splice(index, 1);
                     complete();
                 }, function(e) {
                     Messages.error("Failure", e.data);
@@ -249,6 +290,9 @@ function ContainersController($scope, Container, Settings, Messages, ViewSpinner
                 });
             }
         });
+        if (counter === 0) {
+            ViewSpinner.stop();
+        }
     };
 
     $scope.toggleSelectAll = function() {
@@ -274,6 +318,14 @@ function ContainersController($scope, Container, Settings, Messages, ViewSpinner
         batch($scope.containers, Container.kill, "Killed");
     };
 
+    $scope.pauseAction = function() {
+        batch($scope.containers, Container.pause, "Paused");
+    };
+
+    $scope.unpauseAction = function() {
+        batch($scope.containers, Container.unpause, "Unpaused");
+    };
+
     $scope.removeAction = function() {
         batch($scope.containers, Container.remove, "Removed");
     };

js/filters.js

@@ -34,6 +34,9 @@ angular.module('dockerui.filters', [])
             if (state.Ghost && state.Running) {
                 return 'Ghost';
             }
+            if (state.Running && state.Paused) {
+                return 'Running (Paused)';
+            }
             if (state.Running) {
                 return 'Running';
             }

js/services.js

@@ -13,6 +13,8 @@ angular.module('dockerui.services', ['ngResource'])
             stop: {method: 'POST', params: {id: '@id', t: 5, action: 'stop'}},
             restart: {method: 'POST', params: {id: '@id', t: 5, action: 'restart' }},
             kill: {method: 'POST', params: {id: '@id', action: 'kill'}},
+            pause: {method: 'POST', params: {id: '@id', action: 'pause'}},
+            unpause: {method: 'POST', params: {id: '@id', action: 'unpause'}},
             changes: {method: 'GET', params: {action:'changes'}, isArray: true},
             create: {method: 'POST', params: {action:'create'}},
             remove: {method: 'DELETE', params: {id: '@id', v:0}}
@@ -91,7 +93,6 @@ angular.module('dockerui.services', ['ngResource'])
                             return false;
                         }  
                     }
-
                 }); 
             },
             error: function(title, text) {

partials/container.html

@@ -3,9 +3,21 @@
     <h4>Container: {{ container.Name }}</h4>
 
     <div class="btn-group detail">
-      <button class="btn btn-success" ng-click="start()">Start</button>
+      <button class="btn btn-success"
-      <button class="btn btn-warning" ng-click="stop()">Stop</button>
+            ng-click="start()"
-      <button class="btn btn-danger" ng-click="kill()">Kill</button>
+            ng-show="!container.State.Running">Start</button>
+      <button class="btn btn-warning"
+            ng-click="stop()"
+            ng-show="container.State.Running && !container.State.Paused">Stop</button>
+      <button class="btn btn-danger"
+            ng-click="kill()"
+            ng-show="container.State.Running && !container.State.Paused">Kill</button>
+      <button class="btn btn-info"
+            ng-click="pause()"
+            ng-show="container.State.Running && !container.State.Paused">Pause</button>
+      <button class="btn btn-success"
+            ng-click="unpause()"
+            ng-show="container.State.Running && container.State.Paused">Unpause</button>
     </div>
 
     <table class="table table-striped">

partials/containers.html

@@ -9,6 +9,8 @@
                 <li><a tabindex="-1" href="" ng-click="startAction()">Start</a></li>
                 <li><a tabindex="-1" href="" ng-click="stopAction()">Stop</a></li>
                 <li><a tabindex="-1" href="" ng-click="killAction()">Kill</a></li>
+                <li><a tabindex="-1" href="" ng-click="pauseAction()">Pause</a></li>
+                <li><a tabindex="-1" href="" ng-click="unpauseAction()">Unpause</a></li>
                 <li><a tabindex="-1" href="" ng-click="removeAction()">Remove</a></li>
             </ul>
         </li>