Layout fix on diagnostic and added subscriber status handling
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">×</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\">×</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\">×</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\">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();
};