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 122 additions and 48 deletions
dashboardv2/public/css/scss/tag.scss
......@@ -315,6 +315,10 @@ form-control .tagInpput {
float: right;
}
.multiSelectTerm {
float: right;
}
.multiSelectTag {
float: right;
}
......
dashboardv2/public/js/templates/schema/SchemaTableLayoutView_tmpl.html
......@@ -14,5 +14,6 @@
* See the License for the specific language governing permissions and
* 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>
dashboardv2/public/js/templates/search/SearchResultLayoutView_tmpl.html
......@@ -21,7 +21,7 @@
<div class="ellipsis"><span class="searchResult" style=" font-size: 16px;"></span></div>
<div class="searchTable">
<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">
<li>
<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
}
});
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 {
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) {
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>';
}
......
dashboardv2/public/js/views/schema/SchemaLayoutView.js
......@@ -44,13 +44,15 @@ define(['require',
addTag: "[data-id='addTag']",
addTerm: '[data-id="addTerm"]',
showMoreLess: '[data-id="showMoreLess"]',
showMoreLessTerm: '[data-id="showMoreLessTerm"]'
showMoreLessTerm: '[data-id="showMoreLessTerm"]',
addAssignTag: "[data-id='addAssignTag']"
},
/** ui events hash */
events: function() {
var events = {};
events["click " + this.ui.addTag] = 'addTagModalView';
events["click " + this.ui.addTag] = 'checkedValue';
events["click " + this.ui.addTerm] = 'checkedValue';
events["click " + this.ui.addAssignTag] = 'checkedValue';
events["click " + this.ui.tagClick] = function(e) {
if (e.target.nodeName.toLocaleLowerCase() == "i") {
this.onClickTagCross(e);
......@@ -110,10 +112,14 @@ define(['require',
this.listenTo(this.schemaCollection, 'backgrid:selected', function(model, checked) {
if (checked === true) {
model.set("isEnable", true);
this.$('.multiSelect').show();
if (Globals.taxonomy) {
this.$('.multiSelectTerm').show();
}
this.$('.multiSelectTag').show();
} else {
model.set("isEnable", false);
this.$('.multiSelect').hide();
this.$('.multiSelectTerm').hide();
this.$('.multiSelectTag').hide();
}
this.arr = [];
var that = this;
......@@ -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) {
$('.schemaTable').hide();
this.$('.fontLoader').hide();
......@@ -139,7 +140,7 @@ define(['require',
},
onRender: function() {
var that = this;
this.schemaCollection.fetch({ reset: true });
this.fetchCollection();
this.renderTableLayoutView();
$('body').click(function(e) {
var iconEvnt = e.target.nodeName;
......@@ -152,8 +153,16 @@ define(['require',
});
},
fetchCollection: function() {
var that = this;
this.$('.fontLoader').show();
this.schemaCollection.fetch({ reset: true });
this.schemaCollection.fetch({
success: function() {
that.renderTableLayoutView();
$('.schemaTable').show();
that.$('.fontLoader').hide();
},
silent: true
});
},
renderTableLayoutView: function() {
var that = this,
......@@ -170,7 +179,8 @@ define(['require',
globalVent: that.globalVent,
columns: columns
})));
that.$('.multiSelect').hide();
that.$('.multiSelectTerm').hide();
that.$('.multiSelectTag').hide();
that.renderBreadcrumb();
});
},
......@@ -226,7 +236,6 @@ define(['require',
})
};
});
if (Globals.taxonomy) {
col['Check'] = {
name: "selected",
label: "",
......@@ -234,7 +243,6 @@ define(['require',
headerCell: "select-all",
position: 1
};
}
col['tag'] = {
label: "Tags",
cell: "Html",
......@@ -275,23 +283,36 @@ define(['require',
}
var guid = "",
that = this;
var multiSelectTag = $(e.currentTarget).hasClass('assignTag');
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 {
if (this.arr && this.arr.length) {
that.addTermModalView(guid, this.arr);
} else {
guid = that.$(e.currentTarget).data("guid");
that.addTermModalView(guid);
}
},
addTagModalView: function(e) {
if (e) {
e.stopPropagation();
}
},
addTagModalView: function(guid, multiple) {
var that = this;
require(['views/tag/addTagModalView'], function(AddTagModalView) {
var view = new AddTagModalView({
guid: that.$(e.currentTarget).data("guid"),
guid: guid,
multiple: multiple,
callback: function() {
that.fetchCollection();
that.arr = [];
},
showLoader: function() {
that.$('.fontLoader').show();
that.$('.searchTable').hide();
}
});
// view.saveTagData = function() {
......
dashboardv2/public/js/views/search/SearchResultLayoutView.js
......@@ -54,7 +54,8 @@ define(['require',
paginationDiv: '[data-id="paginationDiv"]',
previousData: "[data-id='previousData']",
nextData: "[data-id='nextData']",
pageRecordText: "[data-id='pageRecordText']"
pageRecordText: "[data-id='pageRecordText']",
addAssignTag: "[data-id='addAssignTag']"
},
/** ui events hash */
......@@ -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.addAssignTag] = 'checkedValue';
events["click " + this.ui.showMoreLess] = function(e) {
$(e.currentTarget).parents('tr').siblings().find("div.popover.popoverTag").hide();
$(e.currentTarget).parent().find("div.popover").toggle();
......@@ -142,9 +144,11 @@ define(['require',
if (checked === true) {
model.set("isEnable", true);
this.$('.searchResult').find(".inputAssignTag.multiSelect").show();
this.$('.searchResult').find(".inputAssignTag.multiSelectTag").show();
} else {
model.set("isEnable", false);
this.$('.searchResult').find(".inputAssignTag.multiSelect").hide();
this.$('.searchResult').find(".inputAssignTag.multiSelectTag").hide();
}
this.arr = [];
this.searchCollection.find(function(item) {
......@@ -259,8 +263,14 @@ define(['require',
that.startRenderTableProcess();
}
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>'
that.$('.searchResult').html(resultData + multiAssignData);
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>'
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
});
......@@ -277,6 +287,7 @@ define(['require',
globalVent: that.globalVent,
columns: columns
})));
that.ui.paginationDiv.show();
that.$('.searchResult').find(".inputAssignTag.multiSelect").hide();
that.renderBreadcrumb();
});
......@@ -401,14 +412,12 @@ define(['require',
that.searchCollection.remove(model);
}
}
if (Globals.taxonomy) {
col['Check'] = {
name: "selected",
label: "",
cell: "select-row",
headerCell: "select-all"
};
}
if (nameCheck > 0) {
col['name'] = {
label: "Name",
......@@ -535,13 +544,19 @@ define(['require',
that.checkTableFetch();
return this.searchCollection.constructor.getTableCols(col, this.searchCollection);
},
addTagModalView: function(e) {
addTagModalView: function(guid, multiple) {
var that = this;
require(['views/tag/addTagModalView'], function(AddTagModalView) {
var view = new AddTagModalView({
guid: that.$(e.currentTarget).data("guid"),
guid: guid,
multiple: multiple,
callback: function() {
that.fetchCollection();
that.arr = [];
},
showLoader: function() {
that.$('.fontLoader').show();
that.$('.searchTable').hide();
}
});
// view.saveTagData = function() {
......@@ -552,12 +567,22 @@ define(['require',
checkedValue: function(e) {
var guid = "",
that = this;
var multiSelectTag = $(e.currentTarget).hasClass('assignTag');
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 {
if (this.arr && this.arr.length) {
that.addTermModalView(guid, this.arr);
} else {
guid = that.$(e.currentTarget).data("guid");
that.addTermModalView(guid);
}
}
},
addTermModalView: function(guid, multiple) {
var that = this;
......
dashboardv2/public/js/views/tag/addTagModalView.js
......@@ -45,7 +45,7 @@ define(['require',
*/
initialize: function(options) {
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.commonCollection = new VCommonList();
this.modal = new Modal({
......@@ -55,10 +55,33 @@ define(['require',
cancelText: "Cancel",
allowCancel: true,
}).open();
// var saveBtn = this.modal.$el.find('.btn-atlas');
// saveBtn[0].setAttribute('disabled', true);
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.modal.trigger('cancel');
......@@ -120,32 +143,28 @@ define(['require',
}
}
},
saveTagData: function() {
saveTagData: function(options) {
var that = this,
values = {};
this.entityModel = new VEntity();
var names = this.$(".attrName");
names.each(function(i, item) {
var selection = $(item).data("key");
values[selection] = $(item).val();
});
var name = options.tagName;
var tagName = this.ui.addTagOptions.val();
var json = {
"jsonClass": "org.apache.atlas.typesystem.json.InstanceSerialization$_Struct",
"typeName": tagName,
"typeName": name,
"values": values
};
that.entityModel.saveEntity(that.guid, {
that.entityModel.saveEntity(options.guid, {
data: JSON.stringify(json),
success: function(data) {
Utils.notifySuccess({
content: "Tag " + tagName + " has been added to entity"
});
if (that.callback) {
that.callback();
if (options.callback) {
options.callback();
}
if (that.modalCollection) {
that.modalCollection.fetch({ reset: true });
if (options.modalCollection) {
options.modalCollection.fetch({ reset: true });
}
},
error: function(error, data, status) {
......@@ -157,6 +176,9 @@ define(['require',
Utils.notifyError({
content: message
});
if (options.callback) {
options.callback();
}
},
complete: function() {}
});
......
release-log.txt
......@@ -6,6 +6,7 @@ INCOMPATIBLE 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-1096 Modify HveMetaStoreBridge.import to use getEntity instead of DSL (sumasai via shwethags)
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