Builded diagnostic
diff --git a/views/ngXosViews/diagnostic/src/js/chart_data_service.js b/views/ngXosViews/diagnostic/src/js/chart_data_service.js
index 444f046..1fd093a 100644
--- a/views/ngXosViews/diagnostic/src/js/chart_data_service.js
+++ b/views/ngXosViews/diagnostic/src/js/chart_data_service.js
@@ -2,7 +2,7 @@
   'use strict';
 
   angular.module('xos.serviceTopology')
-  .service('ChartData', function($rootScope, $q, lodash, Tenant, Node, serviceTopologyConfig, Ceilometer) {
+  .service('ChartData', function($rootScope, $q, lodash, Tenant, Node, serviceTopologyConfig, Ceilometer, Instances) {
     this.currentSubscriber = null;
     this.currentServiceChain = null;
 
@@ -82,7 +82,8 @@
     };
 
     this.getSubscriberIP = () => {
-      const ip = this.currentServiceChain.children[0].children[0].tenant.wan_container_ip;
+      const ip = JSON.parse(this.currentServiceChain.children[0].children[0].tenant.service_specific_attribute).wan_container_ip;
+      // const ip = this.currentServiceChain.children[0].children[0].tenant.wan_container_ip;
       this.logicTopologyData.children[0].subscriberIP = ip;
     };
 
@@ -145,26 +146,35 @@
           attr = null;
         }
         
-        // if no instances are associated to the container
+        // if no instances are associated to the subscriber
         if(!attr || !attr.instance_id){
           let d = $q.defer();
           d.resolve([]);
           p = d.promise;
         }
+        // if ther is an instance
         else{
-          let instances = [attr.instance_id];
-          p = Ceilometer.getInstancesStats(instances)
-          .then((instances) => {
-            instances.map(i => {
-              i.container = {
-                name: `vcpe-${this.currentSubscriber.tags.sTag}-${this.currentSubscriber.tags.cTag}`
-              };
-              return i;
-            });
+          let instance = {};
+          p = Instances.get({id: attr.instance_id}).$promise
+          .then(function(_instance){
+            instance = _instance;
+            return Ceilometer.getInstanceStats(instance.instance_uuid);
+          })
+          .then((stats) => {
+            instance.stats = stats;
+            const containerName = `vcpe-${this.currentSubscriber.tags.sTag}-${this.currentSubscriber.tags.cTag}`;
+            // append containers
+            instance.container = {
+              name: containerName
+            };
 
             // TODO fetch container stats
-
-            return instances;
+            return Ceilometer.getContainerStats(containerName);
+          })
+          .then((containerStats) => {
+            instance.container.stats = containerStats.stats;
+            instance.container.port = containerStats.port;
+            return [instance];
           });
         }
       }
diff --git a/views/ngXosViews/diagnostic/src/js/config.js b/views/ngXosViews/diagnostic/src/js/config.js
index 13f2172..f8d6bbf 100644
--- a/views/ngXosViews/diagnostic/src/js/config.js
+++ b/views/ngXosViews/diagnostic/src/js/config.js
@@ -41,7 +41,7 @@
     },
     container: {
       width: 60,
-      height: 30,
+      height: 130,
       margin: 5,
       x: -30,
       y: -15
diff --git a/views/ngXosViews/diagnostic/src/js/nodeDrawer.js b/views/ngXosViews/diagnostic/src/js/nodeDrawer.js
index 7480917..d172102 100644
--- a/views/ngXosViews/diagnostic/src/js/nodeDrawer.js
+++ b/views/ngXosViews/diagnostic/src/js/nodeDrawer.js
@@ -204,21 +204,117 @@
       }
     };
 
+    const drawContainer = (container, docker) => {
+
+      const containerBox = container.append('g')
+        .attr({
+          class: 'container',
+          transform: `translate(${serviceTopologyConfig.instance.margin}, 115)`
+        });
+
+      containerBox.append('rect')
+        .attr({
+          width: 250 - (serviceTopologyConfig.container.margin * 2),
+          height: serviceTopologyConfig.container.height,
+        });
+
+      containerBox.append('text')
+        .attr({
+          y: 20,
+          x: serviceTopologyConfig.instance.margin,
+          class: 'name'
+        })
+        .text(docker.name)
+
+      // add stats
+      const interestingMeters = ['memory', 'memory.usage', 'cpu_util'];
+
+      interestingMeters.forEach((m, i) => {
+        const meter = lodash.find(docker.stats, {meter: m});
+        // if there is no meter stats skip rendering
+        if(!angular.isDefined(meter)){
+          return;
+        }
+        containerBox.append('text')
+        .attr({
+          y: 40 + (i * 15),
+          x: serviceTopologyConfig.instance.margin,
+          opacity: 0
+        })
+        .text(`${meter.description}: ${Math.round(meter.value)} ${meter.unit}`)
+        .transition()
+        .duration(serviceTopologyConfig.duration)
+        .attr({
+          opacity: 1
+        });
+      });
+
+      // add port stats
+      const ports = ['eth0', 'eth1'];
+      const interestingPortMeters = [
+        {
+          meter: 'network.incoming.bytes.rate',
+          label: 'Incoming'
+        },
+        {
+          meter: 'network.outgoing.bytes.rate',
+          label: 'Outgoing'
+        }
+      ];
+      
+      ports.forEach((p, j) => {
+
+        // if there are no port stats skip rendering
+        if(docker.port[p].length === 0){
+          return;
+        }
+
+        containerBox.append('text')
+        .attr({
+          y: 90,
+          x: serviceTopologyConfig.instance.margin + (120 * j),
+          class: 'name'
+        })
+        .text(`${docker.name}-${p}`)
+
+        interestingPortMeters.forEach((m, i) => {
+
+          const meter = lodash.find(docker.port[p], {meter: m.meter});
+          // if there is no meter stats skip rendering
+          if(!angular.isDefined(meter)){
+            return;
+          }
+          containerBox.append('text')
+          .attr({
+            y: 105 + (i * 15),
+            x: serviceTopologyConfig.instance.margin + (120 * j),
+            opacity: 0
+          })
+          .text(`${m.label}: ${Math.round(meter.value)} ${meter.unit}`)
+          .transition()
+          .duration(serviceTopologyConfig.duration)
+          .attr({
+            opacity: 1
+          });
+        });
+      });
+    }
+
     const showInstanceStats = (container, instance) => {
 
       // NOTE this should be dinamically positioned
       // base on the number of element present
       const statsContainer = container.append('g')
         .attr({
-          transform: `translate(200, -32)`,
+          transform: `translate(200, -120)`,
           class: 'stats-container'
         });
 
 
       statsContainer.append('line')
         .attr({
-          x1: -120,
-          y1: 50,
+          x1: -160,
+          y1: 120,
           x2: 0,
           y2: 50,
           stroke: 'black',
@@ -232,7 +328,7 @@
 
       // NOTE rect should be dinamically sized base on the presence of a container
       let statsHeight = 110;
-      let statsWidth = 200;
+      let statsWidth = 250;
 
       if (instance.container){
         statsHeight += serviceTopologyConfig.container.height + (serviceTopologyConfig.container.margin * 2)
@@ -290,7 +386,7 @@
           x: serviceTopologyConfig.instance.margin,
           opacity: 0
         })
-        .text(`${meter.description}: ${meter.value} ${meter.unit}`)
+        .text(`${meter.description}: ${Math.round(meter.value)} ${meter.unit}`)
         .transition()
         .duration(serviceTopologyConfig.duration)
         .attr({
@@ -300,26 +396,7 @@
 
       if(instance.container){
         // draw container
-        
-        const containerBox = statsContainer.append('g')
-          .attr({
-            class: 'container',
-            transform: `translate(${serviceTopologyConfig.instance.margin}, 115)`
-          });
-
-        containerBox.append('rect')
-          .attr({
-            width: statsWidth - (serviceTopologyConfig.container.margin * 2),
-            height: serviceTopologyConfig.container.height,
-          });
-
-        containerBox.append('text')
-          .attr({
-            y: 20,
-            x: (statsWidth - (serviceTopologyConfig.container.margin * 2)) / 2,
-            'text-anchor': 'middle'
-          })
-          .text(instance.container.name)
+        drawContainer(statsContainer, instance.container);
       }
 
     };
diff --git a/views/ngXosViews/diagnostic/src/js/rest_services.js b/views/ngXosViews/diagnostic/src/js/rest_services.js
index d5e924f..311ea07 100644
--- a/views/ngXosViews/diagnostic/src/js/rest_services.js
+++ b/views/ngXosViews/diagnostic/src/js/rest_services.js
@@ -49,7 +49,7 @@
     this.getInstanceStats = (instanceUuid) => {
       let deferred = $q.defer();
 
-      $http.get('/xoslib/meterstatistics', {params:{resource: instanceUuid}})
+      $http.get('/xoslib/xos-instance-statistics', {params: {'instance-uuid': instanceUuid}})
       .then((res) => {
         deferred.resolve(res.data);
       })
@@ -95,6 +95,33 @@
 
       return deferred.promise;
     };
+
+    this.getContainerStats = (containerName) => {
+      const deferred = $q.defer();
+
+      let res = {};
+
+      $http.get('/xoslib/meterstatistics', {params: {'resource': containerName}})
+      .then((containerStats) => {
+        res.stats = containerStats.data;
+        return $http.get('/xoslib/meterstatistics', {params: {'resource': `${containerName}-eth0`}})
+      })
+      .then((portStats) => {
+        res.port = {
+          eth0: portStats.data
+        };
+        return $http.get('/xoslib/meterstatistics', {params: {'resource': `${containerName}-eth1`}})
+      })
+      .then((portStats) => {
+        res.port.eth1 = portStats.data;
+        deferred.resolve(res);
+      })
+      .catch((e) => {
+        deferred.reject(e);
+      })
+
+      return deferred.promise;
+    }
   })
   .service('Slice', function($resource){
     return $resource('/xos/slices', {id: '@id'});