AIL/ail-framework
7
0
Fork 0
mirror of https://github.com/ail-project/ail-framework.git synced 2024-11-10 08:38:28 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

chg: [correlation graph UI] add json error handler + add loading status

Browse source
This commit is contained in:
Terrtia 2019-12-19 11:09:22 +01:00
parent 218f1af241
commit 9ec610ecc3
No known key found for this signature in database
GPG key ID: 1E1B1F50D84613D0
1 changed files with 33 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
var/www/templates/correlation/show_correlation.html
View file

@ -116,10 +116,29 @@
</span> </span>
</div> </div>
<div class="card-body graph_panel"> <div class="card-body graph_panel">
<div id="graph_loading" class="ml-3 mt-3">
<div class="spinner-border text-secondary" role="status">
<span class="sr-only">Loading...</span>
</div>
<span>Loading...</span>
</div>
<div id="graph"> <div id="graph">
</div> </div>
</div> </div>
</div> </div>
<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-autohide="false">
<div class="toast-header">
<strong class="mr-auto">Bootstrap</strong>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
</div> </div>
<div class="col-xl-2"> <div class="col-xl-2">
@ -283,6 +302,9 @@ var zoom = d3.zoom()
.scaleExtent([.2, 10]) .scaleExtent([.2, 10])
.on("zoom", zoomed); .on("zoom", zoomed);
// Loading:
//$("#graph_loading").show()
//var transform = d3.zoomIdentity; //var transform = d3.zoomIdentity;
var color = d3.scaleOrdinal(d3.schemeCategory10); var color = d3.scaleOrdinal(d3.schemeCategory10);
@ -308,6 +330,7 @@ var container_graph = svg_node.append("g");
//.attr("transform", "translate(40,0)") //.attr("transform", "translate(40,0)")
//.attr("transform", "scale(2)"); //.attr("transform", "scale(2)");
function create_graph(url){ function create_graph(url){
d3.json(url) d3.json(url)
@ -384,7 +407,16 @@ d3.json(url)
node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
} }
}); // Loading ...
$("#graph_loading").remove();
})
.catch(function(error) {
$("#graph_loading").remove()
svg_node.remove();
d3.select("#graph").append("div")
.text(error);
});
} }
function zoomed() { function zoomed() {