blob: 6445781dcb1c6d648e0aebfd8a8301761af6e8bc [file] [log] [blame]
<div class="row">
<div class="col-sm-10">
<h1>XOS Monitoring Statistics</h1>
</div>
<div class="col-xs-2 text-right">
<a href="" class="btn btn-default"
ng-show="vm.selectedResources && !vm.showStats"
ng-click="vm.showStats = true">
<i class="glyphicon glyphicon-transfer"></i>
</a>
<a href="" class="btn btn-default"
ng-show="vm.selectedResources && vm.showStats"
ng-click="vm.showStats = false">
<i class="glyphicon glyphicon-transfer"></i>
</a>
</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-3 service-list">
<h3>XOS Service: </h3>
<uib-accordion close-others="true" template-url="templates/accordion.html">
<uib-accordion-group
ng-repeat="(service, slices) in vm.projects | orderObjectByKey"
template-url="templates/accordion-group.html"
is-open="vm.accordion.open[service]"
heading="{{service}}">
<h4>Slices:</h4>
<a ng-repeat="(slice, resources) in slices"
ng-class="{active: slice === vm.selectedSlice}"
ng-click="vm.selectResources(resources, slice, service)"
href="#" class="list-group-item" >
{{slice}} <i class="glyphicon glyphicon-chevron-right pull-right"></i>
</a>
</uib-accordion-group>
</uib-accordion>
</div>
<section class="side-container col-sm-9">
<div class="row">
<article ng-hide="!vm.showStats" class="stats animate-slide-left">
<div class="col-xs-12">
<div class="list-group">
<div class="list-group-item">
<h3>Stats</h3>
</div>
<div class="list-group-item">
<ceilometer-stats ng-if="vm.selectedSlice" name="vm.selectedSlice" tenant="vm.selectedTenant"></ceilometer-stats>
</div>
</div>
</div>
</article>
<article ng-hide="vm.showStats" class="meters animate-slide-left">
<div class="col-sm-4 animate-slide-left" ng-hide="!vm.selectedResources">
<div class="list-group">
<div class="list-group-item">
<h3>Resources</h3>
</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-8 animate-slide-left" ng-hide="!vm.selectedMeters">
<div class="list-group">
<div class="list-group-item">
<h3>Meters</h3>
</div>
<div class="list-group-item">
<div class="row">
<div class="col-xs-6">
<label>Name:</label>
</div>
<div class="col-xs-3">
<label>Unit:</label>
</div>
<div class="col-xs-3"></div>
</div>
<div class="row" ng-repeat="meter in vm.selectedMeters" style="margin-bottom: 10px;">
<div class="col-xs-6">
{{meter.name}}
</div>
<div class="col-xs-3">
{{meter.unit}}
</div>
<div class="col-xs-3">
<a ui-sref="samples({name: meter.name, tenant: meter.project_id})" class="btn btn-primary">
<i class="glyphicon glyphicon-search"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
</section>
</div>
</section>
<section ng-if="!vm.loader && vm.error">
<div class="alert alert-danger">
{{vm.error}}
</div>
</section>