chg: [correlation UI] add basic popover

var/www/blueprints/correlation.py

@@ -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')

var/www/static/js/helper.js

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

var/www/templates/correlation/show_correlation.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 d3_pageX = d3.event.pageX;
-var content;
+var d3_pageY = d3.event.pageY;
 
-if(d.hash == true){
+if (d.popover) {
-	content = "<b><span id='tooltip-id-name'></span></b><br/>"+
+	div.html(d.popover)
-						"<br/>"+
+		.style("left", (d3_pageX) + "px")
-						"<i>First seen</i>: <span id='tooltip-id-first_seen'></span><br/>"+
+		.style("top", (d3_pageY - 28) + "px");
-						"<i>Last seen</i>: <span id='tooltip-id-last_seen'></span><br/>"+
-						"<i>nb_seen</i>: <span id='tooltip-id-nb_seen'></span>";
 
 	div.transition()
-		 .duration(200)
+		.duration(200)
-				.style("opacity", .9);
+		.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/>";
 
-	div.transition()
+		//console.log(d);
-		 .duration(200)
+		var pop_header = "<b>"+ sanitize_text(d.text) + "</b><br><br>"
-				.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);
+		div.html(pop_header)
+			.style("left", (d3_pageX) + "px")
+			.style("top", (d3_pageY - 28) + "px");
 
-}
+		div.transition()
+			.duration(200)
+			.style("opacity", .9);
 
-	//links
+		$.getJSON("{{ url_for('correlation.get_description') }}?object_id="+ d.id,
-	/*link.style("stroke-opacity", function(o) {
+				function(data){
-			return o.source === d || o.target === d ? 1 : opacity;
+					var desc = pop_header
-	});*/
+					Object.keys(data).forEach(function(key) {
-	link.style("stroke", function(o){
+						desc = desc + key + ": " + sanitize_text(data[key]) + "<br>"
-			return o.source === d || o.target === d ? "#666" : "#ddd";
+					})
-	});
+					div.html(desc)
+					 	.style("left", (d3_pageX) + "px")
+					 	.style("top", (d3_pageY - 28) + "px");
+					d.popover = desc
+				});
+		}
 }
 
 function mouseouted() {