feat(services): ability to publish ports using host mode (#838)

app/components/createService/createServiceController.js

@@ -29,7 +29,7 @@ function ($scope, $state, Service, ServiceHelper, Volume, Network, ImageHelper,
   };
 
   $scope.addPortBinding = function() {
-    $scope.formValues.Ports.push({ PublishedPort: '', TargetPort: '', Protocol: 'tcp' });
+    $scope.formValues.Ports.push({ PublishedPort: '', TargetPort: '', Protocol: 'tcp', PublishMode: 'ingress' });
   };
 
   $scope.removePortBinding = function(index) {
@@ -96,7 +96,8 @@ function ($scope, $state, Service, ServiceHelper, Volume, Network, ImageHelper,
     var ports = [];
     input.Ports.forEach(function (binding) {
       var port = {
-        Protocol: binding.Protocol
+        Protocol: binding.Protocol,
+        PublishMode: binding.PublishMode
       };
       if (binding.TargetPort) {
         port.TargetPort = +binding.TargetPort;

app/components/createService/createservice.html

@@ -74,7 +74,7 @@
             <div class="col-sm-12 form-inline" style="margin-top: 10px;">
               <div ng-repeat="portBinding in formValues.Ports" style="margin-top: 2px;">
                 <!-- host-port -->
-                <div class="input-group col-sm-4 input-group-sm">
+                <div class="input-group col-sm-3 input-group-sm">
                   <span class="input-group-addon">host</span>
                   <input type="text" class="form-control" ng-model="portBinding.PublishedPort" placeholder="e.g. 80 or 1.2.3.4:80 (optional)">
                 </div>
@@ -83,17 +83,21 @@
                   <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
                 </span>
                 <!-- container-port -->
-                <div class="input-group col-sm-4 input-group-sm">
+                <div class="input-group col-sm-3 input-group-sm">
                   <span class="input-group-addon">container</span>
                   <input type="text" class="form-control" ng-model="portBinding.TargetPort" placeholder="e.g. 80">
                 </div>
                 <!-- !container-port -->
                 <!-- protocol-actions -->
-                <div class="input-group col-sm-3 input-group-sm">
+                <div class="input-group col-sm-5 input-group-sm">
                   <div class="btn-group btn-group-sm">
                     <label class="btn btn-primary" ng-model="portBinding.Protocol" uib-btn-radio="'tcp'">TCP</label>
                     <label class="btn btn-primary" ng-model="portBinding.Protocol" uib-btn-radio="'udp'">UDP</label>
                   </div>
+                  <div class="btn-group btn-group-sm">
+                    <label class="btn btn-primary" ng-model="portBinding.PublishMode" uib-btn-radio="'ingress'">Ingress</label>
+                    <label class="btn btn-primary" ng-model="portBinding.PublishMode" uib-btn-radio="'host'">Host</label>
+                  </div>
                   <button class="btn btn-sm btn-danger" type="button" ng-click="removePortBinding($index)">
                     <i class="fa fa-trash" aria-hidden="true"></i>
                   </button>

app/components/service/includes/ports.html

@@ -17,6 +17,7 @@
             <th>Host port</th>
             <th>Container port</th>
             <th>Protocol</th>
+            <th>Publish mode</th>
             <th>Actions</th>
           </tr>
         </thead>
@@ -42,6 +43,14 @@
                 </select>
               </div>
             </td>
+            <td>
+              <div class="input-group input-group-sm">
+                <select class="selectpicker form-control" ng-model="portBinding.PublishMode" ng-change="updatePublishedPort(service, mapping)" ng-disabled="isUpdating">
+                  <option value="ingress">ingress</option>
+                  <option value="host">host</option>
+                </select>
+              </div>
+            </td>
             <td>
               <span class="input-group-btn">
                 <button class="btn btn-sm btn-danger" type="button" ng-click="removePortPublishedBinding(service, $index)" ng-disabled="isUpdating">

app/components/service/serviceController.js

@@ -118,7 +118,7 @@ function ($scope, $stateParams, $state, $location, $anchorScroll, Service, Servi
     if (!service.Ports) {
       service.Ports = [];
     }
-    service.Ports.push({ PublishedPort: '', TargetPort: '', Protocol: 'tcp' });
+    service.Ports.push({ PublishedPort: '', TargetPort: '', Protocol: 'tcp', PublishMode: 'ingress' });
   };
   $scope.updatePublishedPort = function updatePublishedPort(service, portMapping) {
     updateServiceArray(service, 'Ports', service.Ports);