Skip to content

A
atlas
Commit b0ab2ffe by kevalbhatt Committed by Sarath Subramanian
Options

ATLAS-3436: UI: Show Incomplete entity status in the Lineage graph

Signed-off-by: 's avatarSarath Subramanian <sarath@apache.org>
parent ddd0c9ca
Showing with 110 additions and 0 deletions
dashboardv2/public/css/scss/graph.scss
...@@ -448,4 +448,41 @@ span#zoom_in { ...@@ -448,4 +448,41 @@ span#zoom_in {
list-style-position: inside; list-style-position: inside;
} }
}
.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;
}
to {
opacity: 0.5;
}
} }
\ No newline at end of file
dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html
...@@ -139,6 +139,7 @@ ...@@ -139,6 +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; 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/views/graph/LineageLayoutView.js
...@@ -329,6 +329,7 @@ define(['require', ...@@ -329,6 +329,7 @@ define(['require',
toolTipLabel: relationObj.displayText, toolTipLabel: relationObj.displayText,
id: relationObj.guid, id: relationObj.guid,
isLineage: true, isLineage: true,
isIncomplete: relationObj.isIncomplete,
entityDef: this.getEntityDef(relationObj.typeName) entityDef: this.getEntityDef(relationObj.typeName)
}, relationObj); }, relationObj);
obj["serviceType"] = this.getServiceType({ typeName: relationObj.typeName, entityDef: obj.entityDef }); obj["serviceType"] = this.getServiceType({ typeName: relationObj.typeName, entityDef: obj.entityDef });
...@@ -559,6 +560,12 @@ define(['require', ...@@ -559,6 +560,12 @@ define(['require',
if (currentNode) { if (currentNode) {
shapeSvg.attr("stroke", "#fb4200") shapeSvg.attr("stroke", "#fb4200")
} }
if (node.isIncomplete === true) {
parent.attr("class", "isIncomplete show");
} else {
parent.attr("class", "isIncomplete");
}
parent.insert("defs") parent.insert("defs")
.append("pattern") .append("pattern")
.attr("x", "0%") .attr("x", "0%")
...@@ -625,6 +632,15 @@ define(['require', ...@@ -625,6 +632,15 @@ define(['require',
.attr("y", currentNode ? "3" : "4").attr("width", "40") .attr("y", currentNode ? "3" : "4").attr("width", "40")
.attr("height", "40"); .attr("height", "40");
parent.insert("foreignObject")
.attr("x", "-25")
.attr("y", "-25")
.attr("width", "50")
.attr("height", "50")
.append("xhtml:div")
.insert("i")
.attr("class", "fa fa-refresh fa-spin-custom");
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);
}; };
......
dashboardv3/public/css/scss/graph.scss
...@@ -441,4 +441,41 @@ span#zoom_in { ...@@ -441,4 +441,41 @@ span#zoom_in {
list-style-position: inside; list-style-position: inside;
} }
}
.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;
}
to {
opacity: 0.5;
}
} }
\ No newline at end of file
dashboardv3/public/js/templates/graph/LineageLayoutView_tmpl.html
...@@ -139,6 +139,7 @@ ...@@ -139,6 +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; 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
...@@ -344,6 +344,7 @@ define(['require', ...@@ -344,6 +344,7 @@ define(['require',
toolTipLabel: relationObj.displayText, toolTipLabel: relationObj.displayText,
id: relationObj.guid, id: relationObj.guid,
isLineage: true, isLineage: true,
isIncomplete: relationObj.isIncomplete,
entityDef: this.getEntityDef(relationObj.typeName) entityDef: this.getEntityDef(relationObj.typeName)
}, relationObj); }, relationObj);
obj["serviceType"] = this.getServiceType({ typeName: relationObj.typeName, entityDef: obj.entityDef }); obj["serviceType"] = this.getServiceType({ typeName: relationObj.typeName, entityDef: obj.entityDef });
...@@ -574,6 +575,12 @@ define(['require', ...@@ -574,6 +575,12 @@ define(['require',
if (currentNode) { if (currentNode) {
shapeSvg.attr("stroke", "#fb4200") shapeSvg.attr("stroke", "#fb4200")
} }
if (node.isIncomplete === true) {
parent.attr("class", "isIncomplete show");
} else {
parent.attr("class", "isIncomplete");
}
parent.insert("defs") parent.insert("defs")
.append("pattern") .append("pattern")
.attr("x", "0%") .attr("x", "0%")
...@@ -640,6 +647,15 @@ define(['require', ...@@ -640,6 +647,15 @@ define(['require',
.attr("y", currentNode ? "3" : "4").attr("width", "40") .attr("y", currentNode ? "3" : "4").attr("width", "40")
.attr("height", "40"); .attr("height", "40");
parent.insert("foreignObject")
.attr("x", "-25")
.attr("y", "-25")
.attr("width", "50")
.attr("height", "50")
.append("xhtml:div")
.insert("i")
.attr("class", "fa fa-refresh fa-spin-custom");
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);
}; };
......
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