ui/app/service/template.hbs

<section class="header">
  <h1>Service:</h1>
  {{#power-select options=model.stack.services selected=service onchange=(action "changeService") searchField="displayName" as |obj|}}
    <div class="clip"><i class="{{obj.stateIcon}} {{obj.stateColor}}" tooltip="{{obj.displayState}}" data-placement="left"></i> {{obj.displayName}}</div>
  {{/power-select}}
  <strong>in {{#link-to "environment" model.stack.id}}{{model.stack.displayName}}{{/link-to}}</strong>

  {{action-menu model=service classNames="r-ml5" size="sm"}}
  {{header-state model=service}}
</section>

{{!todo copy pasta}}
<section>
  <div class="container-fluid container-multi-stat">

    <div class="row">
      <div class="col-sm-12 col-md-12 col-lg-12">
        <div class="row multi-stats">
          <div class="col-sm-6 col-md-4">
            <label>Type:</label>
            {{service.displayType}}
          </div>
          <div class="col-sm-6 col-md-4">
            <label>FQDN:</label>
            {{#if service.fqdn}}
              <span>{{service.fqdn}} {{zero-clipboard text=service.fqdn}}</span>
            {{else}}
              <span class="text-muted">None</span>
            {{/if}}
          </div>
          <div class="col-sm-6 col-md-4">
            <label>Scale:</label>
            {{#if service.canScale}}
              {{service.scale}}
              &nbsp;
              &nbsp;
              <div class="btn-group btn-group-xs">
                <button class="btn btn-default btn-xs" {{action "scaleDown" target=service}} disabled={{eq service.scale 1}}><i class="icon icon-minus"></i></button>
                <button class="btn btn-default btn-xs" {{action "scaleUp" target=service}}><i class="icon icon-plus"></i></button>
              </div>
            {{else}}
              {{if service.isGlobalScale 'Global' 'N/A'}}
            {{/if}}
          </div>
        </div>
        {{#if service.hasImage}}
          <div class="row multi-stats">
            <div class="col-sm-6 col-md-4">
              <label>Image:</label>
              <span class="force-wrap">
                {{service.launchConfig.displayImage}} {{zero-clipboard text=service.launchConfig.displayImage}}
              </span>
            </div>
            <div class="col-sm-6 col-md-4">
              <label>Entrypoint:</label>
              <span class="force-wrap">
                {{#if service.launchConfig.entryPoint}}
                  {{service.launchConfig.entryPoint}}
                {{else}}
                  <span class="text-muted">None</span>
                {{/if}}
              </span>
            </div>
            <div class="col-sm-6 col-md-4">
              <label>Command:</label>
              <span class="force-wrap">
                {{#if service.launchConfig.command}}
                  {{concat-str service.launchConfig.command}}
                {{else}}
                  <span class="text-muted">None</span>
                {{/if}}
              </span>
            </div>
          </div>
        {{/if}}
        {{#if service.description}}
          <div class="row multi-stats">
            <div class="col-xs-12 description">
              <label>Description: </label>
              <span>{{service.description}}</span>
            </div>
          </div>
        {{/if}}
      </div>
    </div>
  </div>
</section>

{{#if (eq service.kind 'externalService')}}
  {{!-- since external services are the only ones that have externalIp/hostname it didnt make sense to give extIps its own route like other services  --}}
  <section>
    <div class="well">
      {{#if service.externalIpAddresses}}
        <label class="text-muted r-ml15">External IPs</label>
        <ul class="list-unstyled list-inline with-room">
          {{#each service.externalIpAddresses as |ip|}}
            <li>
              <i class="icon icon-external-link"></i> {{ip}}
            </li>
          {{/each}}
        </ul>
      {{else}}
        <label class="text-muted">External Host Name: </label> {{service.hostname}}
      {{/if}}
    </div>
  </section>
{{/if}}

{{#if (or (or service.hasLabels service.hasContainers) service.consumedServicesWithNames.length) }}
  <section>
    <ul class="nav nav-tabs nav-tabs-well">
      {{#if (not-eq service.kind 'dnsService')}}
        {{#if service.hasPorts}}
          {{#link-to "service.ports" tagName="li" href=false}}<a>Ports</a>{{/link-to}}
        {{/if}}
        {{#if service.hasContainers}}
          {{#link-to "service.containers" tagName="li" href=false}}<a>Containers</a>{{/link-to}}
        {{/if}}
        {{#if service.hasLabels}}
          {{#link-to "service.labels" tagName="li" href=false}}<a>Labels</a>{{/link-to}}
        {{/if}}
        {{#link-to 'service.links' tagName='li' href=false}}<a>Links</a>{{/link-to}}
      {{else}}
        {{#link-to 'service.links' tagName='li' href=false classNames='hide'}}<a>Links</a>{{/link-to}}
      {{/if}}
    </ul>
    <div class="well nav-well">
      {{outlet}}
    </div>
  </section>
{{/if}}