mirror of
https://github.com/ail-project/ail-framework.git
synced 2024-11-10 08:38:28 +00:00
chg: [correlation UI] add basic popover
This commit is contained in:
parent
ede6c22c2d
commit
9702c12b7f
3 changed files with 61 additions and 36 deletions
|
@ -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
4
var/www/static/js/helper.js
Normal file
|
@ -0,0 +1,4 @@
|
|||
// sanitise str_to_sanitize
|
||||
function sanitize_text(str_to_sanitize) {
|
||||
return $("<span\>").text(str_to_sanitize).html()
|
||||
};
|
|
@ -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);
|
||||
|
||||
} else {
|
||||
content = "<b><span id='tooltip-id-name'></span></b><br/>";
|
||||
|
||||
//console.log(d);
|
||||
var pop_header = "<b>"+ sanitize_text(d.text) + "</b><br><br>"
|
||||
|
||||
div.html(pop_header)
|
||||
.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.text);
|
||||
|
||||
}
|
||||
|
||||
//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() {
|
||||
|
|
Loading…
Reference in a new issue