Update build and msg paritals

css/app.css

@@ -110,6 +110,7 @@
 }
 
 .messages {
-    overflow: scroll;
     max-height: 50px;
+    overflow-y: scroll;
+    overflow-x: hidden;
 }

js/app.js

@@ -14,4 +14,4 @@ angular.module('dockerui', ['dockerui.services', 'dockerui.filters'])
     .constant('DOCKER_ENDPOINT', 'http://192.168.1.9')
     .constant('DOCKER_PORT', ':4243')
     .constant('UI_VERSION', 'v0.2')
-    .constant('DOCKER_API_VERSION', 'v1.1');
+    .constant('DOCKER_API_VERSION', 'v1.2');

js/controllers.js

@@ -17,7 +17,7 @@ function MessageController($scope, Messages) {
        $scope.messages.push(msg);
        setTimeout(function() {
            $('#message-display').hide('slow');
-       }, 10000);
+       }, 30000);
     });
 }
 
@@ -38,70 +38,62 @@ function SideBarController($scope, Container, Settings) {
     });
 }
 
-function SettingsController($scope, Auth, System, Docker, Settings, Messages) {
+function SettingsController($scope, System, Docker, Settings, Messages) {
-    $scope.auth = {};
     $scope.info = {};
     $scope.docker = {};
     $scope.endpoint = Settings.endpoint;
     $scope.apiVersion = Settings.version;
 
-    $scope.updateAuthInfo = function() {
-        if ($scope.auth.password != $scope.auth.cpassword) {
-            alert('Your passwords do not match.');
-            return;
-        }
-        Auth.update({
-            username: $scope.auth.username,
-            email: $scope.auth.email,
-            password: $scope.auth.password
-            }, function(d) {
-                Messages.send({class: 'text-success', data: 'Auth information updated.'});
-            }, function(e) {
-                Messages.send({class: 'text-error', data: e.data});
-            });
-    };
-
-    Auth.get({}, function(d) { $scope.auth = d; });
     Docker.get({}, function(d) { $scope.docker = d; });
     System.get({}, function(d) { $scope.info = d; });
 }
 
 // Controls the page that displays a single container and actions on that container.
-function ContainerController($scope, $routeParams, $location, Container, Messages) {
+function ContainerController($scope, $routeParams, $location, Container, Messages, ViewSpinner) {
     $scope.changes = [];
 
     $scope.start = function(){
+        ViewSpinner.spin();
         Container.start({id: $routeParams.id}, function(d) {
             Messages.send({class: 'text-success', data: 'Container started.'});
+            ViewSpinner.stop();
         }, function(e) {
             failedRequestHandler(e, Messages);
+            ViewSpinner.stop();
         });
     };
 
     $scope.stop = function() {
+        ViewSpinner.spin();
         Container.stop({id: $routeParams.id}, function(d) {
             Messages.send({class: 'text-success', data: 'Container stopped.'});
+            ViewSpinner.stop();
         }, function(e) {
             failedRequestHandler(e, Messages);
+            ViewSpinner.stop();
         });
     };
 
     $scope.kill = function() {
+        ViewSpinner.spin();
         Container.kill({id: $routeParams.id}, function(d) {
             Messages.send({class: 'text-success', data: 'Container killed.'});
+            ViewSpinner.stop();
         }, function(e) {
             failedRequestHandler(e, Messages);
+            ViewSpinner.stop();
         });
     };
 
     $scope.remove = function() {
-        if (confirm("Are you sure you want to remove the container?")) {
+        ViewSpinner.spin();
         Container.remove({id: $routeParams.id}, function(d) {
             Messages.send({class: 'text-success', data: 'Container removed.'});
+            ViewSpinner.stop();
         }, function(e){
             failedRequestHandler(e, Messages);
+            ViewSpinner.stop();
         });
-        }
     };
 
     $scope.hasContent = function(data) {
@@ -141,12 +133,25 @@ function ContainersController($scope, Container, Settings, Messages, ViewSpinner
     };
 
     var batch = function(items, action) {
+        ViewSpinner.spin();
+        var counter = 0;
+        var complete = function() {
+            counter = counter -1;
+            if (counter === 0) {
+                ViewSpinner.stop();
+            }
+        };
          angular.forEach(items, function(c) {
            if (c.Checked) {
+               counter = counter + 1;
                action({id: c.Id}, function(d) {
-                    Messages.send({class: 'text-success', data: d});
+                    Messages.send({class: 'text-success', data: 'Container ' + c.Id + ' Removed.'});
+                    var index = $scope.containers.indexOf(c);
+                    $scope.containers.splice(index, 1);
+                    complete();
                }, function(e) {
                   failedRequestHandler(e, Messages);
+                  complete();
                });
            }
         });
@@ -190,6 +195,7 @@ function ContainersController($scope, Container, Settings, Messages, ViewSpinner
 // Controller for the list of images
 function ImagesController($scope, Image, ViewSpinner, Messages) {
     $scope.toggle = false;
+    $scope.predicate = '-Created';
 
     $scope.showBuilder = function() {
         $('#build-modal').modal('show');
@@ -245,13 +251,11 @@ function ImageController($scope, $routeParams, $location, Image, Messages) {
     $scope.tag = {repo: '', force: false};
 
     $scope.remove = function() {
-        if (confirm("Are you sure you want to delete this image?")) {
         Image.remove({id: $routeParams.id}, function(d) {
             Messages.send({class: 'text-success', data: 'Image removed.'});
         }, function(e) {
             failedRequestHandler(e, Messages);
         });
-        }
     };
 
     $scope.getHistory = function() {
@@ -331,12 +335,19 @@ function BuilderController($scope, Dockerfile, Messages) {
     $scope.template = '/partials/builder.html';
 
     ace.config.set('basePath', '/lib/ace-builds/src-noconflict/');
+    var spinner = new Spinner();
 
     $scope.build = function() {
+        spinner.spin(document.getElementById('build-modal'));
         Dockerfile.build(editor.getValue(), function(d) {
-           Messages.send({class:'text-info', data: d});
+           console.log(d.currentTarget.response);
+           $scope.messages = d.currentTarget.response;
+           $scope.$apply();
+           spinner.stop();
         }, function(e) {
-           Messages.send({class:'text-error', data: e});
+           $scope.messages = e;
+           $scope.$apply();
+           spinner.stop();
         });
     };
 }

partials/builder.html

@@ -5,6 +5,7 @@
   </div>
   <div class="modal-body">
     <div id="editor"></div>
+    <p>{{ messages }}</p>
   </div>
   <div class="modal-footer">
     <a href="" class="btn btn-primary" ng-click="build()">Build</a>

partials/image.html

@@ -23,6 +23,11 @@
                 <td>Container:</td>
                 <td><a href="/#/containers/{{ image.container }}/">{{ image.container }}</a></td>
             </tr>
+            <tr>
+                <td>Size:</td>
+                <td>{{ image.Size|humansize }}</td>
+            </tr>
+
             <tr>
                 <td>Hostname:</td>
                 <td>{{ image.container_config.Hostname }}</td>
@@ -43,6 +48,10 @@
                 <td>Volumes from:</td>
                 <td>{{ image.container_config.VolumesFrom }}</td>
             </tr>
+            <tr>
+                <td>Comment:</td>
+                <td>{{ image.comment }}</td>
+            </tr>
 
         </tbody>
     </table>

partials/settings.html

@@ -46,20 +46,4 @@
             </tr>
         </tbody>
     </table>
-
-    <form>
-        <fieldset>
-            <legend>Auth Information</legend>
-            <label>Username:</label>
-            <input type="text" ng-model="auth.username" required>
-            <label>Email:</label>
-            <input type="text" ng-model="auth.email" required>
-            <label>Password:</label>
-            <input type="password" ng-model="auth.password" required>
-            <label>Confirm Password:</label>
-            <input type="password" ng-model="auth.cpassword" required>
-            <br />
-            <input type="button" ng-click="updateAuthInfo()" value="Update"/>
-        </fieldset>
-    </form>
 </div>