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 { ...@@ -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 { @-webkit-keyframes blink {
from { from {
opacity: 0.2; opacity: 0.2;
......
dashboardv2/public/css/scss/table.scss
...@@ -168,4 +168,79 @@ tr.empty { ...@@ -168,4 +168,79 @@ tr.empty {
.toggleList.semi-collapsed div:nth-child(n+2) { .toggleList.semi-collapsed div:nth-child(n+2) {
display: none; 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"] { ...@@ -512,27 +512,77 @@ hr[size="10"] {
} }
} }
.entityDetail { td.searchTableName:hover {
.isIncomplete { .isIncomplete {
&.show { &.show.search-result-page {
img { i {
opacity: .2; left: 7px;
animation: blink 2.5s infinite;
} }
}
}
}
.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 { image {
display: none; opacity: 0.2;
text-align: center; //animation: blink 2.5s infinite;
font-size: 20px;
top: 0;
position: absolute;
z-index: 999;
left: calc(50% - 8px);
} }
&.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 @@ ...@@ -139,7 +139,7 @@
</div> </div>
<div class="legends pull-left" style="height: 25px; padding: 2px;"> <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; 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:#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> <span style="margin-right: 8px; color:#fb4200;"><i class="fa fa-long-arrow-right fa-fw"></i>Impact</span>
</div> </div>
......
dashboardv2/public/js/templates/search/AdvancedSearchInfo_tmpl.html
...@@ -31,6 +31,6 @@ ...@@ -31,6 +31,6 @@
</li> </li>
</ul> </ul>
<h5 style="padding-left: 22.5px;"> <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> </h5>
</div> </div>
\ No newline at end of file
dashboardv2/public/js/views/graph/LineageLayoutView.js
...@@ -639,7 +639,7 @@ define(['require', ...@@ -639,7 +639,7 @@ define(['require',
.attr("height", "50") .attr("height", "50")
.append("xhtml:div") .append("xhtml:div")
.insert("i") .insert("i")
.attr("class", "fa fa-refresh fa-spin-custom"); .attr("class", "fa fa-hourglass-half");
node.intersect = function(point) { node.intersect = function(point) {
return dagreD3.intersect.circle(node, currentNode ? 24 : 21, point); return dagreD3.intersect.circle(node, currentNode ? 24 : 21, point);
...@@ -876,7 +876,7 @@ define(['require', ...@@ -876,7 +876,7 @@ define(['require',
} else if (that.filterObj.isDeletedEntityHideCheck && nodeData && nodeData.isDeleted) { } else if (that.filterObj.isDeletedEntityHideCheck && nodeData && nodeData.isDeleted) {
return return
} }
typeStr += '<option value="' + obj.guid + '">' + obj.attributes.name + '</option>'; typeStr += '<option value="' + obj.guid + '">' + obj.displayText + '</option>';
}); });
} }
this.ui.lineageTypeSearch.html(typeStr); this.ui.lineageTypeSearch.html(typeStr);
...@@ -997,6 +997,7 @@ define(['require', ...@@ -997,6 +997,7 @@ define(['require',
} }
$('.hidden-svg').html(svgClone); $('.hidden-svg').html(svgClone);
$(svgClone).find('>g').attr("transform", "scale(" + scaleFactor + ")"); $(svgClone).find('>g').attr("transform", "scale(" + scaleFactor + ")");
$(svgClone).find("foreignObject").remove();
var canvasOffset = { x: 150, y: 150 }, var canvasOffset = { x: 150, y: 150 },
setWidth = (svgClone.getBBox().width + (canvasOffset.x)), setWidth = (svgClone.getBBox().width + (canvasOffset.x)),
setHeight = (svgClone.getBBox().height + (canvasOffset.y)), setHeight = (svgClone.getBBox().height + (canvasOffset.y)),
......
dashboardv2/public/js/views/search/SearchResultLayoutView.js
...@@ -678,7 +678,35 @@ define(['require', ...@@ -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 += '<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>'; 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 { ...@@ -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 { @-webkit-keyframes blink {
from { from {
opacity: 0.2; opacity: 0.2;
......
dashboardv3/public/css/scss/theme.scss
...@@ -692,27 +692,78 @@ hr[size="10"] { ...@@ -692,27 +692,78 @@ hr[size="10"] {
border-bottom-color: #000; border-bottom-color: #000;
} }
.entityDetail {
td.searchTableName:hover {
.isIncomplete { .isIncomplete {
&.show { &.show.search-result-page {
img { i {
opacity: .2; left: 7px;
animation: blink 2.5s infinite; }
}
}
}
.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 { image {
display: none; opacity: 0.2;
text-align: center; //animation: blink 2.5s infinite;
font-size: 20px; }
top: 0;
position: absolute; &.search-result-page {
z-index: 1; position: relative;
left: calc(50% - 8px);
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 @@ ...@@ -139,7 +139,7 @@
</div> </div>
<div class="legends pull-left" style="height: 25px; padding: 2px;"> <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; 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:#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> <span style="margin-right: 8px; color:#fb4200;"><i class="fa fa-long-arrow-right fa-fw"></i>Impact</span>
</div> </div>
......
dashboardv3/public/js/views/graph/LineageLayoutView.js
...@@ -654,7 +654,7 @@ define(['require', ...@@ -654,7 +654,7 @@ define(['require',
.attr("height", "50") .attr("height", "50")
.append("xhtml:div") .append("xhtml:div")
.insert("i") .insert("i")
.attr("class", "fa fa-refresh fa-spin-custom"); .attr("class", "fa fa-hourglass-half");
node.intersect = function(point) { node.intersect = function(point) {
return dagreD3.intersect.circle(node, currentNode ? 24 : 21, point); return dagreD3.intersect.circle(node, currentNode ? 24 : 21, point);
...@@ -891,7 +891,7 @@ define(['require', ...@@ -891,7 +891,7 @@ define(['require',
} else if (that.filterObj.isDeletedEntityHideCheck && nodeData && nodeData.isDeleted) { } else if (that.filterObj.isDeletedEntityHideCheck && nodeData && nodeData.isDeleted) {
return return
} }
typeStr += '<option value="' + obj.guid + '">' + obj.attributes.name + '</option>'; typeStr += '<option value="' + obj.guid + '">' + obj.displayText + '</option>';
}); });
} }
this.ui.lineageTypeSearch.html(typeStr); this.ui.lineageTypeSearch.html(typeStr);
...@@ -1012,6 +1012,7 @@ define(['require', ...@@ -1012,6 +1012,7 @@ define(['require',
} }
$('.hidden-svg').html(svgClone); $('.hidden-svg').html(svgClone);
$(svgClone).find('>g').attr("transform", "scale(" + scaleFactor + ")"); $(svgClone).find('>g').attr("transform", "scale(" + scaleFactor + ")");
$(svgClone).find("foreignObject").remove();
var canvasOffset = { x: 150, y: 150 }, var canvasOffset = { x: 150, y: 150 },
setWidth = (svgClone.getBBox().width + (canvasOffset.x)), setWidth = (svgClone.getBBox().width + (canvasOffset.x)),
setHeight = (svgClone.getBBox().height + (canvasOffset.y)), setHeight = (svgClone.getBBox().height + (canvasOffset.y)),
......
dashboardv3/public/js/views/search/SearchResultLayoutView.js
...@@ -710,9 +710,13 @@ define(['require', ...@@ -710,9 +710,13 @@ define(['require',
return returnImgUrl; return returnImgUrl;
} }
var imgPath = getImageData({ imagePath: Utils.getEntityIconPath({ entityData: obj }) }), var imgPath = getImageData({ imagePath: Utils.getEntityIconPath({ entityData: obj }) }),
img = "" img = "",
isIncompleteClass = "isIncomplete search-result-page";
if (obj.isIncomplete === true) {
isIncompleteClass += " show";
}
if (imgPath) { if (imgPath) {
img = "<img src='" + imgPath + "'>"; img = "<div class='" + isIncompleteClass + "'><img src='" + imgPath + "'><i class='fa fa-hourglass-half'></i></div>";
} }
return (img + nameHtml); 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