Updating all rows instead of just ones with auto-assigned port

app/assets/javascripts/init.js

@@ -103,7 +103,7 @@
 
     $('.application-services').appServicesStatus();
 
-    $('.dynamic-host').dynamicHostPort();
+    $('table.port-bindings tbody tr').portMappings();
 
     $('[data-accordian-expand]').accordian();
 

app/assets/javascripts/jquery.dynamic_host_port.js → app/assets/javascripts/jquery.port_mappings.js

@@ -1,11 +1,10 @@
 (function($) {
-  $.PMX.DynamicHostPort = function(el, options) {
+  $.PMX.PortMappings = function(el, options) {
     var base = this;
 
     base.$el = $(el);
 
     base.defaultOptions = {
-      refreshInterval: 5000,
       $pathLink: base.$el.find('a.view-action'),
       $hostPort: base.$el.find('span.host-port'),
       containerPort: base.$el.find('span.container-port').text(),
@@ -23,19 +22,40 @@
     };
 
     base.handleResponse = function (_, response) {
-      if (response.sub_state == 'running' && response.load_state == 'loaded') {
-        base.updatePortMappings(response);
+      var hasAutoAssignedPorts = base.$el.hasClass('auto-assigned-host');
+      var serviceIsRunning = response.sub_state === 'running' && response.load_state === 'loaded';
+
+      if (serviceIsRunning) {
+        base.hideLoadingStyles();
+        if (hasAutoAssignedPorts) {
+          base.updatePortMappings(response);
+        }
       }
+
       else {
+        base.showLoadingStyles();
+        if (hasAutoAssignedPorts) {
+          base.options.$pathLink.text('port is being assigned...');
+          base.options.$pathLink.attr('href', '');
+          base.options.$hostPort.text('.....');
+        }
+      }
+    };
+
+    base.showLoadingStyles = function () {
+      if (!base.$el.closest('table').hasClass('service-loading')) {
         base.$el.closest('table').addClass('service-loading');
-        base.options.$pathLink.text('port is being assigned...');
-        base.options.$pathLink.attr('href', '');
-        base.options.$hostPort.text('.....');
+      }
+    };
+
+    base.hideLoadingStyles = function () {
+      if (base.$el.closest('table').hasClass('service-loading')) {
+        base.$el.closest('table').removeClass('service-loading');
       }
     };
 
     base.updatePortMappings = function(response) {
-      base.$el.closest('table').removeClass('service-loading');
+      base.hideLoadingStyles();
       var portsList = base.getPortsList(response.docker_status.info.NetworkSettings.Ports);
       $.each(portsList, function (index, value) {
         if (value['portNumber'] == base.options.containerPort) {
@@ -60,9 +80,9 @@
     };
   };
 
-  $.fn.dynamicHostPort = function(options) {
+  $.fn.portMappings = function(options) {
     return this.each(function() {
-      (new $.PMX.DynamicHostPort(this, options)).init();
+      (new $.PMX.PortMappings(this, options)).init();
     });
   };
 

app/assets/stylesheets/panamax/service_details.scss

@@ -300,8 +300,9 @@
         color: #a1a1a1;
         text-decoration: none;
         pointer-events: none;
+        position: relative;
       }
-      tr.dynamic-host {
+      tr.auto-assigned-host {
         color: #a1a1a1;
         td {
           font-weight: normal;

app/views/services/_port_bindings.html.haml → app/views/services/_port_mappings.html.haml

@@ -16,7 +16,7 @@
     %tbody
       = f.fields_for :ports do |port|
         - checkbox_id = "select_port_binding_#{port.options[:child_index]}"
-        %tr{class: port.object.host_port.blank? ?  'dynamic-host' : '', data: { source: app_service_path(@app.id, @service.id, format: :json) } }
+        %tr{class: port.object.host_port.blank? ?  'auto-assigned-host' : ''}
           %td{title: "host: #{port.object.host_port},
                       container: #{port.object.container_port},
                       protocol: #{port.object.proto}"}

app/views/services/show.html.haml

@@ -55,7 +55,7 @@
                   %p All ports exposed via EXPOSE in the Dockerfile will be noted as exposed by the base image.
 
           .port-detail-forms
-            = render 'port_bindings', f: f
+            = render 'port_mappings', f: f
             = render 'exposed_ports', f: f
         .volumes
           = render 'volumes', f: f

spec/javascripts/fixtures/ports-table.html.haml

@@ -1,4 +1,4 @@
-%span.service-status{ data: { source: '/foo/bar' } }
+%span.service-status
 
 %table.port-bindings
   %thead
@@ -8,7 +8,19 @@
       mapped endpoint
     %th
   %tbody
-    %tr{data: {host: 'localhost'}, class: 'dynamic-host'}
+    %tr.present-host
+      %td
+        %span.host-port 1234
+        %span.container-port 3333
+        %span.proto
+        = link_to 'localhost:1234',
+                  'localhost:1234',
+                  class: 'view-action',
+                  data: {host: 'localhost'}
+      %td
+        .actions
+
+    %tr.auto-assigned-host
       %td
         %span.host-port
         %span.container-port