Repository: atlas Updated Branches: refs/heads/branch-0.8 900f99bb4 -> 6bc3aee11
http://git-wip-us.apache.org/repos/asf/atlas/blob/6bc3aee1/dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js b/dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js index 626cd54..8f6b3fa 100644 --- a/dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js +++ b/dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js @@ -58,12 +58,12 @@ define(['require', description: '[data-id="description"]', editBox: '[data-id="editBox"]', deleteTag: '[data-id="deleteTag"]', - backButton: "[data-id='backButton']", addTag: '[data-id="addTag"]', addTerm: '[data-id="addTerm"]', tagList: '[data-id="tagList"]', termList: '[data-id="termList"]', - fullscreenPanel: "#fullscreen_panel" + fullscreenPanel: "#fullscreen_panel", + entityIcon: '[data-id="entityIcon"]' }, templateHelpers: function() { return { @@ -97,9 +97,6 @@ define(['require', events["click " + this.ui.deleteTag] = 'onClickTagCross'; events["click " + this.ui.addTag] = 'onClickAddTagBtn'; events["click " + this.ui.addTerm] = 'onClickAddTermBtn'; - events['click ' + this.ui.backButton] = function() { - Backbone.history.history.back(); - }; return events; }, /** @@ -108,6 +105,7 @@ define(['require', */ initialize: function(options) { _.extend(this, _.pick(options, 'value', 'collection', 'id', 'entityDefCollection', 'typeHeaders', 'enumDefCollection', 'classificationDefCollection')); + $('body').addClass("detail-page"); }, bindEvents: function() { var that = this; @@ -116,6 +114,19 @@ define(['require', var collectionJSON = this.entityObject.entity; // MergerRefEntity. Utils.findAndMergeRefEntity(collectionJSON.attributes, this.entityObject.referredEntities); + this.activeEntityDef = this.entityDefCollection.fullCollection.find({ name: collectionJSON.typeName }); + + // check if entity is process + var isProcess = false, + superTypes = Utils.getNestedSuperTypes({ data: this.activeEntityDef.toJSON(), collection: this.entityDefCollection }), + isLineageRender = _.find(superTypes, function(type) { + if (type === "DataSet" || type === "Process") { + if (type === "Process") { + isProcess = true; + } + return true; + } + }); if (collectionJSON && collectionJSON.guid) { var tagGuid = collectionJSON.guid; @@ -145,6 +156,15 @@ define(['require', titleName += '<button title="Deleted" class="btn btn-action btn-md deleteBtn"><i class="fa fa-trash"></i> Deleted</button>'; } this.ui.title.html(titleName); + var entityData = _.extend({ "serviceType": this.activeEntityDef && this.activeEntityDef.get('serviceType'), "isProcess": isProcess }, collectionJSON); + if (this.readOnly) { + this.ui.entityIcon.addClass('disabled'); + } else { + this.ui.entityIcon.removeClass('disabled'); + } + this.ui.entityIcon.attr('title', _.escape(collectionJSON.typeName)).html('<img src="' + Utils.getEntityIconPath({ entityData: entityData }) + '"/>').find("img").on('error', function() { + this.src = Utils.getEntityIconPath({ entityData: entityData, errorUrl: this.src }); + }); } else { this.ui.title.hide(); } @@ -175,7 +195,6 @@ define(['require', } } this.hideLoader(); - this.activeEntityDef = this.entityDefCollection.fullCollection.find({ name: collectionJSON.typeName }); var obj = { entity: collectionJSON, guid: this.id, @@ -212,25 +231,25 @@ define(['require', this.renderReplicationAuditTableLayoutView(obj); } - var processCheck = false, - containsList = Utils.getNestedSuperTypes({ data: this.activeEntityDef.toJSON(), collection: this.entityDefCollection }), - superType = _.find(containsList, function(type) { - if (type === "DataSet" || type === "Process") { - if (type === "Process") { - processCheck = true; - } - return true; + if (isLineageRender) { + this.$('.lineageGraph').show(); + this.renderLineageLayoutView({ + processCheck: isProcess, + guid: this.id, + entityDefCollection: this.entityDefCollection, + fetchCollection: this.fetchCollection.bind(this), + actionCallBack: function() { + that.$('#expand_collapse_panel').click(); } }); - - this.renderLineageLayoutView({ - processCheck: processCheck, - guid: this.id, - entityDefCollection: this.entityDefCollection, - actionCallBack: function() { - that.$('#expand_collapse_panel').click(); - } - }); + this.$(".resizeGraph").resizable({ + handles: ' s', + minHeight: 375, + stop: function(event, ui) { + ui.element.height(($(this).height())); + }, + }); + } // To render Schema check attribute "schemaElementsAttribute" var schemaOptions = this.entityDefCollection.fullCollection.find({ name: collectionJSON.typeName }).get('options'); @@ -294,6 +313,11 @@ define(['require', $("html, body").animate({ scrollTop: (this.$('.tab-content').offset().top + 1200) }, 1000); } }, + onDestroy: function() { + if (!Utils.getUrlState.isDetailPage()) { + $('body').removeClass("detail-page"); + } + }, fetchCollection: function() { this.collection.fetch({ reset: true }); }, http://git-wip-us.apache.org/repos/asf/atlas/blob/6bc3aee1/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..1edffbc 100644 --- a/dashboardv2/public/js/views/graph/LineageLayoutView.js +++ b/dashboardv2/public/js/views/graph/LineageLayoutView.js @@ -26,8 +26,9 @@ define(['require', 'd3-tip', 'utils/Enums', 'utils/UrlLinks', + 'utils/Globals', 'platform' -], function(require, Backbone, LineageLayoutViewtmpl, VLineageList, VEntity, Utils, dagreD3, d3Tip, Enums, UrlLinks, platform) { +], function(require, Backbone, LineageLayoutViewtmpl, VLineageList, VEntity, Utils, dagreD3, d3Tip, Enums, UrlLinks, Globals, platform) { 'use strict'; var LineageLayoutView = Backbone.Marionette.LayoutView.extend( @@ -43,13 +44,20 @@ define(['require', /** ui selector cache */ ui: { graph: ".graph", - checkHideProcess: "[data-id='checkHideProcess']" + checkHideProcess: "[data-id='checkHideProcess']", + checkDeletedEntity: "[data-id='checkDeletedEntity']", + selectDepth: 'select[data-id="selectDepth"]', + fltrTogler: '[data-id="fltr-togler"]', + lineageFilterPanel: '.lineage-fltr-panel' }, /** ui events hash */ events: function() { var events = {}; - events["click " + this.ui.checkHideProcess] = 'onCheckHideProcess'; + events["click " + this.ui.checkHideProcess] = 'onCheckUnwantedEntity'; + events["click " + this.ui.checkDeletedEntity] = 'onCheckUnwantedEntity'; + events['change ' + this.ui.selectDepth] = 'onSelectDepthChange'; + events["click " + this.ui.fltrTogler] = 'onClickFiltrTogler'; return events; }, @@ -65,6 +73,11 @@ define(['require', this.apiGuid = {}; this.asyncFetchCounter = 0; this.edgeCall; + this.filterObj = { + isProcessHideCheck: false, + isDeletedEntityHideCheck: false, + depthCount: '' + }; }, initializeGraph: function() { @@ -98,22 +111,47 @@ 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(); }, - onCheckHideProcess: function(e) { + onCheckUnwantedEntity: function(e) { var data = $.extend(true, {}, this.lineageData); this.fromToObj = {}; this.initializeGraph(); - this.generateData(data.relations, data.guidEntityMap, e.target.checked); + if ($(e.target).data("id") === "checkHideProcess") { + this.filterObj.isProcessHideCheck = e.target.checked; + } else { + this.filterObj.isDeletedEntityHideCheck = e.target.checked; + } + this.generateData(data.relations, data.guidEntityMap); + }, + onClickFiltrTogler: function() { + var lineageFilterPanel = this.ui.lineageFilterPanel; + $(lineageFilterPanel).toggleClass("show-filter-panel"); }, - 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.$('.fontLoader').show(); + this.$('svg>g').hide(); this.collection.getLineage(this.guid, { skipDefaultError: true, + queryParam: queryParam, success: function(data) { if (data.relations.length) { that.lineageData = $.extend(true, {}, data) @@ -126,11 +164,16 @@ define(['require', cust_error: function(model, response) { that.lineageData = []; that.noLineage(); + }, + complete: function() { + that.$('.fontLoader').hide(); + that.$('svg>g').show(); } }) }, 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 +183,35 @@ 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 isDeleted(status) { + return Enums.entityStateReadOnly[status]; + } + + function isNodeToBeUpdated(node) { + if (that.filterObj.isProcessHideCheck) { + return isProcess(node.typeName); + } else if (that.filterObj.isDeletedEntityHideCheck) { + return isDeleted(node.status); + } + } + + function getServiceType(typeName) { + var serviceType = null; + if (typeName) { + var entityDef = that.entityDefCollection.fullCollection.find({ name: typeName }); + if (entityDef) { + serviceType = entityDef.get("serviceType") || null; + } + } + return serviceType; } function makeNodeObj(relationObj) { @@ -157,10 +223,11 @@ define(['require', obj['id'] = relationObj.guid; obj['isLineage'] = true; obj['queryText'] = relationObj.queryText; + obj['serviceType'] = getServiceType(relationObj.typeName); if (relationObj.status) { obj['status'] = relationObj.status; } - if (hideProcess) { + if (that.filterObj.isProcessHideCheck) { obj['isProcess'] = relationObj.isProcess; } else { obj['isProcess'] = isProcess(relationObj.typeName); @@ -169,14 +236,18 @@ define(['require', return obj; } - var newRelations = []; - - if (hideProcess) { + var newRelations = [], + finalRelations = relations, + isHideFilterOn = this.filterObj.isProcessHideCheck || this.filterObj.isDeletedEntityHideCheck; + if (isHideFilterOn) { _.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; + var toNodeToBeUpdated = isNodeToBeUpdated(guidEntityMap[obj.toEntityId]); + var fromNodeToBeUpdated = isNodeToBeUpdated(guidEntityMap[obj.fromEntityId]); + if (toNodeToBeUpdated) { + if (that.filterObj.isProcessHideCheck) { + //We have already checked entity is process or not inside isNodeToBeUpdated(); + guidEntityMap[obj.toEntityId]["isProcess"] = true; + } _.filter(relationArr, function(flrObj) { if (flrObj.fromEntityId === obj.toEntityId) { newRelations.push({ @@ -185,8 +256,12 @@ define(['require', }); } }) - } else if (isFromEntityIdProcess) { - guidEntityMap[obj.fromEntityId]["isProcess"] = true; + } else if (fromNodeToBeUpdated) { + if (that.filterObj.isProcessHideCheck) { + //We have already checked entity is process or not inside isNodeToBeUpdated(); + guidEntityMap[obj.fromEntityId]["isProcess"] = true; + } + _.filter(relationArr, function(flrObj) { if (flrObj.toEntityId === obj.fromEntityId) { newRelations.push({ @@ -199,13 +274,9 @@ define(['require', newRelations.push(obj); } }); + finalRelations = newRelations; } - - var finalRelations = hideProcess ? newRelations : relations; - - - _.each(finalRelations, function(obj, index) { if (!that.fromToObj[obj.fromEntityId]) { that.fromToObj[obj.fromEntityId] = makeNodeObj(guidEntityMap[obj.fromEntityId]); @@ -217,8 +288,8 @@ define(['require', } var styleObj = { fill: 'none', - stroke: '#8bc152', - width: 2 + stroke: '#ffb203', + width: 3 } that.g.setEdge(obj.fromEntityId, obj.toEntityId, { 'arrowhead': "arrowPoint", lineInterpolate: 'basis', "style": "fill:" + styleObj.fill + ";stroke:" + styleObj.stroke + ";stroke-width:" + styleObj.width + "", 'styleObj': styleObj }); }); @@ -242,7 +313,7 @@ define(['require', var styleObj = { fill: 'none', stroke: '#fb4200', - width: 2 + width: 3 } that.g.setEdge(node.fromEntityId, node.toEntityId, { 'arrowhead': "arrowPoint", lineInterpolate: 'basis', "style": "fill:" + styleObj.fill + ";stroke:" + styleObj.stroke + ";stroke-width:" + styleObj.width + "", 'styleObj': styleObj }); that.checkForLineageOrImpactFlag(relations, node.toEntityId); @@ -259,7 +330,7 @@ define(['require', } }, setGraphZoomPositionCal: function(argument) { - var initialScale = 1.2, + var initialScale = 1.6, svgEl = this.$('svg'), scaleEl = this.$('svg').find('>g'), translateValue = [(this.$('svg').width() - this.g.graph().width * initialScale) / 2, (this.$('svg').height() - this.g.graph().height * initialScale) / 2] @@ -272,7 +343,7 @@ define(['require', if (svgEl.hasClass('noScale')) { if (!scaleEl.hasClass('scaleLinage')) { scaleEl.addClass('scaleLinage'); - initialScale = 1.2; + initialScale = 1.6; } else { scaleEl.removeClass('scaleLinage'); initialScale = 0; @@ -308,19 +379,16 @@ define(['require', var marker = parent.append("marker") .attr("id", id) .attr("viewBox", "0 0 10 10") - .attr("refX", 9) + .attr("refX", 8) .attr("refY", 5) .attr("markerUnits", "strokeWidth") - .attr("markerWidth", 10) - .attr("markerHeight", 8) + .attr("markerWidth", 4) + .attr("markerHeight", 4) .attr("orient", "auto"); var path = marker.append("path") .attr("d", "M 0 0 L 10 5 L 0 10 z") - .style("stroke-width", 1) - .style("stroke-dasharray", "1,0") - .style("fill", edge.styleObj.stroke) - .style("stroke", edge.styleObj.stroke); + .style("fill", edge.styleObj.stroke); dagreD3.util.applyStyle(path, edge[type + "Style"]); }; render.shapes().img = function circle(parent, bbox, node) { @@ -330,8 +398,8 @@ define(['require', } var shapeSvg = parent.append('circle') .attr('fill', 'url(#img_' + node.id + ')') - .attr('r', currentNode ? '15px' : '14px') - .attr("class", "nodeImage " + (currentNode ? "currentNode" : (node.isProcess ? "blue" : "green"))); + .attr('r', '24px') + .attr("class", "nodeImage " + (currentNode ? "currentNode" : (node.isProcess ? "process" : "node"))); parent.insert("defs") .append("pattern") @@ -344,33 +412,19 @@ define(['require', .append('image') .attr("xlink:href", function(d) { if (node) { - if (node.isProcess) { - if (Enums.entityStateReadOnly[node.status]) { - return UrlLinks.apiBaseUrl + '/img/icon-gear-delete.png'; - } else if (node.id == that.guid) { - return UrlLinks.apiBaseUrl + '/img/icon-gear-active.png'; - } else { - return UrlLinks.apiBaseUrl + '/img/icon-gear.png'; - } - } else { - if (Enums.entityStateReadOnly[node.status]) { - return UrlLinks.apiBaseUrl + '/img/icon-table-delete.png'; - } else if (node.id == that.guid) { - return UrlLinks.apiBaseUrl + '/img/icon-table-active.png'; - } else { - return UrlLinks.apiBaseUrl + '/img/icon-table.png'; - } - } + return Utils.getEntityIconPath({ entityData: node }); } }) - .attr("x", "2") - .attr("y", "2") - .attr("width", currentNode ? "26" : "24") - .attr("height", currentNode ? "26" : "24") + .attr("x", currentNode ? "3" : "6") + .attr("y", currentNode ? "3" : "4") + .attr("width", "40") + .attr("height", "40") + .on("error", function() { + this.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', Utils.getEntityIconPath({ entityData: node, errorUrl: this.href.baseVal })); + }); node.intersect = function(point) { - //return dagreD3.intersect.circle(node, points, point); - return dagreD3.intersect.circle(node, currentNode ? 16 : 13, point); + return dagreD3.intersect.circle(node, currentNode ? 24 : 21, point); }; return shapeSvg; }; @@ -460,7 +514,7 @@ define(['require', .on("wheel.zoom", null); //change text postion svgGroup.selectAll("g.nodes g.label") - .attr("transform", "translate(2,-30)"); + .attr("transform", "translate(2,-35)"); svgGroup.selectAll("g.nodes g.node") .on('mouseenter', function(d) { that.activeNode = true; http://git-wip-us.apache.org/repos/asf/atlas/blob/6bc3aee1/dashboardv2/public/js/views/search/SearchResultLayoutView.js ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/views/search/SearchResultLayoutView.js b/dashboardv2/public/js/views/search/SearchResultLayoutView.js index b5feabc..d1da75b 100644 --- a/dashboardv2/public/js/views/search/SearchResultLayoutView.js +++ b/dashboardv2/public/js/views/search/SearchResultLayoutView.js @@ -76,7 +76,8 @@ define(['require', return { entityCreate: Globals.entityCreate, searchType: this.searchType, - taxonomy: Globals.taxonomy + taxonomy: Globals.taxonomy, + fromView: this.fromView }; }, /** ui events hash */ @@ -150,7 +151,7 @@ define(['require', * @constructs */ initialize: function(options) { - _.extend(this, _.pick(options, 'value', 'initialView', 'isTypeTagNotExists', 'classificationDefCollection', 'entityDefCollection', 'typeHeaders', 'searchVent', 'enumDefCollection', 'tagCollection', 'searchTableColumns', 'isDisable')); + _.extend(this, _.pick(options, 'value', 'initialView', 'isTypeTagNotExists', 'classificationDefCollection', 'entityDefCollection', 'typeHeaders', 'searchVent', 'enumDefCollection', 'tagCollection', 'searchTableColumns', 'isDisable', 'fromView')); this.entityModel = new VEntity(); this.searchCollection = new VSearchList(); this.limit = 25; @@ -646,7 +647,7 @@ define(['require', nameHtml = "", name = Utils.getName(obj); if (obj.guid) { - nameHtml = '<a title="' + name + '" href="#!/detailPage/' + obj.guid + '">' + name + '</a>'; + nameHtml = '<a title="' + name + '" href="#!/detailPage/' + obj.guid + (that.fromView ? "?from=" + that.fromView : "") + '">' + name + '</a>'; } else { nameHtml = '<span title="' + name + '">' + name + '</span>'; } http://git-wip-us.apache.org/repos/asf/atlas/blob/6bc3aee1/dashboardv2/public/js/views/site/Header.js ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/views/site/Header.js b/dashboardv2/public/js/views/site/Header.js index f53d3e8..067193d 100644 --- a/dashboardv2/public/js/views/site/Header.js +++ b/dashboardv2/public/js/views/site/Header.js @@ -19,15 +19,46 @@ define(['require', 'hbs!tmpl/site/header', 'utils/CommonViewFunction', - 'utils/Globals' -], function(require, tmpl, CommonViewFunction, Globals) { + 'utils/Globals', + 'utils/Utils' +], function(require, tmpl, CommonViewFunction, Globals, Utils) { 'use strict'; var Header = Marionette.LayoutView.extend({ template: tmpl, regions: {}, - events: {}, + ui: { + backButton: "[data-id='backButton']", + menuHamburger: "[data-id='menuHamburger']", + }, + events: function() { + var events = {}; + events['click ' + this.ui.backButton] = function() { + var queryParams = Utils.getUrlState.getQueryParams(), + urlPath = "searchUrl"; + if (queryParams && queryParams.from) { + if (queryParams.from == "tag") { + urlPath = "tagUrl"; + } else if (queryParams.from == "taxonomy") { + urlPath = "taxonomyUrl"; + } + } + Utils.setUrl({ + url: Globals.saveApplicationState.tabState[urlPath], + mergeBrowserUrl: false, + trigger: true, + updateTabState: true + }); + + }; + events['click ' + this.ui.menuHamburger] = function() { + $('body').toggleClass("full-screen"); + }; + return events; + + }, initialize: function(options) {}, + onRender: function() { var that = this; if (Globals.userLogedIn.status) { @@ -36,4 +67,4 @@ define(['require', }, }); return Header; -}); +}); \ No newline at end of file http://git-wip-us.apache.org/repos/asf/atlas/blob/6bc3aee1/dashboardv2/public/js/views/tag/TagDetailLayoutView.js ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/views/tag/TagDetailLayoutView.js b/dashboardv2/public/js/views/tag/TagDetailLayoutView.js index e5087c0..418894d 100644 --- a/dashboardv2/public/js/views/tag/TagDetailLayoutView.js +++ b/dashboardv2/public/js/views/tag/TagDetailLayoutView.js @@ -66,7 +66,8 @@ define(['require', typeHeaders: that.typeHeaders, tagCollection: that.collection, enumDefCollection: that.enumDefCollection, - classificationDefCollection: that.classificationDefCollection + classificationDefCollection: that.classificationDefCollection, + fromView: "tag" })); } });
