Merge pull request #120 from open-cloud/feature/folderConfig

Feature/folder config
diff --git a/xos/configurations/common/xos_common_config b/xos/configurations/common/xos_common_config
new file mode 100644
index 0000000..df30b54
--- /dev/null
+++ b/xos/configurations/common/xos_common_config
@@ -0,0 +1,44 @@
+[plc]
+name=plc
+deployment=plc
+
+[db]
+name=xos
+user=postgres
+password=password
+host=localhost
+port=5432
+
+[api]
+host=localhost
+port=8000
+ssl_key=None
+ssl_cert=None
+ca_ssl_cert=None
+ratelimit_enabled=0
+omf_enabled=0
+mail_support_address=support@localhost
+nova_enabled=True
+logfile=/var/log/xos.log
+
+[nova]
+admin_user=admin@domain.com
+admin_password=admin
+admin_tenant=admin
+url=http://localhost:5000/v2.0/
+default_image=None
+default_flavor=m1.small
+default_security_group=default
+ca_ssl_cert=/etc/ssl/certs/ca-certificates.crt
+
+[observer]
+pretend=False
+backoff_disabled=False
+images_directory=/opt/xos/images
+dependency_graph=/opt/xos/model-deps
+logfile=/var/log/xos_backend.log
+
+[gui]
+disable_minidashboard=True
+branding_name=Open Cloud
+branding_icon=/static/logo.png
diff --git a/xos/configurations/cord/Makefile b/xos/configurations/cord/Makefile
index 701e92f..7714d2a 100644
--- a/xos/configurations/cord/Makefile
+++ b/xos/configurations/cord/Makefile
@@ -3,8 +3,11 @@
 LAST_CONTAINER=$(shell sudo docker ps -l -q)
 
 cord: common_cloudlab ceilometer_dashboard virtualbng_json
+	rm ../../xos/xos_configuration/*
 	echo "# Autogenerated -- do not edit" > Dockerfile
 	cat ../common/Dockerfile.common Dockerfile.cord >> Dockerfile
+	cp ../common/xos_common_config ../../xos/xos_configuration/
+	cp ./xos_cord_config ../../xos/xos_configuration/
 	cd ../../..; sudo docker build -t xos -f xos/configurations/cord/Dockerfile .
 	sudo docker run -d --add-host="ctl:$(MYIP)" -p 9999:8000 xos
 	bash ../common/wait_for_xos.sh
diff --git a/xos/configurations/cord/xos_cord_config b/xos/configurations/cord/xos_cord_config
new file mode 100644
index 0000000..8dd0ae5
--- /dev/null
+++ b/xos/configurations/cord/xos_cord_config
@@ -0,0 +1,4 @@
+[gui]
+branding_name=CORD
+#branding_css=/static/cord.css
+branding_icon=/static/cord_logo_3.png
diff --git a/xos/configurations/devel/Makefile b/xos/configurations/devel/Makefile
index 24b7be7..f95c4e3 100644
--- a/xos/configurations/devel/Makefile
+++ b/xos/configurations/devel/Makefile
@@ -7,6 +7,8 @@
 devstack: common_devstack xos
 
 xos:
+	rm ../../xos/xos_configuration/*
+	cp ../common/xos_common_config ../../xos/xos_configuration/
 	echo "# Autogenerated -- do not edit" > Dockerfile
 	cat ../common/Dockerfile.common Dockerfile.devel >> Dockerfile
 	cd ../../..; sudo docker build -t xosproject/xos-devel -f xos/configurations/devel/Dockerfile .
diff --git a/xos/configurations/frontend/Makefile b/xos/configurations/frontend/Makefile
index 0a1f04a..ae1dbce 100644
--- a/xos/configurations/frontend/Makefile
+++ b/xos/configurations/frontend/Makefile
@@ -6,15 +6,20 @@
 all: frontend
 
 frontend:
+	rm ../../xos/xos_configuration/*
 	sudo apt-get -y install httpie
 	cat ../common/Dockerfile.common Dockerfile.frontend > Dockerfile
+	cp ../common/xos_common_config ../../xos/xos_configuration/
 	cd ../../..; sudo docker build -t xos -f xos/configurations/frontend/Dockerfile .
 	sudo docker run -v $(XOS_FOLDER)/../../core/xoslib:/opt/xos/core/xoslib -p 9999:8000 --add-host="0.0.0.0:127.0.0.1" xos
 	bash ../common/wait_for_xos.sh
 	echo $(RUNNING_CONTAINER)
 
 interactive:
+	rm ../../xos/xos_configuration/*
 	cat ../common/Dockerfile.common Dockerfile.frontend > Dockerfile
+	cp ../common/xos_common_config ../../xos/xos_configuration/
+	#cp ../cord/xos_cord_config ../../xos/xos_configuration/
 	cd ../../..; sudo docker build -t xos -f xos/configurations/frontend/Dockerfile .
 	echo "Inside the container run: /usr/bin/make -C /opt/xos/configurations/frontend -f Makefile.inside"
 	sudo docker run -it -v $(shell pwd)/../..:/opt/xos -p 9999:8000 --add-host="0.0.0.0:127.0.0.1" xos
diff --git a/xos/configurations/frontend/Makefile.inside b/xos/configurations/frontend/Makefile.inside
index f3fc898..48046b2 100644
--- a/xos/configurations/frontend/Makefile.inside
+++ b/xos/configurations/frontend/Makefile.inside
@@ -3,7 +3,7 @@
 setup_xos:
 	chmod +x /opt/xos/scripts/opencloud;
 	/opt/xos/scripts/opencloud genkeys;
-	/opt/xos/scripts/opencloud remigrate;
+#	/opt/xos/scripts/opencloud remigrate;
 	bash /opt/xos/tosca/install_tosca.sh;
 	bash /opt/xos/scripts/docker_setup_xos
 	python /opt/xos/tosca/run.py padmin@vicci.org /opt/xos/configurations/frontend/sample.yaml
diff --git a/xos/core/static/xos.css b/xos/core/static/xos.css
index 60140ce..40cfcc3 100644
--- a/xos/core/static/xos.css
+++ b/xos/core/static/xos.css
@@ -1,4 +1,4 @@
-************************
+/************************
 colors:
     tab - active/focus color
     background-color: #105E9E !important;
@@ -12,8 +12,8 @@
 
 *************************/
 
