Merge branch 'messages' into batch-actions

css/app.css

@@ -94,7 +94,7 @@
   }
 
   .footer {
-    max-height:6px;    
+    max-height:6px;
   }
 
   #response {
@@ -108,3 +108,8 @@
     border: 1px solid #DDD;
     margin-top: 5px;
 }
+
+.messages {
+    overflow: scroll;
+    max-height: 50px;
+}

index.html

@@ -29,6 +29,7 @@
 
     <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>
 

js/controllers.js

@@ -6,6 +6,21 @@ function MastheadController($scope) {
 function DashboardController($scope, Container) {
 }
 
+function MessageController($scope, Messages) {
+    $scope.template = 'partials/messages.html';
+    $scope.messages = [];
+    $scope.$watch('messages.length', function(o, n) {
+       $('#message-display').show(); 
+    });
+
+    $scope.$on(Messages.event, function(e, msg) {
+       $scope.messages.push(msg);
+       setTimeout(function() {
+           $('#message-display').hide('slow'); 
+       }, 10000);
+    });
+}
+
 function StatusBarController($scope, Settings) {
     $scope.template = 'partials/statusbar.html';
 
@@ -20,95 +35,75 @@ function SideBarController($scope, Container, Settings) {
 
     Container.query({all: 0}, function(d) {
         $scope.containers = d;
-    }); 
+    });
 }
 
