Skip to content

A
atlas
Commit 70f71570 by Hemanth Yamijala
Options

ATLAS-821 Atlas UI - Add arrow to navigate to child term (kevalbhatt18 via yhemanth)

parent 705014eb
Showing with 134 additions and 207 deletions
dashboardv2/public/css/scss/tree.scss
/* tree.scss */ /* 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 { .jstree-container-ul {
padding-left: 0px; padding-left: 0px;
...@@ -216,7 +56,7 @@ ...@@ -216,7 +56,7 @@
width: 91%; width: 91%;
} }
a { a {
max-width: 92%; max-width: 90%;
} }
} }
} }
...@@ -240,7 +80,7 @@ ...@@ -240,7 +80,7 @@
display: block; display: block;
color: $concrete; color: $concrete;
white-space: nowrap; white-space: nowrap;
padding: 5px 18px; padding: 5px 25px;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
...@@ -249,8 +89,8 @@ ...@@ -249,8 +89,8 @@
background: $color_jungle_green_approx; background: $color_jungle_green_approx;
display: none; display: none;
position: absolute; position: absolute;
right: 3px; right: 2px;
padding: 5px 10px; padding: 5px;
} }
} }
} }
...@@ -284,3 +124,10 @@ ...@@ -284,3 +124,10 @@
padding: 5px; padding: 5px;
} }
} }
.toggleArrow {
position: absolute;
left: 0px;
padding: 8px;
cursor: pointer;
}
dashboardv2/public/js/router/Router.js
...@@ -108,6 +108,7 @@ define([ ...@@ -108,6 +108,7 @@ define([
'views/business_catalog/SideNavLayoutView', 'views/business_catalog/SideNavLayoutView',
'collection/VCatalogList' 'collection/VCatalogList'
], function(BusinessCatalogHeader, BusinessCatalogDetailLayoutView, SideNavLayoutView, VCatalogList) { ], function(BusinessCatalogHeader, BusinessCatalogDetailLayoutView, SideNavLayoutView, VCatalogList) {
var paramObj = Utils.getUrlState.getQueryParams();
this.collection = new VCatalogList(); this.collection = new VCatalogList();
this.collection.url = url; this.collection.url = url;
App.rNHeader.show(new BusinessCatalogHeader({ 'globalVent': that.globalVent, 'url': url, 'collection': this.collection })); App.rNHeader.show(new BusinessCatalogHeader({ 'globalVent': that.globalVent, 'url': url, 'collection': this.collection }));
...@@ -117,15 +118,13 @@ define([ ...@@ -117,15 +118,13 @@ define([
} else { } else {
var view = App.rSideNav.currentView.RBusinessCatalogLayoutView.currentView; var view = App.rSideNav.currentView.RBusinessCatalogLayoutView.currentView;
if (view.dblClick == false && view.singleClick == false && !Globals.saveApplicationState.tabState.stateChanged) { 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; view.dblClick == false;
} else if (view.singleClick) {
}
/* else if (view.firstManualClick) {
view.firstManualClick = false;
App.rSideNav.currentView.RBusinessCatalogLayoutView.currentView.manualRender(url);
}*/
else if (view.singleClick) {
view.singleClick = false; view.singleClick = false;
} }
App.rSideNav.currentView.selectTab(); App.rSideNav.currentView.selectTab();
......
dashboardv2/public/js/views/business_catalog/BusinessCatalogHeader.js
...@@ -76,7 +76,7 @@ define(['require', ...@@ -76,7 +76,7 @@ define(['require',
value = this.value, value = this.value,
that = this; that = this;
_.each(value, function(object) { _.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').html(li);
//this.$(".breadcrumb").asBreadcrumbs("destroy"); //this.$(".breadcrumb").asBreadcrumbs("destroy");
......
dashboardv2/public/js/views/business_catalog/BusinessCatalogLayoutView.js
...@@ -40,6 +40,7 @@ define(['require', ...@@ -40,6 +40,7 @@ define(['require',
chiledList: '[data-id="chiledList"]', chiledList: '[data-id="chiledList"]',
liClick: 'li a[data-href]', liClick: 'li a[data-href]',
backTaxanomy: '[data-id="backTaxanomy"]', backTaxanomy: '[data-id="backTaxanomy"]',
expandArrow: '[data-id="expandArrow"]'
}, },
/** ui events hash */ /** ui events hash */
events: function() { events: function() {
...@@ -53,9 +54,8 @@ define(['require', ...@@ -53,9 +54,8 @@ define(['require',
this.dblClick = false; this.dblClick = false;
this.forwardClick(e); this.forwardClick(e);
}; };
events['click ' + this.ui.backTaxanomy] = function(e) { events['click ' + this.ui.backTaxanomy] = 'backButtonTaxanomy';
this.backButtonTaxanomy(); events['click ' + this.ui.expandArrow] = 'changeArrowState';
};
return events; return events;
}, },
/** /**
...@@ -115,8 +115,48 @@ define(['require', ...@@ -115,8 +115,48 @@ define(['require',
} }
}); });
}, },
manualRender: function(url, isParent) { manualRender: function(url, isParent, back) {
this.fetchCollection(url, isParent); 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) { fetchCollection: function(url, isParent) {
if (url) { if (url) {
...@@ -142,10 +182,18 @@ define(['require', ...@@ -142,10 +182,18 @@ define(['require',
this.chiledCollection.fetch({ reset: true }); this.chiledCollection.fetch({ reset: true });
} }
}, },
forwardClick: function(e, forward) { forwardClick: function(e, forward, url) {
var hrefUrl = $(e.currentTarget).data('href'); var hrefUrl = "";
if (e) {
hrefUrl = $(e.currentTarget).data('href');
}
if (url) {
hrefUrl = url;
}
if (forward) { if (forward) {
this.dblClick = true; this.dblClick = true;
this.ui.chiledList.show();
this.fetchCollection(hrefUrl, true); this.fetchCollection(hrefUrl, true);
} else { } else {
this.singleClick = true; this.singleClick = true;
...@@ -158,7 +206,9 @@ define(['require', ...@@ -158,7 +206,9 @@ define(['require',
}, },
trigger: true trigger: true
}); });
this.addActiveClass(e); if (e) {
this.addActiveClass(e);
}
}, },
addActiveClass: function(e) { addActiveClass: function(e) {
$(e.currentTarget).parents('ul.taxonomyTree').find('li').removeClass('active'); $(e.currentTarget).parents('ul.taxonomyTree').find('li').removeClass('active');
...@@ -175,6 +225,8 @@ define(['require', ...@@ -175,6 +225,8 @@ define(['require',
if (model.get('terms')) { if (model.get('terms')) {
href = model.get('terms').href; href = model.get('terms').href;
} else if (model.get('href')) {
href = model.get('href') + "/terms";
} }
var hrefUrl = "/api" + model.get('href').split("/api")[1]; var hrefUrl = "/api" + model.get('href').split("/api")[1];
if (hrefUrl) { if (hrefUrl) {
...@@ -187,11 +239,12 @@ define(['require', ...@@ -187,11 +239,12 @@ define(['require',
} }
} }
} }
var name = model.get('name').split('.'); 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><a href="javascript:void(0)" data-href="' + hrefUrl + '">' + name[name.length - 1] + '</a>'; 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) { if (href) {
that.fetchCollection(href); var hrefUrl = "/api" + href.split("/api")[1];
that.fetchCollection(hrefUrl);
} }
that.ui.chiledList.html(''); that.ui.chiledList.html('');
that.ui.Parent.addClass('active'); that.ui.Parent.addClass('active');
...@@ -200,8 +253,9 @@ define(['require', ...@@ -200,8 +253,9 @@ define(['require',
function createTerm() { function createTerm() {
_.each(that.chiledCollection.fullCollection.models, function(model, key) { _.each(that.chiledCollection.fullCollection.models, function(model, key) {
var name = model.get('name').split('.'); var name = Utils.checkTagOrTerm(model.get('name'));
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 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); that.ui.chiledList.html(chiledLi);
} }
...@@ -209,6 +263,12 @@ define(['require', ...@@ -209,6 +263,12 @@ define(['require',
if (isParent) { if (isParent) {
createTaxonomy(); createTaxonomy();
} else { } else {
this.changeArrowState();
/* if (!this.create) {
this.changeArrowState();
} else {
this.create = false;
}*/
createTerm(); createTerm();
} }
...@@ -221,7 +281,7 @@ define(['require', ...@@ -221,7 +281,7 @@ define(['require',
container: 'body', container: 'body',
content: function() { content: function() {
return "<ul class='termPopoverList'>" + 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-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-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>" + "<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', ...@@ -265,12 +325,15 @@ define(['require',
}, },
saveAddTerm: function(view) { saveAddTerm: function(view) {
var that = this; 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, { view.model.set({ description: view.ui.termDetail.val() }).save(null, {
success: function(model, response) { success: function(model, response) {
that.fetchCollection(that.url); that.create = true;
that.forwardClick(undefined, true, url);
//that.fetchCollection(that.url);
Utils.notifySuccess({ Utils.notifySuccess({
content: "Term Created successfully" content: "Term " + view.ui.termName.val() + " Created successfully"
}); });
}, },
error: function(model, response) { error: function(model, response) {
...@@ -330,9 +393,9 @@ define(['require', ...@@ -330,9 +393,9 @@ define(['require',
Utils.setUrl({ Utils.setUrl({
url: '#!/search/searchResult', url: '#!/search/searchResult',
urlParams: { urlParams: {
query: this.$('.taxonomyTree').find('li.active').find("a").text(), query: this.$('.taxonomyTree').find('li.active').find("a").data('name'),
searchType: "fulltext", searchType: "dsl",
dslChecked: false dslChecked: true
}, },
updateTabState: function() { updateTabState: function() {
return { searchUrl: this.url, stateChanged: true }; return { searchUrl: this.url, stateChanged: true };
...@@ -344,6 +407,7 @@ define(['require', ...@@ -344,6 +407,7 @@ define(['require',
backButtonTaxanomy: function(e) { backButtonTaxanomy: function(e) {
var that = this; var that = this;
this.dblClick = false; this.dblClick = false;
this.backButton = true;
var dataURL = this.$('.taxonomyTree').find('li[data-id="Parent"]').find("a").data('href').split("/terms"); var dataURL = this.$('.taxonomyTree').find('li[data-id="Parent"]').find("a").data('href').split("/terms");
var backUrl = dataURL.pop(); var backUrl = dataURL.pop();
if (dataURL.join("/terms").length) { if (dataURL.join("/terms").length) {
......
dashboardv2/public/js/views/graph/LineageLayoutView.js
...@@ -124,7 +124,17 @@ define(['require', ...@@ -124,7 +124,17 @@ define(['require',
obj['toolTiplabel'] = values.name; obj['toolTiplabel'] = values.name;
} }
obj['class'] = "type-TOP"; 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; --that.fetchList;
if (that.fetchList <= 0) { if (that.fetchList <= 0) {
if (that.edgesAndvertices) { if (that.edgesAndvertices) {
...@@ -169,7 +179,9 @@ define(['require', ...@@ -169,7 +179,9 @@ define(['require',
obj['class'] = "type-TOP"; obj['class'] = "type-TOP";
obj['shape'] = "img"; obj['shape'] = "img";
obj['typeName'] = vertices[val].values.vertexId.values.typeName; obj['typeName'] = vertices[val].values.vertexId.values.typeName;
that.g.setNode(val, obj); if (val && obj) {
that.g.setNode(val, obj);
}
} else { } else {
fetchLoadProcess(val); fetchLoadProcess(val);
} }
...@@ -186,7 +198,6 @@ define(['require', ...@@ -186,7 +198,6 @@ define(['require',
}; };
_.each(valuObj.edges, function(val, key, obj) { _.each(valuObj.edges, function(val, key, obj) {
_.each(val, function(val1, key1, obj1) { _.each(val, function(val1, key1, obj1) {
var chiledParent = {};
if (!obj[val1]) { if (!obj[val1]) {
that.startingPoint.push(val1); that.startingPoint.push(val1);
} }
...@@ -215,18 +226,13 @@ define(['require', ...@@ -215,18 +226,13 @@ define(['require',
} }
}, },
createGraph: function(edgesAndvertices, startingPoint) { createGraph: function(edgesAndvertices, startingPoint) {
var that = this; var that = this,
this.g.nodes().forEach(function(v) { lastVal = "";
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 = "";
_.each(startingPoint, function(val, key, obj) { _.each(startingPoint, function(val, key, obj) {
_.each(edgesAndvertices.edges[val], function(val1) { _.each(edgesAndvertices.edges[val], function(val1) {
that.g.setEdge(val, val1); if (val && val1) {
that.g.setEdge(val, val1);
}
createRemaningEdge(edgesAndvertices.edges, val1); createRemaningEdge(edgesAndvertices.edges, val1);
}); });
}); });
...@@ -234,11 +240,21 @@ define(['require', ...@@ -234,11 +240,21 @@ define(['require',
function createRemaningEdge(obj, starting) { function createRemaningEdge(obj, starting) {
if (obj[starting] && obj[starting].length) { if (obj[starting] && obj[starting].length) {
_.each(obj[starting], function(val, key) { _.each(obj[starting], function(val, key) {
that.g.setEdge(starting, val); if (starting && val) {
that.g.setEdge(starting, val);
}
createRemaningEdge(obj, 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) { if (this.outputState) {
// Create the renderer // Create the renderer
var render = new dagreD3.render(); var render = new dagreD3.render();
......
release-log.txt
...@@ -22,6 +22,7 @@ ATLAS-409 Atlas will not import avro tables with schema read from a file (dosset ...@@ -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) ATLAS-379 Create sqoop and falcon metadata addons (venkatnrangan,bvellanki,sowmyaramesh via shwethags)
ALL CHANGES: 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-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-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) ATLAS-817 Asset details page -- generate schema dynamically based on attributeDefinitions (kevalbhatt18 via yhemanth)
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment