Ask Your Question

Revision history [back]

click to hide/show revision 1
initial version

How to request the graph data in ceilometer through Angularjs as Launch Instance?

Launch instance is openstack-horizon is made in angularjs similarly I want to added angularjs for graph in ceilometer, please see the following figure. image description

For testing purpose I add following code in stabs.html dir: /horizon/openstack_dashboard/dashboards/admin/metering/templates/metering/stats.html

<div ng-controller="myCtrl">
    First Name: <input type="text" ng-model="firstName"><br>
    First Name: {{ firstName }}
</div>

And corresponding controller I defined in encloud-ceilometer.js new file

(function () {
  'use strict';
  var module = angular.module('hz.dashboard.ceilometer', [ 'ngSanitize' ]);
  module.controller('myCtrl', function($scope) {
    $scope.firstName = "John";
  });  
})();

encloud-ceilometer.js is new file added by me,like launch-instance.js. To add this file in openstack-horizon, I made the following changes, I following the same procedure as for launch instance.

1. I created the folder encloudangular inside the horion/openstack_dashboard/static/dashboard/encloudangular/encloud-ceilometer.js

2. Inside the encloudangular I create the file encloud.ceilometer.js

3. In _10_project.py(dir: horizon/openstack_dashboard/enabled/) file, To include the encloud.ceilometer.js, I added the following line 

#Ceilomenter is added by EncloudEn to make angularversion of ceilometer
CEILOMETER='dashboard/encloudangular/'

In the same file _10_project.py, inside ADD_JS_FILES, include the encloud.ceilometer.js

