Skip to content

A
atlas
Commit 66390fe8 by kevalbhatt
Options

ATLAS-3294 : UI: Quick-search UI visual appearance enhancement

parent 569d5596
Showing with 99 additions and 50 deletions
dashboardv2/public/css/scss/common.scss
...@@ -88,6 +88,16 @@ ...@@ -88,6 +88,16 @@
.details-backbutton { .details-backbutton {
display: table-cell !important; display: table-cell !important;
} }
.searched-term-highlight {
background-color: #eeee31;
transition: background-color 4s, font-weight 2s;
&.bold {
background-color: transparent;
font-weight: bold;
}
}
} }
pre { pre {
......
dashboardv2/public/css/scss/theme.scss
...@@ -45,12 +45,6 @@ header.atlas-header { ...@@ -45,12 +45,6 @@ header.atlas-header {
padding: 3px 2px; padding: 3px 2px;
position: relative; position: relative;
transition: width 0.3s !important; transition: width 0.3s !important;
.global-search-container {
width: input {
width: 100%;
}
}
} }
} }
...@@ -499,6 +493,13 @@ hr[size="10"] { ...@@ -499,6 +493,13 @@ hr[size="10"] {
} }
} }
span.searched-term {
display: inline-block;
padding: 0;
font-weight: bold;
color: $black !important;
}
.ui-state-active { .ui-state-active {
margin: 0px; margin: 0px;
border: none; border: none;
......
dashboardv2/public/js/utils/CommonViewFunction.js
...@@ -80,15 +80,29 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum ...@@ -80,15 +80,29 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum
attributeDefs = options.attributeDefs, attributeDefs = options.attributeDefs,
formatIntVal = options.formatIntVal, formatIntVal = options.formatIntVal,
showListCount = options.showListCount || true, showListCount = options.showListCount || true,
highlightString = options.highlightString,
numberFormat = options.numberFormat || _.numberFormatWithComa; numberFormat = options.numberFormat || _.numberFormatWithComa;
var table = "", var table = "",
getHighlightedString = function(resultStr) {
if (highlightString && highlightString.length) {
try {
return resultStr.replace(new RegExp(highlightString, "gi"), function(foundStr) {
return "<span class='searched-term-highlight'>" + foundStr + "</span>"
});
} catch (error) {
return resultStr;
}
} else {
return resultStr;
}
},
getValue = function(val) { getValue = function(val) {
if (val) { if (val) {
if ((_.isNumber(val) || !_.isNaN(parseInt(val))) && formatIntVal) { if ((_.isNumber(val) || !_.isNaN(parseInt(val))) && formatIntVal) {
return numberFormat(val); return numberFormat(val);
} else { } else {
return val; return getHighlightedString(val);
} }
} else { } else {
return "N/A"; return "N/A";
...@@ -180,9 +194,9 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum ...@@ -180,9 +194,9 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum
} }
} }
}); });
valueOfArray.push(Utils.JSONPrettyPrint(newAttributesList)); valueOfArray.push(Utils.JSONPrettyPrint(newAttributesList, getValue));
} else { } else {
valueOfArray.push(Utils.JSONPrettyPrint(attributesList)); valueOfArray.push(Utils.JSONPrettyPrint(attributesList, getValue));
} }
} }
if (id && inputOutputField) { if (id && inputOutputField) {
...@@ -193,7 +207,7 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum ...@@ -193,7 +207,7 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum
fetchInputOutputValue(fetchId, defEntity); fetchInputOutputValue(fetchId, defEntity);
tempLink += '<div data-id="' + fetchId + '"><div class="value-loader"></div></div>'; tempLink += '<div data-id="' + fetchId + '"><div class="value-loader"></div></div>';
} else { } else {
tempLink += '<a href="#!/detailPage/' + id + '">' + name + '</a>' tempLink += '<a href="#!/detailPage/' + id + '">' + getValue(name) + '</a>'
} }
} }
if (readOnly) { if (readOnly) {
...@@ -247,14 +261,14 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum ...@@ -247,14 +261,14 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum
if (_.isObject(valueObject[key])) { if (_.isObject(valueObject[key])) {
val = keyValue val = keyValue
} else if (Utils.isUrl(keyValue)) { } else if (Utils.isUrl(keyValue)) {
val = '<a target="_blank" class="blue-link" href="' + keyValue + '">' + keyValue + '</a>'; val = '<a target="_blank" class="blue-link" href="' + keyValue + '">' + getValue(keyValue) + '</a>';
} else if (key === 'guid' || key === "__guid") { } else if (key === 'guid' || key === "__guid") {
val = '<a title="' + key + '" href="#!/detailPage/' + keyValue + '">' + keyValue + '</a>'; val = '<a title="' + key + '" href="#!/detailPage/' + keyValue + '">' + getValue(keyValue) + '</a>';
} else { } else {
val = _.escape(keyValue); val = getValue(_.escape(keyValue));
} }
if (isTable) { if (isTable) {
var value = getValue(val), var value = val,
appendClass = (value == "N/A" ? "hide-row" : ""), appendClass = (value == "N/A" ? "hide-row" : ""),
htmlTag = '<div class="scroll-y">' + value + '</div>'; htmlTag = '<div class="scroll-y">' + value + '</div>';
if (_.isObject(valueObject[key]) && !_.isEmpty(valueObject[key])) { if (_.isObject(valueObject[key]) && !_.isEmpty(valueObject[key])) {
......
dashboardv2/public/js/utils/Utils.js
...@@ -816,7 +816,7 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'utils/Enums', ...@@ -816,7 +816,7 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'utils/Enums',
return regexp.test(url); return regexp.test(url);
} }
Utils.JSONPrettyPrint = function(obj) { Utils.JSONPrettyPrint = function(obj, getValue) {
var replacer = function(match, pIndent, pKey, pVal, pEnd) { var replacer = function(match, pIndent, pKey, pVal, pEnd) {
var key = '<span class=json-key>'; var key = '<span class=json-key>';
var val = '<span class=json-value>'; var val = '<span class=json-value>';
...@@ -825,7 +825,7 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'utils/Enums', ...@@ -825,7 +825,7 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'utils/Enums',
if (pKey) if (pKey)
r = r + key + pKey.replace(/[": ]/g, '') + '</span>: '; r = r + key + pKey.replace(/[": ]/g, '') + '</span>: ';
if (pVal) if (pVal)
r = r + (pVal[0] == '"' ? str : val) + pVal + '</span>'; r = r + (pVal[0] == '"' ? str : val) + getValue(pVal) + '</span>';
return r + (pEnd || ''); return r + (pEnd || '');
}, },
jsonLine = /^( *)("[\w]+": )?("[^"]*"|[\w.+-]*)?([,[{])?$/mg; jsonLine = /^( *)("[\w]+": )?("[^"]*"|[\w.+-]*)?([,[{])?$/mg;
......
dashboardv2/public/js/views/entity/EntityDetailTableLayoutView.js
...@@ -64,12 +64,22 @@ define(['require', ...@@ -64,12 +64,22 @@ define(['require',
this.entityTableGenerate(); this.entityTableGenerate();
}, },
entityTableGenerate: function() { entityTableGenerate: function() {
var table = CommonViewFunction.propertyTable({ scope: this, valueObject: this.entity.attributes, attributeDefs: this.attributeDefs }); var that = this,
highlightString = $(".atlas-header .global-search-container input.global-search").val(),
table = CommonViewFunction.propertyTable({
scope: this,
valueObject: this.entity.attributes,
attributeDefs: this.attributeDefs,
highlightString: highlightString
});
this.ui.detailValue.append(table); this.ui.detailValue.append(table);
Utils.togglePropertyRelationshipTableEmptyValues({ Utils.togglePropertyRelationshipTableEmptyValues({
"inputType": this.ui.noValueToggle, "inputType": this.ui.noValueToggle,
"tableEl": this.ui.detailValue "tableEl": this.ui.detailValue
}); });
setTimeout(function() {
that.$el.find(".searched-term-highlight").addClass("bold");
}, 5000)
} }
}); });
return EntityDetailTableLayoutView; return EntityDetailTableLayoutView;
......
dashboardv2/public/js/views/graph/LineageLayoutView.js
...@@ -228,6 +228,9 @@ define(['require', ...@@ -228,6 +228,9 @@ define(['require',
skipDefaultError: true, skipDefaultError: true,
queryParam: queryParam, queryParam: queryParam,
success: function(data) { success: function(data) {
if (that.isDestroyed) {
return;
}
if (data.relations.length) { if (data.relations.length) {
that.lineageData = $.extend(true, {}, data); that.lineageData = $.extend(true, {}, data);
that.relationshipMap = that.crateLineageRelationshipHashMap(data); that.relationshipMap = that.crateLineageRelationshipHashMap(data);
...@@ -864,7 +867,7 @@ define(['require', ...@@ -864,7 +867,7 @@ define(['require',
typeStr += '<option value="' + obj.guid + '">' + obj.attributes.name + '</option>'; typeStr += '<option value="' + obj.guid + '">' + obj.attributes.name + '</option>';
}); });
} }
that.ui.lineageTypeSearch.html(typeStr); this.ui.lineageTypeSearch.html(typeStr);
this.initilizelineageTypeSearch(); this.initilizelineageTypeSearch();
}, },
initilizelineageTypeSearch: function() { initilizelineageTypeSearch: function() {
......
dashboardv2/public/js/views/site/Header.js
...@@ -76,7 +76,7 @@ define(['require', ...@@ -76,7 +76,7 @@ define(['require',
}, },
setSearchBoxWidth: function(options) { setSearchBoxWidth: function(options) {
var atlasHeaderWidth = this.$el.find(".atlas-header").width(), var atlasHeaderWidth = this.$el.find(".atlas-header").width(),
minusWidth = Utils.getUrlState.isDetailPage() ? 400 : 250; minusWidth = Utils.getUrlState.isDetailPage() ? 413 : 263;
if (options && options.updateWidth) { if (options && options.updateWidth) {
atlasHeaderWidth = options.updateWidth(atlasHeaderWidth); atlasHeaderWidth = options.updateWidth(atlasHeaderWidth);
} }
...@@ -87,7 +87,7 @@ define(['require', ...@@ -87,7 +87,7 @@ define(['require',
bindEvent: function() { bindEvent: function() {
var that = this; var that = this;
$(window).resize(function() { $(window).resize(function() {
that.setSearchBoxWidth() that.setSearchBoxWidth();
}); });
}, },
onRender: function() { onRender: function() {
...@@ -103,16 +103,20 @@ define(['require', ...@@ -103,16 +103,20 @@ define(['require',
onBeforeDestroy: function() { onBeforeDestroy: function() {
this.ui.globalSearch.atlasAutoComplete("destroy"); this.ui.globalSearch.atlasAutoComplete("destroy");
}, },
manualRender: function() {
this.setSearchBoxWidth();
},
fetchSearchData: function(options) { fetchSearchData: function(options) {
var that = this, var that = this,
request = options.request, request = options.request,
response = options.response, response = options.response,
term = request.term, term = request.term,
data = {},
sendResponse = function() { sendResponse = function() {
var query = that.cache[term].query, var query = data.query,
suggestions = that.cache[term].suggestions; suggestions = data.suggestions;
if (query !== undefined && suggestions !== undefined) { if (query !== undefined && suggestions !== undefined) {
response(that.cache[term]); response(data);
} }
}; };
$.ajax({ $.ajax({
...@@ -124,9 +128,9 @@ define(['require', ...@@ -124,9 +128,9 @@ define(['require',
"offset": 0 "offset": 0
}, },
cache: true, cache: true,
success: function(data) { success: function(response) {
var data = data.searchResults.entities || []; var rData = response.searchResults.entities || [];
that.cache[term] = _.extend({}, that.cache[term], { query: { category: "entities", data: data, order: 1 } }); data.query = { category: "entities", data: rData, order: 1 };
sendResponse(); sendResponse();
} }
}); });
...@@ -138,10 +142,10 @@ define(['require', ...@@ -138,10 +142,10 @@ define(['require',
"prefixString": term "prefixString": term
}, },
cache: true, cache: true,
success: function(data) { success: function(response) {
var data = data.suggestions || []; var rData = response.suggestions || [];
that.cache[term] = _.extend({}, that.cache[term], { suggestions: { category: "suggestions", data: data, order: 2 } }); data.suggestions = { category: "suggestions", data: rData, order: 2 };
sendResponse(data); sendResponse();
} }
}); });
}, },
...@@ -152,9 +156,16 @@ define(['require', ...@@ -152,9 +156,16 @@ define(['require',
return str; return str;
} }
}, },
triggerBuasicSearch: function(query) {
Utils.setUrl({
url: '#!/search/searchResult?query=' + encodeURIComponent(query) + '&searchType=basic',
mergeBrowserUrl: false,
trigger: true,
updateTabState: true
});
},
initializeGlobalSearch: function() { initializeGlobalSearch: function() {
var that = this; var that = this;
this.cache = {};
this.ui.globalSearch.atlasAutoComplete({ this.ui.globalSearch.atlasAutoComplete({
minLength: 1, minLength: 1,
autoFocus: false, autoFocus: false,
...@@ -171,13 +182,11 @@ define(['require', ...@@ -171,13 +182,11 @@ define(['require',
var item = ui && ui.item; var item = ui && ui.item;
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
var $el = $(this);
if (_.isString(item)) { if (_.isString(item)) {
var $el = $(this);
$el.val(item); $el.val(item);
$el.data("valSelected", true); $el.data("valSelected", true);
setTimeout(function() { that.triggerBuasicSearch(item);
$el.atlasAutoComplete("search");
}, 10);
} else if (_.isObject(item) && item.guid) { } else if (_.isObject(item) && item.guid) {
Utils.setUrl({ Utils.setUrl({
url: '#!/detailPage/' + item.guid, url: '#!/detailPage/' + item.guid,
...@@ -185,14 +194,10 @@ define(['require', ...@@ -185,14 +194,10 @@ define(['require',
trigger: true trigger: true
}); });
} }
$el.blur();
return true; return true;
}, },
source: function(request, response) { source: function(request, response) {
var term = request.term;
if (that.cache && that.cache[term]) {
response(that.cache[term]);
return;
}
that.fetchSearchData({ that.fetchSearchData({
request: request, request: request,
response: response response: response
...@@ -207,19 +212,26 @@ define(['require', ...@@ -207,19 +212,26 @@ define(['require',
that.ui.clearGlobalSearch.addClass("in"); that.ui.clearGlobalSearch.addClass("in");
if (event.keyCode == 13) { if (event.keyCode == 13) {
if ($(this).data("valSelected") !== true) { if ($(this).data("valSelected") !== true) {
Utils.setUrl({ that.triggerBuasicSearch(that.getSearchString($(this).val()));
url: '#!/search/searchResult?query=' + encodeURIComponent(that.getSearchString($(this).val())) + '&searchType=basic',
mergeBrowserUrl: false,
trigger: true
});
} else { } else {
$(this).data("valSelected", false); $(this).data("valSelected", false);
} }
} }
} }
}).atlasAutoComplete("instance")._renderItem = function(ul, searchItem) { }).atlasAutoComplete("instance")._renderItem = function(ul, searchItem) {
if (searchItem) { if (searchItem) {
var data = searchItem.data; var data = searchItem.data,
searchTerm = this.term,
getHighlightedTerm = function(resultStr) {
try {
return resultStr.replace(new RegExp(searchTerm, "gi"), function(foundStr) {
return "<span class='searched-term'>" + foundStr + "</span>";
});
} catch (error) {
return resultStr;
}
}
if (data) { if (data) {
if (data.length == 0) { if (data.length == 0) {
return $("<li class='empty'></li>") return $("<li class='empty'></li>")
...@@ -237,16 +249,15 @@ define(['require', ...@@ -237,16 +249,15 @@ define(['require',
var img = $('<img src="' + Utils.getEntityIconPath(options) + '">').on('error', function(error, s) { var img = $('<img src="' + Utils.getEntityIconPath(options) + '">').on('error', function(error, s) {
this.src = Utils.getEntityIconPath(_.extend(options, { errorUrl: this.src })); this.src = Utils.getEntityIconPath(_.extend(options, { errorUrl: this.src }));
}); });
var span = $("<span>" + item.itemText + "</span>") var span = $("<span>" + (getHighlightedTerm(item.itemText)) + "</span>")
.prepend(img); .prepend(img);
li = $("<li class='with-icon'>") li = $("<li class='with-icon'>")
.append(span); .append(span);
li.data("ui-autocomplete-item", item);
} else { } else {
li = $("<li>") li = $("<li>")
.append("<span>" + item + "</span>") .append("<span>" + (getHighlightedTerm(item)) + "</span>");
li.data("ui-autocomplete-item", item);
} }
li.data("ui-autocomplete-item", item);
if (searchItem.category) { if (searchItem.category) {
items.push(li.attr("aria-label", searchItem.category + " : " + (_.isObject(item) ? item.itemText : item))); items.push(li.attr("aria-label", searchItem.category + " : " + (_.isObject(item) ? item.itemText : item)));
} }
......
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