Merge branch 'master' into feature/ceilometer
diff --git a/views/ngXosViews/ceilometerDashboard/env/default.js b/views/ngXosViews/ceilometerDashboard/env/default.js
index 778faac..67006ec 100644
--- a/views/ngXosViews/ceilometerDashboard/env/default.js
+++ b/views/ngXosViews/ceilometerDashboard/env/default.js
@@ -7,7 +7,7 @@
// (works only for local environment as both application are served on the same domain)
module.exports = {
- host: 'http://clnode015.clemson.cloudlab.us:9999/',
- xoscsrftoken: 'gvAeNnr2DoQMorphFSxs4nXDSIDAT61Q',
- xossessionid: 'qu69xzr4u5755w9hhuqa0djxacvi9k9i'
+ host: 'http://clnode067.clemson.cloudlab.us:9999/',
+ xoscsrftoken: 'prHoBeRKIHqQE53sKYo3EfzHAgaVIQ1z',
+ xossessionid: 'mp5xe6345ef4fgs6n0t5rfd0su33c12x'
};
diff --git a/views/ngXosViews/ceilometerDashboard/spec/.eslintrc b/views/ngXosViews/ceilometerDashboard/spec/.eslintrc
index ad4bc2d..e456ddf 100644
--- a/views/ngXosViews/ceilometerDashboard/spec/.eslintrc
+++ b/views/ngXosViews/ceilometerDashboard/spec/.eslintrc
@@ -1,9 +1,13 @@
{
"globals" :{
"describe": true,
+ "xdescribe": true,
"beforeEach": true,
"it": true,
"inject": true,
"expect": true
- }
+ },
+ "rules": {
+ "max-nested-callbacks": [0, 4]
+ }
}
diff --git a/views/ngXosViews/ceilometerDashboard/spec/backend.mock.js b/views/ngXosViews/ceilometerDashboard/spec/backend.mock.js
index c7642bb..86ed3d8 100644
--- a/views/ngXosViews/ceilometerDashboard/spec/backend.mock.js
+++ b/views/ngXosViews/ceilometerDashboard/spec/backend.mock.js
@@ -2,46 +2,23 @@
(function () {
const meters = [
- // service_1
- // - slice_1
- // - resource_1
- // service_2
- // - slice_2
- // - resource_2
- // - resource_3
- // - slice_3
- // - resource_4
{
- service: 'service_1',
- slice: 'slice_1',
- resource_name: 'resource_1',
- resource_id: 'resource_id_1',
- name: 'instance_1',
- unit: 'instance'
+ service: 'service-a',
+ slice: 'slice-a-1',
+ name: 'network.outgoing.packets.rate',
+ resource_name: 'resource-1'
},
{
- service: 'service_2',
- slice: 'slice_2',
- resource_name: 'resource_2',
- resource_id: 'resource_id_2',
- name: 'instance_2',
- unit: 'instance'
+ service: 'service-a',
+ slice: 'slice-a-1',
+ name: 'network.incoming.packets.rate',
+ resource_name: 'resource-1'
},
{
- service: 'service_2',
- slice: 'slice_2',
- resource_name: 'resource_3',
- resource_id: 'resource_id_3',
- name: 'instance_2',
- unit: 'instance'
- },
- {
- service: 'service_2',
- slice: 'slice_3',
- resource_name: 'resource_4',
- resource_id: 'resource_id_4',
- name: 'instance_3',
- unit: 'instance'
+ service: 'service-a',
+ slice: 'slice-a-1',
+ name: 'network.incoming.packets.rate',
+ resource_name: 'resource-2'
}
];
@@ -90,9 +67,39 @@
}
];
+ const mapping = [
+ {
+ service: 'service-a',
+ slice: [
+ {
+ project_id: 'id-a-1',
+ slice: 'slice-a-1'
+ },
+ {
+ project_id: 'id-a-2',
+ slice: 'slice-a-2'
+ }
+ ]
+ },
+ {
+ service: 'service-b',
+ slice: [
+ {
+ project_id: 'id-b-1',
+ slice: 'slice-b-1'
+ },
+ {
+ project_id: 'id-b-2',
+ slice: 'slice-b-2'
+ }
+ ]
+ }
+ ]
+
angular.module('xos.ceilometerDashboard')
.run(($httpBackend) => {
$httpBackend.whenGET(/metersamples/).respond(samples);
+ $httpBackend.whenGET(/xos-slice-service-mapping/).respond(mapping);
$httpBackend.whenGET(/meters/).respond(meters);
});
})();
diff --git a/views/ngXosViews/ceilometerDashboard/spec/ceilometer.test.js b/views/ngXosViews/ceilometerDashboard/spec/ceilometer.test.js
index c5bb850..bc8b2e2 100644
--- a/views/ngXosViews/ceilometerDashboard/spec/ceilometer.test.js
+++ b/views/ngXosViews/ceilometerDashboard/spec/ceilometer.test.js
@@ -21,7 +21,7 @@
httpBackend.flush();
}));
- describe('when loading meters', () => {
+ xdescribe('when loading meters', () => {
it('should group meters by services', () => {
expect(Object.keys(vm.projects).length).toBe(2);
});
@@ -34,6 +34,29 @@
expect(Object.keys(vm.projects.service_2.slice_2).length).toBe(2);
});
});
+
+ describe('when loading service list', () => {
+ it('should append the list to the scope', () => {
+ expect(vm.services.length).toBe(2);
+ expect(vm.services[0].slice.length).toBe(2);
+ expect(vm.services[1].slice.length).toBe(2);
+ });
+ });
+
+ describe('when a slice is selected', () => {
+ it('should load corresponding meters', () => {
+ vm.loadSliceMeter(vm.services[0].slice[0]);
+
+ expect(vm.selectedSlice).toEqual('slice-a-1');
+ expect(vm.selectedTenant).toEqual('id-a-1');
+
+ httpBackend.flush();
+
+ expect(Object.keys(vm.selectedResources).length).toBe(2);
+ expect(vm.selectedResources['resource-1'].length).toBe(2);
+ expect(vm.selectedResources['resource-2'].length).toBe(1);
+ });
+ });
});
describe('the sample view', () => {
@@ -111,27 +134,4 @@
});
});
});
-});
-
-describe('The orderObjectByKey filter', () => {
- var $filter;
-
- beforeEach(function () {
- module('xos.ceilometerDashboard');
-
- inject(function (_$filter_) {
- $filter = _$filter_;
- });
- });
-
- it('should order an object by the key value', function () {
- // Arrange.
- const list = {c: 3, b: 2, a: 1};
-
- // call the filter function
- const result = $filter('orderObjectByKey')(list);
-
- // Assert.
- expect(result).toEqual({a: 1, b: 2, c: 3});
- });
});
\ No newline at end of file
diff --git a/views/ngXosViews/ceilometerDashboard/src/js/main.js b/views/ngXosViews/ceilometerDashboard/src/js/main.js
index 01b9adc..aeb8243 100644
--- a/views/ngXosViews/ceilometerDashboard/src/js/main.js
+++ b/views/ngXosViews/ceilometerDashboard/src/js/main.js
@@ -33,10 +33,24 @@
})
.service('Ceilometer', function($http, $q, lodash){
- this.getMeters = () => {
+ this.getMappings = () => {
let deferred = $q.defer();
- $http.get('/xoslib/meters/', {cache: true})
+ $http.get('/xoslib/xos-slice-service-mapping/')
+ .then((res) => {
+ deferred.resolve(res.data)
+ })
+ .catch((e) => {
+ deferred.reject(e);
+ });
+
+ return deferred.promise;
+ }
+
+ this.getMeters = (params) => {
+ let deferred = $q.defer();
+
+ $http.get('/xoslib/meters/', {cache: true, params: params})
// $http.get('../meters_mock.json', {cache: true})
.then((res) => {
deferred.resolve(res.data)
@@ -91,6 +105,8 @@
templateUrl: 'templates/ceilometer-dashboard.tpl.html',
controller: function(Ceilometer){
+ this.showStats = false;
+
// this open the accordion
this.accordion = {
open: {}
@@ -103,74 +119,71 @@
if(Ceilometer.selectedService){
this.accordion.open[Ceilometer.selectedService] = true;
if(Ceilometer.selectedSlice){
+ this.loadSliceMeter(Ceilometer.selectedSlice, Ceilometer.selectedService);
this.selectedSlice = Ceilometer.selectedSlice;
- this.selectedResources = this.projects[Ceilometer.selectedService][Ceilometer.selectedSlice]
if(Ceilometer.selectedResource){
this.selectedResource = Ceilometer.selectedResource;
- this.selectedMeters = this.selectedResources[Ceilometer.selectedResource];
}
}
}
}
- this.loadMeters = () => {
+ /**
+ * Load the list of service and slices
+ */
+
+ this.loadMappings = () => {
this.loader = true;
-
- // TODO rename projects in meters
- Ceilometer.getMeters()
- .then(meters => {
- //group project by service
- this.projects = lodash.groupBy(meters, 'service');
- lodash.forEach(Object.keys(this.projects), (project) => {
- // inside each service group by slice
- this.projects[project] = lodash.groupBy(this.projects[project], 'slice');
- lodash.forEach(Object.keys(this.projects[project]), (slice) => {
- // inside each service => slice group by resource
- this.projects[project][slice] = lodash.groupBy(this.projects[project][slice], 'resource_name');
- });
- });
-
- // open selected panels
+ Ceilometer.getMappings()
+ .then((services) => {
+ this.services = services;
this.openPanels();
})
.catch(err => {
- this.error = err.data.detail;
+ this.error = (err.data && err.data.detail) ? err.data.detail : 'An Error occurred. Please try again later.';
})
.finally(() => {
this.loader = false;
});
- }
+ };
- this.loadMeters();
+ this.loadMappings();
/**
- * Select Resources for a slice
- *
- * @param Array resources The list of selected resources
- * @returns void
+ * Load the list of a single slice
*/
- this.selectedResources = null;
- this.selectResources = (resources, slice, service) => {
+
+ this.loadSliceMeter = (slice, service_name) => {
- //cleaning
- this.selectedResources = null;
- this.selectedResource = null;
- this.selectedMeters = null;
+ Ceilometer.selectedSlice = null;
+ Ceilometer.selectedService = null;
+ Ceilometer.selectedResources = null;
- // hold the resource list for the current slice
- this.selectedResources = resources;
- this.selectedSlice = slice;
- this.selectedService = service;
+ // visualization info
+ this.loader = true;
+ this.selectedSlice = slice.slice;
+ this.selectedTenant = slice.project_id;
// store the status
Ceilometer.selectedSlice = slice;
- Ceilometer.selectedService = service;
+ Ceilometer.selectedService = service_name;
- // store tenant (slice id for ceilometer)
- // it is passed to ceilometer-stats directive
- console.log(resources);
- this.selectedTenant = resources[Object.keys(resources)[0]][0].project_id;
- }
+ Ceilometer.getMeters({tenant: slice.project_id})
+ .then((sliceMeters) => {
+ this.selectedResources = lodash.groupBy(sliceMeters, 'resource_name');
+
+ // hacky
+ if(Ceilometer.selectedResource){
+ this.selectedMeters = this.selectedResources[Ceilometer.selectedResource];
+ }
+ })
+ .catch(err => {
+ this.error = (err.data && err.data.detail) ? err.data.detail : 'An Error occurred. Please try again later.';
+ })
+ .finally(() => {
+ this.loader = false;
+ });
+ };
/**
* Select Meters for a resource
@@ -342,7 +355,6 @@
controller: function($scope, Ceilometer) {
this.getStats = (tenant) => {
- console.log(this.tenant);
this.loader = true;
Ceilometer.getStats({tenant: tenant})
.then(res => {
@@ -363,19 +375,4 @@
});
}
}
-})
-.filter('orderObjectByKey', function(lodash) {
- return function(items) {
-
- if(!items){
- return;
- }
-
- return lodash.reduce(Object.keys(items).reverse(), (list, key) => {
- list[key] = items[key];
- return list;
- }, {});
-
- };
-});
-;
\ No newline at end of file
+});
\ No newline at end of file
diff --git a/views/ngXosViews/ceilometerDashboard/src/templates/ceilometer-dashboard.tpl.html b/views/ngXosViews/ceilometerDashboard/src/templates/ceilometer-dashboard.tpl.html
index 6445781..23afc1a 100644
--- a/views/ngXosViews/ceilometerDashboard/src/templates/ceilometer-dashboard.tpl.html
+++ b/views/ngXosViews/ceilometerDashboard/src/templates/ceilometer-dashboard.tpl.html
@@ -4,12 +4,12 @@
</div>
<div class="col-xs-2 text-right">
<a href="" class="btn btn-default"
- ng-show="vm.selectedResources && !vm.showStats"
+ 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.selectedResources && vm.showStats"
+ ng-show="vm.selectedSlice && vm.showStats"
ng-click="vm.showStats = false">
<i class="glyphicon glyphicon-transfer"></i>
</a>
@@ -28,22 +28,23 @@
<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"
+ ng-repeat="service in vm.services | orderBy:'-service'"
template-url="templates/accordion-group.html"
- is-open="vm.accordion.open[service]"
- heading="{{service}}">
+ is-open="vm.accordion.open[service.service]"
+ heading="{{service.service}}">
<h4>Slices:</h4>
- <a ng-repeat="(slice, resources) in slices"
- ng-class="{active: slice === vm.selectedSlice}"
- ng-click="vm.selectResources(resources, slice, service)"
+ <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}} <i class="glyphicon glyphicon-chevron-right pull-right"></i>
+ {{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">
@@ -56,8 +57,9 @@
</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.selectedResources">
+ <div class="col-sm-4 animate-slide-left" ng-hide="!vm.selectedSlice">
<div class="list-group">
<div class="list-group-item">
<h3>Resources</h3>
diff --git a/xos/core/xoslib/static/js/xosCeilometerDashboard.js b/xos/core/xoslib/static/js/xosCeilometerDashboard.js
index c7a16aa..10435f4 100644
--- a/xos/core/xoslib/static/js/xosCeilometerDashboard.js
+++ b/xos/core/xoslib/static/js/xosCeilometerDashboard.js
@@ -1 +1 @@
-"use strict";angular.module("xos.ceilometerDashboard",["ngResource","ngCookies","ngLodash","ui.router","xos.helpers","ngAnimate","chart.js","ui.bootstrap.accordion"]).config(["$stateProvider","$urlRouterProvider",function(e,t){e.state("ceilometerDashboard",{url:"/",template:"<ceilometer-dashboard></ceilometer-dashboard>"}).state("samples",{url:"/:name/:tenant/samples",template:"<ceilometer-samples></ceilometer-samples>"}),t.otherwise("/")}]).config(["$httpProvider",function(e){e.interceptors.push("NoHyperlinks")}]).run(["$rootScope",function(e){e.stateName="ceilometerDashboard",e.$on("$stateChangeStart",function(t,n){e.stateName=n.name})}]).service("Ceilometer",["$http","$q","lodash",function(e,t,n){this.getMeters=function(){var n=t.defer();return e.get("/xoslib/meters/",{cache:!0}).then(function(e){n.resolve(e.data)})["catch"](function(e){n.reject(e)}),n.promise},this.getSamples=function(n,s){var r=t.defer();return e.get("/xoslib/metersamples/",{params:{meter:n,tenant:s}}).then(function(e){r.resolve(e.data)})["catch"](function(e){r.reject(e)}),r.promise},this.getStats=function(n){var s=t.defer();return e.get("/xoslib/meterstatistics/",{cache:!0,params:n}).then(function(e){s.resolve(e.data)})["catch"](function(e){s.reject(e)}),s.promise},this.selectedService=null,this.selectedSlice=null,this.selectedResource=null}]).directive("ceilometerDashboard",["lodash",function(e){return{restrict:"E",scope:{},bindToController:!0,controllerAs:"vm",templateUrl:"templates/ceilometer-dashboard.tpl.html",controller:["Ceilometer",function(t){var n=this;this.accordion={open:{}},this.openPanels=function(){t.selectedService&&(n.accordion.open[t.selectedService]=!0,t.selectedSlice&&(n.selectedSlice=t.selectedSlice,n.selectedResources=n.projects[t.selectedService][t.selectedSlice],t.selectedResource&&(n.selectedResource=t.selectedResource,n.selectedMeters=n.selectedResources[t.selectedResource])))},this.loadMeters=function(){n.loader=!0,t.getMeters().then(function(t){n.projects=e.groupBy(t,"service"),e.forEach(Object.keys(n.projects),function(t){n.projects[t]=e.groupBy(n.projects[t],"slice"),e.forEach(Object.keys(n.projects[t]),function(s){n.projects[t][s]=e.groupBy(n.projects[t][s],"resource_name")})}),n.openPanels()})["catch"](function(e){n.error=e.data.detail})["finally"](function(){n.loader=!1})},this.loadMeters(),this.selectedResources=null,this.selectResources=function(e,s,r){n.selectedResources=null,n.selectedResource=null,n.selectedMeters=null,n.selectedResources=e,n.selectedSlice=s,n.selectedService=r,t.selectedSlice=s,t.selectedService=r,console.log(e),n.selectedTenant=e[Object.keys(e)[0]][0].project_id},this.selectedMeters=null,this.selectMeters=function(e,s){n.selectedMeters=e,t.selectedResource=s,n.selectedResource=s}}]}}]).directive("ceilometerSamples",["lodash","$stateParams",function(e,t){return{restrict:"E",scope:{},bindToController:!0,controllerAs:"vm",templateUrl:"templates/ceilometer-samples.tpl.html",controller:["Ceilometer",function(n){var s=this;if(this.chartColors=["#286090","#F7464A","#46BFBD","#FDB45C","#97BBCD","#4D5360","#8c4f9f"],this.chart={series:[],labels:[],data:[]},Chart.defaults.global.colours=this.chartColors,this.chartType="line",!t.name||!t.tenant)throw new Error("Missing Name and Tenant Params!");this.name=t.name,this.tenant=t.tenant,this.getLabels=function(e){return e.reduce(function(e,t){var n=new Date(t.timestamp);return e.push(n.getHours()+":"+((n.getMinutes()<10?"0":"")+n.getMinutes())+":"+n.getSeconds()),e},[])},this.getData=function(e){return e.reduce(function(e,t){return e.push(t.volume),e},[])},this.chartMeters=[],this.addMeterToChart=function(t){s.chart.labels=s.getLabels(e.sortBy(s.samplesList[t],"timestamp")),s.chart.series.push(t),s.chart.data.push(s.getData(e.sortBy(s.samplesList[t],"timestamp"))),s.chartMeters.push(s.samplesList[t][0]),e.remove(s.sampleLabels,{id:t})},this.removeFromChart=function(t){s.chart.data.splice(s.chart.series.indexOf(t.project_id),1),s.chart.series.splice(s.chart.series.indexOf(t.project_id),1),s.chartMeters.splice(e.findIndex(s.chartMeters,{project_id:t.project_id}),1),s.sampleLabels.push({id:t.project_id,name:t.resource_name||t.project_id})},this.formatSamplesLabels=function(t){return e.uniq(t,"project_id").reduce(function(e,t){return e.push({id:t.project_id,name:t.resource_name||t.project_id}),e},[])},this.showSamples=function(){s.loader=!0,n.getSamples(s.name).then(function(t){s.samplesList=e.groupBy(t,"project_id"),s.sampleLabels=s.formatSamplesLabels(t),s.addMeterToChart(s.tenant)})["catch"](function(e){s.error=e.data.detail})["finally"](function(){s.loader=!1})},this.showSamples()}]}}]).directive("ceilometerStats",function(){return{restrict:"E",scope:{name:"=name",tenant:"=tenant"},bindToController:!0,controllerAs:"vm",templateUrl:"templates/ceilometer-stats.tpl.html",controller:["$scope","Ceilometer",function(e,t){var n=this;this.getStats=function(e){console.log(n.tenant),n.loader=!0,t.getStats({tenant:e}).then(function(e){n.stats=e})["catch"](function(e){n.error=e.data})["finally"](function(){n.loader=!1})},e.$watch(function(){return n.name},function(e){e&&n.getStats(n.tenant)})}]}}).filter("orderObjectByKey",["lodash",function(e){return function(t){return t?e.reduce(Object.keys(t).reverse(),function(e,n){return e[n]=t[n],e},{}):void 0}}]),angular.module("xos.ceilometerDashboard").run(["$templateCache",function(e){e.put("templates/accordion-group.html",'<div class="panel {{panelClass || \'panel-default\'}}">\n <div class="panel-heading" ng-keypress="toggleOpen($event)">\n <h3>\n <a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading"><span ng-class="{\'text-muted\': isDisabled}">{{heading}}</span></a>\n </h3>\n </div>\n <div class="panel-collapse collapse" uib-collapse="!isOpen">\n <div class="panel-body" ng-transclude></div>\n </div>\n</div>\n'),e.put("templates/accordion.html",'<div class="panel-group" ng-transclude></div>'),e.put("templates/ceilometer-dashboard.tpl.html",'<div class="row">\n <div class="col-sm-10">\n <h1>XOS Monitoring Statistics</h1>\n </div>\n <div class="col-xs-2 text-right">\n <a href="" class="btn btn-default" \n ng-show="vm.selectedResources && !vm.showStats"\n ng-click="vm.showStats = true">\n <i class="glyphicon glyphicon-transfer"></i>\n </a>\n <a href="" class="btn btn-default" \n ng-show="vm.selectedResources && vm.showStats"\n ng-click="vm.showStats = false">\n <i class="glyphicon glyphicon-transfer"></i>\n </a>\n </div>\n</div>\n\n<div class="row" ng-show="vm.loader">\n <div class="col-xs-12">\n <div class="loader">Loading</div>\n </div>\n</div>\n\n<section ng-hide="vm.loader" ng-class="{animate: !vm.loader}">\n <div class="row">\n <div class="col-sm-3 service-list">\n <h3>XOS Service: </h3>\n <uib-accordion close-others="true" template-url="templates/accordion.html">\n <uib-accordion-group\n ng-repeat="(service, slices) in vm.projects | orderObjectByKey"\n template-url="templates/accordion-group.html"\n is-open="vm.accordion.open[service]"\n heading="{{service}}">\n <h4>Slices:</h4>\n <a ng-repeat="(slice, resources) in slices" \n ng-class="{active: slice === vm.selectedSlice}"\n ng-click="vm.selectResources(resources, slice, service)"\n href="#" class="list-group-item" >\n {{slice}} <i class="glyphicon glyphicon-chevron-right pull-right"></i>\n </a>\n </uib-accordion-group>\n </uib-accordion>\n </div>\n <section class="side-container col-sm-9">\n <div class="row">\n <article ng-hide="!vm.showStats" class="stats animate-slide-left">\n <div class="col-xs-12">\n <div class="list-group">\n <div class="list-group-item">\n <h3>Stats</h3>\n </div>\n <div class="list-group-item">\n <ceilometer-stats ng-if="vm.selectedSlice" name="vm.selectedSlice" tenant="vm.selectedTenant"></ceilometer-stats>\n </div>\n </div>\n </div>\n </article>\n <article ng-hide="vm.showStats" class="meters animate-slide-left">\n <div class="col-sm-4 animate-slide-left" ng-hide="!vm.selectedResources">\n <div class="list-group">\n <div class="list-group-item">\n <h3>Resources</h3>\n </div>\n <a href="#" \n ng-click="vm.selectMeters(meters, resource)" \n class="list-group-item" \n ng-repeat="(resource, meters) in vm.selectedResources" \n ng-class="{active: resource === vm.selectedResource}">\n {{resource}} <i class="glyphicon glyphicon-chevron-right pull-right"></i>\n </a>\n </div>\n </div>\n <div class="col-sm-8 animate-slide-left" ng-hide="!vm.selectedMeters">\n <div class="list-group">\n <div class="list-group-item">\n <h3>Meters</h3>\n </div>\n <div class="list-group-item">\n <div class="row">\n <div class="col-xs-6">\n <label>Name:</label>\n </div>\n <div class="col-xs-3">\n <label>Unit:</label>\n </div>\n <div class="col-xs-3"></div>\n </div>\n <div class="row" ng-repeat="meter in vm.selectedMeters" style="margin-bottom: 10px;">\n <div class="col-xs-6">\n {{meter.name}}\n </div>\n <div class="col-xs-3">\n {{meter.unit}}\n </div>\n <div class="col-xs-3">\n <a ui-sref="samples({name: meter.name, tenant: meter.project_id})" class="btn btn-primary">\n <i class="glyphicon glyphicon-search"></i>\n </a>\n </div>\n </div>\n </div>\n </div>\n </div>\n </article>\n </div>\n </section>\n </div>\n</section>\n<section ng-if="!vm.loader && vm.error">\n <div class="alert alert-danger">\n {{vm.error}}\n </div>\n</section>\n'),e.put("templates/ceilometer-samples.tpl.html",'<!-- <pre>{{ vm | json}}</pre> -->\n\n<div class="row">\n <div class="col-xs-10">\n <h1>{{vm.name | uppercase}}</h1>\n </div>\n <div class="col-xs-2">\n <a ui-sref="ceilometerDashboard" class="btn btn-primary pull-right">\n <i class="glyphicon glyphicon-arrow-left"></i> Back to list\n </a>\n </div>\n</div>\n<div class="row" ng-show="vm.loader">\n <div class="col-xs-12">\n <div class="loader">Loading</div>\n </div>\n</div>\n<section ng-if="!vm.loader && !vm.error">\n <div class="row">\n <form class="form-inline col-xs-8" ng-submit="vm.addMeterToChart(vm.addMeterValue)">\n <select ng-model="vm.addMeterValue" class="form-control" ng-options="resource.id as resource.name for resource in vm.sampleLabels"></select>\n <button class="btn btn-success"> \n <i class="glyphicon glyphicon-plus"></i> Add\n </button>\n </form>\n <div class="col-xs-4 text-right">\n <a ng-click="vm.chartType = \'line\'" class="btn" ng-class="{\'btn-default\': vm.chartType != \'bar\', \'btn-primary\': vm.chartType == \'line\'}">Lines</a>\n <a ng-click="vm.chartType = \'bar\'" class="btn" ng-class="{\'btn-default\': vm.chartType != \'line\', \'btn-primary\': vm.chartType == \'bar\'}">Bars</a>\n </div>\n </div>\n <div class="row" ng-if="!vm.loader">\n <div class="col-xs-12">\n <canvas ng-if="vm.chartType === \'line\'" id="line" class="chart chart-line" chart-data="vm.chart.data" chart-options="{datasetFill: false}"\n chart-labels="vm.chart.labels" chart-legend="false" chart-series="vm.chart.series">\n </canvas>\n <canvas ng-if="vm.chartType === \'bar\'" id="bar" class="chart chart-bar" chart-data="vm.chart.data"\n chart-labels="vm.chart.labels" chart-legend="false" chart-series="vm.chart.series">\n </canvas>\n <!-- <pre>{{vm.chartMeters | json}}</pre> -->\n </div>\n </div>\n <div class="row" ng-if="!vm.loader">\n <div class="col-xs-12">\n <a ng-click="vm.removeFromChart(meter)" class="btn btn-chart" ng-style="{\'background-color\': vm.chartColors[$index]}" ng-repeat="meter in vm.chartMeters">\n {{meter.resource_name || meter.resource_id}}\n </a>\n </div>\n </div>\n</section>\n<section ng-if="!vm.loader && vm.error">\n <div class="alert alert-danger">\n {{vm.error}}\n </div>\n</section>'),e.put("templates/ceilometer-stats.tpl.html",'<div ng-show="vm.loader" class="loader">Loading</div>\n\n<section ng-if="!vm.loader && !vm.error">\n\n <div class="alert alert-danger" ng-if="vm.stats.length == 0">\n No result\n </div> \n\n <table class="table" ng-if="vm.stats.length > 0">\n <tr>\n <th>\n <a ng-click="order = \'category\'">Type:</a>\n </th>\n <th>\n <a ng-click="order = \'resource_name\'">Resource:</a>\n </th>\n <th>\n <a ng-click="order = \'meter\'">Meter:</a>\n </th>\n <th>\n Unit:\n </th>\n <th>\n Value:\n </th>\n </tr>\n <!-- <tr>\n <td>\n <input type="text" ng-model="query.category">\n </td>\n <td>\n <input type="text" ng-model="query.resource_name">\n </td>\n <td>\n <input type="text" ng-model="query.meter">\n </td>\n <td>\n <input type="text" ng-model="query.unit">\n </td>\n <td>\n <input type="text" ng-model="query.value">\n </td>\n </tr> -->\n <tr ng-repeat="item in vm.stats | orderBy:order">\n <td>{{item.category}}</td>\n <td>{{item.resource_name}}</td>\n <td>{{item.meter}}</td>\n <td>{{item.unit}}</td>\n <td>{{item.value}}</td>\n </tr>\n </table>\n</section>\n\n<section ng-if="!vm.loader && vm.error">\n <div class="alert alert-danger">\n {{vm.error}}\n </div>\n</section>\n')}]),angular.module("xos.ceilometerDashboard").run(["$location",function(e){e.path("/")}]),angular.bootstrap(angular.element("#xosCeilometerDashboard"),["xos.ceilometerDashboard"]);
\ No newline at end of file
+"use strict";angular.module("xos.ceilometerDashboard",["ngResource","ngCookies","ngLodash","ui.router","xos.helpers","ngAnimate","chart.js","ui.bootstrap.accordion"]).config(["$stateProvider","$urlRouterProvider",function(e,t){e.state("ceilometerDashboard",{url:"/",template:"<ceilometer-dashboard></ceilometer-dashboard>"}).state("samples",{url:"/:name/:tenant/samples",template:"<ceilometer-samples></ceilometer-samples>"}),t.otherwise("/")}]).config(["$httpProvider",function(e){e.interceptors.push("NoHyperlinks")}]).run(["$rootScope",function(e){e.stateName="ceilometerDashboard",e.$on("$stateChangeStart",function(t,n){e.stateName=n.name})}]).service("Ceilometer",["$http","$q","lodash",function(e,t,n){this.getMappings=function(){var n=t.defer();return e.get("/xoslib/xos-slice-service-mapping/").then(function(e){n.resolve(e.data)})["catch"](function(e){n.reject(e)}),n.promise},this.getMeters=function(n){var s=t.defer();return e.get("/xoslib/meters/",{cache:!0,params:n}).then(function(e){s.resolve(e.data)})["catch"](function(e){s.reject(e)}),s.promise},this.getSamples=function(n,s){var a=t.defer();return e.get("/xoslib/metersamples/",{params:{meter:n,tenant:s}}).then(function(e){a.resolve(e.data)})["catch"](function(e){a.reject(e)}),a.promise},this.getStats=function(n){var s=t.defer();return e.get("/xoslib/meterstatistics/",{cache:!0,params:n}).then(function(e){s.resolve(e.data)})["catch"](function(e){s.reject(e)}),s.promise},this.selectedService=null,this.selectedSlice=null,this.selectedResource=null}]).directive("ceilometerDashboard",["lodash",function(e){return{restrict:"E",scope:{},bindToController:!0,controllerAs:"vm",templateUrl:"templates/ceilometer-dashboard.tpl.html",controller:["Ceilometer",function(t){var n=this;this.showStats=!1,this.accordion={open:{}},this.openPanels=function(){t.selectedService&&(n.accordion.open[t.selectedService]=!0,t.selectedSlice&&(n.loadSliceMeter(t.selectedSlice,t.selectedService),n.selectedSlice=t.selectedSlice,t.selectedResource&&(n.selectedResource=t.selectedResource)))},this.loadMappings=function(){n.loader=!0,t.getMappings().then(function(e){n.services=e,n.openPanels()})["catch"](function(e){n.error=e.data&&e.data.detail?e.data.detail:"An Error occurred. Please try again later."})["finally"](function(){n.loader=!1})},this.loadMappings(),this.loadSliceMeter=function(s,a){t.selectedSlice=null,t.selectedService=null,t.selectedResources=null,n.loader=!0,n.selectedSlice=s.slice,n.selectedTenant=s.project_id,t.selectedSlice=s,t.selectedService=a,t.getMeters({tenant:s.project_id}).then(function(s){n.selectedResources=e.groupBy(s,"resource_name"),t.selectedResource&&(n.selectedMeters=n.selectedResources[t.selectedResource])})["catch"](function(e){n.error=e.data&&e.data.detail?e.data.detail:"An Error occurred. Please try again later."})["finally"](function(){n.loader=!1})},this.selectedMeters=null,this.selectMeters=function(e,s){n.selectedMeters=e,t.selectedResource=s,n.selectedResource=s}}]}}]).directive("ceilometerSamples",["lodash","$stateParams",function(e,t){return{restrict:"E",scope:{},bindToController:!0,controllerAs:"vm",templateUrl:"templates/ceilometer-samples.tpl.html",controller:["Ceilometer",function(n){var s=this;if(this.chartColors=["#286090","#F7464A","#46BFBD","#FDB45C","#97BBCD","#4D5360","#8c4f9f"],this.chart={series:[],labels:[],data:[]},Chart.defaults.global.colours=this.chartColors,this.chartType="line",!t.name||!t.tenant)throw new Error("Missing Name and Tenant Params!");this.name=t.name,this.tenant=t.tenant,this.getLabels=function(e){return e.reduce(function(e,t){var n=new Date(t.timestamp);return e.push(n.getHours()+":"+((n.getMinutes()<10?"0":"")+n.getMinutes())+":"+n.getSeconds()),e},[])},this.getData=function(e){return e.reduce(function(e,t){return e.push(t.volume),e},[])},this.chartMeters=[],this.addMeterToChart=function(t){s.chart.labels=s.getLabels(e.sortBy(s.samplesList[t],"timestamp")),s.chart.series.push(t),s.chart.data.push(s.getData(e.sortBy(s.samplesList[t],"timestamp"))),s.chartMeters.push(s.samplesList[t][0]),e.remove(s.sampleLabels,{id:t})},this.removeFromChart=function(t){s.chart.data.splice(s.chart.series.indexOf(t.project_id),1),s.chart.series.splice(s.chart.series.indexOf(t.project_id),1),s.chartMeters.splice(e.findIndex(s.chartMeters,{project_id:t.project_id}),1),s.sampleLabels.push({id:t.project_id,name:t.resource_name||t.project_id})},this.formatSamplesLabels=function(t){return e.uniq(t,"project_id").reduce(function(e,t){return e.push({id:t.project_id,name:t.resource_name||t.project_id}),e},[])},this.showSamples=function(){s.loader=!0,n.getSamples(s.name).then(function(t){s.samplesList=e.groupBy(t,"project_id"),s.sampleLabels=s.formatSamplesLabels(t),s.addMeterToChart(s.tenant)})["catch"](function(e){s.error=e.data.detail})["finally"](function(){s.loader=!1})},this.showSamples()}]}}]).directive("ceilometerStats",function(){return{restrict:"E",scope:{name:"=name",tenant:"=tenant"},bindToController:!0,controllerAs:"vm",templateUrl:"templates/ceilometer-stats.tpl.html",controller:["$scope","Ceilometer",function(e,t){var n=this;this.getStats=function(e){n.loader=!0,t.getStats({tenant:e}).then(function(e){n.stats=e})["catch"](function(e){n.error=e.data})["finally"](function(){n.loader=!1})},e.$watch(function(){return n.name},function(e){e&&n.getStats(n.tenant)})}]}}),angular.module("xos.ceilometerDashboard").run(["$templateCache",function(e){e.put("templates/accordion-group.html",'<div class="panel {{panelClass || \'panel-default\'}}">\n <div class="panel-heading" ng-keypress="toggleOpen($event)">\n <h3>\n <a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading"><span ng-class="{\'text-muted\': isDisabled}">{{heading}}</span></a>\n </h3>\n </div>\n <div class="panel-collapse collapse" uib-collapse="!isOpen">\n <div class="panel-body" ng-transclude></div>\n </div>\n</div>\n'),e.put("templates/accordion.html",'<div class="panel-group" ng-transclude></div>'),e.put("templates/ceilometer-dashboard.tpl.html",'<div class="row">\n <div class="col-sm-10">\n <h1>XOS Monitoring Statistics</h1>\n </div>\n <div class="col-xs-2 text-right">\n <a href="" class="btn btn-default" \n ng-show="vm.selectedSlice && !vm.showStats"\n ng-click="vm.showStats = true">\n <i class="glyphicon glyphicon-transfer"></i>\n </a>\n <a href="" class="btn btn-default" \n ng-show="vm.selectedSlice && vm.showStats"\n ng-click="vm.showStats = false">\n <i class="glyphicon glyphicon-transfer"></i>\n </a>\n </div>\n</div>\n\n<div class="row" ng-show="vm.loader">\n <div class="col-xs-12">\n <div class="loader">Loading</div>\n </div>\n</div>\n\n<section ng-hide="vm.loader" ng-class="{animate: !vm.loader}">\n <div class="row">\n <div class="col-sm-3 service-list">\n <h3>XOS Service: </h3>\n <uib-accordion close-others="true" template-url="templates/accordion.html">\n <uib-accordion-group\n ng-repeat="service in vm.services | orderBy:\'-service\'"\n template-url="templates/accordion-group.html"\n is-open="vm.accordion.open[service.service]"\n heading="{{service.service}}">\n <h4>Slices:</h4>\n <a ng-repeat="slice in service.slices" \n ng-class="{active: slice.slice === vm.selectedSlice}"\n ng-click="vm.loadSliceMeter(slice, service.service)"\n href="#" class="list-group-item" >\n {{slice.slice}} <i class="glyphicon glyphicon-chevron-right pull-right"></i>\n </a>\n </uib-accordion-group>\n </uib-accordion>\n </div>\n <section class="side-container col-sm-9">\n <div class="row">\n <!-- STATS -->\n <article ng-hide="!vm.showStats" class="stats animate-slide-left">\n <div class="col-xs-12">\n <div class="list-group">\n <div class="list-group-item">\n <h3>Stats</h3>\n </div>\n <div class="list-group-item">\n <ceilometer-stats ng-if="vm.selectedSlice" name="vm.selectedSlice" tenant="vm.selectedTenant"></ceilometer-stats>\n </div>\n </div>\n </div>\n </article>\n <!-- METERS -->\n <article ng-hide="vm.showStats" class="meters animate-slide-left">\n <div class="col-sm-4 animate-slide-left" ng-hide="!vm.selectedSlice">\n <div class="list-group">\n <div class="list-group-item">\n <h3>Resources</h3>\n </div>\n <a href="#" \n ng-click="vm.selectMeters(meters, resource)" \n class="list-group-item" \n ng-repeat="(resource, meters) in vm.selectedResources" \n ng-class="{active: resource === vm.selectedResource}">\n {{resource}} <i class="glyphicon glyphicon-chevron-right pull-right"></i>\n </a>\n </div>\n </div>\n <div class="col-sm-8 animate-slide-left" ng-hide="!vm.selectedMeters">\n <div class="list-group">\n <div class="list-group-item">\n <h3>Meters</h3>\n </div>\n <div class="list-group-item">\n <div class="row">\n <div class="col-xs-6">\n <label>Name:</label>\n </div>\n <div class="col-xs-3">\n <label>Unit:</label>\n </div>\n <div class="col-xs-3"></div>\n </div>\n <div class="row" ng-repeat="meter in vm.selectedMeters" style="margin-bottom: 10px;">\n <div class="col-xs-6">\n {{meter.name}}\n </div>\n <div class="col-xs-3">\n {{meter.unit}}\n </div>\n <div class="col-xs-3">\n <a ui-sref="samples({name: meter.name, tenant: meter.project_id})" class="btn btn-primary">\n <i class="glyphicon glyphicon-search"></i>\n </a>\n </div>\n </div>\n </div>\n </div>\n </div>\n </article>\n </div>\n </section>\n </div>\n</section>\n<section ng-if="!vm.loader && vm.error">\n <div class="alert alert-danger">\n {{vm.error}}\n </div>\n</section>\n'),e.put("templates/ceilometer-samples.tpl.html",'<!-- <pre>{{ vm | json}}</pre> -->\n\n<div class="row">\n <div class="col-xs-10">\n <h1>{{vm.name | uppercase}}</h1>\n </div>\n <div class="col-xs-2">\n <a ui-sref="ceilometerDashboard" class="btn btn-primary pull-right">\n <i class="glyphicon glyphicon-arrow-left"></i> Back to list\n </a>\n </div>\n</div>\n<div class="row" ng-show="vm.loader">\n <div class="col-xs-12">\n <div class="loader">Loading</div>\n </div>\n</div>\n<section ng-if="!vm.loader && !vm.error">\n <div class="row">\n <form class="form-inline col-xs-8" ng-submit="vm.addMeterToChart(vm.addMeterValue)">\n <select ng-model="vm.addMeterValue" class="form-control" ng-options="resource.id as resource.name for resource in vm.sampleLabels"></select>\n <button class="btn btn-success"> \n <i class="glyphicon glyphicon-plus"></i> Add\n </button>\n </form>\n <div class="col-xs-4 text-right">\n <a ng-click="vm.chartType = \'line\'" class="btn" ng-class="{\'btn-default\': vm.chartType != \'bar\', \'btn-primary\': vm.chartType == \'line\'}">Lines</a>\n <a ng-click="vm.chartType = \'bar\'" class="btn" ng-class="{\'btn-default\': vm.chartType != \'line\', \'btn-primary\': vm.chartType == \'bar\'}">Bars</a>\n </div>\n </div>\n <div class="row" ng-if="!vm.loader">\n <div class="col-xs-12">\n <canvas ng-if="vm.chartType === \'line\'" id="line" class="chart chart-line" chart-data="vm.chart.data" chart-options="{datasetFill: false}"\n chart-labels="vm.chart.labels" chart-legend="false" chart-series="vm.chart.series">\n </canvas>\n <canvas ng-if="vm.chartType === \'bar\'" id="bar" class="chart chart-bar" chart-data="vm.chart.data"\n chart-labels="vm.chart.labels" chart-legend="false" chart-series="vm.chart.series">\n </canvas>\n <!-- <pre>{{vm.chartMeters | json}}</pre> -->\n </div>\n </div>\n <div class="row" ng-if="!vm.loader">\n <div class="col-xs-12">\n <a ng-click="vm.removeFromChart(meter)" class="btn btn-chart" ng-style="{\'background-color\': vm.chartColors[$index]}" ng-repeat="meter in vm.chartMeters">\n {{meter.resource_name || meter.resource_id}}\n </a>\n </div>\n </div>\n</section>\n<section ng-if="!vm.loader && vm.error">\n <div class="alert alert-danger">\n {{vm.error}}\n </div>\n</section>'),e.put("templates/ceilometer-stats.tpl.html",'<div ng-show="vm.loader" class="loader">Loading</div>\n\n<section ng-if="!vm.loader && !vm.error">\n\n <div class="alert alert-danger" ng-if="vm.stats.length == 0">\n No result\n </div> \n\n <table class="table" ng-if="vm.stats.length > 0">\n <tr>\n <th>\n <a ng-click="order = \'category\'">Type:</a>\n </th>\n <th>\n <a ng-click="order = \'resource_name\'">Resource:</a>\n </th>\n <th>\n <a ng-click="order = \'meter\'">Meter:</a>\n </th>\n <th>\n Unit:\n </th>\n <th>\n Value:\n </th>\n </tr>\n <!-- <tr>\n <td>\n <input type="text" ng-model="query.category">\n </td>\n <td>\n <input type="text" ng-model="query.resource_name">\n </td>\n <td>\n <input type="text" ng-model="query.meter">\n </td>\n <td>\n <input type="text" ng-model="query.unit">\n </td>\n <td>\n <input type="text" ng-model="query.value">\n </td>\n </tr> -->\n <tr ng-repeat="item in vm.stats | orderBy:order">\n <td>{{item.category}}</td>\n <td>{{item.resource_name}}</td>\n <td>{{item.meter}}</td>\n <td>{{item.unit}}</td>\n <td>{{item.value}}</td>\n </tr>\n </table>\n</section>\n\n<section ng-if="!vm.loader && vm.error">\n <div class="alert alert-danger">\n {{vm.error}}\n </div>\n</section>\n')}]),angular.module("xos.ceilometerDashboard").run(["$location",function(e){e.path("/")}]),angular.bootstrap(angular.element("#xosCeilometerDashboard"),["xos.ceilometerDashboard"]);
\ No newline at end of file