feat(dpi): add description for DPI filter and update UI layout

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"

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."
     },

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."
     },

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"