DPI filter

package.json

@@ -20,10 +20,12 @@
     "@fortawesome/free-solid-svg-icons": "github:nethesis/Font-Awesome#solid",
     "@fortawesome/vue-fontawesome": "^3.0.3",
     "@headlessui/vue": "^1.7.13",
+    "@nethesis/nethesis-brands-svg-icons": "github:nethesis/Font-Awesome#ns-brands",
     "@nethesis/nethesis-light-svg-icons": "github:nethesis/Font-Awesome#ns-light",
     "@nethesis/nethesis-solid-svg-icons": "github:nethesis/Font-Awesome#ns-solid",
-    "@nethserver/vue-tailwind-lib": "^0.0.83",
+    "@nethserver/vue-tailwind-lib": "^0.0.86",
     "@types/lodash": "^4.14.195",
+    "@vueuse/core": "^10.5.0",
     "axios": "^1.4.0",
     "chart.js": "^4.4.0",
     "chartjs-adapter-date-fns": "^3.0.0",

public/i18n/en/translation.json

@@ -9,7 +9,12 @@
     "edit": "Edit",
     "delete": "Delete",
     "filter": "Filter",
-    "advanced_settings": "Advanced settings"
+    "advanced_settings": "Advanced settings",
+    "enable": "Enable",
+    "disable": "Disable",
+    "enabled": "Enabled",
+    "disabled": "Disabled",
+    "page_under_construction": "Page under construction"
   },
   "error": {
     "generic_error": "Something went wrong",
@@ -111,7 +116,15 @@
     "cannot_retrieve_storage_configuration": "Cannot retrieve storage configuration",
     "cannot_configure_storage": "Cannot configure storage",
     "cannot_retrieve_flashstart_configuration": "Cannot retrieve configuration",
-    "cannot_remove_storage": "Cannot remove storage"
+    "cannot_remove_storage": "Cannot remove storage",
+    "cannot_retrieve_dpi_rules": "Cannot retrieve DPI rules",
+    "cannot_create_dpi_rule": "Cannot create DPI rule",
+    "cannot_edit_dpi_rule": "Cannot edit DPI rule",
+    "cannot_retrieve_popular_apps": "Cannot retrieve popular apps",
+    "cannot_retrieve_devices": "Cannot retrieve devices",
+    "cannot_retrieve_applications": "Cannot retrieve applications",
+    "zone_already_exists": "Zone already exists",
+    "cannot_delete_rule": "Cannote delete rule"
   },
   "ne_text_input": {
     "show_password": "Show password",
@@ -429,7 +442,8 @@
       "bond_balance_alb": "Adaptive load balancing",
       "bond_primary_device": "Primary device",
       "primary_device_not_included": "Primary device must be included in selected devices",
-      "no_devices_available": "No devices available"
+      "no_devices_available": "No devices available",
+      "custom_zone": "Custom"
     },
     "multi_wan": {
       "title": "MultiWAN",
@@ -702,8 +716,7 @@
       "limit_log_messages": "Limit log messages",
       "enable_logging": "Enable logging on this zone",
       "delete_zone": "Delete \"{0}\"?",
-      "edit_zone_name": "Edit zone {name}",
-      "zone_already_exists": "Zone already exists"
+      "edit_zone_name": "Edit zone {name}"
     },
     "port_forward": {
       "title": "Port forward",
@@ -766,6 +779,38 @@
       "sourcebypass_helper": "Enter IP addresses or networks in CIDR format. The addresses entered won't be subject to the DNS filter",
       "add_sourcebypass": "Add source bypass"
     },
