Skip to content

Commit

Permalink
Realted-Bug:#1529765
Browse files Browse the repository at this point in the history 
1)Draggable nodes both horizontal and vertical
2)Parallel links for map flow and trace flow
3)Bezier curved links b/w nodes
4)Double click on a node when trace/map flow is shown.
	An error message pops up warning user that the action clears the map/trace flow.
	Checkbox to clear this error message if the user doesn't want to see this message again.
5)Showing the selected flow info in the bread crumb while doing trace/map flow.

Change-Id: I56d31aeae72a0313a550b647e36a851fc089e69e
  • Loading branch information
@vishnuvv
vishnuvv committed Jan 21, 2016
1 parent 96418d5 commit 3fa4a49
Show file tree
Hide file tree
Showing 10 changed files with 741 additions and 228 deletions.
1 change: 1 addition & 0 deletions webroot/common/ui/js/controller.constants.js
View file
Expand Up @@ -231,6 +231,7 @@ define([
this.UNDERLAY_LINK = 'link';
this.TRACEFLOW_MAXATTEMPTS = 3;
this.TRACEFLOW_INTERVAL = 5;
this.UNDERLAY_FLOW_INFO_TEMPLATE = "flow-info-template";

this.getProjectsURL = function (domainObj, dropdownOptions) {
/* Default: get projects from keystone or API Server as specified in
Expand Down
12 changes: 12 additions & 0 deletions webroot/common/ui/templates/controller.tmpl
View file
Expand Up @@ -32,6 +32,18 @@
</div>
</div>
</script>

<script type="text/x-handlebars-template" id="flow-info-template">
<div id = "flow-info">
<span class="">{{action}} </span>
from
<span class="">[IP:<span class="bold"> {{sourceip}}</span>, Port: <span class="bold">{{sport}}</span>]</span>
to
<span class="">[IP: <span class="bold">{{destip}}</span>, Port: <span class="bold">{{dport}}</span>]</span>
<span class="reset">reset</span>
</div>
</script>

<script type="text/x-handlebars-template" id="form-result-page-template">
<div id="{{prefix}}-container">
<div id='{{prefix}}-form-container'>
Expand Down
26 changes: 24 additions & 2 deletions webroot/monitor/infrastructure/common/ui/js/utils/monitor.infra.utils.js
View file
Expand Up @@ -2762,10 +2762,18 @@ define([
graphModel.flowPath.set({
'nodes': ifNull(response['nodes'], []),
'links': ifNull(response['links'], [])
});
}, {silent:true});
graphModel.flowPath.trigger('change:nodes');
if (ifNull(response['nodes'], []).length == 0 ||
ifNull(response['links'], []).length == 0) {
graphModel.flowPath.trigger('change:nodes');
} else {
monitorInfraUtils.addUnderlayFlowInfoToBreadCrumb({
action: 'Map Flow',
sourceip: params['srcIP'],
destip: params['destIP'],
sport: params['sport'],
dport: params['dport']
});
}
$('html,body').animate({scrollTop:0}, 500);
}).fail (function () {
Expand All @@ -2792,6 +2800,20 @@ define([
}
};

self.addUnderlayFlowInfoToBreadCrumb = function (data) {
// Removing the last flow info in the breadcrumb
self.removeUndelrayFlowInfoFromBreadCrumb();
// Adding the current flow info to the breadcrumb
pushBreadcrumb([
contrail.getTemplate4Id(ctwc.UNDERLAY_FLOW_INFO_TEMPLATE)(data)
]);
};
self.removeUndelrayFlowInfoFromBreadCrumb = function () {
if ($("#breadcrumb li").last().find('div#flow-info').length > 0) {
$("#breadcrumb li").last().remove();
$('#breadcrumb li').last().children('span').remove();
}
};
self.getPostDataForGeneratorType = function (options){
var type,moduleType="",kfilt="";
var nodeType = options.nodeType;
Expand Down
13 changes: 13 additions & 0 deletions webroot/monitor/infrastructure/common/ui/templates/monitor.infra.tmpl
View file
Expand Up @@ -42,4 +42,17 @@
<script type="text/x-handlebars-template" id="monitor-infra-details-footer-links-template">
<div class="footer-links">
</div>
</script>

<script type="text/x-handlebars-template" id="monitor-infra-topology-reset-template">
<div>Double click on a node clears the map/trace flow.
<br>
Do you want to continue?
<br>
<br>
<div>
<input class="ace-input" type="checkbox" id="remember-reset-topology">
<span class="ace-lbl"> Dont show this message again</span>
</div>
</div>
</script>
13 changes: 9 additions & 4 deletions webroot/monitor/infrastructure/underlay/ui/js/models/UnderlayGraphModel.js
View file
Expand Up @@ -24,7 +24,6 @@ define(['backbone', 'contrail-view-model'],
this.adjacencyList = [],
this.underlayAdjacencyList = [],
this.connectedElements = [],
this.underlayPathIds = [],
this.underlayPathReqObj = {},
this.uveMissingNodes = [],
this.configMissingNodes = [],
Expand Down Expand Up @@ -153,7 +152,7 @@ define(['backbone', 'contrail-view-model'],
}
}
this.firstLevelNodes = firstLevelNodes;
this.parseTree(firstLevelNodes, tree, tmpTree);
this.parseTree(firstLevelNodes, tree, tmpTree, null);
if(JSON.stringify(tmpTree) !== "{}") {
$.each(tmpTree, function (elementKey, elementValue) {
tree[elementKey] = elementValue;
Expand Down Expand Up @@ -201,7 +200,7 @@ define(['backbone', 'contrail-view-model'],
}
},

parseTree : function (parents, tree, tmpTree) {
parseTree : function (parents, tree, tmpTree, parent) {
if(null !== parents && false !== parents &&
typeof parents === "object" && parents.length > 0) {
for(var i=0; i<parents.length; i++) {
Expand All @@ -212,12 +211,18 @@ define(['backbone', 'contrail-view-model'],
var children_chassis_type =
this.getChildChassisType(parent_chassis_type);
tree[parents[i].name] = parents[i];
if(!tree[parents[i].name].hasOwnProperty("parent")) {
tree[parents[i].name]["parent"] = [];
}
if($.inArray(parent, tree[parents[i].name]["parent"]) == -1)
tree[parents[i].name]["parent"].push(parent);
var children =
this.getChildren(parents[i].name, children_chassis_type);

tree[parents[i].name]["children"] = {};
this.parseTree(children,
tree[parents[i].name]["children"],
tmpTree);
tmpTree, parents[i].name);
}
}
return tree;
Expand Down
23 changes: 18 additions & 5 deletions webroot/monitor/infrastructure/underlay/ui/js/views/SearchFlowFormView.js
View file
Expand Up @@ -20,11 +20,7 @@ define([
self.renderView4Config($(self.$el).find(queryFormId), this.model,
self.getViewConfig(), null, null, null,
function (searchFlowFormView) {
var graphModel = monitorInfraUtils.getUnderlayGraphModel();
searchFlowFormView.listenTo(graphModel.selectedElement,
'change', function (selectedElement) {
updateWhereClause(selectedElement, searchFlowFormView);
});
self.listenToGraphModel(searchFlowFormView);
self.model.showErrorAttr(ctwc.UNDERLAY_SEARCHFLOW_TAB_ID, false);
Knockback.applyBindings(self.model,
document.getElementById(ctwc.UNDERLAY_SEARCHFLOW_TAB_ID));
Expand All @@ -39,6 +35,20 @@ define([
self.model, widgetConfig, null, null, null);
}
},
listenToGraphModel : function (searchFlowFormView) {
var _this = this;
if($('#' + ctwl.UNDERLAY_GRAPH_ID).data('graphModel') != null) {
var graphModel = monitorInfraUtils.getUnderlayGraphModel();
searchFlowFormView.listenTo(graphModel.selectedElement,
'change', function (selectedElement) {
updateWhereClause(selectedElement, searchFlowFormView);
});
} else {
setTimeout(function(searchFlowFormView) {
_this.listenToGraphModel(_this)
}, 1000);
}
},
renderQueryResult: function() {
var self = this,
queryResultId =
Expand Down Expand Up @@ -193,6 +203,9 @@ define([
whereClauseStr += ' OR ';
}
searchFlowFormView.model.where(whereClauseStr);
} else {
whereClauseStr = '';
searchFlowFormView.model.where(whereClauseStr);
}
}
function getFromTimeElementConfig(fromTimeId, toTimeId) {
Expand Down
28 changes: 25 additions & 3 deletions webroot/monitor/infrastructure/underlay/ui/js/views/TraceFlowResultView.js
View file
Expand Up @@ -145,12 +145,24 @@ define([
formModel) {
var gridId = ctwc.TRACEFLOW_RESULTS_GRID_ID;
var customControls = [], footer = true;
var gridTitle = '',
underlayGraphModel = monitorInfraUtils.getUnderlayGraphModel();
if (formModel.traceflow_radiobtn_name() == 'vRouter') {
customControls = [
'<a class="widget-toolbar-icon"><i class="icon-forward"></i></a>',
'<a class="widget-toolbar-icon"><i class="icon-backward"></i></a>',
];
footer = false;
gridTitle = contrail.format("{0} ({1})",'Active flows of Virtual Router',
formModel.vrouter_dropdown_name());
} else {
var vmDetails =
underlayGraphModel.vmMap[formModel.instance_dropdown_name()];
var name =
getValueByJsonPath(vmDetails, 'more_attributes;vm_name', '-');
if(name == '-')
name = getValueByJsonPath(vmDetails, 'name', '-');
gridTitle = contrail.format('{0} ({1})','Last 10 minute flows of Virtual Machine', name);
}
function resetLoadingIcon () {
$("#" +ctwc.TRACEFLOW_RESULTS_GRID_ID
Expand All @@ -160,7 +172,7 @@ define([
var gridElementConfig = {
header: {
title: {
text: 'Flows',
text: gridTitle,
},
customControls: customControls,
defaultControls: {
Expand Down Expand Up @@ -335,6 +347,7 @@ define([
showInfoWindow("Cannot Trace route for the selected flow", "Info");
return;
}
postData['action'] = 'Trace Flow';
if (postData['vrfId'] != null) {
doTraceFlowRequest(postData, graphModel, deferredObj);
} else {
Expand Down Expand Up @@ -425,6 +438,7 @@ define([
showInfoWindow("Cannot Trace route for the selected flow", "Info");
return;
}
postData['action'] = 'Reverse Trace Flow';
if(postData['vrfId'] != null) {
doTraceFlowRequest(postData, graphModel, deferredObj);
} else {
Expand Down Expand Up @@ -510,10 +524,18 @@ define([
graphModel.flowPath.set({
'nodes': ifNull(response['nodes'], []),
'links': ifNull(response['links'], [])
});
},{silent: true});
graphModel.flowPath.trigger('change:nodes');
if (ifNull(response['nodes'], []).length == 0 ||
ifNull(response['links'], []).length == 0) {
graphModel.flowPath.trigger('change:nodes');
} else {
monitorInfraUtils.addUnderlayFlowInfoToBreadCrumb({
action: postData['action'],
sourceip: postData['srcIP'],
destip: postData['destIP'],
sport: postData['srcPort'],
dport: postData['destPort']
});
}
}
if(typeof response != 'string')
Expand Down
9 changes: 5 additions & 4 deletions webroot/monitor/infrastructure/underlay/ui/js/views/TrafficStatisticsView.js
View file
Expand Up @@ -33,11 +33,11 @@ define([
}
}
};
// Displaying widget with loading icon till the ajax call for
// stats finish.
self.renderView4Config($("#"+ctwc.UNDERLAY_TRAFFICSTATS_TAB_ID+'-tempdiv'),
null, tempViewConfig, null, null);
if(trafficStatsViewConfig.modelConfig != null) {
// Displaying widget with loading icon till the ajax call for
// stats finish.
self.renderView4Config($("#"+ctwc.UNDERLAY_TRAFFICSTATS_TAB_ID+'-tempdiv'),
null, tempViewConfig, null, null);
var contrailListModel = new ContrailListModel(
trafficStatsConfig.viewConfig.modelConfig);
contrailListModel.onAllRequestsComplete.subscribe(
Expand Down Expand Up @@ -94,6 +94,7 @@ define([
}
});
} else {
self.$el.html('');
// vrouter and vm link
self.renderView4Config(self.$el, null, trafficStatsConfig,
null, null, trafficStatsConfig.modelMap);
Expand Down

0 comments on commit 3fa4a49

Please sign in to comment.