Merge branch 'AntoniaBK-menu'

pull/913/head
Raphaël Vinot 2024-04-29 15:49:16 +02:00
commit 30599ef48b
4 changed files with 207 additions and 194 deletions

View File

@ -35,8 +35,8 @@
"secure.svg": "H8ni7t0d60nCJDVGuZpuxC+RBy/ipAjWT627D12HlZGg6LUmjSwPTQTUekm3UJupEP7TUkhXyq6WHc5gy7QBjg==", "secure.svg": "H8ni7t0d60nCJDVGuZpuxC+RBy/ipAjWT627D12HlZGg6LUmjSwPTQTUekm3UJupEP7TUkhXyq6WHc5gy7QBjg==",
"stats.css": "/kY943FwWBTne4IIyf7iBROSfbGd82TeBicEXqKkRwawMVRIvM/Pk5MRa7okUyGIxaDjFQGmV/U1vy+PhN6Jbw==", "stats.css": "/kY943FwWBTne4IIyf7iBROSfbGd82TeBicEXqKkRwawMVRIvM/Pk5MRa7okUyGIxaDjFQGmV/U1vy+PhN6Jbw==",
"stats_graph.js": "S/sMNQK1UMMLD0xQeEa7sq3ce8o6oPxwxGlyKVtaHOODjair86dbBDm7cu6pa/elMRDJT1j09jEFjWp+5GbhTw==", "stats_graph.js": "S/sMNQK1UMMLD0xQeEa7sq3ce8o6oPxwxGlyKVtaHOODjair86dbBDm7cu6pa/elMRDJT1j09jEFjWp+5GbhTw==",
"tree.css": "R/pWQnE8kMacDrzGy/NpA1tJoHAZpOjFiX6dqtBe+PqAnhYMn1CIQzODh8Ifvh6hBTPLRWX3bsabfEvfaI7Z6A==", "tree.css": "AvSJOleYapo+xOCcOPGxTcKg+t1TxFkmr/VvgVJbXaeDOnYECzmJOIVNZii/eFouTh85uDSgr+WLQHq3hft6Kg==",
"tree.js": "B14s0PA3EsL4eZw5e+bpQabUVy75t8z8o1PLHurwBD27w2A1Cn/98dA3r4g511Bmwkh09J142LH4y0bVsQeqmQ==", "tree.js": "MezKYufVkOBLm/Z4ENrMhKzBNDslhXYTlDhjDDAbhHo6XqRzCnTMIgYtikQ1mxkwF5P61Tl1w0kalIPe4Sca6g==",
"up.jpg": "d1ljZJ9f5JekyM6RLFFH2Ua44j6neiQBdUIXOenRTjGppQr3JaeglpQIH6BjPCJL177+TH52U3UIRNS5YAyKIg==", "up.jpg": "d1ljZJ9f5JekyM6RLFFH2Ua44j6neiQBdUIXOenRTjGppQr3JaeglpQIH6BjPCJL177+TH52U3UIRNS5YAyKIg==",
"up_right.jpg": "OMmz+n+MxR34P8/fn5t4DkqKqdJRzQbXQ7fAi2lhkZIJGhVs2vIyY1f2hpYoBxDAX1OcYsSE2lqIR2vXNDGZsA==", "up_right.jpg": "OMmz+n+MxR34P8/fn5t4DkqKqdJRzQbXQ7fAi2lhkZIJGhVs2vIyY1f2hpYoBxDAX1OcYsSE2lqIR2vXNDGZsA==",
"video.png": "gJtmkfr8I1Kw43pYEKjg6CAjgmhl1vIBKBQ3ZkxCu3wvxQm+6kf93iLrrFiY2WuiXzxEn2Leu52GJzmVN5id0g==", "video.png": "gJtmkfr8I1Kw43pYEKjg6CAjgmhl1vIBKBQ3ZkxCu3wvxQm+6kf93iLrrFiY2WuiXzxEn2Leu52GJzmVN5id0g==",

View File

