Skip to content

Commit

Permalink
Related-Bug:#1443460
Browse files Browse the repository at this point in the history 
Underlay page,Corrected the arrows direction showing the path of the packets in the toplogy,by adding the markers bezeirUp,bezierDown,upDeviated,downDeviated
Change-Id: I86f7b434020860ee5df2a1dee83dcc0c886a22ff
  • Loading branch information
@vishnuvv
vishnuvv committed May 8, 2015
1 parent a069761 commit 3a2851c
Showing 1 changed file with 142 additions and 21 deletions.
163 changes: 142 additions & 21 deletions webroot/monitor/infra/underlay/ui/js/monitor_infra_underlay.js
View file
Expand Up @@ -141,6 +141,10 @@ underlayModel.prototype.formTree = function() {
this.setTree(tree);
}

underlayModel.prototype.getFlowPath = function() {
return this.flowPath;
}

underlayModel.prototype.getNodes = function() {
return this.nodes;
}
Expand Down Expand Up @@ -257,6 +261,14 @@ underlayModel.prototype.getVNsUnderVrouter = function(vrouter) {
return this.getChildren(vrouter, "virtual-network");
}

underlayModel.prototype.setFlowPath = function(response) {
if(null !== response && typeof response !== "undefined") {
this.flowPath = response;
} else {
this.flowPath = {};
}
}

