Skip to content

Commit

Permalink
Migrating underlay/overlay topology from 'jointjs' to 'visjs'
Browse files Browse the repository at this point in the history 
1) Initial changes required to import visjs instead of jointjs for
topology visualization.
 - UnderlayGraphView extends ContrailView
 - UnderlayGraphModel extends ContrailVisModel which inturn extends Backbone.Model, takes ContrailRemoteDataHandler as argument.
 - Save UnderlayGraphModel in the 'data' attribute of 'underlay-graph' div.
2) Removing the earlier paths of trace and map flow
3) HostName and Management IP label change in the details tab.
4) Added the node name to the title in prouter details tab
5) Showing the loading icon in topology portion.

Related-Bug: #1529765

Change-Id: I2fb8a0f6fff9099bbf672e2a2b6eeb27ce143b79
  • Loading branch information
@vishnuvv
vishnuvv committed Jan 5, 2016
1 parent 62e8e8f commit 77887e0
Show file tree
Hide file tree
Showing 10 changed files with 1,574 additions and 1,158 deletions.
15 changes: 5 additions & 10 deletions webroot/common/ui/templates/controller.tmpl
View file
Expand Up @@ -24,16 +24,11 @@


<script type="text/x-handlebars-template" id="underlay-graph-template">
<div class="row-fluid visualization-container">
<div class="graph-canvas" style="overflow: hidden; height: 520px; width: 1230px;">
<div style="overflow: hidden; position: relative; display: inline-block;">
<div id="underlay-graph" class="topology-visualization" style="position: relative; overflow: hidden; height:520px; display: inline-block; width:1190px;">
<div id="graph-loading" class="graph-loading">
<p class="loading-message">Loading..<p>
</div>
</div>
</div>
<div id="graph-control-panel" style= "display:inline;"></div>
<div class="row-fluid visualization-container" style="position: relative;">
<div id="graph-loading" class="graph-loading">
<p class="loading-message">Loading..<p>
</div>
<div id="underlay-graph" style="height:350px; display: block; width:1190px;">
</div>
</div>
</script>
Expand Down
5 changes: 2 additions & 3 deletions webroot/monitor/infrastructure/common/ui/js/utils/monitor.infra.parsers.js
View file
Expand Up @@ -1725,9 +1725,8 @@ define(
}
};
this.parseUnderlayFlowRecords = function (response) {
var graphView =
$("#"+ctwl.UNDERLAY_GRAPH_ID).data('graphView');
response['vRouters'] = graphView.model.vRouters;
var graphModel = monitorInfraUtils.getUnderlayGraphModel();
response['vRouters'] = graphModel.vRouters;
var vRouters = ifNull(response['vRouters'],[]);
$.each(ifNull(response['data'],[]),function (idx,obj) {
var formattedVrouter,formattedOtherVrouter,
Expand Down
34 changes: 17 additions & 17 deletions webroot/monitor/infrastructure/common/ui/js/utils/monitor.infra.utils.js
View file
Expand Up @@ -1863,13 +1863,13 @@ define([
viewConfig: {
data: viewConfig.data,
templateConfig: monitorInfraUtils.
getUnderlayDetailsTabTemplateConfig(),
getUnderlayDetailsTabTemplateConfig(viewConfig.data),
app: cowc.APP_CONTRAIL_CONTROLLER,
},
}
};

self.getUnderlayDetailsTabTemplateConfig = function() {
self.getUnderlayDetailsTabTemplateConfig = function(data) {
return {
advancedViewOptions: false,
templateGenerator: 'RowSectionTemplateGenerator',
Expand All @@ -1883,12 +1883,15 @@ define([
class: 'span6',
rows: [
{
title: ctwl.UNDERLAY_PROUTER_DETAILS,
title: contrail.format('{0} ( {1} )',
ctwl.UNDERLAY_PROUTER_DETAILS,
data.hostName),
templateGenerator:
'BlockListTemplateGenerator',
templateGeneratorConfig: [
{
key: 'hostName',
label: 'Hostname',
templateGenerator:
'TextGenerator'
},{
Expand All @@ -1906,6 +1909,7 @@ define([
}
},{
key: 'managementIP',
label: 'Management IP',
templateGenerator:
'TextGenerator',
}
Expand All @@ -1924,10 +1928,8 @@ define([
self.getTrafficStatisticsTabViewConfig = function (data) {
var ajaxConfig = {};
var endpoints = ifNull(data['endpoints'],[]);
var sourceType = getValueByJsonPath(data,
'sourceElement;attributes;nodeDetails;node_type','-');
var targetType = getValueByJsonPath(data,
'targetElement;attributes;nodeDetails;node_type','-');
var sourceType = getValueByJsonPath(data,'sourceElement;node_type','-');
var targetType = getValueByJsonPath(data,'targetElement;node_type','-');
var view = 'LineWithFocusChartView', modelMap = null;
var viewConfig = {}, viewPathPrefix;
if(sourceType == ctwc.PROUTER && targetType == ctwc.PROUTER) {
Expand All @@ -1951,8 +1953,7 @@ define([
};
} else if(sourceType == ctwc.PROUTER && targetType == ctwc.VROUTER) {
var vrouter = (sourceType == ctwc.VROUTER) ?
data['sourceElement']['attributes']['nodeDetails']['name']:
data['targetElement']['attributes']['nodeDetails']['name'];
data['sourceElement']['name']: data['targetElement']['name'];
var params = {
minsSince: 60,
sampleCnt: 120,
Expand Down Expand Up @@ -1991,10 +1992,9 @@ define([
}
} else if(sourceType == ctwc.VIRTUALMACHINE ||
targetType == ctwc.VIRTUALMACHINE) {
var instanceUUID = getValueByJsonPath(data,
'targetElement;attributes;nodeDetails;name','-');
var instanceUUID = getValueByJsonPath(data, 'targetElement;name','-');
var vmName = getValueByJsonPath(data,
'targetElement;attributes;nodeDetails;more_attributes;vm_name','-');
'targetElement;more_attributes;vm_name','-');
var modelKey = ctwc.get(ctwc.UMID_INSTANCE_UVE, instanceUUID);
view = 'InstanceTrafficStatsView';
viewPathPrefix = 'monitor/networking/ui/js/views/';
Expand Down Expand Up @@ -2094,8 +2094,8 @@ define([
},

self.getTraceFlowVrouterGridColumns = function () {
var graphView = $("#"+ctwl.UNDERLAY_GRAPH_ID).data('graphView');
computeNodes = graphView.model.vRouters;
var graphModel = monitorInfraUtils.getUnderlayGraphModel();
computeNodes = graphModel.vRouters;
return [
{
field:'peer_vrouter',
Expand Down Expand Up @@ -2358,8 +2358,8 @@ define([
}
];
};
self.getUnderlayGraphInstance = function () {
return $("#"+ctwl.UNDERLAY_GRAPH_ID).data('graphView');
self.getUnderlayGraphModel = function () {
return $("#"+ctwl.UNDERLAY_GRAPH_ID).data('graphModel');
};

self.showFlowPath = function (connectionWrapIds, offsetWidth, graphView) {
Expand Down Expand Up @@ -2619,7 +2619,7 @@ define([
};

self.showUnderlayPaths = function (data) {
var graphModel = monitorInfraUtils.getUnderlayGraphInstance().model;
var graphModel = monitorInfraUtils.getUnderlayGraphModel();
var currentUrlHashObj = layoutHandler.getURLHashObj(),
currentPage = currentUrlHashObj.p,
currentParams = currentUrlHashObj.q;
Expand Down

0 comments on commit 77887e0

Please sign in to comment.