You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@atlas.apache.org by sa...@apache.org on 2019/10/07 06:09:16 UTC
[atlas] branch master updated: ATLAS-3437: UI: Allows users to
perform wildcard searches on classification.
This is an automated email from the ASF dual-hosted git repository.
sarath pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/atlas.git
The following commit(s) were added to refs/heads/master by this push:
new 4b8db75 ATLAS-3437: UI: Allows users to perform wildcard searches on classification.
4b8db75 is described below
commit 4b8db750d10dd9145912de71f5a31a08c85ebe4b
Author: sameer79 <fi...@yahoo.co.in>
AuthorDate: Fri Oct 4 17:50:01 2019 +0530
ATLAS-3437: UI: Allows users to perform wildcard searches on classification.
Signed-off-by: Sarath Subramanian <sa...@apache.org>
---
.../public/js/views/search/SearchLayoutView.js | 77 ++++++++++++----------
dashboardv3/public/css/scss/leftsidebar.scss | 53 +++++++++++++++
.../tree/ClassificationTreeLayoutView_tmpl.html | 28 +++-----
.../search/tree/ClassificationTreeLayoutView.js | 56 +++++++++++++++-
4 files changed, 159 insertions(+), 55 deletions(-)
diff --git a/dashboardv2/public/js/views/search/SearchLayoutView.js b/dashboardv2/public/js/views/search/SearchLayoutView.js
index 3851bca..043efc3 100644
--- a/dashboardv2/public/js/views/search/SearchLayoutView.js
+++ b/dashboardv2/public/js/views/search/SearchLayoutView.js
@@ -96,24 +96,24 @@ define(['require',
var param = Utils.getUrlState.getQueryParams();
this.query = {
dsl: {
- query: null,
- type: null,
- pageOffset: null,
- pageLimit: null
+ query: this.value ? this.value.query : null,
+ type: this.value ? this.value.type : null,
+ pageOffset: this.value ? this.value.pageOffset : null,
+ pageLimit: this.value ? this.value.pageLimit : null
},
basic: {
- query: null,
- type: null,
- tag: null,
- term: null,
- attributes: null,
- tagFilters: null,
- pageOffset: null,
- pageLimit: null,
- entityFilters: null,
- includeDE: null,
- excludeST: null,
- excludeSC: null
+ query: this.value ? this.value.query: null,
+ type: this.value ? this.value.type: null,
+ tag: this.value ? this.value.tag: null,
+ term: this.value ? this.value.term: null,
+ attributes: this.value ? this.value.attributes: null,
+ tagFilters: this.value ? this.value.tagFilters: null,
+ pageOffset: this.value ? this.value.pageOffset: null,
+ pageLimit: this.value ? this.value.pageLimit: null,
+ entityFilters: this.value ? this.value.entityFilters: null,
+ includeDE: this.value ? this.value.includeDE: null,
+ excludeST: this.value ? this.value.excludeST: null,
+ excludeSC: this.value ? this.value.excludeSC: null
}
};
if (!this.value) {
@@ -263,7 +263,7 @@ define(['require',
isTypeEl = $el.data('id') == "typeLOV",
select2Data = $el.select2('data');
if (e.type == "change" && select2Data) {
- var value = (_.isEmpty(select2Data) ? select2Data : _.first(select2Data).id),
+ var value = (_.isEmpty(select2Data) ? select2Data : _.first(select2Data).id) || this.value.tag,
key = "tag",
filterType = isBasicSearch ? 'tagFilters' : null,
value = value && value.length ? value : null;
@@ -506,7 +506,8 @@ define(['require',
that.ui.tagLov.html(tagStr);
this.ui.tagLov.select2({
placeholder: "Select Classification",
- allowClear: true
+ allowClear: true,
+ tags: true
});
}
that.ui.typeLov.html(typeStr);
@@ -594,27 +595,33 @@ define(['require',
this.ui.searchType.prop("checked", false).trigger("change");
}
}
- this.ui.typeLov.val(this.value.type);
- if (this.ui.typeLov.data('select2')) {
- if (this.ui.typeLov.val() !== this.value.type) {
- this.value.type = null;
- this.ui.typeLov.val("").trigger("change", { 'manual': true });
- } else {
- this.ui.typeLov.trigger("change", { 'manual': true });
+ if (this.value.type) {
+ this.ui.typeLov.val(this.value.type);
+ if (this.ui.typeLov.data('select2')) {
+ if (this.ui.typeLov.val() !== this.value.type) {
+ this.value.type = null;
+ this.ui.typeLov.val("").trigger("change", { 'manual': true });
+ } else {
+ this.ui.typeLov.trigger("change", { 'manual': true });
+ }
}
}
+
if (!this.dsl) {
- this.ui.tagLov.val(this.value.tag);
- if (this.ui.tagLov.data('select2')) {
- // To handle delete scenario.
- if (this.ui.tagLov.val() !== this.value.tag) {
- this.value.tag = null;
- this.ui.tagLov.val("").trigger("change", { 'manual': true });
- } else {
- this.ui.tagLov.trigger("change", { 'manual': true });
+ if (this.value.tag) {
+ this.ui.tagLov.val(this.value.tag);
+ if (this.ui.tagLov.data('select2')) {
+ // To handle delete scenario.
+ if (this.ui.tagLov.val() !== this.value.tag) {
+ // this.value.tag = null;
+ this.ui.tagLov.val("").trigger("change", { 'manual': true });
+ } else {
+ this.ui.tagLov.trigger("change", { 'manual': true });
+ }
}
}
+
if (this.value.term) {
this.ui.termLov.append('<option value="' + this.value.term + '" selected="selected">' + this.value.term + '</option>');
}
@@ -642,8 +649,8 @@ define(['require',
tagFilters: null,
entityFilters: null
},
- typeLovValue = this.ui.typeLov.find(':selected').data('name'),
- tagLovValue = this.ui.tagLov.find(':selected').data('name'),
+ typeLovValue = this.ui.typeLov.find(':selected').data('name'), // to get count of selected element used data
+ tagLovValue = this.ui.tagLov.find(':selected').data('name') || this.ui.tagLov.val(),
termLovValue = this.ui.termLov.select2('val')
params['type'] = typeLovValue || null;
if (!this.dsl) {
diff --git a/dashboardv3/public/css/scss/leftsidebar.scss b/dashboardv3/public/css/scss/leftsidebar.scss
index f753f57..734af6c 100644
--- a/dashboardv3/public/css/scss/leftsidebar.scss
+++ b/dashboardv3/public/css/scss/leftsidebar.scss
@@ -53,10 +53,32 @@
}
}
+ // .remove-drop-down {
+ // .drop-down-menu-view {
+ // display: inline-block;
+ // }
+
+ // .show-in-drop-down {
+ // display: none;
+ // }
+ // }
+
+ // .add-drop-down {
+ // .drop-down-menu-view {
+ // display: none;
+ // }
+
+ // .show-in-drop-down {
+ // display: block;
+ // }
+ // }
+
.filter-tree-content {
overflow: auto;
height: calc(100vh - 188px);
+
+
.panel-collapse {
padding-top: 7px;
}
@@ -188,6 +210,20 @@
}
}
+ input {
+ color: $color_ironside_gray_approx !important;
+ width: 150px;
+ display: inline-block;
+ }
+
+ input:hover {
+ background-color: #fff;
+ }
+
+ &:hover .clear-icon {
+ color: $color_ironside_gray_approx !important;
+ }
+
a {
display: inline-block;
padding: 0px 3px;
@@ -198,6 +234,21 @@
margin-left: 10px;
}
}
+
+ .clear-icon {
+ color: $color_ironside_gray_approx !important;
+ position: absolute;
+ top: 30%;
+ right: 12px;
+ }
+
+ .has-feedback .form-control {
+ padding: 6px 12px;
+ }
+ }
+
+ .hide-icon {
+ display: none;
}
.custom-filter {
@@ -227,6 +278,8 @@
color: $action_gray;
}
}
+
+
}
.sidebar-content {
diff --git a/dashboardv3/public/js/templates/search/tree/ClassificationTreeLayoutView_tmpl.html b/dashboardv3/public/js/templates/search/tree/ClassificationTreeLayoutView_tmpl.html
index 1970aac..ab2ded9 100644
--- a/dashboardv3/public/js/templates/search/tree/ClassificationTreeLayoutView_tmpl.html
+++ b/dashboardv3/public/js/templates/search/tree/ClassificationTreeLayoutView_tmpl.html
@@ -19,25 +19,12 @@
<i class="ec-icon fa"></i>
<h4 class="panel-title">Classifications</h4>
<div class="btn-group pull-right">
- <!-- <button type="button" class="typeRefresh" data-id="groupOrFlatTreeView" data-type="classification" title="Show flat tree">
- <i class="fa fa-sitemap"></i>
- </button> -->
- <button type="button" class="typeRefresh" data-id="refreshTree" data-type="classification" title="Refresh">
+ <button type="button" class="typeRefresh drop-down-menu-view" data-id="refreshTree" data-type="classification" title="Refresh">
<i class="fa fa-refresh"></i>
</button>
- <button type="button" class="typeRefresh" data-id="showEmptyClassifications" title="Show unused classification">
+ <button type="button" class="typeRefresh drop-down-menu-view" data-id="showEmptyClassifications" title="Show unused classification">
<i class="fa fa-toggle-off"></i>
</button>
- <!-- <button type="button" data-id="createTag" data-type="classification" title="Create Classification">
- <i class="fa fa-plus"></i>
- </button> -->
- <!-- <ul class="dropdown-menu right-align tree-menu">
- <li data-id="createTag"><i class="fa fa-plus"></i><a>Create Classification</a></li>
- <li data-id="showEmptyClassifications"><i class="fa fa-check-circle"></i> <a>Show Empty</a></li>
- </ul> -->
- <!-- <button data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button" data-id="tagMenu">
- <i class="fa fa-ellipsis-v"></i>
- </button> -->
<button type="button" class="typeRefresh dropdown">
<div class=" btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-ellipsis-v"></i>
@@ -45,11 +32,16 @@
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li data-id="groupOrFlatTreeView" data-type="classification"> <i class="fa fa-list-ul"></i><span>Show flat tree</span>
</li>
- <!-- <li data-id="showEmptyClassifications" data-type="classification"> <i class="fa fa-toggle-off"></i><span>Show unused classification</span>
- </li> -->
<li data-id="createTag" data-type="classification"> <i class="fa fa-plus"></i><span>Create Classification</span>
</li>
- </ul>
+ <li data-id="wildCardClick" data-type="classification">
+ <div class="has-feedback align-left-right-icon search-box">
+ <input type="text" class="form-control" name="wildcard search" placeholder="Wildcard search" data-id="wildCardValue" />
+ <span class="fa fa-times clear-icon" data-id="clearWildCard"> </span>
+ </div>
+ </li>
+ </button>
+ </ul>
</button>
</div>
</div>
diff --git a/dashboardv3/public/js/views/search/tree/ClassificationTreeLayoutView.js b/dashboardv3/public/js/views/search/tree/ClassificationTreeLayoutView.js
index 8479b9e..2022bf2 100644
--- a/dashboardv3/public/js/views/search/tree/ClassificationTreeLayoutView.js
+++ b/dashboardv3/public/js/views/search/tree/ClassificationTreeLayoutView.js
@@ -47,8 +47,11 @@ define([
showEmptyClassifications: '[data-id="showEmptyClassifications"]',
// Create
- createTag: '[data-id="createTag"]'
-
+ createTag: '[data-id="createTag"]',
+ wildCardClick: '[data-id="wildCardClick"]',
+ wildCardSearch: '[data-id="wildCardSearch"]',
+ wildCardValue: '[data-id="wildCardValue"]',
+ clearWildCard: '[data-id="clearWildCard"]'
},
templateHelpers: function() {
return {
@@ -88,6 +91,34 @@ define([
that.ui[type + "SearchTree"].jstree(true).destroy();
that.renderClassificationTree();
};
+ events["click " + this.ui.wildCardClick] = function(e) {
+ e.stopPropagation();
+ };
+ events["click " + this.ui.wildCardSearch] = function(e) {
+ e.stopPropagation();
+ var tagValue = this.ui.wildCardValue.val();
+ that.findSearchResult(tagValue);
+ };
+ events["click " + this.ui.wildCardValue] = function(e) {
+ e.stopPropagation();
+ }
+ events["click " + this.ui.clearWildCard] = function(e) {
+ e.stopPropagation();
+ that.ui.wildCardValue.val("");
+ }
+ events["keyup " + this.ui.wildCardValue] = function(e) {
+ e.stopPropagation();
+ var code = e.which;
+ if (this.ui.wildCardValue.val().length > 0) {
+ this.ui.clearWildCard.removeClass('hide-icon');
+ } else {
+ this.ui.clearWildCard.addClass('hide-icon');
+ }
+ if (code == 13) {
+ var tagValue = this.ui.wildCardValue.val();
+ that.findSearchResult(tagValue);
+ }
+ };
return events;
},
@@ -117,6 +148,7 @@ define([
onRender: function() {
this.renderClassificationTree();
this.createClassificationAction();
+ this.ui.clearWildCard.addClass('hide-icon');
},
bindEvents: function() {
var that = this;
@@ -153,6 +185,25 @@ define([
}
});
},
+ findSearchResult: function(tagValue) {
+ if (tagValue) {
+ var params = {
+ searchType: "basic",
+ dslChecked: false
+ };
+ if (this.options.value) {
+ params["tag"] = tagValue;
+ }
+ var searchParam = _.extend({}, this.options.value, params);
+ this.triggerSearch(searchParam);
+ } else {
+ Utils.notifyInfo({
+ content: "Search should not be empty!"
+ });
+ return;
+ }
+
+ },
onSearchClassificationNode: function(showEmptyTag) {
// on tree search by text, searches for all classification node, called by searchfilterBrowserLayoutView.js
this.isEmptyClassification = showEmptyTag;
@@ -217,6 +268,7 @@ define([
return;
}
var name, type, selectedNodeId, that = this;
+ that.ui.wildCardValue.val("");
if (options) {
name = options.node.original.name;
selectedNodeId = options.node.id;