You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@atlas.apache.org by sa...@apache.org on 2018/10/14 19:08:07 UTC
atlas git commit: ATLAS-2917: Filter added for Lineage to hide
Process entity. [Forced Update!]
Repository: atlas
Updated Branches:
refs/heads/master c2a2ec426 -> 9e9f024b4 (forced update)
ATLAS-2917: Filter added for Lineage to hide Process entity.
Signed-off-by: Sarath Subramanian <ss...@hortonworks.com>
Project: http://git-wip-us.apache.org/repos/asf/atlas/repo
Commit: http://git-wip-us.apache.org/repos/asf/atlas/commit/9e9f024b
Tree: http://git-wip-us.apache.org/repos/asf/atlas/tree/9e9f024b
Diff: http://git-wip-us.apache.org/repos/asf/atlas/diff/9e9f024b
Branch: refs/heads/master
Commit: 9e9f024b4cda210d407bbde43071546d31ca969b
Parents: 82e0403
Author: kevalbhatt <kb...@apache.org>
Authored: Sun Oct 14 12:00:58 2018 -0700
Committer: Sarath Subramanian <ss...@hortonworks.com>
Committed: Sun Oct 14 12:07:23 2018 -0700
----------------------------------------------------------------------
dashboardv2/public/css/scss/graph.scss | 14 ++-
.../templates/graph/LineageLayoutView_tmpl.html | 21 +++-
.../public/js/views/graph/LineageLayoutView.js | 108 +++++++++++++++----
3 files changed, 115 insertions(+), 28 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/atlas/blob/9e9f024b/dashboardv2/public/css/scss/graph.scss
----------------------------------------------------------------------
diff --git a/dashboardv2/public/css/scss/graph.scss b/dashboardv2/public/css/scss/graph.scss
index 5784095..3fce69d 100644
--- a/dashboardv2/public/css/scss/graph.scss
+++ b/dashboardv2/public/css/scss/graph.scss
@@ -152,11 +152,9 @@ g.type-TK>rect {
fill: $color_bright_turquoise_approx;
}
-.zoomButtonGroup {
- background-color: $white;
+.hideProcessContainer {
position: absolute;
- top: 4px;
- right: 5px;
+ top: 12px;
}
.graph-toolbar {
@@ -232,4 +230,12 @@ g.type-TK>rect {
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
http://git-wip-us.apache.org/repos/asf/atlas/blob/9e9f024b/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html b/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html
index 096fb5b..cde8fed 100644
--- a/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html
+++ b/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html
@@ -16,16 +16,27 @@
-->
<!-- <div class="graph-toolbar clearfix"></div> -->
<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> </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">
<i class="fa fa-refresh fa-spin-custom"></i>
</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">
<i class="fa fa-long-arrow-right" aria-hidden="true" style="margin-right: 12px; color:#8bc152;"> <span>Lineage</span></i>
<i class="fa fa-long-arrow-right" aria-hidden="true" style="color:#fb4200;"> <span>Impact</span></i>
</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>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/atlas/blob/9e9f024b/dashboardv2/public/js/views/graph/LineageLayoutView.js
----------------------------------------------------------------------
diff --git a/dashboardv2/public/js/views/graph/LineageLayoutView.js b/dashboardv2/public/js/views/graph/LineageLayoutView.js
index 0d95f0c..5385bc4 100644
--- a/dashboardv2/public/js/views/graph/LineageLayoutView.js
+++ b/dashboardv2/public/js/views/graph/LineageLayoutView.js
@@ -42,12 +42,14 @@ define(['require',
/** ui selector cache */
ui: {
- graph: ".graph"
+ graph: ".graph",
+ checkHideProcess: "[data-id='checkHideProcess']"
},
/** ui events hash */
events: function() {
var events = {};
+ events["click " + this.ui.checkHideProcess] = 'onCheckHideProcess';
return events;
},
@@ -56,7 +58,7 @@ define(['require',
* @constructs
*/
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.lineageData = null;
this.typeMap = {};
@@ -64,16 +66,9 @@ define(['require',
this.asyncFetchCounter = 0;
this.edgeCall;
},
- onRender: function() {
- var that = this;
- this.$('.fontLoader').show();
- this.fetchGraphData();
- if (platform.name === "IE") {
- this.$('svg').css('opacity', '0');
- }
- if (this.layoutRendered) {
- this.layoutRendered();
- }
+
+ initializeGraph: function() {
+ this.g = {};
this.g = new dagreD3.graphlib.Graph()
.setGraph({
nodesep: 50,
@@ -89,6 +84,31 @@ define(['require',
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() {
var that = this;
this.fromToObj = {};
@@ -96,10 +116,11 @@ define(['require',
skipDefaultError: true,
success: function(data) {
if (data.relations.length) {
- that.lineageData = data;
+ that.lineageData = $.extend(true, {}, data)
that.generateData(data.relations, data.guidEntityMap);
} else {
that.noLineage();
+ that.hideCheckForProcess();
}
},
cust_error: function(model, response) {
@@ -116,9 +137,17 @@ define(['require',
this.actionCallBack();
}
},
- generateData: function(relations, guidEntityMap) {
+ hideCheckForProcess: function() {
+ this.$('.hideProcessContainer').hide();
+ },
+ generateData: function(relations, guidEntityMap, hideProcess) {
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) {
var obj = {};
obj['shape'] = "img";
@@ -131,15 +160,53 @@ define(['require',
if (relationObj.status) {
obj['status'] = relationObj.status;
}
- var entityDef = that.entityDefCollection.fullCollection.find({ name: relationObj.typeName });
- if (entityDef && entityDef.get('superTypes')) {
- obj['isProcess'] = _.contains(entityDef.get('superTypes'), "Process") ? true : false;
+ if (hideProcess) {
+ obj['isProcess'] = relationObj.isProcess;
+ } else {
+ obj['isProcess'] = isProcess(relationObj.typeName);
}
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]) {
that.fromToObj[obj.fromEntityId] = makeNodeObj(guidEntityMap[obj.fromEntityId]);
that.g.setNode(obj.fromEntityId, that.fromToObj[obj.fromEntityId]);
@@ -158,7 +225,7 @@ define(['require',
if (this.fromToObj[this.guid]) {
this.fromToObj[this.guid]['isLineage'] = false;
- this.checkForLineageOrImpactFlag(relations, this.guid);
+ this.checkForLineageOrImpactFlag(finalRelations, this.guid);
}
if (this.asyncFetchCounter == 0) {
this.createGraph();
@@ -308,6 +375,9 @@ define(['require',
return shapeSvg;
};
// 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])
.attr("viewBox", "0 0 " + width + " " + height)
.attr("enable-background", "new 0 0 " + width + " " + height),