Pull latest into dist from master.

kevana · Mar 19, 2016 · 4700882 · 4700882
2 parents ddd9956 + f353dc2
commit 4700882
Show file tree

Hide file tree

Showing 12 changed files with 206 additions and 52 deletions.
diff --git a/app/app.js b/app/app.js
@@ -23,7 +23,7 @@ angular.module('dockerui', [
     'network',
     'networks',
     'volumes'])
-    .config(['$routeProvider', function ($routeProvider) {
+    .config(['$routeProvider', '$httpProvider', function ($routeProvider, $httpProvider) {
         'use strict';
         $routeProvider.when('/', {
             templateUrl: 'app/components/dashboard/dashboard.html',
@@ -67,6 +67,22 @@ angular.module('dockerui', [
             controller: 'EventsController'
         });
         $routeProvider.otherwise({redirectTo: '/'});
+
+        // The Docker API likes to return plaintext errors, this catches them and disp
+        $httpProvider.interceptors.push(function() {
+            return {
+                'response': function(response) {
+                    if (typeof(response.data) === 'string' && response.data.startsWith('Conflict.')) {
+                        $.gritter.add({
+                            title: 'Error',
+                            text: response.data,
+                            time: 10000
+                        });
+                    }
+                    return response;
+                }
+            };
+        });
     }])
     // This is your docker url that the api will use to make requests
     // You need to set this to the api endpoint without the port i.e. http://192.168.1.9

diff --git a/app/components/container/containerController.js b/app/components/container/containerController.js
@@ -27,10 +27,12 @@
                     // fill up ports
                     $scope.newCfg.Ports = {};
                     angular.forEach(d.Config.ExposedPorts, function(i, port) {
-                        if (d.HostConfig.PortBindings && port in d.HostConfig.PortBindings)
+                        if (d.HostConfig.PortBindings && port in d.HostConfig.PortBindings) {
                             $scope.newCfg.Ports[port] = d.HostConfig.PortBindings[port];
-                        else
+                        }
+                        else {
                             $scope.newCfg.Ports[port] = [];
+                        }
                     });
 
                     // fill up bindings
@@ -42,9 +44,9 @@
                     angular.forEach(d.HostConfig.Binds, function(binding, i) {
                         var mountpoint = binding.split(':')[0];
                         var vol = binding.split(':')[1] || '';
-                        var ro = binding.split(':').length > 2 && binding.split(':')[2] == 'ro';
+                        var ro = binding.split(':').length > 2 && binding.split(':')[2] === 'ro';
                         var defaultBind = false;
-                        if (vol == '') {
+                        if (vol === '') {
                             vol = mountpoint;
                             mountpoint = '';
                         }
@@ -117,23 +119,24 @@
 
                 var portBindings = angular.copy($scope.newCfg.Ports);
                 angular.forEach(portBindings, function(item, key) {
-                    if (item.length == 0)
+                    if (item.length === 0) {
                         delete portBindings[key];
+                    }
                 });
 
 
                 var binds = [];
                 angular.forEach($scope.newCfg.Binds, function(b) {
-                    if (b.ContPath != '') {
+                    if (b.ContPath !== '') {
                         var bindLine = '';
-                        if (b.HostPath != '') {
+                        if (b.HostPath !== '') {
                             bindLine = b.HostPath + ':';
                         }
                         bindLine += b.ContPath;
                         if (b.ReadOnly) {
                             bindLine += ':ro';
                         }
-                        if (b.HostPath != '' || !b.DefaultBind) {
+                        if (b.HostPath !== '' || !b.DefaultBind) {
                             binds.push(bindLine);
                         }
                     }
@@ -149,7 +152,7 @@
                             imageData.Config.HostConfig = angular.copy($scope.container.HostConfig);
                             imageData.Config.HostConfig.PortBindings = portBindings;
                             imageData.Config.HostConfig.Binds = binds;
-                            if (imageData.Config.HostConfig.NetworkMode == 'host') {
+                            if (imageData.Config.HostConfig.NetworkMode === 'host') {
                                 imageData.Config.Hostname = '';
                             }
 
@@ -196,7 +199,7 @@
                         }, function (e) {
                             update();
                             Messages.error("Failure", "Image failed to get." + e.data);
-                        })
+                        });
 
                     } else {
                         update();

diff --git a/app/components/containers/containers.html b/app/components/containers/containers.html
@@ -25,16 +25,46 @@ <h2>Containers:</h2>
 <table class="table table-striped">
     <thead>
         <tr>
-            <th><input type="checkbox" ng-model="toggle" ng-change="toggleSelectAll()" /> Action</th>
-            <th>Name</th>
-            <th>Image</th>
-            <th>Command</th>
-            <th>Created</th>
-            <th>Status</th>
+            <th><label><input type="checkbox" ng-model="toggle" ng-change="toggleSelectAll()" /> Select</label></th>
+            <th>
+                <a href="#/containers/" ng-click="order('Names')">
+                    Name
+                    <span ng-show="sortType == 'Names' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                    <span ng-show="sortType == 'Names' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+            </th>
+            <th>
+                <a href="#/containers/" ng-click="order('Image')">
+                    Image
+                    <span ng-show="sortType == 'Image' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                    <span ng-show="sortType == 'Image' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+            </th>
+            <th>
+                <a href="#/containers/" ng-click="order('Command')">
+                    Command
+                    <span ng-show="sortType == 'Command' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                    <span ng-show="sortType == 'Command' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+            </th>
+            <th>
+                <a href="#/containers/" ng-click="order('Created')">
+                    Created
+                    <span ng-show="sortType == 'Created' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                    <span ng-show="sortType == 'Created' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+            </th>
+            <th>
+                <a href="#/containers/" ng-click="order('Status')">
+                    Status
+                    <span ng-show="sortType == 'Status' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                    <span ng-show="sortType == 'Status' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+            </th>
         </tr>
     </thead>
     <tbody>
-        <tr ng-repeat="container in containers | filter:filter | orderBy:predicate">
+        <tr ng-repeat="container in containers | filter:filter | orderBy:sortType:sortReverse">
             <td><input type="checkbox" ng-model="container.Checked" /></td>
             <td><a href="#/containers/{{ container.Id }}/">{{ container|containername}}</a></td>
             <td><a href="#/images/{{ container.Image }}/">{{ container.Image }}</a></td>

diff --git a/app/components/containers/containersController.js b/app/components/containers/containersController.js
@@ -1,10 +1,16 @@
 angular.module('containers', [])
     .controller('ContainersController', ['$scope', 'Container', 'Settings', 'Messages', 'ViewSpinner',
         function ($scope, Container, Settings, Messages, ViewSpinner) {
-            $scope.predicate = '-Created';
+            $scope.sortType = 'Created';
+            $scope.sortReverse = true;
             $scope.toggle = false;
             $scope.displayAll = Settings.displayAll;
 
+            $scope.order = function(sortType) {
+                $scope.sortReverse = ($scope.sortType === sortType) ? !$scope.sortReverse : false;
+                $scope.sortType = sortType;
+            };
+
             var update = function (data) {
                 ViewSpinner.spin();
                 Container.query(data, function (d) {

diff --git a/app/components/images/images.html b/app/components/images/images.html
@@ -21,15 +21,39 @@ <h2>Images:</h2>
 <table class="table table-striped">
     <thead>
         <tr>
-            <th><input type="checkbox" ng-model="toggle" ng-change="toggleSelectAll()" /> Action</th>
-            <th>Id</th>
-            <th>Repository</th>
-            <th>VirtualSize</th>
-            <th>Created</th>
+            <th><label><input type="checkbox" ng-model="toggle" ng-change="toggleSelectAll()" /> Select</label></th>
+            <th>
+                <a href="#/images/" ng-click="order('Id')">
+                    Id
+                    <span ng-show="sortType == 'Id' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                    <span ng-show="sortType == 'Id' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+            </th>
+            <th>
+                <a href="#/images/" ng-click="order('RepoTags')">
+                    Repository
+                    <span ng-show="sortType == 'RepoTags' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                    <span ng-show="sortType == 'RepoTags' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+            </th>
+            <th>
+                <a href="#/images/" ng-click="order('VirtualSize')">
+                    VirtualSize
+                    <span ng-show="sortType == 'VirtualSize' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                    <span ng-show="sortType == 'VirtualSize' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+            </th>
+            <th>
+                <a href="#/images/" ng-click="order('Created')">
+                    Created
+                    <span ng-show="sortType == 'Created' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                    <span ng-show="sortType == 'Created' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+            </th>
         </tr>
     </thead>
     <tbody>
-        <tr ng-repeat="image in images | filter:filter | orderBy:predicate">
+        <tr ng-repeat="image in images | filter:filter | orderBy:sortType:sortReverse">
             <td><input type="checkbox" ng-model="image.Checked" /></td>
             <td><a href="#/images/{{ image.Id }}/?tag={{ image|repotag }}">{{ image.Id|truncate:20}}</a></td>
             <td>{{ image|repotag }}</td>

diff --git a/app/components/images/imagesController.js b/app/components/images/imagesController.js
@@ -1,8 +1,14 @@
 angular.module('images', [])
     .controller('ImagesController', ['$scope', 'Image', 'ViewSpinner', 'Messages',
         function ($scope, Image, ViewSpinner, Messages) {
+            $scope.sortType = 'Created';
+            $scope.sortReverse = true;
             $scope.toggle = false;
-            $scope.predicate = '-Created';
+
+            $scope.order = function(sortType) {
+                $scope.sortReverse = ($scope.sortType === sortType) ? !$scope.sortReverse : false;
+                $scope.sortType = sortType;
+            };
 
             $scope.showBuilder = function () {
                 $('#build-modal').modal('show');

diff --git a/app/components/networks/networks.html b/app/components/networks/networks.html
@@ -9,7 +9,6 @@ <h2>Networks:</h2>
                 <li><a tabindex="-1" href="" ng-click="removeAction()">Remove</a></li>
             </ul>
         </li>
-        <!--<li><a data-toggle="modal" data-target="#pull-modal" href="">Pull</a></li>-->
     </ul>
 
     <div class="pull-right form-inline">
@@ -20,18 +19,60 @@ <h2>Networks:</h2>
 <table class="table table-striped">
     <thead>
     <tr>
-        <th><input type="checkbox" ng-model="toggle" ng-change="toggleSelectAll()"/> Select</th>
-        <th>Name</th>
-        <th>Id</th>
-        <th>Scope</th>
-        <th>Driver</th>
-        <th>IPAM Driver</th>
-        <th>IPAM Subnet</th>
-        <th>IPAM Gateway</th>
+        <th><label><input type="checkbox" ng-model="toggle" ng-change="toggleSelectAll()"/> Select</label></th>
+        <th>
+            <a href="#/networks/" ng-click="order('Name')">
+                Name
+                <span ng-show="sortType == 'Name' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                <span ng-show="sortType == 'Name' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+            </a>
+        </th>
+        <th>
+            <a href="#/networks/" ng-click="order('Id')">
+                Id
+                <span ng-show="sortType == 'Id' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                <span ng-show="sortType == 'Id' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+            </a>
+        </th>
+        <th>
+            <a href="#/networks/" ng-click="order('Scope')">
+                Scope
+                <span ng-show="sortType == 'Scope' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                <span ng-show="sortType == 'Scope' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+            </a>
+        </th>
+        <th>
+            <a href="#/networks/" ng-click="order('Driver')">
+                Driver
+                <span ng-show="sortType == 'Driver' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                <span ng-show="sortType == 'Driver' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+            </a>
+        </th>
+        <th>
+            <a href="#/networks/" ng-click="order('IPAM.Driver')">
+                IPAM Driver
+                <span ng-show="sortType == 'IPAM.Driver' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                <span ng-show="sortType == 'IPAM.Driver' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+            </a>
+        </th>
+        <th>
+            <a href="#/networks/" ng-click="order('IPAM.Config[0].Subnet')">
+                IPAM Subnet
+                <span ng-show="sortType == 'IPAM.Config[0].Subnet' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                <span ng-show="sortType == 'IPAM.Config[0].Subnet' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+            </a>
+        </th>
+        <th>
+            <a href="#/networks/" ng-click="order('IPAM.Config[0].Gateway')">
+                IPAM Gateway
+                <span ng-show="sortType == 'IPAM.Config[0].Gateway' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                <span ng-show="sortType == 'IPAM.Config[0].Gateway' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+            </a>
+        </th>
     </tr>
     </thead>
     <tbody>
-    <tr ng-repeat="network in networks | filter:filter | orderBy:predicate">
+    <tr ng-repeat="network in networks | filter:filter | orderBy:sortType:sortReverse">
         <td><input type="checkbox" ng-model="network.Checked"/></td>
         <td><a href="#/networks/{{ network.Id }}/">{{ network.Name|truncate:20}}</a></td>
         <td>{{ network.Id }}</td>

diff --git a/app/components/networks/networksController.js b/app/components/networks/networksController.js
@@ -1,12 +1,17 @@
 angular.module('networks', []).config(['$routeProvider', function ($routeProvider) {
-    $routeProvider.when('/networks', {
+    $routeProvider.when('/networks/', {
         templateUrl: 'app/components/networks/networks.html',
         controller: 'NetworksController'
     });
 }]).controller('NetworksController', ['$scope', 'Network', 'ViewSpinner', 'Messages', '$route', 'errorMsgFilter',
     function ($scope, Network, ViewSpinner, Messages, $route, errorMsgFilter) {
+        $scope.sortType = 'Name';
+        $scope.sortReverse = true;
         $scope.toggle = false;
-        $scope.predicate = '-Created';
+        $scope.order = function(sortType) {
+            $scope.sortReverse = ($scope.sortType === sortType) ? !$scope.sortReverse : false;
+            $scope.sortType = sortType;
+        };
         $scope.createNetworkConfig = {
             "Name": '',
             "Driver": '',

diff --git a/app/components/volumes/volumes.html b/app/components/volumes/volumes.html
@@ -19,14 +19,32 @@ <h2>Volumes:</h2>
 <table class="table table-striped">
     <thead>
     <tr>
-        <th><input type="checkbox" ng-model="toggle" ng-change="toggleSelectAll()"/> Select</th>
-        <th>Name</th>
-        <th>Driver</th>
-        <th>Mountpoint</th>
+        <th><label><input type="checkbox" ng-model="toggle" ng-change="toggleSelectAll()"/> Select</label></th>
+        <th>
+            <a href="#/volumes/" ng-click="order('Name')">
+                Name
+                <span ng-show="sortType == 'Name' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                <span ng-show="sortType == 'Name' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+            </a>
+        </th>
+        <th>
+            <a href="#/volumes/" ng-click="order('Driver')">
+                Driver
+                <span ng-show="sortType == 'Driver' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                <span ng-show="sortType == 'Driver' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+            </a>
+        </th>
+        <th>
+            <a href="#/volumes/" ng-click="order('Mountpoint')">
+                Mountpoint
+                <span ng-show="sortType == 'Mountpoint' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                <span ng-show="sortType == 'Mountpoint' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+            </a>
+        </th>
     </tr>
     </thead>
     <tbody>
-    <tr ng-repeat="volume in volumes | filter:filter | orderBy:predicate">
+    <tr ng-repeat="volume in volumes | filter:filter | orderBy:sortType:sortReverse">
         <td><input type="checkbox" ng-model="volume.Checked"/></td>
         <td>{{ volume.Name|truncate:20 }}</td>
         <td>{{ volume.Driver }}</td>

diff --git a/app/components/volumes/volumesController.js b/app/components/volumes/volumesController.js
@@ -1,12 +1,17 @@
 angular.module('volumes', []).config(['$routeProvider', function ($routeProvider) {
-    $routeProvider.when('/volumes', {
+    $routeProvider.when('/volumes/', {
         templateUrl: 'app/components/volumes/volumes.html',
         controller: 'VolumesController'
     });
 }]).controller('VolumesController', ['$scope', 'Volume', 'ViewSpinner', 'Messages', '$route', 'errorMsgFilter',
     function ($scope, Volume, ViewSpinner, Messages, $route, errorMsgFilter) {
+        $scope.sortType = 'Name';
+        $scope.sortReverse = true;
         $scope.toggle = false;
-        $scope.predicate = '-Created';
+        $scope.order = function(sortType) {
+            $scope.sortReverse = ($scope.sortType === sortType) ? !$scope.sortReverse : false;
+            $scope.sortType = sortType;
+        };
         $scope.createVolumeConfig = {
             "Name": "",
             "Driver": ""