Showing VMs stats
diff --git a/views/ngXosViews/diagnostic/src/css/serviceTopology.css b/views/ngXosViews/diagnostic/src/css/serviceTopology.css
index 8c2bd42..8b615ec 100644
--- a/views/ngXosViews/diagnostic/src/css/serviceTopology.css
+++ b/views/ngXosViews/diagnostic/src/css/serviceTopology.css
@@ -42,6 +42,34 @@
stroke-width: 1px;
}
+logic-topology > svg {
+ position: absolute;
+ top: 0;
+}
+
+/* STATS */
+
+logic-topology > .instances-stats {
+ position: absolute;
+ top: 0;
+ z-index: 2;
+ width: 100%;
+}
+
+logic-topology > .instances-stats ul.list-group {
+ font-size: 10px !important;
+}
+
+logic-topology > .instances-stats ul.list-group li{
+ padding: 3px 15px;
+}
+
+logic-topology > .instances-stats ul.list-group .badge {
+ font-size: 8px;
+}
+
+/* CLOUDS */
+
logic-topology .network .cloud {
fill: #fff;
stroke: green;
@@ -195,30 +223,14 @@
}
}
-@keyframes bounceInLeft {
- from, 60%, 75%, 90%, to {
- animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
- }
+@keyframes bounceOutRight {
+ 20% {
+ opacity: 1;
+ transform: translate3d(-20px, 0, 0);
+ }
- 0% {
- 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;
- }
+ to {
+ opacity: 0;
+ transform: translate3d(2000px, 0, 0);
+ }
}
\ No newline at end of file
diff --git a/views/ngXosViews/diagnostic/src/js/logicTopology.js b/views/ngXosViews/diagnostic/src/js/logicTopology.js
index 9181e56..da2fef6 100644
--- a/views/ngXosViews/diagnostic/src/js/logicTopology.js
+++ b/views/ngXosViews/diagnostic/src/js/logicTopology.js
@@ -10,12 +10,13 @@
},
bindToController: true,
controllerAs: 'vm',
- template: '',
- controller: function($element, $log, $scope, $rootScope, d3, LogicTopologyHelper, Node, Tenant, Ceilometer){
+ templateUrl: 'templates/logicTopology.tpl.html',
+ controller: function($element, $log, $scope, $rootScope, $timeout, d3, LogicTopologyHelper, Node, Tenant, Ceilometer){
$log.info('Logic Plane');
var svg;
-
+ this.selectedInstances = [];
+ this.hideInstanceStats = true;
const handleSvg = (el) => {
@@ -45,9 +46,16 @@
}
});
- $rootScope.$on('instance.detail', (evt, service) => {
+ $rootScope.$on('instance.detail.hide', () => {
+ this.hideInstanceStats = true;
+ $timeout(() => {
+ this.selectedInstances = [];
+ LogicTopologyHelper.getInstanceStatus([]);
+ LogicTopologyHelper.updateTree(svg);
+ }, 500);
+ });
- $log.info(`Highlight instance`, service)
+ $rootScope.$on('instance.detail', (evt, service) => {
let param = {
'service_vsg': {kind: 'vCPE'},
@@ -57,14 +65,24 @@
Tenant.queryVsgInstances(param[service.name]).$promise
.then((instances) => {
- console.log(instances);
- LogicTopologyHelper.getInstanceStatus(instances);
- LogicTopologyHelper.updateTree(svg);
return Ceilometer.getInstancesStats(instances);
})
- .then((stats) => {
- console.log('stats', stats);
+ .then((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.getInstanceStatus(instances);
+ LogicTopologyHelper.updateTree(svg);
})
.catch((e) => {
throw new Error(e);
diff --git a/views/ngXosViews/diagnostic/src/js/logicTopologyHelper.js b/views/ngXosViews/diagnostic/src/js/logicTopologyHelper.js
index f9c0850..3be26c5 100644
--- a/views/ngXosViews/diagnostic/src/js/logicTopologyHelper.js
+++ b/views/ngXosViews/diagnostic/src/js/logicTopologyHelper.js
@@ -223,13 +223,13 @@
});
});
- lodash.forEach(instances, (id) => {
+ lodash.forEach(instances, (instance) => {
computeNodes.map((node) => {
- node.instances.map((instance) => {
- if(instance.id === id){
- instance.selected = true;
+ node.instances.map((d3instance) => {
+ if(d3instance.id === instance.id){
+ d3instance.selected = true;
}
- return instance;
+ return d3instance;
});
});
});
diff --git a/views/ngXosViews/diagnostic/src/js/nodeDrawer.js b/views/ngXosViews/diagnostic/src/js/nodeDrawer.js
index 128848d..62e2cdf 100644
--- a/views/ngXosViews/diagnostic/src/js/nodeDrawer.js
+++ b/views/ngXosViews/diagnostic/src/js/nodeDrawer.js
@@ -155,6 +155,8 @@
this.drawInstances = (container, instances) => {
+ // TODO check for stats field in instance and draw popup
+
let {width, height} = container.node().getBoundingClientRect();
let elements = container.selectAll('.instances')
diff --git a/views/ngXosViews/diagnostic/src/js/rest_services.js b/views/ngXosViews/diagnostic/src/js/rest_services.js
index 733a690..885b3de 100644
--- a/views/ngXosViews/diagnostic/src/js/rest_services.js
+++ b/views/ngXosViews/diagnostic/src/js/rest_services.js
@@ -39,7 +39,7 @@
this.getInstanceStats = (instanceUuid) => {
let deferred = $q.defer();
- $http.get('/xoslib/meterstatistics', {resource: instanceUuid})
+ $http.get('/xoslib/meterstatistics', {params:{resource: instanceUuid}})
.then((res) => {
deferred.resolve(res.data);
})
diff --git a/views/ngXosViews/diagnostic/src/js/serviceTopologyHelper.js b/views/ngXosViews/diagnostic/src/js/serviceTopologyHelper.js
index 2b92ba5..817e79e 100644
--- a/views/ngXosViews/diagnostic/src/js/serviceTopologyHelper.js
+++ b/views/ngXosViews/diagnostic/src/js/serviceTopologyHelper.js
@@ -219,6 +219,13 @@
const serviceClick = function(d) {
+ // if was selected
+ if(d.selected){
+ d.selected = !d.selected;
+ $rootScope.$emit('instance.detail.hide', {});
+ return updateTree(_svg, _layout, _source);
+ }
+
$rootScope.$emit('instance.detail', {name: d.humanReadableName});
// unselect all
@@ -226,15 +233,9 @@
.each(d => d.selected = false);
// toggling selected status
+ console.log(d.selected);
d.selected = !d.selected;
- var selectedNode = d3.select(this);
-
- selectedNode
- .transition()
- .duration(serviceTopologyConfig.duration)
- .attr('r', serviceTopologyConfig.circle.selectedRadius);
-
updateTree(_svg, _layout, _source);
};
diff --git a/views/ngXosViews/diagnostic/src/templates/logicTopology.tpl.html b/views/ngXosViews/diagnostic/src/templates/logicTopology.tpl.html
new file mode 100644
index 0000000..9bd0551
--- /dev/null
+++ b/views/ngXosViews/diagnostic/src/templates/logicTopology.tpl.html
@@ -0,0 +1,22 @@
+<div class="instances-stats animate" ng-hide="vm.hideInstanceStats">
+ <div class="row">
+ <div class="col-sm-3 col-sm-offset-8">
+ <div class="panel panel-primary" ng-repeat="instance in vm.selectedInstances">
+ <div class="panel-heading">
+ {{instance.humanReadableName}}
+ </div>
+ <ul class="list-group">
+ <li class="list-group-item">Backend Status: {{instance.backend_status}}</li>
+ <li class="list-group-item">IP Address: {{instance.ip}}</li>
+ </ul>
+ <ul class="list-group">
+ <li class="list-group-item" ng-repeat="stat in instance.stats">
+ <span class="badge">{{stat.value}}</span>
+ {{stat.meter}}
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
\ No newline at end of file