Skip to content

A
atlas
Commit 4b8db750 by sameer79 Committed by Sarath Subramanian
Options

ATLAS-3437: UI: Allows users to perform wildcard searches on classification.

Signed-off-by: 's avatarSarath Subramanian <sarath@apache.org>
parent b0ab2ffe
Showing with 159 additions and 55 deletions
dashboardv2/public/js/views/search/SearchLayoutView.js
...@@ -96,24 +96,24 @@ define(['require', ...@@ -96,24 +96,24 @@ define(['require',
var param = Utils.getUrlState.getQueryParams(); var param = Utils.getUrlState.getQueryParams();
this.query = { this.query = {
dsl: { dsl: {
query: null, query: this.value ? this.value.query : null,
type: null, type: this.value ? this.value.type : null,
pageOffset: null, pageOffset: this.value ? this.value.pageOffset : null,
pageLimit: null pageLimit: this.value ? this.value.pageLimit : null
}, },
basic: { basic: {
query: null, query: this.value ? this.value.query: null,
type: null, type: this.value ? this.value.type: null,
tag: null, tag: this.value ? this.value.tag: null,
term: null, term: this.value ? this.value.term: null,
attributes: null, attributes: this.value ? this.value.attributes: null,
tagFilters: null, tagFilters: this.value ? this.value.tagFilters: null,
pageOffset: null, pageOffset: this.value ? this.value.pageOffset: null,
pageLimit: null, pageLimit: this.value ? this.value.pageLimit: null,
entityFilters: null, entityFilters: this.value ? this.value.entityFilters: null,
includeDE: null, includeDE: this.value ? this.value.includeDE: null,
excludeST: null, excludeST: this.value ? this.value.excludeST: null,
excludeSC: null excludeSC: this.value ? this.value.excludeSC: null
} }
}; };
if (!this.value) { if (!this.value) {
...@@ -263,7 +263,7 @@ define(['require', ...@@ -263,7 +263,7 @@ define(['require',
isTypeEl = $el.data('id') == "typeLOV", isTypeEl = $el.data('id') == "typeLOV",
select2Data = $el.select2('data'); select2Data = $el.select2('data');
if (e.type == "change" && select2Data) { 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", key = "tag",
filterType = isBasicSearch ? 'tagFilters' : null, filterType = isBasicSearch ? 'tagFilters' : null,
value = value && value.length ? value : null; value = value && value.length ? value : null;
...@@ -506,7 +506,8 @@ define(['require', ...@@ -506,7 +506,8 @@ define(['require',
that.ui.tagLov.html(tagStr); that.ui.tagLov.html(tagStr);
this.ui.tagLov.select2({ this.ui.tagLov.select2({
placeholder: "Select Classification", placeholder: "Select Classification",
allowClear: true allowClear: true,
tags: true
}); });
} }
that.ui.typeLov.html(typeStr); that.ui.typeLov.html(typeStr);
...@@ -594,27 +595,33 @@ define(['require', ...@@ -594,27 +595,33 @@ define(['require',
this.ui.searchType.prop("checked", false).trigger("change"); this.ui.searchType.prop("checked", false).trigger("change");
} }
} }
this.ui.typeLov.val(this.value.type); if (this.value.type) {
if (this.ui.typeLov.data('select2')) { this.ui.typeLov.val(this.value.type);
if (this.ui.typeLov.val() !== this.value.type) { if (this.ui.typeLov.data('select2')) {
this.value.type = null; if (this.ui.typeLov.val() !== this.value.type) {
this.ui.typeLov.val("").trigger("change", { 'manual': true }); this.value.type = null;
} else { this.ui.typeLov.val("").trigger("change", { 'manual': true });
this.ui.typeLov.trigger("change", { 'manual': true }); } else {
this.ui.typeLov.trigger("change", { 'manual': true });
}
} }
} }
if (!this.dsl) { if (!this.dsl) {
this.ui.tagLov.val(this.value.tag); if (this.value.tag) {
if (this.ui.tagLov.data('select2')) { this.ui.tagLov.val(this.value.tag);
// To handle delete scenario. if (this.ui.tagLov.data('select2')) {
if (this.ui.tagLov.val() !== this.value.tag) { // To handle delete scenario.
this.value.tag = null; if (this.ui.tagLov.val() !== this.value.tag) {
this.ui.tagLov.val("").trigger("change", { 'manual': true }); // this.value.tag = null;
} else { this.ui.tagLov.val("").trigger("change", { 'manual': true });
this.ui.tagLov.trigger("change", { 'manual': true }); } else {
this.ui.tagLov.trigger("change", { 'manual': true });
}
} }
} }
if (this.value.term) { if (this.value.term) {
this.ui.termLov.append('<option value="' + this.value.term + '" selected="selected">' + this.value.term + '</option>'); this.ui.termLov.append('<option value="' + this.value.term + '" selected="selected">' + this.value.term + '</option>');
} }
...@@ -642,8 +649,8 @@ define(['require', ...@@ -642,8 +649,8 @@ define(['require',
tagFilters: null, tagFilters: null,
entityFilters: null entityFilters: null
}, },
typeLovValue = this.ui.typeLov.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'), tagLovValue = this.ui.tagLov.find(':selected').data('name') || this.ui.tagLov.val(),
termLovValue = this.ui.termLov.select2('val') termLovValue = this.ui.termLov.select2('val')
params['type'] = typeLovValue || null; params['type'] = typeLovValue || null;
if (!this.dsl) { if (!this.dsl) {
......
dashboardv3/public/css/scss/leftsidebar.scss
...@@ -53,10 +53,32 @@ ...@@ -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 { .filter-tree-content {
overflow: auto; overflow: auto;
height: calc(100vh - 188px); height: calc(100vh - 188px);
.panel-collapse { .panel-collapse {
padding-top: 7px; padding-top: 7px;
} }
...@@ -188,6 +210,20 @@ ...@@ -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 { a {
display: inline-block; display: inline-block;
padding: 0px 3px; padding: 0px 3px;
...@@ -198,6 +234,21 @@ ...@@ -198,6 +234,21 @@
margin-left: 10px; 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 { .custom-filter {
...@@ -227,6 +278,8 @@ ...@@ -227,6 +278,8 @@
color: $action_gray; color: $action_gray;
} }
} }
} }
.sidebar-content { .sidebar-content {
......
dashboardv3/public/js/templates/search/tree/ClassificationTreeLayoutView_tmpl.html
...@@ -19,25 +19,12 @@ ...@@ -19,25 +19,12 @@
<i class="ec-icon fa"></i> <i class="ec-icon fa"></i>
<h4 class="panel-title">Classifications</h4> <h4 class="panel-title">Classifications</h4>
<div class="btn-group pull-right"> <div class="btn-group pull-right">
<!-- <button type="button" class="typeRefresh" data-id="groupOrFlatTreeView" data-type="classification" title="Show flat tree"> <button type="button" class="typeRefresh drop-down-menu-view" data-id="refreshTree" data-type="classification" title="Refresh">
<i class="fa fa-sitemap"></i>
</button> -->
<button type="button" class="typeRefresh" data-id="refreshTree" data-type="classification" title="Refresh">
<i class="fa fa-refresh"></i> <i class="fa fa-refresh"></i>
</button> </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> <i class="fa fa-toggle-off"></i>
</button> </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"> <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"> <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> <i class="fa fa-ellipsis-v"></i>
...@@ -45,11 +32,16 @@ ...@@ -45,11 +32,16 @@
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <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 data-id="groupOrFlatTreeView" data-type="classification"> <i class="fa fa-list-ul"></i><span>Show flat tree</span>
</li> </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 data-id="createTag" data-type="classification"> <i class="fa fa-plus"></i><span>Create Classification</span>
</li> </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> </button>
</div> </div>
</div> </div>
......
dashboardv3/public/js/views/search/tree/ClassificationTreeLayoutView.js
...@@ -47,8 +47,11 @@ define([ ...@@ -47,8 +47,11 @@ define([
showEmptyClassifications: '[data-id="showEmptyClassifications"]', showEmptyClassifications: '[data-id="showEmptyClassifications"]',
// Create // 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() { templateHelpers: function() {
return { return {
...@@ -88,6 +91,34 @@ define([ ...@@ -88,6 +91,34 @@ define([
that.ui[type + "SearchTree"].jstree(true).destroy(); that.ui[type + "SearchTree"].jstree(true).destroy();
that.renderClassificationTree(); 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; return events;
}, },
...@@ -117,6 +148,7 @@ define([ ...@@ -117,6 +148,7 @@ define([
onRender: function() { onRender: function() {
this.renderClassificationTree(); this.renderClassificationTree();
this.createClassificationAction(); this.createClassificationAction();
this.ui.clearWildCard.addClass('hide-icon');
}, },
bindEvents: function() { bindEvents: function() {
var that = this; var that = this;
...@@ -153,6 +185,25 @@ define([ ...@@ -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) { onSearchClassificationNode: function(showEmptyTag) {
// on tree search by text, searches for all classification node, called by searchfilterBrowserLayoutView.js // on tree search by text, searches for all classification node, called by searchfilterBrowserLayoutView.js
this.isEmptyClassification = showEmptyTag; this.isEmptyClassification = showEmptyTag;
...@@ -217,6 +268,7 @@ define([ ...@@ -217,6 +268,7 @@ define([
return; return;
} }
var name, type, selectedNodeId, that = this; var name, type, selectedNodeId, that = this;
that.ui.wildCardValue.val("");
if (options) { if (options) {
name = options.node.original.name; name = options.node.original.name;
selectedNodeId = options.node.id; selectedNodeId = options.node.id;
......
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