ADD_JS_FILES = [
    CEILOMETER + 'encloud-ceilometer.js',

4. Now include the new moduel 'hz.dashboard.ceilometer' in 
dashaboard.module.js( dir: horizon/openstack_dashboard/static/dashboard/
dashboard.module.js

_10_project.py

ADD_ANGULAR_MODULES = ['hz.dashboard']

LAUNCH_INST = 'dashboard/launch-instance/'
CEILOMETER='dashboard/encloudangular/'

dashboard.module.js

(function () {
 'use strict';
  var module = angular.module('hz.dashboard', [
    'hz.dashboard.launch-instance',
    'hz.dashboard.ceilometer',
    'hz.dashboard.workflow'
  ]);
  module.constant('dashboardBasePath', '/static/dashboard/');
})();

In dashboard.module.js I have added module hz.dashboard.ceilometer which I have create in encloud-ceilomter

But still I am not able to connect stats.html through 'hz.dashboard.ceilometer', Please help me on this. For testing purpose instacs.html, I am following this like

image description

How to request the graph data in ceilometer through Angularjs as Launch Instance?

Launch instance is openstack-horizon is made in angularjs similarly I want to added angularjs for graph in ceilometer, please see the following figure. image description

For testing purpose I add following code in stabs.html dir: /horizon/openstack_dashboard/dashboards/admin/metering/templates/metering/stats.html

<div ng-controller="myCtrl">
    First Name: <input type="text" ng-model="firstName"><br>
    First Name: {{ firstName }}
</div>

And corresponding controller I defined in encloud-ceilometer.js new file

(function () {
  'use strict';
  var module = angular.module('hz.dashboard.ceilometer', [ 'ngSanitize' ]);
  module.controller('myCtrl', function($scope) {
    $scope.firstName = "John";
  });  
})();

encloud-ceilometer.js is new file added by me,like launch-instance.js. To add this file in openstack-horizon, I made the following changes, I following the same procedure as for launch instance.

1. I created the folder encloudangular inside the horion/openstack_dashboard/static/dashboard/encloudangular/encloud-ceilometer.js

2. Inside the encloudangular I create the file encloud.ceilometer.js

3. In _10_project.py(dir: horizon/openstack_dashboard/enabled/) file, To include the encloud.ceilometer.js, I added the following line 

#Ceilomenter is added by EncloudEn to make angularversion of ceilometer
CEILOMETER='dashboard/encloudangular/'

In the same file _10_project.py, inside ADD_JS_FILES, include the encloud.ceilometer.js

ADD_JS_FILES = [
    CEILOMETER + 'encloud-ceilometer.js',

4. Now include the new moduel 'hz.dashboard.ceilometer' in 
dashaboard.module.js( dir: horizon/openstack_dashboard/static/dashboard/
dashboard.module.js

_10_project.py

ADD_ANGULAR_MODULES = ['hz.dashboard']

LAUNCH_INST = 'dashboard/launch-instance/'
CEILOMETER='dashboard/encloudangular/'

dashboard.module.js

(function () {
 'use strict';
  var module = angular.module('hz.dashboard', [
    'hz.dashboard.launch-instance',
    'hz.dashboard.ceilometer',
    'hz.dashboard.workflow'
  ]);
  module.constant('dashboardBasePath', '/static/dashboard/');
})();

In dashboard.module.js I have added module hz.dashboard.ceilometer which I have create in encloud-ceilomter

But still I am not able to connect stats.html through 'hz.dashboard.ceilometer', Please help me on this. For testing purpose instacs.html, I am following this like

Please see the First Name Below the graph, image description image description

How to request the graph data in ceilometer through Angularjs as Launch Instance?

Launch instance is openstack-horizon is made in angularjs similarly I want to added angularjs for graph in ceilometer, please see the following figure. image description

For testing purpose I add following code in stabs.html dir: /horizon/openstack_dashboard/dashboards/admin/metering/templates/metering/stats.html

<div ng-controller="myCtrl">
    First Name: <input type="text" ng-model="firstName"><br>
    First Name: {{ firstName }}
</div>

And corresponding controller I defined in encloud-ceilometer.js new file

(function () {
  'use strict';
  var module = angular.module('hz.dashboard.ceilometer', [ 'ngSanitize' ]);
  module.controller('myCtrl', function($scope) {
    $scope.firstName = "John";
  });  
})();

encloud-ceilometer.js is new file added by me,like launch-instance.js. To add this file in openstack-horizon, I made the following changes, I following the same procedure as for launch instance.

1. I created the folder encloudangular inside the horion/openstack_dashboard/static/dashboard/encloudangular/encloud-ceilometer.js

2. Inside the encloudangular I create the file encloud.ceilometer.js

3. In _10_project.py(dir: horizon/openstack_dashboard/enabled/) file, To include the encloud.ceilometer.js, I added the following line 

#Ceilomenter is added by EncloudEn to make angularversion of ceilometer
CEILOMETER='dashboard/encloudangular/'

In the same file _10_project.py, inside ADD_JS_FILES, include the encloud.ceilometer.js

ADD_JS_FILES = [
    CEILOMETER + 'encloud-ceilometer.js',

4. Now include the new moduel 'hz.dashboard.ceilometer' in 
dashaboard.module.js( dir: horizon/openstack_dashboard/static/dashboard/
dashboard.module.js

_10_project.py

ADD_ANGULAR_MODULES = ['hz.dashboard']

LAUNCH_INST = 'dashboard/launch-instance/'
CEILOMETER='dashboard/encloudangular/'

dashboard.module.js

(function () {
 'use strict';
  var module = angular.module('hz.dashboard', [
    'hz.dashboard.launch-instance',
    'hz.dashboard.ceilometer',
    'hz.dashboard.workflow'
  ]);
  module.constant('dashboardBasePath', '/static/dashboard/');
})();

In dashboard.module.js I have added module hz.dashboard.ceilometer which I have create in encloud-ceilomter

But still I am not able to connect stats.html through 'hz.dashboard.ceilometer', Please help me on this. For testing purpose instacs.html, I am following this like

Please see the First Name Below the graph, image description

Directory of Launch Instance and EncloudCeilometer.
image description

How to request the graph data in ceilometer through Angularjs as Launch Instance?

Launch instance is openstack-horizon is made in angularjs similarly I want to added angularjs for graph in ceilometer, please see the following figure. image description

For testing purpose I add following code in stabs.html dir: /horizon/openstack_dashboard/dashboards/admin/metering/templates/metering/stats.html

<div ng-controller="myCtrl">
    First Name: <input type="text" ng-model="firstName"><br>
    First Name: {{ firstName }}
</div>

And corresponding controller I defined in encloud-ceilometer.js new file

(function () {
  'use strict';
  var module = angular.module('hz.dashboard.ceilometer', [ 'ngSanitize' ]);
  module.controller('myCtrl', function($scope) {
    $scope.firstName = "John";
  });  
})();

encloud-ceilometer.js is new file added by me,like launch-instance.js. To add this file in openstack-horizon, I made the following changes, I following the same procedure as for launch instance.

1. I created the folder encloudangular inside the horion/openstack_dashboard/static/dashboard/encloudangular/encloud-ceilometer.js

2. Inside the encloudangular I create the file encloud.ceilometer.js

3. In _10_project.py(dir: horizon/openstack_dashboard/enabled/) file, To include the encloud.ceilometer.js, I added the following line 

#Ceilomenter is added by EncloudEn to make angularversion of ceilometer
CEILOMETER='dashboard/encloudangular/'

In the same file _10_project.py, inside ADD_JS_FILES, include the encloud.ceilometer.js

ADD_JS_FILES = [
    CEILOMETER + 'encloud-ceilometer.js',

4. Now include the new moduel 'hz.dashboard.ceilometer' in 
dashaboard.module.js( dir: horizon/openstack_dashboard/static/dashboard/
dashboard.module.js

_10_project.py

ADD_ANGULAR_MODULES = ['hz.dashboard']

LAUNCH_INST = 'dashboard/launch-instance/'
CEILOMETER='dashboard/encloudangular/'

dashboard.module.js

(function () {
 'use strict';
  var module = angular.module('hz.dashboard', [
    'hz.dashboard.launch-instance',
    'hz.dashboard.ceilometer',
    'hz.dashboard.workflow'
  ]);
  module.constant('dashboardBasePath', '/static/dashboard/');
})();

In dashboard.module.js I have added module hz.dashboard.ceilometer which I have create in encloud-ceilomter

But still I am not able to connect stats.html through 'hz.dashboard.ceilometer', Please help me on this. For testing purpose instacs.html, I am following this like

Please see the First Name Below the graph, image description

Directory of Launch Instance and EncloudCeilometer.
image description