Show listeners on balancer edit (rancher/rancher#1625)

app/components/edit-loadbalancerservice/template.hbs

@@ -33,6 +33,17 @@
 
     {{partial "form-divider"}}
 
+    <div class="row">
+      <div class="col-xs-6 col-md-2 form-label">
+        <label>Listening Ports</label>
+      </div>
+      <div class="col-sm-12 col-md-8">
+        {{partial "loadbalancer/edit-listeners"}}
+      </div>
+    </div>
+
+    {{partial "form-divider"}}
+
     <div class="row">
       <div class="col-xs-6 col-md-2 form-label">
         <label>Targets</label>

app/environment/graph/view.js

@@ -69,7 +69,7 @@ export default Ember.View.extend(ThrottledResize,{
     unremovedServices.forEach((service) => {
       var externals = (service.get('consumedServicesWithNames')||[]).filter((linked) => {
         return linked.get('service.environmentId') !== this.get('context.model.id');
-      }).map((linked) => { return linked.get('service') });
+      }).map((linked) => { return linked.get('service'); });
       out.pushObjects(externals);
     });
 

app/mixins/edit-loadbalancerconfig.js

@@ -33,7 +33,7 @@ export default Ember.Mixin.create(EditHealthCheck,{
   initListeners: function() {
     var store = this.get('store');
     var out = [];
-    var existingService = this.get('balancer.loadBalancerListeners');
+    var existingService = this.get('model.service.loadBalancerListeners');
     var existingRegular = this.get('listeners');
     if ( existingService )
     {

app/service/controller.js

@@ -22,10 +22,12 @@ var ServiceController = Ember.Controller.extend(CattleTransitioningController, {
       var type = this.get('model.type').toLowerCase();
       if ( type === 'loadbalancerservice' )
       {
+        this.get('model').importLink('loadBalancerListeners').then(() => {
           this.get('controllers.application').setProperties({
             editLoadBalancerService: true,
             originalModel: this.get('model'),
           });
+        });
       }
       else if ( type === 'dnsservice' )
       {

app/templates/loadbalancer/edit-listeners.hbs

@@ -2,7 +2,7 @@
   {{#if listenersArray.length}}
     <thead>
       <tr>
-        <th>Source Port*</th>
+        <th>Source Port{{#unless editing}}*{{/unless}}</th>
         <th width="30"></th>
         <th>{{#if isAdvanced}}Default {{/if}}Target Port</th>
         <th width="30"></th>
@@ -17,7 +17,7 @@
   <tbody>
     {{#each listenersArray as |listener|}}
       <tr>
-        {{#if listener.id}}
+        {{#if editing}}
           <td>{{listener.sourcePort}}</td>
           <td>&nbsp;</td>
           <td>
@@ -29,9 +29,7 @@
           <td>{{listener.sourceProtocol}}</td>
           <td>&nbsp;</td>
           <td>{{listener.algorithm}}</td>
-          <td class="text-right">
+          <td class="text-right">&nbsp;</td>
-            <button {{action "removeListener" listener}} class="btn-circle-x" type="button" tabindex="-1"></button>
-          </td>
         {{else}}
           <td>
             {{input type="text" classNames="form-control lb-listener-source-port input-sm" min="1" max="65535" step="1" value=listener.sourcePort placeholder="On Host, e.g. 80"}}
@@ -41,7 +39,6 @@
             {{input type="text" classNames="form-control lb-listener-target-port input-sm" min="1" max="65535" step="1" value=listener.targetPort placeholder="In Container, e.g. 8080"}}
           </td>
           <td>&nbsp;</td>
-        {{/if}}
           <td>
             <div class="btn-group">
               <button type="button" class="btn btn-default dropdown-toggle btn-sm" data-toggle="dropdown" aria-expanded="false">{{if listener.isPublic "Public" "Internal"}} <span class="caret"></span></button>
@@ -74,6 +71,7 @@
           <td class="text-right">
             <button {{action "removeListener" listener}} class="btn-circle-x" type="button" tabindex="-1"></button>
           </td>
+        {{/if}}
       </tr>
     {{/each}}
   </tbody>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui",
-  "version": "0.38.0",
+  "version": "0.39.0",
   "private": true,
   "directories": {
     "doc": "doc",