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 57b52a2 ATLAS-3470: UI : Search completes late because of loading
entity icons
57b52a2 is described below
commit 57b52a2921f5d8fc06a4d4ac27eaf2259fc96df8
Author: kevalbhatt <[email protected]>
AuthorDate: Wed Oct 16 17:51:19 2019 +0530
ATLAS-3470: UI : Search completes late because of loading entity icons
Signed-off-by: Sarath Subramanian <[email protected]>
---
dashboardv2/public/css/scss/loader.scss | 36 ++++++++++++++++++++++
dashboardv2/public/css/scss/theme.scss | 17 ++++++++--
dashboardv2/public/js/utils/Helper.js | 16 +++++++---
.../js/views/search/SearchResultLayoutView.js | 13 +++-----
dashboardv2/public/js/views/site/Header.js | 5 +--
dashboardv3/public/css/scss/loader.scss | 36 ++++++++++++++++++++++
dashboardv3/public/css/scss/theme.scss | 11 +++++++
dashboardv3/public/js/utils/Helper.js | 15 ++++++---
.../js/views/search/GlobalSearchLayoutView.js | 5 ++-
.../js/views/search/SearchResultLayoutView.js | 13 +++-----
10 files changed, 137 insertions(+), 30 deletions(-)
diff --git a/dashboardv2/public/css/scss/loader.scss
b/dashboardv2/public/css/scss/loader.scss
index 65b58ff..cf137fb 100644
--- a/dashboardv2/public/css/scss/loader.scss
+++ b/dashboardv2/public/css/scss/loader.scss
@@ -26,6 +26,7 @@
//Instead of the line below you could use @include transform($scale,
$rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: rotate(0deg);
}
+
100% {
//Instead of the line below you could use @include transform($scale,
$rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: rotate(359deg);
@@ -37,6 +38,7 @@
//Instead of the line below you could use @include transform($scale,
$rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: rotate(0deg);
}
+
100% {
//Instead of the line below you could use @include transform($scale,
$rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: rotate(359deg);
@@ -116,19 +118,53 @@
left: -200px;
width: 30%;
}
+
50% {
width: 30%;
}
+
70% {
width: 70%;
}
+
80% {
left: 50%;
}
+
95% {
left: 120%;
}
+
to {
left: 100%;
}
+}
+
+.searchTableLogoLoader {
+ width: 20px;
+ -webkit-animation-duration: 1.5s;
+ animation-duration: 1.5s;
+ -webkit-animation-fill-mode: forwards;
+ animation-fill-mode: forwards;
+ -webkit-animation-iteration-count: infinite;
+ animation-iteration-count: infinite;
+ -webkit-animation-timing-function: linear;
+ animation-timing-function: linear;
+ -webkit-animation-name: placeHolderLoader;
+ animation-name: placeHolderLoader;
+ background: #f6f7f8;
+ background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee
33%);
+ background-size: 700px 10px;
+ border-radius: 8px;
+
+}
+
+@keyframes placeHolderLoader {
+ 0% {
+ background-position: -468px 0;
+ }
+
+ 100% {
+ background-position: 468px 0;
+ }
}
\ No newline at end of file
diff --git a/dashboardv2/public/css/scss/theme.scss
b/dashboardv2/public/css/scss/theme.scss
index 1b24407..901d693 100644
--- a/dashboardv2/public/css/scss/theme.scss
+++ b/dashboardv2/public/css/scss/theme.scss
@@ -462,7 +462,7 @@ hr[size="10"] {
overflow-x: hidden;
.ui-autocomplete-category {
- padding: 10px;
+ padding: 5px 15px;
color: #acacac;
text-transform: capitalize;
}
@@ -477,7 +477,7 @@ hr[size="10"] {
}
.ui-menu-item {
- padding: 5px 2px;
+ padding: 2px 2px;
color: $color_ironside_gray_approx;
&.with-icon {
@@ -505,7 +505,7 @@ hr[size="10"] {
a,
span {
- padding: 10px;
+ padding: 6px 10px;
display: block;
color: inherit !important;
}
@@ -522,6 +522,17 @@ td.searchTableName:hover {
}
}
+.globalsearchImgItem.isIncomplete {
+ display: inline-block !important;
+ position: relative;
+
+ i.fa {
+ left: 10px;
+ top: 7px;
+ font-size: 12px;
+ }
+}
+
.isIncomplete {
&.show {
img {
diff --git a/dashboardv2/public/js/utils/Helper.js
b/dashboardv2/public/js/utils/Helper.js
index 2b0f1e8..0ce8783 100644
--- a/dashboardv2/public/js/utils/Helper.js
+++ b/dashboardv2/public/js/utils/Helper.js
@@ -77,6 +77,7 @@ define(['require',
} else if (isPopOverEl.$tip) {
$('.popover').not(isPopOverEl.$tip).popover('hide');
}
+ $(".tooltip").tooltip("hide");
}
});
$('body').on('hidden.bs.popover', function(e) {
@@ -243,10 +244,17 @@ define(['require',
});
// For adding tooltip globally
- $('body').tooltip({
- selector: '[title]',
- placement: 'bottom',
- container: 'body'
+ $("body").on('mouseenter', '.select2-selection__choice', function() {
+ $(this).attr("title", "");
});
+ if ($('body').tooltip) {
+ $('body').tooltip({
+ selector: '[title]:not(".select2-selection__choice")',
+ placement: function() {
+ return this.$element.attr("data-placement") || "bottom";
+ },
+ container: 'body'
+ });
+ }
})
\ No newline at end of file
diff --git a/dashboardv2/public/js/views/search/SearchResultLayoutView.js
b/dashboardv2/public/js/views/search/SearchResultLayoutView.js
index e997d6b..5d33d37 100644
--- a/dashboardv2/public/js/views/search/SearchResultLayoutView.js
+++ b/dashboardv2/public/js/views/search/SearchResultLayoutView.js
@@ -683,8 +683,7 @@ define(['require',
returnImgUrl = null;
$.ajax({
"url": imagePath,
- "method": "get",
- "async": false,
+ "method": "get"
})
.always(function(data, status, xhr) {
if (data.status == 404) {
@@ -693,19 +692,17 @@ define(['require',
});
} else if (data) {
returnImgUrl = imagePath;
+ that.$("img[data-imgGuid='" +
obj.guid + "']").removeClass("searchTableLogoLoader").attr("src", imagePath);
}
});
- return returnImgUrl;
}
- var imgPath = getImageData({ imagePath:
Utils.getEntityIconPath({ entityData: obj }) }),
- img = "",
+ var img = "",
isIncompleteClass = "isIncomplete
search-result-page";
if (obj.isIncomplete === true) {
isIncompleteClass += " show";
}
- if (imgPath) {
- img = "<div class='" + isIncompleteClass +
"'><img src='" + imgPath + "'><i class='fa fa-hourglass-half'></i></div>";
- }
+ img = "<div class='" + isIncompleteClass + "'><img
data-imgGuid='" + obj.guid + "' class='searchTableLogoLoader'><i class='fa
fa-hourglass-half'></i></div>";
+ getImageData({ imagePath:
Utils.getEntityIconPath({ entityData: obj }) });
return (img + nameHtml);
}
})
diff --git a/dashboardv2/public/js/views/site/Header.js
b/dashboardv2/public/js/views/site/Header.js
index 5a1e7bc..f6bb8d0 100644
--- a/dashboardv2/public/js/views/site/Header.js
+++ b/dashboardv2/public/js/views/site/Header.js
@@ -71,7 +71,7 @@ define(['require',
};
events['click ' + this.ui.signOut] = function() {
- Utils.localStorage.setValue("atlas_ui","classic");
+ Utils.localStorage.setValue("atlas_ui", "classic");
var path = Utils.getBaseUrl(window.location.pathname);
window.location = path + "/logout.html";
};
@@ -253,9 +253,10 @@ define(['require',
var options = {},
table = '';
options.entityData = item;
- var img = $('<img src="' +
Utils.getEntityIconPath(options) + '">').on('error', function(error, s) {
+ var imgEl = $('<img src="' +
Utils.getEntityIconPath(options) + '">').on("error", function(error, s) {
this.src =
Utils.getEntityIconPath(_.extend(options, { errorUrl: this.src }));
});
+ var img = $('<div
class="globalsearchImgItem isIncomplete ' + (item.isIncomplete ? "show" : "") +
'"><i class="fa fa-hourglass-half"></i><div>').prepend(imgEl);
var span = $("<span>" +
(getHighlightedTerm(item.itemText)) + "</span>")
.prepend(img);
li = $("<li class='with-icon'>")
diff --git a/dashboardv3/public/css/scss/loader.scss
b/dashboardv3/public/css/scss/loader.scss
index 55a3a42..09e1d10 100644
--- a/dashboardv3/public/css/scss/loader.scss
+++ b/dashboardv3/public/css/scss/loader.scss
@@ -26,6 +26,7 @@
//Instead of the line below you could use @include transform($scale,
$rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: rotate(0deg);
}
+
100% {
//Instead of the line below you could use @include transform($scale,
$rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: rotate(359deg);
@@ -37,6 +38,7 @@
//Instead of the line below you could use @include transform($scale,
$rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: rotate(0deg);
}
+
100% {
//Instead of the line below you could use @include transform($scale,
$rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
transform: rotate(359deg);
@@ -113,19 +115,53 @@
left: -200px;
width: 30%;
}
+
50% {
width: 30%;
}
+
70% {
width: 70%;
}
+
80% {
left: 50%;
}
+
95% {
left: 120%;
}
+
to {
left: 100%;
}
+}
+
+.searchTableLogoLoader {
+ width: 20px;
+ -webkit-animation-duration: 1.5s;
+ animation-duration: 1.5s;
+ -webkit-animation-fill-mode: forwards;
+ animation-fill-mode: forwards;
+ -webkit-animation-iteration-count: infinite;
+ animation-iteration-count: infinite;
+ -webkit-animation-timing-function: linear;
+ animation-timing-function: linear;
+ -webkit-animation-name: placeHolderLoader;
+ animation-name: placeHolderLoader;
+ background: #f6f7f8;
+ background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee
33%);
+ background-size: 700px 10px;
+ border-radius: 8px;
+
+}
+
+@keyframes placeHolderLoader {
+ 0% {
+ background-position: -468px 0;
+ }
+
+ 100% {
+ background-position: 468px 0;
+ }
}
\ No newline at end of file
diff --git a/dashboardv3/public/css/scss/theme.scss
b/dashboardv3/public/css/scss/theme.scss
index 34df2c3..344e73f 100644
--- a/dashboardv3/public/css/scss/theme.scss
+++ b/dashboardv3/public/css/scss/theme.scss
@@ -703,6 +703,17 @@ td.searchTableName:hover {
}
}
+.globalsearchImgItem.isIncomplete {
+ display: inline-block !important;
+ position: relative;
+
+ i.fa {
+ left: 10px;
+ top: 7px;
+ font-size: 12px;
+ }
+}
+
.isIncomplete {
&.show {
img {
diff --git a/dashboardv3/public/js/utils/Helper.js
b/dashboardv3/public/js/utils/Helper.js
index 0807d10..508b8a0 100644
--- a/dashboardv3/public/js/utils/Helper.js
+++ b/dashboardv3/public/js/utils/Helper.js
@@ -262,10 +262,17 @@ define(['require',
});
// For adding tooltip globally
- $('body').tooltip({
- selector: '[title]',
- placement: 'bottom',
- container: 'body'
+ $("body").on('mouseenter', '.select2-selection__choice', function() {
+ $(this).attr("title", "");
});
+ if ($('body').tooltip) {
+ $('body').tooltip({
+ selector: '[title]:not(".select2-selection__choice")',
+ placement: function() {
+ return this.$element.attr("data-placement") || "bottom";
+ },
+ container: 'body'
+ });
+ }
})
\ No newline at end of file
diff --git a/dashboardv3/public/js/views/search/GlobalSearchLayoutView.js
b/dashboardv3/public/js/views/search/GlobalSearchLayoutView.js
index 6708fc7..92670b5 100644
--- a/dashboardv3/public/js/views/search/GlobalSearchLayoutView.js
+++ b/dashboardv3/public/js/views/search/GlobalSearchLayoutView.js
@@ -295,9 +295,12 @@ define(["require",
var options = {},
table = "";
options.entityData = item;
- var img = $('<img src="' +
Utils.getEntityIconPath(options) + '">').on("error", function(error, s) {
+ var imgEl = $('<img src="' +
Utils.getEntityIconPath(options) + '">').on("error", function(error, s) {
this.src =
Utils.getEntityIconPath(_.extend(options, { errorUrl: this.src }));
});
+
+ var img = $('<div
class="globalsearchImgItem isIncomplete ' + (item.isIncomplete ? "show" : "") +
'"><i class="fa fa-hourglass-half"></i><div>').prepend(imgEl);
+
var span = $("<span>" +
getHighlightedTerm(item.itemText) + "</span>").prepend(img);
li = $("<li
class='with-icon'>").append(span);
} else {
diff --git a/dashboardv3/public/js/views/search/SearchResultLayoutView.js
b/dashboardv3/public/js/views/search/SearchResultLayoutView.js
index b4e2290..45b3f75 100644
--- a/dashboardv3/public/js/views/search/SearchResultLayoutView.js
+++ b/dashboardv3/public/js/views/search/SearchResultLayoutView.js
@@ -695,8 +695,7 @@ define(['require',
returnImgUrl = null;
$.ajax({
"url": imagePath,
- "method": "get",
- "async": false,
+ "method": "get"
})
.always(function(data, status, xhr) {
if (data.status == 404) {
@@ -705,19 +704,17 @@ define(['require',
});
} else if (data) {
returnImgUrl = imagePath;
+ that.$("img[data-imgGuid='" +
obj.guid + "']").removeClass("searchTableLogoLoader").attr("src", imagePath);
}
});
- return returnImgUrl;
}
- var imgPath = getImageData({ imagePath:
Utils.getEntityIconPath({ entityData: obj }) }),
- img = "",
+ var img = "",
isIncompleteClass = "isIncomplete
search-result-page";
if (obj.isIncomplete === true) {
isIncompleteClass += " show";
}
- if (imgPath) {
- img = "<div class='" + isIncompleteClass +
"'><img src='" + imgPath + "'><i class='fa fa-hourglass-half'></i></div>";
- }
+ img = "<div class='" + isIncompleteClass + "'><img
data-imgGuid='" + obj.guid + "' class='searchTableLogoLoader'><i class='fa
fa-hourglass-half'></i></div>";
+ getImageData({ imagePath:
Utils.getEntityIconPath({ entityData: obj }) });
return (img + nameHtml);
}
})
