Intercepting 500 errors and switched samples to resource id, still to be tested
diff --git a/views/ngXosViews/ceilometerDashboard/env/default.js b/views/ngXosViews/ceilometerDashboard/env/default.js
index a829f62..c7a21c8 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://apt088.apt.emulab.net:9999/',
- xoscsrftoken: 'BunrrI2xqNYwNtCPes1ii7zJAFzgORlW',
- xossessionid: 'ysq87pq2kp0bvarsu2xkq2kcjy7u2mx1'
+ host: 'http://apt016.apt.emulab.net:9999/',
+ xoscsrftoken: 'g0NmwGn8LGsbgFINdvv634YFAVxfWR35',
+ xossessionid: 'fv9sduix69ow31gfn1nfqpppflo3ah5y'
};
diff --git a/views/ngXosViews/ceilometerDashboard/src/index.html b/views/ngXosViews/ceilometerDashboard/src/index.html
index 6363764..be59e4b 100644
--- a/views/ngXosViews/ceilometerDashboard/src/index.html
+++ b/views/ngXosViews/ceilometerDashboard/src/index.html
@@ -38,4 +38,8 @@
<script src="/api/ng-xos.js"></script>
<script src="/api/ng-hpcapi.js"></script>
<script src="/.tmp/main.js"></script>
+<script src="/.tmp/stats.directive.js"></script>
+<script src="/.tmp/samples.directive.js"></script>
+<script src="/.tmp/rest.js"></script>
+<script src="/.tmp/dashboard.directive.js"></script>
<!-- endinject -->
diff --git a/views/ngXosViews/ceilometerDashboard/src/js/dashboard.directive.js b/views/ngXosViews/ceilometerDashboard/src/js/dashboard.directive.js
new file mode 100644
index 0000000..8f8487d
--- /dev/null
+++ b/views/ngXosViews/ceilometerDashboard/src/js/dashboard.directive.js
@@ -0,0 +1,164 @@
+/**
+ * © OpenCORD
+ *
+ * Visit http://guide.xosproject.org/devguide/addview/ for more information
+ *
+ * Created by teone on 3/21/16.
+ */
+
+(function () {
+ 'use strict';
+
+ angular.module('xos.ceilometerDashboard')
+ .directive('ceilometerDashboard', function(lodash){
+ return {
+ restrict: 'E',
+ scope: {},
+ bindToController: true,
+ controllerAs: 'vm',
+ templateUrl: 'templates/ceilometer-dashboard.tpl.html',
+ controller: function(Ceilometer){
+
+ this.showStats = false;
+
+ // this open the accordion
+ this.accordion = {
+ open: {}
+ };
+
+ /**
+ * Open the active panel base on the service stored values
+ */
+ this.openPanels = () => {
+ if(Ceilometer.selectedService){
+ this.accordion.open[Ceilometer.selectedService] = true;
+ if(Ceilometer.selectedSlice){
+ this.loadSliceMeter(Ceilometer.selectedSlice, Ceilometer.selectedService);
+ this.selectedSlice = Ceilometer.selectedSlice;
+ if(Ceilometer.selectedResource){
+ this.selectedResource = Ceilometer.selectedResource;
+ }
+ }
+ }
+ };
+
+ /**
+ * Load the list of service and slices
+ */
+
+ this.loadMappings = () => {
+ this.loader = true;
+ Ceilometer.getMappings()
+ .then((services) => {
+
+ // rename thing in UI
+ services.map((service) => {
+ if(service.service === 'service_ONOS_vBNG'){
+ service.service = 'ONOS_FABRIC';
+ }
+ if(service.service === 'service_ONOS_vOLT'){
+ service.service = 'ONOS_CORD';
+ }
+
+ service.slices.map(s => {
+ if(s.slice === 'mysite_onos_volt'){
+ s.slice = 'ONOS_CORD';
+ }
+ if(s.slice === 'mysite_onos_vbng'){
+ s.slice = 'ONOS_FABRIC';
+ }
+ if(s.slice === 'mysite_vbng'){
+ s.slice = 'mysite_vRouter';
+ }
+ });
+
+ return service;
+ });
+ // end rename thing in UI
+
+ this.services = services;
+ this.openPanels();
+ })
+ .catch(err => {
+ this.error = (err.data && err.data.detail) ? err.data.detail : 'An Error occurred. Please try again later.';
+ })
+ .finally(() => {
+ this.loader = false;
+ });
+ };
+
+ this.loadMappings();
+
+ /**
+ * Load the list of a single slice
+ */
+
+ this.loadSliceMeter = (slice, service_name) => {
+
+ Ceilometer.selectedSlice = null;
+ Ceilometer.selectedService = null;
+ Ceilometer.selectedResources = null;
+
+ // visualization info
+ this.loader = true;
+ this.error = null;
+ this.ceilometerError = null;
+
+ Ceilometer.getMeters({tenant: slice.project_id})
+ .then((sliceMeters) => {
+ this.selectedSlice = slice.slice;
+ this.selectedTenant = slice.project_id;
+
+ // store the status
+ Ceilometer.selectedSlice = slice;
+ Ceilometer.selectedService = service_name;
+
+ // rename things in UI
+ sliceMeters.map(m => {
+ m.resource_name = m.resource_name.replace('mysite_onos_vbng', 'ONOS_FABRIC');
+ m.resource_name = m.resource_name.replace('mysite_onos_volt', 'ONOS_CORD');
+ m.resource_name = m.resource_name.replace('mysite_vbng', 'mysite_vRouter');
+ return m;
+ });
+ // end rename things in UI
+
+ this.selectedResources = lodash.groupBy(sliceMeters, 'resource_name');
+
+ // hacky
+ if(Ceilometer.selectedResource){
+ this.selectedMeters = this.selectedResources[Ceilometer.selectedResource];
+ }
+ })
+ .catch(err => {
+
+ // this means that ceilometer is not yet ready
+ if(err.status === 503){
+ return this.ceilometerError = err.data.detail.specific_error;
+ }
+
+ this.error = (err.data && err.data.detail && err.data.detail.specific_error) ? err.data.detail.specific_error : 'An Error occurred. Please try again later.';
+ })
+ .finally(() => {
+ this.loader = false;
+ });
+ };
+
+ /**
+ * Select Meters for a resource
+ *
+ * @param Array meters The list of selected resources
+ * @returns void
+ */
+ this.selectedMeters = null;
+ this.selectMeters = (meters, resource) => {
+ this.selectedMeters = meters;
+
+ Ceilometer.selectedResource = resource;
+ this.selectedResource = resource;
+ }
+
+ }
+ };
+ })
+})();
+
diff --git a/views/ngXosViews/ceilometerDashboard/src/js/main.js b/views/ngXosViews/ceilometerDashboard/src/js/main.js
index 4023396..26cdcbc 100644
--- a/views/ngXosViews/ceilometerDashboard/src/js/main.js
+++ b/views/ngXosViews/ceilometerDashboard/src/js/main.js
@@ -30,410 +30,4 @@
$rootScope.$on('$stateChangeStart', (event, toState) => {
$rootScope.stateName = toState.name;
})
-})
-.service('Ceilometer', function($http, $q){
-
- this.getMappings = () => {
- let deferred = $q.defer();
-
- $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)
- })
- .catch((e) => {
- deferred.reject(e);
- });
-
- return deferred.promise;
- }
-
- this.getSamples = (name, tenant) => {
- let deferred = $q.defer();
-
- $http.get(`/xoslib/metersamples/`, {params: {meter: name, tenant: tenant}})
- .then((res) => {
- deferred.resolve(res.data)
- })
- .catch((e) => {
- deferred.reject(e);
- });
-
- return deferred.promise;
- }
-
- this.getStats = (options) => {
- let deferred = $q.defer();
-
- $http.get('/xoslib/meterstatistics/', {cache: true, params: options})
- // $http.get('../stats_mock.son', {cache: true})
- .then((res) => {
- deferred.resolve(res.data);
- })
- .catch((e) => {
- deferred.reject(e);
- });
-
- return deferred.promise;
- };
-
- // hold dashboard status (opened service, slice, resource)
- this.selectedService = null;
- this.selectedSlice = null;
- this.selectedResource = null;
-})
-.directive('ceilometerDashboard', function(lodash){
- return {
- restrict: 'E',
- scope: {},
- bindToController: true,
- controllerAs: 'vm',
- templateUrl: 'templates/ceilometer-dashboard.tpl.html',
- controller: function(Ceilometer){
-
- this.showStats = false;
-
- // this open the accordion
- this.accordion = {
- open: {}
- };
-
- /**
- * Open the active panel base on the service stored values
- */
- this.openPanels = () => {
- if(Ceilometer.selectedService){
- this.accordion.open[Ceilometer.selectedService] = true;
- if(Ceilometer.selectedSlice){
- this.loadSliceMeter(Ceilometer.selectedSlice, Ceilometer.selectedService);
- this.selectedSlice = Ceilometer.selectedSlice;
- if(Ceilometer.selectedResource){
- this.selectedResource = Ceilometer.selectedResource;
- }
- }
- }
- }
-
- /**
- * Load the list of service and slices
- */
-
- this.loadMappings = () => {
- this.loader = true;
- Ceilometer.getMappings()
- .then((services) => {
-
- // rename thing in UI
- services.map((service) => {
- if(service.service === 'service_ONOS_vBNG'){
- service.service = 'ONOS_FABRIC';
- }
- if(service.service === 'service_ONOS_vOLT'){
- service.service = 'ONOS_CORD';
- }
-
- service.slices.map(s => {
- if(s.slice === 'mysite_onos_volt'){
- s.slice = 'ONOS_CORD';
- }
- if(s.slice === 'mysite_onos_vbng'){
- s.slice = 'ONOS_FABRIC';
- }
- if(s.slice === 'mysite_vbng'){
- s.slice = 'mysite_vRouter';
- }
- });
-
- return service;
- });
- // end rename thing in UI
-
- this.services = services;
- this.openPanels();
- })
- .catch(err => {
- this.error = (err.data && err.data.detail) ? err.data.detail : 'An Error occurred. Please try again later.';
- })
- .finally(() => {
- this.loader = false;
- });
- };
-
- this.loadMappings();
-
- /**
- * Load the list of a single slice
- */
-
- this.loadSliceMeter = (slice, service_name) => {
-
- Ceilometer.selectedSlice = null;
- Ceilometer.selectedService = null;
- Ceilometer.selectedResources = null;
-
- // visualization info
- this.loader = true;
- this.error = null;
- this.ceilometerError = null;
-
- Ceilometer.getMeters({tenant: slice.project_id})
- .then((sliceMeters) => {
- this.selectedSlice = slice.slice;
- this.selectedTenant = slice.project_id;
-
- // store the status
- Ceilometer.selectedSlice = slice;
- Ceilometer.selectedService = service_name;
-
- // rename things in UI
- sliceMeters.map(m => {
- m.resource_name = m.resource_name.replace('mysite_onos_vbng', 'ONOS_FABRIC');
- m.resource_name = m.resource_name.replace('mysite_onos_volt', 'ONOS_CORD');
- m.resource_name = m.resource_name.replace('mysite_vbng', 'mysite_vRouter');
- return m;
- });
- // end rename things in UI
-
- this.selectedResources = lodash.groupBy(sliceMeters, 'resource_name');
-
- // hacky
- if(Ceilometer.selectedResource){
- this.selectedMeters = this.selectedResources[Ceilometer.selectedResource];
- }
- })
- .catch(err => {
-
- // this means that ceilometer is not yet ready
- if(err.status === 503){
- return this.ceilometerError = err.data.detail.specific_error;
- }
-
- this.error = (err.data && err.data.detail.specific_error) ? err.data.detail.specific_error : 'An Error occurred. Please try again later.';
- })
- .finally(() => {
- this.loader = false;
- });
- };
-
- /**
- * Select Meters for a resource
- *
- * @param Array meters The list of selected resources
- * @returns void
- */
- this.selectedMeters = null;
- this.selectMeters = (meters, resource) => {
- this.selectedMeters = meters;
-
- Ceilometer.selectedResource = resource;
- this.selectedResource = resource;
- }
-
- }
- };
-})
-.directive('ceilometerSamples', function(lodash, $stateParams){
- return {
- restrict: 'E',
- scope: {},
- bindToController: true,
- controllerAs: 'vm',
- templateUrl: 'templates/ceilometer-samples.tpl.html',
- controller: function(Ceilometer) {
-
- // console.log(Ceilometer.selectResource);
-
- this.chartColors = [
- '#286090',
- '#F7464A',
- '#46BFBD',
- '#FDB45C',
- '#97BBCD',
- '#4D5360',
- '#8c4f9f'
- ];
-
- this.chart = {
- series: [],
- labels: [],
- data: []
- }
-
- Chart.defaults.global.colours = this.chartColors;
-
- this.chartType = 'line';
-
- if($stateParams.name && $stateParams.tenant){
- this.name = $stateParams.name;
- this.tenant = $stateParams.tenant;
- // TODO rename tenant in project_id
- }
- else{
- throw new Error('Missing Name and Tenant Params!');
- }
-
- /**
- * Goes trough the array and format date to be used as labels
- *
- * @param Array data
- * @returns Array a list of labels
- */
-
- this.getLabels = (data) => {
- return data.reduce((list, item) => {
- let date = new Date(item.timestamp);
- list.push(`${date.getHours()}:${(date.getMinutes()<10?'0':'') + date.getMinutes()}:${date.getSeconds()}`);
- return list;
- }, []);
- };
-
- /**
- * Goes trough the array and return a flat array of values
- *
- * @param Array data
- * @returns Array a list of values
- */
-
- this.getData = (data) => {
- return data.reduce((list, item) => {
- list.push(item.volume);
- return list;
- }, []);
- }
-
- /**
- * Add a samples to the chart
- *
- * @param string resource_id
- */
- this.chartMeters = [];
- this.addMeterToChart = (project_id) => {
- this.chart['labels'] = this.getLabels(lodash.sortBy(this.samplesList[project_id], 'timestamp'));
- this.chart['series'].push(project_id);
- this.chart['data'].push(this.getData(lodash.sortBy(this.samplesList[project_id], 'timestamp')));
- this.chartMeters.push(this.samplesList[project_id][0]); //use the 0 as are all samples for the same resource and I need the name
- lodash.remove(this.sampleLabels, {id: project_id});
- }
-
- this.removeFromChart = (meter) => {
- this.chart.data.splice(this.chart.series.indexOf(meter.project_id), 1);
- this.chart.series.splice(this.chart.series.indexOf(meter.project_id), 1);
- this.chartMeters.splice(lodash.findIndex(this.chartMeters, {project_id: meter.project_id}), 1);
- this.sampleLabels.push({
- id: meter.project_id,
- name: meter.resource_name || meter.project_id
- })
- };
-
- /**
- * Format samples to create a list of labels and ids
- */
-
- this.formatSamplesLabels = (samples) => {
-
- return lodash.uniq(samples, 'project_id')
- .reduce((labels, item) => {
- labels.push({
- id: item.project_id,
- name: item.resource_name || item.project_id
- });
-
- return labels;
- }, []);
- }
-
-
- /**
- * Load the samples and format data
- */
-
- this.showSamples = () => {
- this.loader = true;
- // Ceilometer.getSamples(this.name, this.tenant) //fetch one
- Ceilometer.getSamples(this.name) //fetch all
- .then(res => {
-
- // rename things in UI
- res.map(m => {
- m.resource_name = m.resource_name.replace('mysite_onos_vbng', 'ONOS_FABRIC');
- m.resource_name = m.resource_name.replace('mysite_onos_volt', 'ONOS_CORD');
- m.resource_name = m.resource_name.replace('mysite_vbng', 'mysite_vRouter');
- return m;
- });
- // end rename things in UI
-
- // setup data for visualization
- this.samplesList = lodash.groupBy(res, 'project_id');
- this.sampleLabels = this.formatSamplesLabels(res);
-
- // add current meter to chart
- this.addMeterToChart(this.tenant);
-
- })
- .catch(err => {
- this.error = err.data.detail;
- })
- .finally(() => {
- this.loader = false;
- });
- };
-
- this.showSamples();
- }
- }
-})
- // NOTE reading this on demand for a single
-.directive('ceilometerStats', function(){
- return {
- restrict: 'E',
- scope: {
- name: '=name',
- tenant: '=tenant'
- },
- bindToController: true,
- controllerAs: 'vm',
- templateUrl: 'templates/ceilometer-stats.tpl.html',
- controller: function($scope, Ceilometer) {
-
- this.getStats = (tenant) => {
- this.loader = true;
- Ceilometer.getStats({tenant: tenant})
- .then(res => {
- res.map(m => {
- m.resource_name = m.resource_name.replace('mysite_onos_vbng', 'ONOS_FABRIC');
- m.resource_name = m.resource_name.replace('mysite_onos_volt', 'ONOS_CORD');
- m.resource_name = m.resource_name.replace('mysite_vbng', 'mysite_vRouter');
- return m;
- });
- this.stats = res;
- })
- .catch(err => {
- this.error = err.data;
- })
- .finally(() => {
- this.loader = false;
- });
- };
-
- $scope.$watch(() => this.name, (val) => {
- if(val){
- this.getStats(this.tenant);
- }
- });
- }
- }
-});
\ No newline at end of file
+});
diff --git a/views/ngXosViews/ceilometerDashboard/src/js/rest.js b/views/ngXosViews/ceilometerDashboard/src/js/rest.js
new file mode 100644
index 0000000..24737c3
--- /dev/null
+++ b/views/ngXosViews/ceilometerDashboard/src/js/rest.js
@@ -0,0 +1,79 @@
+/**
+ * © OpenCORD
+ *
+ * Visit http://guide.xosproject.org/devguide/addview/ for more information
+ *
+ * Created by teone on 3/21/16.
+ */
+
+(function () {
+ 'use strict';
+
+ angular.module('xos.ceilometerDashboard')
+ .service('Ceilometer', function($http, $q){
+
+ this.getMappings = () => {
+ let deferred = $q.defer();
+
+ $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)
+ })
+ .catch((e) => {
+ deferred.reject(e);
+ });
+
+ return deferred.promise;
+ };
+
+ this.getSamples = (name, tenant) => {
+ let deferred = $q.defer();
+
+ $http.get(`/xoslib/metersamples/`, {params: {meter: name, tenant: tenant}})
+ .then((res) => {
+ deferred.resolve(res.data)
+ })
+ .catch((e) => {
+ deferred.reject(e);
+ });
+
+ return deferred.promise;
+ };
+
+ this.getStats = (options) => {
+ let deferred = $q.defer();
+
+ $http.get('/xoslib/meterstatistics/', {cache: true, params: options})
+ // $http.get('../stats_mock.son', {cache: true})
+ .then((res) => {
+ deferred.resolve(res.data);
+ })
+ .catch((e) => {
+ deferred.reject(e);
+ });
+
+ return deferred.promise;
+ };
+
+ // hold dashboard status (opened service, slice, resource)
+ this.selectedService = null;
+ this.selectedSlice = null;
+ this.selectedResource = null;
+ });
+})();
+
diff --git a/views/ngXosViews/ceilometerDashboard/src/js/samples.directive.js b/views/ngXosViews/ceilometerDashboard/src/js/samples.directive.js
new file mode 100644
index 0000000..1bcb838
--- /dev/null
+++ b/views/ngXosViews/ceilometerDashboard/src/js/samples.directive.js
@@ -0,0 +1,164 @@
+/**
+ * © OpenCORD
+ *
+ * Visit http://guide.xosproject.org/devguide/addview/ for more information
+ *
+ * Created by teone on 3/21/16.
+ */
+
+(function () {
+ 'use strict';
+
+ angular.module('xos.ceilometerDashboard')
+ .directive('ceilometerSamples', function(lodash, $stateParams){
+ return {
+ restrict: 'E',
+ scope: {},
+ bindToController: true,
+ controllerAs: 'vm',
+ templateUrl: 'templates/ceilometer-samples.tpl.html',
+ controller: function(Ceilometer) {
+
+ // console.log(Ceilometer.selectResource);
+
+ this.chartColors = [
+ '#286090',
+ '#F7464A',
+ '#46BFBD',
+ '#FDB45C',
+ '#97BBCD',
+ '#4D5360',
+ '#8c4f9f'
+ ];
+
+ this.chart = {
+ series: [],
+ labels: [],
+ data: []
+ }
+
+ Chart.defaults.global.colours = this.chartColors;
+
+ this.chartType = 'line';
+
+ if($stateParams.name && $stateParams.tenant){
+ this.name = $stateParams.name;
+ this.tenant = $stateParams.tenant;
+ // TODO rename tenant in project_id
+ }
+ else{
+ throw new Error('Missing Name and Tenant Params!');
+ }
+
+ /**
+ * Goes trough the array and format date to be used as labels
+ *
+ * @param Array data
+ * @returns Array a list of labels
+ */
+
+ this.getLabels = (data) => {
+ return data.reduce((list, item) => {
+ let date = new Date(item.timestamp);
+ list.push(`${date.getHours()}:${(date.getMinutes()<10?'0':'') + date.getMinutes()}:${date.getSeconds()}`);
+ return list;
+ }, []);
+ };
+
+ /**
+ * Goes trough the array and return a flat array of values
+ *
+ * @param Array data
+ * @returns Array a list of values
+ */
+
+ this.getData = (data) => {
+ return data.reduce((list, item) => {
+ list.push(item.volume);
+ return list;
+ }, []);
+ }
+
+ /**
+ * Add a samples to the chart
+ *
+ * @param string resource_id
+ */
+ this.chartMeters = [];
+ this.addMeterToChart = (resource_id) => {
+ this.chart['labels'] = this.getLabels(lodash.sortBy(this.samplesList[resource_id], 'timestamp'));
+ this.chart['series'].push(resource_id);
+ this.chart['data'].push(this.getData(lodash.sortBy(this.samplesList[resource_id], 'timestamp')));
+ this.chartMeters.push(this.samplesList[resource_id][0]); //use the 0 as are all samples for the same resource and I need the name
+ lodash.remove(this.sampleLabels, {id: resource_id});
+ }
+
+ this.removeFromChart = (meter) => {
+ this.chart.data.splice(this.chart.series.indexOf(meter.resource_id), 1);
+ this.chart.series.splice(this.chart.series.indexOf(meter.resource_id), 1);
+ this.chartMeters.splice(lodash.findIndex(this.chartMeters, {resource_id: meter.resource_id}), 1);
+ this.sampleLabels.push({
+ id: meter.resource_id,
+ name: meter.resource_name || meter.resource_id
+ })
+ };
+
+ /**
+ * Format samples to create a list of labels and ids
+ */
+
+ this.formatSamplesLabels = (samples) => {
+
+ return lodash.uniq(samples, 'resource_id')
+ .reduce((labels, item) => {
+ labels.push({
+ id: item.resource_id,
+ name: item.resource_name || item.resource_id
+ });
+
+ return labels;
+ }, []);
+ }
+
+
+ /**
+ * Load the samples and format data
+ */
+
+ this.showSamples = () => {
+ this.loader = true;
+ // Ceilometer.getSamples(this.name, this.tenant) //fetch one
+ Ceilometer.getSamples(this.name) //fetch all
+ .then(res => {
+
+ // rename things in UI
+ res.map(m => {
+ m.resource_name = m.resource_name.replace('mysite_onos_vbng', 'ONOS_FABRIC');
+ m.resource_name = m.resource_name.replace('mysite_onos_volt', 'ONOS_CORD');
+ m.resource_name = m.resource_name.replace('mysite_vbng', 'mysite_vRouter');
+ return m;
+ });
+ // end rename things in UI
+
+ // setup data for visualization
+ this.samplesList = lodash.groupBy(res, 'resource_id');
+ this.sampleLabels = this.formatSamplesLabels(res);
+
+ // add current meter to chart
+ this.addMeterToChart(this.tenant);
+
+ })
+ .catch(err => {
+ this.error = err.data.detail;
+ })
+ .finally(() => {
+ this.loader = false;
+ });
+ };
+
+ this.showSamples();
+ }
+ }
+ });
+})();
+
diff --git a/views/ngXosViews/ceilometerDashboard/src/js/stats.directive.js b/views/ngXosViews/ceilometerDashboard/src/js/stats.directive.js
new file mode 100644
index 0000000..7f0b1f8
--- /dev/null
+++ b/views/ngXosViews/ceilometerDashboard/src/js/stats.directive.js
@@ -0,0 +1,54 @@
+/**
+ * © OpenCORD
+ *
+ * Visit http://guide.xosproject.org/devguide/addview/ for more information
+ *
+ * Created by teone on 3/21/16.
+ */
+
+(function () {
+ 'use strict';
+
+ angular.module('xos.ceilometerDashboard')
+ .directive('ceilometerStats', function(){
+ return {
+ restrict: 'E',
+ scope: {
+ name: '=name',
+ tenant: '=tenant'
+ },
+ bindToController: true,
+ controllerAs: 'vm',
+ templateUrl: 'templates/ceilometer-stats.tpl.html',
+ controller: function($scope, Ceilometer) {
+
+ this.getStats = (tenant) => {
+ this.loader = true;
+ Ceilometer.getStats({tenant: tenant})
+ .then(res => {
+ res.map(m => {
+ m.resource_name = m.resource_name.replace('mysite_onos_vbng', 'ONOS_FABRIC');
+ m.resource_name = m.resource_name.replace('mysite_onos_volt', 'ONOS_CORD');
+ m.resource_name = m.resource_name.replace('mysite_vbng', 'mysite_vRouter');
+ return m;
+ });
+ this.stats = res;
+ })
+ .catch(err => {
+ this.error = err.data;
+ })
+ .finally(() => {
+ this.loader = false;
+ });
+ };
+
+ $scope.$watch(() => this.name, (val) => {
+ if(val){
+ this.getStats(this.tenant);
+ }
+ });
+ }
+ }
+ });
+})();
+
diff --git a/views/ngXosViews/ceilometerDashboard/src/templates/ceilometer-dashboard.tpl.html b/views/ngXosViews/ceilometerDashboard/src/templates/ceilometer-dashboard.tpl.html
index a7a3b9e..2805dbd 100644
--- a/views/ngXosViews/ceilometerDashboard/src/templates/ceilometer-dashboard.tpl.html
+++ b/views/ngXosViews/ceilometerDashboard/src/templates/ceilometer-dashboard.tpl.html
@@ -99,7 +99,8 @@
{{meter.unit}}
</div>
<div class="col-xs-3">
- <a ui-sref="samples({name: meter.name, tenant: meter.project_id})" class="btn btn-primary">
+ <!-- tenant: meter.resource_id -->
+ <a ui-sref="samples({name: meter.name, tenant: meter.resource_id})" class="btn btn-primary">
<i class="glyphicon glyphicon-search"></i>
</a>
</div>