feat(containers): add a button to display the full name of containers (#1164)

app/components/containers/containers.html

@@ -61,6 +61,9 @@
                   <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>
+				<a data-toggle="tooltip" title="More" ng-click="truncateMore();" ng-show="showMore">
+					<i class="fa fa-plus-square" aria-hidden="true"></i>
+				</a>
               </th>
               <th>
                 <a ui-sref="containers" ng-click="order('Image')">
@@ -106,8 +109,8 @@
                 <span ng-if="['starting','healthy','unhealthy'].indexOf(container.Status) !== -1" class="label label-{{ container.Status|containerstatusbadge }} interactive" uib-tooltip="This container has a health check">{{ container.Status }}</span>
                 <span ng-if="['starting','healthy','unhealthy'].indexOf(container.Status) === -1" class="label label-{{ container.Status|containerstatusbadge }}">{{ container.Status }}</span>
               </td>
-              <td ng-if="applicationState.endpoint.mode.provider === 'DOCKER_SWARM'"><a ui-sref="container({id: container.Id})">{{ container|swarmcontainername|truncate: 40}}</a></td>
-              <td ng-if="applicationState.endpoint.mode.provider !== 'DOCKER_SWARM'"><a ui-sref="container({id: container.Id})">{{ container|containername|truncate: 40}}</a></td>
+              <td ng-if="applicationState.endpoint.mode.provider === 'DOCKER_SWARM'"><a ui-sref="container({id: container.Id})">{{ container|swarmcontainername|truncate: truncate_size}}</a></td>
+              <td ng-if="applicationState.endpoint.mode.provider !== 'DOCKER_SWARM'"><a ui-sref="container({id: container.Id})">{{ container|containername|truncate: truncate_size}}</a></td>
               <td><a ui-sref="image({id: container.Image})">{{ container.Image | hideshasum }}</a></td>
               <td ng-if="state.displayIP">{{ container.IP ? container.IP : '-' }}</td>
               <td ng-if="applicationState.endpoint.mode.provider === 'DOCKER_SWARM'">{{ container.hostIP }}</td>

app/components/containers/containersController.js

@@ -8,6 +8,9 @@ angular.module('containers', [])
   $scope.sortType = 'State';
   $scope.sortReverse = false;
   $scope.state.selectedItemCount = 0;
+  $scope.truncate_size = 40;
+  $scope.showMore = true;
+  
   $scope.order = function (sortType) {
     $scope.sortReverse = ($scope.sortType === sortType) ? !$scope.sortReverse : false;
     $scope.sortType = sortType;
@@ -161,6 +164,12 @@ angular.module('containers', [])
     batch($scope.containers, Container.remove, 'Removed');
   };
   
+  
+  $scope.truncateMore = function(size) {
+    $scope.truncate_size = 80;
+    $scope.showMore = false;
+  };
+
   $scope.confirmRemoveAction = function () {
     var isOneContainerRunning = false;
     angular.forEach($scope.containers, function (c) {