Improve how the events from Threatr are displayed

PiRogueToolSuite · Sep 22, 2024 · 15b29a5 · 15b29a5
1 parent f78e9e9
commit 15b29a5
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 43 deletions.
diff --git a/colander/core/templatetags/colander_tags.py b/colander/core/templatetags/colander_tags.py
@@ -1,8 +1,12 @@
+import datetime
 import json
 from base64 import urlsafe_b64encode
 from datetime import timedelta
 
 from django import template
+from django.utils.dateparse import parse_datetime
+from django.utils.timesince import timeuntil
+from rest_framework.fields import DateTimeField
 
 register = template.Library()
 
@@ -40,6 +44,18 @@ def to_b64(instance):
 def to_humanized_duration(instance):
     return "{:0>8}".format(str(timedelta(seconds=int(instance))))
 
+@register.filter(name="to_datetime")
+def to_datetime(instance):
+    if not instance or type(instance) is not str:
+        return instance
+    return parse_datetime(str(instance))
+
+@register.filter(name="humanize_event_duration")
+def to_humanized_event_duration(instance):
+    start = parse_datetime(instance.get('first_seen'))
+    end = parse_datetime(instance.get('last_seen'))
+    return timeuntil(end, start)
+
 @register.filter(name="to_cyberchef_input")
 def to_cyberchef_input(instance):
     if type(instance) is not str:

diff --git a/colander/static/css/project.css b/colander/static/css/project.css
@@ -8,7 +8,7 @@
   color: #696868; }
 
 .bg-secondary-light {
-  background-color: rgba(169, 145, 212, 0.1) !important; }
+  background-color: #eeecf3 !important; }
 
 .text-small {
   font-size: 0.72rem; }

