last fix to ceilometer view
diff --git a/xos/core/xoslib/dashboards/xosCeilometerDashboard.html b/xos/core/xoslib/dashboards/xosCeilometerDashboard.html
index 1db309a..22511f4 100644
--- a/xos/core/xoslib/dashboards/xosCeilometerDashboard.html
+++ b/xos/core/xoslib/dashboards/xosCeilometerDashboard.html
@@ -3,8 +3,9 @@
<!-- browserSync -->
<!-- inject:css -->
-<link rel="stylesheet" href="/static/css/ceilometerDashboard.css">
+<link rel="stylesheet" href="/../../static/css/xosCeilometerDashboard.css">
<!-- endinject -->
+<link rel="stylesheet" href="css/ceilometerDashboard.css">
<div id="xosCeilometerDashboard">
<div ui-view ng-class="stateName"></div>
</div>
diff --git a/xos/core/xoslib/ngXosViews/ceilometerDashboard/.eslintrc b/xos/core/xoslib/ngXosViews/ceilometerDashboard/.eslintrc
index ff5fdae..868fd4b 100644
--- a/xos/core/xoslib/ngXosViews/ceilometerDashboard/.eslintrc
+++ b/xos/core/xoslib/ngXosViews/ceilometerDashboard/.eslintrc
@@ -38,6 +38,7 @@
//"angular/ng_di": [0, "function or array"]
},
"globals" :{
- "angular": true
+ "angular": true,
+ "Chart": true
}
}
\ No newline at end of file
diff --git a/xos/core/xoslib/ngXosViews/ceilometerDashboard/env/default.js b/xos/core/xoslib/ngXosViews/ceilometerDashboard/env/default.js
index 26dd953..8fc0bd5 100644
--- a/xos/core/xoslib/ngXosViews/ceilometerDashboard/env/default.js
+++ b/xos/core/xoslib/ngXosViews/ceilometerDashboard/env/default.js
@@ -8,6 +8,6 @@
module.exports = {
host: 'http://clnode015.clemson.cloudlab.us:9999/',
- xoscsrftoken: 'kL0QrqJ5Y3TbTR6mLgPBGVCMNv2JksQv',
- xossessionid: '8ygydigw52qgc715fgznj15k7nfe1139'
+ xoscsrftoken: 'w0qMPZCk8nByQh9Zy86nPs5OM5G5lKdb',
+ xossessionid: 'kvv2aa1il6u4i7j6yu2399r4tdpdeoxz'
};
diff --git a/xos/core/xoslib/ngXosViews/ceilometerDashboard/gulp/build.js b/xos/core/xoslib/ngXosViews/ceilometerDashboard/gulp/build.js
index d0d38f9..9f9bfb8 100644
--- a/xos/core/xoslib/ngXosViews/ceilometerDashboard/gulp/build.js
+++ b/xos/core/xoslib/ngXosViews/ceilometerDashboard/gulp/build.js
@@ -22,6 +22,10 @@
var inject = require('gulp-inject');
var rename = require('gulp-rename');
var replace = require('gulp-replace');
+var postcss = require('gulp-postcss');
+var autoprefixer = require('autoprefixer');
+var mqpacker = require('css-mqpacker');
+var csswring = require('csswring');
var TEMPLATE_FOOTER = `}]);
angular.module('xos.ceilometerDashboard').run(function($location){$location.path('/')});
@@ -37,6 +41,28 @@
);
});
+ // minify css
+ gulp.task('css', function () {
+ var processors = [
+ autoprefixer({browsers: ['last 1 version']}),
+ mqpacker,
+ csswring
+ ];
+
+ gulp.src([
+ `${options.css}**/*.css`,
+ `!${options.css}dev.css`
+ ])
+ .pipe(postcss(processors))
+ .pipe(gulp.dest(options.tmp + '/css/'));
+ });
+
+ gulp.task('copyCss', ['css'], function(){
+ return gulp.src([`${options.tmp}/css/*.css`])
+ .pipe(concat('xosCeilometerDashboard.css'))
+ .pipe(gulp.dest(options.static + 'css/'))
+ });
+
// compile and minify scripts
gulp.task('scripts', function() {
return gulp.src([
@@ -67,12 +93,15 @@
.pipe(replace(/<!-- bower:css -->(\n.*)*\n<!-- endbower --><!-- endcss -->/, ''))
.pipe(replace(/<!-- bower:js -->(\n.*)*\n<!-- endbower --><!-- endjs -->/, ''))
.pipe(replace(/ng-app=".*"\s/, ''))
+ //rewriting css path
+ // .pipe(replace(/(<link.*">)/, ''))
// injecting minified files
.pipe(
inject(
gulp.src([
options.static + 'js/vendor/xosCeilometerDashboardVendor.js',
- options.static + 'js/xosCeilometerDashboard.js'
+ options.static + 'js/xosCeilometerDashboard.js',
+ options.static + 'css/xosCeilometerDashboard.css'
])
)
)
@@ -107,11 +136,13 @@
gulp.task('build', function() {
runSequence(
+ 'lint',
'templates',
'babel',
'scripts',
'wiredep',
'copyHtml',
+ 'copyCss',
'cleanTmp'
);
});
diff --git a/xos/core/xoslib/ngXosViews/ceilometerDashboard/gulp/server.js b/xos/core/xoslib/ngXosViews/ceilometerDashboard/gulp/server.js
index d176950..7268b13 100644
--- a/xos/core/xoslib/ngXosViews/ceilometerDashboard/gulp/server.js
+++ b/xos/core/xoslib/ngXosViews/ceilometerDashboard/gulp/server.js
@@ -107,7 +107,7 @@
options.api + '*.js',
options.helpers + '**/*.js'
])
- .pipe(debug({title: 'unicorn:'}))
+ // .pipe(debug({title: 'unicorn:'}))
.pipe(angularFilesort()),
{
ignorePath: [options.src, '/../../ngXosLib']
diff --git a/xos/core/xoslib/ngXosViews/ceilometerDashboard/gulpfile.js b/xos/core/xoslib/ngXosViews/ceilometerDashboard/gulpfile.js
index f114774..de911e9 100644
--- a/xos/core/xoslib/ngXosViews/ceilometerDashboard/gulpfile.js
+++ b/xos/core/xoslib/ngXosViews/ceilometerDashboard/gulpfile.js
@@ -5,6 +5,7 @@
var options = {
src: 'src/',
+ css: 'src/css/',
scripts: 'src/js/',
tmp: 'src/.tmp',
dist: 'dist/',
diff --git a/xos/core/xoslib/ngXosViews/ceilometerDashboard/package.json b/xos/core/xoslib/ngXosViews/ceilometerDashboard/package.json
index 2363427..0a9ccae 100644
--- a/xos/core/xoslib/ngXosViews/ceilometerDashboard/package.json
+++ b/xos/core/xoslib/ngXosViews/ceilometerDashboard/package.json
@@ -7,6 +7,7 @@
"start": "gulp serve",
"prebuild": "npm install && bower install",
"build": "gulp",
+ "pretest": "npm install",
"test": "karma start",
"lint": "eslint src/js/"
},
@@ -19,9 +20,12 @@
"license": "MIT",
"dependencies": {},
"devDependencies": {
+ "autoprefixer": "^6.1.2",
"babel": "^6.3.13",
"babel-preset-es2015": "^6.3.13",
"browser-sync": "^2.9.11",
+ "css-mqpacker": "^4.0.0",
+ "csswring": "^4.1.1",
"del": "^2.0.2",
"eslint": "^1.8.0",
"eslint-plugin-angular": "linkmesrl/eslint-plugin-angular",
@@ -35,6 +39,7 @@
"gulp-inject": "^3.0.0",
"gulp-minify-html": "^1.0.4",
"gulp-ng-annotate": "^1.1.0",
+ "gulp-postcss": "^6.0.1",
"gulp-rename": "^1.2.2",
"gulp-replace": "^0.5.4",
"gulp-uglify": "^1.4.2",
diff --git a/xos/core/xoslib/ngXosViews/ceilometerDashboard/spec/backend.mock.js b/xos/core/xoslib/ngXosViews/ceilometerDashboard/spec/backend.mock.js
index 71a0040..c7642bb 100644
--- a/xos/core/xoslib/ngXosViews/ceilometerDashboard/spec/backend.mock.js
+++ b/xos/core/xoslib/ngXosViews/ceilometerDashboard/spec/backend.mock.js
@@ -49,42 +49,42 @@
{
meter: 'cpu',
resource_name: 'fakeName',
- resource_id: 'fakeTenant',
+ project_id: 'fakeTenant',
timestamp: '2015-12-15T00:34:08',
volume: 110
},
{
meter: 'cpu',
resource_name: 'fakeName',
- resource_id: 'fakeTenant',
+ project_id: 'fakeTenant',
timestamp: '2015-12-15T00:44:08',
volume: 120
},
{
meter: 'cpu',
resource_name: 'anotherName',
- resource_id: 'anotherTenant',
+ project_id: 'anotherTenant',
timestamp: '2015-12-15T00:24:08',
volume: 210
},
{
meter: 'cpu',
resource_name: 'anotherName',
- resource_id: 'anotherTenant',
+ project_id: 'anotherTenant',
timestamp: '2015-12-15T00:34:08',
volume: 220
},
{
meter: 'cpu',
resource_name: 'anotherName',
- resource_id: 'anotherTenant',
+ project_id: 'anotherTenant',
timestamp: '2015-12-15T00:44:08',
volume: 230
},
{
meter: 'cpu',
resource_name: 'thirdName',
- resource_id: 'thirdTenant',
+ project_id: 'thirdTenant',
timestamp: '2015-12-15T00:44:08',
volume: 310
}
diff --git a/xos/core/xoslib/ngXosViews/ceilometerDashboard/spec/ceilometer.test.js b/xos/core/xoslib/ngXosViews/ceilometerDashboard/spec/ceilometer.test.js
index 9bfb5b6..c5bb850 100644
--- a/xos/core/xoslib/ngXosViews/ceilometerDashboard/spec/ceilometer.test.js
+++ b/xos/core/xoslib/ngXosViews/ceilometerDashboard/spec/ceilometer.test.js
@@ -66,7 +66,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].resource_id).toBe('fakeTenant')
+ expect(vm.chartMeters[0].project_id).toBe('fakeTenant')
expect(vm.chartMeters[0].resource_name).toBe('fakeName')
});
@@ -77,7 +77,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].resource_id).toBe('anotherTenant')
+ expect(vm.chartMeters[1].project_id).toBe('anotherTenant')
expect(vm.chartMeters[1].resource_name).toBe('anotherName')
});
@@ -89,7 +89,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].resource_id).toBe('anotherTenant')
+ expect(vm.chartMeters[0].project_id).toBe('anotherTenant')
expect(vm.chartMeters[0].resource_name).toBe('anotherName')
});
@@ -97,10 +97,10 @@
it('should create an array of unique labels', () => {
// unique because every resource has multiple samples (time-series)
const samples = [
- {resource_id: 1, resource_name: 'fakeName'},
- {resource_id: 1, resource_name: 'fakeName'},
- {resource_id: 2, resource_name: 'anotherName'},
- {resource_id: 2, resource_name: 'anotherName'}
+ {project_id: 1, resource_name: 'fakeName'},
+ {project_id: 1, resource_name: 'fakeName'},
+ {project_id: 2, resource_name: 'anotherName'},
+ {project_id: 2, resource_name: 'anotherName'}
];
const result = vm.formatSamplesLabels(samples);
diff --git a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/css/ceilometerDashboard.css b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/css/ceilometerDashboard.css
index 9b53d98..879d7b4 100644
--- a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/css/ceilometerDashboard.css
+++ b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/css/ceilometerDashboard.css
@@ -1,267 +1,263 @@
-/*ceilometer-dashboard{*/
+#xosCeilometerDashboard{
+ position: relative;
+}
- #xosCeilometerDashboard{
- position: relative;
+/* Panel Layout */
+.panel {
+ margin-top: 10px;
+}
+
+.panel-body:not(:first-child) {
+ border-top: 1px solid #e3e3e3;
+}
+
+.panel-body .row {
+ margin-top: 10px;
+}
+
+/* Chart details */
+.chart {
+ width: 100%;
+ height: 300px;
+}
+
+.btn-chart, .btn-chart:hover {
+ color: #fff;
+}
+
+.side-container {
+ position: relative;
+}
+
+.service-list {
+ margin-top: -10px;
+}
+
+.service-list h3 {
+ margin-top: 0px;
+ margin-bottom: 0px;
+}
+
+.service-list a {
+ text-decoration: none;
+ color: #333;
+}
+
+.meters, .stats {
+ margin-top: 25px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+}
+
+/* LOADER */
+.loader {
+ font-size: 10px;
+ margin: 150px auto;
+ text-indent: -9999em;
+ width: 11em;
+ height: 11em;
+ border-radius: 50%;
+ background: #ffffff;
+ background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
+ background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
+ background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
+ background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
+ background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
+ position: relative;
+ -webkit-animation: load3 1.4s infinite linear;
+ animation: load3 1.4s infinite linear;
+ -webkit-transform: translateZ(0);
+ -ms-transform: translateZ(0);
+ transform: translateZ(0);
+}
+.loader:before {
+ width: 50%;
+ height: 50%;
+ background: #105E9E;
+ border-radius: 100% 0 0 0;
+ position: absolute;
+ top: 0;
+ left: 0;
+ content: '';
+}
+.loader:after {
+ background: #fff;
+ width: 75%;
+ height: 75%;
+ border-radius: 50%;
+ content: '';
+ margin: auto;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+}
+@-webkit-keyframes load3 {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+ 100% {
+ -webkit-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+}
+@keyframes load3 {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+ 100% {
+ -webkit-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+}
+
+/* VIEW ANIMATION */
+
+[ui-view] {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ width: 100%;
+}
+
+/* FROM DASHBOARD TO DETAIL */
+
+/* dash out */
+[ui-view].ceilometerDashboard.ng-leave {
+ animation:1s bounceOutLeft ease;
+}
+/* samples in */
+[ui-view].samples.ng-enter {
+ animation:1s bounceInRight ease;
+}
+
+/* FROM DETAIL TO DASHBOARD */
+
+/* samples out */
+[ui-view].samples.ng-leave {
+ animation:1s bounceOutRight ease;
+}
+/* dash in */
+[ui-view].ceilometerDashboard.ng-enter {
+ animation:1s bounceInLeft ease;
+}
+
+/* COLUMS ANIMATION */
+/* when showing the thing */
+.animate .animate-slide-left.ng-hide-remove {
+ animation:0.5s bounceInRight ease;
+}
+
+/* when hiding the picture */
+.animate .animate-slide-left.ng-hide-add {
+ animation:0.5s bounceOutRight ease;
+}
+
+/* ANIMATIONS */
+
+@keyframes bounceInRight {
+ from, 60%, 75%, 90%, to {
+ animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
- /* Panel Layout */
- .panel {
- margin-top: 10px;
+ from {
+ opacity: 0;
+ transform: translate3d(3000px, 0, 0);
}
- .panel-body:not(:first-child) {
- border-top: 1px solid #e3e3e3;
+ 60% {
+ opacity: 1;
+ transform: translate3d(-25px, 0, 0);
}
- .panel-body .row {
- margin-top: 10px;
+ 75% {
+ transform: translate3d(10px, 0, 0);
}
- /* Chart details */
- .chart {
- width: 100%;
- height: 300px;
+ 90% {
+ transform: translate3d(-5px, 0, 0);
}
- .btn-chart, .btn-chart:hover {
- color: #fff;
+ to {
+ transform: none;
+ }
+}
+
+@keyframes bounceInLeft {
+ from, 60%, 75%, 90%, to {
+ animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
- .side-container {
- position: relative;
+ 0% {
+ opacity: 0;
+ transform: translate3d(-3000px, 0, 0);
}
- .service-list {
- margin-top: -10px;
+ 60% {
+ opacity: 1;
+ transform: translate3d(25px, 0, 0);
}
- .service-list h3 {
- margin-top: 0px;
- margin-bottom: 0px;
+ 75% {
+ transform: translate3d(-10px, 0, 0);
}
- .service-list a {
- text-decoration: none;
- color: #333;
+ 90% {
+ transform: translate3d(5px, 0, 0);
}
- .meters, .stats {
- margin-top: 25px;
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
+ to {
+ transform: none;
+ }
+}
+
+@keyframes slideInUp {
+ from {
+ transform: translate3d(0, 100%, 0);
+ visibility: visible;
}
- /* LOADER */
- .loader {
- font-size: 10px;
- margin: 150px auto;
- text-indent: -9999em;
- width: 11em;
- height: 11em;
- border-radius: 50%;
- background: #ffffff;
- background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
- background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
- background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
- background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
- background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
- position: relative;
- -webkit-animation: load3 1.4s infinite linear;
- animation: load3 1.4s infinite linear;
- -webkit-transform: translateZ(0);
- -ms-transform: translateZ(0);
- transform: translateZ(0);
+ to {
+ transform: translate3d(0, 0, 0);
}
- .loader:before {
- width: 50%;
- height: 50%;
- background: #105E9E;
- border-radius: 100% 0 0 0;
- position: absolute;
- top: 0;
- left: 0;
- content: '';
- }
- .loader:after {
- background: #fff;
- width: 75%;
- height: 75%;
- border-radius: 50%;
- content: '';
- margin: auto;
- position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
- }
- @-webkit-keyframes load3 {
- 0% {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- 100% {
- -webkit-transform: rotate(360deg);
- transform: rotate(360deg);
- }
- }
- @keyframes load3 {
- 0% {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- 100% {
- -webkit-transform: rotate(360deg);
- transform: rotate(360deg);
- }
+}
+
+@keyframes bounceOutRight {
+ 20% {
+ opacity: 1;
+ transform: translate3d(-20px, 0, 0);
}
- /* VIEW ANIMATION */
+ to {
+ opacity: 0;
+ transform: translate3d(2000px, 0, 0);
+ }
+}
- [ui-view] {
- position: absolute;
- top: 0;
- bottom: 0;
- width: 100%;
+@keyframes bounceOutLeft {
+ 20% {
+ opacity: 1;
+ transform: translate3d(20px, 0, 0);
}
- /* FROM DASHBOARD TO DETAIL */
-
- /* dash out */
- [ui-view].ceilometerDashboard.ng-leave {
- animation:1s bounceOutLeft ease;
+ to {
+ opacity: 0;
+ transform: translate3d(-2000px, 0, 0);
}
- /* samples in */
- [ui-view].samples.ng-enter {
- animation:1s bounceInRight ease;
+}
+
+@keyframes slideOutDown {
+ from {
+ transform: translate3d(0, 0, 0);
}
- /* FROM DETAIL TO DASHBOARD */
-
- /* samples out */
- [ui-view].samples.ng-leave {
- animation:1s bounceOutRight ease;
+ to {
+ visibility: hidden;
+ transform: translate3d(0, 100%, 0);
}
- /* dash in */
- [ui-view].ceilometerDashboard.ng-enter {
- animation:1s bounceInLeft ease;
- }
-
- /* COLUMS ANIMATION */
- /* when showing the thing */
- .animate .animate-slide-left.ng-hide-remove {
- animation:0.5s bounceInRight ease;
- }
-
- /* when hiding the picture */
- .animate .animate-slide-left.ng-hide-add {
- animation:0.5s bounceOutRight ease;
- }
-
- /* ANIMATIONS */
-
- @keyframes bounceInRight {
- from, 60%, 75%, 90%, to {
- animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
- }
-
- from {
- opacity: 0;
- transform: translate3d(3000px, 0, 0);
- }
-
- 60% {
- opacity: 1;
- transform: translate3d(-25px, 0, 0);
- }
-
- 75% {
- transform: translate3d(10px, 0, 0);
- }
-
- 90% {
- transform: translate3d(-5px, 0, 0);
- }
-
- to {
- transform: none;
- }
- }
-
- @keyframes bounceInLeft {
- from, 60%, 75%, 90%, to {
- animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
- }
-
- 0% {
- opacity: 0;
- transform: translate3d(-3000px, 0, 0);
- }
-
- 60% {
- opacity: 1;
- transform: translate3d(25px, 0, 0);
- }
-
- 75% {
- transform: translate3d(-10px, 0, 0);
- }
-
- 90% {
- transform: translate3d(5px, 0, 0);
- }
-
- to {
- transform: none;
- }
- }
-
- @keyframes slideInUp {
- from {
- transform: translate3d(0, 100%, 0);
- visibility: visible;
- }
-
- to {
- transform: translate3d(0, 0, 0);
- }
- }
-
- @keyframes bounceOutRight {
- 20% {
- opacity: 1;
- transform: translate3d(-20px, 0, 0);
- }
-
- to {
- opacity: 0;
- transform: translate3d(2000px, 0, 0);
- }
- }
-
- @keyframes bounceOutLeft {
- 20% {
- opacity: 1;
- transform: translate3d(20px, 0, 0);
- }
-
- to {
- opacity: 0;
- transform: translate3d(-2000px, 0, 0);
- }
- }
-
- @keyframes slideOutDown {
- from {
- transform: translate3d(0, 0, 0);
- }
-
- to {
- visibility: hidden;
- transform: translate3d(0, 100%, 0);
- }
- }
-
-/*}
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/css/dev.css b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/css/dev.css
index b72bfdc..228d394 100644
--- a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/css/dev.css
+++ b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/css/dev.css
@@ -9,6 +9,6 @@
@media (min-width: 768px) {
#xosCeilometerDashboard {
- margin: 10px:;
+ margin: 10px
}
}
\ No newline at end of file
diff --git a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/css/grips/vertical.png b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/css/grips/vertical.png
deleted file mode 100644
index 0ac8fa1..0000000
--- a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/css/grips/vertical.png
+++ /dev/null
Binary files differ
diff --git a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/js/main.js b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/js/main.js
index 58033e9..a20d563 100644
--- a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/js/main.js
+++ b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/js/main.js
@@ -33,24 +33,12 @@
})
.service('Ceilometer', function($http, $q, lodash){
- this.resourceMap = {};
-
this.getMeters = () => {
let deferred = $q.defer();
$http.get('/xoslib/meters/', {cache: true})
// $http.get('../meters_mock.json', {cache: true})
.then((res) => {
-
- // saving resources name and ids for later user,
- // {resource_id: resource_name}
- // NOTE REMOVE IF NOT ANYMORE NEEDED
- const resourceObj = lodash.groupBy(res.data, 'resource_id');
- this.resourceMap = lodash.reduce(Object.keys(resourceObj), (map, item) => {
- map[item] = resourceObj[item][0].resource_name;
- return map;
- }, {});
-
deferred.resolve(res.data)
})
.catch((e) => {
@@ -88,6 +76,11 @@
return deferred.promise;
};
+
+ // hold dashboard status (opened service, slice, resource)
+ this.selectedService = null;
+ this.selectedSlice = null;
+ this.selectedResource = null;
})
.directive('ceilometerDashboard', function(lodash){
return {
@@ -98,6 +91,30 @@
templateUrl: 'templates/ceilometer-dashboard.tpl.html',
controller: function(Ceilometer){
+ console.log(Ceilometer.selectedService, Ceilometer.selectedSlice, Ceilometer.selectedResource);
+
+ // 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.selectedSlice = Ceilometer.selectedSlice;
+ this.selectedResources = this.projects[Ceilometer.selectedService][Ceilometer.selectedSlice]
+ if(Ceilometer.selectedResource){
+ this.selectedResource = Ceilometer.selectedResource;
+ this.selectedMeters = this.selectedResources[Ceilometer.selectedResource];
+ }
+ }
+ }
+ }
+
this.loadMeters = () => {
this.loader = true;
@@ -114,6 +131,9 @@
this.projects[project][slice] = lodash.groupBy(this.projects[project][slice], 'resource_name');
});
});
+
+ // open selected panels
+ this.openPanels();
})
.catch(err => {
this.error = err.data.detail;
@@ -126,33 +146,26 @@
this.loadMeters();
/**
- * Select the current service
- */
-
- this.selectService = (service) => {
- //cleaning
- this.selectedResources = null;
- this.selectedResource = null;
- this.selectedMeters = null;
-
- this.selectedService = service;
- };
-
- /**
* Select Resources for a slice
*
* @param Array resources The list of selected resources
* @returns void
*/
this.selectedResources = null;
- this.selectResources = (resources, slice) => {
+ this.selectResources = (resources, slice, service) => {
//cleaning
this.selectedResources = null;
this.selectedResource = null;
this.selectedMeters = null;
+ // hold the resource list for the current slice
this.selectedResources = resources;
this.selectedSlice = slice;
+ this.selectedService = service;
+
+ // store the status
+ Ceilometer.selectedSlice = slice;
+ Ceilometer.selectedService = service;
}
/**
@@ -164,6 +177,8 @@
this.selectedMeters = null;
this.selectMeters = (meters, resource) => {
this.selectedMeters = meters;
+
+ Ceilometer.selectedResource = resource;
this.selectedResource = resource;
}
@@ -182,6 +197,8 @@
templateUrl: 'templates/ceilometer-samples.tpl.html',
controller: function(Ceilometer) {
+ // console.log(Ceilometer.selectResource);
+
this.chartColors = [
'#286090',
'#F7464A',
@@ -205,8 +222,7 @@
if($stateParams.name && $stateParams.tenant){
this.name = $stateParams.name;
this.tenant = $stateParams.tenant;
- // console.log('++++++++++', this.name, this.tenant);
- // TODO rename tenant in resource_id
+ // TODO rename tenant in project_id
}
else{
throw new Error('Missing Name and Tenant Params!');
@@ -247,21 +263,21 @@
* @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.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.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.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.resource_id,
- name: meter.resource_name
+ id: meter.project_id,
+ name: meter.resource_name || meter.project_id
})
};
@@ -271,11 +287,11 @@
this.formatSamplesLabels = (samples) => {
- return lodash.uniq(samples, 'resource_id')
+ return lodash.uniq(samples, 'project_id')
.reduce((labels, item) => {
labels.push({
- id: item.resource_id,
- name: item.resource_name
+ id: item.project_id,
+ name: item.resource_name || item.project_id
});
return labels;
}, []);
@@ -293,7 +309,7 @@
.then(res => {
// setup data for visualization
- this.samplesList = lodash.groupBy(res, 'resource_id');
+ this.samplesList = lodash.groupBy(res, 'project_id');
this.sampleLabels = this.formatSamplesLabels(res);
// add current meter to chart
diff --git a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/templates/ceilometer-dashboard.tpl.html b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/templates/ceilometer-dashboard.tpl.html
index 2d880b5..f04a974 100644
--- a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/templates/ceilometer-dashboard.tpl.html
+++ b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/templates/ceilometer-dashboard.tpl.html
@@ -30,11 +30,12 @@
<uib-accordion-group
ng-repeat="(service, slices) in vm.projects | orderObjectByKey"
template-url="templates/accordion-group.html"
+ is-open="vm.accordion.open[service]"
heading="{{service}}">
<h4>Slices:</h4>
<a ng-repeat="(slice, resources) in slices"
ng-class="{active: slice === vm.selectedSlice}"
- ng-click="vm.selectResources(resources, slice)"
+ ng-click="vm.selectResources(resources, slice, service)"
href="#" class="list-group-item" >
{{slice}} <i class="glyphicon glyphicon-chevron-right pull-right"></i>
</a>
@@ -85,7 +86,7 @@
</div>
<div class="col-xs-3"></div>
</div>
- <div class="row" ng-click="vm.selectMeters(meters)" ng-repeat="meter in vm.selectedMeters" style="margin-bottom: 10px;">
+ <div class="row" ng-repeat="meter in vm.selectedMeters" style="margin-bottom: 10px;">
<div class="col-xs-6">
{{meter.name}}
</div>
@@ -93,7 +94,7 @@
{{meter.unit}}
</div>
<div class="col-xs-3">
- <a ui-sref="samples({name: meter.name, tenant: meter.resource_id})" class="btn btn-primary">
+ <a ui-sref="samples({name: meter.name, tenant: meter.project_id})" class="btn btn-primary">
<i class="glyphicon glyphicon-search"></i>
</a>
</div>
diff --git a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/templates/ceilometer-samples.tpl.html b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/templates/ceilometer-samples.tpl.html
index f323802e..b279123 100644
--- a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/templates/ceilometer-samples.tpl.html
+++ b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/templates/ceilometer-samples.tpl.html
@@ -42,7 +42,7 @@
<div class="row" ng-if="!vm.loader">
<div class="col-xs-12">
<a ng-click="vm.removeFromChart(meter)" class="btn btn-chart" ng-style="{'background-color': vm.chartColors[$index]}" ng-repeat="meter in vm.chartMeters">
- {{meter.resource_name}}
+ {{meter.resource_name || meter.resource_id}}
</a>
</div>
</div>
diff --git a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/templates/ceilometer-stats.tpl.html b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/templates/ceilometer-stats.tpl.html
index fabce0a..1f5ff11 100644
--- a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/templates/ceilometer-stats.tpl.html
+++ b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/templates/ceilometer-stats.tpl.html
@@ -14,7 +14,7 @@
<th>Value:</th>
</tr>
<tr ng-repeat="item in vm.stats">
- <td>{{item.type}}</td>
+ <td>{{item.category}}</td>
<td>{{item.meter}}</td>
<td>{{item.unit}}</td>
<td>{{item.value}}</td>
diff --git a/xos/core/xoslib/static/css/xosCeilometerDashboard.css b/xos/core/xoslib/static/css/xosCeilometerDashboard.css
new file mode 100644
index 0000000..8aad3b2
--- /dev/null
+++ b/xos/core/xoslib/static/css/xosCeilometerDashboard.css
@@ -0,0 +1 @@
+#xosCeilometerDashboard{position:relative}.panel{margin-top:10px}.panel-body:not(:first-child){border-top:1px solid #e3e3e3}.panel-body .row{margin-top:10px}.chart{width:100%;height:300px}.btn-chart,.btn-chart:hover{color:#fff}.side-container{position:relative}.service-list{margin-top:-10px}.service-list h3{margin-top:0;margin-bottom:0}.service-list a{text-decoration:none;color:#333}.meters,.stats{margin-top:25px;position:absolute;top:0;left:0;width:100%}.loader{font-size:10px;margin:150px auto;text-indent:-9999em;width:11em;height:11em;border-radius:50%;background:#fff;background:linear-gradient(to right,#fff 10%,rgba(255,255,255,0) 42%);position:relative;animation:load3 1.4s infinite linear;transform:translateZ(0)}.loader:before{width:50%;height:50%;background:#105e9e;border-radius:100% 0 0;position:absolute;top:0;left:0;content:''}.loader:after{background:#fff;width:75%;height:75%;border-radius:50%;content:'';margin:auto;position:absolute;top:0;left:0;bottom:0;right:0}@keyframes load3{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}[ui-view]{position:absolute;top:0;bottom:0;width:100%}[ui-view].ceilometerDashboard.ng-leave{animation:1s bounceOutLeft ease}[ui-view].samples.ng-enter{animation:1s bounceInRight ease}[ui-view].samples.ng-leave{animation:1s bounceOutRight ease}[ui-view].ceilometerDashboard.ng-enter{animation:1s bounceInLeft ease}.animate .animate-slide-left.ng-hide-remove{animation:.5s bounceInRight ease}.animate .animate-slide-left.ng-hide-add{animation:.5s bounceOutRight ease}@keyframes bounceInRight{from,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1.000)}from{opacity:0;transform:translate3d(3000px,0,0)}60%{opacity:1;transform:translate3d(-25px,0,0)}75%{transform:translate3d(10px,0,0)}90%{transform:translate3d(-5px,0,0)}to{transform:none}}@keyframes bounceInLeft{from,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1.000)}0%{opacity:0;transform:translate3d(-3000px,0,0)}60%{opacity:1;transform:translate3d(25px,0,0)}75%{transform:translate3d(-10px,0,0)}90%{transform:translate3d(5px,0,0)}to{transform:none}}@keyframes slideInUp{from{transform:translate3d(0,100%,0);visibility:visible}to{transform:translate3d(0,0,0)}}@keyframes bounceOutRight{20%{opacity:1;transform:translate3d(-20px,0,0)}to{opacity:0;transform:translate3d(2000px,0,0)}}@keyframes bounceOutLeft{20%{opacity:1;transform:translate3d(20px,0,0)}to{opacity:0;transform:translate3d(-2000px,0,0)}}@keyframes slideOutDown{from{transform:translate3d(0,0,0)}to{visibility:hidden;transform:translate3d(0,100%,0)}}
\ 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 9e314d4..5aa7234 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,s){e.stateName=s.name})}]).service("Ceilometer",["$http","$q","lodash",function(e,t,s){var n=this;this.resourceMap={},this.getMeters=function(){var r=t.defer();return e.get("/xoslib/meters/",{cache:!0}).then(function(e){var t=s.groupBy(e.data,"resource_id");n.resourceMap=s.reduce(Object.keys(t),function(e,s){return e[s]=t[s][0].resource_name,e},{}),r.resolve(e.data)})["catch"](function(e){r.reject(e)}),r.promise},this.getSamples=function(s,n){var r=t.defer();return e.get("/xoslib/metersamples/",{params:{meter:s,tenant:n}}).then(function(e){r.resolve(e.data)})["catch"](function(e){r.reject(e)}),r.promise},this.getStats=function(n){var r=t.defer();return e.get("/xoslib/meterstatistics/",{cache:!0}).then(function(e){r.resolve(s.filter(e.data,{slice:n}))})["catch"](function(e){r.reject(e)}),r.promise}}]).directive("ceilometerDashboard",["lodash",function(e){return{restrict:"E",scope:{},bindToController:!0,controllerAs:"vm",templateUrl:"templates/ceilometer-dashboard.tpl.html",controller:["Ceilometer",function(t){var s=this;this.loadMeters=function(){s.loader=!0,t.getMeters().then(function(t){s.projects=e.groupBy(t,"service"),e.forEach(Object.keys(s.projects),function(t){s.projects[t]=e.groupBy(s.projects[t],"slice"),e.forEach(Object.keys(s.projects[t]),function(n){s.projects[t][n]=e.groupBy(s.projects[t][n],"resource_name")})})})["catch"](function(e){s.error=e.data.detail})["finally"](function(){s.loader=!1})},this.loadMeters(),this.selectService=function(e){s.selectedResources=null,s.selectedResource=null,s.selectedMeters=null,s.selectedService=e},this.selectedResources=null,this.selectResources=function(e,t){s.selectedResources=null,s.selectedResource=null,s.selectedMeters=null,s.selectedResources=e,s.selectedSlice=t},this.selectedMeters=null,this.selectMeters=function(e,t){s.selectedMeters=e,s.selectedResource=t}}]}}]).directive("ceilometerSamples",["lodash","$stateParams",function(e,t){return{restrict:"E",scope:{name:"=name",tenant:"=tenant"},bindToController:!0,controllerAs:"vm",templateUrl:"templates/ceilometer-samples.tpl.html",controller:["Ceilometer",function(s){var n=this;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&&(this.name=t.name,this.tenant=t.tenant),this.getLabels=function(e){return e.reduce(function(e,t){var s=new Date(t.timestamp);return e.push(s.getHours()+":"+((s.getMinutes()<10?"0":"")+s.getMinutes())+":"+s.getSeconds()),e},[])},this.getData=function(e){return e.reduce(function(e,t){return e.push(t.volume),e},[])},this.chartMeters=[],this.addMeterToChart=function(t){n.chart.labels=n.getLabels(e.sortBy(n.samplesList[t],"timestamp")),n.chart.series.push(t),n.chart.data.push(n.getData(e.sortBy(n.samplesList[t],"timestamp"))),console.log(n.samplesList[t]),n.chartMeters.push(n.samplesList[t][0]),e.remove(n.sampleLabels,{id:t})},this.removeFromChart=function(e){n.chart.data.splice(n.chart.series.indexOf(e.resource_id),1),n.chart.series.splice(n.chart.series.indexOf(e.resource_id),1),n.chartMeters.splice(n.chartMeters.indexOf(e.resource_id),1),n.sampleLabels.push({id:e.resource_id,name:e.resource_name})},this.formatSamplesLabels=function(t){return e.uniq(t.reduce(function(e,t){return e.push({id:t.resource_id,name:t.resource_name}),e},[]),function(e){return e.id})},this.showSamples=function(){n.loader=!0,s.getSamples(n.name).then(function(t){n.samplesList=e.groupBy(t,"resource_id"),n.sampleLabels=n.formatSamplesLabels(t),n.addMeterToChart(n.tenant)})["catch"](function(e){n.error=e.data.detail})["finally"](function(){n.loader=!1})},this.showSamples()}]}}]).directive("ceilometerStats",function(){return{restrict:"E",scope:{name:"=name"},bindToController:!0,controllerAs:"vm",templateUrl:"templates/ceilometer-stats.tpl.html",controller:["$scope","Ceilometer",function(e,t){var s=this;this.getStats=function(){s.loader=!0,t.getStats(s.name).then(function(e){s.stats=e})["catch"](function(e){s.error=e.data})["finally"](function(){s.loader=!1})},this.getStats(),e.$watch(function(){return s.name},function(){s.getStats()})}]}}).filter("orderObjectByKey",["lodash",function(e){return function(t){return t?e.reduce(Object.keys(t).reverse(),function(e,s){return e[s]=t[s],e},{}):void 0}}]),angular.module("xos.ceilometerDashboard").run(["$templateCache",function(e){e.put("templates/accordion-group.html",'<div class="panel {{panelClass || \'panel-default\'}}">\n <div class="panel-heading" ng-keypress="toggleOpen($event)">\n <h3>\n <a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading"><span ng-class="{\'text-muted\': isDisabled}">{{heading}}</span></a>\n </h3>\n </div>\n <div class="panel-collapse collapse" uib-collapse="!isOpen">\n <div class="panel-body" ng-transclude></div>\n </div>\n</div>\n'),e.put("templates/accordion.html",'<div class="panel-group" ng-transclude></div>'),e.put("templates/ceilometer-dashboard.tpl.html",'<div class="row">\n <div class="col-sm-10">\n <h1>XOS Monitoring Statistics</h1>\n </div>\n <div class="col-xs-2 text-right">\n <a href="" class="btn btn-default" \n ng-show="vm.selectedResources && !vm.showStats"\n ng-click="vm.showStats = true">\n <i class="glyphicon glyphicon-transfer"></i>\n </a>\n <a href="" class="btn btn-default" \n ng-show="vm.selectedResources && vm.showStats"\n ng-click="vm.showStats = false">\n <i class="glyphicon glyphicon-transfer"></i>\n </a>\n </div>\n</div>\n\n<div class="row" ng-show="vm.loader">\n <div class="col-xs-12">\n <div class="loader">Loading</div>\n </div>\n</div>\n\n<section ng-hide="vm.loader" ng-class="{animate: !vm.loader}">\n <div class="row">\n <div class="col-sm-3 service-list">\n <h3>XOS Service: </h3>\n <uib-accordion close-others="true" template-url="templates/accordion.html">\n <uib-accordion-group\n ng-repeat="(service, slices) in vm.projects | orderObjectByKey"\n template-url="templates/accordion-group.html"\n heading="{{service}}">\n <h4>Slices:</h4>\n <a ng-repeat="(slice, resources) in slices" \n ng-class="{active: slice === vm.selectedSlice}"\n ng-click="vm.selectResources(resources, slice)"\n href="#" class="list-group-item" >\n {{slice}} <i class="glyphicon glyphicon-chevron-right pull-right"></i>\n </a>\n </uib-accordion-group>\n </uib-accordion>\n </div>\n <section class="side-container col-sm-9">\n <div class="row">\n <article ng-hide="!vm.showStats" class="stats animate-slide-left">\n <div class="col-xs-12">\n <div class="list-group">\n <div class="list-group-item">\n <h3>Stats</h3>\n </div>\n <div class="list-group-item">\n <ceilometer-stats ng-if="vm.selectedSlice" name="vm.selectedSlice"></ceilometer-stats>\n </div>\n </div>\n </div>\n </article>\n <article ng-hide="vm.showStats" class="meters animate-slide-left">\n <div class="col-sm-4 animate-slide-left" ng-hide="!vm.selectedResources">\n <div class="list-group">\n <div class="list-group-item">\n <h3>Resources</h3>\n </div>\n <a href="#" \n ng-click="vm.selectMeters(meters, resource)" \n class="list-group-item" \n ng-repeat="(resource, meters) in vm.selectedResources" \n ng-class="{active: resource === vm.selectedResource}">\n {{resource}} <i class="glyphicon glyphicon-chevron-right pull-right"></i>\n </a>\n </div>\n </div>\n <div class="col-sm-8 animate-slide-left" ng-hide="!vm.selectedMeters">\n <div class="list-group">\n <div class="list-group-item">\n <h3>Meters</h3>\n </div>\n <div class="list-group-item">\n <div class="row">\n <div class="col-xs-6">\n <label>Name:</label>\n </div>\n <div class="col-xs-3">\n <label>Unit:</label>\n </div>\n <div class="col-xs-3"></div>\n </div>\n <div class="row" ng-click="vm.selectMeters(meters)" 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.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}}\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>Type:</th>\n <th>Meter:</th>\n <th>Unit:</th>\n <th>Value:</th>\n </tr>\n <tr ng-repeat="item in vm.stats">\n <td>{{item.type}}</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,s){e.stateName=s.name})}]).service("Ceilometer",["$http","$q","lodash",function(e,t,s){var n=this;this.resourceMap={},this.getMeters=function(){var r=t.defer();return e.get("/xoslib/meters/",{cache:!0}).then(function(e){var t=s.groupBy(e.data,"resource_id");n.resourceMap=s.reduce(Object.keys(t),function(e,s){return e[s]=t[s][0].resource_name,e},{}),r.resolve(e.data)})["catch"](function(e){r.reject(e)}),r.promise},this.getSamples=function(s,n){var r=t.defer();return e.get("/xoslib/metersamples/",{params:{meter:s,tenant:n}}).then(function(e){r.resolve(e.data)})["catch"](function(e){r.reject(e)}),r.promise},this.getStats=function(n){var r=t.defer();return e.get("/xoslib/meterstatistics/",{cache:!0}).then(function(e){r.resolve(s.filter(e.data,{slice:n}))})["catch"](function(e){r.reject(e)}),r.promise}}]).directive("ceilometerDashboard",["lodash",function(e){return{restrict:"E",scope:{},bindToController:!0,controllerAs:"vm",templateUrl:"templates/ceilometer-dashboard.tpl.html",controller:["Ceilometer",function(t){var s=this;this.loadMeters=function(){s.loader=!0,t.getMeters().then(function(t){s.projects=e.groupBy(t,"service"),e.forEach(Object.keys(s.projects),function(t){s.projects[t]=e.groupBy(s.projects[t],"slice"),e.forEach(Object.keys(s.projects[t]),function(n){s.projects[t][n]=e.groupBy(s.projects[t][n],"resource_name")})})})["catch"](function(e){s.error=e.data.detail})["finally"](function(){s.loader=!1})},this.loadMeters(),this.selectService=function(e){s.selectedResources=null,s.selectedResource=null,s.selectedMeters=null,s.selectedService=e},this.selectedResources=null,this.selectResources=function(e,t){s.selectedResources=null,s.selectedResource=null,s.selectedMeters=null,s.selectedResources=e,s.selectedSlice=t},this.selectedMeters=null,this.selectMeters=function(e,t){s.selectedMeters=e,s.selectedResource=t}}]}}]).directive("ceilometerSamples",["lodash","$stateParams",function(e,t){return{restrict:"E",scope:{name:"=name",tenant:"=tenant"},bindToController:!0,controllerAs:"vm",templateUrl:"templates/ceilometer-samples.tpl.html",controller:["Ceilometer",function(s){var n=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 s=new Date(t.timestamp);return e.push(s.getHours()+":"+((s.getMinutes()<10?"0":"")+s.getMinutes())+":"+s.getSeconds()),e},[])},this.getData=function(e){return e.reduce(function(e,t){return e.push(t.volume),e},[])},this.chartMeters=[],this.addMeterToChart=function(t){n.chart.labels=n.getLabels(e.sortBy(n.samplesList[t],"timestamp")),n.chart.series.push(t),n.chart.data.push(n.getData(e.sortBy(n.samplesList[t],"timestamp"))),n.chartMeters.push(n.samplesList[t][0]),e.remove(n.sampleLabels,{id:t})},this.removeFromChart=function(t){n.chart.data.splice(n.chart.series.indexOf(t.resource_id),1),n.chart.series.splice(n.chart.series.indexOf(t.resource_id),1),n.chartMeters.splice(e.findIndex(n.chartMeters,{resource_id:t.resource_id}),1),n.sampleLabels.push({id:t.resource_id,name:t.resource_name})},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}),e},[])},this.showSamples=function(){n.loader=!0,s.getSamples(n.name).then(function(t){n.samplesList=e.groupBy(t,"resource_id"),n.sampleLabels=n.formatSamplesLabels(t),n.addMeterToChart(n.tenant)})["catch"](function(e){n.error=e.data.detail})["finally"](function(){n.loader=!1})},this.showSamples()}]}}]).directive("ceilometerStats",function(){return{restrict:"E",scope:{name:"=name"},bindToController:!0,controllerAs:"vm",templateUrl:"templates/ceilometer-stats.tpl.html",controller:["$scope","Ceilometer",function(e,t){var s=this;this.getStats=function(){s.loader=!0,t.getStats(s.name).then(function(e){s.stats=e})["catch"](function(e){s.error=e.data})["finally"](function(){s.loader=!1})},this.getStats(),e.$watch(function(){return s.name},function(){s.getStats()})}]}}).filter("orderObjectByKey",["lodash",function(e){return function(t){return t?e.reduce(Object.keys(t).reverse(),function(e,s){return e[s]=t[s],e},{}):void 0}}]),angular.module("xos.ceilometerDashboard").run(["$templateCache",function(e){e.put("templates/accordion-group.html",'<div class="panel {{panelClass || \'panel-default\'}}">\n <div class="panel-heading" ng-keypress="toggleOpen($event)">\n <h3>\n <a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading"><span ng-class="{\'text-muted\': isDisabled}">{{heading}}</span></a>\n </h3>\n </div>\n <div class="panel-collapse collapse" uib-collapse="!isOpen">\n <div class="panel-body" ng-transclude></div>\n </div>\n</div>\n'),e.put("templates/accordion.html",'<div class="panel-group" ng-transclude></div>'),e.put("templates/ceilometer-dashboard.tpl.html",'<div class="row">\n <div class="col-sm-10">\n <h1>XOS Monitoring Statistics</h1>\n </div>\n <div class="col-xs-2 text-right">\n <a href="" class="btn btn-default" \n ng-show="vm.selectedResources && !vm.showStats"\n ng-click="vm.showStats = true">\n <i class="glyphicon glyphicon-transfer"></i>\n </a>\n <a href="" class="btn btn-default" \n ng-show="vm.selectedResources && vm.showStats"\n ng-click="vm.showStats = false">\n <i class="glyphicon glyphicon-transfer"></i>\n </a>\n </div>\n</div>\n\n<div class="row" ng-show="vm.loader">\n <div class="col-xs-12">\n <div class="loader">Loading</div>\n </div>\n</div>\n\n<section ng-hide="vm.loader" ng-class="{animate: !vm.loader}">\n <div class="row">\n <div class="col-sm-3 service-list">\n <h3>XOS Service: </h3>\n <uib-accordion close-others="true" template-url="templates/accordion.html">\n <uib-accordion-group\n ng-repeat="(service, slices) in vm.projects | orderObjectByKey"\n template-url="templates/accordion-group.html"\n heading="{{service}}">\n <h4>Slices:</h4>\n <a ng-repeat="(slice, resources) in slices" \n ng-class="{active: slice === vm.selectedSlice}"\n ng-click="vm.selectResources(resources, slice)"\n href="#" class="list-group-item" >\n {{slice}} <i class="glyphicon glyphicon-chevron-right pull-right"></i>\n </a>\n </uib-accordion-group>\n </uib-accordion>\n </div>\n <section class="side-container col-sm-9">\n <div class="row">\n <article ng-hide="!vm.showStats" class="stats animate-slide-left">\n <div class="col-xs-12">\n <div class="list-group">\n <div class="list-group-item">\n <h3>Stats</h3>\n </div>\n <div class="list-group-item">\n <ceilometer-stats ng-if="vm.selectedSlice" name="vm.selectedSlice"></ceilometer-stats>\n </div>\n </div>\n </div>\n </article>\n <article ng-hide="vm.showStats" class="meters animate-slide-left">\n <div class="col-sm-4 animate-slide-left" ng-hide="!vm.selectedResources">\n <div class="list-group">\n <div class="list-group-item">\n <h3>Resources</h3>\n </div>\n <a href="#" \n ng-click="vm.selectMeters(meters, resource)" \n class="list-group-item" \n ng-repeat="(resource, meters) in vm.selectedResources" \n ng-class="{active: resource === vm.selectedResource}">\n {{resource}} <i class="glyphicon glyphicon-chevron-right pull-right"></i>\n </a>\n </div>\n </div>\n <div class="col-sm-8 animate-slide-left" ng-hide="!vm.selectedMeters">\n <div class="list-group">\n <div class="list-group-item">\n <h3>Meters</h3>\n </div>\n <div class="list-group-item">\n <div class="row">\n <div class="col-xs-6">\n <label>Name:</label>\n </div>\n <div class="col-xs-3">\n <label>Unit:</label>\n </div>\n <div class="col-xs-3"></div>\n </div>\n <div class="row" ng-click="vm.selectMeters(meters)" 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.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}}\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>Type:</th>\n <th>Meter:</th>\n <th>Unit:</th>\n <th>Value:</th>\n </tr>\n <tr ng-repeat="item in vm.stats">\n <td>{{item.type}}</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
