diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 0000000..4a688ff
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1,2 @@
+node_modules/
+bower_components/
\ No newline at end of file
diff --git a/views/ngXosViews/diagnostic/package.json b/views/ngXosViews/diagnostic/package.json
index 91845da..d425069 100644
--- a/views/ngXosViews/diagnostic/package.json
+++ b/views/ngXosViews/diagnostic/package.json
@@ -6,7 +6,6 @@
     "prestart": "npm install && bower install",
     "start": "gulp serve",
     "dev": "NODE_ENV=mock gulp serve",
-    "prebuild": "npm install && bower install",
     "server": "easy-mocker -c ./mocks/diagnostic.conf.json -d ./mocks/data",
     "build": "gulp",
     "test": "karma start",
diff --git a/views/ngXosViews/diagnostic/src/js/logicTopology.js b/views/ngXosViews/diagnostic/src/js/logicTopology.js
index b12bfb5..edd64ea 100644
--- a/views/ngXosViews/diagnostic/src/js/logicTopology.js
+++ b/views/ngXosViews/diagnostic/src/js/logicTopology.js
@@ -57,14 +57,37 @@
         handleSvg($element[0]);
         LogicTopologyHelper.setupTree(svg);
 
-        this.openSubscriberModal = () => {
-          this.subscriberModal = true;
+        this.selectSubscriberModal = () => {
+          this.openSelectSubscriberModal = true;
+          $scope.$apply();
+        };
+
+        this.subscriberStatusModal = () => {
+          this.openSubscriberStatusModal = true;
           $scope.$apply();
         };
 
         // listen for subscriber modal event
         $rootScope.$on('subscriber.modal.open', () => {
-          this.openSubscriberModal();
+
+          if(ChartData.currentSubscriber){
+            this.subscriberStatusModal();
+          }
+          else{
+            this.selectSubscriberModal();
+          }
+        });
+
+        // listen for subscriber modal event
+        $rootScope.$on('subscriber.modal.open', () => {
+
+          if(ChartData.currentSubscriber){
+            this.currentSubscriber = ChartData.currentSubscriber;
+            this.subscriberStatusModal();
+          }
+          else{
+            this.selectSubscriberModal();
+          }
         });
 
       }
diff --git a/views/ngXosViews/diagnostic/src/js/serviceTopology.js b/views/ngXosViews/diagnostic/src/js/serviceTopology.js
index 2755620..925e7c0 100644
--- a/views/ngXosViews/diagnostic/src/js/serviceTopology.js
+++ b/views/ngXosViews/diagnostic/src/js/serviceTopology.js
@@ -34,6 +34,7 @@
           // clean
           d3.select($element[0]).select('svg').remove();
 
+
           const width = el.clientWidth - (serviceTopologyConfig.widthMargin * 2);
           const height = el.clientHeight - (serviceTopologyConfig.heightMargin * 2);
 
@@ -53,7 +54,7 @@
           root.y0 = width / 2;
 
           // ServiceTopologyHelper.drawLegend(svg);
