Highlighting instances based on service
diff --git a/views/ngXosViews/diagnostic/src/css/serviceTopology.css b/views/ngXosViews/diagnostic/src/css/serviceTopology.css
index 595ad27..525ca41 100644
--- a/views/ngXosViews/diagnostic/src/css/serviceTopology.css
+++ b/views/ngXosViews/diagnostic/src/css/serviceTopology.css
@@ -44,6 +44,12 @@
stroke-width: 1px;
}
+logic-topology .node .instance.active rect{
+ fill: lightsteelblue;
+ stroke: steelblue;
+ stroke-width: 1px;
+}
+
/* LEGEND */
.legend {
diff --git a/views/ngXosViews/diagnostic/src/js/logicTopology.js b/views/ngXosViews/diagnostic/src/js/logicTopology.js
index 9d02829..ed1fcbb 100644
--- a/views/ngXosViews/diagnostic/src/js/logicTopology.js
+++ b/views/ngXosViews/diagnostic/src/js/logicTopology.js
@@ -11,7 +11,7 @@
bindToController: true,
controllerAs: 'vm',
template: '',
- controller: function($element, $log, $scope, d3, LogicTopologyHelper, Node){
+ controller: function($element, $log, $scope, $rootScope, d3, LogicTopologyHelper, Node){
$log.info('Logic Plane');
var svg;
@@ -45,6 +45,14 @@
}
});
+ $rootScope.$on('instance.detail', (evt, instance) => {
+
+ $log.info(`Highlight instance; ${instance.id}`)
+
+ LogicTopologyHelper.getInstanceStatus(instance.id);
+ LogicTopologyHelper.updateTree(svg);
+ })
+
handleSvg($element[0]);
LogicTopologyHelper.setupTree(svg);
}
diff --git a/views/ngXosViews/diagnostic/src/js/logicTopologyHelper.js b/views/ngXosViews/diagnostic/src/js/logicTopologyHelper.js
index 077ad6e..d2b48ea 100644
--- a/views/ngXosViews/diagnostic/src/js/logicTopologyHelper.js
+++ b/views/ngXosViews/diagnostic/src/js/logicTopologyHelper.js
@@ -108,11 +108,11 @@
transform: `translate(${svgWidth / 2}, ${svgHeight / 2})`
});
- NodeDrawer.addNetworks(nodeEnter.filter('.network'));
- NodeDrawer.addRack(nodeEnter.filter('.rack'));
- NodeDrawer.addPhisical(nodeEnter.filter('.router'));
- NodeDrawer.addPhisical(nodeEnter.filter('.subscriber'));
- NodeDrawer.addDevice(nodeEnter.filter('.device'));
+ NodeDrawer.addNetworks(node.filter('.network'));
+ NodeDrawer.addRack(node.filter('.rack'));
+ NodeDrawer.addPhisical(node.filter('.router'));
+ NodeDrawer.addPhisical(node.filter('.subscriber'));
+ NodeDrawer.addDevice(node.filter('.device'));
// Transition nodes to their new position.
var nodeUpdate = node.transition()
@@ -201,6 +201,24 @@
this.addComputeNodes = (computeNodes) => {
baseData.children[0].children[0].computeNodes = computeNodes;
+ };
+
+ this.getInstanceStatus = (instanceId) => {
+
+ const computeNodes = baseData.children[0].children[0].computeNodes;
+
+ let targetInstance = computeNodes.reduce((selected, node) => {
+ let found = lodash.find(node.instances, {id: instanceId});
+
+ if(found){
+ return found;
+ }
+ }, null);
+
+ // object are passed by reference,
+ // updating this update the instance in the tree
+ targetInstance.selected = true;
+
}
});
diff --git a/views/ngXosViews/diagnostic/src/js/nodeDrawer.js b/views/ngXosViews/diagnostic/src/js/nodeDrawer.js
index f84524e..1a45f03 100644
--- a/views/ngXosViews/diagnostic/src/js/nodeDrawer.js
+++ b/views/ngXosViews/diagnostic/src/js/nodeDrawer.js
@@ -161,7 +161,10 @@
instanceContainer
.attr({
transform: `translate(${width / 2}, ${ height / 2})`,
- class: 'instance',
+ class: d => {
+ console.log(d.name, d.selected);
+ return `instance ${d.selected ? 'active' : ''}`
+ },
})
.transition()
.duration(serviceTopologyConfig.duration)