Added local dev server
diff --git a/views/ngXosViews/diagnostic/src/css/serviceTopology.css b/views/ngXosViews/diagnostic/src/css/serviceTopology.css
index 8b615ec..ebd17e5 100644
--- a/views/ngXosViews/diagnostic/src/css/serviceTopology.css
+++ b/views/ngXosViews/diagnostic/src/css/serviceTopology.css
@@ -193,6 +193,59 @@
animation:0.5s bounceOutRight ease;
}
+/* LOADER */
+.loader {
+ font-size: 10px;
+ margin: 150px auto;
+ text-indent: -9999em;
+ width: 11em;
+ height: 11em;
+ border-radius: 50%;
+ background: #ffffff;
+ background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
+ background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
+ background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
+ background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
+ background: linear-gradient(to right, #ffffff 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 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% {
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+ 100% {
+ -webkit-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+}
+
/* ANIMATIONS */
@keyframes bounceInRight {
diff --git a/views/ngXosViews/diagnostic/src/js/diagnostic.js b/views/ngXosViews/diagnostic/src/js/diagnostic.js
index 2b31f31..63ab420 100644
--- a/views/ngXosViews/diagnostic/src/js/diagnostic.js
+++ b/views/ngXosViews/diagnostic/src/js/diagnostic.js
@@ -8,6 +8,8 @@
templateUrl: 'templates/diagnostic.tpl.html',
controllerAs: 'vm',
controller: function(Subscribers, ServiceRelation){
+ this.loader = true;
+ this.error = false;
Subscribers.query().$promise
.then((subscribers) => {
this.subscribers = subscribers;
@@ -15,6 +17,13 @@
})
.then((serviceChain) => {
this.serviceChain = serviceChain;
+ })
+ .catch(e => {
+ throw new Error(e);
+ this.error = e;
+ })
+ .finally(() => {
+ this.loader = false;
});
}
}
diff --git a/views/ngXosViews/diagnostic/src/js/serviceTopology.js b/views/ngXosViews/diagnostic/src/js/serviceTopology.js
index b358abf..3d602fe 100644
--- a/views/ngXosViews/diagnostic/src/js/serviceTopology.js
+++ b/views/ngXosViews/diagnostic/src/js/serviceTopology.js
@@ -32,6 +32,8 @@
const width = el.clientWidth - (serviceTopologyConfig.widthMargin * 2);
const height = el.clientHeight - (serviceTopologyConfig.heightMargin * 2);
+ console.log(el.clientWidth, el.clientHeight);
+
const treeLayout = d3.layout.tree()
.size([height, width]);
diff --git a/views/ngXosViews/diagnostic/src/templates/diagnostic.tpl.html b/views/ngXosViews/diagnostic/src/templates/diagnostic.tpl.html
index ff88b49..172b9f7 100644
--- a/views/ngXosViews/diagnostic/src/templates/diagnostic.tpl.html
+++ b/views/ngXosViews/diagnostic/src/templates/diagnostic.tpl.html
@@ -1,16 +1,30 @@
<div class="container-fluid">
- <div class="onethird-height">
- <service-topology service-chain="vm.serviceChain"></service-topology>
+ <div ng-hide="vm.error && vm.loader">
+ <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="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 class="row" ng-show="vm.error">
+ <div class="col-xs-12">
+ <div class="alert alert-danger">
+ {{vm.error}}
</div>
- </div> -->
- <logic-topology ng-if="vm.subscribers" subscribers="vm.subscribers" selected="vm.selectedSubscriber"></logic-topology>
+ </div>
+ </div>
+ <div class="row" ng-show="vm.loader">
+ <div class="col-xs-12">
+ <div class="loader">Loading</div>
+ </div>
</div>
</div>
\ No newline at end of file