Merge branch 'master' of github.com:open-cloud/xos
diff --git a/views/ngXosLib/README.md b/views/ngXosLib/README.md
index 0166efd..cfce430 100644
--- a/views/ngXosLib/README.md
+++ b/views/ngXosLib/README.md
@@ -51,6 +51,8 @@
>_NOTE: for the API related service, check documentation in [Apigen](#apigen) section._
+When some changes are applied to this common library it should be rebuilt with: `npm run build`
+
### Yo Xos
We have created a [yeoman](http://yeoman.io/) generator to help you scaffolding views.
diff --git a/views/ngXosLib/karma.conf.js b/views/ngXosLib/karma.conf.js
index b75f95b..803ebb1 100644
--- a/views/ngXosLib/karma.conf.js
+++ b/views/ngXosLib/karma.conf.js
@@ -11,6 +11,8 @@
return path.relative(process.cwd(), file);
});
+console.log('bower', bowerComponents)
+
module.exports = function(config) {
/*eslint-enable*/
config.set({
@@ -26,9 +28,10 @@
// list of files / patterns to load in the browser
files: bowerComponents.concat([
- 'xosHelpers/src/*.module.js',
- 'xosHelpers/src/**/*.js',
- 'xosHelpers/spec/**/*.test.js',
+ //'./api/**/*.js',
+ './xosHelpers/src/*.module.js',
+ //'./xosHelpers/src/**/*.js',
+ './xosHelpers/spec/**/*.test.js'
]),
@@ -40,15 +43,24 @@
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
- '**/*.test.js': ['babel'],
- 'src/**/*.html': ['ng-html2js']
+ '**/*.test.js': ['babel']
},
- ngHtml2JsPreprocessor: {
- stripPrefix: 'src/', //strip the src path from template url (http://stackoverflow.com/questions/22869668/karma-unexpected-request-when-testing-angular-directive-even-with-ng-html2js)
- moduleName: 'templates' // define the template module name
+ babelPreprocessor: {
+ options: {
+ presets: ['es2015'],
+ sourceMap: 'inline'
+ },
+ filename: function (file) {
+ return file.originalPath;
+ },
},
+ //ngHtml2JsPreprocessor: {
+ // stripPrefix: 'src/', //strip the src path from template url (http://stackoverflow.com/questions/22869668/karma-unexpected-request-when-testing-angular-directive-even-with-ng-html2js)
+ // moduleName: 'templates' // define the template module name
+ //},
+
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
@@ -65,7 +77,7 @@
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
- logLevel: config.LOG_DEBUG,
+ logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
diff --git a/views/ngXosLib/package.json b/views/ngXosLib/package.json
index 9e13e28..8ae1e6e 100644
--- a/views/ngXosLib/package.json
+++ b/views/ngXosLib/package.json
@@ -8,14 +8,14 @@
"apigen": "node xos-resource-generator.js",
"swagger": "node xos-swagger-def.js",
"apidoc": "jsdoc api/ng-xos.js api/ng-xoslib.js api/ng-hpcapi.js -d api/docs",
- "build": "gulp vendor"
+ "build": "gulp vendor && gulp helpers"
},
"author": "Matteo Scandolo",
"license": "ISC",
"dependencies": {
"bluebird": "^3.0.5",
"chalk": "^1.1.1",
- "concat": "^1.0.0",
+ "concat": "^2.0.0",
"eslint": "^1.8.0",
"eslint-plugin-angular": "linkmesrl/eslint-plugin-angular",
"fetch-swagger-schema": "^0.1.2",
@@ -23,6 +23,7 @@
"swagger-js-codegen": "^1.1.5"
},
"devDependencies": {
+ "babel-preset-es2015": "^6.6.0",
"gulp": "^3.9.0",
"gulp-angular-filesort": "^1.1.1",
"gulp-concat": "^2.6.0",
diff --git a/views/ngXosLib/xosHelpers/spec/csrftoken.test.js b/views/ngXosLib/xosHelpers/spec/csrftoken.test.js
index e49c52b..60e8c63 100644
--- a/views/ngXosLib/xosHelpers/spec/csrftoken.test.js
+++ b/views/ngXosLib/xosHelpers/spec/csrftoken.test.js
@@ -1,22 +1,24 @@
'use strict';
-
describe('The xos.helper module', function(){
-
- var app, httpProvider;
+ var SetCSRFToken, httpProviderObj;
beforeEach(module('xos.helpers'));
- beforeEach(function(){
- module(function(_$httpProvider_){
- console.log('beforeEach');
- httpProvider = _$httpProvider_;
- });
- });
-
- it('should set SetCSRFToken interceptor', inject(function($http){
- console.log('httpProvider',httpProvider);
- expect(true).toBeTrue();
- // expect(httpProvider.interceptors).toContain('SetCSRFToken');
+ beforeEach(module(function(_$httpProvider_){
+ httpProviderObj = _$httpProvider_;
}));
+ beforeEach(angular.mock.inject(function(_SetCSRFToken_){
+ SetCSRFToken = _SetCSRFToken_;
+ }));
+
+ it('should exist', () => {
+ expect(SetCSRFToken).toBeDefined();
+ });
+
+ xit('should set SetCSRFToken interceptor', () => {
+ expect(httpProviderObj).toBeDefined();
+ expect(httpProviderObj.interceptors).toContain('SetCSRFToken');
+ });
+
});
\ No newline at end of file
diff --git a/views/ngXosLib/xosHelpers/src/services/csrfToken.interceptor.js b/views/ngXosLib/xosHelpers/src/services/csrfToken.interceptor.js
index 283e90d..f3a234e 100644
--- a/views/ngXosLib/xosHelpers/src/services/csrfToken.interceptor.js
+++ b/views/ngXosLib/xosHelpers/src/services/csrfToken.interceptor.js
@@ -1,6 +1,8 @@
(function() {
'use strict';
+ console.log('SetCSRFToken');
+
angular
.module('xos.helpers')
.factory('SetCSRFToken', setCSRFToken);
diff --git a/views/ngXosLib/xosHelpers/src/xosHelpers.module.js b/views/ngXosLib/xosHelpers/src/xosHelpers.module.js
index d5b53da..7c97de0 100644
--- a/views/ngXosLib/xosHelpers/src/xosHelpers.module.js
+++ b/views/ngXosLib/xosHelpers/src/xosHelpers.module.js
@@ -1,6 +1,6 @@
(function() {
'use strict';
-
+ console.log('XOS Helpers Module')
angular.module('bugSnag', []).factory('$exceptionHandler', function () {
return function (exception, cause) {
if( window.Bugsnag ){
@@ -18,11 +18,12 @@
'xos.xos',
'xos.hpcapi',
'xos.xoslib',
- 'bugSnag'
+ 'bugSnag',
])
.config(config);
- function config($httpProvider, $interpolateProvider, $resourceProvider) {
+ function config($httpProvider, $interpolateProvider, $resourceProvider) {
+ console.log('xos.helpers config')
$httpProvider.interceptors.push('SetCSRFToken');
$interpolateProvider.startSymbol('{$');
diff --git a/views/ngXosViews/ceilometerDashboard/env/default.js b/views/ngXosViews/ceilometerDashboard/env/default.js
index a829f62..a68a4ae 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://apt020.apt.emulab.net:9999/',
+ xoscsrftoken: 'g6cCHldtlqDm0BzoKHgPyP2KzGSCUFgW',
+ xossessionid: '5ofvr4o8pwyqsff1zbd9ca1wsqf023uy'
};
diff --git a/views/ngXosViews/ceilometerDashboard/karma.conf.js b/views/ngXosViews/ceilometerDashboard/karma.conf.js
index 1978cbd..cbc5a83 100644
--- a/views/ngXosViews/ceilometerDashboard/karma.conf.js
+++ b/views/ngXosViews/ceilometerDashboard/karma.conf.js
@@ -26,8 +26,10 @@
// list of files / patterns to load in the browser
files: bowerComponents.concat([
'src/css/**/*.css',
- '../../../xos/core/xoslib/static/js/xosApi.js',
+ '../../../xos/core/xoslib/static/js/vendor/ngXosVendor.js',
'../../../xos/core/xoslib/static/js/vendor/ngXosHelpers.js',
+ '../../../xos/core/xoslib/static/js/xosApi.js',
+ 'src/js/main.js',
'src/js/**/*.js',
'spec/**/*.mock.js',
'spec/**/*.test.js',
diff --git a/views/ngXosViews/ceilometerDashboard/spec/backend.mock.js b/views/ngXosViews/ceilometerDashboard/spec/backend.mock.js
index 86ed3d8..2908041 100644
--- a/views/ngXosViews/ceilometerDashboard/spec/backend.mock.js
+++ b/views/ngXosViews/ceilometerDashboard/spec/backend.mock.js
@@ -26,42 +26,42 @@
{
meter: 'cpu',
resource_name: 'fakeName',
- project_id: 'fakeTenant',
+ resource_id: 'fakeTenant',
timestamp: '2015-12-15T00:34:08',
volume: 110
},
{
meter: 'cpu',
resource_name: 'fakeName',
- project_id: 'fakeTenant',
+ resource_id: 'fakeTenant',
timestamp: '2015-12-15T00:44:08',
volume: 120
},
{
meter: 'cpu',
resource_name: 'anotherName',
- project_id: 'anotherTenant',
+ resource_id: 'anotherTenant',
timestamp: '2015-12-15T00:24:08',
volume: 210
},
{
meter: 'cpu',
resource_name: 'anotherName',
- project_id: 'anotherTenant',
+ resource_id: 'anotherTenant',
timestamp: '2015-12-15T00:34:08',
volume: 220
},
{
meter: 'cpu',
resource_name: 'anotherName',
- project_id: 'anotherTenant',
+ resource_id: 'anotherTenant',
timestamp: '2015-12-15T00:44:08',
volume: 230
},
{
meter: 'cpu',
resource_name: 'thirdName',
- project_id: 'thirdTenant',
+ resource_id: 'thirdTenant',
timestamp: '2015-12-15T00:44:08',
volume: 310
}
@@ -70,7 +70,7 @@
const mapping = [
{
service: 'service-a',
- slice: [
+ slices: [
{
project_id: 'id-a-1',
slice: 'slice-a-1'
@@ -83,7 +83,7 @@
},
{
service: 'service-b',
- slice: [
+ slices: [
{
project_id: 'id-b-1',
slice: 'slice-b-1'
diff --git a/views/ngXosViews/ceilometerDashboard/spec/ceilometer.test.js b/views/ngXosViews/ceilometerDashboard/spec/ceilometer.test.js
index cbd8ca0..933f892 100644
--- a/views/ngXosViews/ceilometerDashboard/spec/ceilometer.test.js
+++ b/views/ngXosViews/ceilometerDashboard/spec/ceilometer.test.js
@@ -21,31 +21,17 @@
httpBackend.flush();
}));
- xdescribe('when loading meters', () => {
- it('should group meters by services', () => {
- expect(Object.keys(vm.projects).length).toBe(2);
- });
-
- it('should group services by slices', () => {
- expect(Object.keys(vm.projects.service_2).length).toBe(2);
- });
-
- it('should group slices by resources', () => {
- 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);
+ expect(vm.services[0].slices.length).toBe(2);
+ expect(vm.services[1].slices.length).toBe(2);
});
});
describe('when a slice is selected', () => {
it('should load corresponding meters', () => {
- vm.loadSliceMeter(vm.services[0].slice[0]);
+ vm.loadSliceMeter(vm.services[0].slices[0]);
httpBackend.flush();
@@ -89,7 +75,7 @@
expect(vm.chart.data[0].length).toBe(2);
expect(vm.chart.data[0][0]).toBe(110);
expect(vm.chart.data[0][1]).toBe(120);
- expect(vm.chartMeters[0].project_id).toBe('fakeTenant')
+ expect(vm.chartMeters[0].resource_id).toBe('fakeTenant')
expect(vm.chartMeters[0].resource_name).toBe('fakeName')
});
@@ -100,7 +86,7 @@
expect(vm.chart.data[1][0]).toBe(210);
expect(vm.chart.data[1][1]).toBe(220);
expect(vm.chart.data[1][2]).toBe(230);
- expect(vm.chartMeters[1].project_id).toBe('anotherTenant')
+ expect(vm.chartMeters[1].resource_id).toBe('anotherTenant')
expect(vm.chartMeters[1].resource_name).toBe('anotherName')
});
@@ -112,7 +98,7 @@
expect(vm.chart.data[0][0]).toBe(210);
expect(vm.chart.data[0][1]).toBe(220);
expect(vm.chart.data[0][2]).toBe(230);
- expect(vm.chartMeters[0].project_id).toBe('anotherTenant')
+ expect(vm.chartMeters[0].resource_id).toBe('anotherTenant')
expect(vm.chartMeters[0].resource_name).toBe('anotherName')
});
@@ -120,10 +106,10 @@
it('should create an array of unique labels', () => {
// unique because every resource has multiple samples (time-series)
const samples = [
- {project_id: 1, resource_name: 'fakeName'},
- {project_id: 1, resource_name: 'fakeName'},
- {project_id: 2, resource_name: 'anotherName'},
- {project_id: 2, resource_name: 'anotherName'}
+ {resource_id: 1, resource_name: 'fakeName'},
+ {resource_id: 1, resource_name: 'fakeName'},
+ {resource_id: 2, resource_name: 'anotherName'},
+ {resource_id: 2, resource_name: 'anotherName'}
];
const result = vm.formatSamplesLabels(samples);
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..a1ae36a
--- /dev/null
+++ b/views/ngXosViews/ceilometerDashboard/src/js/dashboard.directive.js
@@ -0,0 +1,162 @@
+/**
+ * © 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..42b08e5
--- /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 resource_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>
diff --git a/views/ngXosViews/contentProvider/karma.conf.js b/views/ngXosViews/contentProvider/karma.conf.js
index 83d3f63..b4d5d33 100644
--- a/views/ngXosViews/contentProvider/karma.conf.js
+++ b/views/ngXosViews/contentProvider/karma.conf.js
@@ -26,8 +26,9 @@
// list of files / patterns to load in the browser
files: bowerComponents.concat([
- '../../static/js/xosApi.js',
- '../../static/js/vendor/ngXosHelpers.js',
+ '../../../xos/core/xoslib/static/js/vendor/ngXosVendor.js',
+ '../../../xos/core/xoslib/static/js/vendor/ngXosHelpers.js',
+ '../../../xos/core/xoslib/static/js/xosApi.js',
'src/js/**/*.js',
'spec/**/*.mock.js',
'spec/**/*.test.js',
diff --git a/views/ngXosViews/contentProvider/package.json b/views/ngXosViews/contentProvider/package.json
index 80d34f9..ee09c4c 100644
--- a/views/ngXosViews/contentProvider/package.json
+++ b/views/ngXosViews/contentProvider/package.json
@@ -21,25 +21,34 @@
"devDependencies": {
"browser-sync": "^2.9.11",
"del": "^2.0.2",
+ "eslint": "^1.8.0",
+ "eslint-plugin-angular": "linkmesrl/eslint-plugin-angular",
"gulp": "^3.9.0",
"gulp-angular-filesort": "^1.1.1",
"gulp-angular-templatecache": "^1.8.0",
"gulp-babel": "^5.3.0",
"gulp-concat": "^2.6.0",
+ "gulp-eslint": "^1.0.0",
"gulp-inject": "^3.0.0",
"gulp-minify-html": "^1.0.4",
+ "gulp-ng-annotate": "^1.1.0",
"gulp-rename": "^1.2.2",
"gulp-replace": "^0.5.4",
"gulp-uglify": "^1.4.2",
"http-proxy": "^1.12.0",
+ "jasmine-core": "^2.4.1",
+ "karma": "^0.13.22",
+ "karma-babel-preprocessor": "~5.2.2",
+ "karma-coverage": "^0.5.3",
+ "karma-jasmine": "~0.3.6",
+ "karma-mocha-reporter": "~1.1.1",
+ "karma-ng-html2js-preprocessor": "^0.2.0",
+ "karma-phantomjs-launcher": "~0.2.1",
+ "lodash": "^3.10.1",
+ "phantomjs": "^2.1.3",
"proxy-middleware": "^0.15.0",
"run-sequence": "^1.1.4",
"wiredep": "^3.0.0-beta",
- "wrench": "^1.5.8",
- "gulp-ng-annotate": "^1.1.0",
- "lodash": "^3.10.1",
- "eslint": "^1.8.0",
- "eslint-plugin-angular": "linkmesrl/eslint-plugin-angular",
- "gulp-eslint": "^1.0.0"
+ "wrench": "^1.5.8"
}
}
diff --git a/views/ngXosViews/contentProvider/spec/sample.test.js b/views/ngXosViews/contentProvider/spec/sample.test.js
deleted file mode 100644
index 177bc7d..0000000
--- a/views/ngXosViews/contentProvider/spec/sample.test.js
+++ /dev/null
@@ -1,37 +0,0 @@
-'use strict';
-
-describe('The User List', () => {
-
- var scope, element, isolatedScope, httpBackend;
-
- beforeEach(module('xos.contentProvider'));
- beforeEach(module('templates'));
-
- beforeEach(inject(function($httpBackend, $compile, $rootScope){
-
- httpBackend = $httpBackend;
- // Setting up mock request
- $httpBackend.expectGET('/xos/users/?no_hyperlinks=1').respond([
- {
- email: 'matteo.scandolo@link-me.it',
- firstname: 'Matteo',
- lastname: 'Scandolo'
- }
- ]);
-
- scope = $rootScope.$new();
- element = angular.element('<users-list></users-list>');
- $compile(element)(scope);
- scope.$digest();
- isolatedScope = element.isolateScope().vm;
- }));
-
- it('should load 1 users', () => {
- httpBackend.flush();
- expect(isolatedScope.users.length).toBe(1);
- expect(isolatedScope.users[0].email).toEqual('matteo.scandolo@link-me.it');
- expect(isolatedScope.users[0].firstname).toEqual('Matteo');
- expect(isolatedScope.users[0].lastname).toEqual('Scandolo');
- });
-
-});
\ No newline at end of file
diff --git a/xos/core/xoslib/static/js/vendor/ngXosHelpers.js b/xos/core/xoslib/static/js/vendor/ngXosHelpers.js
index 82a141e..69cbbf4 100644
--- a/xos/core/xoslib/static/js/vendor/ngXosHelpers.js
+++ b/xos/core/xoslib/static/js/vendor/ngXosHelpers.js
@@ -1 +1 @@
-!function(){"use strict";function e(e,n,o){e.interceptors.push("SetCSRFToken"),n.startSymbol("{$"),n.endSymbol("$}"),o.defaults.stripTrailingSlashes=!1}e.$inject=["$httpProvider","$interpolateProvider","$resourceProvider"],angular.module("bugSnag",[]).factory("$exceptionHandler",function(){return function(e,n){Bugsnag.notifyException(e,{diagnostics:{cause:n}})}}),angular.module("xos.helpers",["ngCookies","xos.xos","xos.hpcapi","xos.xoslib","bugSnag"]).config(e)}(),function(){"use strict";function e(){return{request:function(e){return-1===e.url.indexOf(".html")&&(e.url+="?no_hyperlinks=1"),e}}}angular.module("xos.helpers").factory("NoHyperlinks",e)}(),function(){"use strict";function e(e){return{request:function(n){return"GET"!==n.method&&(n.headers["X-CSRFToken"]=e.get("xoscsrftoken")),n}}}e.$inject=["$cookies"],angular.module("xos.helpers").factory("SetCSRFToken",e)}(),function(){"use strict";function e(e){return t||(t=new e({domain:""})),t}function n(e){return r||(r=new e({domain:""})),r}function o(e){return i||(i=new e({domain:""})),i}e.$inject=["xos"],n.$inject=["xoslib"],o.$inject=["hpcapi"],angular.module("xos.helpers").service("XosApi",e).service("XoslibApi",n).service("HpcApi",o);var t,r,i}();
\ No newline at end of file
+!function(){"use strict";function e(e,n,o){e.interceptors.push("SetCSRFToken"),n.startSymbol("{$"),n.endSymbol("$}"),o.defaults.stripTrailingSlashes=!1}e.$inject=["$httpProvider","$interpolateProvider","$resourceProvider"],angular.module("bugSnag",[]).factory("$exceptionHandler",function(){return function(e,n){window.Bugsnag?Bugsnag.notifyException(e,{diagnostics:{cause:n}}):console.error(e,n,e.stack)}}),angular.module("xos.helpers",["ngCookies","xos.xos","xos.hpcapi","xos.xoslib","bugSnag"]).config(e)}(),function(){"use strict";function e(){return{request:function(e){return-1===e.url.indexOf(".html")&&(e.url+="?no_hyperlinks=1"),e}}}angular.module("xos.helpers").factory("NoHyperlinks",e)}(),function(){"use strict";function e(e){return{request:function(n){return"GET"!==n.method&&(n.headers["X-CSRFToken"]=e.get("xoscsrftoken")),n}}}e.$inject=["$cookies"],angular.module("xos.helpers").factory("SetCSRFToken",e)}(),function(){"use strict";function e(e){return r||(r=new e({domain:""})),r}function n(e){return t||(t=new e({domain:""})),t}function o(e){return i||(i=new e({domain:""})),i}e.$inject=["xos"],n.$inject=["xoslib"],o.$inject=["hpcapi"],angular.module("xos.helpers").service("XosApi",e).service("XoslibApi",n).service("HpcApi",o);var r,t,i}();
\ No newline at end of file
diff --git a/xos/core/xoslib/static/js/xosCeilometerDashboard.js b/xos/core/xoslib/static/js/xosCeilometerDashboard.js
index 0b54c01..cc8b541 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",function(e,t){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 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.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){e.map(function(e){return"service_ONOS_vBNG"===e.service&&(e.service="ONOS_FABRIC"),"service_ONOS_vOLT"===e.service&&(e.service="ONOS_CORD"),e.slices.map(function(e){"mysite_onos_volt"===e.slice&&(e.slice="ONOS_CORD"),"mysite_onos_vbng"===e.slice&&(e.slice="ONOS_FABRIC"),"mysite_vbng"===e.slice&&(e.slice="mysite_vRouter")}),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,r){t.selectedSlice=null,t.selectedService=null,t.selectedResources=null,n.loader=!0,n.error=null,n.ceilometerError=null,t.getMeters({tenant:s.project_id}).then(function(a){n.selectedSlice=s.slice,n.selectedTenant=s.project_id,t.selectedSlice=s,t.selectedService=r,a.map(function(e){return e.resource_name=e.resource_name.replace("mysite_onos_vbng","ONOS_FABRIC"),e.resource_name=e.resource_name.replace("mysite_onos_volt","ONOS_CORD"),e.resource_name=e.resource_name.replace("mysite_vbng","mysite_vRouter"),e}),n.selectedResources=e.groupBy(a,"resource_name"),t.selectedResource&&(n.selectedMeters=n.selectedResources[t.selectedResource])})["catch"](function(e){return 503===e.status?n.ceilometerError=e.data.detail.specific_error:void(n.error=e.data&&e.data.detail.specific_error?e.data.detail.specific_error:"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){t.map(function(e){return e.resource_name=e.resource_name.replace("mysite_onos_vbng","ONOS_FABRIC"),e.resource_name=e.resource_name.replace("mysite_onos_volt","ONOS_CORD"),e.resource_name=e.resource_name.replace("mysite_vbng","mysite_vRouter"),e}),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){e.map(function(e){return e.resource_name=e.resource_name.replace("mysite_onos_vbng","ONOS_FABRIC"),e.resource_name=e.resource_name.replace("mysite_onos_volt","ONOS_CORD"),e.resource_name=e.resource_name.replace("mysite_vbng","mysite_vRouter"),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 <h5>\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 </h5>\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 <h3>XOS Monitoring Statistics</h3>\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 <h4>XOS Service: </h4>\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 <h5>Slices:</h5>\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 <h4>Stats</h4>\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="alert alert-danger" ng-show="vm.ceilometerError">\n {{vm.ceilometerError}}\n </div>\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 <h4>Resources</h4>\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 <h4>Meters</h4>\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\') ? order = \'-category\' : order = \'category\'">Type:</a>\n </th>\n <th>\n <a ng-click="(order == \'resource_name\') ? order = \'-resource_name\' : order = \'resource_name\'">Resource:</a>\n </th>\n <th>\n <a ng-click="(order == \'meter\') ? order = \'-meter\' : 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})}]),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 <h5>\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 </h5>\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 <h3>XOS Monitoring Statistics</h3>\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 <h4>XOS Service: </h4>\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 <h5>Slices:</h5>\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 <h4>Stats</h4>\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="alert alert-danger" ng-show="vm.ceilometerError">\n {{vm.ceilometerError}}\n </div>\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 <h4>Resources</h4>\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 <h4>Meters</h4>\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 <!-- tenant: meter.resource_id -->\n <a ui-sref="samples({name: meter.name, tenant: meter.resource_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\') ? order = \'-category\' : order = \'category\'">Type:</a>\n </th>\n <th>\n <a ng-click="(order == \'resource_name\') ? order = \'-resource_name\' : order = \'resource_name\'">Resource:</a>\n </th>\n <th>\n <a ng-click="(order == \'meter\') ? order = \'-meter\' : 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"]),function(){angular.module("xos.ceilometerDashboard").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){e.map(function(e){return e.resource_name=e.resource_name.replace("mysite_onos_vbng","ONOS_FABRIC"),e.resource_name=e.resource_name.replace("mysite_onos_volt","ONOS_CORD"),e.resource_name=e.resource_name.replace("mysite_vbng","mysite_vRouter"),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)})}]}})}(),function(){angular.module("xos.ceilometerDashboard").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.resource_id),1),s.chart.series.splice(s.chart.series.indexOf(t.resource_id),1),s.chartMeters.splice(e.findIndex(s.chartMeters,{resource_id:t.resource_id}),1),s.sampleLabels.push({id:t.resource_id,name:t.resource_name||t.resource_id})},this.formatSamplesLabels=function(t){return e.uniq(t,"resource_id").reduce(function(e,t){return e.push({id:t.resource_id,name:t.resource_name||t.resource_id}),e},[])},this.showSamples=function(){s.loader=!0,n.getSamples(s.name).then(function(t){t.map(function(e){return e.resource_name=e.resource_name.replace("mysite_onos_vbng","ONOS_FABRIC"),e.resource_name=e.resource_name.replace("mysite_onos_volt","ONOS_CORD"),e.resource_name=e.resource_name.replace("mysite_vbng","mysite_vRouter"),e}),s.samplesList=e.groupBy(t,"resource_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()}]}}])}(),function(){angular.module("xos.ceilometerDashboard").service("Ceilometer",["$http","$q",function(e,t){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 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}])}(),function(){angular.module("xos.ceilometerDashboard").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){e.map(function(e){return"service_ONOS_vBNG"===e.service&&(e.service="ONOS_FABRIC"),"service_ONOS_vOLT"===e.service&&(e.service="ONOS_CORD"),e.slices.map(function(e){"mysite_onos_volt"===e.slice&&(e.slice="ONOS_CORD"),"mysite_onos_vbng"===e.slice&&(e.slice="ONOS_FABRIC"),"mysite_vbng"===e.slice&&(e.slice="mysite_vRouter")}),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,r){t.selectedSlice=null,t.selectedService=null,t.selectedResources=null,n.loader=!0,n.error=null,n.ceilometerError=null,t.getMeters({tenant:s.project_id}).then(function(a){n.selectedSlice=s.slice,n.selectedTenant=s.project_id,t.selectedSlice=s,t.selectedService=r,a.map(function(e){return e.resource_name=e.resource_name.replace("mysite_onos_vbng","ONOS_FABRIC"),e.resource_name=e.resource_name.replace("mysite_onos_volt","ONOS_CORD"),e.resource_name=e.resource_name.replace("mysite_vbng","mysite_vRouter"),e}),n.selectedResources=e.groupBy(a,"resource_name"),t.selectedResource&&(n.selectedMeters=n.selectedResources[t.selectedResource])})["catch"](function(e){return 503===e.status?n.ceilometerError=e.data.detail.specific_error:void(n.error=e.data&&e.data.detail&&e.data.detail.specific_error?e.data.detail.specific_error:"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}}]}}])}();
\ No newline at end of file