From bf6b398a278dd5aaca782a0bc641d024993442a4 Mon Sep 17 00:00:00 2001
From: Sylvain MOUQUET <sylvain.mouquet@gmail.com>
Date: Tue, 5 Sep 2017 10:10:16 +0200
Subject: [PATCH] feat(containers): add a button to display the full name of
 containers (#1164)

---
 app/components/containers/containers.html         | 7 +++++--
 app/components/containers/containersController.js | 9 +++++++++
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/app/components/containers/containers.html b/app/components/containers/containers.html
index 3cd1a3aee..9ad0faf61 100644
--- a/app/components/containers/containers.html
+++ b/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>
diff --git a/app/components/containers/containersController.js b/app/components/containers/containersController.js
index 82dd10b64..afd310b9e 100644
--- a/app/components/containers/containersController.js
+++ b/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;
@@ -160,6 +163,12 @@ angular.module('containers', [])
   $scope.removeAction = function () {
     batch($scope.containers, Container.remove, 'Removed');
   };
+  
+  
+  $scope.truncateMore = function(size) {
+    $scope.truncate_size = 80;
+    $scope.showMore = false;
+  };
 
   $scope.confirmRemoveAction = function () {
     var isOneContainerRunning = false;