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
......@@ -449,3 +449,40 @@ 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;
}
to {
opacity: 0.5;
}
}
\ No newline at end of file
dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html
......@@ -139,6 +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; 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/views/graph/LineageLayoutView.js
......@@ -329,6 +329,7 @@ define(['require',
toolTipLabel: relationObj.displayText,
id: relationObj.guid,
isLineage: true,
isIncomplete: relationObj.isIncomplete,
entityDef: this.getEntityDef(relationObj.typeName)
}, relationObj);
obj["serviceType"] = this.getServiceType({ typeName: relationObj.typeName, entityDef: obj.entityDef });
......@@ -559,6 +560,12 @@ define(['require',
if (currentNode) {
shapeSvg.attr("stroke", "#fb4200")
}
if (node.isIncomplete === true) {
parent.attr("class", "isIncomplete show");
} else {
parent.attr("class", "isIncomplete");
}
parent.insert("defs")
.append("pattern")
.attr("x", "0%")
......@@ -625,6 +632,15 @@ define(['require',
.attr("y", currentNode ? "3" : "4").attr("width", "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) {
return dagreD3.intersect.circle(node, currentNode ? 24 : 21, point);
};
......
dashboardv3/public/css/scss/graph.scss
......@@ -442,3 +442,40 @@ 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;
}
to {
opacity: 0.5;
}
}
\ No newline at end of file
dashboardv3/public/js/templates/graph/LineageLayoutView_tmpl.html
......@@ -139,6 +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; 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
......@@ -344,6 +344,7 @@ define(['require',
toolTipLabel: relationObj.displayText,
id: relationObj.guid,
isLineage: true,
isIncomplete: relationObj.isIncomplete,
entityDef: this.getEntityDef(relationObj.typeName)
}, relationObj);
obj["serviceType"] = this.getServiceType({ typeName: relationObj.typeName, entityDef: obj.entityDef });
......@@ -574,6 +575,12 @@ define(['require',
if (currentNode) {
shapeSvg.attr("stroke", "#fb4200")
}
if (node.isIncomplete === true) {
parent.attr("class", "isIncomplete show");
} else {
parent.attr("class", "isIncomplete");
}
parent.insert("defs")
.append("pattern")
.attr("x", "0%")
......@@ -640,6 +647,15 @@ define(['require',
.attr("y", currentNode ? "3" : "4").attr("width", "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) {
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