Skip to content

A
atlas
Commit 9e9f024b by kevalbhatt Committed by Sarath Subramanian
Options

ATLAS-2917: Filter added for Lineage to hide Process entity.

Signed-off-by: 's avatarSarath Subramanian <ssubramanian@hortonworks.com>
parent 82e04037
Showing with 116 additions and 29 deletions
dashboardv2/public/css/scss/graph.scss
...@@ -152,11 +152,9 @@ g.type-TK>rect { ...@@ -152,11 +152,9 @@ g.type-TK>rect {
fill: $color_bright_turquoise_approx; fill: $color_bright_turquoise_approx;
} }
.zoomButtonGroup { .hideProcessContainer {
background-color: $white;
position: absolute; position: absolute;
top: 4px; top: 12px;
right: 5px;
} }
.graph-toolbar { .graph-toolbar {
...@@ -232,4 +230,12 @@ g.type-TK>rect { ...@@ -232,4 +230,12 @@ g.type-TK>rect {
text-align: left; text-align: left;
} }
} }
}
.lineage-filter-box {
background-color: #e6e6e6;
padding: 4px;
border-radius: 5px;
width: 100%;
box-shadow: 1px 3px 3px 2px #bfbfbf;
} }
\ No newline at end of file
dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html
...@@ -16,16 +16,27 @@ ...@@ -16,16 +16,27 @@
--> -->
<!-- <div class="graph-toolbar clearfix"></div> --> <!-- <div class="graph-toolbar clearfix"></div> -->
<div style="position: absolute;height:100%;width:100%;" class="white-bg no-padding lineage-box"> <div style="position: absolute;height:100%;width:100%;" class="white-bg no-padding lineage-box">
<div class="lineage-filter-box clearfix">
<div class="hideProcessContainer">
<span class="pull-left"><b>Load Process:</b>&nbsp</span>
<span class="pull-left">Show</span>
<label class="switch pull-left">
<input type="checkbox" class="switch-input" data-id="checkHideProcess" value="" />
<span class="switch-slider"></span>
</label>
<span class="pull-left">Hide</span>
</div>
<div class="zoomButtonGroup pull-right">
<span type="button" id="zoom_in" class="btn btn-atlas btn-md lineageZoomButton" title="Zoom In" data-id="refreshBtn"> <i class="fa fa-search-plus"></i></span>
<span type="button" id="zoom_out" class="btn btn-atlas btn-md lineageZoomButton" title="Zoom Out" data-id="refreshBtn"> <i class="fa fa-search-minus"></i></span>
</div>
</div>
<div class="fontLoader"> <div class="fontLoader">
<i class="fa fa-refresh fa-spin-custom"></i> <i class="fa fa-refresh fa-spin-custom"></i>
</div> </div>
<svg width="100%" height="calc(100% - 30px)" viewBox="0 0 854 330" enable-background="new 0 0 854 330" xml:space="preserve"></svg> <svg width="100%" height="calc(100% - 80px)" viewBox="0 0 854 330" enable-background="new 0 0 854 330" xml:space="preserve"></svg>
<div class="legends" style="height: 20px"> <div class="legends" style="height: 20px">
<i class="fa fa-long-arrow-right" aria-hidden="true" style="margin-right: 12px; color:#8bc152;">&nbsp<span>Lineage</span></i> <i class="fa fa-long-arrow-right" aria-hidden="true" style="margin-right: 12px; color:#8bc152;">&nbsp<span>Lineage</span></i>
<i class="fa fa-long-arrow-right" aria-hidden="true" style="color:#fb4200;">&nbsp<span>Impact</span></i> <i class="fa fa-long-arrow-right" aria-hidden="true" style="color:#fb4200;">&nbsp<span>Impact</span></i>
</div> </div>
<div class="zoomButtonGroup">
<span type="button" id="zoom_in" class="btn btn-action btn-md lineageZoomButton" title="Zoom In" data-id="refreshBtn"> <i class="fa fa-search-plus"></i></span>
<span type="button" id="zoom_out" class="btn btn-action btn-md lineageZoomButton" title="Zoom Out" data-id="refreshBtn"> <i class="fa fa-search-minus"></i></span>
</div>
</div> </div>
\ No newline at end of file
dashboardv2/public/js/views/graph/LineageLayoutView.js
...@@ -42,12 +42,14 @@ define(['require', ...@@ -42,12 +42,14 @@ define(['require',
/** ui selector cache */ /** ui selector cache */
ui: { ui: {
graph: ".graph" graph: ".graph",
checkHideProcess: "[data-id='checkHideProcess']"
}, },
/** ui events hash */ /** ui events hash */
events: function() { events: function() {
var events = {}; var events = {};
events["click " + this.ui.checkHideProcess] = 'onCheckHideProcess';
return events; return events;
}, },
...@@ -56,7 +58,7 @@ define(['require', ...@@ -56,7 +58,7 @@ define(['require',
* @constructs * @constructs
*/ */
initialize: function(options) { initialize: function(options) {
_.extend(this, _.pick(options, 'guid', 'entityDefCollection', 'actionCallBack', 'fetchCollection')); _.extend(this, _.pick(options, 'processCheck', 'guid', 'entityDefCollection', 'actionCallBack', 'fetchCollection'));
this.collection = new VLineageList(); this.collection = new VLineageList();
this.lineageData = null; this.lineageData = null;
this.typeMap = {}; this.typeMap = {};
...@@ -64,16 +66,9 @@ define(['require', ...@@ -64,16 +66,9 @@ define(['require',
this.asyncFetchCounter = 0; this.asyncFetchCounter = 0;
this.edgeCall; this.edgeCall;
}, },
onRender: function() {
var that = this; initializeGraph: function() {
this.$('.fontLoader').show(); this.g = {};
this.fetchGraphData();
if (platform.name === "IE") {
this.$('svg').css('opacity', '0');
}
if (this.layoutRendered) {
this.layoutRendered();
}
this.g = new dagreD3.graphlib.Graph() this.g = new dagreD3.graphlib.Graph()
.setGraph({ .setGraph({
nodesep: 50, nodesep: 50,
...@@ -89,6 +84,31 @@ define(['require', ...@@ -89,6 +84,31 @@ define(['require',
return {}; return {};
}); });
}, },
onRender: function() {
var that = this;
this.fetchGraphData();
if (platform.name === "IE") {
this.$('svg').css('opacity', '0');
}
if (this.layoutRendered) {
this.layoutRendered();
}
if (this.processCheck) {
this.hideCheckForProcess();
}
this.initializeGraph();
},
onShow: function() {
this.$('.fontLoader').show();
},
onCheckHideProcess: function(e) {
var data = $.extend(true, {}, this.lineageData);
this.fromToObj = {};
this.initializeGraph();
this.generateData(data.relations, data.guidEntityMap, e.target.checked);
},
fetchGraphData: function() { fetchGraphData: function() {
var that = this; var that = this;
this.fromToObj = {}; this.fromToObj = {};
...@@ -96,10 +116,11 @@ define(['require', ...@@ -96,10 +116,11 @@ define(['require',
skipDefaultError: true, skipDefaultError: true,
success: function(data) { success: function(data) {
if (data.relations.length) { if (data.relations.length) {
that.lineageData = data; that.lineageData = $.extend(true, {}, data)
that.generateData(data.relations, data.guidEntityMap); that.generateData(data.relations, data.guidEntityMap);
} else { } else {
that.noLineage(); that.noLineage();
that.hideCheckForProcess();
} }
}, },
cust_error: function(model, response) { cust_error: function(model, response) {
...@@ -116,9 +137,17 @@ define(['require', ...@@ -116,9 +137,17 @@ define(['require',
this.actionCallBack(); this.actionCallBack();
} }
}, },
generateData: function(relations, guidEntityMap) { hideCheckForProcess: function() {
this.$('.hideProcessContainer').hide();
},
generateData: function(relations, guidEntityMap, hideProcess) {
var that = this; var that = this;
function isProcess(typeName) {
var entityDef = that.entityDefCollection.fullCollection.find({ name: typeName });
return _.contains(Utils.getNestedSuperTypes({ data: entityDef.toJSON(), collection: that.entityDefCollection}), "Process")
}
function makeNodeObj(relationObj) { function makeNodeObj(relationObj) {
var obj = {}; var obj = {};
obj['shape'] = "img"; obj['shape'] = "img";
...@@ -131,15 +160,53 @@ define(['require', ...@@ -131,15 +160,53 @@ define(['require',
if (relationObj.status) { if (relationObj.status) {
obj['status'] = relationObj.status; obj['status'] = relationObj.status;
} }
var entityDef = that.entityDefCollection.fullCollection.find({ name: relationObj.typeName }); if (hideProcess) {
if (entityDef && entityDef.get('superTypes')) { obj['isProcess'] = relationObj.isProcess;
obj['isProcess'] = _.contains(entityDef.get('superTypes'), "Process") ? true : false; } else {
obj['isProcess'] = isProcess(relationObj.typeName);
} }
return obj; return obj;
} }
_.each(relations, function(obj, index) { var newRelations = [];
if (hideProcess) {
_.each(relations, function(obj, index, relationArr) {
var isFromEntityIdProcess = isProcess(guidEntityMap[obj.fromEntityId].typeName);
var isToEntityProcess = isProcess(guidEntityMap[obj.toEntityId].typeName);
if (isToEntityProcess) {
guidEntityMap[obj.toEntityId]["isProcess"] = true;
_.filter(relationArr, function(flrObj) {
if (flrObj.fromEntityId === obj.toEntityId) {
newRelations.push({
fromEntityId: obj.fromEntityId,
toEntityId: flrObj.toEntityId
});
}
})
} else if (isFromEntityIdProcess) {
guidEntityMap[obj.fromEntityId]["isProcess"] = true;
_.filter(relationArr, function(flrObj) {
if (flrObj.toEntityId === obj.fromEntityId) {
newRelations.push({
fromEntityId: flrObj.fromEntityId,
toEntityId: obj.toEntityId
});
}
})
} else {
newRelations.push(obj);
}
});
}
var finalRelations = hideProcess ? newRelations : relations;
_.each(finalRelations, function(obj, index) {
if (!that.fromToObj[obj.fromEntityId]) { if (!that.fromToObj[obj.fromEntityId]) {
that.fromToObj[obj.fromEntityId] = makeNodeObj(guidEntityMap[obj.fromEntityId]); that.fromToObj[obj.fromEntityId] = makeNodeObj(guidEntityMap[obj.fromEntityId]);
that.g.setNode(obj.fromEntityId, that.fromToObj[obj.fromEntityId]); that.g.setNode(obj.fromEntityId, that.fromToObj[obj.fromEntityId]);
...@@ -158,7 +225,7 @@ define(['require', ...@@ -158,7 +225,7 @@ define(['require',
if (this.fromToObj[this.guid]) { if (this.fromToObj[this.guid]) {
this.fromToObj[this.guid]['isLineage'] = false; this.fromToObj[this.guid]['isLineage'] = false;
this.checkForLineageOrImpactFlag(relations, this.guid); this.checkForLineageOrImpactFlag(finalRelations, this.guid);
} }
if (this.asyncFetchCounter == 0) { if (this.asyncFetchCounter == 0) {
this.createGraph(); this.createGraph();
...@@ -308,6 +375,9 @@ define(['require', ...@@ -308,6 +375,9 @@ define(['require',
return shapeSvg; return shapeSvg;
}; };
// Set up an SVG group so that we can translate the final graph. // Set up an SVG group so that we can translate the final graph.
if (this.$("svg").find('.output').length) {
this.$("svg").find('.output').parent('g').remove();
}
var svg = this.svg = d3.select(this.$("svg")[0]) var svg = this.svg = d3.select(this.$("svg")[0])
.attr("viewBox", "0 0 " + width + " " + height) .attr("viewBox", "0 0 " + width + " " + height)
.attr("enable-background", "new 0 0 " + width + " " + height), .attr("enable-background", "new 0 0 " + width + " " + height),
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment