ambari/ambari-web/app/templates/main/host.hbs

{{!
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements.  See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership.  The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License.  You may obtain a copy of the License at
*
*     http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
}}

<div id="hosts" class="box">
  <div class="box-header">
    <div class="button-section">
      <button class="btn btn-inverse add-host-button" {{action addHost}}>
        <i class="icon-plus icon-white"></i>
        Add New Hosts
      </button>
    </div>
  </div>
  <table class="table table-bordered table-striped">
    <thead>
    <tr>
      <th class="name">
        <div class="host-name-pos">
          <a class="filter-label" href="#" {{action sortByName target="controller" }}>Name
            {{#if controller.isSort}}
            <i class="icon-arrow-up"{{bindAttr class="controller.sortClass"}}></i>
            {{/if}}
          </a>

          {{view Ember.TextField class="host-name-search" placeholder="search" valueBinding="view.filterByName"}}
        </div>

      </th>
      <th>Rack</th>
      <th>CPU</th>
      <th>RAM</th>
      <th>Disk Usage</th>
      <th>Load Avg</th>
      <th>
        <div {{bindAttr class="view.btnGroupClass"}} >
          <button class="btn btn-info single-btn-group" {{action "clickFilterButton" target="view"}}>
            Components
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu filter-components" id="filter-dropdown">
            <li>
              <label class="checkbox">
                {{view Ember.Checkbox checkedBinding="view.allComponentsChecked"}} All
              </label>
            </li>
            <li>
              <label class="checkbox">
                {{view Ember.Checkbox checkedBinding="view.masterComponentsChecked"}} Master Components:
              </label>
              <ul>
                {{#each component in masterComponents}}
                <li>
                  <label class="checkbox">
                    {{view Ember.Checkbox checkedBinding="component.checkedForHostFilter" }} {{unbound component.displayName}}
                  </label>
                </li>
                {{/each}}
              </ul>
            </li>

            <li>
              <label class="checkbox">
                {{view Ember.Checkbox checkedBinding="view.slaveComponentsChecked"}} Slave Components:
              </label>
              <ul>
                {{#each component in slaveComponents}}
                <li>
                  <label class="checkbox">
                    {{view Ember.Checkbox checkedBinding="component.checkedForHostFilter" }} {{unbound component.displayName}}
                  </label>
                </li>
                {{/each}}
              </ul>
            </li>

            <li class="align-right">
              <button class="btn" {{action "closeFilters" target="view"}}>
                Cancel
              </button>
              <button class="btn btn-primary" {{action "applyFilters" target="view"}}>
                Apply
              </button>
            </li>
          </ul>
        </div>
      </th>
    </tr>
    </thead>
    <tbody>
    {{#each host in controller}}
    {{#view view.HostView contentBinding="host"}}
    <tr>
      <td class="name">
        <span {{bindAttr class="host.healthClass"}}></span>
        <a href="#" {{action "showDetails" host}}>{{unbound host.hostName}}</a>
      </td>
      <td>{{host.cluster.clusterName}}</td>
      <td>{{host.cpu}}</td>
      <td>{{host.memoryFormatted}}</td>
      <td>
        <div class="progress progress-info">
          <div class="bar" {{bindAttr style="view.usageStyle"}} style="width: 20%"></div>
        </div>
      </td>
      <td>{{host.loadAvg}}</td>
      <td>
        {{view.labels}}
      </td>
    </tr>
    {{/view}}
    {{/each}}
    </tbody>
  </table>
  <div class="box-footer">
    <hr/>
    <div class="footer-pagination">
      <ul class="nav nav-pills">
        <li class="disabled">Show: </li>
        <li class="dropdown">
          {{view Em.Select contentBinding="pageSizeRange"
                    selectionBinding="pageSize"
                    optionValuePath="this"}}
        </li>
        <li class="disabled">{{startPosition}}-{{rangeStop}} of {{total}}</li>
        <li class="disabled page-listing">
          {{#if hasPrevious}}
          <a href="#" {{action showPreviousPage target="controller"}}>previous</a>
          {{/if}}
          {{#if hasNext}}
          <a href="#" {{action showNextPage target="controller"}}>next</a>
          {{/if}}
        </li>
      </ul>
    </div>
  </div>
</div>