Repository: incubator-atlas Updated Branches: refs/heads/master 705014eb3 -> 70f715705
ATLAS-821 Atlas UI - Add arrow to navigate to child term (kevalbhatt18 via yhemanth) Project: http://git-wip-us.apache.org/repos/asf/incubator-atlas/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-atlas/commit/70f71570 Tree: http://git-wip-us.apache.org/repos/asf/incubator-atlas/tree/70f71570 Diff: http://git-wip-us.apache.org/repos/asf/incubator-atlas/diff/70f71570 Branch: refs/heads/master Commit: 70f715705bc4dfd5bc7ab4728388ed0d340c2413 Parents: 705014e Author: Hemanth Yamijala <[email protected]> Authored: Fri May 27 09:37:02 2016 +0530 Committer: Hemanth Yamijala <[email protected]> Committed: Fri May 27 09:37:02 2016 +0530 ---------------------------------------------------------------------- dashboardv2/public/css/scss/tree.scss | 175 ++----------------- dashboardv2/public/js/router/Router.js | 15 +- .../business_catalog/BusinessCatalogHeader.js | 2 +- .../BusinessCatalogLayoutView.js | 104 ++++++++--- .../public/js/views/graph/LineageLayoutView.js | 44 +++-- release-log.txt | 1 + 6 files changed, 134 insertions(+), 207 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/70f71570/dashboardv2/public/css/scss/tree.scss ---------------------------------------------------------------------- diff --git a/dashboardv2/public/css/scss/tree.scss b/dashboardv2/public/css/scss/tree.scss index b98bd45..dc05b09 100644 --- a/dashboardv2/public/css/scss/tree.scss +++ b/dashboardv2/public/css/scss/tree.scss @@ -1,164 +1,4 @@ /* tree.scss */ - /* .fuelux { - margin-top: 10px; - .tree { - padding-left: 0; - position: relative; - list-style: none; - ul { - padding-left: 0; - margin-top: 0; - margin-bottom: 0; - list-style: none; - } - li { - margin: 0; - margin-top: 5px; - margin-bottom: 5px; - } - .tree-loader { - margin-left: 45px; - } - .tree-branch { - .tree-branch-header { - color: $white; - position: relative; - white-space: nowrap; - padding: 4px 0; - .tree-branch-name { - white-space: nowrap; - background-color: transparent; - border: 0; - &:hover { - color: $white; - } - } - .glyphicon-menu-right { - font-size: 10px; - padding-right: 5px; - padding-left: 7px; - &:before { - position: relative; - top: -2px; - } - } - label { - font-weight: normal; - padding-left: 3px; - margin-bottom: 0; - cursor: pointer; - } - } - .tree-branch-children { - margin-left: 25px; - } - } - .tree-item { - white-space: nowrap; - position: relative; - cursor: pointer; - padding: 4px 0; - .tree-item-name { - color: $white; - white-space: nowrap; - background-color: transparent; - border: 0; - &:hover { - color: $white; - } - } - &.tree-selected { - background-color: $color_keppel_approx; - &:before { - content: ""; - position: absolute; - background-color: $color_keppel_approx; - height: 33px; - top: 0; - left: -100%; - right: -100%; - z-index: -1; - } - } - label { - font-weight: normal; - padding-left: 7px; - margin-bottom: 0; - cursor: pointer; - } - } - *:focus { - outline: none; - } - button:focus { - color: $white; - } - .tree-open > .tree-branch-header .glyphicon-menu-right { - //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) - transform: rotate(90deg); - position: relative; - } - [data-children=false] > .tree-branch-header .icon-caret:before { - content: '\00a0'; - } - .tree-branch[haschildren='false'] .icon-caret { - visibility: hidden; - } - .tree-branch[data-has-children='false'] .icon-caret { - visibility: hidden; - } - .icon-caret:hover + .tree-branch-name { - color: $white; - } - &.tree-folder-select .tree-branch { - .icon-folder { - visibility: hidden; - } - .icon-caret { - background-color: transparent; - border: 0; - &:hover { - cursor: pointer; - color: $white; - } - } - > .tree-branch-name { - padding: 1px 5px 0; - &.tree-selected { - background-color: $color_gallery_approx; - } - } - &.tree-selected > .tree-branch-header { - background-color: $color_keppel_approx; - &:before { - content: ""; - position: absolute; - background-color: $color_keppel_approx; - height: 33px; - top: 0; - left: -100%; - right: -100%; - z-index: -1; - } - .tree-branch-name:hover { - background-color: $color_keppel_approx; - } - > .action-icons { - visibility: visible; - } - } - } - } - .action-icons { - visibility: hidden; - float: right; - a { - display: inline-block; - margin-left: 4px; - color: $white; - } - } -} */ .jstree-container-ul { padding-left: 0px; @@ -216,7 +56,7 @@ width: 91%; } a { - max-width: 92%; + max-width: 90%; } } } @@ -240,7 +80,7 @@ display: block; color: $concrete; white-space: nowrap; - padding: 5px 18px; + padding: 5px 25px; text-overflow: ellipsis; overflow: hidden; cursor: pointer; @@ -249,8 +89,8 @@ background: $color_jungle_green_approx; display: none; position: absolute; - right: 3px; - padding: 5px 10px; + right: 2px; + padding: 5px; } } } @@ -284,3 +124,10 @@ padding: 5px; } } + + .toggleArrow { + position: absolute; + left: 0px; + padding: 8px; + cursor: pointer; + } http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/70f71570/dashboardv2/public/js/router/Router.js ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/router/Router.js b/dashboardv2/public/js/router/Router.js index f69c7bc..4d89ab8 100644 --- a/dashboardv2/public/js/router/Router.js +++ b/dashboardv2/public/js/router/Router.js @@ -108,6 +108,7 @@ define([ 'views/business_catalog/SideNavLayoutView', 'collection/VCatalogList' ], function(BusinessCatalogHeader, BusinessCatalogDetailLayoutView, SideNavLayoutView, VCatalogList) { + var paramObj = Utils.getUrlState.getQueryParams(); this.collection = new VCatalogList(); this.collection.url = url; App.rNHeader.show(new BusinessCatalogHeader({ 'globalVent': that.globalVent, 'url': url, 'collection': this.collection })); @@ -117,15 +118,13 @@ define([ } else { var view = App.rSideNav.currentView.RBusinessCatalogLayoutView.currentView; if (view.dblClick == false && view.singleClick == false && !Globals.saveApplicationState.tabState.stateChanged) { - App.rSideNav.currentView.RBusinessCatalogLayoutView.currentView.manualRender(url, true); + if (paramObj && paramObj.back == "true") { + App.rSideNav.currentView.RBusinessCatalogLayoutView.currentView.manualRender(url, true, true); + } else { + App.rSideNav.currentView.RBusinessCatalogLayoutView.currentView.manualRender(url, true); + } view.dblClick == false; - - } - /* else if (view.firstManualClick) { - view.firstManualClick = false; - App.rSideNav.currentView.RBusinessCatalogLayoutView.currentView.manualRender(url); - }*/ - else if (view.singleClick) { + } else if (view.singleClick) { view.singleClick = false; } App.rSideNav.currentView.selectTab(); http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/70f71570/dashboardv2/public/js/views/business_catalog/BusinessCatalogHeader.js ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/views/business_catalog/BusinessCatalogHeader.js b/dashboardv2/public/js/views/business_catalog/BusinessCatalogHeader.js index 7fb48f8..aad4bab 100644 --- a/dashboardv2/public/js/views/business_catalog/BusinessCatalogHeader.js +++ b/dashboardv2/public/js/views/business_catalog/BusinessCatalogHeader.js @@ -76,7 +76,7 @@ define(['require', value = this.value, that = this; _.each(value, function(object) { - li += '<li><a href="/#!/taxonomy/detailCatalog/api/atlas/v1/taxonomies/' + object.href + '">' + object.value + '</a></li>'; + li += '<li><a href="/#!/taxonomy/detailCatalog/api/atlas/v1/taxonomies/' + object.href + '?back=true">' + object.value + '</a></li>'; }); this.$('.breadcrumb').html(li); //this.$(".breadcrumb").asBreadcrumbs("destroy"); http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/70f71570/dashboardv2/public/js/views/business_catalog/BusinessCatalogLayoutView.js ---------------------------------------------------------------------- diff --git a/dashboardv2/public/js/views/business_catalog/BusinessCatalogLayoutView.js b/dashboardv2/public/js/views/business_catalog/BusinessCatalogLayoutView.js index 4eced25..044afc2 100644 --- a/dashboardv2/public/js/views/business_catalog/BusinessCatalogLayoutView.js +++ b/dashboardv2/public/js/views/business_catalog/BusinessCatalogLayoutView.js @@ -40,6 +40,7 @@ define(['require', chiledList: '[data-id="chiledList"]', liClick: 'li a[data-href]', backTaxanomy: '[data-id="backTaxanomy"]', + expandArrow: '[data-id="expandArrow"]' }, /** ui events hash */ events: function() { @@ -53,9 +54,8 @@ define(['require', this.dblClick = false; this.forwardClick(e); }; - events['click ' + this.ui.backTaxanomy] = function(e) { - this.backButtonTaxanomy(); - }; + events['click ' + this.ui.backTaxanomy] = 'backButtonTaxanomy'; + events['click ' + this.ui.expandArrow] = 'changeArrowState'; return events; }, /** @@ -115,8 +115,48 @@ define(['require', } }); }, - manualRender: function(url, isParent) { - this.fetchCollection(url, isParent); + manualRender: function(url, isParent, back) { + if (back) { + this.backButton = back; + } + if (this.ui.Parent.children().length <= 0 || this.backButton) { + this.fetchCollection(url, isParent); + } + if (url && isParent && !this.backButton) { + this.fetchCollection(url, isParent); + } + if (!url && !back && isParent) { + var url = this.$('.taxonomyTree').find('.active a').data('href'); + this.forwardClick(undefined, undefined, url); + } + if (this.backButton) { + this.backButton = false; + } + }, + changeArrowState: function(e) { + + var scope = this.$('[data-id="expandArrow"]'); + if (e) { + scope = $(e.currentTarget); + } + if (scope.hasClass('fa-chevron-down')) { + scope.removeClass('fa-chevron-down'); + scope.addClass('fa-chevron-right'); + this.addActiveClass(scope[0]); + this.ui.chiledList.hide(); + } else { + if (e && $(e.currentTarget).parents('li.parentChiled').length) { + scope.parent('li').find('.tools .taxanomyloader').show(); + this.forwardClick(e, true); + } else { + scope.addClass('fa-chevron-down'); + scope.removeClass('fa-chevron-right'); + this.singleClick = false; + this.ui.chiledList.show(); + } + } + + }, fetchCollection: function(url, isParent) { if (url) { @@ -142,10 +182,18 @@ define(['require', this.chiledCollection.fetch({ reset: true }); } }, - forwardClick: function(e, forward) { - var hrefUrl = $(e.currentTarget).data('href'); + forwardClick: function(e, forward, url) { + var hrefUrl = ""; + if (e) { + hrefUrl = $(e.currentTarget).data('href'); + } + if (url) { + hrefUrl = url; + } + if (forward) { this.dblClick = true; + this.ui.chiledList.show(); this.fetchCollection(hrefUrl, true); } else { this.singleClick = true; @@ -158,7 +206,9 @@ define(['require', }, trigger: true }); - this.addActiveClass(e); + if (e) { + this.addActiveClass(e); + } }, addActiveClass: function(e) { $(e.currentTarget).parents('ul.taxonomyTree').find('li').removeClass('active'); @@ -175,6 +225,8 @@ define(['require', if (model.get('terms')) { href = model.get('terms').href; + } else if (model.get('href')) { + href = model.get('href') + "/terms"; } var hrefUrl = "/api" + model.get('href').split("/api")[1]; if (hrefUrl) { @@ -187,11 +239,12 @@ define(['require', } } } - var name = model.get('name').split('.'); - parentLi = '<div class="tools"><i class="fa fa-refresh fa-spin-custom taxanomyloader"></i><i class="fa fa-ellipsis-h termPopover"></i></div><a href="javascript:void(0)" data-href="' + hrefUrl + '">' + name[name.length - 1] + '</a>'; + var name = Utils.checkTagOrTerm(model.get('name')); + parentLi = '<div class="tools"><i class="fa fa-refresh fa-spin-custom taxanomyloader"></i><i class="fa fa-ellipsis-h termPopover"></i></div><i class="fa fa-chevron-right toggleArrow" data-id="expandArrow" data-href="' + hrefUrl + '"></i><a href="javascript:void(0)" data-href="' + hrefUrl + '" data-name="`' + model.get('name') + '`">' + name.name + '</a>'; }); if (href) { - that.fetchCollection(href); + var hrefUrl = "/api" + href.split("/api")[1]; + that.fetchCollection(hrefUrl); } that.ui.chiledList.html(''); that.ui.Parent.addClass('active'); @@ -200,8 +253,9 @@ define(['require', function createTerm() { _.each(that.chiledCollection.fullCollection.models, function(model, key) { - var name = model.get('name').split('.'); - chiledLi += '<li class="children"><div class="tools"><i class="fa fa-refresh fa-spin-custom taxanomyloader"></i><i class="fa fa-ellipsis-h termPopover" ></i></div><a href="javascript:void(0)" data-href="/api' + model.get('href').split("/api")[1] + '">' + name[name.length - 1] + '</a></li>'; + var name = Utils.checkTagOrTerm(model.get('name')); + var hrefUrl = "/api" + model.get('href').split("/api")[1] + chiledLi += '<li class="children"><div class="tools"><i class="fa fa-refresh fa-spin-custom taxanomyloader"></i><i class="fa fa-ellipsis-h termPopover" ></i></div><i class="fa fa-chevron-right toggleArrow" data-id="expandArrow" data-href="' + hrefUrl + '"></i><a href="javascript:void(0)" data-href="' + hrefUrl + '" data-name="`' + model.get('name') + '`">' + name.name + '</a></li>'; }); that.ui.chiledList.html(chiledLi); } @@ -209,6 +263,12 @@ define(['require', if (isParent) { createTaxonomy(); } else { + this.changeArrowState(); + /* if (!this.create) { + this.changeArrowState(); + } else { + this.create = false; + }*/ createTerm(); } @@ -221,7 +281,7 @@ define(['require', container: 'body', content: function() { return "<ul class='termPopoverList'>" + - "<li class='listTerm' ><i class='fa fa-search'></i> <a href='javascript:void(0)' data-fn='onSearchTerm'>Search Asset</a></li>" + + "<li class='listTerm' ><i class='fa fa-search'></i> <a href='javascript:void(0)' data-fn='onSearchTerm'>Search Assets</a></li>" + "<li class='listTerm'><i class='fa fa-plus'></i> <a href='javascript:void(0)' data-fn='onAddTerm'>Add Subterm</a></li>" + /* "<li class='listTerm' ><i class='fa fa-arrow-right'></i> <a href='javascript:void(0)' data-fn='moveTerm'>Move Term</a></li>" + "<li class='listTerm' ><i class='fa fa-edit'></i> <a href='javascript:void(0)' data-fn='onEditTerm'>Edit Term</a></li>" + @@ -265,12 +325,15 @@ define(['require', }, saveAddTerm: function(view) { var that = this; - view.model.url = view.url + "/terms/" + view.ui.termName.val(); + var url = view.url; + view.model.url = url + "/terms/" + view.ui.termName.val(); view.model.set({ description: view.ui.termDetail.val() }).save(null, { success: function(model, response) { - that.fetchCollection(that.url); + that.create = true; + that.forwardClick(undefined, true, url); + //that.fetchCollection(that.url); Utils.notifySuccess({ - content: "Term Created successfully" + content: "Term " + view.ui.termName.val() + " Created successfully" }); }, error: function(model, response) { @@ -330,9 +393,9 @@ define(['require', Utils.setUrl({ url: '#!/search/searchResult', urlParams: { - query: this.$('.taxonomyTree').find('li.active').find("a").text(), - searchType: "fulltext", - dslChecked: false + query: this.$('.taxonomyTree').find('li.active').find("a").data('name'), + searchType: "dsl", + dslChecked: true }, updateTabState: function() { return { searchUrl: this.url, stateChanged: true }; @@ -344,6 +407,7 @@ define(['require', backButtonTaxanomy: function(e) { var that = this; this.dblClick = false; + this.backButton = true; var dataURL = this.$('.taxonomyTree').find('li[data-id="Parent"]').find("a").data('href').split("/terms"); var backUrl = dataURL.pop(); if (dataURL.join("/terms").length) { http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/70f71570/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 de10370..bcfcae1 100644 --- a/dashboardv2/public/js/views/graph/LineageLayoutView.js +++ b/dashboardv2/public/js/views/graph/LineageLayoutView.js @@ -124,7 +124,17 @@ define(['require', obj['toolTiplabel'] = values.name; } obj['class'] = "type-TOP"; - that.g.setNode(data.GUID, obj); + if (data.GUID) { + that.g.setNode(data.GUID, obj); + } else { + if (data && data.definition) { + if (_.isString(data.definition.id)) { + that.g.setNode(data.definition.id, obj); + } else if (_.isString(data.definition.id.id)) { + that.g.setNode(data.definition.id.id, obj); + } + } + } --that.fetchList; if (that.fetchList <= 0) { if (that.edgesAndvertices) { @@ -169,7 +179,9 @@ define(['require', obj['class'] = "type-TOP"; obj['shape'] = "img"; obj['typeName'] = vertices[val].values.vertexId.values.typeName; - that.g.setNode(val, obj); + if (val && obj) { + that.g.setNode(val, obj); + } } else { fetchLoadProcess(val); } @@ -186,7 +198,6 @@ define(['require', }; _.each(valuObj.edges, function(val, key, obj) { _.each(val, function(val1, key1, obj1) { - var chiledParent = {}; if (!obj[val1]) { that.startingPoint.push(val1); } @@ -215,18 +226,13 @@ define(['require', } }, createGraph: function(edgesAndvertices, startingPoint) { - var that = this; - this.g.nodes().forEach(function(v) { - var node = that.g.node(v); - // Round the corners of the nodes - node.rx = node.ry = 5; - }); - // Set up edges, no special attributes. - // For input - var lastVal = ""; + var that = this, + lastVal = ""; _.each(startingPoint, function(val, key, obj) { _.each(edgesAndvertices.edges[val], function(val1) { - that.g.setEdge(val, val1); + if (val && val1) { + that.g.setEdge(val, val1); + } createRemaningEdge(edgesAndvertices.edges, val1); }); }); @@ -234,11 +240,21 @@ define(['require', function createRemaningEdge(obj, starting) { if (obj[starting] && obj[starting].length) { _.each(obj[starting], function(val, key) { - that.g.setEdge(starting, val); + if (starting && val) { + that.g.setEdge(starting, val); + } createRemaningEdge(obj, val); }); } } + + this.g.nodes().forEach(function(v) { + var node = that.g.node(v); + // Round the corners of the nodes + if (node) { + node.rx = node.ry = 5; + } + }); if (this.outputState) { // Create the renderer var render = new dagreD3.render(); http://git-wip-us.apache.org/repos/asf/incubator-atlas/blob/70f71570/release-log.txt ---------------------------------------------------------------------- diff --git a/release-log.txt b/release-log.txt index 0402b49..bceb7e9 100644 --- a/release-log.txt +++ b/release-log.txt @@ -22,6 +22,7 @@ ATLAS-409 Atlas will not import avro tables with schema read from a file (dosset ATLAS-379 Create sqoop and falcon metadata addons (venkatnrangan,bvellanki,sowmyaramesh via shwethags) ALL CHANGES: +ATLAS-821 Atlas UI - Add arrow to navigate to child term (kevalbhatt18 via yhemanth) ATLAS-812 Atlas UI - Associate Terms with Assets (kevalbhatt18 via yhemanth) ATLAS-809 JAAS configuration needed for Kafka interaction via Atlas config file (abhayk via shwethags) ATLAS-817 Asset details page -- generate schema dynamically based on attributeDefinitions (kevalbhatt18 via yhemanth)
