From aed71750dfafc55d9bf0c894b368df7bc4adff8c Mon Sep 17 00:00:00 2001
From: Davide Arcuri <davide.arcuri@leonardo.com>
Date: Thu, 12 Sep 2024 16:31:02 +0200
Subject: [PATCH] offcanvas left sidebar

---
 orochi/static/css/style.css         |  14 +--
 orochi/templates/base.html          | 154 +++++++++++++++-------------
 orochi/templates/website/index.html |  61 ++++++-----
 orochi/website/views.py             |   2 +-
 4 files changed, 117 insertions(+), 114 deletions(-)

diff --git a/orochi/static/css/style.css b/orochi/static/css/style.css
index 65567987..c1bb7c1a 100644
--- a/orochi/static/css/style.css
+++ b/orochi/static/css/style.css
@@ -32,18 +32,6 @@ a.navbar-brand {
   ) !important;
 }
 
-/********************************************************
-  MOVE DOWN FROM TITLE [OVVERRIDE DASHBOARD]
-********************************************************/
-
-.sidebar {
-  padding: 88px 0 0; /* Height of navbar */
-}
-
-main {
-  padding-top: 20px;
-}
-
 /********************************************************
   COLOR FOR CHECKBOXES
 ********************************************************/
@@ -287,7 +275,7 @@ div.wunderbaum {
 DATATABLE MIN HEIGHT
 ********************************************************/
 
-.dataTables_scrollBody {
+.dt-scroll-body {
   max-height: unset !important;
   height: unset !important;
 }
diff --git a/orochi/templates/base.html b/orochi/templates/base.html
index 715649d8..a75466bb 100644
--- a/orochi/templates/base.html
+++ b/orochi/templates/base.html
@@ -28,6 +28,13 @@
   <div class="container-fluid pb-3">
     <header
       class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-around py-3 mb-4 border-bottom">
+
+      {% if dumps %}
+      <a class="nav-link link-body-emphasis" data-bs-toggle="offcanvas" data-bs-target="#sidemenu" aria-controls="sidemenu">
+        <i class="fas fa-xl fa-gamepad bi d-block mx-auto mb-1"></i>{% trans "Main" %}
+      </a>
+      {% endif %}
+
       <div class="ms-5">
         <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-black text-decoration-none">
           <span id="logo"><span id="first-letter">O</span>rochi</span>
@@ -178,98 +185,101 @@
     </header>
 
     {% block fullpage %}
-    <div class="d-grid gap-3" style="grid-template-columns: 1fr 3fr;">
-      <div class="bg-body-tertiary border rounded-3" style="min-width: 380px;">
-        {% block sidebar %}{% endblock sidebar %}
-      </div>
-      <div class="bg-body-tertiary border rounded-3" style="overflow: scroll;">
-        {% block content %}{% endblock content %}
-      </div>
+    <div class="offcanvas offcanvas-start" tabindex="-1" id="sidemenu" aria-labelledby="sidemenuLabel">
+      {% block sidebar %}{% endblock sidebar %}
+    </div>
+    <div class="container-fluid bg-body-tertiary border">
+      {% block content %}{% endblock content %}
+    </div>
+    <div class="offcanvas offcanvas-end" tabindex="-1" id="leftNote" aria-labelledby="leftNoteLabel">
+
       {% block offcanvas %} {% endblock offcanvas %}
     </div>
-    {% endblock fullpage %}
 
-    {% block modal %}
-    {% endblock modal %}
+  </div>
+  {% endblock fullpage %}
 
-    {% block javascript %}
-    <script defer src="{% static 'js/handlebars/handlebars.runtime.js' %}" type="text/javascript"
-      language="javascript"></script>
-    <script defer src="{% static 'js/handlebars/plugins.js' %}" type="text/javascript" language="javascript"></script>
-    <script defer src="{% static 'js/handlebars/maxmind.js' %}" type="text/javascript" language="javascript"></script>
-    <script defer src="{% static 'js/handlebars/vt.js' %}" type="text/javascript" language="javascript"></script>
-    <script defer src="{% static 'js/fontawesome/all.min.js' %}" type="text/javascript" language="javascript"></script>
-    <script src="{% static 'js/jquery-3.5.1.js' %}" type="text/javascript" language="javascript"></script>
-    <script src="{% static 'js/bootstrap/bootstrap.bundle.min.js' %}" type="text/javascript"
-      language="javascript"></script>
-    <script src="{% static 'js/datatables/dataTables.js' %}" type="text/javascript" language="javascript"></script>
-    <script src="{% static 'js/wunderbaum/wunderbaum.umd.min.js' %}" type="text/javascript"
-      language="javascript"></script>
-    <script src="{% static 'js/datatables/dataTables.bootstrap5.js' %}" type="text/javascript"
-      language="javascript"></script>
-    <script src="{% static 'js/datatables/dataTables.checkboxes.min.js' %}" type="text/javascript"
-      language="javascript"></script>
-    <script src="{% static 'js/bootbox/bootbox.min.js' %}" type="text/javascript" language="javascript"></script>
-    <script src="{% static 'js/toast/toast.js' %}" type="text/javascript" language="javascript"></script>
-    <script src="{% static 'js/jscolor/jscolor.js' %}" type="text/javascript" language="javascript"></script>
-    <script src="{% static 'js/marked/marked.min.js' %}" type="text/javascript" language="javascript"></script>
-    <script src="{% static 'js/jsoneditor/jsoneditor.min.js' %}"></script>
-    <script type="text/javascript">
+  {% block modal %}
+  {% endblock modal %}
 
-      $(document).ready(function () {
+  {% block javascript %}
+  <script defer src="{% static 'js/handlebars/handlebars.runtime.js' %}" type="text/javascript"
+    language="javascript"></script>
+  <script defer src="{% static 'js/handlebars/plugins.js' %}" type="text/javascript" language="javascript"></script>
+  <script defer src="{% static 'js/handlebars/maxmind.js' %}" type="text/javascript" language="javascript"></script>
+  <script defer src="{% static 'js/handlebars/vt.js' %}" type="text/javascript" language="javascript"></script>
+  <script defer src="{% static 'js/fontawesome/all.min.js' %}" type="text/javascript" language="javascript"></script>
+  <script src="{% static 'js/jquery-3.5.1.js' %}" type="text/javascript" language="javascript"></script>
+  <script src="{% static 'js/bootstrap/bootstrap.bundle.min.js' %}" type="text/javascript"
+    language="javascript"></script>
+  <script src="{% static 'js/datatables/dataTables.js' %}" type="text/javascript" language="javascript"></script>
+  <script src="{% static 'js/wunderbaum/wunderbaum.umd.min.js' %}" type="text/javascript"
+    language="javascript"></script>
+  <script src="{% static 'js/datatables/dataTables.bootstrap5.js' %}" type="text/javascript"
+    language="javascript"></script>
+  <script src="{% static 'js/datatables/dataTables.checkboxes.min.js' %}" type="text/javascript"
+    language="javascript"></script>
+  <script src="{% static 'js/bootbox/bootbox.min.js' %}" type="text/javascript" language="javascript"></script>
+  <script src="{% static 'js/toast/toast.js' %}" type="text/javascript" language="javascript"></script>
+  <script src="{% static 'js/jscolor/jscolor.js' %}" type="text/javascript" language="javascript"></script>
+  <script src="{% static 'js/marked/marked.min.js' %}" type="text/javascript" language="javascript"></script>
+  <script src="{% static 'js/jsoneditor/jsoneditor.min.js' %}"></script>
+  <script type="text/javascript">
 
-        // TOOLTIP
-        $('[data-toggle="tooltip"]').tooltip()
+    $(document).ready(function () {
 
-        // PICK AUTOREFRESH FROM LOCAL STORAGE
-        var autorefresh = localStorage.getItem("autorefresh");
-        if (autorefresh == true || autorefresh == "true") {
-          $("#autorefresh").prop('checked', true);
-        }
+      // TOOLTIP
+      $('[data-toggle="tooltip"]').tooltip()
 
-        // CHANGE CHECKBOX SETS VALUE
-        $(document).on("change", "#autorefresh", function () {
-          localStorage.setItem("autorefresh", $("#autorefresh").prop("checked"))
-        });
+      // PICK AUTOREFRESH FROM LOCAL STORAGE
+      var autorefresh = localStorage.getItem("autorefresh");
+      if (autorefresh == true || autorefresh == "true") {
+        $("#autorefresh").prop('checked', true);
+      }
 
-        // CHANGELOG
-        $(document).on("click", "#changelog", function () {
-          $.get("{% url 'api:changelog' %}")
-            .done(function (data) {
-              bootbox.alert({
-                message: marked.parse(data.note),
-                size: 'large'
-              });
-            });
-        });
+      // CHANGE CHECKBOX SETS VALUE
+      $(document).on("change", "#autorefresh", function () {
+        localStorage.setItem("autorefresh", $("#autorefresh").prop("checked"))
+      });
 
-        // TASK STATUS
-        setInterval(function () {
-          $.ajax({
-            url: "{% url 'api:dask_status' %}",
-            success: function (data) {
-              $("#tasks_running").html(data);
-            },
-            timeout: 2000
+      // CHANGELOG
+      $(document).on("click", "#changelog", function () {
+        $.get("{% url 'api:changelog' %}")
+          .done(function (data) {
+            bootbox.alert({
+              message: marked.parse(data.note),
+              size: 'large'
+            });
           });
-        }, 60000);
+      });
+
+      // TASK STATUS
+      setInterval(function () {
+        $.ajax({
+          url: "{% url 'api:dask_status' %}",
+          success: function (data) {
+            $("#tasks_running").html(data.running);
+          },
+          timeout: 2000
+        });
+      }, 60000);
 
-        // ABOUT
-        $(document).on("click", "#about", function () {
-          bootbox.alert({
-            message: "\
+      // ABOUT
+      $(document).on("click", "#about", function () {
+        bootbox.alert({
+          message: "\
             <img src=\"{% static 'images/logo.png' %}\" width=\"100%\" class=\"rounded mx-auto d-block\" />\
             <p style=\"text-align:center\">\
             More info: <a href=\"https://github.com/LDO-CERT/orochi\" target=\"_blank\">Orochi</a>\
             <br>\
             <a href=\"https://github.com/garanews\" target=\"_blank\">@garanews</a> - <a href=\"https://github.com/dadokkio\" target=\"_blank\">@dadokkio</a>\
             </p>",
-            size: 'large'
-          });
+          size: 'large'
         });
       });
-    </script>
-    {% endblock javascript %}
+    });
+  </script>
+  {% endblock javascript %}
 </body>
 
 </html>
diff --git a/orochi/templates/website/index.html b/orochi/templates/website/index.html
index 2d5faea2..2dd6ae9e 100644
--- a/orochi/templates/website/index.html
+++ b/orochi/templates/website/index.html
@@ -11,7 +11,13 @@
 {% endblock %}
 
 {% block sidebar %}
-<h6 class="sidebar-heading d-flex justify-content-between px-3 mt-4 mb-1 text-muted">
+<div class="offcanvas-header">
+    <h1 class="offcanvas-title" id="sidemenuLabel">
+        <span id="logo"><span id="first-letter">O</span>rochi</span>
+    </h1>
+    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"></button>
+</div>
+<div class="offcanvas-body">
     <span>dumps
         {% if not request.user|has_group:"ReadOnly" %}
         <button id="new-index" type="button" class="btn btn-outline-success btn-sm">
@@ -23,16 +29,17 @@ <h6 class="sidebar-heading d-flex justify-content-between px-3 mt-4 mb-1 text-mu
         {% endif %}
     </span>
     <input type="text" id="filter_dump" name="filter_dump" style="width: 60%;" class="form-control form-control-sm" placeholder="Filter">
-</h6>
-{% include "website/partial_indices.html" %}
-<hr />
-<h6 class="sidebar-heading d-flex justify-content-between px-3 mt-4 mb-1 text-muted">
-    <span>plugins</span>
-    <input type="text" id="filter_plugin" name="filter_plugin" style="width: 60%;" class="form-control form-control-sm" placeholder="Filter">
-</h6>
-<div id="plugin_info">
-    <ul class="nav flex-column" id="list_plugin">
-    </ul>
+    </h6>
+    {% include "website/partial_indices.html" %}
+    <hr />
+    <h6 class="sidebar-heading d-flex justify-content-between px-3 mt-4 mb-1 text-muted">
+        <span>plugins</span>
+        <input type="text" id="filter_plugin" name="filter_plugin" style="width: 60%;" class="form-control form-control-sm" placeholder="Filter">
+    </h6>
+    <div id="plugin_info">
+        <ul class="nav flex-column" id="list_plugin">
+        </ul>
+    </div>
 </div>
 {% endblock sidebar %}
 
@@ -45,23 +52,21 @@ <h6 class="sidebar-heading d-flex justify-content-between px-3 mt-4 mb-1 text-mu
 {% endblock content %}
 
 {% block offcanvas %}
-<div class="offcanvas offcanvas-end" tabindex="-1" id="leftNote" aria-labelledby="leftNoteLabel">
-    <div class="offcanvas-header">
-        <h5 class="offcanvas-title" id="leftNoteLabel">History Log</h5>
-        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
-    </div>
-    <div class="offcanvas-body">
-        <ul id="chat-log">
-            {% for new in news %}
-            <li>
-                <dl>
-                    <dt>{{new.date|date:"SHORT_DATETIME_FORMAT"}}</dt>
-                    <dd>{{new.text|safe}}</dd>
-                </dl>
-            </li>
-            {% endfor %}
-        </ul>
-    </div>
+<div class="offcanvas-header">
+    <h5 class="offcanvas-title" id="leftNoteLabel">History Log</h5>
+    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+</div>
+<div class="offcanvas-body">
+    <ul id="chat-log">
+        {% for new in news %}
+        <li>
+            <dl>
+                <dt>{{new.date|date:"SHORT_DATETIME_FORMAT"}}</dt>
+                <dd>{{new.text|safe}}</dd>
+            </dl>
+        </li>
+        {% endfor %}
+    </ul>
 </div>
 {% endblock offcanvas %}
 
diff --git a/orochi/website/views.py b/orochi/website/views.py
index d9dfc792..9855d131 100644
--- a/orochi/website/views.py
+++ b/orochi/website/views.py
@@ -461,7 +461,7 @@ def analysis(request):
                         ]
                         + [
                             x
-                            for x in value_columns["value"].keys()
+                            for x in value_columns.get("value", {}).keys()
                             if x not in SYSTEM_COLUMNS
                         ]
                         + ["actions"]