From d2604675533ef60c74d4f95126cabdfd38ce2db9 Mon Sep 17 00:00:00 2001
From: Monviech <79600909+Monviech@users.noreply.github.com>
Date: Mon, 2 Feb 2026 17:16:40 +0100
Subject: [PATCH] Firewall: Rules [new]: Add link to states and put it first in
 list (#9707)

---
 .../mvc/app/views/OPNsense/Firewall/filter_rule.volt  | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/opnsense/mvc/app/views/OPNsense/Firewall/filter_rule.volt b/src/opnsense/mvc/app/views/OPNsense/Firewall/filter_rule.volt
index c4dd6e1704..73eba2d677 100644
--- a/src/opnsense/mvc/app/views/OPNsense/Firewall/filter_rule.volt
+++ b/src/opnsense/mvc/app/views/OPNsense/Firewall/filter_rule.volt
@@ -523,8 +523,9 @@
                         const states  = row["states"] ?? "";
                         const packets = row["packets"] ?? "";
                         const bytes   = row["bytes"] ?? "";
+                        const uuid    = row["uuid"] ?? "";
 
-                        function render(icon, title, value, is_number = false) {
+                        function render(icon, title, value, is_number = false, link = null) {
                             if (!value || value === "0") {
                                 return "";
                             }
@@ -534,14 +535,18 @@
 
                             return `
                                 <span data-toggle="tooltip" title="${title}: ${numValue.toLocaleString()}">
-                                    <i class="fa fa-fw ${icon} text-muted"></i> ${formatted}
+                                    ${link
+                                        ? `<a href="${link}" target="_blank" rel="noopener noreferrer" id="${uuid}_states">
+                                            <i class="fa fa-fw ${icon}"></i> ${formatted}
+                                        </a>`
+                                        : `<i class="fa fa-fw ${icon}"></i> ${formatted}`}
                                 </span>
                             `;
                         }
 
                         const parts = [
+                            render("fa-chart-line", "{{ lang._('States') }}", states, true, `/ui/diagnostics/firewall/states#${uuid}`),
                             render("fa-bullseye", "{{ lang._('Evaluations') }}", evals, true),
-                            render("fa-chart-line", "{{ lang._('States') }}", states, true),
                             render("fa-box", "{{ lang._('Packets') }}", packets, true),
                             render("fa-database", "{{ lang._('Bytes') }}", bytes)
                         ].filter(Boolean);