Improved ceilometer dashboard performance
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>