Begin implementing context modal

app/urls.py

@@ -52,6 +52,7 @@ from core.views.manage.threshold.threshold import (
 
 # Main tool pages
 from core.views.ui.drilldown import (  # DrilldownTableView,; Drilldown,
+    DrilldownContextModal,
     DrilldownTableView,
     ThresholdInfoModal,
 )
@@ -87,6 +88,7 @@ urlpatterns = [
     ##
     # path("drilldown/", Drilldown.as_view(), name="drilldown"),
     path("modal/", ThresholdInfoModal.as_view(), name="modal_drilldown"),
+    path("context/", DrilldownContextModal.as_view(), name="modal_context"),
     ##
     path("ui/insights/", Insights.as_view(), name="insights"),
     path("ui/insights/search/", InsightsSearch.as_view(), name="search_insights"),

core/lib/opensearch.py

@@ -153,6 +153,29 @@ def run_main_query(client, user, query, custom_query=False, index=None, size=Non
     filter_blacklisted(user, response)
     return response
 
+def parse_results(results):
+    results_parsed = []
+    if "hits" in results.keys():
+        if "hits" in results["hits"]:
+            for item in results["hits"]["hits"]:
+                element = item["_source"]
+                element["id"] = item["_id"]
+
+                # Split the timestamp into date and time
+                if "ts" not in element:
+                    if "time" in element:  # will fix data later
+                        ts = element["time"]
+                        del element["time"]
+                        element["ts"] = ts
+                if "ts" in element:
+                    ts = element["ts"]
+                    ts_spl = ts.split("T")
+                    date = ts_spl[0]
+                    time = ts_spl[1]
+                    element["date"] = date
+                    element["time"] = time
+                results_parsed.append(element)
+    return results_parsed
 
 def query_results(request, query_params, size=None):
     """
@@ -305,27 +328,8 @@ def query_results(request, query_params, size=None):
             message_class = "danger"
             return {"message": message, "class": message_class}
 
-        results_parsed = []
-        if "hits" in results.keys():
-            if "hits" in results["hits"]:
-                for item in results["hits"]["hits"]:
-                    element = item["_source"]
-                    element["id"] = item["_id"]
+        results_parsed = parse_results(results)
 
-                    # Split the timestamp into date and time
-                    if "ts" not in element:
-                        if "time" in element:  # will fix data later
-                            ts = element["time"]
-                            del element["time"]
-                            element["ts"] = ts
-                    if "ts" in element:
-                        ts = element["ts"]
-                        ts_spl = ts.split("T")
-                        date = ts_spl[0]
-                        time = ts_spl[1]
-                        element["date"] = date
-                        element["time"] = time
-                    results_parsed.append(element)
         annotate_results(results_parsed)
 
         context = {

core/templates/base.html

@@ -61,10 +61,10 @@
     <style>
       .icon { border-bottom: 0px !important;}
       .wrap {
-        white-space: pre-wrap;
+        /* white-space: pre-wrap;
         white-space: -moz-pre-wrap;
         white-space: -pre-wrap;
-        white-space: -o-pre-wrap;
+        white-space: -o-pre-wrap; */
         word-wrap: break-word;
       }
       .nowrap-parent {

core/templates/modals/context.html

@@ -0,0 +1,61 @@
+{% load index %}
+{% load static %}
+
+<script src="{% static 'modal.js' %}"></script>
+<link rel ="stylesheet" href="{% static 'tabs.css' %}">
+<script src="{% static 'tabs.js' %}"></script>
+<div id="modal" class="modal is-active is-clipped">
+  <div class="modal-background"></div>
+  <div class="modal-content">
+    <div class="box">
+      <div class="tabs is-toggle is-fullwidth is-info" id="tabs">
+        <ul>
+          <li class="is-active" data-tab="1">
+            <a>
+              <span class="icon is-small"><i class="fa-solid fa-message-arrow-down"></i></span>
+              <span>Scrollback</span>
+            </a>
+          </li>
+          <li data-tab="2">
+            <a>
+              <span class="icon is-small"><i class="fa-solid fa-messages"></i></span>
+              <span>Context</span>
+            </a>
+          </li>
+          <li data-tab="3">
+            <a>
+              <span class="icon is-small"><i class="fa-solid fa-message"></i></span>
+              <span>Message</span>
+            </a>
+          </li>
+          <li data-tab="4">
+            <a>
+              <span class="icon is-small"><i class="fa-solid fa-asterisk"></i></span>
+              <span>Info</span>
+            </a>
+          </li>
+        </ul>
+      </div>
+      <div id="tab-content">
+        <div class="is-active" data-content="1">
+          <h4 class="subtitle is-4">Scrollback of {{ channel }} on {{ net }}{{ num }}</h4>
+          scrollback
+        </div>
+        <div data-content="2">
+          <h4 class="subtitle is-4">Scrollback of {{ channel }} on {{ net }}{{ num }} around {{ ts }}</h4>
+          Context
+        </div>
+        <div data-content="3">
+          <h4 class="subtitle is-4">Message details</h4>
+          Message deetails
+        </div>
+        <div data-content="4">
+          <h4 class="subtitle is-4">Information about {{ channel }} on {{ net }}{{ num }}</h4>
+          info
+        </div>
+      </div>
+    </div>
+    <button class="modal-close is-large" aria-label="close"></button>
+    {# <script>activateButtons();</script> #}
+  </div>
+</div>

core/templates/ui/drilldown/table_results_partial.html

@@ -212,7 +212,23 @@
                               </a>
                             </td>
                           {% elif column.name == 'msg' %}
-                            <td class="{{ column.name }} wrap" style="max-width: 10em">{{ row.cells.msg }}</td>
+                            <td class="{{ column.name }} wrap" style="max-width: 10em">
+                              <a class="has-text-grey is-underlined"
+                                 hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
+                                 hx-post="{% url 'modal_context' %}"
+                                 hx-vals='{"net": "{{ row.cells.net|escapejs }}",
+                                           "num": "{{ row.cells.num|escapejs }}",
+                                           "src": "{{ row.cells.src|escapejs }}",
+                                           "nick": "{{ row.cells.nick|escapejs }}",
+                                           "channel": "{{ row.cells.channel|escapejs }}",
+                                           "time": "{{ row.cells.time|escapejs }}",
+                                           "date": "{{ row.cells.date|escapejs }}"
+                                          }'
+                                 hx-target="#modals-here" 
+                                 hx-trigger="click">
+                                {{ row.cells.msg }}
+                              </a>
+                            </td>
                           {% elif column.name == 'nick' %}
                             <td class="{{ column.name }}">
                               <div class="nowrap-parent">

core/views/ui/drilldown.py

@@ -230,6 +230,40 @@ class Drilldown(View):
         return drilldown_search(request)
 
 
+class DrilldownContextModal(APIView):
+    parser_classes = [FormParser]
+    plan_name = "drilldown"
+    template_name = "modals/context.html"
+
+    def post(self, request):
+        # if not request.user.has_plan(self.plan_name):
+        #    return JsonResponse({"success": False})
+        num = ""
+        if "net" not in request.data:
+            return JsonResponse({"success": False})
+        if "channel" not in request.data:
+            return JsonResponse({"success": False})
+        if "src" not in request.data:
+            return JsonResponse({"success": False})
+        if "time" not in request.data:
+            return JsonResponse({"success": False})
+        if "date" not in request.data:
+            return JsonResponse({"success": False})
+        if "num" in request.data:
+            num = request.data["num"]
+        net = request.data["net"]
+        channel = request.data["channel"]
+        # results = 
+        context = {
+            "net": net,
+            "channel": channel,
+            "num": num,
+            "src": request.data["src"],
+            "ts": f"{request.data['date']} {request.data['time']}",
+        }
+        return render(request, self.template_name, context)
+
+
 class ThresholdInfoModal(APIView):
     parser_classes = [FormParser]
     plan_name = "drilldown"