Fix broken ports component on container details

fixed misspelled name
swap out old container table component for form-ports
update form-ports to be editable

app/components/container/form-ports/template.hbs

@@ -1,16 +1,19 @@
 <div class="clearfix">
   <label class="acc-label">{{t 'formPorts.header'}}</label>
   {{#if (and portsArray.length (not showIp))}}
+    {{#if editing}}
       <div class="pull-right text-small">
         <a role="button" class="btn bg-transparent p-0" {{action "showIp"}}>
           {{t 'formPorts.showIpLink'}}
         </a>
       </div>
     {{/if}}
+  {{/if}}
 </div>
 
 {{#if portsArray.length}}
   <table class="table fixed no-lines small mb-10">
+    <thead>
       <tr class="hidden-sm">
         {{#if showIp}}
           <th>{{t 'formPorts.bindAddress.label'}}</th>
@@ -19,13 +22,14 @@
 
         <th>{{t 'formPorts.public.label'}}</th>
         <th width="10"></th>
-      <th>{{t 'formPorts.private.label'}}{{field-required}}</th>
+        <th>{{t 'formPorts.private.label'}}{{#if editing}}{{field-required}}{{/if}}</th>
         <th width="10"></th>
         <th width="80">{{t 'formPorts.protocol.label'}}</th>
         <th width="40">&nbsp;</th>
       </tr>
+    </thead>
+    <tbody>
       {{#each portsArray as |port|}}
-    <div class="pt-10"></div>
         <tr>
           {{#if showIp}}
             <td data-title="{{t 'formPorts.public.label'}}">
@@ -36,14 +40,27 @@
                   <span class="text-muted">{{t 'generic.any'}}</span>
                 {{/if}}
               {{else}}
+                {{#if editing}}
                   {{input class="form-control input-sm" type="text" value=port.bindAddress placeholder=(t 'formPorts.bindAddress.placeholder')}}
+                {{else}}
+                  {{#if port.bindAddress}}
+                    {{port.bindAddress}}
+                  {{else}}
+                    <span class="text-muted">{{t 'generic.na'}}</span>
+                  {{/if}}
+                {{/if}}
+
               {{/if}}
             </td>
             <td>&nbsp;</td>
           {{/if}}
 
           <td data-title="{{t 'formPorts.public.label'}}">
+            {{#if editing}}
               {{input-integer class="form-control input-sm public" min="1" max="65535" value=port.public placeholder=(t 'formPorts.public.placeholder')}}
+            {{else}}
+              {{port.public}}
+            {{/if}}
           </td>
           <td>&nbsp;</td>
 
@@ -51,7 +68,11 @@
             {{#if port.existing}}
               <div class="text-muted">{{port.private}}</div>
             {{else}}
+              {{#if editing}}
                 {{input-integer class="form-control input-sm" min="1" max="65535" value=port.private placeholder=(t 'formPorts.private.placeholder')}}
+              {{else}}
+                {{port.private}}
+              {{/if}}
             {{/if}}
           </td>
           <td>&nbsp;</td>
@@ -60,10 +81,15 @@
             {{#if port.existing}}
               <div class="text-muted">{{upper-case port.protocol}}</div>
             {{else}}
+              {{#if editing}}
                 {{new-select
                     class="form-control input-sm"
                     content=protocolOptions
-              value=port.protocol}}
+                    value=port.protocol
+                }}
+              {{else}}
+                {{port.protocol}}
+              {{/if}}
             {{/if}}
           </td>
 
@@ -71,13 +97,16 @@
             {{#if port.existing}}
               &nbsp;
             {{else}}
+              {{#if editing}}
                 <button class="btn bg-primary btn-sm" {{action "removePort" port}}>
                   <i class="icon icon-minus"/><span class="sr-only">{{t 'generic.remove'}}</span>
                 </button>
               {{/if}}
+            {{/if}}
           </td>
         </tr>
       {{/each}}
+    </tbody>
   </table>
 {{else}}
   {{#if editing}}
@@ -86,8 +115,10 @@
 {{/if}}
 
 <div>
+  {{#if editing}}
     <button class="btn bg-link icon-btn p-0" {{action "addPort"}}>
       <span class="darken"><i class="icon icon-plus text-small"/></span>
       <span>{{t 'formPorts.addAction'}}</span>
     </button>
+  {{/if}}
 </div>

app/components/container/new-edit/template.hbs

@@ -60,6 +60,7 @@
         initialPorts=launchConfig.ports
         errors=portErrors
         changedStr=(action (mut launchConfig.ports))
+        editing=true
     }}
   </div>
   <div class="col span-11-of-23 mt-0 mb-0 offset-1-of-23">

app/container/template.hbs

@@ -148,11 +148,11 @@
            statusClass=(if model.container.publicEndpoints.length 'bg-success' 'text-muted')
            expandAll=al.expandAll
            expand=(action expandFn)
-        componentName='container-table'
            as | parent |
       }}
-        {{compontent parent.intent
+        {{container/form-ports
-          model=model.container
+            initialPorts=model.container.ports
+            editing=false
         }}
       {{/accordion-list-item}}
     </div>