xos/core/xoslib/ngXosViews/ceilometerDashboard/src/templates/ceilometer-dashboard.tpl.html

<div class="row">
  <div class="col-sm-12">
    <h1>XOS Monitoring Statistics</h1>
  </div>
</div>

<div class="row" ng-show="vm.loader">
  <div class="col-xs-12">
    <div class="loader">Loading</div>
  </div>
</div>

<section ng-hide="vm.loader" ng-class="{animate: !vm.loader}">
  <div class="row">
    <div class="col-sm-4">
      <div class="list-group">
        <div class="list-group-item">
          <h2>Service Name</h2>
        </div>
        <a href="#" ng-click="vm.selectResources(resources, slice)" class="list-group-item" ng-repeat="(slice, resources) in vm.projects" ng-class="{active: slice === vm.selectedSlice}">
          {{slice}} <i class="glyphicon glyphicon-chevron-right pull-right"></i>
        </a>
      </div>
    </div>
    <div class="col-sm-4 animate-slide-left" ng-hide="!vm.selectedResources">
      <div class="list-group">
        <div class="list-group-item">
          <h2>Resources</h2>
        </div>
        <a href="#" ng-click="vm.selectMeters(meters, resource)" class="list-group-item" ng-repeat="(resource, meters) in vm.selectedResources" ng-class="{active: resource === vm.selectedResource}">
          {{resource}} <i class="glyphicon glyphicon-chevron-right pull-right"></i>
        </a>
      </div>
    </div>
    <div class="col-sm-4 animate-slide-left" ng-hide="!vm.selectedMeters">
      <div class="list-group">
        <div class="list-group-item">
          <h2>Meters</h2>
        </div>
        <div class="list-group-item">
          <div class="row">
            <div class="col-xs-4">
              <label>Name:</label>
            </div>
            <div class="col-xs-4">
              <label>Unit:</label>
            </div>
            <div class="col-xs-4"></div>
          </div>
          <div class="row" ng-click="vm.selectMeters(meters)" ng-repeat="meter in vm.selectedMeters" style="margin-bottom: 10px;">
            <div class="col-xs-4">
              {{meter.name}}
            </div>
            <div class="col-xs-4">
              {{meter.unit}}
            </div>
            <div class="col-xs-4">
              <a ui-sref="samples({name: meter.name, tenant: meter.resource_id})" class="btn btn-primary">
                <i class="glyphicon glyphicon-search"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>