ATLAS-2937: UI: Lineage filter- support added for depth filter

dashboardv2/public/css/scss/graph.scss

@@ -239,3 +239,15 @@ g.type-TK>rect {
     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

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>

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) {

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;