-function SettingsController($scope, Auth, System, Docker, Settings) {
+function SettingsController($scope, Auth, System, Docker, Settings, Messages) {
     $scope.auth = {};
     $scope.info = {};
     $scope.docker = {};
     $scope.endpoint = Settings.endpoint;
     $scope.apiVersion = Settings.version;
 
-    $('#response').hide();
-    $scope.alertClass = 'block';
-
     $scope.updateAuthInfo = function() {
         if ($scope.auth.password != $scope.auth.cpassword) {
-            setSuccessfulResponse($scope, 'Your passwords do not match.', '#response');
+            alert('Your passwords do not match.');
             return;
         }
-        Auth.update(
+        Auth.update({
-            {username: $scope.auth.username, email: $scope.auth.email, password: $scope.auth.password}, function(d) {
+            username: $scope.auth.username,
-                console.log(d);
+            email: $scope.auth.email,
-                setSuccessfulResponse($scope, 'Auth information updated.', '#response');
+            password: $scope.auth.password
+            }, function(d) {
+                Messages.send({class: 'text-success', data: 'Auth information updated.'});
             }, function(e) {
-               console.log(e);
+                Messages.send({class: 'text-error', data: e.data});
-               setFailedResponse($scope, e.data, '#response');
             });
     };
 
-    Auth.get({}, function(d) {
+    Auth.get({}, function(d) { $scope.auth = d; });
-        $scope.auth = d;
+    Docker.get({}, function(d) { $scope.docker = d; });
-    });
+    System.get({}, function(d) { $scope.info = 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) {
+function ContainerController($scope, $routeParams, $location, Container, Messages) {
-    $('#response').hide();
+    $scope.changes = [];
-    $scope.alertClass = 'block';
 
     $scope.start = function(){
         Container.start({id: $routeParams.id}, function(d) {
-            console.log(d); setSuccessfulResponse($scope, 'Container started.', '#response');
+            Messages.send({class: 'text-success', data: 'Container started.'});
         }, function(e) {
-            console.log(e);
+            failedRequestHandler(e, Messages);
-            setFailedResponse($scope, e.data, '#response');
+        });
-        }); 
     };
 
     $scope.stop = function() {
         Container.stop({id: $routeParams.id}, function(d) {
-            console.log(d);
+            Messages.send({class: 'text-success', data: 'Container stopped.'});
-            setSuccessfulResponse($scope, 'Container stopped.', '#response');
         }, function(e) {
-            console.log(e);
+            failedRequestHandler(e, Messages);
-            setFailedResponse($scope, e.data, '#response');
         });
     };
 
     $scope.kill = function() {
         Container.kill({id: $routeParams.id}, function(d) {
-            console.log(d);
+            Messages.send({class: 'text-success', data: 'Container killed.'});
-            setSuccessfulResponse($scope, 'Container killed.', '#response');
         }, function(e) {
-            console.log(e);
+            failedRequestHandler(e, Messages);
-            setFailedResponse($scope, e.data, '#response');
         });
     };
 
     $scope.remove = function() {
         if (confirm("Are you sure you want to remove the container?")) {
             Container.remove({id: $routeParams.id}, function(d) {
-                console.log(d);
+                Messages.send({class: 'text-success', data: 'Container removed.'});
-                setSuccessfulResponse($scope, 'Container removed.', '#response');
             }, function(e){
-                console.log(e);
+                failedRequestHandler(e, Messages);
-                setFailedResponse($scope, e.data, '#response');
             });
         }
     };
 
-    $scope.changes = [];
-
     $scope.hasContent = function(data) {
         return data !== null && data !== undefined && data.length > 1;
     };
@@ -122,8 +117,7 @@ function ContainerController($scope, $routeParams, $location, Container) {
     Container.get({id: $routeParams.id}, function(d) {
         $scope.container = d;
    }, function(e) {
-        console.log(e);
+        failedRequestHandler(e, Messages);
-        setFailedResponse($scope, e.data, '#response');
         if (e.status === 404) {
             $('.detail').hide();
         }
@@ -133,7 +127,7 @@ function ContainerController($scope, $routeParams, $location, Container) {
 }
 
 // Controller for the list of containers
-function ContainersController($scope, Container, Settings, ViewSpinner) {
+function ContainersController($scope, Container, Settings, Messages, ViewSpinner) {
     $scope.displayAll = Settings.displayAll;
     $scope.predicate = '-Created';
     $scope.toggle = false;
@@ -150,7 +144,9 @@ function ContainersController($scope, Container, Settings, ViewSpinner) {
          angular.forEach(items, function(c) {
            if (c.Checked) {
                action({id: c.Id}, function(d) {
-                  console.log(d); 
+                    Messages.send({class: 'text-success', data: d});
+               }, function(e) {
+                  failedRequestHandler(e, Messages);
                });
            }
         });
@@ -164,13 +160,12 @@ function ContainersController($scope, Container, Settings, ViewSpinner) {
  
     $scope.toggleGetAll = function() {
         Settings.displayAll = $scope.displayAll;
-        var u = update;
         var data = {all: 0};
 
         if ($scope.displayAll) {
             data.all = 1;
         }
-        u(data);
+        update(data);
     };
 
     $scope.startAction = function() {
@@ -193,10 +188,7 @@ function ContainersController($scope, Container, Settings, ViewSpinner) {
 }
 
 // Controller for the list of images
-function ImagesController($scope, Image, ViewSpinner) {
+function ImagesController($scope, Image, ViewSpinner, Messages) {
-    $scope.predicate = '-Created';
-    $('#response').hide();
-    $scope.alertClass = 'block';
     $scope.toggle = false;
 
     $scope.showBuilder = function() {
@@ -204,10 +196,28 @@ function ImagesController($scope, Image, ViewSpinner) {
     };
 
     $scope.removeAction = function() {
+        ViewSpinner.spin();
+        var counter = 0;
+        var complete = function() {
+           counter = counter - 1;
+           if (counter === 0) {
+                ViewSpinner.stop();
+           }
+        };
         angular.forEach($scope.images, function(i) { 
             if (i.Checked) {
+                counter = counter + 1;
                 Image.remove({id: i.Id}, function(d) {
-                   console.log(d); 
+                   angular.forEach(d, function(resource) {
+                       Messages.send({class: 'text-success', data: 'Deleted: ' + resource.Deleted});
+                   });
+                   //Remove the image from the list
+                   var index = $scope.images.indexOf(i);
+                   $scope.images.splice(index, 1);
+                   complete();
+                }, function(e) {
+                   Messages.send({class: 'text-error', data: e.data});
+                   complete();
                 });
             }
         });
@@ -224,28 +234,22 @@ function ImagesController($scope, Image, ViewSpinner) {
         $scope.images = d.map(function(item) { return new ImageViewModel(item); });
         ViewSpinner.stop();
     }, function (e) {
-        console.log(e);
+        failedRequestHandler(e, Messages);
-        setFailedResponse($scope, e.data, '#response');
         ViewSpinner.stop();
     });
 }
 
 // Controller for a single image and actions on that image
-function ImageController($scope, $routeParams, $location, Image) {
+function ImageController($scope, $routeParams, $location, Image, Messages) {
     $scope.history = [];
     $scope.tag = {repo: '', force: false};
-
-    $('#response').hide();
-    $scope.alertClass = 'block';
  
     $scope.remove = function() {
         if (confirm("Are you sure you want to delete this image?")) {
             Image.remove({id: $routeParams.id}, function(d) {
-                console.log(d);
+                Messages.send({class: 'text-success', data: 'Image removed.'});
-                setSuccessfulResponse($scope, 'Image removed.', '#response');
             }, function(e) {
-                console.log(e);
+                failedRequestHandler(e, Messages);
-                setFailedResponse($scope, e.data, '#response');
             }); 
         }
     };
@@ -259,11 +263,9 @@ function ImageController($scope, $routeParams, $location, Image) {
     $scope.updateTag = function() {
         var tag = $scope.tag;
         Image.tag({id: $routeParams.id, repo: tag.repo, force: tag.force ? 1 : 0}, function(d) {
-            console.log(d);
+            Messages.send({class: 'text-success', data: 'Tag added.'});
-            setSuccessfulResponse($scope, 'Tag added.', '#response');
         }, function(e) {
-            console.log(e);
+            failedRequestHandler(e, Messages);
-            setFailedResponse($scope, e.data, '#response');
         });
     };
 
@@ -274,8 +276,7 @@ function ImageController($scope, $routeParams, $location, Image) {
     Image.get({id: $routeParams.id}, function(d) {
         $scope.image = d;
     }, function(e) {
-        console.log(e);
+        failedRequestHandler(e, Messages);
-        setFailedResponse($scope, e.data, '#response');
         if (e.status === 404) {
             $('.detail').hide();
         }
@@ -284,7 +285,7 @@ function ImageController($scope, $routeParams, $location, Image) {
     $scope.getHistory();
 }
 
-function StartContainerController($scope, $routeParams, $location, Container) {
+function StartContainerController($scope, $routeParams, $location, Container, Messages) {
     $scope.template = 'partials/startcontainer.html';
     $scope.config = {
         memory: 0,
@@ -296,7 +297,6 @@ function StartContainerController($scope, $routeParams, $location, Container) {
     $scope.commandPlaceholder = '["/bin/echo", "Hello world"]';
 
     $scope.create = function() {
-        $scope.response = '';
         var cmds = null;
         if ($scope.config.commands !== '') {
             cmds = angular.fromJson($scope.config.commands);
@@ -313,45 +313,34 @@ function StartContainerController($scope, $routeParams, $location, Container) {
                 Cmd: cmds, 
                 VolumesFrom: $scope.config.volumesFrom
             }, function(d) {
-                console.log(d);
                 if (d.Id) {
                     ctor.start({id: d.Id}, function(cd) {
-                        console.log(cd);
                         $('#create-modal').modal('hide');
                         loc.path('/containers/' + d.Id + '/');
                     }, function(e) {
-                        console.log(e); 
+                        failedRequestHandler(e, Messages);
-                        s.resonse = e.data;
                     });
                 }
             }, function(e) {
-                console.log(e);
+                failedRequestHandler(e, Messages);
-                $scope.response = e.data; 
         });
     };
 }
 
-function BuilderController($scope, Dockerfile) {
+function BuilderController($scope, Dockerfile, Messages) {
     $scope.template = '/partials/builder.html';
 
     ace.config.set('basePath', '/lib/ace-builds/src-noconflict/');
 
     $scope.build = function() {
-        Dockerfile.build(editor.getValue(), function(e) {
+        Dockerfile.build(editor.getValue(), function(d) {
-           console.log(e);
+           Messages.send({class:'text-info', data: d});
+        }, function(e) {
+           Messages.send({class:'text-error', data: e});
         });
     };
 }
 
-function setSuccessfulResponse($scope, msg, msgId) {
+function failedRequestHandler(e, Messages) {
-    $scope.alertClass = 'success';
+    Messages.send({class: 'text-error', data: e.data});
-    $scope.response = msg;
-    $(msgId).show();
-    setTimeout(function() { $(msgId).hide();}, 5000);
-}
-
-function setFailedResponse($scope, msg, msgId) {
-    $scope.alertClass = 'error';
-    $scope.response = msg;
-    $(msgId).show();
 }

js/services.js

@@ -76,6 +76,14 @@ angular.module('dockerui.services', ['ngResource'])
           stop: function() { spinner.stop(); }
        };
     })
+    .factory('Messages', function($rootScope) {
+        return {
+           event: 'messageSend',
+           send: function(msg) {
+              $rootScope.$broadcast('messageSend', msg); 
+           } 
+        };
+    })
     .factory('Dockerfile', function(Settings) {
         var url = Settings.rawUrl  + '/build'; 
         return {

partials/builder.html

@@ -4,9 +4,6 @@
     <h3>Build Image</h3>
   </div>
   <div class="modal-body">
-    <div>
-        {{ response }}
-    </div>
     <div id="editor"></div>
   </div>
   <div class="modal-footer">

partials/container.html

@@ -1,7 +1,3 @@
-<div id="response" class="alert alert-{{ alertClass }}">
-        {{ response }}        
-</div>
-
 <div class="detail">
     
     <h4>Container: {{ container.Id }}</h4>

partials/containers.html

@@ -21,7 +21,7 @@
 <table class="table table-striped">
     <thead>
         <tr>
-            <th>Action <input type="checkbox" ng-model="toggle" ng-click="toggleSelectAll()" /></th>
+            <th><input type="checkbox" ng-model="toggle" ng-click="toggleSelectAll()" /> Action</th>
             <th>Id</th>
             <th>Image</th>
             <th>Command</th>

partials/image.html

@@ -1,8 +1,3 @@
-<div id="response" class="alert alert-{{ alertClass }}">
-        {{ response }}
-</div>
-
-
 <div ng-include="template" ng-controller="StartContainerController"></div>
 
 <div class="detail">

partials/images.html

@@ -3,10 +3,6 @@
 
 <h2>Images:</h2>
 
-<div id="response" class="alert alert-{{ alertClass }}">
-    {{ response }}
-</div>
-
 <ul class="nav nav-pills">
     <li class="active"><a href="" ng-click="showBuilder()">Build Image</a></li>
     <li class="dropdown">
@@ -19,7 +15,7 @@
 <table class="table table-striped">
     <thead>
         <tr>
-            <th>Action <input type="checkbox" ng-model="toggle" ng-click="toggleSelectAll()" /></th>
+            <th><input type="checkbox" ng-model="toggle" ng-click="toggleSelectAll()" /> Action</th>
             <th>Id</th>
             <th>Tag</th>
             <th>Repository</th>

partials/messages.html

@@ -0,0 +1,3 @@
+<div id="message-display" class="center well messages" style="display:none;">
+    <p ng-repeat="message in messages"><span class="{{ message.class }}">{{ message.data  }}</span></p>
+</div>

partials/settings.html

@@ -1,8 +1,4 @@
 <div class="detail">
-    <div id="response" class="alert alert-{{ alertClass }}">
-        {{ response }}        
-    </div>
-
     <h3>Docker Information</h3>
     <div>
         <p class="lead">

partials/startcontainer.html

@@ -4,9 +4,6 @@
     <h3>Create Container</h3>
   </div>
   <div class="modal-body">
-    <div>
-        {{ response }}
-    </div>
     <form>
         <fieldset>
             <legend>Start container from Image</legend>