ui/app/components/stack-section/template.hbs

{{#unless single}}
  <div class="clearfix well r-p0 r-m0">
    <div class="stack-state pull-left {{model.stateBackground}}">
      {{#tooltip-element type="tooltip-basic" model=model.displayState tooltipTemplate='tooltip-static' aria-describedby="tooltip-base"}}
        <i class="{{model.stateIcon}}" aria-label="{{model.displayState}}"></i>
      {{/tooltip-element}}
    </div>

    <div class="header-left collapser">
      <a {{action "toggleCollapse"}} class="btn btn-link"><i class="icon {{if collapsed 'icon-plus' 'icon-minus'}}" alt="Toggle stack details" title=""></i></a>
    </div>

    <div class="header-left name {{if model.description 'with-description'}}">
      <h4 class="divider clip stack-link">
        {{#link-to "stack" model.id}}{{model.name}}{{/link-to}}
      </h4>
      {{#if model.description}}
        <div class="text-muted clip">{{model.description}}</div>
      {{/if}}
    </div>

    {{#if outputs.length}}
      <div class="header-left">
        <div class="btn-group r-ml10">
          <button type="button" class="btn btn-sm btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            {{t 'stackSection.outputs'}} <i class="icon icon-chevron-down"></i>
          </button>
          <ul class="dropdown-menu dropdown-menu-right" role="dropdown">
            {{#each outputs as |obj|}}
              <li><a href="{{obj.value}}" target="_blank">{{obj.key}}</a></li>
            {{/each}}
          </ul>
        </div>
      </div>
    {{/if}}

    <div class="header-right right-divider stack-actions wide">
      {{action-menu model=model}}
    </div>

    <div class="header-right right-divider count">
      <p>{{instanceCount}}</p>
      <label>{{t 'stackSection.container' numContainers=instanceCount}}</label>
    </div>

    <div class="header-right right-divider count">
      <p>{{model.services.length}}</p>
      <label>{{t 'stackSection.service' numServices=instanceCount}}</label>
    </div>

    <div class="header-right right-divider stack-template">
      {{upgrade-btn model=model}}
      {{#if showAddService}}
        <div class="btn-group">
          {{#link-to "service.new" (query-params stackId=model.id) classNames="btn btn-default btn-sm"}}{{t 'stackSection.add.service'}}{{/link-to}}
          <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
            <i class="icon icon-fw icon-chevron-down"></i>
            <span class="sr-only">{{t 'nav.srToggleDropdown'}}</span>
          </button>
          <ul class="dropdown-menu dropdown-menu-right" role="menu">
            <li>{{#link-to "service.new-balancer" (query-params stackId=model.id)}}{{t 'stackSection.add.loadBalancer'}}{{/link-to}}</li>
            <li>{{#link-to "service.new-alias" (query-params stackId=model.id)}}{{t 'stackSection.add.serviceAlias'}}{{/link-to}}</li>
            <li>{{#link-to "service.new-external" (query-params stackId=model.id)}}{{t 'stackSection.add.externalService'}}{{/link-to}}</li>
            {{#if hasVm}}
              <li>{{#link-to "service.new-virtualmachine" (query-params stackId=model.id)}}{{t 'stackSection.add.virtualMachine'}}{{/link-to}}</li>
            {{/if}}
          </ul>
        </div>
      {{/if}}
    </div>
  </div>
{{/unless}}

{{#liquid-if (not collapsed)}}
  <div class="stack-body {{if single 'single-body'}}">
    {{#if single}}
      {{#if model.description}}
      <div class="r-pt20 r-pr20 r-pb20 r-pl20">
          <label>{{t 'generic.description'}}:&nbsp;</label>{{model.description}}
        </div>
      {{/if}}
    {{/if}}
    {{#if model.services.length}}
      <table class="grid fixed sized" style="margin-bottom: 0">
        <tbody>
          {{#each sortedServices as |service|}}
            <tr>
              <td data-title="{{t 'stackSection.table.dataTitle.state'}}:" class="state">
                {{badge-state model=service}}
              </td>
              <td data-title="{{t 'stackSection.table.dataTitle.serviceName'}}:" class="force-wrap">
                {{#link-to "service" service.stackId service.id}}{{service.displayName}}{{/link-to}}
                {{#if service.hasSidekicks}}
                  {{t 'stackSection.sidekick' numSidekicks=service.secondaryLaunchConfigs.length}}
                {{/if}}
                {{#if service.showTransitioningMessage}}
                  <span class="{{service.stateColor}}">({{service.transitioningMessage}})</span>
                {{/if}}
                <button type="button" class="btn-link" role="button" {{action 'addtlInfo' service}}>
                  <i class="icon icon-info addtl-info-trigger"/>
                </button>
                {{#if service.isError}}
                  {{#link-to "service.log" service.stackId service.id class="btn-link"}}<i class="icon icon-alert"/>{{/link-to}}
                {{/if}}
              </td>
              <td data-title="{{t 'stackSection.table.dataTitle.details'}}:" class="force-wrap service-detail">{{service.displayDetail}}{{service.displayPorts}}</td>
              <td data-title="{{t 'stackSection.table.dataTitle.kind'}}:">
                {{#if service.displayType}}
                  {{service.displayType}}
                {{/if}}
              </td>
              <td data-title="{{t 'stackSection.table.dataTitle.containers'}}:">
                {{#if service.hasContainers}}
                  {{default-str service.instances.length default="0"}} {{t 'stackSection.container' numContainers=service.instances.length}}
                {{/if}}
              </td>
              <td data-title="{{t 'stackSection.table.dataTitle.actions'}}:" class="actions wide">
                {{action-menu model=service}}
              </td>
            </tr>
          {{/each}}
        </tbody>
      </table>
    {{else}}
      <div class="text-muted text-center r-p10">{{t 'stackSection.none'}}</div>
    {{/if}}
  </div>
{{/liquid-if}}