chg: Improve tree page (menu and stats)

pull/184/head
Raphaël Vinot 2021-03-25 18:32:48 +01:00
parent 456e999c1d
commit 88bd450b59
4 changed files with 89 additions and 67 deletions

View File

@ -272,7 +272,11 @@ class Lookyloo():
def get_statistics(self, capture_uuid: str) -> Dict[str, Any]:
'''Get the statistics of a capture.'''
ct = self.get_crawled_tree(capture_uuid)
return ct.root_hartree.stats
stats = ct.root_hartree.stats
node, distance = ct.root_hartree.hostname_tree.get_farthest_leaf()
stats['tree_depth'] = int(distance) + 1
stats['total_redirects'] = len(ct.redirects)
return stats
def get_meta(self, capture_uuid: str) -> Dict[str, str]:
'''Get the meta informations from a capture (mostly, details about the User Agent used.)'''

View File

@ -3,7 +3,7 @@
// Set the dimensions and margins of the diagram
let margin = {
top: document.getElementById('tree-details').clientHeight,
top: 20,
right: 200,
bottom: 10,
left: 90

View File

@ -1,10 +1,24 @@
<div>
{% if stats %}
{% for key, value in stats.items() %}
<dl class="row">
<dt class="col-sm-3">{{ key }}</dt>
<dd class="col-sm-3">{{ value }}</dd>
</dl>
{% endfor %}
{% endif%}
<dl class="row">
<dt class="col-sm-2">Hostnames</dt>
<dd class="col-sm-10">{{ stats['total_hostnames'] }}</dd>
<dt class="col-sm-2">Unique URLs</dt>
<dd class="col-sm-10">{{ stats['total_urls'] }}</dd>
<dt class="col-sm-2">Cookies Received</dt>
<dd class="col-sm-10">{{ stats['total_cookies_received'] }}</dd>
<dt class="col-sm-2">Cookies Sent</dt>
<dd class="col-sm-10">{{ stats['total_cookies_sent'] }}</dd>
<dt class="col-sm-2">Node Depth</dt>
<dd class="col-sm-10">{{ stats['tree_depth'] }}</dd>
<dt class="col-sm-2">Total Nodes</dt>
<dd class="col-sm-10">{{ stats['total_hostnames'] }}</dd>
<dt class="col-sm-2">Redirects</dt>
<dd class="col-sm-10">{{ stats['total_redirects'] }}</dd>
</dl>
</div>

View File

@ -88,8 +88,8 @@
});
{% else %}
window.addEventListener('DOMContentLoaded', (event) => {
let element = document.getElementById(`node_${center_node}`);
element.scrollIntoView({behavior: "smooth", block: "center", inline: "center"});
let thumbnail = document.getElementById('screenshot_thumbnail');
thumbnail.scrollIntoView({behavior: "smooth", block: "center", inline: "center"});
});
{% endif%}
</script>
@ -113,7 +113,7 @@
var capture_starttime = new Date(Date.parse("{{ start_time }}"));
window.addEventListener('DOMContentLoaded', (event) => {
document.getElementById("start_time").innerHTML =
`<b>Capture time</b>: ${capture_starttime.getFullYear()}-${("0" + (capture_starttime.getMonth() + 1)).slice(-2)}-${("0" + capture_starttime.getDate()).slice(-2)} ${capture_starttime.toLocaleTimeString()}`;
`${capture_starttime.getFullYear()}-${("0" + (capture_starttime.getMonth() + 1)).slice(-2)}-${("0" + capture_starttime.getDate()).slice(-2)} ${capture_starttime.toLocaleTimeString()}`;
});
</script>
@ -148,11 +148,32 @@
<div id=menu_content class="collapse show">
<ul class="list-unstyled components">
<li>
<a href="{{ url_for('index') }}" role="button">Go back to index</a>
<a href="#detailsModal" data-toggle="modal" data-target="#detailsModal" role="button">Capture Details</a>
</li>
<li>
<a href="#screenshotModal" data-toggle="modal" data-target="#screenshotModal" role="button">Page Screenshot</a>
</li>
<li>
<a href="#statsModal" data-remote="{{ url_for('stats', tree_uuid=tree_uuid) }}"
data-toggle="modal" data-target="#statsModal" role="button">Tree Statistics</a>
</li>
<li>
<a href="#modulesModal" data-remote="{{ url_for('trigger_modules', tree_uuid=tree_uuid, force=False) }}"
data-toggle="modal" data-target="#modulesModal" role="button">Show third party reports</a>
data-toggle="modal" data-target="#modulesModal" role="button">Third Party Reports</a>
</li>
{% if has_redirects %}
<li>
<a href="{{ url_for('redirects', tree_uuid=tree_uuid) }}" role="button">Download Redirects list</a>
</li>
{% endif %}
{% if enable_mail_notification %}
<li>
<a href="#emailModal" data-toggle="modal" data-target="#emailModal" role="button">Contact Local Administrator</a>
</li>
{% endif %}
<li>
<a href="#urlsInPageModal" data-remote="{{ url_for('urls_rendered_page', tree_uuid=tree_uuid) }}"
data-toggle="modal" data-target="#urlsInPageModal" role="button">Run Subsequent Captures</a>
</li>
{% if enable_categorization %}
<li>
@ -166,39 +187,21 @@
data-toggle="modal" data-target="#mispPushModal" role="button">Prepare push to MISP</a>
</li>
{% endif %}
<li>
<a href="#statsModal" data-remote="{{ url_for('stats', tree_uuid=tree_uuid) }}"
data-toggle="modal" data-target="#statsModal" role="button">Show Statistics</a>
</li>
{% if has_redirects %}
<li>
<a href="{{ url_for('redirects', tree_uuid=tree_uuid) }}" role="button">Download redirects</a>
</li>
{% endif %}
{% if enable_bookmark %}
<li>
<a href="#/" role="button" onclick="UnbookmarkAllNodes();">Unbookmark all nodes</a>
</li>
{% endif %}
<li>
<a href="#screenshotModal" data-toggle="modal" data-target="#screenshotModal" role="button">Show screenshot</a>
</li>
{% if enable_context_by_users %}
<li>
<a href="#/" role="button" onclick="MarkAsKnown('{{ tree_uuid }}');">Mark all the captures' entries as known</a>
</li>
{% endif %}
{% if enable_mail_notification %}
<li>
<a href="#emailModal" data-toggle="modal" data-target="#emailModal" role="button">Notify by mail</a>
</li>
{% endif %}
<li>
<a href="#urlsInPageModal" data-remote="{{ url_for('urls_rendered_page', tree_uuid=tree_uuid) }}"
data-toggle="modal" data-target="#urlsInPageModal" role="button">View URLs in rendered page</a>
<a href="https://www.lookyloo.eu/docs/main/usage.html#_investigate_a_capture" role="button">Lookyloo Manual</a>
</li>
<li>
<a href="https://www.lookyloo.eu/docs/main/usage.html#_investigate_a_capture" role="button">Documentation and usage</a>
<a href="{{ url_for('index') }}" role="button">Homepage</a>
</li>
</ul>
</div>
@ -279,44 +282,45 @@
</div>
</div>
<div id="tree-details_container" class="tree-panel-container">
<div id=tree-details class="collapse show">
<div>
<center>
<div style="display: inline">
<b>Details of the capture at the time it happened</b>
</div>
<div style="display: inline;">
<button type="button" class="btn btn-link" data-toggle="collapse" data-target="#tree-details">
<img src="{{ url_for('static', filename='up.jpg') }}"
alt="Minimize tree details" height="25" width="25" title="Collapse">
<!-- Modals -->
<div class="modal fade" id="detailsModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="screenshotModalLabel">Details of the capture at the time it happened</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</center>
</div>
<hr/>
<p title={{root_url}}><b>URL captured</b>: {{ shorten_string(root_url, 150) }}</p>
<p><b>Page title</b>: {{ page_title }}</p>
<p id="start_time"></p>
<p><b>User Agent</b>: {{ user_agent }}</p>
{% if meta %}
{% for k, v in meta.items() if k not in ['user_agent'] %}
<p><b>{{k.title()}}</b>: {{ v }}</p>
{% endfor %}
{%endif%}
<div class="modal-body">
<dl class="row">
<dt class="col-sm-2">URL captured</dt>
<dd class="col-sm-10">{{ shorten_string(root_url, 1000) }}</dd>
<dt class="col-sm-2">Page title</dt>
<dd class="col-sm-10">{{ page_title }}</dd>
<dt class="col-sm-2">Capture time</dt>
<dd class="col-sm-10" id="start_time"></dd>
<dt class="col-sm-2">User Agent</dt>
<dd class="col-sm-10">{{ user_agent }}</dd>
{% if meta %}
{% for k, v in meta.items() if k not in ['user_agent'] %}
<dt class="col-sm-2">{{k.title()}}</dt>
<dd class="col-sm-10">{{ v }}</dd>
{% endfor %}
{%endif%}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
<div style="width: 70px; float: right;">
<center>
<button type="button" class="btn btn-link" data-toggle="collapse" data-target="#tree-details">
<img src="{{ url_for('static', filename='down.jpg') }}" alt="Minimize tree details" height="40" width="40" title="Expand">
<b>Tree details</b>
</button>
</center>
</div>
</div>
<!-- Modals -->
<div class="modal fade" id="statsModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">