-html, body {
-  /*height: 100%;*/
+html, body, body.login {
+  height: 100%;
   min-height: 100%;
   margin: 0;
 }
@@ -27,6 +27,15 @@
   min-height: 100%;
 }*/
 
+/* ************************* LOGIN PAGE ************************* */
+
+body.login img.logo{
+   width: 250px;
+   display: block;
+   margin: 20px auto;
+   padding-top: 20px;
+}
+
 /* ************************* SIDENAV TOGGLE ************************* */
 
 #wrapper {
@@ -1361,4 +1370,4 @@
     width: auto;
     padding: 10px;
     border-radius: 5px;
-}
\ No newline at end of file
+}
diff --git a/xos/core/xoslib/ngXosViews/ceilometerDashboard/bower.json b/xos/core/xoslib/ngXosViews/ceilometerDashboard/bower.json
index 22da52a..c11ad13 100644
--- a/xos/core/xoslib/ngXosViews/ceilometerDashboard/bower.json
+++ b/xos/core/xoslib/ngXosViews/ceilometerDashboard/bower.json
@@ -15,7 +15,8 @@
     "tests"
   ],
   "dependencies": {
-    "angular-chart.js": "~0.8.7"
+    "angular-chart.js": "~0.8.7",
+    "angular-animate": "~1.4.8"
   },
   "devDependencies": {
     "jquery": "~2.1.4",
diff --git a/xos/core/xoslib/ngXosViews/ceilometerDashboard/env/srikanth.js b/xos/core/xoslib/ngXosViews/ceilometerDashboard/env/srikanth.js
new file mode 100644
index 0000000..c7b051d
--- /dev/null
+++ b/xos/core/xoslib/ngXosViews/ceilometerDashboard/env/srikanth.js
@@ -0,0 +1,13 @@
+// This is a default configuration for your development environment.
+// You can duplicate this configuration for any of your Backend Environments.
+// Different configurations are loaded setting a NODE_ENV variable that contain the config file name.
+// `NODE_ENV=local npm start`
+//
+// If xoscsrftoken or xossessionid are not specified the browser value are used
+// (works only for local environment as both application are served on the same domain)
+
+module.exports = {
+  host: 'http://130.127.133.87:9999',
+  xoscsrftoken: 'z0Ddap4Cx0v7onhXuqq1cIyp1NbYFUjA',
+  xossessionid: 'c93iufpoe8e7vbo6uesrh8j5xnvb6fva'
+};
diff --git a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/css/ceilometerDashboard.css b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/css/ceilometerDashboard.css
index 56ae00f..e6fb7a8 100644
--- a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/css/ceilometerDashboard.css
+++ b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/css/ceilometerDashboard.css
@@ -19,10 +19,14 @@
     height: 300px;
   }
 
