This is an automated email from the ASF dual-hosted git repository. sarath pushed a commit to branch branch-2.0 in repository https://gitbox.apache.org/repos/asf/atlas.git
commit 8f056d9eec3e97c72d8e27a4f9bb503e56af527f Author: kevalbhatt <[email protected]> AuthorDate: Thu Oct 10 11:27:59 2019 -0700 ATLAS-3455 :UI: Change shell icon and add shell icon in search table (cherry picked from commit a2de206015949b9b19e38058234a42d42ff0f0a1) --- dashboardv2/public/css/scss/graph.scss | 27 -------- dashboardv2/public/css/scss/table.scss | 75 ++++++++++++++++++++ dashboardv2/public/css/scss/theme.scss | 80 +++++++++++++++++---- .../js/templates/graph/LineageLayoutView_tmpl.html | 2 +- .../templates/search/AdvancedSearchInfo_tmpl.html | 2 +- .../public/js/views/graph/LineageLayoutView.js | 5 +- .../js/views/search/SearchResultLayoutView.js | 30 +++++++- dashboardv3/public/css/scss/graph.scss | 27 -------- dashboardv3/public/css/scss/theme.scss | 81 ++++++++++++++++++---- .../js/templates/graph/LineageLayoutView_tmpl.html | 2 +- .../public/js/views/graph/LineageLayoutView.js | 5 +- .../js/views/search/SearchResultLayoutView.js | 8 ++- 12 files changed, 250 insertions(+), 94 deletions(-) diff --git a/dashboardv2/public/css/scss/graph.scss b/dashboardv2/public/css/scss/graph.scss index 683fdd1..1225751 100644 --- a/dashboardv2/public/css/scss/graph.scss +++ b/dashboardv2/public/css/scss/graph.scss @@ -450,33 +450,6 @@ span#zoom_in { } } -.isIncomplete { - - foreignObject { - display: none; - } - - &.show { - image { - opacity: 0.2; - animation: blink 2.5s infinite; - } - - foreignObject { - display: block; - } - } - - i.fa-refresh { - - text-align: center; - margin-top: 33%; - font-size: 15px; - } - -} - - @-webkit-keyframes blink { from { opacity: 0.2; diff --git a/dashboardv2/public/css/scss/table.scss b/dashboardv2/public/css/scss/table.scss index 358d60a..f14ebfb 100644 --- a/dashboardv2/public/css/scss/table.scss +++ b/dashboardv2/public/css/scss/table.scss @@ -168,4 +168,79 @@ tr.empty { .toggleList.semi-collapsed div:nth-child(n+2) { display: none; +} + +.table-quickMenu { + border: thin $lightGrey solid; + border-collapse: separate; + border-radius: 6px; + box-shadow: 0px 0px 4px #d8d8d8; + overflow: scroll !important; + max-height: 500px; + width: 100%; + + .resizeHandler { + &.grid-draggable { + background-color: $color_jungle_green_approx !important; + } + + &:hover { + border-left: 1px solid #d2d2d2; + } + } + + >thead>tr>th { + border-width: thin; + border-color: $color_jungle_green_approx; + border-bottom-style: solid; + box-shadow: none; + padding: 12px 15px !important; + background-color: transparent; + text-align: left; + font-weight: 800; + border-top: 0; + font-size: 14px; + letter-spacing: 0.25px; + color: rgba(52, 52, 52, 1); + } + + >tbody>tr>td { + border-color: $color_gallery_approx; + color: #333333; + font-weight: 100; + padding: 9px 15px; + } +} + +td { + + div.scroll-y, + pre.scroll-y { + max-height: 200px; + overflow-y: auto; + word-break: break-word; + } + + &.searchTableName { + &:hover { + img { + transform: scale(1.5); + transform-origin: 100% 50%; + transition: transform 0.2s; + } + } + + a { + max-width: calc(100% - 36px); + overflow: hidden; + float: left; + text-overflow: ellipsis; + } + + img { + height: 20px; + margin: 0px 5px; + float: left; + } + } } \ No newline at end of file diff --git a/dashboardv2/public/css/scss/theme.scss b/dashboardv2/public/css/scss/theme.scss index c93d7d0..1b24407 100644 --- a/dashboardv2/public/css/scss/theme.scss +++ b/dashboardv2/public/css/scss/theme.scss @@ -512,27 +512,77 @@ hr[size="10"] { } } -.entityDetail { +td.searchTableName:hover { .isIncomplete { - &.show { - img { - opacity: .2; - animation: blink 2.5s infinite; + &.show.search-result-page { + i { + left: 7px; } + } + } +} + +.isIncomplete { + &.show { + img { + opacity: .2; + //animation: blink 2.5s infinite; + } + + i.fa { + display: block; + } + + .entity-icon-box { + background: none; + + i.fa { + top: 27px; + font-size: 18px; + } + } - i.fa.fa-refresh { - display: block; + + foreignObject { + display: block; + + i.fa { + font-size: 15px; + top: 17px; + left: 18.5px; } } - i.fa.fa-refresh { - display: none; - text-align: center; - font-size: 20px; - top: 0; - position: absolute; - z-index: 999; - left: calc(50% - 8px); + image { + opacity: 0.2; + //animation: blink 2.5s infinite; } + + &.search-result-page { + position: relative; + + i { + left: 13px; + font-size: 9px; + top: 5px; + } + + } + + } + + foreignObject { + display: none; + } + + i.fa { + color: #898989; + display: none; + text-align: center; + font-size: 16px; + top: 0; + position: absolute; + z-index: 1; + left: calc(50% - 8px); } } \ No newline at end of file diff --git a/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html b/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html index dd45cc8..f14abba 100644 --- a/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html +++ b/dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html @@ -139,7 +139,7 @@ </div> <div class="legends pull-left" style="height: 25px; padding: 2px;"> <span style="margin-right: 8px; color:#fb4200;"><i class="fa fa-circle-o fa-fw"></i>Current Entity</span> - <span style="margin-right: 8px;"><i class="fa fa-refresh fa-fw"></i>In Progress</span> + <span style="margin-right: 8px;"><i class="fa fa-hourglass-half fa-fw"></i>In Progress</span> <span style="margin-right: 8px; color:#df9b00;"><i class="fa fa-long-arrow-right fa-fw"></i>Lineage</span> <span style="margin-right: 8px; color:#fb4200;"><i class="fa fa-long-arrow-right fa-fw"></i>Impact</span> </div> diff --git a/dashboardv2/public/js/templates/search/AdvancedSearchInfo_tmpl.html b/dashboardv2/public/js/templates/search/AdvancedSearchInfo_tmpl.html index 7746974..64f1a31 100644 --- a/dashboardv2/public/js/templates/search/AdvancedSearchInfo_tmpl.html +++ b/dashboardv2/public/js/templates/search/AdvancedSearchInfo_tmpl.html @@ -31,6 +31,6 @@ </li> </ul> <h5 style="padding-left: 22.5px;"> - <a href="http://atlas.apache.org/Search-Advanced.html"; target="_blank"><i class="fa fa-info-circle" aria-hidden="true"></i> More sample queries and use-cases</a> + <a href="http://atlas.apache.org/#/SearchAdvance"; target="_blank"><i class="fa fa-info-circle" aria-hidden="true"></i> More sample queries and use-cases</a> </h5> </div> \ No newline at end of file diff --git a/dashboardv2/public/js/views/graph/LineageLayoutView.js b/dashboardv2/public/js/views/graph/LineageLayoutView.js index f6a8d00..d481251 100644 --- a/dashboardv2/public/js/views/graph/LineageLayoutView.js +++ b/dashboardv2/public/js/views/graph/LineageLayoutView.js @@ -639,7 +639,7 @@ define(['require', .attr("height", "50") .append("xhtml:div") .insert("i") - .attr("class", "fa fa-refresh fa-spin-custom"); + .attr("class", "fa fa-hourglass-half"); node.intersect = function(point) { return dagreD3.intersect.circle(node, currentNode ? 24 : 21, point); @@ -876,7 +876,7 @@ define(['require', } else if (that.filterObj.isDeletedEntityHideCheck && nodeData && nodeData.isDeleted) { return } - typeStr += '<option value="' + obj.guid + '">' + obj.attributes.name + '</option>'; + typeStr += '<option value="' + obj.guid + '">' + obj.displayText + '</option>'; }); } this.ui.lineageTypeSearch.html(typeStr); @@ -997,6 +997,7 @@ define(['require', } $('.hidden-svg').html(svgClone); $(svgClone).find('>g').attr("transform", "scale(" + scaleFactor + ")"); + $(svgClone).find("foreignObject").remove(); var canvasOffset = { x: 150, y: 150 }, setWidth = (svgClone.getBBox().width + (canvasOffset.x)), setHeight = (svgClone.getBBox().height + (canvasOffset.y)), diff --git a/dashboardv2/public/js/views/search/SearchResultLayoutView.js b/dashboardv2/public/js/views/search/SearchResultLayoutView.js index 021869b..e997d6b 100644 --- a/dashboardv2/public/js/views/search/SearchResultLayoutView.js +++ b/dashboardv2/public/js/views/search/SearchResultLayoutView.js @@ -678,7 +678,35 @@ define(['require', nameHtml += '<button type="button" title="Deleted" class="btn btn-action btn-md deleteBtn"><i class="fa fa-trash"></i></button>'; nameHtml = '<div class="readOnly readOnlyLink">' + nameHtml + '</div>'; } - return nameHtml; + var getImageData = function(options) { + var imagePath = options.imagePath, + returnImgUrl = null; + $.ajax({ + "url": imagePath, + "method": "get", + "async": false, + }) + .always(function(data, status, xhr) { + if (data.status == 404) { + returnImgUrl = getImageData({ + "imagePath": Utils.getEntityIconPath({ entityData: obj, errorUrl: imagePath }) + }); + } else if (data) { + returnImgUrl = imagePath; + } + }); + return returnImgUrl; + } + var imgPath = getImageData({ imagePath: Utils.getEntityIconPath({ entityData: obj }) }), + 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>"; + } + return (img + nameHtml); } }) }; diff --git a/dashboardv3/public/css/scss/graph.scss b/dashboardv3/public/css/scss/graph.scss index 5d3c308..101024c 100644 --- a/dashboardv3/public/css/scss/graph.scss +++ b/dashboardv3/public/css/scss/graph.scss @@ -443,33 +443,6 @@ span#zoom_in { } } -.isIncomplete { - - foreignObject { - display: none; - } - - &.show { - image { - opacity: 0.2; - animation: blink 2.5s infinite; - } - - foreignObject { - display: block; - } - } - - i.fa-refresh { - - text-align: center; - margin-top: 33%; - font-size: 15px; - } - -} - - @-webkit-keyframes blink { from { opacity: 0.2; diff --git a/dashboardv3/public/css/scss/theme.scss b/dashboardv3/public/css/scss/theme.scss index c4f84d0..34df2c3 100644 --- a/dashboardv3/public/css/scss/theme.scss +++ b/dashboardv3/public/css/scss/theme.scss @@ -692,27 +692,78 @@ hr[size="10"] { border-bottom-color: #000; } -.entityDetail { + +td.searchTableName:hover { .isIncomplete { - &.show { - img { - opacity: .2; - animation: blink 2.5s infinite; + &.show.search-result-page { + i { + left: 7px; + } + } + } +} + +.isIncomplete { + &.show { + img { + opacity: .2; + //animation: blink 2.5s infinite; + } + + i.fa { + display: block; + } + + .entity-icon-box { + background: none; + + i.fa { + top: 27px; + font-size: 18px; } + } - i.fa.fa-refresh { - display: block; + + foreignObject { + display: block; + + i.fa { + font-size: 15px; + top: 17px; + left: 18.5px; } } - i.fa.fa-refresh { - display: none; - text-align: center; - font-size: 20px; - top: 0; - position: absolute; - z-index: 1; - left: calc(50% - 8px); + image { + opacity: 0.2; + //animation: blink 2.5s infinite; + } + + &.search-result-page { + position: relative; + + i { + left: 13px; + font-size: 9px; + top: 5px; + } + } + + } + + foreignObject { + display: none; + } + + i.fa { + color: #898989; + display: none; + text-align: center; + font-size: 16px; + top: 0; + position: absolute; + z-index: 1; + left: calc(50% - 8px); } } \ No newline at end of file diff --git a/dashboardv3/public/js/templates/graph/LineageLayoutView_tmpl.html b/dashboardv3/public/js/templates/graph/LineageLayoutView_tmpl.html index dd45cc8..f14abba 100644 --- a/dashboardv3/public/js/templates/graph/LineageLayoutView_tmpl.html +++ b/dashboardv3/public/js/templates/graph/LineageLayoutView_tmpl.html @@ -139,7 +139,7 @@ </div> <div class="legends pull-left" style="height: 25px; padding: 2px;"> <span style="margin-right: 8px; color:#fb4200;"><i class="fa fa-circle-o fa-fw"></i>Current Entity</span> - <span style="margin-right: 8px;"><i class="fa fa-refresh fa-fw"></i>In Progress</span> + <span style="margin-right: 8px;"><i class="fa fa-hourglass-half fa-fw"></i>In Progress</span> <span style="margin-right: 8px; color:#df9b00;"><i class="fa fa-long-arrow-right fa-fw"></i>Lineage</span> <span style="margin-right: 8px; color:#fb4200;"><i class="fa fa-long-arrow-right fa-fw"></i>Impact</span> </div> diff --git a/dashboardv3/public/js/views/graph/LineageLayoutView.js b/dashboardv3/public/js/views/graph/LineageLayoutView.js index 2dbe01f..a15047c 100644 --- a/dashboardv3/public/js/views/graph/LineageLayoutView.js +++ b/dashboardv3/public/js/views/graph/LineageLayoutView.js @@ -654,7 +654,7 @@ define(['require', .attr("height", "50") .append("xhtml:div") .insert("i") - .attr("class", "fa fa-refresh fa-spin-custom"); + .attr("class", "fa fa-hourglass-half"); node.intersect = function(point) { return dagreD3.intersect.circle(node, currentNode ? 24 : 21, point); @@ -891,7 +891,7 @@ define(['require', } else if (that.filterObj.isDeletedEntityHideCheck && nodeData && nodeData.isDeleted) { return } - typeStr += '<option value="' + obj.guid + '">' + obj.attributes.name + '</option>'; + typeStr += '<option value="' + obj.guid + '">' + obj.displayText + '</option>'; }); } this.ui.lineageTypeSearch.html(typeStr); @@ -1012,6 +1012,7 @@ define(['require', } $('.hidden-svg').html(svgClone); $(svgClone).find('>g').attr("transform", "scale(" + scaleFactor + ")"); + $(svgClone).find("foreignObject").remove(); var canvasOffset = { x: 150, y: 150 }, setWidth = (svgClone.getBBox().width + (canvasOffset.x)), setHeight = (svgClone.getBBox().height + (canvasOffset.y)), diff --git a/dashboardv3/public/js/views/search/SearchResultLayoutView.js b/dashboardv3/public/js/views/search/SearchResultLayoutView.js index dbd368b..b4e2290 100644 --- a/dashboardv3/public/js/views/search/SearchResultLayoutView.js +++ b/dashboardv3/public/js/views/search/SearchResultLayoutView.js @@ -710,9 +710,13 @@ define(['require', return returnImgUrl; } var imgPath = getImageData({ imagePath: Utils.getEntityIconPath({ entityData: obj }) }), - img = "" + img = "", + isIncompleteClass = "isIncomplete search-result-page"; + if (obj.isIncomplete === true) { + isIncompleteClass += " show"; + } if (imgPath) { - img = "<img src='" + imgPath + "'>"; + img = "<div class='" + isIncompleteClass + "'><img src='" + imgPath + "'><i class='fa fa-hourglass-half'></i></div>"; } return (img + nameHtml); }