-          ServiceTopologyHelper.updateTree(treeContainer, treeLayout, root);
+          ServiceTopologyHelper.updateTree(treeContainer, treeLayout, root, el);
         };
         
         $scope.$watch(() => this.serviceChain, (chain) => {
diff --git a/views/ngXosViews/diagnostic/src/js/serviceTopologyHelper.js b/views/ngXosViews/diagnostic/src/js/serviceTopologyHelper.js
index 28794c2..3759017 100644
--- a/views/ngXosViews/diagnostic/src/js/serviceTopologyHelper.js
+++ b/views/ngXosViews/diagnostic/src/js/serviceTopologyHelper.js
@@ -4,12 +4,16 @@
   angular.module('xos.diagnostic')
   .service('ServiceTopologyHelper', function($rootScope, $window, $log, lodash, ServiceRelation, serviceTopologyConfig, d3){
 
-    var _svg, _layout, _source;
+    var _svg, _layout, _source, _el;
 
     var i = 0;
 
     // given a canvas, a layout and a data source, draw a tree layout
-    const updateTree = (svg, layout, source) => {
+    const updateTree = (svg, layout, source, el = _el) => {
+
+      if(el){
+        _el = el;
+      }
 
       //cache data
       _svg = svg;
@@ -28,7 +32,7 @@
       // Normalize for fixed-depth.
       nodes.forEach(function(d) {
         // position the child node horizontally
-        const step = (($window.innerWidth - (serviceTopologyConfig.widthMargin * 2)) / maxDepth);
+        const step = ((_el.clientWidth - (serviceTopologyConfig.widthMargin * 2)) / maxDepth);
         d.y = d.depth * step;
       });
 
@@ -50,7 +54,11 @@
       const serviceNodes = nodeEnter.filter('.service');
 
       subscriberNodes.append('rect')
-        .attr(serviceTopologyConfig.square);
+        .attr(serviceTopologyConfig.square)
+        // add event listener to subscriber
+        .on('click', () => {
+          $rootScope.$emit('subscriber.modal.open');
+        });
 
       internetNodes.append('rect')
         .attr(serviceTopologyConfig.square);
diff --git a/views/ngXosViews/diagnostic/src/js/subscriber-modal.js b/views/ngXosViews/diagnostic/src/js/subscriber-modal.js
index 0620277..a8b93f5 100644
--- a/views/ngXosViews/diagnostic/src/js/subscriber-modal.js
+++ b/views/ngXosViews/diagnostic/src/js/subscriber-modal.js
@@ -1,7 +1,7 @@
 (function () {
   'use strict';
   angular.module('xos.diagnostic')
-  .directive('subscriberModal', function(){
+  .directive('selectSubscriberModal', function(){
     return {
       scope: {
         subscribers: '=',
@@ -9,7 +9,7 @@
       },
       bindToController: true,
       restrict: 'E',
-      templateUrl: 'templates/subscriber-modal.tpl.html',
+      templateUrl: 'templates/select-subscriber-modal.tpl.html',
       controllerAs: 'vm',
       controller: function($rootScope){
 
@@ -23,5 +23,35 @@
         };
       }
     };
+  })
+  .directive('subscriberStatusModal', function(){
+    return {
+      scope: {
+        open: '=',
+        subscriber: '='
+      },
+      bindToController: true,
+      restrict: 'E',
+      templateUrl: 'templates/subscriber-status-modal.tpl.html',
+      controllerAs: 'vm',
+      controller: function($log, $scope){
+
+        // mock until api
+        $scope.$watch(() => this.subscriber, (subscriber) => {
+          if(subscriber){
+            subscriber.status = 'enabled';
+          }
+        });
+
+        this.close = () => {
+          this.open = false;
+        };
+
+        this.setStatus = (status) => {
+          this.subscriber.status = status;
+          $log.info(`Set subscriber status to: ${status}`);
+        };
+      }
+    };
   });
 })();
diff --git a/views/ngXosViews/diagnostic/src/templates/diagnostic.tpl.html b/views/ngXosViews/diagnostic/src/templates/diagnostic.tpl.html
index 172b9f7..25e1338 100644
--- a/views/ngXosViews/diagnostic/src/templates/diagnostic.tpl.html
+++ b/views/ngXosViews/diagnostic/src/templates/diagnostic.tpl.html
@@ -1,28 +1,20 @@
 <div class="container-fluid">
-  <div ng-hide="vm.error && vm.loader">
+  <div ng-hide="vm.error && vm.loader" style="height: 900px">
     <div class="onethird-height">
       <service-topology service-chain="vm.serviceChain"></service-topology>
     </div>
     <div class="twothird-height">
-      <!-- <div class="panel panel-primary subscriber-select">
-        <div class="panel-heading">Select a subscriber:</div>
-        <div class="panel-body">
-          <select class="form-control" ng-options="s as s.name for s in vm.subscribers" ng-model="vm.selectedSubscriber">
-            <option value="">Select a subscriber...</option>
-          </select>
-        </div>
-      </div> -->
       <logic-topology ng-if="vm.subscribers" subscribers="vm.subscribers" selected="vm.selectedSubscriber"></logic-topology>
     </div>
   </div>
-  <div class="row" ng-show="vm.error">
+  <div class="row" ng-if="vm.error">
     <div class="col-xs-12">
       <div class="alert alert-danger">
         {{vm.error}}
       </div>
     </div>
   </div>
-  <div class="row" ng-show="vm.loader">
+  <div class="row" ng-if="vm.loader">
     <div class="col-xs-12">
       <div class="loader">Loading</div>
     </div>
diff --git a/views/ngXosViews/diagnostic/src/templates/logicTopology.tpl.html b/views/ngXosViews/diagnostic/src/templates/logicTopology.tpl.html
index 0cff927..8c81015 100644
--- a/views/ngXosViews/diagnostic/src/templates/logicTopology.tpl.html
+++ b/views/ngXosViews/diagnostic/src/templates/logicTopology.tpl.html
@@ -1,4 +1,5 @@
-<subscriber-modal open="vm.subscriberModal" subscribers="vm.subscribers"></subscriber-modal>
+<select-subscriber-modal open="vm.openSelectSubscriberModal" subscribers="vm.subscribers"></select-subscriber-modal>
+<subscriber-status-modal open="vm.openSubscriberStatusModal" subscriber="vm.currentSubscriber"></subscriber-status-modal>
 <div class="instances-stats animate" ng-hide="vm.hideInstanceStats">
   <div class="row">
     <div class="col-sm-3 col-sm-offset-8">
diff --git a/views/ngXosViews/diagnostic/src/templates/subscriber-modal.tpl.html b/views/ngXosViews/diagnostic/src/templates/select-subscriber-modal.tpl.html
similarity index 100%
rename from views/ngXosViews/diagnostic/src/templates/subscriber-modal.tpl.html
rename to views/ngXosViews/diagnostic/src/templates/select-subscriber-modal.tpl.html
diff --git a/views/ngXosViews/diagnostic/src/templates/subscriber-status-modal.tpl.html b/views/ngXosViews/diagnostic/src/templates/subscriber-status-modal.tpl.html
new file mode 100644
index 0000000..6ae28db
--- /dev/null
+++ b/views/ngXosViews/diagnostic/src/templates/subscriber-status-modal.tpl.html
@@ -0,0 +1,43 @@
+<div class="modal fade" ng-class="{in: vm.open}" tabindex="-1" role="dialog">
+  <div class="modal-dialog modal-sm">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button ng-click="vm.close()"  type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+        <h4 class="modal-title">Change subscriber status:</h4>
+      </div>
+      <div class="modal-body">
+        <div class="row">
+          <div class="col-xs-6">
+            <a ng-click="vm.setStatus('enabled')" 
+              class="btn btn-block"
+              ng-class="{'btn-primary': vm.subscriber.status === 'enabled' ,'btn-default': vm.subscriber.status !== 'enabled'}"
+              >Enabled</a>
+          </div>
+          <div class="col-xs-6">
+            <a ng-click="vm.setStatus('suspended')" 
+              class="btn btn-block"
+              ng-class="{'btn-primary': vm.subscriber.status === 'suspended' ,'btn-default': vm.subscriber.status !== 'suspended'}"
+              >Suspended</a>
+          </div>
+        </div>
+        <div class="row" style="margin-top: 20px">
+          <div class="col-xs-6">
+            <a ng-click="vm.setStatus('delinquent')" 
+              class="btn btn-block"
+              ng-class="{'btn-primary': vm.subscriber.status === 'delinquent' ,'btn-default': vm.subscriber.status !== 'delinquent'}"
+              >Delinquent <br> payment</a>
+          </div>
+          <div class="col-xs-6">
+            <a ng-click="vm.setStatus('copyright')" 
+              class="btn btn-block"
+              ng-class="{'btn-primary': vm.subscriber.status === 'copyright' ,'btn-default': vm.subscriber.status !== 'copyright'}"
+              >Copyright <br> violation</a>
+          </div>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button ng-click="vm.close()" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+      </div>
+    </div><!-- /.modal-content -->
+  </div><!-- /.modal-dialog -->
+</div><!-- /.modal -->
\ No newline at end of file
diff --git a/xos/configurations/frontend/mocks/cord.yaml b/xos/configurations/frontend/mocks/cord.yaml
index 8c84d8f..d39f43d 100644
--- a/xos/configurations/frontend/mocks/cord.yaml
+++ b/xos/configurations/frontend/mocks/cord.yaml
@@ -532,3 +532,20 @@
             - subscriber:
                 node: My House
                 relationship: tosca.relationships.BelongsToSubscriber
+
+    # DASHBOARDS
+    Diagnostic:
+      type: tosca.nodes.DashboardView
+      properties:
+          url: template:xosDiagnostic
+
+    padmin@vicci.org:
+      type: tosca.nodes.User
+      properties:
+          firstname: XOS
+          lastname: admin
+          is_admin: true
+      requirements:
+          - diagnostic_dashboard:
+              node: Diagnostic
+              relationship: tosca.relationships.UsesDashboard
diff --git a/xos/core/xoslib/static/css/xosDiagnostic.css b/xos/core/xoslib/static/css/xosDiagnostic.css
index 81690a7..088d311 100644
--- a/xos/core/xoslib/static/css/xosDiagnostic.css
+++ b/xos/core/xoslib/static/css/xosDiagnostic.css
@@ -1 +1 @@
-#xosDiagnostic,[ui-view]{height:700px}diagnostic-container .half-height{position:relative;height:50%}diagnostic-container .onethird-height{position:relative;height:33%}diagnostic-container .twothird-height{position:relative;height:67%}diagnostic-container .subscriber-select{max-width:200px;position:absolute;top:20px;right:20px;z-index:1}.half-height+.half-height{border-top:1px solid black}service-topology,logic-topology{height:100%;width:100%;display:block;position:absolute;top:0}logic-topology .subscriber circle,logic-topology .device circle{fill:#fff;stroke:green;stroke-width:1px}logic-topology>svg{position:absolute;top:0}logic-topology .network .cloud{fill:#fff;stroke:green;stroke-width:1px}logic-topology .node.rack>g>rect{fill:#ccc;stroke:steelblue;stroke-width:1px}logic-topology .compute-node>rect{fill:#fff;stroke:steelblue;stroke-width:1px}logic-topology .instance>rect{fill:#eee;stroke:steelblue;stroke-width:1px}logic-topology .node .instance.active rect{fill:lightsteelblue;stroke:steelblue;stroke-width:1px}logic-topology .node .instance.active.good>rect{fill:green}logic-topology .node .instance.active.provisioning>rect{fill:yellow}logic-topology .node .instance.active.bad>rect{fill:red}logic-topology .node .instance .stats-container rect{fill:white}logic-topology .node .instance .stats-container text.name{font-weight:700}logic-topology .node .instance .stats-container text.ip{font-style:italic;font-size:10px}logic-topology .node .instance .stats-container .container rect{fill:#eee;stroke:steelblue;stroke-width:1px}.legend{fill:#fff;stroke:#ccc;stroke-width:1px;position:relative}.legend text{stroke:#000}.node{cursor:pointer}.node circle,.node rect{fill:#fff;stroke:steelblue;stroke-width:1px}.node.subscriber circle,.node.subscriber rect,.node.router circle,.node.router rect{stroke:#05ffcb}.node.slice rect{stroke:#b01dff}.node.instance rect{stroke:#ccc}.node.instance rect.active{stroke:#ff8b00}.node rect.slice-detail{fill:#fff;stroke:steelblue;stroke-width:3px}.node text{font:12px sans-serif}.link,.device-link{fill:none;stroke:#ccc;stroke-width:2px}.link.slice{stroke:rgba(157,4,183,.29)}.link.instance{stroke:#ccc}.link.instance.active{stroke:rgba(255,138,0,.65)}.service-details{width:200px;position:absolute;top:20px;right:20px}.animate.ng-hide-remove{animation:.5s bounceInRight ease}.animate.ng-hide-add{animation:.5s bounceOutRight ease}.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)}}.modal.fade.in{display:block}@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 bounceOutRight{20%{opacity:1;transform:translate3d(-20px,0,0)}to{opacity:0;transform:translate3d(2000px,0,0)}}
\ No newline at end of file
+#xosDiagnostic,[ui-view]{min-height:700px;position:relative}diagnostic-container .half-height{position:relative;height:50%}diagnostic-container .onethird-height{position:relative;height:33%}diagnostic-container .twothird-height{position:relative;height:67%}diagnostic-container .subscriber-select{max-width:200px;position:absolute;top:20px;right:20px;z-index:1}.half-height+.half-height{border-top:1px solid black}service-topology,logic-topology{height:100%;width:100%;display:block;position:absolute;top:0}logic-topology .subscriber circle,logic-topology .device circle{fill:#fff;stroke:green;stroke-width:1px}logic-topology>svg{position:absolute;top:0}logic-topology .network .cloud{fill:#fff;stroke:green;stroke-width:1px}logic-topology .node.rack>g>rect{fill:#ccc;stroke:steelblue;stroke-width:1px}logic-topology .compute-node>rect{fill:#fff;stroke:steelblue;stroke-width:1px}logic-topology .instance>rect{fill:#eee;stroke:steelblue;stroke-width:1px}logic-topology .node .instance.active rect{fill:lightsteelblue;stroke:steelblue;stroke-width:1px}logic-topology .node .instance.active.good>rect{fill:green}logic-topology .node .instance.active.provisioning>rect{fill:yellow}logic-topology .node .instance.active.bad>rect{fill:red}logic-topology .node .instance .stats-container rect{fill:white}logic-topology .node .instance .stats-container text.name{font-weight:700}logic-topology .node .instance .stats-container text.ip{font-style:italic;font-size:10px}logic-topology .node .instance .stats-container .container rect{fill:#eee;stroke:steelblue;stroke-width:1px}.legend{fill:#fff;stroke:#ccc;stroke-width:1px;position:relative}.legend text{stroke:#000}.node{cursor:pointer}.node circle,.node rect{fill:#fff;stroke:steelblue;stroke-width:1px}.node.subscriber circle,.node.subscriber rect,.node.router circle,.node.router rect{stroke:#05ffcb}.node.slice rect{stroke:#b01dff}.node.instance rect{stroke:#ccc}.node.instance rect.active{stroke:#ff8b00}.node rect.slice-detail{fill:#fff;stroke:steelblue;stroke-width:3px}.node text{font:12px sans-serif}.link,.device-link{fill:none;stroke:#ccc;stroke-width:2px}.link.slice{stroke:rgba(157,4,183,.29)}.link.instance{stroke:#ccc}.link.instance.active{stroke:rgba(255,138,0,.65)}.service-details{width:200px;position:absolute;top:20px;right:20px}.animate.ng-hide-remove{animation:.5s bounceInRight ease}.animate.ng-hide-add{animation:.5s bounceOutRight ease}.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)}}.modal.fade.in{display:block}@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 bounceOutRight{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/static/js/xosDiagnostic.js b/xos/core/xoslib/static/js/xosDiagnostic.js
index 893b815..d11e839 100644
--- a/xos/core/xoslib/static/js/xosDiagnostic.js
+++ b/xos/core/xoslib/static/js/xosDiagnostic.js
@@ -15,14 +15,15 @@
     $log.info('Diagnostic Started');
   }]);
 })();
-angular.module("xos.diagnostic").run(["$templateCache", function($templateCache) {$templateCache.put("templates/diagnostic.tpl.html","<div class=\"container-fluid\">\n  <div ng-hide=\"vm.error && vm.loader\">\n    <div class=\"onethird-height\">\n      <service-topology service-chain=\"vm.serviceChain\"></service-topology>\n    </div>\n    <div class=\"twothird-height\">\n      <!-- <div class=\"panel panel-primary subscriber-select\">\n        <div class=\"panel-heading\">Select a subscriber:</div>\n        <div class=\"panel-body\">\n          <select class=\"form-control\" ng-options=\"s as s.name for s in vm.subscribers\" ng-model=\"vm.selectedSubscriber\">\n            <option value=\"\">Select a subscriber...</option>\n          </select>\n        </div>\n      </div> -->\n      <logic-topology ng-if=\"vm.subscribers\" subscribers=\"vm.subscribers\" selected=\"vm.selectedSubscriber\"></logic-topology>\n    </div>\n  </div>\n  <div class=\"row\" ng-show=\"vm.error\">\n    <div class=\"col-xs-12\">\n      <div class=\"alert alert-danger\">\n        {{vm.error}}\n      </div>\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</div>");
-$templateCache.put("templates/logicTopology.tpl.html","<subscriber-modal open=\"vm.subscriberModal\" subscribers=\"vm.subscribers\"></subscriber-modal>\n<div class=\"instances-stats animate\" ng-hide=\"vm.hideInstanceStats\">\n  <div class=\"row\">\n    <div class=\"col-sm-3 col-sm-offset-8\">\n      <div class=\"panel panel-primary\" ng-repeat=\"instance in vm.selectedInstances\">\n        <div class=\"panel-heading\">\n          {{instance.humanReadableName}}\n        </div>\n          <ul class=\"list-group\">\n            <li class=\"list-group-item\">Backend Status: {{instance.backend_status}}</li>\n            <li class=\"list-group-item\">IP Address: {{instance.ip}}</li>\n          </ul>\n          <ul class=\"list-group\">\n            <li class=\"list-group-item\" ng-repeat=\"stat in instance.stats\">\n              <span class=\"badge\">{{stat.value}}</span>\n              {{stat.meter}}\n            </li>\n          </ul>\n        </div>\n      </div>  \n    </div>\n  </div>\n</div>");
-$templateCache.put("templates/subscriber-modal.tpl.html","<div class=\"modal fade\" ng-class=\"{in: vm.open}\" tabindex=\"-1\" role=\"dialog\">\n  <div class=\"modal-dialog modal-sm\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header\">\n        <button ng-click=\"vm.close()\"  type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"><span aria-hidden=\"true\">&times;</span></button>\n        <h4 class=\"modal-title\">Select a subscriber:</h4>\n      </div>\n      <div class=\"modal-body\">\n        <select class=\"form-control\" ng-options=\"s as s.humanReadableName for s in vm.subscribers\" ng-model=\"vm.selected\"></select>\n      </div>\n      <div class=\"modal-footer\">\n        <button ng-click=\"vm.close()\" type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Close</button>\n        <button ng-click=\"vm.select(vm.selected)\" type=\"button\" class=\"btn btn-primary\">Select</button>\n      </div>\n    </div><!-- /.modal-content -->\n  </div><!-- /.modal-dialog -->\n</div><!-- /.modal -->");}]);
+angular.module("xos.diagnostic").run(["$templateCache", function($templateCache) {$templateCache.put("templates/diagnostic.tpl.html","<div class=\"container-fluid\">\n  <div ng-hide=\"vm.error && vm.loader\" style=\"height: 900px\">\n    <div class=\"onethird-height\">\n      <service-topology service-chain=\"vm.serviceChain\"></service-topology>\n    </div>\n    <div class=\"twothird-height\">\n      <logic-topology ng-if=\"vm.subscribers\" subscribers=\"vm.subscribers\" selected=\"vm.selectedSubscriber\"></logic-topology>\n    </div>\n  </div>\n  <div class=\"row\" ng-if=\"vm.error\">\n    <div class=\"col-xs-12\">\n      <div class=\"alert alert-danger\">\n        {{vm.error}}\n      </div>\n    </div>\n  </div>\n  <div class=\"row\" ng-if=\"vm.loader\">\n    <div class=\"col-xs-12\">\n      <div class=\"loader\">Loading</div>\n    </div>\n  </div>\n</div>");
+$templateCache.put("templates/logicTopology.tpl.html","<select-subscriber-modal open=\"vm.openSelectSubscriberModal\" subscribers=\"vm.subscribers\"></select-subscriber-modal>\n<subscriber-status-modal open=\"vm.openSubscriberStatusModal\" subscriber=\"vm.currentSubscriber\"></subscriber-status-modal>\n<div class=\"instances-stats animate\" ng-hide=\"vm.hideInstanceStats\">\n  <div class=\"row\">\n    <div class=\"col-sm-3 col-sm-offset-8\">\n      <div class=\"panel panel-primary\" ng-repeat=\"instance in vm.selectedInstances\">\n        <div class=\"panel-heading\">\n          {{instance.humanReadableName}}\n        </div>\n          <ul class=\"list-group\">\n            <li class=\"list-group-item\">Backend Status: {{instance.backend_status}}</li>\n            <li class=\"list-group-item\">IP Address: {{instance.ip}}</li>\n          </ul>\n          <ul class=\"list-group\">\n            <li class=\"list-group-item\" ng-repeat=\"stat in instance.stats\">\n              <span class=\"badge\">{{stat.value}}</span>\n              {{stat.meter}}\n            </li>\n          </ul>\n        </div>\n      </div>  \n    </div>\n  </div>\n</div>");
+$templateCache.put("templates/select-subscriber-modal.tpl.html","<div class=\"modal fade\" ng-class=\"{in: vm.open}\" tabindex=\"-1\" role=\"dialog\">\n  <div class=\"modal-dialog modal-sm\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header\">\n        <button ng-click=\"vm.close()\"  type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"><span aria-hidden=\"true\">&times;</span></button>\n        <h4 class=\"modal-title\">Select a subscriber:</h4>\n      </div>\n      <div class=\"modal-body\">\n        <select class=\"form-control\" ng-options=\"s as s.humanReadableName for s in vm.subscribers\" ng-model=\"vm.selected\"></select>\n      </div>\n      <div class=\"modal-footer\">\n        <button ng-click=\"vm.close()\" type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Close</button>\n        <button ng-click=\"vm.select(vm.selected)\" type=\"button\" class=\"btn btn-primary\">Select</button>\n      </div>\n    </div><!-- /.modal-content -->\n  </div><!-- /.modal-dialog -->\n</div><!-- /.modal -->");
+$templateCache.put("templates/subscriber-status-modal.tpl.html","<div class=\"modal fade\" ng-class=\"{in: vm.open}\" tabindex=\"-1\" role=\"dialog\">\n  <div class=\"modal-dialog modal-sm\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header\">\n        <button ng-click=\"vm.close()\"  type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"><span aria-hidden=\"true\">&times;</span></button>\n        <h4 class=\"modal-title\">Change subscriber status:</h4>\n      </div>\n      <div class=\"modal-body\">\n        <div class=\"row\">\n          <div class=\"col-xs-6\">\n            <a ng-click=\"vm.setStatus(\'enabled\')\" \n              class=\"btn btn-block\"\n              ng-class=\"{\'btn-primary\': vm.subscriber.status === \'enabled\' ,\'btn-default\': vm.subscriber.status !== \'enabled\'}\"\n              >Enabled</a>\n          </div>\n          <div class=\"col-xs-6\">\n            <a ng-click=\"vm.setStatus(\'suspended\')\" \n              class=\"btn btn-block\"\n              ng-class=\"{\'btn-primary\': vm.subscriber.status === \'suspended\' ,\'btn-default\': vm.subscriber.status !== \'suspended\'}\"\n              >Suspended</a>\n          </div>\n        </div>\n        <div class=\"row\" style=\"margin-top: 20px\">\n          <div class=\"col-xs-6\">\n            <a ng-click=\"vm.setStatus(\'delinquent\')\" \n              class=\"btn btn-block\"\n              ng-class=\"{\'btn-primary\': vm.subscriber.status === \'delinquent\' ,\'btn-default\': vm.subscriber.status !== \'delinquent\'}\"\n              >Delinquent <br> payment</a>\n          </div>\n          <div class=\"col-xs-6\">\n            <a ng-click=\"vm.setStatus(\'copyright\')\" \n              class=\"btn btn-block\"\n              ng-class=\"{\'btn-primary\': vm.subscriber.status === \'copyright\' ,\'btn-default\': vm.subscriber.status !== \'copyright\'}\"\n              >Copyright <br> violation</a>\n          </div>\n        </div>\n      </div>\n      <div class=\"modal-footer\">\n        <button ng-click=\"vm.close()\" type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Close</button>\n      </div>\n    </div><!-- /.modal-content -->\n  </div><!-- /.modal-dialog -->\n</div><!-- /.modal -->");}]);
 'use strict';
 
 (function () {
   'use strict';
-  angular.module('xos.diagnostic').directive('subscriberModal', function () {
+  angular.module('xos.diagnostic').directive('selectSubscriberModal', function () {
     return {
       scope: {
         subscribers: '=',
@@ -30,7 +31,7 @@
       },
       bindToController: true,
       restrict: 'E',
-      templateUrl: 'templates/subscriber-modal.tpl.html',
+      templateUrl: 'templates/select-subscriber-modal.tpl.html',
       controllerAs: 'vm',
       controller: ["$rootScope", function controller($rootScope) {
         var _this = this;
@@ -45,6 +46,38 @@
         };
       }]
     };
+  }).directive('subscriberStatusModal', function () {
+    return {
+      scope: {
+        open: '=',
+        subscriber: '='
+      },
+      bindToController: true,
+      restrict: 'E',
+      templateUrl: 'templates/subscriber-status-modal.tpl.html',
+      controllerAs: 'vm',
+      controller: ["$log", "$scope", function controller($log, $scope) {
+        var _this2 = this;
+
+        // mock until api
+        $scope.$watch(function () {
+          return _this2.subscriber;
+        }, function (subscriber) {
+          if (subscriber) {
+            subscriber.status = 'enabled';
+          }
+        });
+
+        this.close = function () {
+          _this2.open = false;
+        };
+
+        this.setStatus = function (status) {
+          _this2.subscriber.status = status;
+          $log.info('Set subscriber status to: ' + status);
+        };
+      }]
+    };
   });
 })();
 'use strict';
@@ -54,90 +87,17 @@
 
   angular.module('xos.diagnostic').service('ServiceTopologyHelper', ["$rootScope", "$window", "$log", "lodash", "ServiceRelation", "serviceTopologyConfig", "d3", function ($rootScope, $window, $log, lodash, ServiceRelation, serviceTopologyConfig, d3) {
 
-    // NOTE not used anymore
-    var drawLegend = function drawLegend(svg) {
-      var legendContainer = svg.append('g').attr({
-        'class': 'legend'
-      });
-
-      legendContainer.append('rect').attr({
-        transform: function transform(d) {
-          return 'translate(10, 80)';
-        },
-        width: 100,
-        height: 100
-      });
-
-      // service
-      var service = legendContainer.append('g').attr({
-        'class': 'node service'
-      });
-
-      service.append('circle').attr({
-        r: serviceTopologyConfig.circle.radius,
-        transform: function transform(d) {
-          return 'translate(30, 100)';
-        }
-      });
-
-      service.append('text').attr({
-        transform: function transform(d) {
-          return 'translate(45, 100)';
-        },
-        dy: '.35em'
-      }).text('Service').style('fill-opacity', 1);
-
-      // slice
-      var slice = legendContainer.append('g').attr({
-        'class': 'node slice'
-      });
-
-      slice.append('rect').attr({
-        width: 20,
-        height: 20,
-        x: -10,
-        y: -10,
-        transform: function transform(d) {
-          return 'translate(30, 130)';
-        }
-      });
-
-      slice.append('text').attr({
-        transform: function transform(d) {
-          return 'translate(45, 130)';
-        },
-        dy: '.35em'
-      }).text('Slices').style('fill-opacity', 1);
-
-      // instance
-      var instance = legendContainer.append('g').attr({
-        'class': 'node instance'
-      });
-
-      instance.append('rect').attr({
-        width: 20,
-        height: 20,
-        x: -10,
-        y: -10,
-        transform: function transform(d) {
-          return 'translate(30, 160)';
-        }
-      });
-
-      instance.append('text').attr({
-        transform: function transform(d) {
-          return 'translate(45, 160)';
-        },
-        dy: '.35em'
-      }).text('Instances').style('fill-opacity', 1);
-    };
-
-    var _svg, _layout, _source;
+    var _svg, _layout, _source, _el;
 
     var i = 0;
 
     // given a canvas, a layout and a data source, draw a tree layout
     var updateTree = function updateTree(svg, layout, source) {
+      var el = arguments.length <= 3 || arguments[3] === undefined ? _el : arguments[3];
+
+      if (el) {
+        _el = el;
+      }
 
       //cache data
       _svg = svg;
@@ -157,7 +117,7 @@
       // Normalize for fixed-depth.
       nodes.forEach(function (d) {
         // position the child node horizontally
-        var step = ($window.innerWidth - serviceTopologyConfig.widthMargin * 2) / maxDepth;
+        var step = (_el.clientWidth - serviceTopologyConfig.widthMargin * 2) / maxDepth;
         d.y = d.depth * step;
       });
 
@@ -180,7 +140,11 @@
       var internetNodes = nodeEnter.filter('.router');
       var serviceNodes = nodeEnter.filter('.service');
 
-      subscriberNodes.append('rect').attr(serviceTopologyConfig.square);
+      subscriberNodes.append('rect').attr(serviceTopologyConfig.square)
+      // add event listener to subscriber
+      .on('click', function () {
+        $rootScope.$emit('subscriber.modal.open');
+      });
 
       internetNodes.append('rect').attr(serviceTopologyConfig.square);
 
@@ -282,7 +246,6 @@
     };
 
     this.updateTree = updateTree;
-    this.drawLegend = drawLegend;
   }]);
 })();
 'use strict';
@@ -336,23 +299,12 @@
           root.y0 = width / 2;
 
           // ServiceTopologyHelper.drawLegend(svg);
-          ServiceTopologyHelper.updateTree(treeContainer, treeLayout, root);
-        };
-
-        this.getInstances = function (slice) {
-          Instances.query({ slice: slice.id }).$promise.then(function (instances) {
-            _this.selectedSlice = slice;
-            _this.instances = instances;
-          })['catch'](function (e) {
-            _this.errors = e;
-            throw new Error(e);
-          });
+          ServiceTopologyHelper.updateTree(treeContainer, treeLayout, root, el);
         };
 
         $scope.$watch(function () {
           return _this.serviceChain;
         }, function (chain) {
-          console.log(chain);
           if (angular.isDefined(chain)) {
             draw(chain);
           }
@@ -513,7 +465,7 @@
       }
     });
   }]).service('Subscribers', ["$resource", "$q", "SubscriberDevice", function ($resource, $q, SubscriberDevice) {
-    return $resource('/xos/subscribers/:id', { id: '@id' }, {
+    return $resource('/xoslib/cordsubscriber/:id', { id: '@id' }, {
       queryWithDevices: {
         method: 'GET',
         isArray: true,
@@ -686,7 +638,7 @@
       var serviceTree = buildLevel(tenants, services, rootService, rootTenant);
 
       return {
-        name: subscriber.name,
+        name: subscriber.name || subscriber.humanReadableName,
         parent: null,
         type: 'subscriber',
         children: [serviceTree]
@@ -1285,7 +1237,7 @@
         'text-anchor': 'middle',
         y: serviceTopologyConfig.square.y - 10
       }).text(function (d) {
-        return d.name;
+        return d.name || d.humanReadableName;
       });
     };
 
@@ -1544,17 +1496,6 @@
 
         $rootScope.$on('instance.detail', function (evt, service) {
           ChartData.getInstanceStatus(service).then(function (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.updateTree(svg);
           });
         });
@@ -1562,14 +1503,35 @@
         handleSvg($element[0]);
         LogicTopologyHelper.setupTree(svg);
 
-        this.openSubscriberModal = function () {
-          _this.subscriberModal = true;
+        this.selectSubscriberModal = function () {
+          _this.openSelectSubscriberModal = true;
+          $scope.$apply();
+        };
+
+        this.subscriberStatusModal = function () {
+          _this.openSubscriberStatusModal = true;
           $scope.$apply();
         };
 
         // listen for subscriber modal event
         $rootScope.$on('subscriber.modal.open', function () {
-          _this.openSubscriberModal();
+
+          if (ChartData.currentSubscriber) {
+            _this.subscriberStatusModal();
+          } else {
+            _this.selectSubscriberModal();
+          }
+        });
+
+        // listen for subscriber modal event
+        $rootScope.$on('subscriber.modal.open', function () {
+
+          if (ChartData.currentSubscriber) {
+            _this.currentSubscriber = ChartData.currentSubscriber;
+            _this.subscriberStatusModal();
+          } else {
+            _this.selectSubscriberModal();
+          }
         });
       }]
     };
@@ -1725,8 +1687,8 @@
     */
     this.addSubscriberTag = function (tags) {
       _this.logicTopologyData.children[0].children[0].children[0].subscriberTag = {
-        cTag: tags.c_tag,
-        sTag: tags.s_tag
+        cTag: tags.cTag,
+        sTag: tags.sTag
       };
     };
 
@@ -1741,16 +1703,15 @@
       return _this.logicTopologyData;
     };
 
-    this.getSubscriberTag = function () {
-      var tags = JSON.parse(_this.currentServiceChain.children[0].tenant.service_specific_attribute);
-      delete tags.creator_id;
+    this.getSubscriberTag = function (subscriber) {
+      var tags = {
+        cTag: subscriber.c_tag,
+        sTag: subscriber.s_tag
+      };
 
       _this.addSubscriberTag(tags);
       // add tags info to current subscriber
-      _this.currentSubscriber.tags = {
-        cTag: tags.c_tag,
-        sTag: tags.s_tag
-      };
+      _this.currentSubscriber.tags = tags;
     };
 
     this.getSubscriberIP = function () {
@@ -1760,7 +1721,6 @@
     };
 
     this.selectSubscriber = function (subscriber) {
-
       // append the device with to config settings
       serviceTopologyConfig.elWidths.push(160);
 
@@ -1769,7 +1729,7 @@
       //clean selected instances
       _this.highlightInstances([]);
 
-      _this.getSubscriberTag();
+      _this.getSubscriberTag(subscriber);
       _this.getSubscriberIP();
     };