diff --git a/colander/static/scss/_custom_bootstrap_variables.scss b/colander/static/scss/_custom_bootstrap_variables.scss
@@ -64,7 +64,7 @@ $popover-body-padding-y: 0.5*$spacer;
 }
 
 .bg-secondary-light {
-  background-color: rgba($secondary, 0.1) !important;
+  background-color: #eeecf3 !important;
 }
 .text-small {
   font-size: $font-size-base * 0.9;

diff --git a/colander/templates/pages/investigate/base.html b/colander/templates/pages/investigate/base.html
@@ -153,53 +153,19 @@ <h2>We are processing your request</h2>
                 <thead class="bg-secondary-light">
                 <tr>
                   <th>Type</th>
-                  <th>Event</th>
-                  <th>Time period</th>
-                  <th>Actions</th>
+                  <th><i class="nf nf-fa-bolt"></i> Event</th>
+                  <th class="text-left"><i class="nf nf-fa-clock_o"></i> Last seen</th>
+                  <th class="text-center"><i class="nf nf-fa-calendar"></i> Time period</th>
+                  <th class="text-end">Actions</th>
                 </tr>
                 </thead>
                 <tbody>
-                {% for entity in results.events %}
-                  <tr>
-                    <td>
-                      {% if entity.type.nf_icon %}<i class="text-primary nf {{ entity.type.nf_icon }}"></i>
-                      {% else %}<i class="fas fa-rocket text-primary fa-sm fa-fw"></i>{% endif %}
-                      <b>{{ entity.type.name }}</b>
-                    </td>
-                    <td>
-                      {{ entity.name }}
-                      {% if entity.attributes %}
-                        <a class="text-primary" data-bs-container="body" data-bs-toggle="popover"
-                           data-bs-placement="right" title="Properties" data-bs-trigger="hover focus"
-                           data-bs-content-id="popover-content-{{ entity.id }}">
-                          <i class="nf nf-fa-list" aria-hidden="true"></i>
-                        </a>
-                        <div id="popover-content-{{ entity.id }}" class="d-none">
-                          <ul class='text-start list-unstyled m-0'>
-                            {% for k_, v_ in entity.attributes.items %}
-                              {% if "tag" not in k_ %}
-                                <li><b>{{ k_|to_title }}</b>: <span class="font-monospace">{{ v_ }}</span></li>
-                              {% endif %}
-                            {% endfor %}
-                          </ul>
-                        </div>
-                      {% endif %}
-                    </td>
-                    <td>{{ entity.first_seen }} - {{ entity.last_seen }} ({{ entity.count }}
-                      time{{ entity.count|pluralize }})
-                    </td>
-                    <td class="text-end">
-                      <button class="btn btn-sm bg-primary text-white investigate-add-entity-btn"
-                              data-bs-toggle="tooltip" data-bs-title="Import to the current case"
-                              type="button" data-obj-id="{{ entity.id }}">
-                        <i class="nf nf-fa-plus"></i>
-                      </button>
-                    </td>
-                  </tr>
+                {% for event in results.events %}
+                  {% include 'pages/investigate/generic_event_row.html' %}
                 {% endfor %}
                 </tbody>
               </table>
-            </div>
+              </div>
             </div>
           {% endif %}
           {% if results.reports %}

diff --git a/colander/templates/pages/investigate/generic_event_row.html b/colander/templates/pages/investigate/generic_event_row.html
@@ -0,0 +1,62 @@
+{% load i18n %}
+{% load static %}
+{% load humanize %}
+{% load colander_tags %}
+
+<tr class=" align-middle">
+  <td class="col-2">
+    {% if event.type.nf_icon %}<i class="text-primary nf {{ event.type.nf_icon }}"></i>
+    {% else %}<i class="fas fa-rocket text-primary fa-sm fa-fw"></i>{% endif %}
+    <b>{{ event.type.name }}</b>
+  </td>
+  <td class="col">
+    <span class="font-monospace text-code">{{ event.name|truncatechars:128 }}</span>
+    {% if event.attributes %}
+      <a class="text-primary" data-bs-container="body" data-bs-toggle="popover"
+         data-bs-placement="right" title="Properties" data-bs-trigger="hover focus"
+         data-bs-content-id="popover-content-{{ event.id }}">
+        <i class="nf nf-fa-list" aria-hidden="true"></i>
+      </a>
+      <div id="popover-content-{{ event.id }}" class="d-none">
+        <ul class='text-start list-unstyled m-0'>
+          {% for k_, v_ in event.attributes.items %}
+            {% if "tag" not in k_ %}
+              <li><b>{{ k_|to_title }}</b>: <span class="font-monospace">{{ v_ }}</span></li>
+            {% endif %}
+          {% endfor %}
+        </ul>
+      </div>
+    {% endif %}
+  </td>
+  <td class="col-2 text-start">
+    <span class="text-muted">
+      {{ event.last_seen|to_datetime|naturaltime }}
+    </span>
+  </td>
+  <td class="col-4 text-center p-2">
+    <div class="position-relative m-2">
+      <div class="progress" style="height: 2px;">
+        <div class="progress-bar" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
+      </div>
+      <div class="p-2 position-absolute top-0 start-0 translate-middle badge bg-secondary-light border border-primary text-primary rounded-pill">
+        <i class="nf nf-fa-calendar"></i>
+        {{ event.first_seen|to_datetime }}
+      </div>
+      <div class="p-1 position-absolute top-0 start-50 translate-middle badge bg-secondary-light border border-dark text-dark rounded-pill">
+        <span class="m-1"><i class="nf nf-fa-bolt"></i> {{ event.count }}</span>
+        <span class="m-1"><i class="nf nf-md-clock_start"></i> {{ event|humanize_event_duration }}</span>
+      </div>
+      <div class="p-2 position-absolute top-0 start-100 translate-middle badge bg-secondary-light border border-primary text-primary rounded-pill">
+        <i class="nf nf-fa-calendar"></i>
+        {{ event.last_seen|to_datetime }}
+      </div>
+    </div>
+  </td>
+  <td class="col-1 text-end">
+    <button class="btn btn-sm bg-primary text-white investigate-add-entity-btn"
+            data-bs-toggle="tooltip" data-bs-title="Import to the current case"
+            type="button" data-obj-id="{{ event.id }}">
+      <i class="nf nf-fa-plus"></i>
+    </button>
+  </td>
+</tr>