ui/lib/shared/addon/components/form-balancer-rules/template.hbs

<div class="clearfix">
  <label class="acc-label">{{t 'formBalancerRules.label'}}</label>
  {{#if editing}}
    {{#if singleTarget}}
      <button class="btn bg-link icon-btn" {{action "addRule" "target"}}>
        <span class="darken"><i class="icon icon-plus text-small"></i></span>
        <span>{{t 'formBalancerRules.addTargetLabel'}}</span>
      </button>
    {{else}}
      <button class="btn bg-link icon-btn" {{action "addRule" "service"}}>
        <span class="darken"><i class="icon icon-plus text-small"></i></span>
        <span>{{t 'formBalancerRules.addServiceLabel'}}</span>
      </button>
      <button class="btn bg-link icon-btn ml-20" {{action "addRule" "instance"}}>
        <span class="darken"><i class="icon icon-plus text-small"></i></span>
        <span>{{t 'formBalancerRules.addInstanceLabel'}}</span>
      </button>
      <button class="btn bg-link icon-btn ml-20" {{action "addRule" "selector"}}>
        <span class="darken"><i class="icon icon-plus text-small"></i></span>
        <span>{{t 'formBalancerRules.addSelectorLabel'}}</span>
      </button>
    {{/if}}
  {{/if}}
</div>

{{#if rules.length}}
  <table class="fixed striped mt-20">
    <thead>
      <tr>
        {{#unless singleTarget}}
          <th width="30">&nbsp;</th>
        {{/unless}}

        <th class="divided">{{t 'formBalancerRules.hostname.label'}}</th>

        <th>{{t 'formBalancerRules.path.label'}}</th>

        {{#if singleTarget}}
          <th width="30">&nbsp;</th>
        {{else}}
          <th class="divided">{{t 'formBalancerRules.target'}}{{#if editing}}{{field-required}}{{/if}}</th>
        {{/if}}

        <th width="100" class="divided">{{t 'formBalancerRules.targetPort.label'}}{{#if editing}}{{field-required}}{{/if}}</th>

        {{#if showBackend}}
          <th class="divided">{{t 'formBalancerRules.backendName.label'}}</th>
        {{/if}}

        {{#if editing}}
          <th width="40">&nbsp;</th>
        {{/if}}
      </tr>
    </thead>

    <tbody>
      {{#each rules as |rule idx|}}
        <tr>
          {{#unless singleTarget}}
            <td data-title="{{t 'formBalancerRules.priority.label'}}">
              {{#if editing}}
                <button class="btn bg-default btn-xs" {{action "moveUp" rule}} disabled={{eq idx 0}}>
                  <i class="icon icon-chevron-up"></i>
                </button>
                <button class="btn bg-default btn-xs" {{action "moveDown" rule}} disabled={{eq idx (sub rules.length 1)}}>
                  <i class="icon icon-chevron-down"></i>
                </button>
              {{/if}}
            </td>
          {{/unless}}

          <td class="divided p-5" data-title="{{t 'formBalancerRules.hostname.label'}}">
            {{#if rule.canHostname}}
              {{#input-or-display editable=editing value=rule.hostname classesForDisplay="clip"}}
                {{input type="text" class="input-sm" value=rule.hostname placeholder=(t 'formBalancerRules.hostname.placeholder')}}
              {{/input-or-display}}
            {{else}}
              <span class="text-muted">{{t 'generic.na'}}</span>
            {{/if}}
          </td>

          <td class="p-5" data-title="{{t 'formBalancerRules.path.label'}}">
            {{#if rule.canPath}}
              {{#input-or-display editable=editing value=rule.path classesForDisplay="clip"}}
                {{input type="text" class="input-sm" value=rule.path placeholder=(t 'formBalancerRules.path.placeholder')}}
              {{/input-or-display}}
            {{else}}
              <span class="text-muted">{{t 'generic.na'}}</span>
            {{/if}}
          </td>

          {{#if singleTarget}}
            <td>&nbsp;</td>
          {{else}}
            <td class="divided p-5" data-title="{{t (concat-str 'formBalancerRules' rule.kind 'label' character='.')}}">
              {{#if editing}}
                {{#if (eq rule.kind 'selector')}}
                  {{input type="text" class="input-sm" value=rule.selector placeholder=(t 'formBalancerRules.selector.placeholder')}}
                {{else if (eq rule.kind 'instance')}}
                  {{schema/input-container selectClass="input-sm" selected=rule.instanceId}}
                {{else}}
                  {{schema/input-workload selectClass="input-sm" selected=rule.serviceId}}
                {{/if}}
              {{else}}
                {{#if (eq rule.kind 'selector')}}
                  {{rule.selector}}
                {{else if (eq rule.kind 'instance')}}
                  <a href="{{href-to 'container' rule.instanceId}}">{{rule.targetName}}</a>
                {{else}}
                  <a href="{{href-to 'service' rule.serviceId}}">{{rule.targetName}}</a>
                {{/if}}
              {{/if}}
            </td>
          {{/if}}

          <td class="p-5" data-title="{{t 'formBalancerRules.targetPort.label'}}">
            {{#input-or-display editable=editing value=rule.targetPort classesForDisplay="clip"}}
              {{input-integer class="input-sm" min="1" max="65535" value=rule.targetPort placeholder=(t 'formBalancerRules.targetPort.placeholder')}}
            {{/input-or-display}}
          </td>

          {{#if showBackend}}
            <td class="divided p-5" data-title="{{t 'formBalancerRules.backendName.label'}}">
              {{#input-or-display editable=editing value=rule.backendName classesForDisplay="clip"}}
                {{input type="text" class="input-sm" value=rule.backendName placeholder=(t 'formBalancerRules.backendName.placeholder')}}
              {{/input-or-display}}
            </td>
          {{/if}}

          {{#if editing}}
            <td class="text-right">
              <button class="btn bg-primary btn-sm" {{action "removeRule" rule}}><i class="icon icon-minus"/><span class="sr-only">{{t 'generic.remove'}}</span></button>
            </td>
          {{/if}}
        </tr>
      {{/each}}
    </tbody>
  </table>
  <div class="row text-right">
    {{#unless showBackend}}
      {{#if editing}}
        <div class="vertical-middle">
          <button class="btn bg-transparent text-small vertical-middle" {{action "showBackend"}}>
            {{t 'formBalancerListeners.showBackendLabel'}}
          </button>
        </div>
      {{/if}}
    {{/unless}}
  </div>

{{else}}
  <div class="row text-center mt-20 mb-20 pt-10">
    <span class="text-muted">{{t 'formBalancerRules.noRules'}}</span>
  </div>
{{/if}}