feat(image-details): image layer enhancements

app/components/image/image.html

@@ -175,29 +175,45 @@
       <rd-widget-body classes="no-padding">
         <table id="image-layers" class="table">
           <thead>
-            <tr>
-              <td>Size</td>
-              <td>Layer</td>
-            </tr>
+            <th>
+              <a ng-click="order('Size')">
+                Size
+                <span ng-show="sortType == 'Size' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                <span ng-show="sortType == 'Size' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+              </a>
+            </th>
+            <th>
+              <a ng-click="order('CreatedBy')">
+                Layer
+                <span ng-show="sortType == 'CreatedBy' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                <span ng-show="sortType == 'CreatedBy' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+              </a>
+            </th>
           </thead>
           <tbody>
-            <tr ng-repeat="layer in history">
-              <td style="white-space:nowrap;">{{layer.Size|humansize}}</td>
+            <tr ng-repeat="layer in history | orderBy:sortType:sortReverse">
+              <td style="white-space:nowrap;">
+                {{ layer.Size | humansize }}
+              </td>
               <td class="expand">
-                <div ng-if="layer.CreatedBy.length > 100">
+                <div ng-if="layer.CreatedBy.length > 130">
                   <span id="layer-command-{{$index}}-full" style="display: none">
-                    {{layer.CreatedBy|createdby}}
+                    {{ layer.CreatedBy | imagelayercommand }}
                   </span>
                   <span id="layer-command-{{$index}}-short">
-                    {{layer.CreatedBy|createdby|limitTo:100}}{{layer.CreatedBy.length > 100 ? '...' : ''}}
+                    {{ layer.CreatedBy | imagelayercommand | truncate:130 }}
+                    <span ng-if="layer.CreatedBy.length > 130" style="margin-left: 5px;">
+                      <a id="layer-command-expander{{$index}}" class="btn" ng-click='toggleLayerCommand($index)'>
+                        <i class="fa fa-plus-circle" aria-hidden="true"></i>
+                      </a>
+                    </span>
                   </span>
                 </div>
-                <div ng-if="layer.CreatedBy.length <= 100">
+                <div ng-if="layer.CreatedBy.length <= 130">
                   <span id="layer-command-{{$index}}-full">
-                    {{layer.CreatedBy|createdby}}
+                    {{ layer.CreatedBy | imagelayercommand }}
                   </span>
                 </div>
-                <div ng-if="layer.CreatedBy.length > 100"><a id="layer-command-expander{{$index}}" class="btn" ng-click='toggleLayerCommand($index)'><span class="glyphicon glyphicon-plus-sign"></span></a></div>
               </td>
             </tr>
           </tbody>

app/components/image/imageController.js

@@ -6,6 +6,14 @@ function ($scope, $stateParams, $state, $timeout, ImageService, RegistryService,
 		Registry: ''
 	};
 
+	$scope.sortType = 'Size';
+  $scope.sortReverse = true;
+
+	$scope.order = function(sortType) {
+    $scope.sortReverse = ($scope.sortType === sortType) ? !$scope.sortReverse : false;
+    $scope.sortType = sortType;
+  };
+
 	$scope.toggleLayerCommand = function(layerId) {
 		$('#layer-command-expander'+layerId+' span').toggleClass('glyphicon-plus-sign glyphicon-minus-sign');
 		$('#layer-command-'+layerId+'-short').toggle();

app/filters/filters.js

@@ -272,9 +272,9 @@ angular.module('portainer.filters', [])
     return '';
   };
 })
-.filter('createdby', function () {
+.filter('imagelayercommand', function () {
   'use strict';
   return function (createdBy) {
-	  return createdBy.replace('/bin/sh -c #(nop) ','').replace('/bin/sh -c ', 'RUN ');
+	  return createdBy.replace('/bin/sh -c #(nop) ', '').replace('/bin/sh -c ', 'RUN ');
   };
 });

assets/css/app.css

@@ -281,6 +281,14 @@ a[ng-click]{
   margin: 0 auto;
 }
 
+ul.sidebar {
+  bottom: 40px;
+}
+
+ul.sidebar .sidebar-title {
+  height: auto;
+}
+
 ul.sidebar .sidebar-list a.active {
   color: #fff;
   text-indent: 22px;