@ -28,6 +28,24 @@
scroll-margin: 50px; scroll-margin: 50px;
} }
#help {
text-align: center;
border-style: solid;
border-color: #0d6efd;
border-radius: 25px;
text-decoration: none;
height: 50px;
width: 50px;
background-color: #0d6efd;
color: white;
align-content: center;
}
#help:hover {
background-color: white;
color: blue;
}
/* Generic parts of menus */ /* Generic parts of menus */
hr { hr {
display: block; display: block;
@ -47,20 +65,14 @@ hr {
left: 5px; left: 5px;
background: white; background: white;
border: 2px solid; border: 2px solid;
padding-top: 5px; padding: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
} }
#menu_container_vertical { #menu_container_vertical {
position: fixed; position: fixed;
top: 5px; top: 5px;
left: 5px; left: 5px;
padding-top: 5px; padding: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
} }
#menu_container_vertical .menu-header { #menu_container_vertical .menu-header {
@ -73,14 +85,14 @@ hr {
padding: 10px 0; padding: 10px 0;
} }
#menu_container_vertical ul li a { #menu_container_vertical ul li a {
padding: 5px; padding: 5px;
font-size: 1.1em; font-size: 1.1em;
display: block; display: block;
text-align: center;;
} }
#menu_container_vertical ul li a:hover {
}
/* menu horizontal */ /* menu horizontal */
#menu_horizontal { #menu_horizontal {
@ -88,9 +100,7 @@ hr {
top: 5px; top: 5px;
background: white; background: white;
border: 2px solid; border: 2px solid;
padding-top: 5px; padding: 5px;
padding-right: 5px;
padding-left: 5px;
} }
#menu_container_horizontal { #menu_container_horizontal {
@ -98,38 +108,80 @@ hr {
top: 5px; top: 5px;
left: 5px; left: 5px;
left: 217px; left: 217px;
padding-top: 5px;
padding-right: 5px;
padding-left: 5px;
}
#menu_container_horizontal .container {
width: 800px;
}
#menu_container_horizontal ul.components {
padding: 5px; padding: 5px;
width: 80%;
} }
#menu_container_horizontal ul li a { .hstack{
padding: 1px; height: 106.6px;
font-size: 1.1em; }
/* Dropdown Menus */
.dropbtn {
background-color: #0d6efd;
color: white;
font-size: 16px;
border: none;
width: 180px;
text-align: center;
height: 50px;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #0067fc;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
width: 180px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block; display: block;
} }
#menu_container_horizontal ul li a:hover { .dropdown-content a:hover {
background: #fff; background-color: #f1f1f1;
} }
/* Show the dropdown menus on hover */
#capture-menu:hover #capture-menu-content {
display: block;
}
#actions-menu:hover #actions-menu-content {
display: block;
}
#tools-menu:hover #tools-menu-content {
display: block;
}
#admin-menu:hover #admin-menu-content {
display: block;
}
#extra-menu:hover #extra-menu-content {
display: block;
}
/* legend */ /* legend */
#legend_container { #legend_container {
position: fixed; position: fixed;
bottom: 5px; bottom: 5px;
right: 5px; right: 5px;
padding-top: 5px; padding: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
} }
#legend { #legend {
@ -138,8 +190,5 @@ hr {
right: 5px; right: 5px;
background: white; background: white;
border: 2px solid; border: 2px solid;
padding-top: 5px; padding: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
} }

View File

@ -3,13 +3,13 @@
// Set the dimensions and margins of the diagram // Set the dimensions and margins of the diagram
let margin = { let margin = {
top: document.getElementById('menu_horizontal_content').clientHeight + 10, top: document.getElementById('menu_horizontal_content').clientHeight + 30,
right: 200, right: 200,
bottom: 10, bottom: 10,
left: 90 left: 90
}; };
let menuHeight = document.getElementById('menu_vertical').clientHeight; let menuHeight = document.getElementById('menu_vertical').clientHeight + 60;
let width = 960 - margin.left - margin.right; let width = 960 - margin.left - margin.right;
let height = menuHeight * 2; let height = menuHeight * 2;

View File

