Repository: atlas Updated Branches: refs/heads/master da78c4831 -> 7d27b6853
ATLAS-2937: UI: Lineage filter- support added for depth filter Signed-off-by: nixonrodrigues <[email protected]> Project: http://git-wip-us.apache.org/repos/asf/atlas/repo Commit: http://git-wip-us.apache.org/repos/asf/atlas/commit/7d27b685 Tree: http://git-wip-us.apache.org/repos/asf/atlas/tree/7d27b685 Diff: http://git-wip-us.apache.org/repos/asf/atlas/diff/7d27b685 Branch: refs/heads/master Commit: 7d27b68537a315e409c5e63d8b35de66a9087a34 Parents: da78c48 Author: Abhishek Kadam <[email protected]> Authored: Fri Oct 26 17:53:35 2018 +0530 Committer: nixonrodrigues <[email protected]> Committed: Mon Oct 29 14:44:23 2018 +0530 ---------------------------------------------------------------------- dashboardv2/public/css/scss/graph.scss | 12 ++++++ .../templates/graph/LineageLayoutView_tmpl.html | 8 ++++ dashboardv2/public/js/utils/Overrides.js | 8 ++++ .../public/js/views/graph/LineageLayoutView.js | 40 +++++++++++++++----- 4 files changed, 59 insertions(+), 9 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/atlas/blob/7d27b685/dashboardv2/public/css/scss/graph.scss ---------------------------------------------------------------------- diff --git a/dashboardv2/public/css/scss/graph.scss b/dashboardv2/public/css/scss/graph.scss index 3fce69d..37424d1 100644 --- a/dashboardv2/public/css/scss/graph.scss +++ b/dashboardv2/public/css/scss/graph.scss @@ -238,4 +238,16 @@ g.type-TK>rect { border-radius: 5px; width: 100%; box-shadow: 1px 3px 3px 2px #bfbfbf; +} + +.zoomButtonGroup { + text-align: right; +} + +.depthContainer { + display: inline-block; + margin-top: 3px; + .inline { + display: inline-block; + } } \ No newline at end of file http://git-wip-us.apache.org/repos/asf/atlas/blob/7d27b685/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 cde8fed..aec6f36 100644 --- a/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html +++ b/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html @@ -26,6 +26,14 @@ </label> <span class="pull-left">Hide</span> </div> + <div class="depthContainer"> + <div> + <span class="control-label-sm inline ">Depth :</span> + <div class="select inline" style="width: 80px;"> + <select data-id="selectDepth" class="form-control"></select> + </div> + </div> + </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> http://git-wip-us.apache.org/repos/asf/atlas/blob/7d27b685/dashboardv2/public/js/utils/Overrides.js ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/utils/Overrides.js b/dashboardv2/public/js/utils/Overrides.js index aa69b9b..44c277d 100644 --- a/dashboardv2/public/js/utils/Overrides.js +++ b/dashboardv2/public/js/utils/Overrides.js @@ -26,6 +26,14 @@ define(['require', 'utils/Utils', 'marionette', 'backgrid', 'asBreadcrumbs', 'jq var oldBackboneSync = Backbone.sync; Backbone.sync = function(method, model, options) { var that = this; + if (options.queryParam) { + var generateQueryParam = $.param(options.queryParam); + if (options.url.indexOf('?') !== -1) { + options.url = options.url + "&" + generateQueryParam; + } else { + options.url = options.url + "?" + generateQueryParam; + } + } return oldBackboneSync.apply(this, [method, model, _.extend(options, { error: function(response) { http://git-wip-us.apache.org/repos/asf/atlas/blob/7d27b685/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 5385bc4..4e81143 100644 --- a/dashboardv2/public/js/views/graph/LineageLayoutView.js +++ b/dashboardv2/public/js/views/graph/LineageLayoutView.js @@ -43,13 +43,15 @@ define(['require', /** ui selector cache */ ui: { graph: ".graph", - checkHideProcess: "[data-id='checkHideProcess']" + checkHideProcess: "[data-id='checkHideProcess']", + selectDepth: 'select[data-id="selectDepth"]' }, /** ui events hash */ events: function() { var events = {}; events["click " + this.ui.checkHideProcess] = 'onCheckHideProcess'; + events['change ' + this.ui.selectDepth] = 'onSelectDepthChange'; return events; }, @@ -65,6 +67,10 @@ define(['require', this.apiGuid = {}; this.asyncFetchCounter = 0; this.edgeCall; + this.filterObj = { + isProcessHideCheck: false, + depthCount: '' + }; }, initializeGraph: function() { @@ -98,6 +104,12 @@ define(['require', this.hideCheckForProcess(); } this.initializeGraph(); + this.ui.selectDepth.select2({ + data: _.sortBy([3, 6, 9, 12, 15, 18, 21]), + tags: true, + dropdownCssClass: "number-input", + multiple: false + }); }, onShow: function() { this.$('.fontLoader').show(); @@ -106,14 +118,23 @@ define(['require', var data = $.extend(true, {}, this.lineageData); this.fromToObj = {}; this.initializeGraph(); - this.generateData(data.relations, data.guidEntityMap, e.target.checked); + this.filterObj.isProcessHideCheck = e.target.checked; + this.generateData(data.relations, data.guidEntityMap); }, - fetchGraphData: function() { - var that = this; + onSelectDepthChange: function(e, options) { + this.initializeGraph(); + this.filterObj.depthCount = e.currentTarget.value; + this.fetchGraphData({ queryParam: { 'depth': this.filterObj.depthCount } }); + }, + + fetchGraphData: function(options) { + var that = this, + queryParam = options && options.queryParam || {}; this.fromToObj = {}; this.collection.getLineage(this.guid, { skipDefaultError: true, + queryParam: queryParam, success: function(data) { if (data.relations.length) { that.lineageData = $.extend(true, {}, data) @@ -131,6 +152,7 @@ define(['require', }, noLineage: function() { this.$('.fontLoader').hide(); + this.$('.depthContainer').hide(); //this.$('svg').height('100'); this.$('svg').html('<text x="50%" y="50%" alignment-baseline="middle" text-anchor="middle">No lineage data found</text>'); if (this.actionCallBack) { @@ -140,12 +162,12 @@ define(['require', hideCheckForProcess: function() { this.$('.hideProcessContainer').hide(); }, - generateData: function(relations, guidEntityMap, hideProcess) { + generateData: function(relations, guidEntityMap) { 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") + return _.contains(Utils.getNestedSuperTypes({ data: entityDef.toJSON(), collection: that.entityDefCollection }), "Process") } function makeNodeObj(relationObj) { @@ -160,7 +182,7 @@ define(['require', if (relationObj.status) { obj['status'] = relationObj.status; } - if (hideProcess) { + if (that.filterObj.isProcessHideCheck) { obj['isProcess'] = relationObj.isProcess; } else { obj['isProcess'] = isProcess(relationObj.typeName); @@ -171,7 +193,7 @@ define(['require', var newRelations = []; - if (hideProcess) { + if (this.filterObj.isProcessHideCheck) { _.each(relations, function(obj, index, relationArr) { var isFromEntityIdProcess = isProcess(guidEntityMap[obj.fromEntityId].typeName); var isToEntityProcess = isProcess(guidEntityMap[obj.toEntityId].typeName); @@ -202,7 +224,7 @@ define(['require', } - var finalRelations = hideProcess ? newRelations : relations; + var finalRelations = this.filterObj.isProcessHideCheck ? newRelations : relations;
