Added accordion for service list
diff --git a/xos/core/xoslib/ngXosViews/ceilometerDashboard/.eslintrc b/xos/core/xoslib/ngXosViews/ceilometerDashboard/.eslintrc
index c852748..f495e79 100644
--- a/xos/core/xoslib/ngXosViews/ceilometerDashboard/.eslintrc
+++ b/xos/core/xoslib/ngXosViews/ceilometerDashboard/.eslintrc
@@ -29,6 +29,7 @@
"no-trailing-spaces": [1, { skipBlankLines: true }],
"no-unused-vars": [1, {"vars": "all", "args": "after-used"}],
"new-cap": 0,
+ "no-undef": 2,
//"angular/ng_module_name": [2, '/^xos\.*[a-z]*$/'],
//"angular/ng_controller_name": [2, '/^[a-z].*Ctrl$/'],
diff --git a/xos/core/xoslib/ngXosViews/ceilometerDashboard/bower.json b/xos/core/xoslib/ngXosViews/ceilometerDashboard/bower.json
index c11ad13..37fe0aa 100644
--- a/xos/core/xoslib/ngXosViews/ceilometerDashboard/bower.json
+++ b/xos/core/xoslib/ngXosViews/ceilometerDashboard/bower.json
@@ -16,7 +16,8 @@
],
"dependencies": {
"angular-chart.js": "~0.8.7",
- "angular-animate": "~1.4.8"
+ "angular-animate": "~1.4.8",
+ "ui.bootstrap": "~0.14.3"
},
"devDependencies": {
"jquery": "~2.1.4",
diff --git a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/css/ceilometerDashboard.css b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/css/ceilometerDashboard.css
index e6fb7a8..8d1d96b 100644
--- a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/css/ceilometerDashboard.css
+++ b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/css/ceilometerDashboard.css
@@ -23,6 +23,24 @@
color: #fff;
}
+ .service-list {
+ margin-top: -10px;
+ }
+
+ .service-list h3 {
+ margin-top: 0px;
+ margin-bottom: 0px;
+ }
+
+ .service-list a {
+ text-decoration: none;
+ color: #333;
+ }
+
+ .animate-slide-left {
+ margin-top: 25px;
+ }
+
/* LOADER */
.loader {
font-size: 10px;
@@ -120,7 +138,6 @@
}
/* COLUMS ANIMATION */
-
/* when showing the thing */
.animate .animate-slide-left.ng-hide-remove {
animation:0.5s bounceInRight ease;
@@ -189,6 +206,17 @@
}
}
+ @keyframes slideInUp {
+ from {
+ transform: translate3d(0, 100%, 0);
+ visibility: visible;
+ }
+
+ to {
+ transform: translate3d(0, 0, 0);
+ }
+ }
+
@keyframes bounceOutRight {
20% {
opacity: 1;
@@ -213,4 +241,15 @@
}
}
+ @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/ngXosViews/ceilometerDashboard/src/index.html b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/index.html
index de89045..9ac27cd 100644
--- a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/index.html
+++ b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/index.html
@@ -27,6 +27,8 @@
<script src="vendor/ng-lodash/build/ng-lodash.js"></script>
<script src="vendor/bootstrap-css/js/bootstrap.min.js"></script>
<!-- endbower --><!-- endjs -->
+<script src="vendor/ui.bootstrap/src/collapse/collapse.js"></script>
+<script src="vendor/ui.bootstrap/src/accordion/accordion.js"></script>
<!-- inject:js -->
<script src="/xosHelpers/src/xosHelpers.module.js"></script>
<script src="/xosHelpers/src/services/noHyperlinks.interceptor.js"></script>
diff --git a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/js/main.js b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/js/main.js
index ba433e1..7d6bff0 100644
--- a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/js/main.js
+++ b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/js/main.js
@@ -7,7 +7,8 @@
'ui.router',
'xos.helpers',
'ngAnimate',
- 'chart.js'
+ 'chart.js',
+ 'ui.bootstrap.accordion'
])
.config(($stateProvider, $urlRouterProvider) => {
$stateProvider
@@ -21,12 +22,6 @@
})
.state('split', {
url: '/split',
- controller: () => {
- console.log('split', Split);
- Split(['#one', '#two', '#three'], {
-
- });
- },
templateUrl: 'templates/split.html'
});
$urlRouterProvider.otherwise('/');
@@ -122,7 +117,7 @@
this.selectedResources = null;
this.selectedResource = null;
this.selectedMeters = null;
-
+
this.selectedService = service;
};
diff --git a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/templates/accordion-group.html b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/templates/accordion-group.html
new file mode 100644
index 0000000..069141d
--- /dev/null
+++ b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/templates/accordion-group.html
@@ -0,0 +1,10 @@
+<div class="panel {{panelClass || 'panel-default'}}">
+ <div class="panel-heading" ng-keypress="toggleOpen($event)">
+ <h3>
+ <a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading"><span ng-class="{'text-muted': isDisabled}">{{heading}}</span></a>
+ </h3>
+ </div>
+ <div class="panel-collapse collapse" uib-collapse="!isOpen">
+ <div class="panel-body" ng-transclude></div>
+ </div>
+</div>
diff --git a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/templates/accordion.html b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/templates/accordion.html
new file mode 100644
index 0000000..ba428f3
--- /dev/null
+++ b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/templates/accordion.html
@@ -0,0 +1 @@
+<div class="panel-group" ng-transclude></div>
\ No newline at end of file
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 ac3f233..784601e 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
@@ -12,26 +12,27 @@
<section ng-hide="vm.loader" ng-class="{animate: !vm.loader}">
<div class="row">
- <div class="col-sm-4">
- <div class="list-group">
- <div ng-repeat="(service, slices) in vm.projects">
- <div class="list-group-item">
- <h2 ng-click="vm.selectService(service)">{{service}}</h2>
- </div>
- <a ng-hide="vm.selectedService !== service"
- ng-repeat="(slice, resources) in slices"
- ng-class="{active: slice === vm.selectedSlice}"
- ng-click="vm.selectResources(resources, slice)"
- href="#" class="list-group-item" >
- {{slice}} <i class="glyphicon glyphicon-chevron-right pull-right"></i>
- </a>
- </div>
- </div>
+ <div class="col-sm-3 service-list">
+ <h3>XOS Service: </h3>
+ <uib-accordion close-others="true" template-url="templates/accordion.html">
+ <uib-accordion-group
+ ng-repeat="(service, slices) in vm.projects"
+ template-url="templates/accordion-group.html"
+ heading="{{service}}">
+ <h4>Slices:</h4>
+ <a ng-repeat="(slice, resources) in slices"
+ ng-class="{active: slice === vm.selectedSlice}"
+ ng-click="vm.selectResources(resources, slice)"
+ href="#" class="list-group-item" >
+ {{slice}} <i class="glyphicon glyphicon-chevron-right pull-right"></i>
+ </a>
+ </uib-accordion-group>
+ </uib-accordion>
</div>
- <div class="col-sm-4 animate-slide-left" ng-hide="!vm.selectedResources">
+ <div class="col-sm-3 animate-slide-left" ng-hide="!vm.selectedResources">
<div class="list-group">
<div class="list-group-item">
- <h2>Resources</h2>
+ <h3>Resources</h3>
</div>
<a href="#"
ng-click="vm.selectMeters(meters, resource)"
@@ -42,29 +43,29 @@
</a>
</div>
</div>
- <div class="col-sm-4 animate-slide-left" ng-hide="!vm.selectedMeters">
+ <div class="col-sm-6 animate-slide-left" ng-hide="!vm.selectedMeters">
<div class="list-group">
<div class="list-group-item">
- <h2>Meters</h2>
+ <h3>Meters</h3>
</div>
<div class="list-group-item">
<div class="row">
- <div class="col-xs-4">
+ <div class="col-xs-6">
<label>Name:</label>
</div>
- <div class="col-xs-4">
+ <div class="col-xs-3">
<label>Unit:</label>
</div>
- <div class="col-xs-4"></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="col-xs-4">
+ <div class="col-xs-6">
{{meter.name}}
</div>
- <div class="col-xs-4">
+ <div class="col-xs-3">
{{meter.unit}}
</div>
- <div class="col-xs-4">
+ <div class="col-xs-3">
<a ui-sref="samples({name: meter.name, tenant: meter.resource_id})" class="btn btn-primary">
<i class="glyphicon glyphicon-search"></i>
</a>