Showing VMs stats
diff --git a/views/ngXosViews/diagnostic/src/js/logicTopology.js b/views/ngXosViews/diagnostic/src/js/logicTopology.js
index 9181e56..da2fef6 100644
--- a/views/ngXosViews/diagnostic/src/js/logicTopology.js
+++ b/views/ngXosViews/diagnostic/src/js/logicTopology.js
@@ -10,12 +10,13 @@
       },
       bindToController: true,
       controllerAs: 'vm',
-      template: '',
-      controller: function($element, $log, $scope, $rootScope, d3, LogicTopologyHelper, Node, Tenant, Ceilometer){
+      templateUrl: 'templates/logicTopology.tpl.html',
+      controller: function($element, $log, $scope, $rootScope, $timeout, d3, LogicTopologyHelper, Node, Tenant, Ceilometer){
         $log.info('Logic Plane');
 
         var svg;
-
+        this.selectedInstances = [];
+        this.hideInstanceStats = true;
 
         const handleSvg = (el) => {
 
@@ -45,9 +46,16 @@
           }
         });
 
-        $rootScope.$on('instance.detail', (evt, service) => {
+        $rootScope.$on('instance.detail.hide', () => {
+          this.hideInstanceStats = true;
+          $timeout(() => {
+            this.selectedInstances = [];
+            LogicTopologyHelper.getInstanceStatus([]);
+            LogicTopologyHelper.updateTree(svg);
+          }, 500);
+        });
 
-          $log.info(`Highlight instance`, service)
+        $rootScope.$on('instance.detail', (evt, service) => {
 
           let param = {
             'service_vsg': {kind: 'vCPE'},
@@ -57,14 +65,24 @@
 
           Tenant.queryVsgInstances(param[service.name]).$promise
           .then((instances) => {
-            console.log(instances);
-            LogicTopologyHelper.getInstanceStatus(instances);
-            LogicTopologyHelper.updateTree(svg);
 
             return Ceilometer.getInstancesStats(instances);
           })
-          .then((stats) => {
-            console.log('stats', stats);
+          .then((instances) => {
+            this.hideInstanceStats = false;
+            // HACK if array is empty wait for animation
+            if(instances.length === 0){
+              this.hideInstanceStats = true;
+              $timeout(() => {
+                this.selectedInstances = instances;
+              }, 500);
+            }
+            else{
+              this.selectedInstances = instances;
+            }
+            
+            LogicTopologyHelper.getInstanceStatus(instances);
+            LogicTopologyHelper.updateTree(svg);
           })
           .catch((e) => {
             throw new Error(e);
diff --git a/views/ngXosViews/diagnostic/src/js/logicTopologyHelper.js b/views/ngXosViews/diagnostic/src/js/logicTopologyHelper.js
index f9c0850..3be26c5 100644
--- a/views/ngXosViews/diagnostic/src/js/logicTopologyHelper.js
+++ b/views/ngXosViews/diagnostic/src/js/logicTopologyHelper.js
@@ -223,13 +223,13 @@
         });
       });
 
-      lodash.forEach(instances, (id) => {
+      lodash.forEach(instances, (instance) => {
         computeNodes.map((node) => {
-          node.instances.map((instance) => {
-            if(instance.id === id){
-              instance.selected = true;
+          node.instances.map((d3instance) => {
+            if(d3instance.id === instance.id){
+              d3instance.selected = true;
             }
-            return instance;
+            return d3instance;
           });
         });
       });
diff --git a/views/ngXosViews/diagnostic/src/js/nodeDrawer.js b/views/ngXosViews/diagnostic/src/js/nodeDrawer.js
index 128848d..62e2cdf 100644
--- a/views/ngXosViews/diagnostic/src/js/nodeDrawer.js
+++ b/views/ngXosViews/diagnostic/src/js/nodeDrawer.js
@@ -155,6 +155,8 @@
 
     this.drawInstances = (container, instances) => {
       
+      // TODO check for stats field in instance and draw popup
+
       let {width, height} = container.node().getBoundingClientRect();
 
       let elements = container.selectAll('.instances')
diff --git a/views/ngXosViews/diagnostic/src/js/rest_services.js b/views/ngXosViews/diagnostic/src/js/rest_services.js
index 733a690..885b3de 100644
--- a/views/ngXosViews/diagnostic/src/js/rest_services.js
+++ b/views/ngXosViews/diagnostic/src/js/rest_services.js
@@ -39,7 +39,7 @@
     this.getInstanceStats = (instanceUuid) => {
       let deferred = $q.defer();
 
-      $http.get('/xoslib/meterstatistics', {resource: instanceUuid})
+      $http.get('/xoslib/meterstatistics', {params:{resource: instanceUuid}})
       .then((res) => {
         deferred.resolve(res.data);
       })
diff --git a/views/ngXosViews/diagnostic/src/js/serviceTopologyHelper.js b/views/ngXosViews/diagnostic/src/js/serviceTopologyHelper.js
index 2b92ba5..817e79e 100644
--- a/views/ngXosViews/diagnostic/src/js/serviceTopologyHelper.js
+++ b/views/ngXosViews/diagnostic/src/js/serviceTopologyHelper.js
@@ -219,6 +219,13 @@
 
     const serviceClick = function(d) {
 
+      // if was selected
+      if(d.selected){
+        d.selected = !d.selected;
+        $rootScope.$emit('instance.detail.hide', {});
+        return updateTree(_svg, _layout, _source);
+      }
+
       $rootScope.$emit('instance.detail', {name: d.humanReadableName});
 
       // unselect all
@@ -226,15 +233,9 @@
       .each(d => d.selected = false);
 
       // toggling selected status
+      console.log(d.selected);
       d.selected = !d.selected;
 
-      var selectedNode = d3.select(this);
-
-      selectedNode
-        .transition()
-        .duration(serviceTopologyConfig.duration)
-        .attr('r', serviceTopologyConfig.circle.selectedRadius);
-
       updateTree(_svg, _layout, _source);
     };