CIRCL
/
lookyloo
mirror of https://github.com/CIRCL/lookyloo
2
0
Fork 0
Code Issues Releases Wiki Activity

chg: Tooltips everywhere

pull/81/head
Raphaël Vinot 2020-08-06 17:47:39 +02:00
parent 5e2a5cf993
commit 8c53663418
4 changed files with 134 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
website/web/static/insecure.svg Normal file
View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="120mm" height="120mm" viewBox="0 0 120 120">
<g transform="translate(-26.75,-84.183269)">
<rect width="95.25" height="52.916664" x="39.125" y="138.8916" style="fill:#787878;stroke:none" rx="2.2" ry="2.2"/>
<path d="m 118.5,140.21452 v -11.90626 c 0,-21.16667 -15.875,-31.749993 -31.75,-31.749993 -15.875,0 -31.75,10.583323 -31.75,31.749993 v 11.90626" style="fill:none;stroke:#787878;stroke-width:10"/>
<path d="M 49.708333,197.09993 118.5,91.266604" style="fill:none;stroke:#ff0000;stroke-width:10"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 638 B

68
website/web/static/secure.svg Normal file
View File

@ -0,0 +1,68 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
width="120mm"
height="120mm"
viewBox="0 0 120 120"
id="svg10"
sodipodi:docname="secure.svg"
inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)">
<metadata
id="metadata16">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs14" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="640"
inkscape:window-height="480"
id="namedview12"
showgrid="false"
inkscape:zoom="0.52034722"
inkscape:cx="226.77165"
inkscape:cy="226.77165"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="0"
inkscape:current-layer="g8" />
<g
transform="translate(-26.75,-84.183269)"
id="g8">
<rect
width="95.25"
height="52.916664"
x="39.125"
y="138.8916"
style="fill:#787878;stroke:none"
rx="2.2"
ry="2.2"
id="rect2" />
<path
d="m 118.5,140.21452 v -11.90626 c 0,-21.16667 -15.875,-31.749993 -31.75,-31.749993 -15.875,0 -31.75,10.583323 -31.75,31.749993 v 11.90626"
style="fill:none;stroke:#787878;stroke-width:10"
id="path4" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

57
website/web/static/tree.js
View File

@ -164,6 +164,17 @@ function UnflagAllNodes() {
.text("🏁")
.on('click', function(d) {
PermanentNodeHighlight(d.data.uuid);
})
.on('mouseover', d => {
d3.select('#tooltip')
.style('opacity', 1)
.style('left', (d3.event.pageX+10) + 'px')
.style('top', (d3.event.pageY+10) + 'px')
.text('Flag this node for further analysis');
})
.on('mouseout', function() {
d3.select('#tooltip')
.style('opacity', 0);
});
};
@ -174,6 +185,17 @@ function UnflagHostNode(hostnode_uuid) {
.text("🏁")
.on('click', function(d) {
PermanentNodeHighlight(d.data.uuid);
})
.on('mouseover', d => {
d3.select('#tooltip')
.style('opacity', 1)
.style('left', (d3.event.pageX+10) + 'px')
.style('top', (d3.event.pageY+10) + 'px')
.text('Flag this node for further analysis');
})
.on('mouseout', function() {
d3.select('#tooltip')
.style('opacity', 0);
});
};
@ -187,6 +209,17 @@ function PermanentNodeHighlight(hostnode_uuid) {
.text('❌')
.on('click', function(d) {
UnflagHostNode(d.data.uuid);
})
.on('mouseover', d => {
d3.select('#tooltip')
.style('opacity', 1)
.style('left', (d3.event.pageX+10) + 'px')
.style('top', (d3.event.pageY+10) + 'px')
.text('Remove flag on this node');
})
.on('mouseout', function() {
d3.select('#tooltip')
.style('opacity', 0);
});
};
@ -303,7 +336,18 @@ function text_entry(relative_x_pos, relative_y_pos, onclick_callback, d) {
text_nodes
.attr('cursor', 'pointer')
.on('click', onclick_callback);
.on('click', onclick_callback)
.on('mouseover', d => {
d3.select('#tooltip')
.style('opacity', 1)
.style('left', (d3.event.pageX+10) + 'px')
.style('top', (d3.event.pageY+10) + 'px')
.text('Open investigation pop-up.');
})
.on('mouseout', function() {
d3.select('#tooltip')
.style('opacity', 0);
});
return nodeContent.node();
}
@ -433,6 +477,17 @@ function update(root, computed_node_width=0) {
.attr('cursor', 'pointer')
.on('click', function(d) {
PermanentNodeHighlight(d.data.uuid);
})
.on('mouseover', d => {
d3.select('#tooltip')
.style('opacity', 1)
.style('left', (d3.event.pageX+10) + 'px')
.style('top', (d3.event.pageY+10) + 'px')
.text('Flag this node for further analysis');
})
.on('mouseout', function() {
d3.select('#tooltip')
.style('opacity', 0);
});
var icon_size = 24;

8
website/web/templates/hostname_popup.html
View File

@ -64,13 +64,9 @@
<div class="h3" title={{ url['url_path'] }}>
{# HTTPs or not #}
{% if url['encrypted'] %}
<svg class="bi bi-lock" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M11.5 8h-7a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1zm-7-1a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-7zm0-3a3.5 3.5 0 1 1 7 0v3h-1V4a2.5 2.5 0 0 0-5 0v3h-1V4z"/>
</svg>
<img src="/static/secure.svg" title="Encrypted request" width="21" height="21"/>
{% else %}
<svg class="bi bi-unlock" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M9.655 8H2.333c-.264 0-.398.068-.471.121a.73.73 0 0 0-.224.296 1.626 1.626 0 0 0-.138.59V14c0 .342.076.531.14.635.064.106.151.18.256.237a1.122 1.122 0 0 0 .436.127l.013.001h7.322c.264 0 .398-.068.471-.121a.73.73 0 0 0 .224-.296 1.627 1.627 0 0 0 .138-.59V9c0-.342-.076-.531-.14-.635a.658.658 0 0 0-.255-.237A1.122 1.122 0 0 0 9.655 8zm.012-1H2.333C.5 7 .5 9 .5 9v5c0 2 1.833 2 1.833 2h7.334c1.833 0 1.833-2 1.833-2V9c0-2-1.833-2-1.833-2zM8.5 4a3.5 3.5 0 1 1 7 0v3h-1V4a2.5 2.5 0 0 0-5 0v3h-1V4z"/>
</svg>
<img src="/static/insecure.svg" title="Unencrypted request" width="21" height="21"/>
{%endif%}
{# URL #}
... /{{ shorten_string(url['url_path'], 50)}}