Added button to reset subscriber
diff --git a/views/ngXosViews/diagnostic/src/css/diagnostic.css b/views/ngXosViews/diagnostic/src/css/diagnostic.css
index 4492faf..19d64a7 100644
--- a/views/ngXosViews/diagnostic/src/css/diagnostic.css
+++ b/views/ngXosViews/diagnostic/src/css/diagnostic.css
@@ -39,6 +39,14 @@
padding: 10px;
}
+diagnostic-container .onethird-height .well.pull-right{
+ position: absolute;
+ right: 0px;
+ top: -15px;
+ cursor: pointer;
+ z-index: 200;
+}
+
/* subscriber-status-modal */
subscriber-status-modal .row + .row {
diff --git a/views/ngXosViews/diagnostic/src/js/chart_data_service.js b/views/ngXosViews/diagnostic/src/js/chart_data_service.js
index c74e289..6f57ef0 100644
--- a/views/ngXosViews/diagnostic/src/js/chart_data_service.js
+++ b/views/ngXosViews/diagnostic/src/js/chart_data_service.js
@@ -70,6 +70,21 @@
return this.logicTopologyData;
};
+ /**
+ * Remove a subscriber from the tree
+ */
+
+ this.removeSubscriber = () => {
+ this.logicTopologyData.children[0].children[0].children[0].children[0].humanReadableName = 'Subscriber';
+ this.currentSubscriber = null;
+ if(serviceTopologyConfig.elWidths[serviceTopologyConfig.elWidths.length - 1] === 160){
+ serviceTopologyConfig.elWidths.pop();
+ }
+
+ this.highlightInstances([]);
+ delete this.logicTopologyData.children[0].children[0].children[0].children[0].children;
+ }
+
this.getSubscriberTag = (subscriber) => {
const tags = {
cTag: subscriber.c_tag,
diff --git a/views/ngXosViews/diagnostic/src/js/diagnostic.js b/views/ngXosViews/diagnostic/src/js/diagnostic.js
index 419dd7c..7d97fdb 100644
--- a/views/ngXosViews/diagnostic/src/js/diagnostic.js
+++ b/views/ngXosViews/diagnostic/src/js/diagnostic.js
@@ -10,23 +10,33 @@
this.loader = true;
this.error = false;
- Subscribers.query().$promise
- .then((subscribers) => {
- this.subscribers = subscribers;
- return ServiceRelation.get();
- })
- .then((serviceChain) => {
- this.serviceChain = serviceChain;
- // debug helper
- loadSubscriber(this.subscribers[0]);
- })
- .catch(e => {
- throw new Error(e);
- this.error = e;
- })
- .finally(() => {
- this.loader = false;
- });
+
+ const loadGlobalScope = () => {
+ Subscribers.query().$promise
+ .then((subscribers) => {
+ this.subscribers = subscribers;
+ return ServiceRelation.get();
+ })
+ .then((serviceChain) => {
+ this.serviceChain = serviceChain;
+ // debug helper
+ // loadSubscriber(this.subscribers[0]);
+ })
+ .catch(e => {
+ throw new Error(e);
+ this.error = e;
+ })
+ .finally(() => {
+ this.loader = false;
+ });
+ };
+
+ loadGlobalScope();
+
+ this.reloadGlobalScope = () => {
+ this.selectedSubscriber = null;
+ loadGlobalScope();
+ }
const loadSubscriber = (subscriber) => {
ServiceRelation.getBySubscriber(subscriber)
diff --git a/views/ngXosViews/diagnostic/src/js/logicTopology.js b/views/ngXosViews/diagnostic/src/js/logicTopology.js
index edd64ea..722328d 100644
--- a/views/ngXosViews/diagnostic/src/js/logicTopology.js
+++ b/views/ngXosViews/diagnostic/src/js/logicTopology.js
@@ -26,16 +26,23 @@
.style('height', `${el.clientHeight}px`);
}
- ChartData.getLogicTree()
- .then((tree) => {
- LogicTopologyHelper.updateTree(svg);
- });
+ const loadGlobalScope = () => {
+ ChartData.getLogicTree()
+ .then((tree) => {
+ LogicTopologyHelper.updateTree(svg);
+ });
+ }
+ loadGlobalScope();
$scope.$watch(() => this.selected, (selected) => {
if(selected){
ChartData.selectSubscriber(selected);
LogicTopologyHelper.updateTree(svg);
}
+ else{
+ ChartData.removeSubscriber();
+ LogicTopologyHelper.updateTree(svg);
+ }
});
$rootScope.$on('instance.detail.hide', () => {
diff --git a/views/ngXosViews/diagnostic/src/js/nodeDrawer.js b/views/ngXosViews/diagnostic/src/js/nodeDrawer.js
index dcd7f4e..229b629 100644
--- a/views/ngXosViews/diagnostic/src/js/nodeDrawer.js
+++ b/views/ngXosViews/diagnostic/src/js/nodeDrawer.js
@@ -478,6 +478,10 @@
};
this.addPhisical = (nodes) => {
+
+ nodes.select('rect').remove();
+ nodes.select('text').remove();
+
nodes.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 2911733..47b6a8d 100644
--- a/views/ngXosViews/diagnostic/src/js/subscriber-modal.js
+++ b/views/ngXosViews/diagnostic/src/js/subscriber-modal.js
@@ -42,6 +42,9 @@
});
$scope.$watch(() => this.subscriber, () => {
+ if(!this.subscriber){
+ return;
+ }
this.subscriber.uplink_speed = parseInt(this.subscriber.uplink_speed, 10);
this.subscriber.downlink_speed = parseInt(this.subscriber.downlink_speed, 10);
});
diff --git a/views/ngXosViews/diagnostic/src/templates/diagnostic.tpl.html b/views/ngXosViews/diagnostic/src/templates/diagnostic.tpl.html
index 6ae3407..ffd5564 100644
--- a/views/ngXosViews/diagnostic/src/templates/diagnostic.tpl.html
+++ b/views/ngXosViews/diagnostic/src/templates/diagnostic.tpl.html
@@ -4,6 +4,9 @@
<div class="well">
Services Graph
</div>
+ <div class="well pull-right" ng-click="vm.reloadGlobalScope()">
+ Reset subscriber
+ </div>
<service-topology service-chain="vm.serviceChain"></service-topology>
</div>
<div class="twothird-height">
diff --git a/xos/core/xoslib/static/css/xosDiagnostic.css b/xos/core/xoslib/static/css/xosDiagnostic.css
index 8194cce..9d1befe 100644
--- a/xos/core/xoslib/static/css/xosDiagnostic.css
+++ b/xos/core/xoslib/static/css/xosDiagnostic.css
@@ -1 +1 @@
-#xosDiagnostic,[ui-view]{min-height:700px;position:relative}diagnostic-container .half-height{position:relative;height:50%}diagnostic-container .onethird-height{position:relative;height:33%;border-bottom:1px solid #999}diagnostic-container .twothird-height{position:relative;height:67%}diagnostic-container .subscriber-select{max-width:200px;position:absolute;top:20px;right:20px;z-index:1}diagnostic-container .onethird-height .well,diagnostic-container .twothird-height .well{font-weight:700;max-width:165px;text-align:center;margin-top:15px;background:#eee;border-color:steelblue;padding:10px}subscriber-status-modal .row+.row{margin-top:20px}.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}.node text.small{font-size:10px}.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%;border-bottom:1px solid #999}diagnostic-container .twothird-height{position:relative;height:67%}diagnostic-container .subscriber-select{max-width:200px;position:absolute;top:20px;right:20px;z-index:1}diagnostic-container .onethird-height .well,diagnostic-container .twothird-height .well{font-weight:700;max-width:165px;text-align:center;margin-top:15px;background:#eee;border-color:steelblue;padding:10px}diagnostic-container .onethird-height .well.pull-right{position:absolute;right:0;top:-15px;cursor:pointer;z-index:200}subscriber-status-modal .row+.row{margin-top:20px}.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}.node text.small{font-size:10px}.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 2c5ddf7..2d7b5d2 100644
--- a/xos/core/xoslib/static/js/xosDiagnostic.js
+++ b/xos/core/xoslib/static/js/xosDiagnostic.js
@@ -15,7 +15,7 @@
$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\" style=\"height: 900px\">\n <div class=\"onethird-height\">\n <div class=\"well\">\n Services Graph\n </div>\n <service-topology service-chain=\"vm.serviceChain\"></service-topology>\n </div>\n <div class=\"twothird-height\">\n <div class=\"well\">\n Logical Resources\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-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>");
+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 <div class=\"well\">\n Services Graph\n </div>\n <div class=\"well pull-right\" ng-click=\"vm.reloadGlobalScope()\">\n Reset subscriber\n </div>\n <service-topology service-chain=\"vm.serviceChain\"></service-topology>\n </div>\n <div class=\"twothird-height\">\n <div class=\"well\">\n Logical Resources\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-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\">×</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\">×</span></button>\n <h4 class=\"modal-title\">Manage subscriber:</h4>\n </div>\n <form name=\"vm.subscriber-detail\">\n <div class=\"modal-body\">\n <div class=\"row\">\n <div class=\"col-xs-12\">\n <label>Status</label>\n </div>\n <div class=\"col-xs-6\">\n <a ng-click=\"vm.subscriber.status = \'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.subscriber.status = \'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\">\n <div class=\"col-xs-6\">\n <a ng-click=\"vm.subscriber.status = \'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.subscriber.status = \'copyrightviolation\'\"\n class=\"btn btn-block\"\n ng-class=\"{\'btn-primary\': vm.subscriber.status === \'copyrightviolation\' ,\'btn-default\': vm.subscriber.status !== \'copyrightviolation\'}\"\n >Copyright <br> violation</a>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-xs-6\">\n <label>Uplink Speed</label>\n <input type=\"number\" class=\"form-control\" ng-model=\"vm.subscriber.uplink_speed\"/>\n </div>\n <div class=\"col-xs-6\">\n <label>Downlink Speed</label>\n <input type=\"number\" class=\"form-control\" ng-model=\"vm.subscriber.downlink_speed\"/>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-xs-6\">\n <label>Enable Uverse</label>\n </div>\n <div class=\"col-xs-6\">\n <a \n ng-click=\"vm.subscriber.enable_uverse = !vm.subscriber.enable_uverse\" \n ng-class=\"{\'btn-success\': vm.subscriber.enable_uverse, \'btn-danger\': !vm.subscriber.enable_uverse}\"\n class=\"btn btn-block\">\n <span ng-show=\"vm.subscriber.enable_uverse === true\">Enabled</span>\n <span ng-show=\"vm.subscriber.enable_uverse !== true\">Disabled</span>\n </a>\n </div>\n </div>\n </div>\n <div class=\"modal-footer\" ng-show=\"vm.success || vm.formError\">\n <div class=\"alert alert-success\" ng-show=\"vm.success\">\n {{vm.success}}\n </div>\n <div class=\"alert alert-danger\" ng-show=\"vm.formError\">\n {{vm.formError}}\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 <button ng-click=\"vm.updateSubscriber(vm.subscriber)\" type=\"button\" class=\"btn btn-primary\">Save</button>\n </div>\n </form>\n </div><!-- /.modal-content -->\n </div><!-- /.modal-dialog -->\n</div><!-- /.modal -->");}]);
@@ -69,6 +69,9 @@
$scope.$watch(function () {
return _this2.subscriber;
}, function () {
+ if (!_this2.subscriber) {
+ return;
+ }
_this2.subscriber.uplink_speed = parseInt(_this2.subscriber.uplink_speed, 10);
_this2.subscriber.downlink_speed = parseInt(_this2.subscriber.downlink_speed, 10);
});
@@ -1263,6 +1266,10 @@
};
this.addPhisical = function (nodes) {
+
+ nodes.select('rect').remove();
+ nodes.select('text').remove();
+
nodes.append('rect').attr(serviceTopologyConfig.square);
nodes.append('text').attr({
@@ -1504,9 +1511,12 @@
svg = d3.select(el).append('svg').style('width', el.clientWidth + 'px').style('height', el.clientHeight + 'px');
};
- ChartData.getLogicTree().then(function (tree) {
- LogicTopologyHelper.updateTree(svg);
- });
+ var loadGlobalScope = function loadGlobalScope() {
+ ChartData.getLogicTree().then(function (tree) {
+ LogicTopologyHelper.updateTree(svg);
+ });
+ };
+ loadGlobalScope();
$scope.$watch(function () {
return _this.selected;
@@ -1514,6 +1524,9 @@
if (selected) {
ChartData.selectSubscriber(selected);
LogicTopologyHelper.updateTree(svg);
+ } else {
+ ChartData.removeSubscriber();
+ LogicTopologyHelper.updateTree(svg);
}
});
@@ -1583,19 +1596,29 @@
this.loader = true;
this.error = false;
- Subscribers.query().$promise.then(function (subscribers) {
- _this.subscribers = subscribers;
- return ServiceRelation.get();
- }).then(function (serviceChain) {
- _this.serviceChain = serviceChain;
- // debug helper
- loadSubscriber(_this.subscribers[0]);
- })['catch'](function (e) {
- throw new Error(e);
- _this.error = e;
- })['finally'](function () {
- _this.loader = false;
- });
+
+ var loadGlobalScope = function loadGlobalScope() {
+ Subscribers.query().$promise.then(function (subscribers) {
+ _this.subscribers = subscribers;
+ return ServiceRelation.get();
+ }).then(function (serviceChain) {
+ _this.serviceChain = serviceChain;
+ // debug helper
+ // loadSubscriber(this.subscribers[0]);
+ })['catch'](function (e) {
+ throw new Error(e);
+ _this.error = e;
+ })['finally'](function () {
+ _this.loader = false;
+ });
+ };
+
+ loadGlobalScope();
+
+ this.reloadGlobalScope = function () {
+ _this.selectedSubscriber = null;
+ loadGlobalScope();
+ };
var loadSubscriber = function loadSubscriber(subscriber) {
ServiceRelation.getBySubscriber(subscriber).then(function (serviceChain) {
@@ -1743,6 +1766,21 @@
return _this.logicTopologyData;
};
+ /**
+ * Remove a subscriber from the tree
+ */
+
+ this.removeSubscriber = function () {
+ _this.logicTopologyData.children[0].children[0].children[0].children[0].humanReadableName = 'Subscriber';
+ _this.currentSubscriber = null;
+ if (serviceTopologyConfig.elWidths[serviceTopologyConfig.elWidths.length - 1] === 160) {
+ serviceTopologyConfig.elWidths.pop();
+ }
+
+ _this.highlightInstances([]);
+ delete _this.logicTopologyData.children[0].children[0].children[0].children[0].children;
+ };
+
this.getSubscriberTag = function (subscriber) {
var tags = {
cTag: subscriber.c_tag,