underlayModel.prototype.setTors = function(tors) {
if(null !== tors && typeof tors !== "undefined" &&
tors.length > 0) {
Expand Down Expand Up @@ -1719,8 +1731,8 @@ underlayView.prototype.highlightPath = function(response, data) {
var elementMap = _this.getElementMap();
var conElements = _this.getConnectedElements();
var graph = _this.getGraph();
var nodes = response.nodes;
var links = response.links;
var nodes = ifNull(response.nodes,[]);
var links = ifNull(response.links,[]);
var adjList = this.prepareData("virtual-router");
var nodeNames = [];
for(var i=0; i<nodes.length; i++) {
Expand Down Expand Up @@ -1868,8 +1880,8 @@ underlayView.prototype.getMarkers = function() {
marker.setAttribute('orient', 'auto');
marker.setAttribute('markerWidth', '30');
marker.setAttribute('markerHeight', '30');
marker.setAttribute('refX', '3');
marker.setAttribute('refY', '.5');
marker.setAttribute('refX', '2.5');
marker.setAttribute('refY', '3');

var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
path.setAttribute('d', "M0,0 L0,3 L3,0");
Expand Down Expand Up @@ -1901,8 +1913,60 @@ underlayView.prototype.getMarkers = function() {
path2.setAttribute('d', "M0,0 L3,3 L3,0");
path2.setAttribute('style', "stroke:#85b9dd; fill:#85b9dd;");
marker2.appendChild(path2);

var marker3 = document.createElementNS('http://www.w3.org/2000/svg', 'marker');
marker3.setAttribute('id', 'bezierUp');
marker3.setAttribute('orient', 'auto');
marker3.setAttribute('markerWidth', '30');
marker3.setAttribute('markerHeight', '30');
marker3.setAttribute('refX', '.5');
marker3.setAttribute('refY', '3.7');

var path3 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
path3.setAttribute('d', "M0,4 L4,0 L4,4");
path3.setAttribute('style', "stroke-width:0px;fill:#85b9dd;");
marker3.appendChild(path3);

var marker4 = document.createElementNS('http://www.w3.org/2000/svg', 'marker');
marker4.setAttribute('id', 'upDeviated');
marker4.setAttribute('orient', 'auto');
marker4.setAttribute('markerWidth', '30');
marker4.setAttribute('markerHeight', '30');
marker4.setAttribute('refX', '-1');
marker4.setAttribute('refY', '1');

var path4 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
path4.setAttribute('d', "M0,0 L3,3 L0,3");
path4.setAttribute('style', "stroke:#85b9dd; fill:#85b9dd;");
marker4.appendChild(path4);

var marker5 = document.createElementNS('http://www.w3.org/2000/svg', 'marker');
marker5.setAttribute('id', 'bezierDown');
marker5.setAttribute('orient', 'auto');
marker5.setAttribute('markerWidth', '30');
marker5.setAttribute('markerHeight', '30');
marker5.setAttribute('refX', '2.5');
marker5.setAttribute('refY', '.5');

var path5 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
path5.setAttribute('d', "M0,0 L0,3 L3,0");
path5.setAttribute('style', "stroke:#85b9dd; fill:#85b9dd;");
marker5.appendChild(path5);

var marker6 = document.createElementNS('http://www.w3.org/2000/svg', 'marker');
marker6.setAttribute('id', 'downDeviated');
marker6.setAttribute('orient', 'auto');
marker6.setAttribute('markerWidth', '30');
marker6.setAttribute('markerHeight', '30');
marker6.setAttribute('refX', '5.5');
marker6.setAttribute('refY', '3');

var path6 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
path6.setAttribute('d', "M0,0 L3,3 L3,0");
path6.setAttribute('style', "stroke:#85b9dd; fill:#85b9dd;");
marker6.appendChild(path6);

return [marker, marker1, marker2];
return [marker, marker1, marker2, marker3, marker4, marker5, marker6];
}

underlayView.prototype.showChildrenOfType = function(parent, child_type) {
Expand Down Expand Up @@ -2432,6 +2496,9 @@ underlayView.prototype.renderTracePath = function(options) {
data: postData
}
}).done(function(response) {
if(typeof underlayRenderer === 'object') {
underlayRenderer.getModel().setFlowPath(response);
}
_this.highlightPath(response, {data: postData});
}).fail(function(error,status) {
_this.resetTopology(false);
Expand Down Expand Up @@ -2520,6 +2587,9 @@ underlayView.prototype.renderTracePath = function(options) {
data: postData
}
}).done(function(response) {
if(typeof underlayRenderer === 'object') {
underlayRenderer.getModel().setFlowPath(response);
}
_this.highlightPath(response, {data: postData});
}).fail(function(error,status) {
_this.resetTopology();
Expand Down Expand Up @@ -2970,16 +3040,47 @@ underlayView.prototype.showPath = function(connectionWrapIds, offsetWidth) {
return;
var hopLength = connectionWrapIds.length;
for(var i=0;i<hopLength;i++) {
this.addOffsetPath(connectionWrapIds[i],offsetWidth);
var isDirectionCrt = this.checkLinkDirection(connectionWrapIds[i]);
this.addOffsetPath(connectionWrapIds[i],offsetWidth,isDirectionCrt);
}
}

underlayView.prototype.addOffsetPath = function(connectionWrapId, offsetWidth) {
underlayView.prototype.checkLinkDirection = function (connectionWrapId) {
var connectionWrapElem = $('#' + connectionWrapId),flowPath = {};
if(typeof underlayRenderer === 'object') {
flowPath = underlayRenderer.getModel().getFlowPath();
}
if(connectionWrapElem.length > 0) {
connectionWrapElem = $(connectionWrapElem[0]);
} else {
return;
}
var linkId = $(connectionWrapElem).parent().attr('model-id');
var linkAttrs = this.getGraph().getCell(linkId).attributes;
var sourceId = linkAttrs.source.id;
var destId = linkAttrs.target.id;
var srcEl = this.getGraph().getCell(sourceId);
var destEl = this.getGraph().getCell(destId);
var srcNodeName = getValueByJsonPath(srcEl,'attributes;nodeDetails;name','-');
var destNodeName = getValueByJsonPath(destEl,'attributes;nodeDetails;name','-');
var isDirectionCrt = false,links = getValueByJsonPath(flowPath,'links',[]);
for(var i = 0; i < links.length; i ++) {
if(srcNodeName == getValueByJsonPath(links[i],'endpoints;0','-') &&
destNodeName == getValueByJsonPath(links[i],'endpoints;1','-')) {
isDirectionCrt = true
break;
}
}
return isDirectionCrt;
}

underlayView.prototype.addOffsetPath = function(connectionWrapId, offsetWidth,isDirectionCrt) {
var connectionWrapElem = $('#' + connectionWrapId);
if(connectionWrapElem.length > 0)
if(connectionWrapElem.length > 0) {
connectionWrapElem = $(connectionWrapElem[0]);
else
} else {
return;
}
var path = connectionWrapElem.attr('d');
var pathCoords;
if(typeof(path) == 'string') {
Expand All @@ -2989,29 +3090,49 @@ underlayView.prototype.addOffsetPath = function(connectionWrapId, offsetWidth) {
pathCoords = $.map(pathCoords,function(val) {
return parseFloat(val);
});
var offsetPath;
var offsetPath;
if(offsetWidth < 0) {
offsetPath = connectionWrapElem.clone().prop('id',connectionWrapId + '_down');
} else {
offsetPath = connectionWrapElem.clone().prop('id',connectionWrapId + '_up');
}
var curve = new Bezier(pathCoords);
offsetPath.attr('marker-end',"url(#head)");
var inclinedVerticalLine = false;
if(curve._linear != true) {
if(isDirectionCrt) {
offsetWidth = -offsetWidth;
offsetPath.attr('marker-start',"url(#bezierUp)");
} else {
offsetPath.attr('marker-end',"url(#bezierDown)");
}
//Hack,till we fix the issue,links b/w TOR and SPINES are not vertical
if(Math.abs(pathCoords[pathCoords.length - 2] - pathCoords[0]) <= 10) {
inclinedVerticalLine = true;
if(isDirectionCrt) {
offsetPath.attr('marker-start','url(#upDeviated)');
} else {
offsetPath.attr('marker-end','url(#downDeviated)');
}
}
var offsetPathStr = this.getOffsetBezierPath(pathCoords,offsetWidth);
var offsetPathCords = offsetPathStr.split(' ');
var offsetPathCordsLen = offsetPathCords.length;
var lastX = offsetPathCords[offsetPathCords.length - 2];
lastX = parseFloat(lastX) - 10;
offsetPathCords[offsetPathCords.length - 2] = lastX;
if(!isDirectionCrt && !inclinedVerticalLine) {
lastX = parseFloat(lastX) - 10;
offsetPathCords[offsetPathCords.length - 2] = lastX;
} else if (isDirectionCrt && !inclinedVerticalLine) {
lastX = parseFloat(lastX) + 10;
offsetPathCords[offsetPathCords.length - 2] = lastX;
}
offsetPath.attr('d',offsetPathCords.join(' '));
} else {
//Vertical line
if(pathCoords[0] == pathCoords[6]) {
//Pointing upwards/downwards
if(pathCoords[1] > pathCoords[7]) {
if(isDirectionCrt) {
offsetPath.attr('transform','translate(' + offsetWidth + ',0)');
offsetPath.attr('marker-end',"url(#up)");
offsetPath.attr('marker-start',"url(#up)");
} else {
offsetPath.attr('transform','translate(-' + offsetWidth + ',0)');
offsetPath.attr('marker-end',"url(#down)");
Expand All @@ -3023,10 +3144,10 @@ underlayView.prototype.addOffsetPath = function(connectionWrapId, offsetWidth) {
}
}

if(offsetWidth < 0) {
offsetPath.attr('class','connection-wrap-down');
} else {
if(isDirectionCrt) {
offsetPath.attr('class','connection-wrap-up');
} else {
offsetPath.attr('class','connection-wrap-down');
}
offsetPath.insertAfter(connectionWrapElem);
}
Expand Down Expand Up @@ -3059,8 +3180,6 @@ underlayView.prototype.destroy = function() {
}
}



var underlayController = function (model, view) {
this.model = model || new underlayModel({nodes:[], links:[]});
this.view = view || new new underlayView(this._model);
Expand Down Expand Up @@ -3098,7 +3217,9 @@ underlayController.prototype.getModelData = function(cfg) {
//Enabling the below tabs only on success of ajax calls.
$("#underlay_tabstrip").tabs('enable');
//Rendering the first search flows tab
underlayView.prototype.renderFlowRecords();
if(typeof underlayRenderer === "object"){
underlayRenderer.getView().renderFlowRecords();
}
}
},
failureCallback : function (err) {
Expand Down

0 comments on commit 3a2851c

Please sign in to comment.