ui/lib/shared/addon/components/container/form-ports/template.hbs

<div class="clearfix {{unless editing 'box'}}">
  <label class="{{if editing 'acc-label'}}">{{t 'formPorts.header'}}</label>
  {{#if (and ports.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}}

  {{#if ports.length}}
  <table class="table fixed no-lines small mb-10">
    <thead>
      <tr class="hidden-sm">
        {{#if showIp}}
          <th>{{t 'formPorts.hostIp.label'}}</th>
          <th width="10"></th>
        {{/if}}

        <th class="{{unless editing 'acc-label'}}">{{t 'formPorts.hostPort.label'}}</th>
        <th width="10"></th>
        <th class="{{unless editing 'acc-label'}}">{{t 'formPorts.containerPort.label'}}{{#if editing}}{{field-required}}{{/if}}</th>
        <th width="10"></th>
        <th class="{{unless editing 'acc-label'}}" width="80">{{t 'formPorts.protocol.label'}}</th>
        <th width="40">&nbsp;</th>
      </tr>
    </thead>
    <tbody>
      {{#each ports as |port|}}
        <tr>
          {{#if showIp}}
            <td data-title="{{t 'formPorts.hostPort.label'}}">
              {{#if port.existing}}
                {{#if port.hostIP}}
                  {{port.hostIP}}
                {{else}}
                  <span class="text-muted">{{t 'generic.any'}}</span>
                {{/if}}
              {{else}}
                {{#if editing}}
                  {{input class="form-control input-sm" type="text" value=port.hostIP placeholder=(t 'formPorts.hostIp.placeholder')}}
                {{else}}
                  {{#if port.hostIP}}
                    {{port.hostIP}}
                  {{else}}
                    <span class="text-muted">{{t 'generic.na'}}</span>
                  {{/if}}
                {{/if}}

              {{/if}}
            </td>
            <td>&nbsp;</td>
          {{/if}}

          <td data-title="{{t 'formPorts.hostPort.label'}}">
            {{#if editing}}
              {{input-integer class="form-control input-sm public" min="1" max="65535" value=port.hostPort placeholder=(t 'formPorts.hostPort.placeholder')}}
            {{else}}
              {{port.hostPort}}
            {{/if}}
          </td>
          <td>&nbsp;</td>

          <td data-title="{{t 'formPorts.containerPort.label'}}">
            {{#if port.existing}}
              <div class="text-muted">{{port.containerPort}}</div>
            {{else}}
              {{#if editing}}
                {{input-integer class="form-control input-sm" min="1" max="65535" value=port.containerPort placeholder=(t 'formPorts.containerPort.placeholder')}}
              {{else}}
                {{port.containerPort}}
              {{/if}}
            {{/if}}
          </td>
          <td>&nbsp;</td>

          <td data-title="{{t 'formPorts.protocol.label'}}">
            {{#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
                }}
              {{else}}
                {{port.protocol}}
              {{/if}}
            {{/if}}
          </td>

          <td>
            {{#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}}
  {{#unless editing}}
    <span class="text-center text-muted">{{t 'formPorts.noPorts'}}</span>
  {{/unless}}
{{/if}}
</div>

<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>