Project

General

Profile

Actions
Copy link

Todo #14210

open

Proposed new Icons for Logs to make for more logical reading

Added by Jon Brown about 1 year ago. Updated about 1 year ago.

Status:
New
Priority:
Low
Assignee:
Jim Pingle
Category:
Logging
Target version:
-
Start date:
Due date:
% Done:

0%

Estimated time:
Plus Target Version:
Release Notes:
Default

Description

On the firewall logs (Status --> System Logs --> Firewall --> normal view) and probably elsewhere you use the following icons

  • Green minus in box = Easy Rule: Add to Block List
  • Green plus in box = Easy Rule: Pass this traffic

I find these icons confusing because '+' and '-' imply adding and removing from a list whereas both of these functions add to a list, either adding to a block list or adding to a pass list.

I propose using:

  • a stop sign (minus in a circle) = Easy Rule: Add to Block List
  • an arrow in a box = Easy Rule: Pass this traffic

The circle and square make it easier to distinguish between the two operations and their purpose. The stop sign implies blocking and is universal for this (definitely UK, US and Europe use this sign). The arrow in the box is also better that a plus because the arrow implies movement through.

See my example below (they are not supposed to be the final icons either just a quick mockup)

Files

Download all files
old-firewall-icons.jpg (17.2 KB) old-firewall-icons.jpg Jon Brown, 03/31/2023 04:41 AM
new-firewall-icons.jpg (36.7 KB) new-firewall-icons.jpg Jon Brown, 03/31/2023 04:41 AM
2023-03-31_08-42.png (48.5 KB) 2023-03-31_08-42.png Jim Pingle, 03/31/2023 07:44 AM
Actions
Copy link
 #1

Updated by Jim Pingle about 1 year ago

I'm open to changing the icons but personally I don't find either of those any better/worse than the current icons.

They are both in the FA version we have (fa-minus-circle, fa-arrow-square-right) but they make things even more inconsistent with other areas.

In the firewall rule list we use a checkmark (fa-check) on pass rules and an X (fa-times) on block rules. Using the circle outline versions of those looks better to me and is consistent.

Changing the icons is easy enough, just need to update the class attribute on the lines that output the easyrule links:

diff --git a/src/usr/local/www/status_logs_filter.php b/src/usr/local/www/status_logs_filter.php
index 599105f5f2..228ed9aaae 100644
--- a/src/usr/local/www/status_logs_filter.php
+++ b/src/usr/local/www/status_logs_filter.php
@@ -237,7 +237,7 @@ if (!$rawfilter) {
                                                <i class="fa fa-info icon-pointer icon-primary" onclick="javascript:resolve_with_ajax('<?="{$rawsrcip}"; ?>');" title="<?=gettext("Click to resolve")?>">
                                                </i>

-                                               <a class="fa fa-minus-square-o icon-pointer icon-primary" href="easyrule.php?<?="action=block&amp;int={$int}&amp;src={$filterent['srcip']}&amp;ipproto={$ipproto}"; ?>" title="<?=gettext("EasyRule: Add to Block List")?>">
+                                               <a class="fa fa-times-circle-o icon-pointer icon-primary" href="easyrule.php?<?="action=block&amp;int={$int}&amp;src={$filterent['srcip']}&amp;ipproto={$ipproto}"; ?>" title="<?=gettext("EasyRule: Add to Block List")?>">
                                                </a>

                                                <?=$srcstr . '<span class="RESOLVE-' . $src_htmlclass . '"></span>'?>
@@ -246,7 +246,7 @@ if (!$rawfilter) {
                                                <i class="fa fa-info icon-pointer icon-primary; ICON-<?= $dst_htmlclass; ?>" onclick="javascript:resolve_with_ajax('<?="{$rawdstip}"; ?>');" title="<?=gettext("Click to resolve")?>">
                                                </i>

-                                               <a class="fa fa-plus-square-o icon-pointer icon-primary" href="easyrule.php?<?="action=pass&amp;int={$int}&amp;proto={$proto}&amp;src={$filterent['srcip']}&amp;dst={$filterent['dstip']}&amp;dstport={$filterent['dstport']}&amp;ipproto={$ipproto}"; ?>" title="<?=gettext("EasyRule: Pass this traffic")?>">
+                                               <a class="fa fa-check-circle-o icon-pointer icon-primary" href="easyrule.php?<?="action=pass&amp;int={$int}&amp;proto={$proto}&amp;src={$filterent['srcip']}&amp;dst={$filterent['dstip']}&amp;dstport={$filterent['dstport']}&amp;ipproto={$ipproto}"; ?>" title="<?=gettext("EasyRule: Pass this traffic")?>">
                                                </a>
                                                <?=$dststr . '<span class="RESOLVE-' . $dst_htmlclass . '"></span>'?>
                                        </td>
Actions
Copy link

Also available in: Atom PDF