Skip to content

A
atlas
Commit a2de2060 by kevalbhatt Committed by Sarath Subramanian
Options

ATLAS-3455 :UI: Change shell icon and add shell icon in search table

parent 71584552
Showing with 254 additions and 94 deletions
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;
......
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
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
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>
......
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> &nbsp; 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> &nbsp; More sample queries and use-cases</a>
</h5>
</div>
\ No newline at end of file
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)),
......
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);
}
})
};
......
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;
......
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
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>
......
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)),
......
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);
}
......
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