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 UI] add basic popover

Browse source
This commit is contained in:
Terrtia 2019-12-09 16:56:07 +01:00
parent ede6c22c2d
commit 9702c12b7f
No known key found for this signature in database
GPG key ID: 1E1B1F50D84613D0
3 changed files with 61 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
var/www/blueprints/correlation.py
View file

@ -194,11 +194,38 @@ def show_correlation():
dict_object["metadata_card"] = get_card_metadata(object_type, correlation_id, type_id=type_id, expand_card=expand_card)
return render_template("show_correlation.html", dict_object=dict_object, bootstrap_label=bootstrap_label)
@correlation.route('/correlation/get/description')
@login_required
@login_read_only
def get_description():
object_id = request.args.get('object_id')
object_id = object_id.split(';')
# unpack object_id # # TODO: put me in lib
if len(object_id) == 3:
object_type = object_id[0]
type_id = object_id[1]
correlation_id = object_id[2]
elif len(object_id) == 2:
object_type = object_id[0]
type_id = None
correlation_id = object_id[1]
else:
return jsonify({})
# check if correlation_id exist
# # TODO: return error json
if not Correlate_object.exist_object(object_type, correlation_id, type_id=type_id):
abort(404) # return 404
# oject exist
else:
res = Correlate_object.get_object_metadata(object_type, correlation_id, type_id=type_id)
return jsonify(res)
@correlation.route('/correlation/graph_node_json')
@login_required
@login_read_only
def graph_node_json(): # # TODO: use post
def graph_node_json():
correlation_id = request.args.get('correlation_id')
type_id = request.args.get('type_id')
object_type = request.args.get('object_type')

4
var/www/static/js/helper.js Normal file
View file

@ -0,0 +1,4 @@
// sanitise str_to_sanitize
function sanitize_text(str_to_sanitize) {
return $("<span\>").text(str_to_sanitize).html()
};

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

@ -13,6 +13,7 @@
<!-- JS -->
<script src="{{ url_for('static', filename='js/jquery.js')}}"></script>
<script src="{{ url_for('static', filename='js/helper.js')}}"></script>
<script src="{{ url_for('static', filename='js/popper.min.js')}}"></script>
<script src="{{ url_for('static', filename='js/bootstrap4.min.js')}}"></script>
<script language="javascript" src="{{ url_for('static', filename='js/d3.min.js') }}"></script>
@ -413,49 +414,42 @@ d.fy = d.y;
function mouseovered(d) {
// tooltip
var content;
var d3_pageX = d3.event.pageX;
var d3_pageY = d3.event.pageY;
if(d.hash == true){
content = "<b><span id='tooltip-id-name'></span></b><br/>"+
"<br/>"+
"<i>First seen</i>: <span id='tooltip-id-first_seen'></span><br/>"+
"<i>Last seen</i>: <span id='tooltip-id-last_seen'></span><br/>"+
"<i>nb_seen</i>: <span id='tooltip-id-nb_seen'></span>";
if (d.popover) {
div.html(d.popover)
.style("left", (d3_pageX) + "px")
.style("top", (d3_pageY - 28) + "px");
div.transition()
.duration(200)
.style("opacity", .9);
div.html(content)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
$("#tooltip-id-name").text(d.id);
$("#tooltip-id-first_seen").text(d.first_seen);
$("#tooltip-id-last_seen").text(d.last_seen);
$("#tooltip-id-nb_seen").text(d.nb_seen_in_paste);
.duration(200)
.style("opacity", .9);
} else {
content = "<b><span id='tooltip-id-name'></span></b><br/>";
div.transition()
.duration(200)
.style("opacity", .9);
div.html(content)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
//console.log(d);
var pop_header = "<b>"+ sanitize_text(d.text) + "</b><br><br>"
$("#tooltip-id-name").text(d.text);
div.html(pop_header)
.style("left", (d3_pageX) + "px")
.style("top", (d3_pageY - 28) + "px");
}
div.transition()
.duration(200)
.style("opacity", .9);
//links
/*link.style("stroke-opacity", function(o) {
return o.source === d || o.target === d ? 1 : opacity;
});*/
link.style("stroke", function(o){
return o.source === d || o.target === d ? "#666" : "#ddd";
});
$.getJSON("{{ url_for('correlation.get_description') }}?object_id="+ d.id,
function(data){
var desc = pop_header
Object.keys(data).forEach(function(key) {
desc = desc + key + ": " + sanitize_text(data[key]) + "<br>"
})
div.html(desc)
.style("left", (d3_pageX) + "px")
.style("top", (d3_pageY - 28) + "px");
d.popover = desc
});
}
}
function mouseouted() {