feat(services) - add exposed ports (#690)

app/components/services/services.html

@@ -58,6 +58,13 @@
                   <span ng-show="sortType == 'Mode' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                 </a>
               </th>
+              <th>
+                <a ui-sref="services" ng-click="order('Ports')">
+                  Published Ports
+                  <span ng-show="sortType == 'Ports' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'Ports' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+              </th>
               <th>
                 <a ui-sref="services" ng-click="order('UpdatedAt')">
                   Updated at
@@ -92,6 +99,12 @@
                     <a class="interactive" ng-click="scaleService(service)"><i class="fa fa-check-square-o"></i></a>
                   </span>
                 </td>
+                <td>
+                  <a ng-if="service.Ports && service.Ports.length > 0 && swarmManagerIP" ng-repeat="p in service.Ports" class="image-tag" ng-href="http://{{swarmManagerIP}}:{{p.PublishedPort}}" target="_blank">
+                    <i class="fa fa-external-link" aria-hidden="true"></i> {{ p.PublishedPort }}:{{ p.TargetPort }}
+                  </a>
+                  <span ng-if="!service.Ports || service.Ports.length === 0 || !swarmManagerIP" >-</span>
+                </td>
                 <td>
                   {{ service.UpdatedAt|getisodate }}
                 </td>

app/components/services/servicesController.js

@@ -1,6 +1,6 @@
 angular.module('services', [])
-.controller('ServicesController', ['$q', '$scope', '$stateParams', '$state', 'Service', 'ServiceHelper', 'Messages', 'Pagination', 'Task', 'Node', 'Authentication', 'UserService', 'ModalService', 'ResourceControlService',
+.controller('ServicesController', ['$q', '$scope', '$stateParams', '$state', 'Service', 'ServiceHelper', 'Messages', 'Pagination', 'Task', 'Node', 'NodeHelper', 'Authentication', 'UserService', 'ModalService', 'ResourceControlService',
-function ($q, $scope, $stateParams, $state, Service, ServiceHelper, Messages, Pagination, Task, Node, Authentication, UserService, ModalService, ResourceControlService) {
+function ($q, $scope, $stateParams, $state, Service, ServiceHelper, Messages, Pagination, Task, Node, NodeHelper, Authentication, UserService, ModalService, ResourceControlService) {
   $scope.state = {};
   $scope.state.selectedItemCount = 0;
   $scope.state.pagination_count = Pagination.getPaginationCount('services');
@@ -137,6 +137,7 @@ function ($q, $scope, $stateParams, $state, Service, ServiceHelper, Messages, Pa
       nodes: Node.query({}).$promise,
     })
     .then(function success(data) {
+      $scope.swarmManagerIP = NodeHelper.getManagerIP(data.nodes);
       $scope.services = data.services.map(function (service) {
         var serviceTasks = data.tasks.filter(function (task) {
           return task.ServiceID === service.ID;

app/helpers/nodeHelper.js

@@ -9,6 +9,16 @@ angular.module('portainer.helpers')
         Labels: node.Spec.Labels,
         Availability: node.Spec.Availability
       };
+    },
+    getManagerIP: function(nodes) {
+      var managerIp;
+      for (var n in nodes) {
+        if (undefined === nodes[n].ManagerStatus || nodes[n].ManagerStatus.Reachability !== "reachable") {
+          continue;
+        }
+        managerIp = nodes[n].ManagerStatus.Addr.split(":")[0];
+      }
+      return managerIp;
     }
   };
 }]);