From 11fa6a15d382c8417ffcddd130e5970dc6f24b2b Mon Sep 17 00:00:00 2001
From: Matteo Di Lorenzi <matteo.dilorenzi@nethesis.it>
Date: Thu, 15 Oct 2026 16:11:06 +0200
Subject: [PATCH] feat(dpi): add description for DPI filter and update UI
 layout

---
 src/components/standalone/dpi/DpiRules.vue      | 17 ++++++-----------
 src/i18n/en.json                                |  2 +-
 src/i18n/it.json                                |  2 +-
 src/views/standalone/security/DpiFilterView.vue |  5 ++++-
 4 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/src/components/standalone/dpi/DpiRules.vue b/src/components/standalone/dpi/DpiRules.vue
index 236ba8005..7bcf4c20b 100644
--- a/src/components/standalone/dpi/DpiRules.vue
+++ b/src/components/standalone/dpi/DpiRules.vue
@@ -235,17 +235,6 @@ function goToApplicationGroups() {
       </NeEmptyState>
     </template>
     <template v-else>
-      <div class="mb-6 flex flex-wrap items-center justify-between gap-4">
-        <p class="max-w-2xl text-sm leading-5 text-tertiary-neutral">
-          {{ t('standalone.dpi.rules_evaluation_order') }}
-        </p>
-        <NeButton kind="primary" size="lg" @click="createRule">
-          <template #prefix>
-            <FontAwesomeIcon :icon="faCirclePlus" aria-hidden="true" />
-          </template>
-          {{ t('standalone.dpi.add_rule') }}
-        </NeButton>
-      </div>
       <div class="mb-6 flex flex-wrap items-center gap-3">
         <NeTextInput
           v-model="nameFilter"
@@ -290,6 +279,12 @@ function goToApplicationGroups() {
         <NeButton v-if="isFiltered" kind="tertiary" size="lg" @click="resetFilters">
           {{ t('common.reset_filters') }}
         </NeButton>
+        <NeButton kind="primary" size="lg" class="ml-auto" @click="createRule">
+          <template #prefix>
+            <FontAwesomeIcon :icon="faCirclePlus" aria-hidden="true" />
+          </template>
+          {{ t('standalone.dpi.add_rule') }}
+        </NeButton>
       </div>
       <NeEmptyState
         v-if="!isLoading && !hasRules"
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 4dd00c8ab..647e625d8 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -1751,6 +1751,7 @@
     },
     "dpi": {
       "title": "DPI filter",
+      "description": "Deep packet inspection (DPI) analyzes network traffic to identify applications, protocols and domains. Rules can allow or block traffic, either entirely or by application group, and are evaluated from top to bottom: only the first matching rule applies.",
       "rules": "Rules",
       "application_groups": "Application groups",
       "no_application_groups_configured": "No application groups configured",
@@ -1890,7 +1891,6 @@
       "choose_application_group": "Choose application group",
       "filter_rules": "Filter rules",
       "clear_filters_to_sort_rules": "Clear the filters to reorder the rules",
-      "rules_evaluation_order": "Rules are evaluated from top to bottom and the first match wins: a rule never applies if one above it already matched the traffic.",
       "no_rules_found": "No rules found",
       "no_rules_found_description": "No rule matches the current filters. Change them or reset them to see every rule."
     },
diff --git a/src/i18n/it.json b/src/i18n/it.json
index 60b5193e9..2d6c514ad 100644
--- a/src/i18n/it.json
+++ b/src/i18n/it.json
@@ -1445,6 +1445,7 @@
       "description": "Connettere l'unità a un'istanza di hotspot manager remota."
     },
     "dpi": {
+      "description": "La deep packet inspection (DPI) analizza il traffico di rete per identificare applicazioni, protocolli e domini. Le regole possono consentire o bloccare il traffico, interamente o per gruppo di applicazioni, e vengono valutate dall’alto verso il basso: si applica solo la prima regola corrispondente.",
       "add_rule": "Aggiungi regola",
       "delete_rule": "Elimina regola",
       "application_groups": "Gruppi di applicazioni",
@@ -1585,7 +1586,6 @@
       "choose_application_group": "Scegli gruppo di applicazioni",
       "filter_rules": "Filtra regole",
       "clear_filters_to_sort_rules": "Azzera i filtri per riordinare le regole",
-      "rules_evaluation_order": "Le regole vengono valutate dall’alto verso il basso e vince la prima corrispondenza: una regola non si applica se una precedente ha già intercettato il traffico.",
       "no_rules_found": "Nessuna regola trovata",
       "no_rules_found_description": "Nessuna regola corrisponde ai filtri attuali. Modificali o azzerali per vedere tutte le regole."
     },
diff --git a/src/views/standalone/security/DpiFilterView.vue b/src/views/standalone/security/DpiFilterView.vue
index 5f56f74f0..fd20a5358 100644
--- a/src/views/standalone/security/DpiFilterView.vue
+++ b/src/views/standalone/security/DpiFilterView.vue
@@ -19,7 +19,10 @@ const { tabs, selectedTab } = useTabs([
 
 <template>
   <div class="text-sm">
-    <NeHeading tag="h3" class="mb-7">{{ t('standalone.dpi.title') }}</NeHeading>
+    <NeHeading tag="h3" class="mb-8">{{ t('standalone.dpi.title') }}</NeHeading>
+    <p class="mb-4 max-w-2xl text-gray-500 dark:text-gray-400">
+      {{ t('standalone.dpi.description') }}
+    </p>
     <NeTabs
       :tabs="tabs"
       :selected="selectedTab"