github
/
portainer
mirror of https://github.com/portainer/portainer
1
0
Fork 0
Code Issues Releases Wiki Activity

feat(image-details): image layer enhancements

pull/1007/head
Anthony Lapenna 2017-07-08 09:21:30 +02:00
parent b6b579d55d
commit 317303fc43
4 changed files with 46 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
app/components/image/image.html
View File

@ -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>

8
app/components/image/imageController.js
View File

@ -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();

4
app/filters/filters.js
View File

@ -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 ');
};
});

8
assets/css/app.css
View File

@ -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;