From bbb3a39187aba80326119e59f27677d0e9ae49e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Vinot?= <raphael@vinot.info>
Date: Tue, 27 Feb 2024 15:29:35 +0100
Subject: [PATCH] chg: Improve tables on tree and in popup

---
 lookyloo/lookyloo.py                          |  1 +
 website/web/templates/favicon_details.html    | 14 ++++++--
 website/web/templates/historical_lookups.html | 29 +++++++++++----
 website/web/templates/hostname_popup.html     | 25 ++-----------
 website/web/templates/macros.html             | 35 +++++++++++++++----
 website/web/templates/tree_body_hashes.html   |  1 +
 6 files changed, 66 insertions(+), 39 deletions(-)

diff --git a/lookyloo/lookyloo.py b/lookyloo/lookyloo.py
index f92439e1..15471e93 100644
--- a/lookyloo/lookyloo.py
+++ b/lookyloo/lookyloo.py
@@ -1081,6 +1081,7 @@ class Lookyloo():
         else:
             mimetype = ''
             b64_favicon = ''
+            mmh3_shodan = ''
 
         # For now, there is only one probabilistic hash algo for favicons, keeping it simple
         probabilistic_hash_algos = ['mmh3-shodan']
diff --git a/website/web/templates/favicon_details.html b/website/web/templates/favicon_details.html
index e5682d8f..a860f43c 100644
--- a/website/web/templates/favicon_details.html
+++ b/website/web/templates/favicon_details.html
@@ -2,9 +2,17 @@
 
 <script type="text/javascript">
   new DataTable('#faviconDetailsTable_{{favicon_sha512}}', {
-    columnDefs: [{ width: '30%', targets: 0 },
+    order: [[ 0, "desc" ]],
+    columnDefs: [{ width: '30%',
+                   targets: 0,
+                   render: (data) => {
+                    const date = new Date(data);
+                    return date.getFullYear() + '-' + (date.getMonth() + 1).toString().padStart(2, "0") + '-' + date.getDate().toString().padStart(2, "0") + ' ' + date.toTimeString();
+                   }
+                 },
                  { width: '30%', targets: 1 },
                  { width: '50%', targets: 2 }],
+
   });
 </script>
 
@@ -32,8 +40,8 @@
         </a>
       </td>
       <td>
-        <span class="d-inline-block text-truncate" style="max-width: 400px;">
-          {{ shorten_string(landing_page, 300) }}
+        <span class="d-inline-block text-break" style="max-width: 400px;">
+          {{ landing_page }}
         </span>
       </td>
     </tr>
diff --git a/website/web/templates/historical_lookups.html b/website/web/templates/historical_lookups.html
index d4fddaee..8738c2e0 100644
--- a/website/web/templates/historical_lookups.html
+++ b/website/web/templates/historical_lookups.html
@@ -6,7 +6,15 @@
 {%else%}
   {% if circl_pdns %}
     <script type="text/javascript">
-      new DataTable('#CIRCL_pdns_table');
+      new DataTable('#CIRCL_pdns_table', {
+        order: [[ 1, "desc" ]],
+        autoWidth: false,
+        columnDefs: [{ width: '15%', targets: 0 },
+                     { width: '15%', targets: 1 },
+                     { width: '5%', targets: 2 },
+                     { width: '25%', targets: 3 },
+                     { width: '40%', targets: 4 }]
+        });
     </script>
 
     <center>
@@ -26,7 +34,7 @@
             <th class="col-sm-2" scope="col">Last seen</th>
             <th class="col-sm-1" scope="col">RR Type</th>
             <th class="col-sm-2" scope="col">R Data</th>
-            <th scope="col">RR Name</th>
+            <th class="col-sm-2" scope="col">RR Name</th>
         </thead>
         <tbody>
           {%for response in responses %}
@@ -34,8 +42,8 @@
             <td>{{response.time_first_datetime}}</td>
             <td>{{response.time_last_datetime}}</td>
             <td>{{response.rrtype}}</td>
-            <td>{{response.rdata}}</td>
-            <td>{{response.rrname}}</td>
+            <td class="text-break">{{response.rdata}}</td>
+            <td class="text-break">{{response.rrname}}</td>
           </tr>
           {% endfor %}
       </table>
@@ -46,7 +54,14 @@
   {% if riskiq %}
     <hr>
     <script type="text/javascript">
-      new DataTable('#RiskIQ_pdns_table');
+      new DataTable('#RiskIQ_pdns_table', {
+        order: [[ 1, "desc" ]],
+        autoWidth: false,
+        columnDefs: [{ width: '15%', targets: 0 },
+                     { width: '15%', targets: 1 },
+                     { width: '5%', targets: 2 },
+                     { width: '65%', targets: 3 }]
+      });
     </script>
     <center>
       <h1 class="display-4">RiskIQ</h1>
@@ -59,7 +74,7 @@
           <th class="col-sm-2" scope="col">First seen</th>
           <th class="col-sm-2" scope="col">Last seen</th>
           <th class="col-sm-1" scope="col">Type</th>
-          <th scope="col">Resolve</th>
+          <th class="col-sm-2" scope="col">Resolve</th>
       </thead>
       <tbody>
         {% for entry in riskiq['results'] %}
@@ -67,7 +82,7 @@
           <td>{{entry['firstSeen']}}</td>
           <td>{{entry['lastSeen']}}</td>
           <td>{{entry['recordType']}}</td>
-          <td>{{entry['resolve']}}</td>
+          <td class="text-break">{{entry['resolve']}}</td>
         </tr>
         {% endfor %}
     </table>
diff --git a/website/web/templates/hostname_popup.html b/website/web/templates/hostname_popup.html
index 598a4b5f..3e3dedfe 100644
--- a/website/web/templates/hostname_popup.html
+++ b/website/web/templates/hostname_popup.html
@@ -15,27 +15,6 @@
 
 {% block scripts %}
   {{ super() }}
-  <script type="text/javascript">
-  $(document).ready(() => {
-    $('table.table').DataTable( {
-    "order": [[ 1, "desc" ]],
-    "paging": false,
-    "info": false,
-    "columns": [
-        { "orderable": false},
-        { "orderable": false},
-        { "orderable": false}
-    ],
-    "columnDefs": [{
-        "targets": 1,
-        "render": (data) => {
-            const date = new Date(data);
-            return date.getFullYear() + '-' + (date.getMonth() + 1).toString().padStart(2, "0") + '-' + date.getDate().toString().padStart(2, "0") + ' ' + date.toTimeString();
-        }
-    }]
-    } );
-  });
-  </script>
   <script>
     let whereAmI = (hostnode_uuid) => window.opener.LocateNode(hostnode_uuid);
     let openTreeInNewTab = (capture_uuid, hostnode_uuid=Null) => {
@@ -46,7 +25,7 @@
     }
   </script>
   <script>
-  $(document).ready(() => {
+  document.addEventListener("DOMContentLoaded", () => {
     // Grab any text in the attribute 'data-copy' and pass it to the copy function
     $('.js-copy').tooltip();
     $('.js-copy').click(function() {
@@ -57,7 +36,7 @@
   });
   </script>
   <script>
-  $(document).ready(() => {
+  document.addEventListener("DOMContentLoaded", () => {
     $(function () {
       $('[data-bs-toggle="tooltip"]').tooltip()
     })
diff --git a/website/web/templates/macros.html b/website/web/templates/macros.html
index b0555f86..351b86c8 100644
--- a/website/web/templates/macros.html
+++ b/website/web/templates/macros.html
@@ -177,7 +177,9 @@
 <p>
   The same file was seen in <b>{{ total_captures }}</b> other captures.
   </br>
-  <button class="btn btn-primary collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#captureslist_{{ identifier_for_toggle }}" aria-expanded="false" aria-controls="collapseExample">
+  <button class="btn btn-primary collapsed" type="button" data-bs-toggle="collapse"
+          data-bs-target="#captureslist_{{ identifier_for_toggle }}"
+          aria-expanded="false" aria-controls="collapseExample">
     <span class="if-collapsed">Show other captures</span>
     <span class="if-not-collapsed">Hide other captures</span>
   </button>
@@ -190,7 +192,7 @@
     {# ... on other URLs #}
     <div>
       <p>The following captures get the same file from a <b>different URL</b></p>
-      {{ other_captures_table(other_captures['different_url'], 20) }}
+      {{ other_captures_table(other_captures['different_url'], 20, identifier_for_toggle + '_same') }}
     </div>
     {% endif %}
     </br>
@@ -198,7 +200,7 @@
     {# ... on the same URL #}
     <div>
       <p>The following captures get the same file from the <b>same URL</b></p>
-      {{ other_captures_table(other_captures['same_url'], 20) }}
+      {{ other_captures_table(other_captures['same_url'], 20, identifier_for_toggle + '_different') }}
     </div>
     {% endif %}
   </div>
@@ -206,9 +208,30 @@
 {% endif %}
 {% endmacro %}
 
-{% macro other_captures_table(entries, max_entries) %}
-<div class="table-responsive">
-  <table id="table_other_captures" class="table">
+{% macro other_captures_table(entries, max_entries, identifier) %}
+ <script type="text/javascript">
+   document.addEventListener("DOMContentLoaded", () => {
+   new DataTable('#table_other_captures{{identifier}}', {
+   "order": [[ 1, "desc" ]],
+   "paging": false,
+   "info": false,
+   "columns": [
+       { "orderable": false},
+       { "orderable": false},
+       { "orderable": false}
+   ],
+   "columnDefs": [{
+       "targets": 1,
+       "render": (data) => {
+           const date = new Date(data);
+           return date.getFullYear() + '-' + (date.getMonth() + 1).toString().padStart(2, "0") + '-' + date.getDate().toString().padStart(2, "0") + ' ' + date.toTimeString();
+       }
+   }]
+   } );
+ });
+ </script>
+<div>
+  <table id="table_other_captures{{identifier}}" class="table table-striped" style="width:100%">
   <thead>
     <tr>
       <th>Title</th>
diff --git a/website/web/templates/tree_body_hashes.html b/website/web/templates/tree_body_hashes.html
index 7e754487..acfc702e 100644
--- a/website/web/templates/tree_body_hashes.html
+++ b/website/web/templates/tree_body_hashes.html
@@ -1,5 +1,6 @@
 <script type="text/javascript">
   new DataTable('#bodyHashesTable', {
+    order: [[ 0, "desc" ]],
     columnDefs: [{ width: '10%', targets: 0 },
                  { width: '10%', targets: 1 },
                  { width: '60%', targets: 2 },