From e53953001489f8e7cce491787fdad60eafd87fad Mon Sep 17 00:00:00 2001
From: Ad Schellevis <ad@opnsense.org>
Date: Wed, 10 Oct 2018 11:06:08 +0200
Subject: [PATCH] firewall/live log, add direction icon in grid and show icons
 in detail view (since we don't have a legend on screen), for
 https://github.com/opnsense/core/issues/2804

---
 .../views/OPNsense/Diagnostics/fw_log.volt    | 24 +++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/opnsense/mvc/app/views/OPNsense/Diagnostics/fw_log.volt b/src/opnsense/mvc/app/views/OPNsense/Diagnostics/fw_log.volt
index 31a611923..0ab8c6fe7 100644
--- a/src/opnsense/mvc/app/views/OPNsense/Diagnostics/fw_log.volt
+++ b/src/opnsense/mvc/app/views/OPNsense/Diagnostics/fw_log.volt
@@ -28,7 +28,7 @@ POSSIBILITY OF SUCH DAMAGE.
 
 <script>
     $( document ).ready(function() {
-        var field_type_icons = {'pass': 'fa-play', 'block': 'fa-ban'}
+        var field_type_icons = {'pass': 'fa-play', 'block': 'fa-ban', 'in': 'fa-arrow-right', 'out': 'fa-arrow-left'}
         var interface_descriptions = {};
         function fetch_log(){
             var record_spec = [];
@@ -105,14 +105,33 @@ POSSIBILITY OF SUCH DAMAGE.
                         var sender_tr = $(this).parent().parent();
                         var sender_details = sender_tr.data('details');
                         var hidden_columns = ['__spec__', '__host__', '__digest__'];
+                        var map_icon = ['dir', 'action'];
                         var sorted_keys = Object.keys(sender_details).sort();
                         var tbl = $('<table class="table table-condensed table-hover"/>');
                         var tbl_tbody = $("<tbody/>");
                         for (i=0 ; i < sorted_keys.length; i++) {
                             if (hidden_columns.indexOf(sorted_keys[i]) === -1 ) {
                                 var row = $("<tr/>");
+                                var icon = null;
+                                if (map_icon.indexOf(sorted_keys[i]) !== -1) {
+                                    if (field_type_icons[sender_details[sorted_keys[i]]] !== undefined) {
+                                        icon = $("<i/>");
+                                        icon.addClass("fa").addClass(field_type_icons[sender_details[sorted_keys[i]]]);
+                                    }
+                                }
                                 row.append($("<td/>").text(sorted_keys[i]));
-                                row.append($("<td/>").addClass("act_info_fld_"+sorted_keys[i]).text(sender_details[sorted_keys[i]]));
+                                if (icon === null) {
+                                  row.append($("<td/>").addClass("act_info_fld_"+sorted_keys[i]).text(
+                                    sender_details[sorted_keys[i]]
+                                  ));
+                                } else {
+                                  row.append($("<td/>")
+                                      .append(icon)
+                                      .append($("<span/>").addClass("act_info_fld_"+sorted_keys[i]).text(
+                                        " [" + sender_details[sorted_keys[i]] + "]"
+                                      ))
+                                  );
+                                }
                                 tbl_tbody.append(row);
                             }
                         }
@@ -237,6 +256,7 @@ POSSIBILITY OF SUCH DAMAGE.
                               <th class="hidden" data-column-id="__digest__" data-type="string">{{ lang._('Hash') }}</th>
                               <th class="data-center" data-column-id="action" data-type="icon"></th>
                               <th data-column-id="interface" data-type="interface">{{ lang._('Interface') }}</th>
+                              <th data-column-id="dir" data-type="icon"></th>
                               <th data-column-id="__timestamp__" data-type="string">{{ lang._('Time') }}</th>
                               <th data-column-id="src" data-type="address">{{ lang._('Source') }}</th>
                               <th data-column-id="dst" data-type="address">{{ lang._('Destination') }}</th>