@ -258,30 +258,19 @@
</span> </span>
</button> </button>
</div> </div>
<hr/>
<div id=menu_vertical_content class="collapse show"> <div id=menu_vertical_content class="collapse show">
<hr/>
<ul class="list-group list-group-flush"> <ul class="list-group list-group-flush">
<li class="list-group-item"> <li class="list-group-item">
<a href="#detailsModal" data-bs-toggle="modal" data-bs-target="#detailsModal" role="button">Capture Details</a> <a href="{{ url_for('capture_web') }}" role="button">New capture</a>
</li>
<li class="list-group-item">
<a href="#statsModal" data-remote="{{ url_for('stats', tree_uuid=tree_uuid) }}"
data-bs-toggle="modal" data-bs-target="#statsModal" role="button">Statistics</a>
</li>
<li class="list-group-item">
<a href="https://www.lookyloo.eu/docs/main/usage.html#_investigate_a_capture" role="button">Lookyloo Manual</a>
</li>
<li class="list-group-item">
<a href="{{ url_for('index') }}" role="button">Homepage</a>
</li> </li>
{% if enable_monitoring %} {% if enable_monitoring %}
<hr/>
<li class="list-group-item"> <li class="list-group-item">
<a href="#monitoringModal" data-bs-toggle="modal" data-bs-target="#monitoringModal" role="button" class="btn btn-outline-info">Monitor capture</a> <a href="#monitoringModal" data-bs-toggle="modal" data-bs-target="#monitoringModal" role="button" class="btn btn-outline-info">Monitor capture</a>
</li> </li>
{% endif %} {% endif %}
{% if enable_mail_notification %} {% if enable_mail_notification %}
<hr/>
<li class="list-group-item"> <li class="list-group-item">
<a href="#emailModal" data-bs-toggle="modal" data-bs-target="#emailModal" role="button" class="btn btn-outline-danger">Report suspicious</br>capture</a> <a href="#emailModal" data-bs-toggle="modal" data-bs-target="#emailModal" role="button" class="btn btn-outline-danger">Report suspicious</br>capture</a>
</li> </li>
@ -290,6 +279,8 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div id="menu_container_horizontal" class="tree-panel-container"> <div id="menu_container_horizontal" class="tree-panel-container">
<div id=menu_horizontal class="d-flex"> <div id=menu_horizontal class="d-flex">
@ -306,104 +297,109 @@
<div id="menu_horizontal_content" class="collapse show flex-grow-1 ms-3 container"> <div id="menu_horizontal_content" class="collapse show flex-grow-1 ms-3 container">
<div class="hstack gap-3"> <div class="hstack gap-3">
<div class="vr"></div> <div class="vr"></div>
<div class="col-md">
<ul class="list-group list-group-flush"> <div id="capture-menu" class="dropdown">
<li class="list-group-item"> <button class="dropbtn">Capture</button>
<a href="#screenshotModal" data-bs-toggle="modal" <div id="capture-menu-content" class="dropdown-content">
data-bs-target="#screenshotModal" role="button">Page Screenshot</a> <a href="#detailsModal" data-bs-toggle="modal" data-bs-target="#detailsModal"
</li> role="button" title="Details about the capture configuration">Capture Details</a>
<li class="list-group-item">
<a href="#statsModal" data-remote="{{ url_for('stats', tree_uuid=tree_uuid) }}" data-bs-toggle="modal"
data-bs-target="#statsModal" role="button" title="The capture in numbers">Statistics</a>
<a href="#screenshotModal" data-bs-toggle="modal" data-bs-target="#screenshotModal"
role="button" title="Contains the URL rendered in the browser">Page Screenshot</a>
</div>
</div>
<div id="tools-menu" class="dropdown">
<button class="dropbtn">Analytical Tools</button>
<div id="tools-menu-content" class="dropdown-content">
<a href="#modulesModal" data-remote="{{ url_for('trigger_modules', tree_uuid=tree_uuid, force=False) }}" <a href="#modulesModal" data-remote="{{ url_for('trigger_modules', tree_uuid=tree_uuid, force=False) }}"
data-bs-toggle="modal" data-bs-target="#modulesModal" role="button">Third Party Reports</a> data-bs-toggle="modal" data-bs-target="#modulesModal" role="button"
</li> title="Lookups from supported 3rd party services">Third Party Reports</a>
<li class="list-group-item">
<a href="#historyModal" data-remote="{{ url_for('historical_lookups', tree_uuid=tree_uuid, force=False) }}" <a href="#historyModal" data-remote="{{ url_for('historical_lookups', tree_uuid=tree_uuid, force=False) }}"
data-bs-toggle="modal" data-bs-target="#historyModal" role="button">Historical lookups</a> data-bs-toggle="modal" data-bs-target="#historyModal" role="button"
</li> title="Historical data and context about this capture ">Historical lookups</a>
<li class="list-group-item">
<a href="#hashlookupModal" data-remote="{{ url_for('hashlookup', tree_uuid=tree_uuid) }}" <a href="#hashlookupModal" data-remote="{{ url_for('hashlookup', tree_uuid=tree_uuid) }}"
data-bs-toggle="modal" data-bs-target="#hashlookupModal" role="button">Hashlookup hits</a> data-bs-toggle="modal" data-bs-target="#hashlookupModal" role="button"
</li> title="Hits in Hashlookup ">Hashlookup hits</a>
</ul>
</div>
<div class="vr"></div>
<div class="col-md">
<ul class="list-group list-group-flush">
<li class="list-group-item">
<a href="#urlsInPageModal" data-remote="{{ url_for('urls_rendered_page', tree_uuid=tree_uuid) }}"
data-bs-toggle="modal" data-bs-target="#urlsInPageModal" role="button">Subsequent Captures</a>
</li>
<li class="list-group-item">
<a href="{{ url_for('recapture', tree_uuid=tree_uuid) }}" role="button">Re-Capture</a>
</li>
<li class="list-group-item">
<a href="#downloadModal" data-bs-toggle="modal"
data-bs-target="#downloadModal" role="button">Download elements</a>
</li>
<li class="list-group-item">
<a href="#bodyHashesModal" data-remote="{{ url_for('tree_body_hashes', tree_uuid=tree_uuid) }}" <a href="#bodyHashesModal" data-remote="{{ url_for('tree_body_hashes', tree_uuid=tree_uuid) }}"
data-bs-toggle="modal" data-bs-target="#bodyHashesModal" role="button">Ressources Capture</a> data-bs-toggle="modal" data-bs-target="#bodyHashesModal" role="button"
</li> title="All ressources contained in the tree">Ressources Capture</a>
<li class="list-group-item">
<a href="#faviconsModal" data-remote="{{ url_for('tree_favicons', tree_uuid=tree_uuid) }}" <a href="#faviconsModal" data-remote="{{ url_for('tree_favicons', tree_uuid=tree_uuid) }}"
data-bs-toggle="modal" data-bs-target="#faviconsModal" role="button">Favicons Capture</a> data-bs-toggle="modal" data-bs-target="#faviconsModal" role="button"
</li> title="Favicons found on the rendered page">Favicons Capture</a>
<li class="list-group-item">
<a href="#captureHashesTypesModal" data-remote="{{ url_for('tree_capture_hashes_types', tree_uuid=tree_uuid) }}" <a href="#captureHashesTypesModal" data-remote="{{ url_for('tree_capture_hashes_types', tree_uuid=tree_uuid) }}"
data-bs-toggle="modal" data-bs-target="#captureHashesTypesModal" role="button">Capture hashes types</a> data-bs-toggle="modal" data-bs-target="#captureHashesTypesModal" role="button"
</li> title="Compare hashes of the rendered page">Capture hashes types</a>
<li class="list-group-item">
<a href="#identifiersModal" data-remote="{{ url_for('tree_identifiers', tree_uuid=tree_uuid) }}" <a href="#identifiersModal" data-remote="{{ url_for('tree_identifiers', tree_uuid=tree_uuid) }}"
data-bs-toggle="modal" data-bs-target="#identifiersModal" role="button">Identifiers Capture</a> data-bs-toggle="modal" data-bs-target="#identifiersModal" role="button"
</li> title="Identifiers found on the rendered page">Identifiers Capture</a>
</ul>
</div> </div>
</div>
<div id="actions-menu" class="dropdown">
<button class="dropbtn">Actions</button>
<div id="actions-menu-content" class="dropdown-content">
<a href="#urlsInPageModal" data-remote="{{ url_for('urls_rendered_page', tree_uuid=tree_uuid) }}"
data-bs-toggle="modal" data-bs-target="#urlsInPageModal" role="button"
title="Start a capture from one of the URLs rendered in the page">Subsequent Captures</a>
<a href="{{ url_for('recapture', tree_uuid=tree_uuid) }}" role="button"
title="Submit the URL again">Re-Capture</a>
<a href="#downloadModal" data-bs-toggle="modal" data-bs-target="#downloadModal" role="button"
title="Download specific elements of the capture">Download elements</a>
</div>
</div>
{% if current_user.is_authenticated %} {% if current_user.is_authenticated %}
<div class="vr"></div> <div id="admin-menu" class="dropdown">
<div class="col-md"> <button class="dropbtn">Admin only</button>
<ul class="list-group list-group-flush"> <div id="admin-menu-content" class="dropdown-content">
<li class="list-group-item"> <a href="{{ url_for('rebuild_tree', tree_uuid=tree_uuid) }}" role="button">Rebuild capture</a>
<a href="#adminModal" data-bs-toggle="modal" <a href="{{ url_for('hide_capture', tree_uuid=tree_uuid) }}" role="button">Hide capture</a>
data-bs-target="#adminModal" role="button">Admin tasks</a> <a href="{{ url_for('remove_capture', tree_uuid=tree_uuid) }}" role="button">Remove capture</a>
</li>
{% if misp_push%} {% if misp_push%}
<li class="list-group-item">
<a href="#mispPushModal" data-remote="{{ url_for('web_misp_push_view', tree_uuid=tree_uuid) }}" <a href="#mispPushModal" data-remote="{{ url_for('web_misp_push_view', tree_uuid=tree_uuid) }}"
data-bs-toggle="modal" data-bs-target="#mispPushModal" role="button">Prepare push to MISP</a> data-bs-toggle="modal" data-bs-target="#mispPushModal" role="button">Prepare push to MISP</a>
</li>
{% endif %} {% endif %}
{% if misp_lookup%} {% if misp_lookup%}
<li class="list-group-item">
<a href="#mispLookupModal" data-remote="{{ url_for('web_misp_lookup_view', tree_uuid=tree_uuid) }}" <a href="#mispLookupModal" data-remote="{{ url_for('web_misp_lookup_view', tree_uuid=tree_uuid) }}"
data-bs-toggle="modal" data-bs-target="#mispLookupModal" role="button">Search events on MISP</a> data-bs-toggle="modal" data-bs-target="#mispLookupModal" role="button">Search events on MISP</a>
</li>
{% endif %} {% endif %}
</ul> <a href="{{ url_for('logout') }}" role="button" style="color: red">Logout</a>
</div>
</div> </div>
{% endif %} {% endif %}
{%if enable_categorization or enable_bookmark or enable_context_by_users %} {%if enable_categorization or enable_bookmark or enable_context_by_users %}
<div class="vr"></div> <div id="extra-menu" class="dropdown">
<div class="col-md"> <button class="dropbtn">Extras</button>
<ul class="list-group list-group-flush"> <div id="extra-menu-content" class="dropdown-content">
{% if enable_categorization %} {% if enable_categorization %}
<li class="list-group-item">
<a href="#categoriesModal" data-remote="{{ url_for('categories_capture', tree_uuid=tree_uuid) }}" <a href="#categoriesModal" data-remote="{{ url_for('categories_capture', tree_uuid=tree_uuid) }}"
data-bs-toggle="modal" data-bs-target="#categoriesModal" role="button">Manage categories</a> data-bs-toggle="modal" data-bs-target="#categoriesModal" role="button">Manage categories</a>
</li>
{% endif %} {% endif %}
{% if enable_bookmark %} {% if enable_bookmark %}
<li class="list-group-item">
<a href="#/" role="button" onclick="UnbookmarkAllNodes();">Unbookmark all nodes</a> <a href="#/" role="button" onclick="UnbookmarkAllNodes();">Unbookmark all nodes</a>
</li>
{% endif %} {% endif %}
{% if enable_context_by_users %} {% if enable_context_by_users %}
<li class="list-group-item">
<a href="#/" role="button" onclick="MarkAsKnown('{{ tree_uuid }}');">Mark all the captures' entries as known</a> <a href="#/" role="button" onclick="MarkAsKnown('{{ tree_uuid }}');">Mark all the captures' entries as known</a>
</li>
{% endif %} {% endif %}
</ul> </div>
</div> </div>
{% endif %} {% endif %}
<a id="help" href="https://www.lookyloo.eu/docs/main/usage.html#_investigate_a_capture" role="button" title="Lookyloo Manual">?</a>
</div> </div>
</div> </div>
</div> </div>
@ -513,6 +509,7 @@
</div> </div>
</div> </div>
<!-- Modals --> <!-- Modals -->
<div class="modal fade" id="detailsModal" tabindex="-1" role="dialog"> <div class="modal fade" id="detailsModal" tabindex="-1" role="dialog">
@ -841,7 +838,7 @@
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h4 class="modal-title" id="historyModalLabel"> <h4 class="modal-title" id="historyModalLabel">
Historical data and contex about this capture Historical data and context about this capture
</h4> </h4>
</br> </br>
<button type="button" class="btn btn-close" data-bs-dismiss="modal" aria-label="Close"></button> <button type="button" class="btn btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
@ -902,39 +899,6 @@
</div> </div>
</div> </div>
<div class="modal fade" id="adminModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="adminModalLabel">
RUn admin only tasks on the capture
</h4>
</br>
<button type="button" class="btn btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
</br>
<div class="modal-body">
<ul>
<li>
<a href="{{ url_for('rebuild_tree', tree_uuid=tree_uuid) }}" role="button">Rebuild capture</a>
</li>
<li>
<a href="{{ url_for('hide_capture', tree_uuid=tree_uuid) }}" role="button">Hide capture</a>
</li>
<li>
<a href="{{ url_for('remove_capture', tree_uuid=tree_uuid) }}" role="button">Remove capture</a>
</li>
<li>
<a href="{{ url_for('logout') }}" role="button">Logout</a>
</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="hashlookupModal" tabindex="-1" role="dialog"> <div class="modal fade" id="hashlookupModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-xl" role="document"> <div class="modal-dialog modal-xl" role="document">
<div class="modal-content"> <div class="modal-content">