+    "dpi": {
+      "title": "DPI filter",
+      "rules": "Rules",
+      "exceptions": "Exceptions",
+      "rules_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+      "no_rules_found": "No rules found",
+      "create_rule": "Create rule",
+      "edit_rule": "Edit rule",
+      "save_rule": "Save rule",
+      "enable_rule": "Enable rule",
+      "source": "Source",
+      "choose_interface": "Choose interface",
+      "source_tooltip": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+      "no_interfaces_available": "No interfaces available",
+      "apps_and_protocols": "Apps and protocols to block",
+      "apps_and_protocols_placeholder": "Search {num} apps, protocols and categories",
+      "no_apps": "No apps or protocols",
+      "clear_search": "Clear search",
+      "num_apps_and_protocols_selected": "{num} apps and protocols selected",
+      "search_results": "Search results",
+      "no_apps_or_protocols_found": "No apps or protocols found",
+      "try_changing_search_filter": "Try changing your search filter",
+      "available_with_subscription": "Available with subscription",
+      "continue_typing_to_show_other_search_results": "Continue typing your search query to show other search results",
+      "select_at_least_one_app_or_protocol": "Select at least one app or protocol",
+      "type_application": "App",
+      "type_protocol": "Protocol",
+      "confirm_delete_rule": "You are about to delete DPI rule on interface '{iface}'",
+      "delete_rule": "Delete rule",
+      "blocked_apps_and_protocols": "Blocked apps and protocols",
+      "plus_num_others": "+{num} others"
+    },
     "vpn": {
       "title": "VPN"
     },

src/components/standalone/SideMenu.vue

@@ -98,6 +98,10 @@ const navigation: Ref<any> = ref([
       {
         name: t('standalone.flashstart.title'),
         to: 'security/flashstart'
+      },
+      {
+        name: t('standalone.dpi.title'),
+        to: 'security/dpi'
       }
     ]
   },

src/components/standalone/dashboard/ServiceCard.vue

@@ -154,6 +154,10 @@ function getBadgeIcon(status: string) {
     :errorTitle="error.title"
     :errorDescription="error.description"
   >
+    <!-- title slot (if present) -->
+    <template #title>
+      <slot name="title"></slot>
+    </template>
     <NeBadge
       v-if="hasStatus"
       :kind="getBadgeKind(serviceStatus)"

src/components/standalone/dpi/DeleteDpiRuleModal.vue

@@ -0,0 +1,90 @@
+<!--
+  Copyright (C) 2023 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import type { DpiRule } from '@/lib/standalone/dpi'
+import { ubusCall } from '@/lib/standalone/ubus'
+import { NeInlineNotification, NeModal, getAxiosErrorMessage } from '@nethserver/vue-tailwind-lib'
+import { ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+interface Props {
+  visible: boolean
+  rule?: DpiRule
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits(['close', 'reloadData'])
+
+const { t } = useI18n()
+
+let loading = ref({
+  deleteRule: false
+})
+
+let error = ref({
+  notificationTitle: '',
+  notificationDescription: ''
+})
+
+watch(
+  () => props.visible,
+  () => {
+    if (props.visible) {
+      error.value.notificationTitle = ''
+      error.value.notificationDescription = ''
+    }
+  }
+)
+
+async function deleteRule() {
+  if (!props.rule) {
+    return
+  }
+  error.value.notificationTitle = ''
+  error.value.notificationDescription = ''
+  loading.value.deleteRule = true
+
+  try {
+    await ubusCall('ns.dpi', 'delete-rule', {
+      'config-name': props.rule['config-name']
+    })
+    emit('close')
+    emit('reloadData')
+  } catch (err: any) {
+    console.error(err)
+    error.value.notificationTitle = t('error.cannot_delete_rule')
+    error.value.notificationDescription = t(getAxiosErrorMessage(err))
+  } finally {
+    loading.value.deleteRule = false
+  }
+}
+</script>
+
+<template>
+  <NeModal
+    :visible="visible"
+    :title="t('standalone.dpi.delete_rule')"
+    kind="warning"
+    :primaryLabel="t('standalone.dpi.delete_rule')"
+    :cancelLabel="t('common.cancel')"
+    primaryButtonKind="danger"
+    :primaryButtonDisabled="loading.deleteRule"
+    :primaryButtonLoading="loading.deleteRule"
+    :closeAriaLabe="t('common.close')"
+    @close="emit('close')"
+    @primaryClick="deleteRule"
+  >
+    {{ t('standalone.dpi.confirm_delete_rule', { iface: rule?.interface }) }}
+    <NeInlineNotification
+      v-if="error.notificationTitle"
+      kind="error"
+      :title="error.notificationTitle"
+      :description="error.notificationDescription"
+      class="mt-4"
+    />
+  </NeModal>
+</template>