blob: 23afc1aae29f496e18706022a13b862b465218e1 [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.selectedSlice && !vm.showStats"
ng-click="vm.showStats = true">
<i class="glyphicon glyphicon-transfer"></i>
</a>
<a href="" class="btn btn-default"
ng-show="vm.selectedSlice && 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 in vm.services | orderBy:'-service'"
template-url="templates/accordion-group.html"
is-open="vm.accordion.open[service.service]"
heading="{{service.service}}">
<h4>Slices:</h4>
<a ng-repeat="slice in service.slices"
ng-class="{active: slice.slice === vm.selectedSlice}"
ng-click="vm.loadSliceMeter(slice, service.service)"
href="#" class="list-group-item" >
{{slice.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">
<!-- STATS -->
<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>
<!-- METERS -->
<article ng-hide="vm.showStats" class="meters animate-slide-left">
<div class="col-sm-4 animate-slide-left" ng-hide="!vm.selectedSlice">
<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>