Skip to content

A
atlas
Commit d671b127 by kalyanikk Committed by Keval Bhatt
Options

ATLAS-1090 : UI: Multi-Select Tagging. (Kalyanikashikar via kevalbhatt)

parent d1940ba7
Showing with 143 additions and 69 deletions
dashboardv2/public/css/scss/tag.scss
...@@ -315,6 +315,10 @@ form-control .tagInpput { ...@@ -315,6 +315,10 @@ form-control .tagInpput {
float: right; float: right;
} }
.multiSelectTerm {
float: right;
}
.multiSelectTag { .multiSelectTag {
float: right; float: right;
} }
......
dashboardv2/public/js/templates/schema/SchemaTableLayoutView_tmpl.html
...@@ -14,5 +14,6 @@ ...@@ -14,5 +14,6 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
--> -->
<a href="javascript:void(0)" class="inputAssignTag multiSelect" style="display:none" data-id="addTerm"><i class="fa fa-folder-o"></i> Assign Term</a> <a href="javascript:void(0)" class="inputAssignTag multiSelectTerm" style="display:none" data-id="addTerm"><i class="fa fa-folder-o"></i> Assign Term</a>
<a href="javascript:void(0)" class="inputAssignTag multiSelectTag assignTag" style="display:none" data-id="addAssignTag"><i class="fa fa-plus"></i> Assign Tag</a>
<div id="r_tagLayoutView"></div> <div id="r_tagLayoutView"></div>
dashboardv2/public/js/templates/search/SearchResultLayoutView_tmpl.html
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
<div class="ellipsis"><span class="searchResult" style=" font-size: 16px;"></span></div> <div class="ellipsis"><span class="searchResult" style=" font-size: 16px;"></span></div>
<div class="searchTable"> <div class="searchTable">
<span class="labelShowRecord pull-left" data-id="pageRecordText"></span> <span class="labelShowRecord pull-left" data-id="pageRecordText"></span>
<div data-id="paginationDiv"> <div data-id="paginationDiv" style="display:none">
<ul class="pager pull-right"> <ul class="pager pull-right">
<li> <li>
<button class="btn" data-id="previousData" disabled=true>Previous</button> <button class="btn" data-id="previousData" disabled=true>Previous</button>
......
dashboardv2/public/js/utils/CommonViewFunction.js
...@@ -449,12 +449,12 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Glob ...@@ -449,12 +449,12 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Glob
} }
}); });
if (model.get('$id$')) { if (model.get('$id$')) {
addTag += '<a href="javascript:void(0)" data-id="addTag" class="inputTagAdd" data-guid="' + model.get('$id$').id + '" ><i class="fa fa-plus"></i></a>'; addTag += '<a href="javascript:void(0)" data-id="addTag" class="inputTagAdd assignTag" data-guid="' + model.get('$id$').id + '" ><i class="fa fa-plus"></i></a>';
} else { } else {
addTag += '<a href="javascript:void(0)" data-id="addTag" class="inputTagAdd"><i style="right:0" class="fa fa-plus"></i></a>'; addTag += '<a href="javascript:void(0)" data-id="addTag" class="inputTagAdd assignTag"><i style="right:0" class="fa fa-plus"></i></a>';
} }
if (count > 1) { if (count > 1) {
addTag += '<div data-id="showMoreLess" class="inputTagAdd tagDetailPopover"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></div>' addTag += '<div data-id="showMoreLess" class="inputTagAdd assignTag tagDetailPopover"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></div>'
} }
return '<div class="tagList">' + atags + addTag + '<div class="popover popoverTag bottom" style="display:none"><div class="arrow"></div><div class="popover-content popoverContainer">' + popTag + '</div></div></div>'; return '<div class="tagList">' + atags + addTag + '<div class="popover popoverTag bottom" style="display:none"><div class="arrow"></div><div class="popover-content popoverContainer">' + popTag + '</div></div></div>';
} }
......
dashboardv2/public/js/views/schema/SchemaLayoutView.js
...@@ -44,13 +44,15 @@ define(['require', ...@@ -44,13 +44,15 @@ define(['require',
addTag: "[data-id='addTag']", addTag: "[data-id='addTag']",
addTerm: '[data-id="addTerm"]', addTerm: '[data-id="addTerm"]',
showMoreLess: '[data-id="showMoreLess"]', showMoreLess: '[data-id="showMoreLess"]',
showMoreLessTerm: '[data-id="showMoreLessTerm"]' showMoreLessTerm: '[data-id="showMoreLessTerm"]',
addAssignTag: "[data-id='addAssignTag']"
}, },
/** ui events hash */ /** ui events hash */
events: function() { events: function() {
var events = {}; var events = {};
events["click " + this.ui.addTag] = 'addTagModalView'; events["click " + this.ui.addTag] = 'checkedValue';
events["click " + this.ui.addTerm] = 'checkedValue'; events["click " + this.ui.addTerm] = 'checkedValue';
events["click " + this.ui.addAssignTag] = 'checkedValue';
events["click " + this.ui.tagClick] = function(e) { events["click " + this.ui.tagClick] = function(e) {
if (e.target.nodeName.toLocaleLowerCase() == "i") { if (e.target.nodeName.toLocaleLowerCase() == "i") {
this.onClickTagCross(e); this.onClickTagCross(e);
...@@ -110,10 +112,14 @@ define(['require', ...@@ -110,10 +112,14 @@ define(['require',
this.listenTo(this.schemaCollection, 'backgrid:selected', function(model, checked) { this.listenTo(this.schemaCollection, 'backgrid:selected', function(model, checked) {
if (checked === true) { if (checked === true) {
model.set("isEnable", true); model.set("isEnable", true);
this.$('.multiSelect').show(); if (Globals.taxonomy) {
this.$('.multiSelectTerm').show();
}
this.$('.multiSelectTag').show();
} else { } else {
model.set("isEnable", false); model.set("isEnable", false);
this.$('.multiSelect').hide(); this.$('.multiSelectTerm').hide();
this.$('.multiSelectTag').hide();
} }
this.arr = []; this.arr = [];
var that = this; var that = this;
...@@ -127,11 +133,6 @@ define(['require', ...@@ -127,11 +133,6 @@ define(['require',
} }
}); });
}); });
this.listenTo(this.schemaCollection, "reset", function(value) {
this.renderTableLayoutView();
$('.schemaTable').show();
this.$('.fontLoader').hide();
}, this);
this.listenTo(this.schemaCollection, "error", function(value) { this.listenTo(this.schemaCollection, "error", function(value) {
$('.schemaTable').hide(); $('.schemaTable').hide();
this.$('.fontLoader').hide(); this.$('.fontLoader').hide();
...@@ -139,7 +140,7 @@ define(['require', ...@@ -139,7 +140,7 @@ define(['require',
}, },
onRender: function() { onRender: function() {
var that = this; var that = this;
this.schemaCollection.fetch({ reset: true }); this.fetchCollection();
this.renderTableLayoutView(); this.renderTableLayoutView();
$('body').click(function(e) { $('body').click(function(e) {
var iconEvnt = e.target.nodeName; var iconEvnt = e.target.nodeName;
...@@ -152,8 +153,16 @@ define(['require', ...@@ -152,8 +153,16 @@ define(['require',
}); });
}, },
fetchCollection: function() { fetchCollection: function() {
var that = this;
this.$('.fontLoader').show(); this.$('.fontLoader').show();
this.schemaCollection.fetch({ reset: true }); this.schemaCollection.fetch({
success: function() {
that.renderTableLayoutView();
$('.schemaTable').show();
that.$('.fontLoader').hide();
},
silent: true
});
}, },
renderTableLayoutView: function() { renderTableLayoutView: function() {
var that = this, var that = this,
...@@ -170,7 +179,8 @@ define(['require', ...@@ -170,7 +179,8 @@ define(['require',
globalVent: that.globalVent, globalVent: that.globalVent,
columns: columns columns: columns
}))); })));
that.$('.multiSelect').hide(); that.$('.multiSelectTerm').hide();
that.$('.multiSelectTag').hide();
that.renderBreadcrumb(); that.renderBreadcrumb();
}); });
}, },
...@@ -226,15 +236,13 @@ define(['require', ...@@ -226,15 +236,13 @@ define(['require',
}) })
}; };
}); });
if (Globals.taxonomy) { col['Check'] = {
col['Check'] = { name: "selected",
name: "selected", label: "",
label: "", cell: "select-row",
cell: "select-row", headerCell: "select-all",
headerCell: "select-all", position: 1
position: 1 };
};
}
col['tag'] = { col['tag'] = {
label: "Tags", label: "Tags",
cell: "Html", cell: "Html",
...@@ -275,23 +283,36 @@ define(['require', ...@@ -275,23 +283,36 @@ define(['require',
} }
var guid = "", var guid = "",
that = this; that = this;
if (this.arr && this.arr.length) { var multiSelectTag = $(e.currentTarget).hasClass('assignTag');
that.addTermModalView(guid, this.arr); if (multiSelectTag) {
if (this.arr && this.arr.length && multiSelectTag) {
that.addTagModalView(guid, this.arr);
} else {
guid = that.$(e.currentTarget).data("guid");
that.addTagModalView(guid);
}
} else { } else {
guid = that.$(e.currentTarget).data("guid"); if (this.arr && this.arr.length) {
that.addTermModalView(guid); that.addTermModalView(guid, this.arr);
} else {
guid = that.$(e.currentTarget).data("guid");
that.addTermModalView(guid);
}
} }
}, },
addTagModalView: function(e) { addTagModalView: function(guid, multiple) {
if (e) {
e.stopPropagation();
}
var that = this; var that = this;
require(['views/tag/addTagModalView'], function(AddTagModalView) { require(['views/tag/addTagModalView'], function(AddTagModalView) {
var view = new AddTagModalView({ var view = new AddTagModalView({
guid: that.$(e.currentTarget).data("guid"), guid: guid,
multiple: multiple,
callback: function() { callback: function() {
that.fetchCollection(); that.fetchCollection();
that.arr = [];
},
showLoader: function() {
that.$('.fontLoader').show();
that.$('.searchTable').hide();
} }
}); });
// view.saveTagData = function() { // view.saveTagData = function() {
......
dashboardv2/public/js/views/search/SearchResultLayoutView.js
...@@ -54,7 +54,8 @@ define(['require', ...@@ -54,7 +54,8 @@ define(['require',
paginationDiv: '[data-id="paginationDiv"]', paginationDiv: '[data-id="paginationDiv"]',
previousData: "[data-id='previousData']", previousData: "[data-id='previousData']",
nextData: "[data-id='nextData']", nextData: "[data-id='nextData']",
pageRecordText: "[data-id='pageRecordText']" pageRecordText: "[data-id='pageRecordText']",
addAssignTag: "[data-id='addAssignTag']"
}, },
/** ui events hash */ /** ui events hash */
...@@ -82,8 +83,9 @@ define(['require', ...@@ -82,8 +83,9 @@ define(['require',
} }
} }
}; };
events["click " + this.ui.addTag] = 'addTagModalView'; events["click " + this.ui.addTag] = 'checkedValue';
events["click " + this.ui.addTerm] = 'checkedValue'; events["click " + this.ui.addTerm] = 'checkedValue';
events["click " + this.ui.addAssignTag] = 'checkedValue';
events["click " + this.ui.showMoreLess] = function(e) { events["click " + this.ui.showMoreLess] = function(e) {
$(e.currentTarget).parents('tr').siblings().find("div.popover.popoverTag").hide(); $(e.currentTarget).parents('tr').siblings().find("div.popover.popoverTag").hide();
$(e.currentTarget).parent().find("div.popover").toggle(); $(e.currentTarget).parent().find("div.popover").toggle();
...@@ -142,9 +144,11 @@ define(['require', ...@@ -142,9 +144,11 @@ define(['require',
if (checked === true) { if (checked === true) {
model.set("isEnable", true); model.set("isEnable", true);
this.$('.searchResult').find(".inputAssignTag.multiSelect").show(); this.$('.searchResult').find(".inputAssignTag.multiSelect").show();
this.$('.searchResult').find(".inputAssignTag.multiSelectTag").show();
} else { } else {
model.set("isEnable", false); model.set("isEnable", false);
this.$('.searchResult').find(".inputAssignTag.multiSelect").hide(); this.$('.searchResult').find(".inputAssignTag.multiSelect").hide();
this.$('.searchResult').find(".inputAssignTag.multiSelectTag").hide();
} }
this.arr = []; this.arr = [];
this.searchCollection.find(function(item) { this.searchCollection.find(function(item) {
...@@ -259,8 +263,14 @@ define(['require', ...@@ -259,8 +263,14 @@ define(['require',
that.startRenderTableProcess(); that.startRenderTableProcess();
} }
var resultData = 'Results for <b>' + that.searchCollection.queryParams.query + '</b>' var resultData = 'Results for <b>' + that.searchCollection.queryParams.query + '</b>'
var multiAssignData = '<a href="javascript:void(0)" class="inputAssignTag multiSelect" style="display:none" data-id="addTerm"><i class="fa fa-folder-o"></i>' + " " + 'Assign Term</a>' var multiAssignDataTag = '<a href="javascript:void(0)" class="inputAssignTag multiSelectTag assignTag" style="display:none" data-id="addAssignTag"><i class="fa fa-plus"></i>' + " " + 'Assign Tag</a>'
that.$('.searchResult').html(resultData + multiAssignData); if (Globals.taxonomy) {
var multiAssignDataTerm = '<a href="javascript:void(0)" class="inputAssignTag multiSelect" style="display:none" data-id="addTerm"><i class="fa fa-folder-o"></i>' + " " + 'Assign Term</a>'
that.$('.searchResult').html(resultData + multiAssignDataTerm + multiAssignDataTag);
} else {
that.$('.searchResult').html(resultData + multiAssignDataTag);
}
}, },
silent: true silent: true
}); });
...@@ -277,6 +287,7 @@ define(['require', ...@@ -277,6 +287,7 @@ define(['require',
globalVent: that.globalVent, globalVent: that.globalVent,
columns: columns columns: columns
}))); })));
that.ui.paginationDiv.show();
that.$('.searchResult').find(".inputAssignTag.multiSelect").hide(); that.$('.searchResult').find(".inputAssignTag.multiSelect").hide();
that.renderBreadcrumb(); that.renderBreadcrumb();
}); });
...@@ -401,14 +412,12 @@ define(['require', ...@@ -401,14 +412,12 @@ define(['require',
that.searchCollection.remove(model); that.searchCollection.remove(model);
} }
} }
if (Globals.taxonomy) { col['Check'] = {
col['Check'] = { name: "selected",
name: "selected", label: "",
label: "", cell: "select-row",
cell: "select-row", headerCell: "select-all"
headerCell: "select-all" };
};
}
if (nameCheck > 0) { if (nameCheck > 0) {
col['name'] = { col['name'] = {
label: "Name", label: "Name",
...@@ -535,13 +544,19 @@ define(['require', ...@@ -535,13 +544,19 @@ define(['require',
that.checkTableFetch(); that.checkTableFetch();
return this.searchCollection.constructor.getTableCols(col, this.searchCollection); return this.searchCollection.constructor.getTableCols(col, this.searchCollection);
}, },
addTagModalView: function(e) { addTagModalView: function(guid, multiple) {
var that = this; var that = this;
require(['views/tag/addTagModalView'], function(AddTagModalView) { require(['views/tag/addTagModalView'], function(AddTagModalView) {
var view = new AddTagModalView({ var view = new AddTagModalView({
guid: that.$(e.currentTarget).data("guid"), guid: guid,
multiple: multiple,
callback: function() { callback: function() {
that.fetchCollection(); that.fetchCollection();
that.arr = [];
},
showLoader: function() {
that.$('.fontLoader').show();
that.$('.searchTable').hide();
} }
}); });
// view.saveTagData = function() { // view.saveTagData = function() {
...@@ -552,11 +567,21 @@ define(['require', ...@@ -552,11 +567,21 @@ define(['require',
checkedValue: function(e) { checkedValue: function(e) {
var guid = "", var guid = "",
that = this; that = this;
if (this.arr && this.arr.length) { var multiSelectTag = $(e.currentTarget).hasClass('assignTag');
that.addTermModalView(guid, this.arr); if (multiSelectTag) {
if (this.arr && this.arr.length && multiSelectTag) {
that.addTagModalView(guid, this.arr);
} else {
guid = that.$(e.currentTarget).data("guid");
that.addTagModalView(guid);
}
} else { } else {
guid = that.$(e.currentTarget).data("guid"); if (this.arr && this.arr.length) {
that.addTermModalView(guid); that.addTermModalView(guid, this.arr);
} else {
guid = that.$(e.currentTarget).data("guid");
that.addTermModalView(guid);
}
} }
}, },
addTermModalView: function(guid, multiple) { addTermModalView: function(guid, multiple) {
......
dashboardv2/public/js/views/tag/addTagModalView.js
...@@ -45,7 +45,7 @@ define(['require', ...@@ -45,7 +45,7 @@ define(['require',
*/ */
initialize: function(options) { initialize: function(options) {
var that = this; var that = this;
_.extend(this, _.pick(options, 'vent', 'modalCollection', 'guid', 'callback')); _.extend(this, _.pick(options, 'vent', 'modalCollection', 'guid', 'callback', 'multiple', 'showLoader'));
this.collection = new VTagList(); this.collection = new VTagList();
this.commonCollection = new VCommonList(); this.commonCollection = new VCommonList();
this.modal = new Modal({ this.modal = new Modal({
...@@ -55,10 +55,33 @@ define(['require', ...@@ -55,10 +55,33 @@ define(['require',
cancelText: "Cancel", cancelText: "Cancel",
allowCancel: true, allowCancel: true,
}).open(); }).open();
// var saveBtn = this.modal.$el.find('.btn-atlas');
// saveBtn[0].setAttribute('disabled', true);
this.on('ok', function() { this.on('ok', function() {
that.saveTagData(); if (that.multiple) {
for (var i = 0; i < that.multiple.length; i++) {
if (i == 0) {
that.showLoader();
}
var obj = {
tagName: this.ui.addTagOptions.val(),
guid: that.multiple[i].id.id
}
if (that.multiple.length - 1 == i) {
obj['callback'] = function() {
that.callback();
}
}
that.saveTagData(obj);
}
} else {
that.saveTagData({
tagName: that.ui.addTagOptions.val(),
guid: that.guid,
callback: function() {
that.callback();
}
});
}
}); });
this.on('closeModal', function() { this.on('closeModal', function() {
this.modal.trigger('cancel'); this.modal.trigger('cancel');
...@@ -120,32 +143,28 @@ define(['require', ...@@ -120,32 +143,28 @@ define(['require',
} }
} }
}, },
saveTagData: function() { saveTagData: function(options) {
var that = this, var that = this,
values = {}; values = {};
this.entityModel = new VEntity(); this.entityModel = new VEntity();
var names = this.$(".attrName"); var name = options.tagName;
names.each(function(i, item) {
var selection = $(item).data("key");
values[selection] = $(item).val();
});
var tagName = this.ui.addTagOptions.val(); var tagName = this.ui.addTagOptions.val();
var json = { var json = {
"jsonClass": "org.apache.atlas.typesystem.json.InstanceSerialization$_Struct", "jsonClass": "org.apache.atlas.typesystem.json.InstanceSerialization$_Struct",
"typeName": tagName, "typeName": name,
"values": values "values": values
}; };
that.entityModel.saveEntity(that.guid, { that.entityModel.saveEntity(options.guid, {
data: JSON.stringify(json), data: JSON.stringify(json),
success: function(data) { success: function(data) {
Utils.notifySuccess({ Utils.notifySuccess({
content: "Tag " + tagName + " has been added to entity" content: "Tag " + tagName + " has been added to entity"
}); });
if (that.callback) { if (options.callback) {
that.callback(); options.callback();
} }
if (that.modalCollection) { if (options.modalCollection) {
that.modalCollection.fetch({ reset: true }); options.modalCollection.fetch({ reset: true });
} }
}, },
error: function(error, data, status) { error: function(error, data, status) {
...@@ -157,6 +176,9 @@ define(['require', ...@@ -157,6 +176,9 @@ define(['require',
Utils.notifyError({ Utils.notifyError({
content: message content: message
}); });
if (options.callback) {
options.callback();
}
}, },
complete: function() {} complete: function() {}
}); });
......
release-log.txt
...@@ -6,6 +6,7 @@ INCOMPATIBLE CHANGES: ...@@ -6,6 +6,7 @@ INCOMPATIBLE CHANGES:
ALL CHANGES: ALL CHANGES:
ATLAS-1090 UI: Multi-Select Tagging. (Kalyanikashikar via kevalbhatt)
ATLAS-1092 Add Table.CreateTime to process qualified Name for all hive_process (sumasai via shwethags) ATLAS-1092 Add Table.CreateTime to process qualified Name for all hive_process (sumasai via shwethags)
ATLAS-1096 Modify HveMetaStoreBridge.import to use getEntity instead of DSL (sumasai via shwethags) ATLAS-1096 Modify HveMetaStoreBridge.import to use getEntity instead of DSL (sumasai via shwethags)
ATLAS-1091 Improvement in DSL search functionality. (kevalbhatt) ATLAS-1091 Improvement in DSL search functionality. (kevalbhatt)
......
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