feat(image-details): display image layer order and sort by it by default (#1715)

* feat(image-details): display image layer depth and sort by it by default (#1706)

* refactor(image-details): rename 'Depth' to 'Order' in image layers table

* refactor(image-details): sort image layers from the bottom to the top one

app/docker/models/imageLayer.js

@@ -1,4 +1,5 @@
-function ImageLayerViewModel(data) {
+function ImageLayerViewModel(order, data) {
+  this.Order = order;
   this.Id = data.Id;
   this.Created = data.Created;
   this.CreatedBy = data.CreatedBy;

app/docker/services/imageService.js

@@ -57,8 +57,10 @@ angular.module('portainer.docker')
         deferred.reject({ msg: data.message });
       } else {
         var layers = [];
+        var order = data.length;
         angular.forEach(data, function(imageLayer) {
-          layers.push(new ImageLayerViewModel(imageLayer));
+          layers.push(new ImageLayerViewModel(order, imageLayer));
+          order--;
         });
         deferred.resolve(layers);
       }

app/docker/views/images/edit/image.html

@@ -182,6 +182,13 @@
       <rd-widget-body classes="no-padding">
         <table id="image-layers" class="table">
           <thead>
+            <th style="white-space:nowrap;">
+              <a ng-click="order('Order')">
+                Order
+                <span ng-show="sortType == 'Order' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                <span ng-show="sortType == 'Order' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+              </a>
+            </th>
             <th>
               <a ng-click="order('Size')">
                 Size
@@ -199,6 +206,9 @@
           </thead>
           <tbody>
             <tr ng-repeat="layer in history | orderBy:sortType:sortReverse">
+              <td style="white-space:nowrap;">
+                {{ layer.Order }}
+              </td>
               <td style="white-space:nowrap;">
                 {{ layer.Size | humansize }}
               </td>

app/docker/views/images/edit/imageController.js

@@ -6,8 +6,8 @@ function ($q, $scope, $transition$, $state, $timeout, ImageService, RegistryServ
 		Registry: ''
 	};
 
-	$scope.sortType = 'Size';
-  $scope.sortReverse = true;
+	$scope.sortType = 'Order';
+	$scope.sortReverse = false;
 
 	$scope.order = function(sortType) {
     $scope.sortReverse = ($scope.sortType === sortType) ? !$scope.sortReverse : false;