-  /* Loader */
+  .btn-chart, .btn-chart:hover {
+    color: #fff;
+  }
+
+  /* LOADER */
   .loader {
     font-size: 10px;
-    margin: 50px auto;
+    margin: 150px auto;
     text-indent: -9999em;
     width: 11em;
     height: 11em;
@@ -84,40 +88,129 @@
     }
   }
 
-  /* Split.js */
+  /* VIEW ANIMATION */
 
-  html, body {
-    height: 100%;
+  [ui-view] {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 100%;
   }
 
-  body {
-    box-sizing: border-box;
+  /* 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;
   }
 
-  .split {
-    -webkit-box-sizing: border-box;
-       -moz-box-sizing: border-box;
-            box-sizing: border-box;
-    overflow-y: auto;
-    overflow-x: hidden;
+  /* FROM DETAIL TO DASHBOARD */
+
+  /* samples out */
+  [ui-view].samples.ng-leave {
+    animation:1s bounceOutRight ease; 
   }
-  .gutter {
-    background-color: transparent;
-    background-repeat: no-repeat;
-    background-position: 50%;
-  }
-  .gutter.gutter-horizontal {
-    cursor: col-resize;
-    background-image: url('grips/vertical.png');
-  }
-  .gutter.gutter-vertical {
-    cursor: row-resize;
-    background-image: url('grips/horizontal.png');
-  }
-  .split.split-horizontal, .gutter.gutter-horizontal {
-    height: 100%;
-    float: left;
+  /* 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 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);
+    }
+  }
 
 /*}
\ 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 adaa2ee..de89045 100644
--- a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/index.html
+++ b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/index.html
@@ -10,16 +10,15 @@
 <link rel="stylesheet" href="/css/dev.css">
 <!-- endinject -->
 <link rel="stylesheet" href="css/ceilometerDashboard.css">
-
 <div ng-app="xos.ceilometerDashboard" id="xosCeilometerDashboard">
-    <div ui-view></div>
+  <div ui-view ng-class="stateName"></div>
 </div>
 
 <!-- bower:js -->
-<script src="vendor/Split.js/split.js"></script>
 <script src="vendor/angular/angular.js"></script>
 <script src="vendor/Chart.js/Chart.js"></script>
 <script src="vendor/angular-chart.js/dist/angular-chart.js"></script>
+<script src="vendor/angular-animate/angular-animate.js"></script>
 <script src="vendor/jquery/dist/jquery.js"></script>
 <script src="vendor/angular-mocks/angular-mocks.js"></script>
 <script src="vendor/angular-ui-router/release/angular-ui-router.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 75c7eaa..5085813 100644
--- a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/js/main.js
+++ b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/js/main.js
@@ -6,10 +6,10 @@
   'ngLodash',
   'ui.router',
   'xos.helpers',
-  // 'angularCharts',
+  'ngAnimate',
   'chart.js'
 ])
-.config(($stateProvider) => {
+.config(($stateProvider, $urlRouterProvider) => {
   $stateProvider
   .state('ceilometerDashboard', {
     url: '/',
@@ -29,15 +29,31 @@
     },
     templateUrl: 'templates/split.html'
   });
+  $urlRouterProvider.otherwise('/');
 })
 .config(function($httpProvider){
   $httpProvider.interceptors.push('NoHyperlinks');
 })
+.run(function($rootScope){
+  $rootScope.stateName = 'ceilometerDashboard';
+  $rootScope.$on('$stateChangeStart', (event, toState) => {
+    console.log(toState.name);
+    $rootScope.stateName = toState.name;
+  })
+})
 .service('Ceilometer', function($http, $q){
+
+  this.sliceDetails = {};
+
+  this.formatSliceDetails = (meters) => {
+
+  };
+
   this.getMeters = () => {
     let deferred = $q.defer();
 
-    $http.get('/xoslib/meters/', {cache: true})
+    // $http.get('/xoslib/meters/', {cache: true})
+    $http.get('../meters_mock.json', {cache: true})
     .then((res) => {
       deferred.resolve(res.data)
     })
@@ -91,6 +107,35 @@
 
       this.loadMeters();
 
+      /**
+      * Select Resources for a slice
+      *
+      * @param Array resources The list of selected resources
+      * @returns void
+      */
+      this.selectedResources = null;
+      this.selectResources = (resources, slice) => {
+        //cleaning
+        this.selectedResources = null;
+        this.selectedResource = null;
+        this.selectedMeters = null;
+
+        this.selectedResources = resources;
+        this.selectedSlice = slice;
+      }
+
+      /**
+      * 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;
+        this.selectedResource = resource;
+      }
+
     }
   };
 })
@@ -106,30 +151,39 @@
     templateUrl: 'templates/ceilometer-samples.tpl.html',
     controller: function(Ceilometer) {
 
+      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;
       }
 
-      this.formatDateLabels = (date) => {
-        // date = new Date(date);
-        // return `${date.getMonth()}/${date.getYear()}`
-        return date;
-      };
+      // Mock
 
-      this.formatSamplesData = (data) => {
-
-        let formatted = [];
-
-        lodash.forEach(data, (item) => {
-          formatted.push({
-            x: this.formatDateLabels(item.timestamp),
-            y: [item.volume]
-          });
-        });
-
-        return lodash.sortBy(formatted, 'timestamp');
-      }
+      /**
+      * 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) => {
@@ -139,6 +193,13 @@
         }, []);
       };
 
+      /**
+      * 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);
@@ -146,16 +207,63 @@
         }, []);
       }
 
+      /**
+      * 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(resource_id);
+        lodash.remove(this.sampleLabels, {id: resource_id});
+      }
+
+      this.removeFromChart = (resource_id) => {
+        this.chart.data.splice(this.chart.series.indexOf(resource_id), 1);
+        this.chart.series.splice(this.chart.series.indexOf(resource_id), 1);
+        this.chartMeters.splice(this.chartMeters.indexOf(resource_id), 1);
+        this.sampleLabels.push({
+          id: resource_id,
+          // TODO add resource name
+        })
+      };
+
+      /**
+      * Format samples to create a list of labels and ids
+      */
+     
+      this.formatSamplesLabels = (samples) => {
+
+        return lodash.uniq(samples.reduce((labels, item) => {
+          labels.push({
+            id: item.resource_id,
+            // TODO add resource name
+          });
+          return labels;
+        }, []), item => item.id);
+      }
+
+
+      /**
+      * Load the samples and format data
+      */
+
       this.showSamples = () => {
         this.loader = true;
-        Ceilometer.getSamples(this.name, this.tenant)
+        // Ceilometer.getSamples(this.name, this.tenant) //fetch one
+        Ceilometer.getSamples(this.name) //fetch all
         .then(res => {
-          res = lodash.sortBy(res, 'timestamp');
-          this.chart = {
-            series: [this.name],
-            labels: this.getLabels(res),
-            data: [this.getData(res)]
-          }
+
+          // 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 => {
           console.warn(err);
diff --git a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/meters_mock.json b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/meters_mock.json
new file mode 100644
index 0000000..e6203ed
--- /dev/null
+++ b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/meters_mock.json
@@ -0,0 +1,145 @@
+[
+    {
+        "project_name": "mysite_onos_vbng", 
+        "user_id": "bcb8c1f07ab94a948b0ea491f2ba43f1", 
+        "name": "subnet", 
+        "resource_id": "6ebbcbdb-a172-41bf-8014-686c017c3d5a", 
+        "label": "", 
+        "source": "openstack", 
+        "meter_id": "NmViYmNiZGItYTE3Mi00MWJmLTgwMTQtNjg2YzAxN2MzZDVhK3N1Ym5ldA==\n", 
+        "project_id": "75bf7d7deee744749ac76dc6d2e22c28", 
+        "type": "gauge", 
+        "unit": "subnet", 
+        "description": "Existence of subnet"
+    }, 
+    {
+        "project_name": "mysite_onos_vbng", 
+        "user_id": "bcb8c1f07ab94a948b0ea491f2ba43f1", 
+        "name": "network", 
+        "resource_id": "2ccafd0d-630f-45db-9b0e-b58a9d1de494", 
+        "label": "", 
+        "source": "openstack", 
+        "meter_id": "MmNjYWZkMGQtNjMwZi00NWRiLTliMGUtYjU4YTlkMWRlNDk0K25ldHdvcms=\n", 
+        "project_id": "75bf7d7deee744749ac76dc6d2e22c28", 
+        "type": "gauge", 
+        "unit": "network", 
+        "description": "Existence of network"
+    }, 
+    {
+        "project_name": "mysite_onos_vbng", 
+        "user_id": "bcb8c1f07ab94a948b0ea491f2ba43f1", 
+        "name": "instance", 
+        "resource_id": "03663f84-adb2-40cf-ac22-b48dd18909da", 
+        "label": "", 
+        "source": "openstack", 
+        "meter_id": "MDM2NjNmODQtYWRiMi00MGNmLWFjMjItYjQ4ZGQxODkwOWRhK2luc3RhbmNl\n", 
+        "project_id": "75bf7d7deee744749ac76dc6d2e22c28", 
+        "type": "gauge", 
+        "unit": "instance", 
+        "description": "Existence of instance"
+    }, 
+    {
+        "project_name": "mysite_onos_vbng", 
+        "user_id": "bcb8c1f07ab94a948b0ea491f2ba43f1", 
+        "name": "network.incoming.bytes.rate", 
+        "resource_id": "instance-0000000c-03663f84-adb2-40cf-ac22-b48dd18909da-tapb62de4c8-a8", 
+        "label": "", 
+        "source": "openstack", 
+        "meter_id": "aW5zdGFuY2UtMDAwMDAwMGMtMDM2NjNmODQtYWRiMi00MGNmLWFjMjItYjQ4ZGQxODkwOWRhLXRh\ncGI2MmRlNGM4LWE4K25ldHdvcmsuaW5jb21pbmcuYnl0ZXMucmF0ZQ==\n", 
+        "project_id": "75bf7d7deee744749ac76dc6d2e22c28", 
+        "type": "gauge", 
+        "unit": "B/s", 
+        "description": "Average rate per sec of incoming bytes on a VM network interface"
+    }, 
+    {
+        "project_name": "mysite_vcpe", 
+        "user_id": "bcb8c1f07ab94a948b0ea491f2ba43f1", 
+        "name": "port", 
+        "resource_id": "a14625cf-4184-460c-bef2-a2f8ff2054de", 
+        "label": "", 
+        "source": "openstack", 
+        "meter_id": "YTE0NjI1Y2YtNDE4NC00NjBjLWJlZjItYTJmOGZmMjA1NGRlK3BvcnQ=\n", 
+        "project_id": "1e948b44facc4efd81567d94b7c4d7a8", 
+        "type": "gauge", 
+        "unit": "port", 
+        "description": "Existence of port"
+    }, 
+    {
+        "project_name": "mysite_onos_vbng", 
+        "user_id": "bcb8c1f07ab94a948b0ea491f2ba43f1", 
+        "name": "cpu_util", 
+        "resource_id": "03663f84-adb2-40cf-ac22-b48dd18909da", 
+        "label": "", 
+        "source": "openstack", 
+        "meter_id": "MDM2NjNmODQtYWRiMi00MGNmLWFjMjItYjQ4ZGQxODkwOWRhK2NwdV91dGls\n", 
+        "project_id": "75bf7d7deee744749ac76dc6d2e22c28", 
+        "type": "gauge", 
+        "unit": "%", 
+        "description": "Average CPU utilization"
+    }, 
+    {
+        "project_name": "mysite_onos_vbng", 
+        "user_id": "bcb8c1f07ab94a948b0ea491f2ba43f1", 
+        "name": "vcpus", 
+        "resource_id": "03663f84-adb2-40cf-ac22-b48dd18909da", 
+        "label": "", 
+        "source": "openstack", 
+        "meter_id": "MDM2NjNmODQtYWRiMi00MGNmLWFjMjItYjQ4ZGQxODkwOWRhK3ZjcHVz\n", 
+        "project_id": "75bf7d7deee744749ac76dc6d2e22c28", 
+        "type": "gauge", 
+        "unit": "vcpu", 
+        "description": "Number of VCPUs"
+    }, 
+    {
+        "project_name": "mysite_onos_vbng", 
+        "user_id": "bcb8c1f07ab94a948b0ea491f2ba43f1", 
+        "name": "network.outgoing.bytes.rate", 
+        "resource_id": "instance-0000000c-03663f84-adb2-40cf-ac22-b48dd18909da-tapb62de4c8-a8", 
+        "label": "", 
+        "source": "openstack", 
+        "meter_id": "aW5zdGFuY2UtMDAwMDAwMGMtMDM2NjNmODQtYWRiMi00MGNmLWFjMjItYjQ4ZGQxODkwOWRhLXRh\ncGI2MmRlNGM4LWE4K25ldHdvcmsub3V0Z29pbmcuYnl0ZXMucmF0ZQ==\n", 
+        "project_id": "75bf7d7deee744749ac76dc6d2e22c28", 
+        "type": "gauge", 
+        "unit": "B/s", 
+        "description": "Average rate per sec of outgoing bytes on a VM network interface"
+    }, 
+    {
+        "project_name": "mysite_onos_vbng", 
+        "user_id": "bcb8c1f07ab94a948b0ea491f2ba43f1", 
+        "name": "memory", 
+        "resource_id": "03663f84-adb2-40cf-ac22-b48dd18909da", 
+        "label": "", 
+        "source": "openstack", 
+        "meter_id": "MDM2NjNmODQtYWRiMi00MGNmLWFjMjItYjQ4ZGQxODkwOWRhK21lbW9yeQ==\n", 
+        "project_id": "75bf7d7deee744749ac76dc6d2e22c28", 
+        "type": "gauge", 
+        "unit": "MB", 
+        "description": "Volume of RAM"
+    }, 
+    {
+        "project_name": "mysite_onos_vbng", 
+        "user_id": "bcb8c1f07ab94a948b0ea491f2ba43f1", 
+        "name": "cpu", 
+        "resource_id": "03663f84-adb2-40cf-ac22-b48dd18909da", 
+        "label": "", 
+        "source": "openstack", 
+        "meter_id": "MDM2NjNmODQtYWRiMi00MGNmLWFjMjItYjQ4ZGQxODkwOWRhK2NwdQ==\n", 
+        "project_id": "75bf7d7deee744749ac76dc6d2e22c28", 
+        "type": "cumulative", 
+        "unit": "ns", 
+        "description": "CPU time used"
+    }, 
+    {
+        "project_name": "mysite_onos_vbng", 
+        "user_id": "bcb8c1f07ab94a948b0ea491f2ba43f1", 
+        "name": "memory.usage", 
+        "resource_id": "03663f84-adb2-40cf-ac22-b48dd18909da", 
+        "label": "", 
+        "source": "openstack", 
+        "meter_id": "MDM2NjNmODQtYWRiMi00MGNmLWFjMjItYjQ4ZGQxODkwOWRhK21lbW9yeS51c2FnZQ==\n", 
+        "project_id": "75bf7d7deee744749ac76dc6d2e22c28", 
+        "type": "gauge", 
+        "unit": "MB", 
+        "description": "Volume of RAM used"
+    }
+]
\ 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 3eee429..2227659 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
@@ -1,6 +1,6 @@
 <div class="row">
   <div class="col-sm-12">
-    <h1>Ceilometer Dashboard</h1>
+    <h1>XOS Monitoring Statistics</h1>
   </div>
 </div>
 
@@ -10,52 +10,44 @@
   </div>
 </div>
 
-<section ng-hide="vm.loader">
+<section ng-hide="vm.loader" ng-class="{animate: !vm.loader}">
   <div class="row">
-    <div class="col-xs-12">
-      <h2>Projects</h2>
-    </div>
-  </div>
-  <div class="well" ng-repeat="(project, resources) in vm.projects">
-    <div class="row">
-      <div class="col-xs-11">
-        <h3>{{project}}</h3>
-      </div>
-      <div class="col-xs-1">
-        <a ng-click="expandProject = !expandProject" class="btn btn-primary">
-          <i class="glyphicon glyphicon-plus"></i>
+    <div class="col-sm-4">
+      <div class="list-group">
+        <div class="list-group-item">
+          <h2>Service Name</h2>
+        </div>
+        <a href="#" ng-click="vm.selectResources(resources, slice)" class="list-group-item" ng-repeat="(slice, resources) in vm.projects" ng-class="{active: slice === vm.selectedSlice}">
+          {{slice}} <i class="glyphicon glyphicon-chevron-right pull-right"></i>
         </a>
       </div>
     </div>
-    
-    <div class="row">
-      <div class="panel panel-default" ng-show="expandProject">
-        <div class="panel-heading">
-          <h4>Resources</h4>
+    <div class="col-sm-4 animate-slide-left" ng-hide="!vm.selectedResources">
+      <div class="list-group">
+        <div class="list-group-item">
+          <h2>Resources</h2>
         </div>
-        <div class="panel-body" ng-repeat="(resource, meters) in resources">
+        <a href="#" ng-click="vm.selectMeters(meters, resource)" class="list-group-item" ng-repeat="(resource, meters) in vm.selectedResources" ng-class="{active: resource === vm.selectedResource}">
+          {{resource}} <i class="glyphicon glyphicon-chevron-right pull-right"></i>
+        </a>
+      </div>
+    </div>
+    <div class="col-sm-4 animate-slide-left" ng-hide="!vm.selectedMeters">
+      <div class="list-group">
+        <div class="list-group-item">
+          <h2>Meters</h2>
+        </div>
+        <div class="list-group-item">
           <div class="row">
-            <div class="col-xs-11">
-              <b>{{resource}}</b>
+            <div class="col-xs-4">
+              <label>Name:</label>
             </div>
-            <div class="col-xs-1">
-              <a ng-click="expandResource = !expandResource" class="btn btn-primary">
-                <i class="glyphicon glyphicon-plus"></i>
-              </a>
+            <div class="col-xs-4">
+              <label>Unit:</label>
             </div>
+            <div class="col-xs-4"></div>
           </div>
-          <div class="row" ng-show="expandResource">
-            <div class="col-xs-4">
-              <b>Meter:</b>
-            </div>
-            <div class="col-xs-4">
-              <b>Unit:</b>
-            </div>
-            <div class="col-xs-4">
-              <b>Actions:</b>
-            </div>
-          </div>
-          <div class="row" ng-repeat="meter in meters" ng-show="expandResource">
+          <div class="row" ng-click="vm.selectMeters(meters)" ng-repeat="meter in vm.selectedMeters" style="margin-bottom: 10px;">
             <div class="col-xs-4">
               {{meter.name}}
             </div>
@@ -63,21 +55,13 @@
               {{meter.unit}}
             </div>
             <div class="col-xs-4">
-              <!-- <a ng-click="showMeter = !showMeter" class="btn btn-primary">
-                <i class="glyphicon glyphicon-search"></i> Details
-              </a> -->
-              <a ng-click="showChart = !showChart" class="btn btn-primary">
-                <i class="glyphicon glyphicon-search"></i> View chart
+              <a ui-sref="samples({name: meter.name, tenant: meter.resource_id})" class="btn btn-primary">
+                <i class="glyphicon glyphicon-search"></i>
               </a>
             </div>
-            <!--   -->
-            <div class="col-xs-12" ng-show="showChart">
-              <ceilometer-samples name="meter.name" tenant="meter.project_id" ng-if="showChart"></ceilometer-samples>
-            </div>
           </div>
         </div>
       </div>
     </div>
-
   </div>
-</section>
\ No newline at end of file
+</section>
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 d935e27..b2d92d7 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
@@ -1,13 +1,46 @@
+<!-- <pre>{{ vm | json}}</pre> -->
+
 <div class="row">
-  <div class="col-xs-12" ng-show="vm.loader">
+  <div class="col-xs-10">
+    <h1>{{vm.name | uppercase}}</h1>
+  </div>
+  <div class="col-xs-2">
+    <a ui-sref="ceilometerDashboard" class="btn btn-primary pull-right">
+      <i class="glyphicon glyphicon-arrow-left"></i> Back to list
+    </a>
+  </div>
+</div>
+<div class="row" ng-if="!vm.loader">
+  <form class="form-inline col-xs-8" ng-submit="vm.addMeterToChart(vm.addMeterValue)">
+    <select ng-model="vm.addMeterValue" class="form-control" ng-options="resource.id as resource.id for resource in vm.sampleLabels"></select>
+    <button class="btn btn-success"> 
+      <i class="glyphicon glyphicon-plus"></i> Add
+    </button>
+  </form>
+  <div class="col-xs-4 text-right">
+    <a ng-click="vm.chartType = 'line'" class="btn" ng-class="{'btn-default': vm.chartType != 'bar', 'btn-primary': vm.chartType == 'line'}">Lines</a>
+    <a ng-click="vm.chartType = 'bar'" class="btn" ng-class="{'btn-default': vm.chartType != 'line', 'btn-primary': vm.chartType == 'bar'}">Bars</a>
+  </div>
+</div>
+
+<div class="row" ng-show="vm.loader">
+  <div class="col-xs-12">
     <div class="loader">Loading</div>
   </div>
-
-  <div class="col-xs-12" ng-if="!vm.loader">
-    <!-- <div ac-chart="'line'" ac-data="vm.sampleChartData" ac-config="vm.sampleChartConfig" class="chart"></div> -->
-    <canvas id="line" class="chart chart-line" chart-data="vm.chart.data"
-      chart-labels="vm.chart.labels" chart-legend="true" chart-series="vm.chart.series">
-    </canvas> 
-    <!-- <pre> {{ vm.chart | json }} </pre> -->
+</div>
+<div class="row" ng-if="!vm.loader">
+  <div class="col-xs-12">
+    <canvas ng-if="vm.chartType === 'line'" id="line" class="chart chart-line" chart-data="vm.chart.data" chart-options="{datasetFill: false}"
+      chart-labels="vm.chart.labels" chart-legend="false" chart-series="vm.chart.series">
+    </canvas>
+    <canvas ng-if="vm.chartType === 'bar'" id="bar" class="chart chart-bar" chart-data="vm.chart.data"
+      chart-labels="vm.chart.labels" chart-legend="false" chart-series="vm.chart.series">
+    </canvas>
+    <!-- <pre>{{vm.chartMeters | json}}</pre> -->
+  </div>
+</div>
+<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}}</a>
   </div>
 </div>
\ No newline at end of file
diff --git a/xos/templates/admin/base.html b/xos/templates/admin/base.html
index cae98ac..f049da9 100644
--- a/xos/templates/admin/base.html
+++ b/xos/templates/admin/base.html
@@ -64,7 +64,7 @@
       {% if not is_popup %}
       <div id="sidebar-wrapper">
         <a href="{% url 'admin:index' %}" class="hidden-xs">
-          <img class="logo" src="{% static 'cord_logo_3.png' %}"/>
+          <img class="logo" src="{% static XOS_BRANDING_ICON %}"/>
         </a>
         {% include 'suit/menu.html' %}
         <button class="navbar-toggle collapsed visible-xs" type="button">
@@ -328,4 +328,4 @@
     });
   </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/xos/templates/admin/login.html b/xos/templates/admin/login.html
index 5b7ec4d..87bccd0 100644
--- a/xos/templates/admin/login.html
+++ b/xos/templates/admin/login.html
@@ -40,7 +40,7 @@
 {% endif %}
 <div id="wrap">
 <div id="content-main">
-<h1><i class="icon-lock icon-white"></i> OpenCloud</h1>
+          <img class="logo" src="{% static XOS_BRANDING_ICON %}"/>
 <form action="{{ app_path }}" method="post" id="login-form">{% csrf_token %}
   <div class="form-row">
     {% if not form.this_is_the_login_form.errors %}{{ form.username.errors }}{% endif %}
diff --git a/xos/xos/config.py b/xos/xos/config.py
index 83d69cb..ab78fa1 100644
--- a/xos/xos/config.py
+++ b/xos/xos/config.py
@@ -13,7 +13,7 @@
 """
 
 XOS_DIR = "/opt/xos"
-DEFAULT_CONFIG_FN = os.path.join(XOS_DIR, "xos_config")
+DEFAULT_CONFIG_FN = os.path.join(XOS_DIR, "xos/xos_configuration/")
 
 # warning for now, remove once we're sure everyone has made the change
 if (os.path.exists("/opt/planetstack/plstackapi_config") and (not os.path.exists(DEFAULT_CONFIG_FN))):
@@ -40,7 +40,7 @@
 		self.config_path = os.path.dirname(config_file)
 		self.config = ConfigParser.ConfigParser()
 		self.filename = config_file
-		if not os.path.isfile(self.filename):
+		if not os.path.isfile(self.filename) and not os.path.isdir(self.filename):
 			self.create(self.filename)
 		self.load(self.filename)
 
@@ -80,7 +80,12 @@
 	def load(self, filename):
 		if filename:
 			try:
-				self.config.read(filename)
+				if os.path.isdir(filename):
+					config_list = list(reversed(os.listdir(filename)))
+					config_list = [DEFAULT_CONFIG_FN + s for s in config_list]
+					self.config.read(config_list)
+				else:
+					self.config.read(filename)
 			except ConfigParser.MissingSectionHeaderError:
 				if filename.endswith('.xml'):
 					self.load_xml(filename)
diff --git a/xos/xos/xos_configuration/xos_common_config b/xos/xos/xos_configuration/xos_common_config
new file mode 100755
index 0000000..b86d618
--- /dev/null
+++ b/xos/xos/xos_configuration/xos_common_config
@@ -0,0 +1,45 @@
+[plc]
+name=plc
+deployment=plc
+
+[db]
+name=xos
+user=postgres
+password=password
+host=localhost
+port=5432
+
+[api]
+host=localhost
+port=8000
+ssl_key=None
+ssl_cert=None
+ca_ssl_cert=None
+ratelimit_enabled=0
+omf_enabled=0
+mail_support_address=support@localhost
+nova_enabled=True
+logfile=/var/log/xos.log
+
+[nova]
+admin_user=admin@domain.com
+admin_password=admin
+admin_tenant=admin
+url=http://localhost:5000/v2.0/
+default_image=None
+default_flavor=m1.small
+default_security_group=default
+ca_ssl_cert=/etc/ssl/certs/ca-certificates.crt
+
+[observer]
+pretend=False
+backoff_disabled=False
+images_directory=/opt/xos/images
+dependency_graph=/opt/xos/model-deps
+logfile=/var/log/xos_backend.log
+
+[gui]
+disable_minidashboard=True
+#branding_name=CORD
+#branding_css=/static/cord.css
+#branding_icon=/static/onos-logo.png
diff --git a/xos/xos/xos_configuration/xos_frontend_config b/xos/xos/xos_configuration/xos_frontend_config
new file mode 100755
index 0000000..13fe53b
--- /dev/null
+++ b/xos/xos/xos_configuration/xos_frontend_config
@@ -0,0 +1,4 @@
+[gui]
+branding_name=CORD
+branding_css=/static/cord.css
+branding_icon=/static/onos-logo.png