From 4e38e4ba33e3d9f2883a03dddd1835d219d71525 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Kozio=C5=82?= <github@koziolek.biz>
Date: Wed, 14 Mar 2018 01:27:06 +0100
Subject: [PATCH] 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                 |  3 ++-
 app/docker/services/imageService.js             |  4 +++-
 app/docker/views/images/edit/image.html         | 10 ++++++++++
 app/docker/views/images/edit/imageController.js |  4 ++--
 4 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/app/docker/models/imageLayer.js b/app/docker/models/imageLayer.js
index 59889d290..15d79b785 100644
--- a/app/docker/models/imageLayer.js
+++ b/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;
diff --git a/app/docker/services/imageService.js b/app/docker/services/imageService.js
index 973014ca7..112536cca 100644
--- a/app/docker/services/imageService.js
+++ b/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);
       }
diff --git a/app/docker/views/images/edit/image.html b/app/docker/views/images/edit/image.html
index 43f1f867c..f07275216 100644
--- a/app/docker/views/images/edit/image.html
+++ b/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>
diff --git a/app/docker/views/images/edit/imageController.js b/app/docker/views/images/edit/imageController.js
index b2470a4de..2e59fe912 100644
--- a/app/docker/views/images/edit/imageController.js
+++ b/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;