From a967916cd37755a0e1bb4710e76ad2af37710a86 Mon Sep 17 00:00:00 2001
From: Tommaso Bailetti <tommaso.bailetti@nethesis.it>
Date: Tue, 23 Dec 2025 09:26:56 +0100
Subject: [PATCH 01/20] feat: added flows table

---
 .../standalone/monitoring/FlowTableRow.vue    | 129 ++++++
 .../standalone/monitoring/FlowsTable.vue      | 421 ++++++++++++++++++
 src/i18n/en.json                              |  23 +-
 .../monitoring/RealTimeMonitoringView.vue     |   6 +
 4 files changed, 577 insertions(+), 2 deletions(-)
 create mode 100644 src/components/standalone/monitoring/FlowTableRow.vue
 create mode 100644 src/components/standalone/monitoring/FlowsTable.vue

diff --git a/src/components/standalone/monitoring/FlowTableRow.vue b/src/components/standalone/monitoring/FlowTableRow.vue
new file mode 100644
index 000000000..fa7fc916b
--- /dev/null
+++ b/src/components/standalone/monitoring/FlowTableRow.vue
@@ -0,0 +1,129 @@
+<script lang="ts" setup>
+import type { Flow } from '@/components/standalone/monitoring/FlowsTable.vue'
+import { byteFormat1024, NeTableCell, NeTableRow } from '@nethesis/vue-components'
+import { useI18n } from 'vue-i18n'
+import { computed } from 'vue'
+import { differenceInSeconds } from 'date-fns'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { faArrowDown, faArrowUp } from '@fortawesome/free-solid-svg-icons'
+import { floor } from 'lodash-es'
+
+const { item } = defineProps<{
+  item: Flow
+}>()
+
+const { t } = useI18n()
+
+function getOther(item: Flow) {
+  if (item.host_server_name != undefined) {
+    return item.host_server_name
+  } else if (item.dns_host_name) {
+    return item.dns_host_name
+  } else {
+    return item.other_ip
+  }
+}
+
+const source = computed<string>(() => {
+  if (item.local_origin) {
+    return `${item.local_ip}:${item.local_port}`
+  } else {
+    return `${getOther(item)}:${item.other_port}`
+  }
+})
+
+const totalDownload = computed<string>(() => {
+  if (item.local_origin) {
+    return byteFormat1024(floor(item.local_bytes))
+  } else {
+    return byteFormat1024(floor(item.other_bytes))
+  }
+})
+
+const totalUpload = computed<string>(() => {
+  if (item.local_origin) {
+    return byteFormat1024(floor(item.other_bytes))
+  } else {
+    return byteFormat1024(floor(item.local_bytes))
+  }
+})
+
+const downloadRate = computed<string>(() => {
+  if (item.local_origin) {
+    return byteFormat1024(floor(item.local_rate))
+  } else {
+    return byteFormat1024(floor(item.other_rate))
+  }
+})
+
+const uploadRate = computed<string>(() => {
+  if (item.local_origin) {
+    return byteFormat1024(floor(item.other_rate))
+  } else {
+    return byteFormat1024(floor(item.local_rate))
+  }
+})
+
+const other = computed<string>(() => {
+  if (item.local_origin) {
+    return `${getOther(item)}:${item.other_port}`
+  } else {
+    return `${item.local_ip}:${item.local_port}`
+  }
+})
+
+const flowAge = computed<string>(() => {
+  const totalSeconds = differenceInSeconds(item.last_seen_at, item.first_seen_at)
+  const hours = Math.floor(totalSeconds / 3600)
+  const minutes = Math.floor((totalSeconds % 3600) / 60)
+  const seconds = totalSeconds % 60
+  return [hours, minutes, seconds].map((value) => String(value).padStart(2, '0')).join(':')
+})
+</script>
+
+<template>
+  <NeTableRow>
+    <NeTableCell :data-label="t('standalone.flows.application')">
+      {{ item.detected_application_name }}
+    </NeTableCell>
+    <NeTableCell :data-label="t('standalone.flows.protocol')">
+      {{ item.detected_protocol_name }}
+    </NeTableCell>
+    <NeTableCell :data-label="t('standalone.flows.source')">
+      {{ source }}
+    </NeTableCell>
+    <NeTableCell :data-label="t('standalone.flows.destination')">
+      {{ other }}
+    </NeTableCell>
+    <NeTableCell :data-label="t('standalone.flows.duration')">
+      {{ flowAge }}
+    </NeTableCell>
+    <NeTableCell :data-label="t('standalone.flows.last_seen_at')">
+      {{ new Date(item.last_seen_at).toLocaleTimeString() }}
+    </NeTableCell>
+    <NeTableCell :data-label="t('standalone.flows.download')">
+      <div class="flex items-center gap-2">
+        <FontAwesomeIcon :icon="faArrowDown" />
+        <span>{{ downloadRate }}</span>
+      </div>
+    </NeTableCell>
+    <NeTableCell :data-label="t('standalone.flows.upload')">
+      <div class="flex items-center gap-2">
+        <FontAwesomeIcon :icon="faArrowUp" />
+        <span>{{ uploadRate }}</span>
+      </div>
+    </NeTableCell>
+    <NeTableCell :data-label="t('standalone.flows.total_download')">
+      <div class="flex items-center gap-2">
+        <FontAwesomeIcon :icon="faArrowDown" />
+        <span>{{ totalDownload }}</span>
+      </div>
+    </NeTableCell>
+    <NeTableCell :data-label="t('standalone.flows.total_upload')">
+      <div class="flex items-center gap-2">
+        <FontAwesomeIcon :icon="faArrowUp" />
+        <span>{{ totalUpload }}</span>
+      </div>
+    </NeTableCell>
+  </NeTableRow>
+</template>
diff --git a/src/components/standalone/monitoring/FlowsTable.vue b/src/components/standalone/monitoring/FlowsTable.vue
new file mode 100644
index 000000000..e114a0057
--- /dev/null
+++ b/src/components/standalone/monitoring/FlowsTable.vue
@@ -0,0 +1,421 @@
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n'
+import { computed, onMounted, ref, watch } from 'vue'
+import { ubusCall } from '@/lib/standalone/ubus.ts'
+import type { AxiosResponse } from 'axios'
+import { useInterval } from '@vueuse/core'
+import {
+  NeTable,
+  NeTableBody,
+  NeTableHead,
+  NeTableHeadCell,
+  NeTextInput,
+  NeDropdownFilter,
+  type FilterOption,
+  useItemPagination,
+  useSort,
+  NePaginator,
+  type SortEvent,
+  NeProgressBar,
+  NeInlineNotification,
+  getAxiosErrorMessage
+} from '@nethesis/vue-components'
+import FlowTableRow from '@/components/standalone/monitoring/FlowTableRow.vue'
+
+const { t } = useI18n()
+
+export type Flow = {
+  detected_application_name: string
+  detected_protocol_name: string
+  local_ip: string
+  local_port: number
+  other_ip: string
+  other_port: number
+  local_origin: boolean
+  first_seen_at: number
+  last_seen_at: number
+  local_bytes: number
+  local_rate: number
+  other_bytes: number
+  other_rate: number
+  other_type: 'remote' | 'local'
+  digest: string
+  host_server_name?: string
+  dns_host_name?: string
+}
+
+type FlowListResponse = AxiosResponse<{
+  list: Flow[]
+}>
+
+const data = ref<Flow[]>([])
+const loading = ref(true)
+const error = ref<Error>()
+function fetchData() {
+  pause()
+  ubusCall<FlowListResponse>('ns.flows', 'list')
+    .then((res) => {
+      data.value = res.data.list
+      reset()
+      resume()
+    })
+    .catch((reason) => {
+      pause()
+      error.value = reason
+    })
+    .finally(() => (loading.value = false))
+}
+
+type RefreshInterval = '10s' | '30s' | '60s' | 'off'
+type RefreshFilterOption = FilterOption & {
+  id: RefreshInterval
+}
+const refreshIntervalOptions: RefreshFilterOption[] = [
+  {
+    id: '10s',
+    label: t('standalone.flows.refresh_interval', { value: '10s' })
+  },
+  {
+    id: '30s',
+    label: t('standalone.flows.refresh_interval', { value: '30s' })
+  },
+  {
+    id: '60s',
+    label: t('standalone.flows.refresh_interval', { value: '60s' })
+  },
+  {
+    id: 'off',
+    label: t('standalone.flows.refresh_interval', { value: 'off' })
+  }
+]
+const refreshIntervalSelection = ref<RefreshInterval[]>(['10s'])
+const refreshIntervalsValue = computed<number | null>(() => {
+  switch (refreshIntervalSelection.value[0]) {
+    case '10s':
+      return 100
+    case '30s':
+      return 300
+    case '60s':
+      return 600
+    case 'off':
+    default:
+      return null
+  }
+})
+
+onMounted(() => fetchData())
+
+const { counter, pause, reset, resume } = useInterval(100, {
+  controls: true,
+  callback: async (count) => {
+    if (refreshIntervalsValue.value != null && count >= refreshIntervalsValue.value) {
+      fetchData()
+    }
+  },
+  immediate: true
+})
+const progressBar = computed<number>(
+  () => (counter.value / (refreshIntervalsValue.value || 10)) * 100
+)
+
+watch(refreshIntervalsValue, (value) => {
+  if (value == null) {
+    pause()
+    reset()
+  } else {
+    reset()
+    resume()
+  }
+})
+
+const sourceIps = computed<FilterOption[]>(() => {
+  const ipSet = new Set<string>()
+  data.value.forEach((flow) => {
+    ipSet.add(flow.local_ip)
+  })
+  return Array.from(ipSet).map((ip) => ({
+    id: ip,
+    label: ip
+  }))
+})
+
+const destinationIps = computed<FilterOption[]>(() => {
+  const ipSet = new Set<string>()
+  data.value.forEach((flow) => {
+    ipSet.add(flow.other_ip)
+  })
+  return Array.from(ipSet).map((ip) => ({
+    id: ip,
+    label: ip
+  }))
+})
+
+const applications = computed<FilterOption[]>(() => {
+  const appSet = new Set<string>()
+  data.value.forEach((flow) => {
+    appSet.add(flow.detected_application_name)
+  })
+  return Array.from(appSet).map((app) => ({
+    id: app,
+    label: app
+  }))
+})
+
+const protocols = computed<FilterOption[]>(() => {
+  const protoSet = new Set<string>()
+  data.value.forEach((flow) => {
+    protoSet.add(flow.detected_protocol_name)
+  })
+  return Array.from(protoSet).map((proto) => ({
+    id: proto,
+    label: proto
+  }))
+})
+
+const origin: FilterOption[] = [
+  {
+    id: 'local',
+    label: t('standalone.flows.local')
+  },
+  {
+    id: 'remote',
+    label: t('standalone.flows.remote')
+  }
+]
+
+type Filter<T> = (a: T) => boolean
+
+const filter = ref('')
+const filterApplications = ref<string[]>([])
+const filterProtocols = ref<string[]>([])
+const filterSource = ref<string[]>([])
+const filterDestination = ref<string[]>([])
+const filterOrigin = ref<string[]>([])
+const filters: Filter<Flow>[] = [
+  (flow) => {
+    return Object.values(flow).some((value) =>
+      String(value).toLowerCase().includes(filter.value.toLowerCase())
+    )
+  },
+  (flow) => {
+    if (!filterApplications.value.length) {
+      return true
+    }
+    return filterApplications.value.includes(flow.detected_application_name)
+  },
+  (flow) => {
+    if (!filterSource.value.length) {
+      return true
+    }
+    return filterSource.value.includes(flow.local_ip)
+  },
+  (flow) => {
+    if (!filterDestination.value.length) {
+      return true
+    }
+    return filterDestination.value.includes(flow.other_ip)
+  },
+  (flow) => {
+    if (!filterProtocols.value.length) {
+      return true
+    }
+    return filterProtocols.value.includes(flow.detected_protocol_name)
+  },
+  (flow) => {
+    if (!filterOrigin.value.length) {
+      return true
+    }
+    return filterOrigin.value.includes(flow.local_origin ? 'local' : 'remote')
+  }
+]
+
+const filteredData = computed<Flow[]>(() => {
+  return data.value.filter((flow) => filters.every((filter) => filter(flow)))
+})
+
+const sortKey = ref<keyof Flow | string>('download')
+const sortDescending = ref(true)
+const { sortedItems } = useSort(() => filteredData.value, sortKey, sortDescending, {
+  duration: (a: Flow, b: Flow) => {
+    return a.last_seen_at - a.first_seen_at - (b.last_seen_at - b.first_seen_at)
+  },
+  download: (a: Flow, b: Flow) => {
+    const aRate = a.local_origin ? a.local_rate : a.other_rate
+    const bRate = b.local_origin ? b.local_rate : b.other_rate
+    return aRate - bRate
+  },
+  upload: (a: Flow, b: Flow) => {
+    const aRate = a.local_origin ? a.other_rate : a.local_rate
+    const bRate = b.local_origin ? b.other_rate : b.local_rate
+    return aRate - bRate
+  }
+})
+
+const pageSize = ref(10)
+const { currentPage, paginatedItems } = useItemPagination(() => sortedItems.value, {
+  itemsPerPage: pageSize
+})
+
+const onSort = (payload: SortEvent) => {
+  sortKey.value = payload.key as keyof Flow
+  sortDescending.value = payload.descending
+}
+</script>
+
+<template>
+  <div class="space-y-8">
+    <div class="space-y-4">
+      <p class="max-w-xl text-secondary-neutral">{{ t('standalone.flows.subtitle') }}</p>
+      <NeInlineNotification
+        v-if="error"
+        kind="error"
+        :title="t('error.cannot_retrieve_flows')"
+        :description="t(getAxiosErrorMessage(error))"
+      />
+      <div v-else-if="!loading" class="flex flex-wrap items-start gap-6">
+        <div class="mr-auto flex flex-wrap items-center gap-4">
+          <NeTextInput v-model="filter" :placeholder="t('common.filter')" is-search />
+          <NeDropdownFilter
+            v-model="filterApplications"
+            :clear-filter-label="t('ne_dropdown_filter.clear_selection')"
+            :clear-search-label="t('ne_dropdown_filter.clear_search')"
+            :label="t('standalone.flows.application')"
+            :more-options-hidden-label="t('ne_dropdown_filter.more_options_hidden')"
+            :no-options-label="t('ne_dropdown_filter.no_options')"
+            :open-menu-aria-label="t('ne_dropdown_filter.open_filter')"
+            :options="applications"
+            kind="checkbox"
+            show-options-filter
+          />
+          <NeDropdownFilter
+            v-model="filterProtocols"
+            :clear-filter-label="t('ne_dropdown_filter.clear_selection')"
+            :clear-search-label="t('ne_dropdown_filter.clear_search')"
+            :label="t('standalone.flows.protocol')"
+            :more-options-hidden-label="t('ne_dropdown_filter.more_options_hidden')"
+            :no-options-label="t('ne_dropdown_filter.no_options')"
+            :open-menu-aria-label="t('ne_dropdown_filter.open_filter')"
+            :options="protocols"
+            kind="checkbox"
+            show-options-filter
+          />
+          <NeDropdownFilter
+            v-model="filterSource"
+            :clear-filter-label="t('ne_dropdown_filter.clear_selection')"
+            :clear-search-label="t('ne_dropdown_filter.clear_search')"
+            :label="t('standalone.flows.source')"
+            :more-options-hidden-label="t('ne_dropdown_filter.more_options_hidden')"
+            :no-options-label="t('ne_dropdown_filter.no_options')"
+            :open-menu-aria-label="t('ne_dropdown_filter.open_filter')"
+            :options="sourceIps"
+            kind="checkbox"
+            show-options-filter
+          />
+          <NeDropdownFilter
+            v-model="filterDestination"
+            :clear-filter-label="t('ne_dropdown_filter.clear_selection')"
+            :clear-search-label="t('ne_dropdown_filter.clear_search')"
+            :label="t('standalone.flows.destination')"
+            :more-options-hidden-label="t('ne_dropdown_filter.more_options_hidden')"
+            :no-options-label="t('ne_dropdown_filter.no_options')"
+            :open-menu-aria-label="t('ne_dropdown_filter.open_filter')"
+            :options="destinationIps"
+            kind="checkbox"
+            show-options-filter
+          />
+          <NeDropdownFilter
+            v-model="filterOrigin"
+            :clear-filter-label="t('ne_dropdown_filter.clear_selection')"
+            :clear-search-label="t('ne_dropdown_filter.clear_search')"
+            :label="t('standalone.flows.origin')"
+            :more-options-hidden-label="t('ne_dropdown_filter.more_options_hidden')"
+            :no-options-label="t('ne_dropdown_filter.no_options')"
+            :open-menu-aria-label="t('ne_dropdown_filter.open_filter')"
+            :options="origin"
+            kind="checkbox"
+          />
+        </div>
+        <div class="space-y-2">
+          <NeDropdownFilter
+            v-model="refreshIntervalSelection"
+            :clear-filter-label="t('ne_dropdown_filter.clear_selection')"
+            :clear-search-label="t('ne_dropdown_filter.clear_search')"
+            :label="t('standalone.flows.refresh_interval', { value: refreshIntervalSelection[0] })"
+            :more-options-hidden-label="t('ne_dropdown_filter.more_options_hidden')"
+            :no-options-label="t('ne_dropdown_filter.no_options')"
+            :open-menu-aria-label="t('ne_dropdown_filter.open_filter')"
+            :options="refreshIntervalOptions"
+            kind="radio"
+          />
+          <NeProgressBar :progress="progressBar" color="indigo" size="sm" />
+        </div>
+      </div>
+    </div>
+    <NeTable
+      v-if="!error"
+      :aria-label="t('standalone.flows.table_aria_label')"
+      :loading="loading"
+      :sort-descending="sortDescending"
+      :sort-key="sortKey"
+      card-breakpoint="2xl"
+    >
+      <NeTableHead>
+        <NeTableHeadCell column-key="detected_application_name" sortable @sort="onSort">
+          {{ t('standalone.flows.application') }}
+        </NeTableHeadCell>
+        <NeTableHeadCell column-key="detected_protocol_name" sortable @sort="onSort">
+          {{ t('standalone.flows.protocol') }}
+        </NeTableHeadCell>
+        <NeTableHeadCell>
+          {{ t('standalone.flows.source') }}
+        </NeTableHeadCell>
+        <NeTableHeadCell>
+          {{ t('standalone.flows.destination') }}
+        </NeTableHeadCell>
+        <NeTableHeadCell column-key="duration" sortable @sort="onSort">
+          {{ t('standalone.flows.duration') }}
+        </NeTableHeadCell>
+        <NeTableHeadCell column-key="last_seen_at" sortable @sort="onSort">
+          {{ t('standalone.flows.last_seen_at') }}
+        </NeTableHeadCell>
+        <NeTableHeadCell column-key="download" sortable @sort="onSort">
+          {{ t('standalone.flows.download') }}
+        </NeTableHeadCell>
+        <NeTableHeadCell column-key="upload" sortable @sort="onSort">
+          {{ t('standalone.flows.upload') }}
+        </NeTableHeadCell>
+        <NeTableHeadCell column-key="totalDownload" sortable @sort="onSort">
+          {{ t('standalone.flows.total_download') }}
+        </NeTableHeadCell>
+        <NeTableHeadCell column-key="totalUpload" sortable @sort="onSort">
+          {{ t('standalone.flows.total_upload') }}
+        </NeTableHeadCell>
+      </NeTableHead>
+      <NeTableBody>
+        <FlowTableRow v-for="flow in paginatedItems" :key="flow.digest" :item="flow" />
+      </NeTableBody>
+      <template v-if="!loading" #paginator>
+        <NePaginator
+          :current-page="currentPage"
+          :nav-pagination-label="t('ne_table.pagination')"
+          :next-label="t('ne_table.go_to_next_page')"
+          :page-size="pageSize"
+          :page-size-label="t('ne_table.show')"
+          :previous-label="t('ne_table.go_to_previous_page')"
+          :range-of-total-label="t('ne_table.of')"
+          :total-rows="sortedItems.length"
+          @select-page="
+            (page: number) => {
+              currentPage = page
+            }
+          "
+          @select-page-size="
+            (size: number) => {
+              pageSize = size
+            }
+          "
+        />
+      </template>
+    </NeTable>
+  </div>
+</template>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index c3cf617a6..23aec5671 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -429,7 +429,8 @@
     "duplicate_port": "Port has already been used",
     "cannot_regenerate_cert": "Cannot regenerate certificates",
     "cannot_renew_server_cert": "Cannot renew server certificate",
-    "cannot_regenerate_all_certs": "Cannot regenerate all certificates"
+    "cannot_regenerate_all_certs": "Cannot regenerate all certificates",
+    "cannot_retrieve_flows": "Cannot retrieve flows, please try again later"
   },
   "ne_text_input": {
     "show_password": "Show password",
@@ -2355,7 +2356,25 @@
       "public_ip_address": "Public IP address",
       "error_fetching_data": "Error fetching data",
       "remote_hosts": "Remote hosts",
-      "no_data_available": "No data available"
+      "no_data_available": "No data available",
+      "flows": "Flows"
+    },
+    "flows": {
+      "subtitle": "View real-time network connections, each row represents an active flow with live transfer rates and total traffic.",
+      "application": "Application",
+      "protocol": "Protocol",
+      "source": "Source",
+      "destination": "Destination",
+      "origin": "Origin",
+      "duration": "Duration",
+      "download": "Download",
+      "upload": "Upload",
+      "total_download": "Tot. download",
+      "total_upload": "Tot. upload",
+      "local": "Local",
+      "remote": "Remote",
+      "last_seen_at": "Last seen at",
+      "refresh_interval": "Refresh interval: { value }"
     },
     "ping_latency_monitor": {
       "title": "Ping latency monitor",
diff --git a/src/views/standalone/monitoring/RealTimeMonitoringView.vue b/src/views/standalone/monitoring/RealTimeMonitoringView.vue
index 1ce12b590..b385d3399 100644
--- a/src/views/standalone/monitoring/RealTimeMonitoringView.vue
+++ b/src/views/standalone/monitoring/RealTimeMonitoringView.vue
@@ -21,6 +21,7 @@ import { isStandaloneMode } from '@/lib/config'
 import { onMounted, ref } from 'vue'
 import { ubusCall } from '@/lib/standalone/ubus'
 import InstantTrafficMonitor from '@/components/standalone/monitoring/InstantTrafficMonitor.vue'
+import FlowsTable from '@/components/standalone/monitoring/FlowsTable.vue'
 
 const { t } = useI18n()
 
@@ -44,6 +45,10 @@ const { tabs, selectedTab } = useTabs([
   {
     name: 'instant-traffic',
     label: t('standalone.real_time_monitor.instant_traffic')
+  },
+  {
+    name: 'flows',
+    label: t('standalone.real_time_monitor.flows')
   }
 ])
 
@@ -167,5 +172,6 @@ function openGrafana() {
     <VpnMonitor v-else-if="selectedTab === 'vpn'" />
     <SecurityMonitor v-else-if="selectedTab === 'security'" />
     <InstantTrafficMonitor v-else-if="selectedTab == 'instant-traffic'" />
+    <FlowsTable v-else-if="selectedTab == 'flows'" />
   </div>
 </template>

From f24521afc5c7339c645689a61b2992fc4402477c Mon Sep 17 00:00:00 2001
From: Tommaso Bailetti <tommaso.bailetti@nethesis.it>
Date: Thu, 15 Jan 2026 14:51:42 +0100
Subject: [PATCH 02/20] wip

---
 src/components/standalone/NetifydIcon.vue     |  26 +++
 .../standalone/monitoring/FlowTableRow.vue    | 129 --------------
 .../standalone/monitoring/FlowsTable.vue      |  61 ++++---
 .../standalone/monitoring/flows/FlowBadge.vue |  18 ++
 .../monitoring/flows/FlowTableRow.vue         | 161 ++++++++++++++++++
 src/i18n/en.json                              |  11 +-
 src/stores/standalone/netifyd.ts              |   8 +
 7 files changed, 260 insertions(+), 154 deletions(-)
 create mode 100644 src/components/standalone/NetifydIcon.vue
 delete mode 100644 src/components/standalone/monitoring/FlowTableRow.vue
 create mode 100644 src/components/standalone/monitoring/flows/FlowBadge.vue
 create mode 100644 src/components/standalone/monitoring/flows/FlowTableRow.vue
 create mode 100644 src/stores/standalone/netifyd.ts

diff --git a/src/components/standalone/NetifydIcon.vue b/src/components/standalone/NetifydIcon.vue
new file mode 100644
index 000000000..c1b1f6dde
--- /dev/null
+++ b/src/components/standalone/NetifydIcon.vue
@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import { useNetifydStore } from '@/stores/standalone/netifyd.ts'
+import { computed } from 'vue'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { faQuestionCircle } from '@fortawesome/free-solid-svg-icons'
+
+const { data } = useNetifydStore()
+
+const { name } = defineProps<{
+  name: string
+}>()
+
+const icon = computed<string | null>(() => {
+  for (const application of data) {
+    if (name == application.tag) {
+      return application.icon
+    }
+  }
+  return null
+})
+</script>
+
+<template>
+  <img v-if="icon" :alt="name" :src="icon" />
+  <FontAwesomeIcon v-else :icon="faQuestionCircle" />
+</template>
diff --git a/src/components/standalone/monitoring/FlowTableRow.vue b/src/components/standalone/monitoring/FlowTableRow.vue
deleted file mode 100644
index fa7fc916b..000000000
--- a/src/components/standalone/monitoring/FlowTableRow.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<script lang="ts" setup>
-import type { Flow } from '@/components/standalone/monitoring/FlowsTable.vue'
-import { byteFormat1024, NeTableCell, NeTableRow } from '@nethesis/vue-components'
-import { useI18n } from 'vue-i18n'
-import { computed } from 'vue'
-import { differenceInSeconds } from 'date-fns'
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { faArrowDown, faArrowUp } from '@fortawesome/free-solid-svg-icons'
-import { floor } from 'lodash-es'
-
-const { item } = defineProps<{
-  item: Flow
-}>()
-
-const { t } = useI18n()
-
-function getOther(item: Flow) {
-  if (item.host_server_name != undefined) {
-    return item.host_server_name
-  } else if (item.dns_host_name) {
-    return item.dns_host_name
-  } else {
-    return item.other_ip
-  }
-}
-
-const source = computed<string>(() => {
-  if (item.local_origin) {
-    return `${item.local_ip}:${item.local_port}`
-  } else {
-    return `${getOther(item)}:${item.other_port}`
-  }
-})
-
-const totalDownload = computed<string>(() => {
-  if (item.local_origin) {
-    return byteFormat1024(floor(item.local_bytes))
-  } else {
-    return byteFormat1024(floor(item.other_bytes))
-  }
-})
-
-const totalUpload = computed<string>(() => {
-  if (item.local_origin) {
-    return byteFormat1024(floor(item.other_bytes))
-  } else {
-    return byteFormat1024(floor(item.local_bytes))
-  }
-})
-
-const downloadRate = computed<string>(() => {
-  if (item.local_origin) {
-    return byteFormat1024(floor(item.local_rate))
-  } else {
-    return byteFormat1024(floor(item.other_rate))
-  }
-})
-
-const uploadRate = computed<string>(() => {
-  if (item.local_origin) {
-    return byteFormat1024(floor(item.other_rate))
-  } else {
-    return byteFormat1024(floor(item.local_rate))
-  }
-})
-
-const other = computed<string>(() => {
-  if (item.local_origin) {
-    return `${getOther(item)}:${item.other_port}`
-  } else {
-    return `${item.local_ip}:${item.local_port}`
-  }
-})
-
-const flowAge = computed<string>(() => {
-  const totalSeconds = differenceInSeconds(item.last_seen_at, item.first_seen_at)
-  const hours = Math.floor(totalSeconds / 3600)
-  const minutes = Math.floor((totalSeconds % 3600) / 60)
-  const seconds = totalSeconds % 60
-  return [hours, minutes, seconds].map((value) => String(value).padStart(2, '0')).join(':')
-})
-</script>
-
-<template>
-  <NeTableRow>
-    <NeTableCell :data-label="t('standalone.flows.application')">
-      {{ item.detected_application_name }}
-    </NeTableCell>
-    <NeTableCell :data-label="t('standalone.flows.protocol')">
-      {{ item.detected_protocol_name }}
-    </NeTableCell>
-    <NeTableCell :data-label="t('standalone.flows.source')">
-      {{ source }}
-    </NeTableCell>
-    <NeTableCell :data-label="t('standalone.flows.destination')">
-      {{ other }}
-    </NeTableCell>
-    <NeTableCell :data-label="t('standalone.flows.duration')">
-      {{ flowAge }}
-    </NeTableCell>
-    <NeTableCell :data-label="t('standalone.flows.last_seen_at')">
-      {{ new Date(item.last_seen_at).toLocaleTimeString() }}
-    </NeTableCell>
-    <NeTableCell :data-label="t('standalone.flows.download')">
-      <div class="flex items-center gap-2">
-        <FontAwesomeIcon :icon="faArrowDown" />
-        <span>{{ downloadRate }}</span>
-      </div>
-    </NeTableCell>
-    <NeTableCell :data-label="t('standalone.flows.upload')">
-      <div class="flex items-center gap-2">
-        <FontAwesomeIcon :icon="faArrowUp" />
-        <span>{{ uploadRate }}</span>
-      </div>
-    </NeTableCell>
-    <NeTableCell :data-label="t('standalone.flows.total_download')">
-      <div class="flex items-center gap-2">
-        <FontAwesomeIcon :icon="faArrowDown" />
-        <span>{{ totalDownload }}</span>
-      </div>
-    </NeTableCell>
-    <NeTableCell :data-label="t('standalone.flows.total_upload')">
-      <div class="flex items-center gap-2">
-        <FontAwesomeIcon :icon="faArrowUp" />
-        <span>{{ totalUpload }}</span>
-      </div>
-    </NeTableCell>
-  </NeTableRow>
-</template>
diff --git a/src/components/standalone/monitoring/FlowsTable.vue b/src/components/standalone/monitoring/FlowsTable.vue
index e114a0057..17f77c84b 100644
--- a/src/components/standalone/monitoring/FlowsTable.vue
+++ b/src/components/standalone/monitoring/FlowsTable.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { useI18n } from 'vue-i18n'
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, type DebuggerEvent, onMounted, ref, watch } from 'vue'
 import { ubusCall } from '@/lib/standalone/ubus.ts'
 import type { AxiosResponse } from 'axios'
 import { useInterval } from '@vueuse/core'
@@ -20,7 +20,11 @@ import {
   NeInlineNotification,
   getAxiosErrorMessage
 } from '@nethesis/vue-components'
-import FlowTableRow from '@/components/standalone/monitoring/FlowTableRow.vue'
+import FlowTableRow from '@/components/standalone/monitoring/flows/FlowTableRow.vue'
+import { useNetifydStore } from '@/stores/standalone/netifyd.ts'
+import { useRouteQuery } from '@vueuse/router'
+
+const { data: categories } = useNetifydStore()
 
 const { t } = useI18n()
 
@@ -42,6 +46,12 @@ export type Flow = {
   digest: string
   host_server_name?: string
   dns_host_name?: string
+  risks: {
+    ndpi_risk_score: number
+    ndpi_risk_score_client: number
+    ndpi_risk_score_server: number
+    risks?: number[]
+  }
 }
 
 type FlowListResponse = AxiosResponse<{
@@ -88,15 +98,15 @@ const refreshIntervalOptions: RefreshFilterOption[] = [
     label: t('standalone.flows.refresh_interval', { value: 'off' })
   }
 ]
-const refreshIntervalSelection = ref<RefreshInterval[]>(['10s'])
+const refreshIntervalSelection = ref<RefreshInterval[]>(['30s'])
 const refreshIntervalsValue = computed<number | null>(() => {
   switch (refreshIntervalSelection.value[0]) {
     case '10s':
-      return 100
+      return 10
     case '30s':
-      return 300
+      return 30
     case '60s':
-      return 600
+      return 60
     case 'off':
     default:
       return null
@@ -105,7 +115,7 @@ const refreshIntervalsValue = computed<number | null>(() => {
 
 onMounted(() => fetchData())
 
-const { counter, pause, reset, resume } = useInterval(100, {
+const { counter, pause, reset, resume } = useInterval(1000, {
   controls: true,
   callback: async (count) => {
     if (refreshIntervalsValue.value != null && count >= refreshIntervalsValue.value) {
@@ -155,10 +165,20 @@ const applications = computed<FilterOption[]>(() => {
   data.value.forEach((flow) => {
     appSet.add(flow.detected_application_name)
   })
-  return Array.from(appSet).map((app) => ({
-    id: app,
-    label: app
-  }))
+  return Array.from(appSet).map((app) => {
+    for (const entry of categories) {
+      if (entry.tag == app) {
+        return {
+          id: app,
+          label: entry.label
+        }
+      }
+    }
+    return {
+      id: app,
+      label: app
+    }
+  })
 })
 
 const protocols = computed<FilterOption[]>(() => {
@@ -185,7 +205,7 @@ const origin: FilterOption[] = [
 
 type Filter<T> = (a: T) => boolean
 
-const filter = ref('')
+const filter = useRouteQuery('filter', '')
 const filterApplications = ref<string[]>([])
 const filterProtocols = ref<string[]>([])
 const filterSource = ref<string[]>([])
@@ -233,8 +253,8 @@ const filteredData = computed<Flow[]>(() => {
   return data.value.filter((flow) => filters.every((filter) => filter(flow)))
 })
 
-const sortKey = ref<keyof Flow | string>('download')
-const sortDescending = ref(true)
+const sortKey = useRouteQuery<keyof Flow | string>('sort', 'download')
+const sortDescending = useRouteQuery('descending', 'true', { transform: Boolean })
 const { sortedItems } = useSort(() => filteredData.value, sortKey, sortDescending, {
   duration: (a: Flow, b: Flow) => {
     return a.last_seen_at - a.first_seen_at - (b.last_seen_at - b.first_seen_at)
@@ -251,7 +271,7 @@ const { sortedItems } = useSort(() => filteredData.value, sortKey, sortDescendin
   }
 })
 
-const pageSize = ref(10)
+const pageSize = useRouteQuery<number>('page-size', 10)
 const { currentPage, paginatedItems } = useItemPagination(() => sortedItems.value, {
   itemsPerPage: pageSize
 })
@@ -363,8 +383,8 @@ const onSort = (payload: SortEvent) => {
         <NeTableHeadCell column-key="detected_application_name" sortable @sort="onSort">
           {{ t('standalone.flows.application') }}
         </NeTableHeadCell>
-        <NeTableHeadCell column-key="detected_protocol_name" sortable @sort="onSort">
-          {{ t('standalone.flows.protocol') }}
+        <NeTableHeadCell>
+          {{ t('standalone.flows.tags') }}
         </NeTableHeadCell>
         <NeTableHeadCell>
           {{ t('standalone.flows.source') }}
@@ -384,12 +404,7 @@ const onSort = (payload: SortEvent) => {
         <NeTableHeadCell column-key="upload" sortable @sort="onSort">
           {{ t('standalone.flows.upload') }}
         </NeTableHeadCell>
-        <NeTableHeadCell column-key="totalDownload" sortable @sort="onSort">
-          {{ t('standalone.flows.total_download') }}
-        </NeTableHeadCell>
-        <NeTableHeadCell column-key="totalUpload" sortable @sort="onSort">
-          {{ t('standalone.flows.total_upload') }}
-        </NeTableHeadCell>
+        <NeTableHeadCell />
       </NeTableHead>
       <NeTableBody>
         <FlowTableRow v-for="flow in paginatedItems" :key="flow.digest" :item="flow" />
diff --git a/src/components/standalone/monitoring/flows/FlowBadge.vue b/src/components/standalone/monitoring/flows/FlowBadge.vue
new file mode 100644
index 000000000..aa43465fe
--- /dev/null
+++ b/src/components/standalone/monitoring/flows/FlowBadge.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { NeBadgeV2 } from '@nethesis/vue-components'
+import type { Badge } from '@/components/standalone/monitoring/FlowTableRow.vue'
+
+defineProps<{
+  badge: Badge
+}>()
+</script>
+
+<template>
+  <NeBadgeV2 :custom-kind-classes="badge.customClasses.join(' ')" kind="custom" size="sm">
+    <span class="flex items-center gap-1">
+      <FontAwesomeIcon :icon="badge.icon" />
+      {{ badge.text }}
+    </span>
+  </NeBadgeV2>
+</template>
diff --git a/src/components/standalone/monitoring/flows/FlowTableRow.vue b/src/components/standalone/monitoring/flows/FlowTableRow.vue
new file mode 100644
index 000000000..00e665844
--- /dev/null
+++ b/src/components/standalone/monitoring/flows/FlowTableRow.vue
@@ -0,0 +1,161 @@
+<script lang="ts" setup>
+import type { Flow } from '@/components/standalone/monitoring/FlowsTable.vue'
+import {
+  byteFormat1024,
+  NeBadgeV2,
+  NeTableCell,
+  NeTableRow,
+  NeTooltip
+} from '@nethesis/vue-components'
+import { useI18n } from 'vue-i18n'
+import { computed } from 'vue'
+import { differenceInSeconds } from 'date-fns'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import {
+  faArrowDown,
+  faArrowUp,
+  faDiagramProject,
+  faMagnifyingGlassPlus,
+  faUsers
+} from '@fortawesome/free-solid-svg-icons'
+import { floor } from 'lodash-es'
+import NetifydIcon from '@/components/standalone/NetifydIcon.vue'
+import { useNetifydStore } from '@/stores/standalone/netifyd.ts'
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core'
+import FlowBadge from '@/components/standalone/monitoring/flows/FlowBadge.vue'
+
+const { data } = useNetifydStore()
+
+const { item } = defineProps<{
+  item: Flow
+}>()
+
+const { t } = useI18n()
+
+const flowAge = computed<string>(() => {
+  const totalSeconds = differenceInSeconds(item.last_seen_at, item.first_seen_at)
+  const hours = Math.floor(totalSeconds / 3600)
+  const minutes = Math.floor((totalSeconds % 3600) / 60)
+  const seconds = totalSeconds % 60
+  return [hours, minutes, seconds].map((value) => String(value).padStart(2, '0')).join(':')
+})
+
+const applicationName = computed<string>(() => {
+  for (const application of data) {
+    if (application.tag == item.detected_application_name) {
+      return application.label
+    }
+  }
+  return item.detected_application_name
+})
+
+export type Badge = {
+  text: string
+  icon: IconDefinition
+  content?: string
+  customClasses: string[]
+}
+
+const badges = computed<Badge[]>(() => {
+  const entries: Badge[] = []
+  switch (item.detected_protocol_name) {
+    default:
+      entries.push({
+        text: item.detected_protocol_name,
+        icon: faDiagramProject,
+        customClasses: ['bg-gray-200', 'text-gray-800', 'dark:bg-gray-600', 'dark:text-gray-100']
+      })
+  }
+  if (!item.local_origin && item.other_type == 'remote') {
+    entries.push({
+      text: t('standalone.flows.remote'),
+      icon: faArrowDown,
+      customClasses: ['bg-rose-100', 'text-rose-800', 'dark:bg-rose-700', 'dark:text-rose-100'],
+      content: t('standalone.flows.remote_description')
+    })
+  }
+  if (item.other_type == 'local') {
+    entries.push({
+      text: t('standalone.flows.internal'),
+      icon: faUsers,
+      customClasses: ['bg-blue-100', 'text-blue-800', 'dark:bg-blue-700', 'dark:text-blue-100'],
+      content: t('standalone.flows.internal_description')
+    })
+  }
+  return entries
+})
+
+const sourceIp = computed<string>(() => (item.local_origin ? item.local_ip : item.other_ip))
+const destinationIp = computed<string>(() => (item.local_origin ? item.other_ip : item.local_ip))
+</script>
+
+<template>
+  <NeTableRow>
+    <NeTableCell :data-label="t('standalone.flows.application')">
+      <span class="flex flex-wrap items-center gap-2">
+        <NetifydIcon :name="item.detected_application_name" class="h-6 w-6" />
+        <span>{{ applicationName }}</span>
+      </span>
+    </NeTableCell>
+    <NeTableCell :data-label="t('standalone.flows.tags')">
+      <span class="flex flex-wrap gap-2">
+        <template v-for="badge in badges" :key="badge.text">
+          <NeTooltip v-if="badge.content" trigger-event="mouseenter click">
+            <template #content>
+              {{ badge.content }}
+            </template>
+            <template #trigger>
+              <FlowBadge :badge="badge" />
+            </template>
+          </NeTooltip>
+          <FlowBadge v-else :badge="badge" />
+        </template>
+      </span>
+    </NeTableCell>
+    <NeTableCell :data-label="t('standalone.flows.source')">
+      {{ sourceIp }}
+    </NeTableCell>
+    <NeTableCell :data-label="t('standalone.flows.destination')">
+      <NeTooltip
+        v-if="item.dns_host_name != undefined || item.host_server_name != undefined"
+        trigger-event="mouseenter click"
+      >
+        <template #content>
+          <p>Destination IP: {{ destinationIp }}</p>
+          <p v-if="item.host_server_name != undefined">
+            Destination DNS: {{ item.host_server_name }}
+          </p>
+        </template>
+        <template #trigger>
+          {{ item.dns_host_name ?? item.host_server_name }}
+        </template>
+      </NeTooltip>
+      <template v-else>
+        {{ destinationIp }}
+      </template>
+    </NeTableCell>
+    <NeTableCell :data-label="t('standalone.flows.duration')">
+      {{ flowAge }}
+    </NeTableCell>
+    <NeTableCell :data-label="t('standalone.flows.last_seen_at')">
+      {{ new Date(item.last_seen_at).toLocaleTimeString() }}
+    </NeTableCell>
+    <NeTableCell :data-label="t('standalone.flows.download')">
+      <div class="flex items-center gap-2">
+        <FontAwesomeIcon :icon="faArrowDown" />
+        <span v-if="item.local_origin">{{ byteFormat1024(floor(item.local_rate)) }}</span>
+        <span v-else>{{ byteFormat1024(floor(item.other_rate)) }}</span>
+      </div>
+    </NeTableCell>
+    <NeTableCell :data-label="t('standalone.flows.upload')">
+      <div class="flex items-center gap-2">
+        <FontAwesomeIcon :icon="faArrowUp" />
+        <span v-if="item.local_origin">{{ byteFormat1024(floor(item.other_rate)) }}</span>
+        <span v-else>{{ byteFormat1024(floor(item.local_rate)) }}</span>
+      </div>
+    </NeTableCell>
+    <NeTableCell :data-label="t('standalone.flows.more_info')">
+      <FontAwesomeIcon :icon="faMagnifyingGlassPlus" />
+    </NeTableCell>
+  </NeTableRow>
+</template>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 23aec5671..f15eaa3b7 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -70,7 +70,8 @@
     "automated_tooltip": "This item is managed by the system and cannot be modified.",
     "remove": "Remove",
     "connected": "Connected",
-    "not_connected": "Not connected"
+    "not_connected": "Not connected",
+    "port": "Port"
   },
   "error": {
     "generic_error": "Something went wrong",
@@ -2372,9 +2373,15 @@
       "total_download": "Tot. download",
       "total_upload": "Tot. upload",
       "local": "Local",
+      "local_description": "Connection originated from Source IP address",
       "remote": "Remote",
+      "remote_description": "Connection originated from Destination IP address",
       "last_seen_at": "Last seen at",
-      "refresh_interval": "Refresh interval: { value }"
+      "refresh_interval": "Refresh interval: { value }",
+      "tags": "Tags",
+      "internal": "Internal",
+      "internal_description": "Connection is between local networks",
+      "more_info": "More info"
     },
     "ping_latency_monitor": {
       "title": "Ping latency monitor",
diff --git a/src/stores/standalone/netifyd.ts b/src/stores/standalone/netifyd.ts
new file mode 100644
index 000000000..4972cb745
--- /dev/null
+++ b/src/stores/standalone/netifyd.ts
@@ -0,0 +1,8 @@
+import { defineStore } from 'pinia'
+import { data } from '@/catalog.json'
+
+export const useNetifydStore = defineStore('netifyd', () => {
+  return {
+    data
+  }
+})

From 804d18a83ae2ee94d1dfb2ca5f000efd58593814 Mon Sep 17 00:00:00 2001
From: Tommaso Bailetti <tommaso.bailetti@nethesis.it>
Date: Wed, 21 Jan 2026 12:28:25 +0100
Subject: [PATCH 03/20] removed netifyicon added flowdetail modal

---
 src/components/standalone/NetifydIcon.vue     |  26 --
 .../standalone/monitoring/FlowsTable.vue      | 199 +++++++------
 .../monitoring/flows/FlowDetail.vue           | 265 ++++++++++++++++++
 .../monitoring/flows/FlowTableRow.vue         |  87 +++---
 src/i18n/en.json                              |  31 +-
 src/stores/standalone/netifyd.ts              |   8 -
 6 files changed, 453 insertions(+), 163 deletions(-)
 delete mode 100644 src/components/standalone/NetifydIcon.vue
 create mode 100644 src/components/standalone/monitoring/flows/FlowDetail.vue
 delete mode 100644 src/stores/standalone/netifyd.ts

diff --git a/src/components/standalone/NetifydIcon.vue b/src/components/standalone/NetifydIcon.vue
deleted file mode 100644
index c1b1f6dde..000000000
--- a/src/components/standalone/NetifydIcon.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<script lang="ts" setup>
-import { useNetifydStore } from '@/stores/standalone/netifyd.ts'
-import { computed } from 'vue'
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { faQuestionCircle } from '@fortawesome/free-solid-svg-icons'
-
-const { data } = useNetifydStore()
-
-const { name } = defineProps<{
-  name: string
-}>()
-
-const icon = computed<string | null>(() => {
-  for (const application of data) {
-    if (name == application.tag) {
-      return application.icon
-    }
-  }
-  return null
-})
-</script>
-
-<template>
-  <img v-if="icon" :alt="name" :src="icon" />
-  <FontAwesomeIcon v-else :icon="faQuestionCircle" />
-</template>
diff --git a/src/components/standalone/monitoring/FlowsTable.vue b/src/components/standalone/monitoring/FlowsTable.vue
index 17f77c84b..b181d1ad8 100644
--- a/src/components/standalone/monitoring/FlowsTable.vue
+++ b/src/components/standalone/monitoring/FlowsTable.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { useI18n } from 'vue-i18n'
-import { computed, type DebuggerEvent, onMounted, ref, watch } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { ubusCall } from '@/lib/standalone/ubus.ts'
 import type { AxiosResponse } from 'axios'
 import { useInterval } from '@vueuse/core'
@@ -13,7 +13,6 @@ import {
   NeDropdownFilter,
   type FilterOption,
   useItemPagination,
-  useSort,
   NePaginator,
   type SortEvent,
   NeProgressBar,
@@ -21,16 +20,26 @@ import {
   getAxiosErrorMessage
 } from '@nethesis/vue-components'
 import FlowTableRow from '@/components/standalone/monitoring/flows/FlowTableRow.vue'
-import { useNetifydStore } from '@/stores/standalone/netifyd.ts'
 import { useRouteQuery } from '@vueuse/router'
-
-const { data: categories } = useNetifydStore()
+import FlowDetail from '@/components/standalone/monitoring/flows/FlowDetail.vue'
 
 const { t } = useI18n()
 
+export type FlowEvent = {
+  type: 'flow_dpi_complete' | 'flow'
+  interface: string
+  internal: boolean
+  flow: Flow
+}
+
 export type Flow = {
+  conntrack: {
+    id: string
+  }
   detected_application_name: string
   detected_protocol_name: string
+  detection_guessed?: boolean
+  detection_packets?: number
   local_ip: string
   local_port: number
   other_ip: string
@@ -40,8 +49,10 @@ export type Flow = {
   last_seen_at: number
   local_bytes: number
   local_rate: number
+  local_mac: string
   other_bytes: number
   other_rate: number
+  other_mac: string
   other_type: 'remote' | 'local'
   digest: string
   host_server_name?: string
@@ -52,13 +63,17 @@ export type Flow = {
     ndpi_risk_score_server: number
     risks?: number[]
   }
+  ssl?: {
+    client_sni?: string
+  }
+  total_bytes: number
 }
 
 type FlowListResponse = AxiosResponse<{
-  list: Flow[]
+  list: FlowEvent[]
 }>
 
-const data = ref<Flow[]>([])
+const data = ref<FlowEvent[]>([])
 const loading = ref(true)
 const error = ref<Error>()
 function fetchData() {
@@ -121,8 +136,7 @@ const { counter, pause, reset, resume } = useInterval(1000, {
     if (refreshIntervalsValue.value != null && count >= refreshIntervalsValue.value) {
       fetchData()
     }
-  },
-  immediate: true
+  }
 })
 const progressBar = computed<number>(
   () => (counter.value / (refreshIntervalsValue.value || 10)) * 100
@@ -141,7 +155,7 @@ watch(refreshIntervalsValue, (value) => {
 const sourceIps = computed<FilterOption[]>(() => {
   const ipSet = new Set<string>()
   data.value.forEach((flow) => {
-    ipSet.add(flow.local_ip)
+    ipSet.add(flow.flow.local_ip)
   })
   return Array.from(ipSet).map((ip) => ({
     id: ip,
@@ -152,7 +166,7 @@ const sourceIps = computed<FilterOption[]>(() => {
 const destinationIps = computed<FilterOption[]>(() => {
   const ipSet = new Set<string>()
   data.value.forEach((flow) => {
-    ipSet.add(flow.other_ip)
+    ipSet.add(flow.flow.other_ip)
   })
   return Array.from(ipSet).map((ip) => ({
     id: ip,
@@ -163,46 +177,44 @@ const destinationIps = computed<FilterOption[]>(() => {
 const applications = computed<FilterOption[]>(() => {
   const appSet = new Set<string>()
   data.value.forEach((flow) => {
-    appSet.add(flow.detected_application_name)
+    appSet.add(flow.flow.detected_application_name)
   })
-  return Array.from(appSet).map((app) => {
-    for (const entry of categories) {
-      if (entry.tag == app) {
-        return {
-          id: app,
-          label: entry.label
-        }
+  return Array.from(appSet)
+    .map((app) => {
+      let label = app
+      // Remove netify. prefix if present
+      if (label.startsWith('netify.')) {
+        label = label.substring(7)
       }
-    }
-    return {
-      id: app,
-      label: app
-    }
-  })
+      // Replace dashes with spaces
+      label = label.replace(/-/g, ' ')
+      // Capitalize first character of each word
+      label = label
+        .split(' ')
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+        .join(' ')
+
+      return {
+        id: app,
+        label: label
+      }
+    })
+    .sort((a, b) => a.label.localeCompare(b.label))
 })
 
 const protocols = computed<FilterOption[]>(() => {
   const protoSet = new Set<string>()
   data.value.forEach((flow) => {
-    protoSet.add(flow.detected_protocol_name)
+    protoSet.add(flow.flow.detected_protocol_name)
   })
-  return Array.from(protoSet).map((proto) => ({
-    id: proto,
-    label: proto
-  }))
+  return Array.from(protoSet)
+    .map((proto) => ({
+      id: proto,
+      label: proto
+    }))
+    .sort((a, b) => a.label.localeCompare(b.label))
 })
 
-const origin: FilterOption[] = [
-  {
-    id: 'local',
-    label: t('standalone.flows.local')
-  },
-  {
-    id: 'remote',
-    label: t('standalone.flows.remote')
-  }
-]
-
 type Filter<T> = (a: T) => boolean
 
 const filter = useRouteQuery('filter', '')
@@ -210,10 +222,9 @@ const filterApplications = ref<string[]>([])
 const filterProtocols = ref<string[]>([])
 const filterSource = ref<string[]>([])
 const filterDestination = ref<string[]>([])
-const filterOrigin = ref<string[]>([])
-const filters: Filter<Flow>[] = [
+const filters: Filter<FlowEvent>[] = [
   (flow) => {
-    return Object.values(flow).some((value) =>
+    return Object.values(flow.flow).some((value) =>
       String(value).toLowerCase().includes(filter.value.toLowerCase())
     )
   },
@@ -221,54 +232,70 @@ const filters: Filter<Flow>[] = [
     if (!filterApplications.value.length) {
       return true
     }
-    return filterApplications.value.includes(flow.detected_application_name)
+    return filterApplications.value.includes(flow.flow.detected_application_name)
   },
   (flow) => {
     if (!filterSource.value.length) {
       return true
     }
-    return filterSource.value.includes(flow.local_ip)
+    return filterSource.value.includes(flow.flow.local_ip)
   },
   (flow) => {
     if (!filterDestination.value.length) {
       return true
     }
-    return filterDestination.value.includes(flow.other_ip)
+    return filterDestination.value.includes(flow.flow.other_ip)
   },
   (flow) => {
     if (!filterProtocols.value.length) {
       return true
     }
-    return filterProtocols.value.includes(flow.detected_protocol_name)
-  },
-  (flow) => {
-    if (!filterOrigin.value.length) {
-      return true
-    }
-    return filterOrigin.value.includes(flow.local_origin ? 'local' : 'remote')
+    return filterProtocols.value.includes(flow.flow.detected_protocol_name)
   }
 ]
 
-const filteredData = computed<Flow[]>(() => {
+const filteredData = computed<FlowEvent[]>(() => {
   return data.value.filter((flow) => filters.every((filter) => filter(flow)))
 })
 
-const sortKey = useRouteQuery<keyof Flow | string>('sort', 'download')
-const sortDescending = useRouteQuery('descending', 'true', { transform: Boolean })
-const { sortedItems } = useSort(() => filteredData.value, sortKey, sortDescending, {
-  duration: (a: Flow, b: Flow) => {
-    return a.last_seen_at - a.first_seen_at - (b.last_seen_at - b.first_seen_at)
-  },
-  download: (a: Flow, b: Flow) => {
-    const aRate = a.local_origin ? a.local_rate : a.other_rate
-    const bRate = b.local_origin ? b.local_rate : b.other_rate
-    return aRate - bRate
-  },
-  upload: (a: Flow, b: Flow) => {
-    const aRate = a.local_origin ? a.other_rate : a.local_rate
-    const bRate = b.local_origin ? b.other_rate : b.local_rate
-    return aRate - bRate
-  }
+type SortableKeys =
+  | 'detected_application_name'
+  | 'duration'
+  | 'last_seen_at'
+  | 'download'
+  | 'upload'
+const sortKey = useRouteQuery<SortableKeys>('sort', 'download')
+const sortDescending = ref(true)
+const sortedItems = computed<FlowEvent[]>(() => {
+  const items = [...filteredData.value]
+  return items.sort((a, b) => {
+    let compare = 0
+    switch (sortKey.value) {
+      case 'detected_application_name':
+        compare = a.flow.detected_application_name.localeCompare(b.flow.detected_application_name)
+        break
+      case 'duration':
+        compare =
+          a.flow.last_seen_at - a.flow.first_seen_at - (b.flow.last_seen_at - b.flow.first_seen_at)
+        break
+      case 'last_seen_at':
+        compare = a.flow.last_seen_at - b.flow.last_seen_at
+        break
+      case 'download': {
+        const aRate = a.flow.local_origin ? a.flow.local_rate : a.flow.other_rate
+        const bRate = b.flow.local_origin ? b.flow.local_rate : b.flow.other_rate
+        compare = aRate - bRate
+        break
+      }
+      case 'upload': {
+        const aRate = a.flow.local_origin ? a.flow.other_rate : a.flow.local_rate
+        const bRate = b.flow.local_origin ? b.flow.other_rate : b.flow.local_rate
+        compare = aRate - bRate
+        break
+      }
+    }
+    return sortDescending.value ? -compare : compare
+  })
 })
 
 const pageSize = useRouteQuery<number>('page-size', 10)
@@ -277,9 +304,18 @@ const { currentPage, paginatedItems } = useItemPagination(() => sortedItems.valu
 })
 
 const onSort = (payload: SortEvent) => {
-  sortKey.value = payload.key as keyof Flow
+  sortKey.value = payload.key as SortableKeys
   sortDescending.value = payload.descending
 }
+
+const flowDetails = ref<FlowEvent>()
+watch(flowDetails, (value) => {
+  if (value != undefined) {
+    pause()
+  } else {
+    resume()
+  }
+})
 </script>
 
 <template>
@@ -343,17 +379,6 @@ const onSort = (payload: SortEvent) => {
             kind="checkbox"
             show-options-filter
           />
-          <NeDropdownFilter
-            v-model="filterOrigin"
-            :clear-filter-label="t('ne_dropdown_filter.clear_selection')"
-            :clear-search-label="t('ne_dropdown_filter.clear_search')"
-            :label="t('standalone.flows.origin')"
-            :more-options-hidden-label="t('ne_dropdown_filter.more_options_hidden')"
-            :no-options-label="t('ne_dropdown_filter.no_options')"
-            :open-menu-aria-label="t('ne_dropdown_filter.open_filter')"
-            :options="origin"
-            kind="checkbox"
-          />
         </div>
         <div class="space-y-2">
           <NeDropdownFilter
@@ -407,7 +432,12 @@ const onSort = (payload: SortEvent) => {
         <NeTableHeadCell />
       </NeTableHead>
       <NeTableBody>
-        <FlowTableRow v-for="flow in paginatedItems" :key="flow.digest" :item="flow" />
+        <FlowTableRow
+          v-for="flow in paginatedItems"
+          :key="flow.flow.digest"
+          :item="flow"
+          @show="flowDetails = $event"
+        />
       </NeTableBody>
       <template v-if="!loading" #paginator>
         <NePaginator
@@ -432,5 +462,6 @@ const onSort = (payload: SortEvent) => {
         />
       </template>
     </NeTable>
+    <FlowDetail :flow="flowDetails" @close="flowDetails = undefined" />
   </div>
 </template>
diff --git a/src/components/standalone/monitoring/flows/FlowDetail.vue b/src/components/standalone/monitoring/flows/FlowDetail.vue
new file mode 100644
index 000000000..7c277845e
--- /dev/null
+++ b/src/components/standalone/monitoring/flows/FlowDetail.vue
@@ -0,0 +1,265 @@
+<script lang="ts" setup>
+import { byteFormat1024, kbpsFormat, NeCard, NeModal } from '@nethesis/vue-components'
+import type { FlowEvent } from '@/components/standalone/monitoring/FlowsTable.vue'
+import { useI18n } from 'vue-i18n'
+import { computed, ref, watch } from 'vue'
+import { formatDistance } from 'date-fns'
+
+const { t } = useI18n()
+
+defineEmits<{
+  close: []
+}>()
+
+const props = defineProps<{
+  flow?: FlowEvent
+}>()
+
+const _flow = ref<FlowEvent>()
+
+watch(
+  () => props.flow,
+  (val) => {
+    if (val != undefined) {
+      _flow.value = val
+    }
+  },
+  {
+    immediate: true
+  }
+)
+
+type EndpointInfo = {
+  ip: string
+  port: number
+  mac: string
+}
+
+const source = computed<EndpointInfo>(() => {
+  let ip = ''
+  let port = 0
+  let mac = ''
+
+  if (_flow.value != undefined) {
+    if (_flow.value.flow.local_origin) {
+      ip = _flow.value.flow.local_ip
+      port = _flow.value.flow.local_port
+      mac = _flow.value.flow.local_mac
+    } else {
+      ip = _flow.value.flow.other_ip
+      port = _flow.value.flow.other_port
+      mac = _flow.value.flow.other_mac
+    }
+  }
+
+  return {
+    ip,
+    port,
+    mac
+  }
+})
+
+const destination = computed<EndpointInfo>(() => {
+  let ip = ''
+  let port = 0
+  let mac = ''
+
+  if (_flow.value != undefined) {
+    if (_flow.value.flow.local_origin) {
+      ip = _flow.value.flow.other_ip
+      port = _flow.value.flow.other_port
+      mac = _flow.value.flow.other_mac
+    } else {
+      ip = _flow.value.flow.local_ip
+      port = _flow.value.flow.local_port
+      mac = _flow.value.flow.local_mac
+    }
+  }
+
+  return {
+    ip,
+    port,
+    mac
+  }
+})
+
+const uploadRate = computed(() => {
+  if (_flow.value == undefined) {
+    return 0
+  }
+  return _flow.value.flow.local_origin ? _flow.value.flow.local_rate : _flow.value.flow.other_rate
+})
+
+const downloadRate = computed(() => {
+  if (_flow.value == undefined) {
+    return 0
+  }
+  return _flow.value.flow.local_origin ? _flow.value.flow.other_rate : _flow.value.flow.local_rate
+})
+
+const uploadBytes = computed(() => {
+  if (_flow.value == undefined) {
+    return 0
+  }
+  return _flow.value.flow.local_origin ? _flow.value.flow.local_bytes : _flow.value.flow.other_bytes
+})
+
+const downloadBytes = computed(() => {
+  if (_flow.value == undefined) {
+    return 0
+  }
+  return _flow.value.flow.local_origin ? _flow.value.flow.other_bytes : _flow.value.flow.local_bytes
+})
+
+function formatRate(rate: number): string {
+  // Convert bytes/s to Kbps: (bytes * 8 bits/byte) / 1000
+  return kbpsFormat((rate * 8) / 1000)
+}
+</script>
+
+<template>
+  <NeModal
+    :close-aria-label="t('common.close')"
+    :primary-label="t('common.close')"
+    :title="t('standalone.flows.flow_details')"
+    :visible="flow != undefined"
+    kind="neutral"
+    size="xxl"
+    @close="$emit('close')"
+    @primary-click="$emit('close')"
+  >
+    <div
+      v-if="_flow != undefined"
+      class="gap-4 sm:grid sm:grid-cols-2 **:data-facts:*:sm:grid **:data-facts:*:sm:grid-cols-2 **:data-facts:*:sm:gap-4"
+    >
+      <NeCard>
+        <template #title>{{ t('standalone.flows.endpoint_information') }}</template>
+        <dl data-facts>
+          <div>
+            <dt>{{ t('standalone.flows.source_ip') }}</dt>
+            <dd>{{ source.ip }}</dd>
+          </div>
+          <div>
+            <dt>{{ t('standalone.flows.source_port') }}</dt>
+            <dd>{{ source.port }}</dd>
+          </div>
+          <div>
+            <dt>{{ t('standalone.flows.source_mac') }}</dt>
+            <dd v-if="source.mac != '00:00:00:00:00:00'">{{ source.mac }}</dd>
+            <dd v-else>{{ t('common.unknown') }}</dd>
+          </div>
+          <div>
+            <dt>{{ t('standalone.flows.destination_ip') }}</dt>
+            <dd>{{ destination.ip }}</dd>
+          </div>
+          <div>
+            <dt>{{ t('standalone.flows.destination_port') }}</dt>
+            <dd>{{ destination.port }}</dd>
+          </div>
+          <div>
+            <dt>{{ t('standalone.flows.destination_mac') }}</dt>
+            <dd v-if="destination.mac != '00:00:00:00:00:00'">{{ destination.mac }}</dd>
+            <dd v-else>{{ t('common.unknown') }}</dd>
+          </div>
+        </dl>
+      </NeCard>
+      <NeCard>
+        <template #title>{{ t('standalone.flows.hostname_information') }}</template>
+        <dl data-facts>
+          <div v-if="_flow.flow.host_server_name">
+            <dt>{{ t('standalone.flows.hostname') }}</dt>
+            <dd>{{ _flow.flow.host_server_name }}</dd>
+          </div>
+          <div>
+            <dt>{{ t('standalone.flows.domain') }}</dt>
+            <dd>{{ _flow.flow.dns_host_name }}</dd>
+          </div>
+          <div v-if="_flow.flow.ssl?.client_sni">
+            <dt>{{ t('standalone.flows.tls_sni_hostname') }}</dt>
+            <dd>{{ _flow.flow.ssl.client_sni }}</dd>
+          </div>
+        </dl>
+      </NeCard>
+      <NeCard>
+        <template #title>
+          <template v-if="_flow.type == 'flow'">
+            {{ t('standalone.flows.partial_traffic_inspection') }}
+          </template>
+          <template v-else>
+            {{ t('standalone.flows.traffic_inspection_details') }}
+          </template>
+        </template>
+        <dl data-facts>
+          <div>
+            <dt>{{ t('standalone.flows.protocol') }}</dt>
+            <dd>{{ _flow.flow.detected_protocol_name }}</dd>
+          </div>
+          <div>
+            <dt>{{ t('standalone.flows.application') }}</dt>
+            <dd>{{ _flow.flow.detected_application_name }}</dd>
+          </div>
+          <div>
+            <dt>{{ t('standalone.flows.packets_analyzed') }}</dt>
+            <dd>{{ _flow.flow.detection_packets }}</dd>
+          </div>
+        </dl>
+      </NeCard>
+      <NeCard>
+        <template #title>{{ t('standalone.flows.flow_info') }}</template>
+        <dl data-facts>
+          <div>
+            <dt>{{ t('standalone.flows.conntrack_id') }}</dt>
+            <dd>{{ _flow.flow.conntrack.id }}</dd>
+          </div>
+          <div>
+            <dt>{{ t('standalone.flows.first_seen_at') }}</dt>
+            <dd>{{ new Date(_flow.flow.first_seen_at).toLocaleString() }}</dd>
+          </div>
+          <div>
+            <dt>{{ t('standalone.flows.last_seen_at') }}</dt>
+            <dd>{{ new Date(_flow.flow.last_seen_at).toLocaleString() }}</dd>
+          </div>
+          <div>
+            <dt>{{ t('standalone.flows.duration') }}</dt>
+            <dd>
+              {{
+                formatDistance(
+                  new Date(_flow.flow.first_seen_at),
+                  new Date(_flow.flow.last_seen_at)
+                )
+              }}
+            </dd>
+          </div>
+        </dl>
+      </NeCard>
+      <NeCard>
+        <template #title>{{ t('standalone.flows.traffic_flow') }}</template>
+        <dl data-facts>
+          <div>
+            <dt>{{ t('standalone.flows.download_rate') }}</dt>
+            <dd>{{ formatRate(downloadRate) }}</dd>
+          </div>
+          <div>
+            <dt>{{ t('standalone.flows.upload_rate') }}</dt>
+            <dd>{{ formatRate(uploadRate) }}</dd>
+          </div>
+          <div>
+            <dt>{{ t('standalone.flows.download_bytes') }}</dt>
+            <dd>{{ byteFormat1024(downloadBytes) }}</dd>
+          </div>
+          <div>
+            <dt>{{ t('standalone.flows.upload_bytes') }}</dt>
+            <dd>{{ byteFormat1024(uploadBytes) }}</dd>
+          </div>
+          <div>
+            <dt>{{ t('standalone.flows.total_bytes') }}</dt>
+            <dd>{{ byteFormat1024(_flow.flow.total_bytes) }}</dd>
+          </div>
+        </dl>
+      </NeCard>
+      <pre class="col-span-full overflow-auto rounded-md bg-gray-50 p-4 text-sm dark:bg-gray-900">
+        <code>{{ JSON.stringify(_flow, null, 2) }}</code>
+      </pre>
+    </div>
+  </NeModal>
+</template>
diff --git a/src/components/standalone/monitoring/flows/FlowTableRow.vue b/src/components/standalone/monitoring/flows/FlowTableRow.vue
index 00e665844..0d3421925 100644
--- a/src/components/standalone/monitoring/flows/FlowTableRow.vue
+++ b/src/components/standalone/monitoring/flows/FlowTableRow.vue
@@ -1,12 +1,6 @@
 <script lang="ts" setup>
-import type { Flow } from '@/components/standalone/monitoring/FlowsTable.vue'
-import {
-  byteFormat1024,
-  NeBadgeV2,
-  NeTableCell,
-  NeTableRow,
-  NeTooltip
-} from '@nethesis/vue-components'
+import type { FlowEvent } from '@/components/standalone/monitoring/FlowsTable.vue'
+import { kbpsFormat, NeButton, NeTableCell, NeTableRow, NeTooltip } from '@nethesis/vue-components'
 import { useI18n } from 'vue-i18n'
 import { computed } from 'vue'
 import { differenceInSeconds } from 'date-fns'
@@ -18,22 +12,21 @@ import {
   faMagnifyingGlassPlus,
   faUsers
 } from '@fortawesome/free-solid-svg-icons'
-import { floor } from 'lodash-es'
-import NetifydIcon from '@/components/standalone/NetifydIcon.vue'
-import { useNetifydStore } from '@/stores/standalone/netifyd.ts'
 import type { IconDefinition } from '@fortawesome/fontawesome-svg-core'
 import FlowBadge from '@/components/standalone/monitoring/flows/FlowBadge.vue'
 
-const { data } = useNetifydStore()
-
 const { item } = defineProps<{
-  item: Flow
+  item: FlowEvent
+}>()
+
+defineEmits<{
+  show: [flow: FlowEvent]
 }>()
 
 const { t } = useI18n()
 
 const flowAge = computed<string>(() => {
-  const totalSeconds = differenceInSeconds(item.last_seen_at, item.first_seen_at)
+  const totalSeconds = differenceInSeconds(item.flow.last_seen_at, item.flow.first_seen_at)
   const hours = Math.floor(totalSeconds / 3600)
   const minutes = Math.floor((totalSeconds % 3600) / 60)
   const seconds = totalSeconds % 60
@@ -41,12 +34,18 @@ const flowAge = computed<string>(() => {
 })
 
 const applicationName = computed<string>(() => {
-  for (const application of data) {
-    if (application.tag == item.detected_application_name) {
-      return application.label
-    }
+  let name = item.flow.detected_application_name
+  // Remove netify. prefix if present
+  if (name.startsWith('netify.')) {
+    name = name.substring(7)
   }
-  return item.detected_application_name
+  // Replace dashes with spaces
+  name = name.replace(/-/g, ' ')
+  // Capitalize first character of each word
+  return name
+    .split(' ')
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ')
 })
 
 export type Badge = {
@@ -58,15 +57,15 @@ export type Badge = {
 
 const badges = computed<Badge[]>(() => {
   const entries: Badge[] = []
-  switch (item.detected_protocol_name) {
+  switch (item.flow.detected_protocol_name) {
     default:
       entries.push({
-        text: item.detected_protocol_name,
+        text: item.flow.detected_protocol_name,
         icon: faDiagramProject,
         customClasses: ['bg-gray-200', 'text-gray-800', 'dark:bg-gray-600', 'dark:text-gray-100']
       })
   }
-  if (!item.local_origin && item.other_type == 'remote') {
+  if (!item.flow.local_origin && item.flow.other_type == 'remote') {
     entries.push({
       text: t('standalone.flows.remote'),
       icon: faArrowDown,
@@ -74,7 +73,7 @@ const badges = computed<Badge[]>(() => {
       content: t('standalone.flows.remote_description')
     })
   }
-  if (item.other_type == 'local') {
+  if (item.flow.other_type == 'local') {
     entries.push({
       text: t('standalone.flows.internal'),
       icon: faUsers,
@@ -85,17 +84,23 @@ const badges = computed<Badge[]>(() => {
   return entries
 })
 
-const sourceIp = computed<string>(() => (item.local_origin ? item.local_ip : item.other_ip))
-const destinationIp = computed<string>(() => (item.local_origin ? item.other_ip : item.local_ip))
+const sourceIp = computed<string>(() =>
+  item.flow.local_origin ? item.flow.local_ip : item.flow.other_ip
+)
+const destinationIp = computed<string>(() =>
+  item.flow.local_origin ? item.flow.other_ip : item.flow.local_ip
+)
+
+function formatRate(rate: number): string {
+  // Convert bytes/s to Kbps: (bytes * 8 bits/byte) / 1000
+  return kbpsFormat((rate * 8) / 1000)
+}
 </script>
 
 <template>
   <NeTableRow>
     <NeTableCell :data-label="t('standalone.flows.application')">
-      <span class="flex flex-wrap items-center gap-2">
-        <NetifydIcon :name="item.detected_application_name" class="h-6 w-6" />
-        <span>{{ applicationName }}</span>
-      </span>
+      {{ applicationName }}
     </NeTableCell>
     <NeTableCell :data-label="t('standalone.flows.tags')">
       <span class="flex flex-wrap gap-2">
@@ -117,17 +122,17 @@ const destinationIp = computed<string>(() => (item.local_origin ? item.other_ip
     </NeTableCell>
     <NeTableCell :data-label="t('standalone.flows.destination')">
       <NeTooltip
-        v-if="item.dns_host_name != undefined || item.host_server_name != undefined"
+        v-if="item.flow.dns_host_name != undefined || item.flow.host_server_name != undefined"
         trigger-event="mouseenter click"
       >
         <template #content>
           <p>Destination IP: {{ destinationIp }}</p>
-          <p v-if="item.host_server_name != undefined">
-            Destination DNS: {{ item.host_server_name }}
+          <p v-if="item.flow.host_server_name != undefined">
+            Destination DNS: {{ item.flow.host_server_name }}
           </p>
         </template>
         <template #trigger>
-          {{ item.dns_host_name ?? item.host_server_name }}
+          {{ item.flow.dns_host_name ?? item.flow.host_server_name }}
         </template>
       </NeTooltip>
       <template v-else>
@@ -138,24 +143,26 @@ const destinationIp = computed<string>(() => (item.local_origin ? item.other_ip
       {{ flowAge }}
     </NeTableCell>
     <NeTableCell :data-label="t('standalone.flows.last_seen_at')">
-      {{ new Date(item.last_seen_at).toLocaleTimeString() }}
+      {{ new Date(item.flow.last_seen_at).toLocaleTimeString() }}
     </NeTableCell>
     <NeTableCell :data-label="t('standalone.flows.download')">
       <div class="flex items-center gap-2">
         <FontAwesomeIcon :icon="faArrowDown" />
-        <span v-if="item.local_origin">{{ byteFormat1024(floor(item.local_rate)) }}</span>
-        <span v-else>{{ byteFormat1024(floor(item.other_rate)) }}</span>
+        <span v-if="item.flow.local_origin">{{ formatRate(item.flow.other_rate) }}</span>
+        <span v-else>{{ formatRate(item.flow.local_rate) }}</span>
       </div>
     </NeTableCell>
     <NeTableCell :data-label="t('standalone.flows.upload')">
       <div class="flex items-center gap-2">
         <FontAwesomeIcon :icon="faArrowUp" />
-        <span v-if="item.local_origin">{{ byteFormat1024(floor(item.other_rate)) }}</span>
-        <span v-else>{{ byteFormat1024(floor(item.local_rate)) }}</span>
+        <span v-if="item.flow.local_origin">{{ formatRate(item.flow.local_rate) }}</span>
+        <span v-else>{{ formatRate(item.flow.other_rate) }}</span>
       </div>
     </NeTableCell>
     <NeTableCell :data-label="t('standalone.flows.more_info')">
-      <FontAwesomeIcon :icon="faMagnifyingGlassPlus" />
+      <NeButton kind="tertiary" @click="$emit('show', item)">
+        <FontAwesomeIcon :icon="faMagnifyingGlassPlus" />
+      </NeButton>
     </NeTableCell>
   </NeTableRow>
 </template>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index f15eaa3b7..f410a8471 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -2372,16 +2372,37 @@
       "upload": "Upload",
       "total_download": "Tot. download",
       "total_upload": "Tot. upload",
-      "local": "Local",
-      "local_description": "Connection originated from Source IP address",
-      "remote": "Remote",
-      "remote_description": "Connection originated from Destination IP address",
       "last_seen_at": "Last seen at",
       "refresh_interval": "Refresh interval: { value }",
       "tags": "Tags",
       "internal": "Internal",
       "internal_description": "Connection is between local networks",
-      "more_info": "More info"
+      "more_info": "More info",
+      "flow_details": "Flow details",
+      "endpoint_information": "Endpoint information",
+      "source_ip": "Source IP",
+      "source_port": "Source port",
+      "source_mac": "Source MAC",
+      "destination_ip": "Destination IP",
+      "destination_port": "Destination port",
+      "destination_mac": "Destination MAC",
+      "traffic_inspection_details": "Traffic Inspection Details",
+      "partial_traffic_inspection": "Partial traffic inspection",
+      "flow_info": "Flow info",
+      "conntrack_id": "Conntrack ID",
+      "first_seen_at": "First seen at",
+      "packets_analyzed": "Packets analyzed",
+      "detection_guessed": "Detection guessed",
+      "hostname_information": "Hostname information",
+      "hostname": "Hostname",
+      "domain": "Domain",
+      "tls_sni_hostname": "TLS SNI hostname",
+      "traffic_flow": "Traffic flow",
+      "upload_rate": "Upload rate",
+      "download_rate": "Download rate",
+      "upload_bytes": "Upload bytes",
+      "download_bytes": "Download bytes",
+      "total_bytes": "Total bytes"
     },
     "ping_latency_monitor": {
       "title": "Ping latency monitor",
diff --git a/src/stores/standalone/netifyd.ts b/src/stores/standalone/netifyd.ts
deleted file mode 100644
index 4972cb745..000000000
--- a/src/stores/standalone/netifyd.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { defineStore } from 'pinia'
-import { data } from '@/catalog.json'
-
-export const useNetifydStore = defineStore('netifyd', () => {
-  return {
-    data
-  }
-})

From fe0b39b706b1638df5f022f12d1df6e8438baaf9 Mon Sep 17 00:00:00 2001
From: Tommaso Bailetti <tommaso.bailetti@nethesis.it>
Date: Wed, 21 Jan 2026 12:28:58 +0100
Subject: [PATCH 04/20] refactored useTabs, using useRouteQuery from vueuse

---
 src/composables/useTabs.ts | 32 +++++---------------------------
 1 file changed, 5 insertions(+), 27 deletions(-)

diff --git a/src/composables/useTabs.ts b/src/composables/useTabs.ts
index 6237d2a5b..99d50c698 100644
--- a/src/composables/useTabs.ts
+++ b/src/composables/useTabs.ts
@@ -2,41 +2,19 @@
 //  SPDX-License-Identifier: GPL-3.0-or-later
 
 import type { Tab } from '@nethesis/vue-components'
-import { ref, watch } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { ref } from 'vue'
+import { useRouteQuery } from '@vueuse/router'
 
 /**
  * Composable that handles the state associated to the tabs of a page, binding them to
  * the router's `tab` query string.
- * @param {Tab[]} tabsList - A list containing all the tabs.
- * @param {string} [initialTabName] - If present, `selectedTab` will be set to
+ * @param {Tab[]} tabsList - A list containing all the tabs, the first tab will be selected by default.
  * the specified value when the component is mounted. If absent, the first value in `tabsList` will be
  * used instead.
  */
-export function useTabs(tabsList: Tab[], initialTabName?: string) {
-  const route = useRoute()
-  const router = useRouter()
-
+export function useTabs(tabsList: Tab[]) {
   const tabs = ref(tabsList)
-  const selectedTab = ref('')
-  const currentPath = route.path
-
-  watch(
-    () => route.query.tab,
-    () => {
-      if (route.path === currentPath) {
-        selectedTab.value =
-          (route.query.tab as string) ??
-          initialTabName ??
-          (tabs.value.length > 0 ? (tabs.value[0]?.name ?? '') : '')
-      }
-    },
-    { immediate: true }
-  )
-
-  watch(selectedTab, () => {
-    router.push({ path: route.path, query: { tab: selectedTab.value } })
-  })
+  const selectedTab = useRouteQuery('tab', tabs.value[0]?.name ?? '')
 
   return { tabs, selectedTab }
 }

From 61b146eb6b2992becbd1370160d8accdebc190ce Mon Sep 17 00:00:00 2001
From: Tommaso Bailetti <tommaso.bailetti@nethesis.it>
Date: Wed, 21 Jan 2026 12:49:37 +0100
Subject: [PATCH 05/20] fixed import

---
 src/components/standalone/monitoring/flows/FlowBadge.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/standalone/monitoring/flows/FlowBadge.vue b/src/components/standalone/monitoring/flows/FlowBadge.vue
index aa43465fe..a47a4ebe7 100644
--- a/src/components/standalone/monitoring/flows/FlowBadge.vue
+++ b/src/components/standalone/monitoring/flows/FlowBadge.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { NeBadgeV2 } from '@nethesis/vue-components'
-import type { Badge } from '@/components/standalone/monitoring/FlowTableRow.vue'
+import type { Badge } from '@/components/standalone/monitoring/flows/FlowTableRow.vue'
 
 defineProps<{
   badge: Badge

From ddf31c63c32f45dae107549bed5632e3a5331256 Mon Sep 17 00:00:00 2001
From: Tommaso Bailetti <tommaso.bailetti@nethesis.it>
Date: Fri, 23 Jan 2026 16:00:29 +0100
Subject: [PATCH 06/20] added details

---
 .../standalone/monitoring/FlowsTable.vue      | 284 ++++++++++++++----
 .../standalone/monitoring/flows/FlowBadge.vue |  39 ++-
 .../monitoring/flows/FlowDetail.vue           | 280 +++++++++--------
 .../monitoring/flows/FlowTableRow.vue         |  70 +----
 src/i18n/en.json                              |  11 +-
 src/lib/standalone/ndpiRisks.ts               | 116 +++++++
 6 files changed, 546 insertions(+), 254 deletions(-)
 create mode 100644 src/lib/standalone/ndpiRisks.ts

diff --git a/src/components/standalone/monitoring/FlowsTable.vue b/src/components/standalone/monitoring/FlowsTable.vue
index b181d1ad8..258821648 100644
--- a/src/components/standalone/monitoring/FlowsTable.vue
+++ b/src/components/standalone/monitoring/FlowsTable.vue
@@ -1,29 +1,66 @@
-<script lang="ts" setup>
-import { useI18n } from 'vue-i18n'
-import { computed, onMounted, ref, watch } from 'vue'
-import { ubusCall } from '@/lib/standalone/ubus.ts'
-import type { AxiosResponse } from 'axios'
-import { useInterval } from '@vueuse/core'
+<script lang="ts">
 import {
-  NeTable,
-  NeTableBody,
-  NeTableHead,
-  NeTableHeadCell,
-  NeTextInput,
-  NeDropdownFilter,
-  type FilterOption,
-  useItemPagination,
-  NePaginator,
-  type SortEvent,
-  NeProgressBar,
-  NeInlineNotification,
-  getAxiosErrorMessage
-} from '@nethesis/vue-components'
-import FlowTableRow from '@/components/standalone/monitoring/flows/FlowTableRow.vue'
-import { useRouteQuery } from '@vueuse/router'
-import FlowDetail from '@/components/standalone/monitoring/flows/FlowDetail.vue'
+  faArrowDown,
+  faClockRotateLeft,
+  faUsers,
+  faWarning
+} from '@fortawesome/free-solid-svg-icons'
+import { isHighSeverityRisk } from '@/lib/standalone/ndpiRisks.ts'
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core'
 
-const { t } = useI18n()
+export type Badge = {
+  id: string
+  text: string
+  icon: IconDefinition
+  content?: string
+  customClasses: string[]
+}
+
+export function extractBadges(entry: FlowEvent): Badge[] {
+  const badges: Badge[] = []
+  if (!entry.flow.local_origin && entry.flow.other_type == 'remote') {
+    badges.push({
+      id: 'remote',
+      text: 'standalone.flows.remote',
+      icon: faArrowDown,
+      customClasses: ['bg-rose-100', 'text-rose-800', 'dark:bg-rose-700', 'dark:text-rose-100'],
+      content: 'standalone.flows.remote_description'
+    })
+  }
+  if (entry.flow.other_type == 'local') {
+    badges.push({
+      id: 'local',
+      text: 'standalone.flows.internal',
+      icon: faUsers,
+      customClasses: ['bg-blue-100', 'text-blue-800', 'dark:bg-blue-700', 'dark:text-blue-100'],
+      content: 'standalone.flows.internal_description'
+    })
+  }
+  if (entry.type == 'flow') {
+    badges.push({
+      id: 'scanning',
+      text: 'standalone.flows.scanning',
+      icon: faClockRotateLeft,
+      customClasses: ['bg-gray-100', 'text-gray-800', 'dark:bg-gray-700', 'dark:text-gray-100'],
+      content: 'standalone.flows.scanning_description'
+    })
+  }
+  if (entry.flow.risks.risks?.some(isHighSeverityRisk)) {
+    badges.push({
+      id: 'risky',
+      text: 'standalone.flows.risky',
+      icon: faWarning,
+      customClasses: [
+        'bg-yellow-100',
+        'text-yellow-800',
+        'dark:bg-yellow-700',
+        'dark:text-yellow-100'
+      ],
+      content: 'standalone.flows.risky_description'
+    })
+  }
+  return badges
+}
 
 export type FlowEvent = {
   type: 'flow_dpi_complete' | 'flow'
@@ -68,6 +105,39 @@ export type Flow = {
   }
   total_bytes: number
 }
+</script>
+
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n'
+import { computed, onMounted, ref, watch } from 'vue'
+import { ubusCall } from '@/lib/standalone/ubus.ts'
+import type { AxiosResponse } from 'axios'
+import { useInterval } from '@vueuse/core'
+import {
+  NeTable,
+  NeTableBody,
+  NeTableHead,
+  NeTableHeadCell,
+  NeTextInput,
+  NeDropdownFilter,
+  type FilterOption,
+  useItemPagination,
+  NePaginator,
+  type SortEvent,
+  NeProgressBar,
+  NeInlineNotification,
+  getAxiosErrorMessage,
+  NeEmptyState,
+  NeTableCell,
+  NeTableRow
+} from '@nethesis/vue-components'
+import FlowTableRow from '@/components/standalone/monitoring/flows/FlowTableRow.vue'
+import { useRouteQuery } from '@vueuse/router'
+import FlowDetail from '@/components/standalone/monitoring/flows/FlowDetail.vue'
+import { ipv4ToInt } from '@/lib/ipUtils.ts'
+import { faTable } from '@fortawesome/free-solid-svg-icons'
+
+const { t } = useI18n()
 
 type FlowListResponse = AxiosResponse<{
   list: FlowEvent[]
@@ -127,6 +197,11 @@ const refreshIntervalsValue = computed<number | null>(() => {
       return null
   }
 })
+watch(refreshIntervalSelection, (val) => {
+  if (!val.includes('off')) {
+    fetchData()
+  }
+})
 
 onMounted(() => fetchData())
 
@@ -152,28 +227,6 @@ watch(refreshIntervalsValue, (value) => {
   }
 })
 
-const sourceIps = computed<FilterOption[]>(() => {
-  const ipSet = new Set<string>()
-  data.value.forEach((flow) => {
-    ipSet.add(flow.flow.local_ip)
-  })
-  return Array.from(ipSet).map((ip) => ({
-    id: ip,
-    label: ip
-  }))
-})
-
-const destinationIps = computed<FilterOption[]>(() => {
-  const ipSet = new Set<string>()
-  data.value.forEach((flow) => {
-    ipSet.add(flow.flow.other_ip)
-  })
-  return Array.from(ipSet).map((ip) => ({
-    id: ip,
-    label: ip
-  }))
-})
-
 const applications = computed<FilterOption[]>(() => {
   const appSet = new Set<string>()
   data.value.forEach((flow) => {
@@ -215,13 +268,90 @@ const protocols = computed<FilterOption[]>(() => {
     .sort((a, b) => a.label.localeCompare(b.label))
 })
 
+const badges = computed<FilterOption[]>(() => {
+  const badgeMap = new Map<string, Badge>()
+  data.value.forEach((flow) => {
+    extractBadges(flow).forEach((badge) => {
+      if (!badgeMap.has(badge.id)) {
+        badgeMap.set(badge.id, badge)
+      }
+    })
+  })
+  return Array.from(badgeMap.values())
+    .map((badge) => ({
+      id: badge.id,
+      label: t(badge.text)
+    }))
+    .sort((a, b) => a.label.localeCompare(b.label))
+})
+
+const sourceIps = computed<FilterOption[]>(() => {
+  const ipSet = new Set<string>()
+  data.value.forEach((flow) => {
+    if (flow.flow.local_origin) {
+      return ipSet.add(flow.flow.local_ip)
+    } else {
+      return ipSet.add(flow.flow.other_ip)
+    }
+  })
+  return Array.from(ipSet)
+    .map((ip) => ({
+      id: ip,
+      label: ip
+    }))
+    .sort((a, b) => ipv4ToInt(a.id) - ipv4ToInt(b.id))
+})
+
+const destinationIps = computed<FilterOption[]>(() => {
+  const ipSet = new Set<string>()
+  data.value.forEach((flow) => {
+    if (flow.flow.local_origin) {
+      return ipSet.add(flow.flow.other_ip)
+    } else {
+      return ipSet.add(flow.flow.local_ip)
+    }
+  })
+  return Array.from(ipSet)
+    .map((ip) => ({
+      id: ip,
+      label: ip
+    }))
+    .sort((a, b) => ipv4ToInt(a.id) - ipv4ToInt(b.id))
+})
+
 type Filter<T> = (a: T) => boolean
 
 const filter = useRouteQuery('filter', '')
-const filterApplications = ref<string[]>([])
-const filterProtocols = ref<string[]>([])
-const filterSource = ref<string[]>([])
-const filterDestination = ref<string[]>([])
+const filterApplications = useRouteQuery<string, string[]>('applications', '', {
+  transform: {
+    get: (val) => (val ? val.split(',') : []),
+    set: (val) => val.join(',')
+  }
+})
+const filterProtocols = useRouteQuery<string, string[]>('protocols', '', {
+  transform: {
+    get: (val) => (val ? val.split(',') : []),
+    set: (val) => val.join(',')
+  }
+})
+const filterBadges = useRouteQuery<string, string[]>('badge', '', {
+  transform: {
+    get: (val) => (val ? val.split(',') : []),
+    set: (val) => val.join(',')
+  }
+})
+const filterSource = useRouteQuery<string, string[]>('source', '', {
+  transform: {
+    get: (val) => (val ? val.split(',') : []),
+    set: (val) => val.join(',')
+  }
+})
+const filterDestination = useRouteQuery<string, string[]>('destination', '', {
+  transform: {
+    get: (val) => (val ? val.split(',') : []),
+    set: (val) => val.join(',')
+  }
+})
 const filters: Filter<FlowEvent>[] = [
   (flow) => {
     return Object.values(flow.flow).some((value) =>
@@ -235,22 +365,34 @@ const filters: Filter<FlowEvent>[] = [
     return filterApplications.value.includes(flow.flow.detected_application_name)
   },
   (flow) => {
-    if (!filterSource.value.length) {
+    if (!filterProtocols.value.length) {
       return true
     }
-    return filterSource.value.includes(flow.flow.local_ip)
+    return filterProtocols.value.includes(flow.flow.detected_protocol_name)
   },
   (flow) => {
-    if (!filterDestination.value.length) {
+    if (!filterBadges.value.length) {
       return true
     }
-    return filterDestination.value.includes(flow.flow.other_ip)
+    return extractBadges(flow).some((items) => filterBadges.value.includes(items.id))
   },
   (flow) => {
-    if (!filterProtocols.value.length) {
+    if (!filterSource.value.length) {
       return true
     }
-    return filterProtocols.value.includes(flow.flow.detected_protocol_name)
+    if (flow.flow.local_origin) {
+      return filterSource.value.includes(flow.flow.local_ip)
+    }
+    return filterSource.value.includes(flow.flow.other_ip)
+  },
+  (flow) => {
+    if (!filterDestination.value.length) {
+      return true
+    }
+    if (flow.flow.local_origin) {
+      return filterDestination.value.includes(flow.flow.other_ip)
+    }
+    return filterDestination.value.includes(flow.flow.local_ip)
   }
 ]
 
@@ -355,6 +497,18 @@ watch(flowDetails, (value) => {
             kind="checkbox"
             show-options-filter
           />
+          <NeDropdownFilter
+            v-model="filterBadges"
+            :clear-filter-label="t('ne_dropdown_filter.clear_selection')"
+            :clear-search-label="t('ne_dropdown_filter.clear_search')"
+            :label="t('standalone.flows.tags')"
+            :more-options-hidden-label="t('ne_dropdown_filter.more_options_hidden')"
+            :no-options-label="t('ne_dropdown_filter.no_options')"
+            :open-menu-aria-label="t('ne_dropdown_filter.open_filter')"
+            :options="badges"
+            kind="checkbox"
+            show-options-filter
+          />
           <NeDropdownFilter
             v-model="filterSource"
             :clear-filter-label="t('ne_dropdown_filter.clear_selection')"
@@ -408,6 +562,9 @@ watch(flowDetails, (value) => {
         <NeTableHeadCell column-key="detected_application_name" sortable @sort="onSort">
           {{ t('standalone.flows.application') }}
         </NeTableHeadCell>
+        <NeTableHeadCell>
+          {{ t('standalone.flows.protocol') }}
+        </NeTableHeadCell>
         <NeTableHeadCell>
           {{ t('standalone.flows.tags') }}
         </NeTableHeadCell>
@@ -431,7 +588,7 @@ watch(flowDetails, (value) => {
         </NeTableHeadCell>
         <NeTableHeadCell />
       </NeTableHead>
-      <NeTableBody>
+      <NeTableBody v-if="paginatedItems.length > 0">
         <FlowTableRow
           v-for="flow in paginatedItems"
           :key="flow.flow.digest"
@@ -439,7 +596,18 @@ watch(flowDetails, (value) => {
           @show="flowDetails = $event"
         />
       </NeTableBody>
-      <template v-if="!loading" #paginator>
+      <NeTableBody v-else>
+        <NeTableRow>
+          <NeTableCell colspan="10">
+            <NeEmptyState
+              :description="t('standalone.flows.no_flows_found_description')"
+              :icon="faTable"
+              :title="t('standalone.flows.no_flows_found')"
+            />
+          </NeTableCell>
+        </NeTableRow>
+      </NeTableBody>
+      <template v-if="!loading && paginatedItems.length > 0" #paginator>
         <NePaginator
           :current-page="currentPage"
           :nav-pagination-label="t('ne_table.pagination')"
diff --git a/src/components/standalone/monitoring/flows/FlowBadge.vue b/src/components/standalone/monitoring/flows/FlowBadge.vue
index a47a4ebe7..46ec93ef5 100644
--- a/src/components/standalone/monitoring/flows/FlowBadge.vue
+++ b/src/components/standalone/monitoring/flows/FlowBadge.vue
@@ -1,18 +1,41 @@
 <script setup lang="ts">
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { NeBadgeV2 } from '@nethesis/vue-components'
+import { NeBadgeV2, NeTooltip } from '@nethesis/vue-components'
 import type { Badge } from '@/components/standalone/monitoring/flows/FlowTableRow.vue'
+import { useI18n } from 'vue-i18n'
+import { computed, h } from 'vue'
 
-defineProps<{
+const { t } = useI18n()
+
+const props = defineProps<{
   badge: Badge
 }>()
+
+const badgeComponent = computed(() =>
+  h(
+    NeBadgeV2,
+    {
+      customKindClasses: props.badge.customClasses.join(' '),
+      kind: 'custom',
+      size: 'sm'
+    },
+    () =>
+      h('span', { class: 'flex items-center gap-1' }, [
+        h(FontAwesomeIcon, { icon: props.badge.icon }),
+        t(props.badge.text)
+      ])
+  )
+)
 </script>
 
 <template>
-  <NeBadgeV2 :custom-kind-classes="badge.customClasses.join(' ')" kind="custom" size="sm">
-    <span class="flex items-center gap-1">
-      <FontAwesomeIcon :icon="badge.icon" />
-      {{ badge.text }}
-    </span>
-  </NeBadgeV2>
+  <NeTooltip v-if="badge.content" trigger-event="mouseenter click">
+    <template #content>
+      {{ t(badge.content) }}
+    </template>
+    <template #trigger>
+      <component :is="badgeComponent" />
+    </template>
+  </NeTooltip>
+  <component :is="badgeComponent" v-else />
 </template>
diff --git a/src/components/standalone/monitoring/flows/FlowDetail.vue b/src/components/standalone/monitoring/flows/FlowDetail.vue
index 7c277845e..702f97d9b 100644
--- a/src/components/standalone/monitoring/flows/FlowDetail.vue
+++ b/src/components/standalone/monitoring/flows/FlowDetail.vue
@@ -4,6 +4,8 @@ import type { FlowEvent } from '@/components/standalone/monitoring/FlowsTable.vu
 import { useI18n } from 'vue-i18n'
 import { computed, ref, watch } from 'vue'
 import { formatDistance } from 'date-fns'
+import { getNdpiRiskDescription } from '@/lib/standalone/ndpiRisks.ts'
+import AdvancedSettingsDropdown from '@/components/AdvancedSettingsDropdown.vue'
 
 const { t } = useI18n()
 
@@ -115,6 +117,14 @@ function formatRate(rate: number): string {
   // Convert bytes/s to Kbps: (bytes * 8 bits/byte) / 1000
   return kbpsFormat((rate * 8) / 1000)
 }
+
+const hostnameInformationVisible = computed<boolean>(() => {
+  return [
+    _flow.value?.flow.host_server_name != undefined,
+    _flow.value?.flow.dns_host_name != undefined,
+    _flow.value?.flow.ssl?.client_sni != undefined
+  ].some((value) => value)
+})
 </script>
 
 <template>
@@ -128,138 +138,150 @@ function formatRate(rate: number): string {
     @close="$emit('close')"
     @primary-click="$emit('close')"
   >
-    <div
-      v-if="_flow != undefined"
-      class="gap-4 sm:grid sm:grid-cols-2 **:data-facts:*:sm:grid **:data-facts:*:sm:grid-cols-2 **:data-facts:*:sm:gap-4"
-    >
-      <NeCard>
-        <template #title>{{ t('standalone.flows.endpoint_information') }}</template>
-        <dl data-facts>
-          <div>
-            <dt>{{ t('standalone.flows.source_ip') }}</dt>
-            <dd>{{ source.ip }}</dd>
-          </div>
-          <div>
-            <dt>{{ t('standalone.flows.source_port') }}</dt>
-            <dd>{{ source.port }}</dd>
-          </div>
-          <div>
-            <dt>{{ t('standalone.flows.source_mac') }}</dt>
-            <dd v-if="source.mac != '00:00:00:00:00:00'">{{ source.mac }}</dd>
-            <dd v-else>{{ t('common.unknown') }}</dd>
-          </div>
-          <div>
-            <dt>{{ t('standalone.flows.destination_ip') }}</dt>
-            <dd>{{ destination.ip }}</dd>
-          </div>
-          <div>
-            <dt>{{ t('standalone.flows.destination_port') }}</dt>
-            <dd>{{ destination.port }}</dd>
-          </div>
-          <div>
-            <dt>{{ t('standalone.flows.destination_mac') }}</dt>
-            <dd v-if="destination.mac != '00:00:00:00:00:00'">{{ destination.mac }}</dd>
-            <dd v-else>{{ t('common.unknown') }}</dd>
-          </div>
-        </dl>
-      </NeCard>
-      <NeCard>
-        <template #title>{{ t('standalone.flows.hostname_information') }}</template>
-        <dl data-facts>
-          <div v-if="_flow.flow.host_server_name">
-            <dt>{{ t('standalone.flows.hostname') }}</dt>
-            <dd>{{ _flow.flow.host_server_name }}</dd>
-          </div>
-          <div>
-            <dt>{{ t('standalone.flows.domain') }}</dt>
-            <dd>{{ _flow.flow.dns_host_name }}</dd>
-          </div>
-          <div v-if="_flow.flow.ssl?.client_sni">
-            <dt>{{ t('standalone.flows.tls_sni_hostname') }}</dt>
-            <dd>{{ _flow.flow.ssl.client_sni }}</dd>
-          </div>
-        </dl>
-      </NeCard>
-      <NeCard>
-        <template #title>
-          <template v-if="_flow.type == 'flow'">
-            {{ t('standalone.flows.partial_traffic_inspection') }}
-          </template>
-          <template v-else>
-            {{ t('standalone.flows.traffic_inspection_details') }}
+    <div class="space-y-4">
+      <div
+        v-if="_flow != undefined"
+        class="gap-4 sm:grid sm:grid-cols-2 **:data-facts:*:sm:grid **:data-facts:*:sm:grid-cols-2 **:data-facts:*:sm:gap-4"
+      >
+        <NeCard>
+          <template #title>{{ t('standalone.flows.endpoint_information') }}</template>
+          <dl data-facts>
+            <div>
+              <dt>{{ t('standalone.flows.source_ip') }}</dt>
+              <dd>{{ source.ip }}</dd>
+            </div>
+            <div>
+              <dt>{{ t('standalone.flows.source_port') }}</dt>
+              <dd>{{ source.port }}</dd>
+            </div>
+            <div>
+              <dt>{{ t('standalone.flows.source_mac') }}</dt>
+              <dd v-if="source.mac != '00:00:00:00:00:00'">{{ source.mac }}</dd>
+              <dd v-else>{{ t('common.unknown') }}</dd>
+            </div>
+            <div>
+              <dt>{{ t('standalone.flows.destination_ip') }}</dt>
+              <dd>{{ destination.ip }}</dd>
+            </div>
+            <div>
+              <dt>{{ t('standalone.flows.destination_port') }}</dt>
+              <dd>{{ destination.port }}</dd>
+            </div>
+            <div>
+              <dt>{{ t('standalone.flows.destination_mac') }}</dt>
+              <dd v-if="destination.mac != '00:00:00:00:00:00'">{{ destination.mac }}</dd>
+              <dd v-else>{{ t('common.unknown') }}</dd>
+            </div>
+          </dl>
+        </NeCard>
+        <NeCard v-if="hostnameInformationVisible">
+          <template #title>{{ t('standalone.flows.hostname_information') }}</template>
+          <dl data-facts>
+            <div v-if="_flow.flow.host_server_name">
+              <dt>{{ t('standalone.flows.hostname') }}</dt>
+              <dd>{{ _flow.flow.host_server_name }}</dd>
+            </div>
+            <div v-if="_flow.flow.dns_host_name">
+              <dt>{{ t('standalone.flows.domain') }}</dt>
+              <dd>{{ _flow.flow.dns_host_name }}</dd>
+            </div>
+            <div v-if="_flow.flow.ssl?.client_sni">
+              <dt>{{ t('standalone.flows.tls_sni_hostname') }}</dt>
+              <dd>{{ _flow.flow.ssl.client_sni }}</dd>
+            </div>
+          </dl>
+        </NeCard>
+        <NeCard>
+          <template #title>
+            <template v-if="_flow.type == 'flow'">
+              {{ t('standalone.flows.partial_traffic_inspection') }}
+            </template>
+            <template v-else>
+              {{ t('standalone.flows.traffic_inspection_details') }}
+            </template>
           </template>
-        </template>
-        <dl data-facts>
-          <div>
-            <dt>{{ t('standalone.flows.protocol') }}</dt>
-            <dd>{{ _flow.flow.detected_protocol_name }}</dd>
-          </div>
-          <div>
-            <dt>{{ t('standalone.flows.application') }}</dt>
-            <dd>{{ _flow.flow.detected_application_name }}</dd>
-          </div>
-          <div>
-            <dt>{{ t('standalone.flows.packets_analyzed') }}</dt>
-            <dd>{{ _flow.flow.detection_packets }}</dd>
-          </div>
-        </dl>
-      </NeCard>
-      <NeCard>
-        <template #title>{{ t('standalone.flows.flow_info') }}</template>
-        <dl data-facts>
-          <div>
-            <dt>{{ t('standalone.flows.conntrack_id') }}</dt>
-            <dd>{{ _flow.flow.conntrack.id }}</dd>
-          </div>
-          <div>
-            <dt>{{ t('standalone.flows.first_seen_at') }}</dt>
-            <dd>{{ new Date(_flow.flow.first_seen_at).toLocaleString() }}</dd>
-          </div>
-          <div>
-            <dt>{{ t('standalone.flows.last_seen_at') }}</dt>
-            <dd>{{ new Date(_flow.flow.last_seen_at).toLocaleString() }}</dd>
-          </div>
-          <div>
-            <dt>{{ t('standalone.flows.duration') }}</dt>
-            <dd>
-              {{
-                formatDistance(
-                  new Date(_flow.flow.first_seen_at),
-                  new Date(_flow.flow.last_seen_at)
-                )
-              }}
-            </dd>
-          </div>
-        </dl>
-      </NeCard>
-      <NeCard>
-        <template #title>{{ t('standalone.flows.traffic_flow') }}</template>
-        <dl data-facts>
-          <div>
-            <dt>{{ t('standalone.flows.download_rate') }}</dt>
-            <dd>{{ formatRate(downloadRate) }}</dd>
-          </div>
-          <div>
-            <dt>{{ t('standalone.flows.upload_rate') }}</dt>
-            <dd>{{ formatRate(uploadRate) }}</dd>
-          </div>
-          <div>
-            <dt>{{ t('standalone.flows.download_bytes') }}</dt>
-            <dd>{{ byteFormat1024(downloadBytes) }}</dd>
-          </div>
-          <div>
-            <dt>{{ t('standalone.flows.upload_bytes') }}</dt>
-            <dd>{{ byteFormat1024(uploadBytes) }}</dd>
-          </div>
-          <div>
-            <dt>{{ t('standalone.flows.total_bytes') }}</dt>
-            <dd>{{ byteFormat1024(_flow.flow.total_bytes) }}</dd>
-          </div>
-        </dl>
-      </NeCard>
-      <pre class="col-span-full overflow-auto rounded-md bg-gray-50 p-4 text-sm dark:bg-gray-900">
+          <dl data-facts>
+            <div>
+              <dt>{{ t('standalone.flows.protocol') }}</dt>
+              <dd>{{ _flow.flow.detected_protocol_name }}</dd>
+            </div>
+            <div>
+              <dt>{{ t('standalone.flows.application') }}</dt>
+              <dd>{{ _flow.flow.detected_application_name }}</dd>
+            </div>
+            <div>
+              <dt>{{ t('standalone.flows.packets_analyzed') }}</dt>
+              <dd>{{ _flow.flow.detection_packets }}</dd>
+            </div>
+          </dl>
+        </NeCard>
+        <NeCard v-if="_flow.flow.risks.risks?.length ?? 0 > 0">
+          <template #title>{{ t('standalone.flows.risks_detected') }}</template>
+          <ul class="list-inside list-disc">
+            <li v-for="risk in _flow.flow.risks.risks" :key="risk">
+              {{ getNdpiRiskDescription(risk) }}
+            </li>
+          </ul>
+        </NeCard>
+        <NeCard>
+          <template #title>{{ t('standalone.flows.flow_info') }}</template>
+          <dl data-facts>
+            <div>
+              <dt>{{ t('standalone.flows.conntrack_id') }}</dt>
+              <dd>{{ _flow.flow.conntrack.id }}</dd>
+            </div>
+            <div>
+              <dt>{{ t('standalone.flows.first_seen_at') }}</dt>
+              <dd>{{ new Date(_flow.flow.first_seen_at).toLocaleString() }}</dd>
+            </div>
+            <div>
+              <dt>{{ t('standalone.flows.last_seen_at') }}</dt>
+              <dd>{{ new Date(_flow.flow.last_seen_at).toLocaleString() }}</dd>
+            </div>
+            <div>
+              <dt>{{ t('standalone.flows.duration') }}</dt>
+              <dd>
+                {{
+                  formatDistance(
+                    new Date(_flow.flow.first_seen_at),
+                    new Date(_flow.flow.last_seen_at)
+                  )
+                }}
+              </dd>
+            </div>
+          </dl>
+        </NeCard>
+        <NeCard>
+          <template #title>{{ t('standalone.flows.traffic_flow') }}</template>
+          <dl data-facts>
+            <div>
+              <dt>{{ t('standalone.flows.download_rate') }}</dt>
+              <dd>{{ formatRate(downloadRate) }}</dd>
+            </div>
+            <div>
+              <dt>{{ t('standalone.flows.upload_rate') }}</dt>
+              <dd>{{ formatRate(uploadRate) }}</dd>
+            </div>
+            <div>
+              <dt>{{ t('standalone.flows.download_bytes') }}</dt>
+              <dd>{{ byteFormat1024(downloadBytes) }}</dd>
+            </div>
+            <div>
+              <dt>{{ t('standalone.flows.upload_bytes') }}</dt>
+              <dd>{{ byteFormat1024(uploadBytes) }}</dd>
+            </div>
+            <div>
+              <dt>{{ t('standalone.flows.total_bytes') }}</dt>
+              <dd>{{ byteFormat1024(_flow.flow.total_bytes) }}</dd>
+            </div>
+          </dl>
+        </NeCard>
+      </div>
+      <AdvancedSettingsDropdown>
+        <pre class="col-span-full overflow-auto rounded-md bg-gray-50 p-4 text-sm dark:bg-gray-900">
         <code>{{ JSON.stringify(_flow, null, 2) }}</code>
       </pre>
+      </AdvancedSettingsDropdown>
     </div>
   </NeModal>
 </template>
diff --git a/src/components/standalone/monitoring/flows/FlowTableRow.vue b/src/components/standalone/monitoring/flows/FlowTableRow.vue
index 0d3421925..c7049c5c7 100644
--- a/src/components/standalone/monitoring/flows/FlowTableRow.vue
+++ b/src/components/standalone/monitoring/flows/FlowTableRow.vue
@@ -1,17 +1,11 @@
 <script lang="ts" setup>
-import type { FlowEvent } from '@/components/standalone/monitoring/FlowsTable.vue'
+import { extractBadges, type FlowEvent } from '@/components/standalone/monitoring/FlowsTable.vue'
 import { kbpsFormat, NeButton, NeTableCell, NeTableRow, NeTooltip } from '@nethesis/vue-components'
 import { useI18n } from 'vue-i18n'
 import { computed } from 'vue'
 import { differenceInSeconds } from 'date-fns'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import {
-  faArrowDown,
-  faArrowUp,
-  faDiagramProject,
-  faMagnifyingGlassPlus,
-  faUsers
-} from '@fortawesome/free-solid-svg-icons'
+import { faArrowDown, faArrowUp, faMagnifyingGlassPlus } from '@fortawesome/free-solid-svg-icons'
 import type { IconDefinition } from '@fortawesome/fontawesome-svg-core'
 import FlowBadge from '@/components/standalone/monitoring/flows/FlowBadge.vue'
 
@@ -48,41 +42,7 @@ const applicationName = computed<string>(() => {
     .join(' ')
 })
 
-export type Badge = {
-  text: string
-  icon: IconDefinition
-  content?: string
-  customClasses: string[]
-}
-
-const badges = computed<Badge[]>(() => {
-  const entries: Badge[] = []
-  switch (item.flow.detected_protocol_name) {
-    default:
-      entries.push({
-        text: item.flow.detected_protocol_name,
-        icon: faDiagramProject,
-        customClasses: ['bg-gray-200', 'text-gray-800', 'dark:bg-gray-600', 'dark:text-gray-100']
-      })
-  }
-  if (!item.flow.local_origin && item.flow.other_type == 'remote') {
-    entries.push({
-      text: t('standalone.flows.remote'),
-      icon: faArrowDown,
-      customClasses: ['bg-rose-100', 'text-rose-800', 'dark:bg-rose-700', 'dark:text-rose-100'],
-      content: t('standalone.flows.remote_description')
-    })
-  }
-  if (item.flow.other_type == 'local') {
-    entries.push({
-      text: t('standalone.flows.internal'),
-      icon: faUsers,
-      customClasses: ['bg-blue-100', 'text-blue-800', 'dark:bg-blue-700', 'dark:text-blue-100'],
-      content: t('standalone.flows.internal_description')
-    })
-  }
-  return entries
-})
+const badges = computed<Badge[]>(() => extractBadges(item))
 
 const sourceIp = computed<string>(() =>
   item.flow.local_origin ? item.flow.local_ip : item.flow.other_ip
@@ -92,7 +52,6 @@ const destinationIp = computed<string>(() =>
 )
 
 function formatRate(rate: number): string {
-  // Convert bytes/s to Kbps: (bytes * 8 bits/byte) / 1000
   return kbpsFormat((rate * 8) / 1000)
 }
 </script>
@@ -102,19 +61,12 @@ function formatRate(rate: number): string {
     <NeTableCell :data-label="t('standalone.flows.application')">
       {{ applicationName }}
     </NeTableCell>
+    <NeTableCell :data-label="t('standalone.flows.protocol')">
+      {{ item.flow.detected_protocol_name }}
+    </NeTableCell>
     <NeTableCell :data-label="t('standalone.flows.tags')">
       <span class="flex flex-wrap gap-2">
-        <template v-for="badge in badges" :key="badge.text">
-          <NeTooltip v-if="badge.content" trigger-event="mouseenter click">
-            <template #content>
-              {{ badge.content }}
-            </template>
-            <template #trigger>
-              <FlowBadge :badge="badge" />
-            </template>
-          </NeTooltip>
-          <FlowBadge v-else :badge="badge" />
-        </template>
+        <FlowBadge v-for="badge in badges" :key="badge.text" :badge="badge" />
       </span>
     </NeTableCell>
     <NeTableCell :data-label="t('standalone.flows.source')">
@@ -160,9 +112,11 @@ function formatRate(rate: number): string {
       </div>
     </NeTableCell>
     <NeTableCell :data-label="t('standalone.flows.more_info')">
-      <NeButton kind="tertiary" @click="$emit('show', item)">
-        <FontAwesomeIcon :icon="faMagnifyingGlassPlus" />
-      </NeButton>
+      <div class="flex items-start">
+        <NeButton kind="tertiary" @click="$emit('show', item)">
+          <FontAwesomeIcon :icon="faMagnifyingGlassPlus" />
+        </NeButton>
+      </div>
     </NeTableCell>
   </NeTableRow>
 </template>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index f410a8471..2f210ecdd 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -2377,6 +2377,8 @@
       "tags": "Tags",
       "internal": "Internal",
       "internal_description": "Connection is between local networks",
+      "remote": "Remote",
+      "remote_description": "Connection has been established from internet to the firewall",
       "more_info": "More info",
       "flow_details": "Flow details",
       "endpoint_information": "Endpoint information",
@@ -2402,7 +2404,14 @@
       "download_rate": "Download rate",
       "upload_bytes": "Upload bytes",
       "download_bytes": "Download bytes",
-      "total_bytes": "Total bytes"
+      "total_bytes": "Total bytes",
+      "no_flows_found": "No flows found",
+      "no_flows_found_description": "No flows found for the current filters. Try changing the search filters or wait for new connections to be established.",
+      "scanning": "Scanning",
+      "scanning_description": "The flow is currently being analyzed. Additional insights will be available once the scan completes.",
+      "risky": "Risky",
+      "risky_description": "The flow is considered risky and may contain malicious traffic.",
+      "risks_detected": "Risks detected"
     },
     "ping_latency_monitor": {
       "title": "Ping latency monitor",
diff --git a/src/lib/standalone/ndpiRisks.ts b/src/lib/standalone/ndpiRisks.ts
new file mode 100644
index 000000000..83bd92860
--- /dev/null
+++ b/src/lib/standalone/ndpiRisks.ts
@@ -0,0 +1,116 @@
+/**
+ * NDPI Risk Categorization
+ *
+ * This mapping is based on the official nDPI risk categorization.
+ * Each risk code corresponds to a specific security or privacy concern that nDPI can detect.
+ *
+ * Reference: https://github.com/ntop/nDPI/blob/dev/src/include/ndpi_typedefs.h
+ */
+
+export const NDPI_RISKS: Record<number, string> = {
+  0: 'Unknown Traffic', // NDPI_NO_RISK
+  1: 'Unsafe Protocol', // NDPI_URL_POSSIBLE_XSS
+  2: 'Possible XSS Attack', // NDPI_URL_POSSIBLE_SQL_INJECTION
+  3: 'Possible SQL Injection', // NDPI_URL_POSSIBLE_RCE_INJECTION
+  4: 'Binary Application Transfer', // NDPI_BINARY_APPLICATION_TRANSFER
+  5: 'Known Protocol on Non-Standard Port', // NDPI_KNOWN_PROTOCOL_ON_NON_STANDARD_PORT
+  6: 'TLS (Self) Selfsigned Certificate', // NDPI_TLS_SELFSIGNED_CERTIFICATE
+  7: 'TLS Obsolete Version (1.0 or older)', // NDPI_TLS_OBSOLETE_VERSION
+  8: 'TLS Weak Cipher', // NDPI_TLS_WEAK_CIPHER
+  9: 'TLS Certificate Expired', // NDPI_TLS_CERTIFICATE_EXPIRED
+  10: 'TLS Certificate Mismatch', // NDPI_TLS_CERTIFICATE_MISMATCH
+  11: 'HTTP Suspicious User-Agent', // NDPI_HTTP_SUSPICIOUS_USER_AGENT
+  12: 'HTTP Numeric IP Address', // NDPI_HTTP_NUMERIC_IP_ADDRESS
+  13: 'HTTP Suspicious URL', // NDPI_HTTP_SUSPICIOUS_URL
+  14: 'HTTP Suspicious Header', // NDPI_HTTP_SUSPICIOUS_HEADER
+  15: 'TLS Not Carrying HTTPS', // NDPI_TLS_NOT_CARRYING_HTTPS
+  16: 'Suspicious DGA Domain', // NDPI_SUSPICIOUS_DGA_DOMAIN
+  17: 'Malformed Packet', // NDPI_MALFORMED_PACKET
+  18: 'SSH Obsolete Client/Server Version', // NDPI_SSH_OBSOLETE_CLIENT_VERSION_OR_CIPHER
+  19: 'SMB Insecure Version', // NDPI_SMB_INSECURE_VERSION
+  20: 'TLS Suspicious ESNI Usage', // NDPI_TLS_SUSPICIOUS_ESNI_USAGE
+  21: 'Unsafe Protocol', // NDPI_UNSAFE_PROTOCOL
+  22: 'DNS Suspicious Traffic', // NDPI_DNS_SUSPICIOUS_TRAFFIC
+  23: 'TLS Missing SNI', // NDPI_TLS_MISSING_SNI
+  24: 'HTTP Suspicious Content', // NDPI_HTTP_SUSPICIOUS_CONTENT
+  25: 'Risky ASN', // NDPI_RISKY_ASN
+  26: 'Risky Domain', // NDPI_RISKY_DOMAIN
+  27: 'Malicious JA3 Fingerprint', // NDPI_MALICIOUS_JA3
+  28: 'Malicious SHA1 Certificate', // NDPI_MALICIOUS_SHA1_CERTIFICATE
+  29: 'Desktop/File Sharing Session', // NDPI_DESKTOP_OR_FILE_SHARING_SESSION
+  30: 'TLS Uncommon ALPN', // NDPI_TLS_UNCOMMON_ALPN
+  31: 'TLS Certificate Validity Too Long', // NDPI_TLS_CERT_VALIDITY_TOO_LONG
+  32: 'TLS Suspicious Extension', // NDPI_TLS_SUSPICIOUS_EXTENSION
+  33: 'TLS Fatal Alert', // NDPI_TLS_FATAL_ALERT
+  34: 'Suspicious Entropy', // NDPI_SUSPICIOUS_ENTROPY
+  35: 'Clear Text Credentials', // NDPI_CLEAR_TEXT_CREDENTIALS
+  36: 'DNS Large Packet', // NDPI_DNS_LARGE_PACKET
+  37: 'DNS Fragmented', // NDPI_DNS_FRAGMENTED
+  38: 'Invalid Characters in DNS Query', // NDPI_INVALID_CHARACTERS
+  39: 'Possible DDoS', // NDPI_POSSIBLE_EXPLOIT
+  40: 'TLS Certificate About to Expire', // NDPI_TLS_CERTIFICATE_ABOUT_TO_EXPIRE
+  41: 'Punycode IDN Domain', // NDPI_PUNYCODE_IDN
+  42: 'Error Code Detected', // NDPI_ERROR_CODE_DETECTED
+  43: 'HTTP Crawler/Bot', // NDPI_HTTP_CRAWLER_BOT
+  44: 'Anonymous Subscriber', // NDPI_ANONYMOUS_SUBSCRIBER
+  45: 'Unidirectional Traffic', // NDPI_UNIDIRECTIONAL_TRAFFIC
+  46: 'HTTP Obsolete Server', // NDPI_HTTP_OBSOLETE_SERVER
+  47: 'Periodic Flow', // NDPI_PERIODIC_FLOW
+  48: 'Minor Issues', // NDPI_MINOR_ISSUES
+  49: 'TCP Issues', // NDPI_TCP_ISSUES
+  50: 'Fully Encrypted Flow', // NDPI_FULLY_ENCRYPTED
+  51: 'TLS ALPN/SNI Mismatch', // NDPI_TLS_ALPN_SNI_MISMATCH
+  52: 'Malware Host Contacted', // NDPI_MALWARE_HOST_CONTACTED
+  53: 'Binary Data Transfer', // NDPI_BINARY_DATA_TRANSFER
+  54: 'Probing Attempt', // NDPI_PROBING_ATTEMPT
+  55: 'Malicious Behavior', // NDPI_MALICIOUS_BEHAVIOR
+  56: 'Possibly Unwanted Application', // NDPI_POSSIBLY_UNWANTED_APPLICATION
+  57: 'Suspicious File Download/Upload', // NDPI_SUSPICIOUS_FILE_DOWNLOAD_UPLOAD
+  58: 'Connection to Non-Standard Port', // NDPI_CONNECTION_TO_NONSTANDARD_PORT
+  59: 'Data Exfiltration', // NDPI_DATA_EXFILTRATION
+  60: 'Uncommon/Suspicious Activity' // NDPI_UNCOMMON_SUSPICIOUS_ACTIVITY
+}
+
+/**
+ * Get the description for an NDPI risk code
+ * @param riskCode - The NDPI risk code
+ * @returns The description of the risk, or 'Unknown Risk' if not found
+ */
+export function getNdpiRiskDescription(riskCode: number): string {
+  return NDPI_RISKS[riskCode] || 'Unknown Risk'
+}
+
+/**
+ * Check if a risk code represents a high-severity risk
+ * High severity risks include malware, exploits, data exfiltration, etc.
+ * @param riskCode - The NDPI risk code
+ * @returns true if the risk is considered high severity
+ */
+export function isHighSeverityRisk(riskCode: number): boolean {
+  const highSeverityRisks = [
+    2,
+    3, // XSS, SQL Injection
+    26, // Risky Domain
+    27, // Malicious JA3
+    28, // Malicious SHA1 Certificate
+    39, // Possible DDoS/Exploit
+    52, // Malware Host Contacted
+    55, // Malicious Behavior
+    59 // Data Exfiltration
+  ]
+  return highSeverityRisks.includes(riskCode)
+}
+
+/**
+ * Check if a risk code represents a medium-severity risk
+ * Medium severity risks include weak crypto, suspicious traffic, etc.
+ * @param riskCode - The NDPI risk code
+ * @returns true if the risk is considered medium severity
+ */
+export function isMediumSeverityRisk(riskCode: number): boolean {
+  const mediumSeverityRisks = [
+    1, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 29, 30, 31,
+    32, 33, 34, 35, 36, 37, 38, 40, 41, 42, 54, 56, 57, 58, 60
+  ]
+  return mediumSeverityRisks.includes(riskCode)
+}

From 49b2481fa09df1c9d823618db93732462e51b83a Mon Sep 17 00:00:00 2001
From: Tommaso Bailetti <tommaso.bailetti@nethesis.it>
Date: Fri, 23 Jan 2026 16:03:39 +0100
Subject: [PATCH 07/20] type fixes

---
 src/components/standalone/monitoring/flows/FlowBadge.vue   | 2 +-
 .../standalone/monitoring/flows/FlowTableRow.vue           | 7 +++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/standalone/monitoring/flows/FlowBadge.vue b/src/components/standalone/monitoring/flows/FlowBadge.vue
index 46ec93ef5..2c2687ce9 100644
--- a/src/components/standalone/monitoring/flows/FlowBadge.vue
+++ b/src/components/standalone/monitoring/flows/FlowBadge.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { NeBadgeV2, NeTooltip } from '@nethesis/vue-components'
-import type { Badge } from '@/components/standalone/monitoring/flows/FlowTableRow.vue'
 import { useI18n } from 'vue-i18n'
 import { computed, h } from 'vue'
+import type { Badge } from '@/components/standalone/monitoring/FlowsTable.vue'
 
 const { t } = useI18n()
 
diff --git a/src/components/standalone/monitoring/flows/FlowTableRow.vue b/src/components/standalone/monitoring/flows/FlowTableRow.vue
index c7049c5c7..64cdc078c 100644
--- a/src/components/standalone/monitoring/flows/FlowTableRow.vue
+++ b/src/components/standalone/monitoring/flows/FlowTableRow.vue
@@ -1,12 +1,15 @@
 <script lang="ts" setup>
-import { extractBadges, type FlowEvent } from '@/components/standalone/monitoring/FlowsTable.vue'
+import {
+  type Badge,
+  extractBadges,
+  type FlowEvent
+} from '@/components/standalone/monitoring/FlowsTable.vue'
 import { kbpsFormat, NeButton, NeTableCell, NeTableRow, NeTooltip } from '@nethesis/vue-components'
 import { useI18n } from 'vue-i18n'
 import { computed } from 'vue'
 import { differenceInSeconds } from 'date-fns'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { faArrowDown, faArrowUp, faMagnifyingGlassPlus } from '@fortawesome/free-solid-svg-icons'
-import type { IconDefinition } from '@fortawesome/fontawesome-svg-core'
 import FlowBadge from '@/components/standalone/monitoring/flows/FlowBadge.vue'
 
 const { item } = defineProps<{

From f140edd9a20a43b2fd001e49a929df13a528579b Mon Sep 17 00:00:00 2001
From: Tommaso Bailetti <tommaso.bailetti@nethesis.it>
Date: Tue, 27 Jan 2026 09:35:50 +0100
Subject: [PATCH 08/20] added multiple detail versions

---
 .../standalone/monitoring/FlowsTable.vue      |  76 ++--
 .../monitoring/flows/FlowDetail.vue           | 350 +++++++++++-------
 src/i18n/en.json                              |   6 +-
 3 files changed, 278 insertions(+), 154 deletions(-)

diff --git a/src/components/standalone/monitoring/FlowsTable.vue b/src/components/standalone/monitoring/FlowsTable.vue
index 258821648..b6f8f10fc 100644
--- a/src/components/standalone/monitoring/FlowsTable.vue
+++ b/src/components/standalone/monitoring/FlowsTable.vue
@@ -1,6 +1,8 @@
 <script lang="ts">
 import {
   faArrowDown,
+  faArrowUp,
+  faBroadcastTower,
   faClockRotateLeft,
   faUsers,
   faWarning
@@ -27,6 +29,15 @@ export function extractBadges(entry: FlowEvent): Badge[] {
       content: 'standalone.flows.remote_description'
     })
   }
+  if (entry.flow.local_origin && entry.flow.other_type == 'remote') {
+    badges.push({
+      id: 'outgoing',
+      text: 'standalone.flows.outgoing',
+      icon: faArrowUp,
+      customClasses: ['bg-green-100', 'text-green-800', 'dark:bg-green-700', 'dark:text-green-100'],
+      content: 'standalone.flows.outgoing_description'
+    })
+  }
   if (entry.flow.other_type == 'local') {
     badges.push({
       id: 'local',
@@ -36,6 +47,20 @@ export function extractBadges(entry: FlowEvent): Badge[] {
       content: 'standalone.flows.internal_description'
     })
   }
+  if (entry.flow.other_type == 'broadcast') {
+    badges.push({
+      id: 'broadcast',
+      text: 'standalone.flows.broadcast',
+      icon: faBroadcastTower,
+      customClasses: [
+        'bg-purple-100',
+        'text-purple-800',
+        'dark:bg-purple-700',
+        'dark:text-purple-100'
+      ],
+      content: 'standalone.flows.broadcast_description'
+    })
+  }
   if (entry.type == 'flow') {
     badges.push({
       id: 'scanning',
@@ -90,7 +115,7 @@ export type Flow = {
   other_bytes: number
   other_rate: number
   other_mac: string
-  other_type: 'remote' | 'local'
+  other_type: 'remote' | 'local' | 'broadcast'
   digest: string
   host_server_name?: string
   dns_host_name?: string
@@ -400,22 +425,19 @@ const filteredData = computed<FlowEvent[]>(() => {
   return data.value.filter((flow) => filters.every((filter) => filter(flow)))
 })
 
-type SortableKeys =
-  | 'detected_application_name'
-  | 'duration'
-  | 'last_seen_at'
-  | 'download'
-  | 'upload'
+type SortableKeys = 'duration' | 'last_seen_at' | 'download' | 'upload'
 const sortKey = useRouteQuery<SortableKeys>('sort', 'download')
-const sortDescending = ref(true)
+const sortDescending = useRouteQuery<string, boolean>('descending', 'true', {
+  transform: {
+    get: (val) => val == 'true',
+    set: (val) => val.toString()
+  }
+})
 const sortedItems = computed<FlowEvent[]>(() => {
   const items = [...filteredData.value]
   return items.sort((a, b) => {
     let compare = 0
     switch (sortKey.value) {
-      case 'detected_application_name':
-        compare = a.flow.detected_application_name.localeCompare(b.flow.detected_application_name)
-        break
       case 'duration':
         compare =
           a.flow.last_seen_at - a.flow.first_seen_at - (b.flow.last_seen_at - b.flow.first_seen_at)
@@ -423,16 +445,27 @@ const sortedItems = computed<FlowEvent[]>(() => {
       case 'last_seen_at':
         compare = a.flow.last_seen_at - b.flow.last_seen_at
         break
-      case 'download': {
-        const aRate = a.flow.local_origin ? a.flow.local_rate : a.flow.other_rate
-        const bRate = b.flow.local_origin ? b.flow.local_rate : b.flow.other_rate
-        compare = aRate - bRate
-        break
-      }
+      case 'download':
       case 'upload': {
-        const aRate = a.flow.local_origin ? a.flow.other_rate : a.flow.local_rate
-        const bRate = b.flow.local_origin ? b.flow.other_rate : b.flow.local_rate
-        compare = aRate - bRate
+        const isDownload = sortKey.value == 'download'
+        const aRate = a.flow.local_origin == isDownload ? a.flow.other_rate : a.flow.local_rate
+        const bRate = b.flow.local_origin == isDownload ? b.flow.other_rate : b.flow.local_rate
+
+        // Handle missing rates: push flows with missing rates to the bottom
+        const aHasRate = aRate !== undefined && aRate != null
+        const bHasRate = bRate !== undefined && bRate != null
+
+        if (!aHasRate && !bHasRate) {
+          compare = 0
+        } else if (!aHasRate) {
+          // a has no rate, push to bottom: positive value means a > b
+          return 1
+        } else if (!bHasRate) {
+          // b has no rate, push to bottom: negative value means a < b
+          return -1
+        } else {
+          compare = aRate - bRate
+        }
         break
       }
     }
@@ -559,7 +592,7 @@ watch(flowDetails, (value) => {
       card-breakpoint="2xl"
     >
       <NeTableHead>
-        <NeTableHeadCell column-key="detected_application_name" sortable @sort="onSort">
+        <NeTableHeadCell>
           {{ t('standalone.flows.application') }}
         </NeTableHeadCell>
         <NeTableHeadCell>
@@ -600,6 +633,7 @@ watch(flowDetails, (value) => {
         <NeTableRow>
           <NeTableCell colspan="10">
             <NeEmptyState
+              class="bg-white dark:bg-gray-950"
               :description="t('standalone.flows.no_flows_found_description')"
               :icon="faTable"
               :title="t('standalone.flows.no_flows_found')"
diff --git a/src/components/standalone/monitoring/flows/FlowDetail.vue b/src/components/standalone/monitoring/flows/FlowDetail.vue
index 702f97d9b..56d9c4d71 100644
--- a/src/components/standalone/monitoring/flows/FlowDetail.vue
+++ b/src/components/standalone/monitoring/flows/FlowDetail.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { byteFormat1024, kbpsFormat, NeCard, NeModal } from '@nethesis/vue-components'
+import { byteFormat1024, kbpsFormat, NeCard, NeModal, NeToggle } from '@nethesis/vue-components'
 import type { FlowEvent } from '@/components/standalone/monitoring/FlowsTable.vue'
 import { useI18n } from 'vue-i18n'
 import { computed, ref, watch } from 'vue'
@@ -18,6 +18,7 @@ const props = defineProps<{
 }>()
 
 const _flow = ref<FlowEvent>()
+const showCardView = ref(false)
 
 watch(
   () => props.flow,
@@ -31,6 +32,176 @@ watch(
   }
 )
 
+type Fact = {
+  label: string
+  value: string | number
+}
+
+type FactsGroup = {
+  title: string
+  facts: Fact[] | string[]
+}
+
+const facts = computed<FactsGroup[]>(() => {
+  if (_flow.value == undefined) {
+    return []
+  }
+
+  const groups: FactsGroup[] = []
+
+  // Endpoint Information
+  groups.push({
+    title: t('standalone.flows.endpoint_information'),
+    facts: [
+      {
+        label: t('standalone.flows.source_ip'),
+        value: source.value.ip
+      },
+      {
+        label: t('standalone.flows.source_port'),
+        value: source.value.port
+      },
+      {
+        label: t('standalone.flows.source_mac'),
+        value: source.value.mac != '00:00:00:00:00:00' ? source.value.mac : t('common.unknown')
+      },
+      {
+        label: t('standalone.flows.destination_ip'),
+        value: destination.value.ip
+      },
+      {
+        label: t('standalone.flows.destination_port'),
+        value: destination.value.port
+      },
+      {
+        label: t('standalone.flows.destination_mac'),
+        value:
+          destination.value.mac != '00:00:00:00:00:00' ? destination.value.mac : t('common.unknown')
+      }
+    ]
+  })
+
+  // Hostname Information (conditional)
+  if (hostnameInformationVisible.value) {
+    const hostnameFacts: Fact[] = []
+
+    if (_flow.value.flow.host_server_name) {
+      hostnameFacts.push({
+        label: t('standalone.flows.hostname'),
+        value: _flow.value.flow.host_server_name
+      })
+    }
+
+    if (_flow.value.flow.dns_host_name) {
+      hostnameFacts.push({
+        label: t('standalone.flows.domain'),
+        value: _flow.value.flow.dns_host_name
+      })
+    }
+
+    if (_flow.value.flow.ssl?.client_sni) {
+      hostnameFacts.push({
+        label: t('standalone.flows.tls_sni_hostname'),
+        value: _flow.value.flow.ssl.client_sni
+      })
+    }
+
+    if (hostnameFacts.length > 0) {
+      groups.push({
+        title: t('standalone.flows.hostname_information'),
+        facts: hostnameFacts
+      })
+    }
+  }
+
+  // Traffic Inspection Details
+  const trafficInspectionTitle =
+    _flow.value.type == 'flow'
+      ? t('standalone.flows.partial_traffic_inspection')
+      : t('standalone.flows.traffic_inspection_details')
+
+  groups.push({
+    title: trafficInspectionTitle,
+    facts: [
+      {
+        label: t('standalone.flows.protocol'),
+        value: _flow.value.flow.detected_protocol_name
+      },
+      {
+        label: t('standalone.flows.application'),
+        value: _flow.value.flow.detected_application_name
+      },
+      {
+        label: t('standalone.flows.packets_analyzed'),
+        value: _flow.value.flow.detection_packets ?? 0
+      }
+    ]
+  })
+
+  // Risks Detected (conditional)
+  if ((_flow.value.flow.risks.risks?.length ?? 0) > 0) {
+    groups.push({
+      title: t('standalone.flows.risks_detected'),
+      facts: _flow.value.flow.risks.risks?.map((risk) => getNdpiRiskDescription(risk)) ?? []
+    })
+  }
+
+  // Flow Info
+  groups.push({
+    title: t('standalone.flows.flow_info'),
+    facts: [
+      {
+        label: t('standalone.flows.conntrack_id'),
+        value: _flow.value.flow.conntrack.id
+      },
+      {
+        label: t('standalone.flows.first_seen_at'),
+        value: new Date(_flow.value.flow.first_seen_at).toLocaleString()
+      },
+      {
+        label: t('standalone.flows.last_seen_at'),
+        value: new Date(_flow.value.flow.last_seen_at).toLocaleString()
+      },
+      {
+        label: t('standalone.flows.duration'),
+        value: formatDistance(
+          new Date(_flow.value.flow.first_seen_at),
+          new Date(_flow.value.flow.last_seen_at)
+        )
+      }
+    ]
+  })
+
+  // Traffic Flow
+  groups.push({
+    title: t('standalone.flows.traffic_flow'),
+    facts: [
+      {
+        label: t('standalone.flows.download_rate'),
+        value: formatRate(downloadRate.value)
+      },
+      {
+        label: t('standalone.flows.upload_rate'),
+        value: formatRate(uploadRate.value)
+      },
+      {
+        label: t('standalone.flows.download_bytes'),
+        value: byteFormat1024(downloadBytes.value)
+      },
+      {
+        label: t('standalone.flows.upload_bytes'),
+        value: byteFormat1024(uploadBytes.value)
+      },
+      {
+        label: t('standalone.flows.total_bytes'),
+        value: byteFormat1024(_flow.value.flow.total_bytes)
+      }
+    ]
+  })
+
+  return groups
+})
+
 type EndpointInfo = {
   ip: string
   port: number
@@ -125,6 +296,10 @@ const hostnameInformationVisible = computed<boolean>(() => {
     _flow.value?.flow.ssl?.client_sni != undefined
   ].some((value) => value)
 })
+
+function isStringArray(facts: Fact[] | string[]): facts is string[] {
+  return typeof facts[0] == 'string'
+}
 </script>
 
 <template>
@@ -134,149 +309,60 @@ const hostnameInformationVisible = computed<boolean>(() => {
     :title="t('standalone.flows.flow_details')"
     :visible="flow != undefined"
     kind="neutral"
-    size="xxl"
+    :size="showCardView ? 'xxl' : 'lg'"
     @close="$emit('close')"
     @primary-click="$emit('close')"
   >
     <div class="space-y-4">
-      <div
-        v-if="_flow != undefined"
-        class="gap-4 sm:grid sm:grid-cols-2 **:data-facts:*:sm:grid **:data-facts:*:sm:grid-cols-2 **:data-facts:*:sm:gap-4"
-      >
-        <NeCard>
-          <template #title>{{ t('standalone.flows.endpoint_information') }}</template>
-          <dl data-facts>
-            <div>
-              <dt>{{ t('standalone.flows.source_ip') }}</dt>
-              <dd>{{ source.ip }}</dd>
-            </div>
-            <div>
-              <dt>{{ t('standalone.flows.source_port') }}</dt>
-              <dd>{{ source.port }}</dd>
-            </div>
-            <div>
-              <dt>{{ t('standalone.flows.source_mac') }}</dt>
-              <dd v-if="source.mac != '00:00:00:00:00:00'">{{ source.mac }}</dd>
-              <dd v-else>{{ t('common.unknown') }}</dd>
-            </div>
-            <div>
-              <dt>{{ t('standalone.flows.destination_ip') }}</dt>
-              <dd>{{ destination.ip }}</dd>
-            </div>
-            <div>
-              <dt>{{ t('standalone.flows.destination_port') }}</dt>
-              <dd>{{ destination.port }}</dd>
-            </div>
-            <div>
-              <dt>{{ t('standalone.flows.destination_mac') }}</dt>
-              <dd v-if="destination.mac != '00:00:00:00:00:00'">{{ destination.mac }}</dd>
-              <dd v-else>{{ t('common.unknown') }}</dd>
-            </div>
-          </dl>
-        </NeCard>
-        <NeCard v-if="hostnameInformationVisible">
-          <template #title>{{ t('standalone.flows.hostname_information') }}</template>
-          <dl data-facts>
-            <div v-if="_flow.flow.host_server_name">
-              <dt>{{ t('standalone.flows.hostname') }}</dt>
-              <dd>{{ _flow.flow.host_server_name }}</dd>
-            </div>
-            <div v-if="_flow.flow.dns_host_name">
-              <dt>{{ t('standalone.flows.domain') }}</dt>
-              <dd>{{ _flow.flow.dns_host_name }}</dd>
-            </div>
-            <div v-if="_flow.flow.ssl?.client_sni">
-              <dt>{{ t('standalone.flows.tls_sni_hostname') }}</dt>
-              <dd>{{ _flow.flow.ssl.client_sni }}</dd>
-            </div>
-          </dl>
-        </NeCard>
-        <NeCard>
-          <template #title>
-            <template v-if="_flow.type == 'flow'">
-              {{ t('standalone.flows.partial_traffic_inspection') }}
-            </template>
-            <template v-else>
-              {{ t('standalone.flows.traffic_inspection_details') }}
-            </template>
-          </template>
-          <dl data-facts>
-            <div>
-              <dt>{{ t('standalone.flows.protocol') }}</dt>
-              <dd>{{ _flow.flow.detected_protocol_name }}</dd>
-            </div>
-            <div>
-              <dt>{{ t('standalone.flows.application') }}</dt>
-              <dd>{{ _flow.flow.detected_application_name }}</dd>
-            </div>
-            <div>
-              <dt>{{ t('standalone.flows.packets_analyzed') }}</dt>
-              <dd>{{ _flow.flow.detection_packets }}</dd>
-            </div>
-          </dl>
-        </NeCard>
-        <NeCard v-if="_flow.flow.risks.risks?.length ?? 0 > 0">
-          <template #title>{{ t('standalone.flows.risks_detected') }}</template>
-          <ul class="list-inside list-disc">
-            <li v-for="risk in _flow.flow.risks.risks" :key="risk">
-              {{ getNdpiRiskDescription(risk) }}
+      <!-- Toggle for card/list view -->
+      <div v-if="_flow != undefined" class="flex justify-end">
+        <NeToggle v-model="showCardView" label="Card view" />
+      </div>
+
+      <!-- List view -->
+      <div v-if="_flow != undefined && !showCardView">
+        <div v-for="entry in facts" :key="entry.title" class="mb-6">
+          <h1 class="pb-2 text-xl">{{ entry.title }}</h1>
+          <ul v-if="isStringArray(entry.facts)">
+            <li
+              v-for="(item, index) in entry.facts"
+              :key="index"
+              class="border-gray-200 px-4 py-2 not-last:border-b dark:border-gray-700"
+            >
+              {{ item }}
             </li>
           </ul>
-        </NeCard>
-        <NeCard>
-          <template #title>{{ t('standalone.flows.flow_info') }}</template>
-          <dl data-facts>
-            <div>
-              <dt>{{ t('standalone.flows.conntrack_id') }}</dt>
-              <dd>{{ _flow.flow.conntrack.id }}</dd>
-            </div>
-            <div>
-              <dt>{{ t('standalone.flows.first_seen_at') }}</dt>
-              <dd>{{ new Date(_flow.flow.first_seen_at).toLocaleString() }}</dd>
-            </div>
-            <div>
-              <dt>{{ t('standalone.flows.last_seen_at') }}</dt>
-              <dd>{{ new Date(_flow.flow.last_seen_at).toLocaleString() }}</dd>
-            </div>
-            <div>
-              <dt>{{ t('standalone.flows.duration') }}</dt>
-              <dd>
-                {{
-                  formatDistance(
-                    new Date(_flow.flow.first_seen_at),
-                    new Date(_flow.flow.last_seen_at)
-                  )
-                }}
-              </dd>
+          <dl v-else>
+            <div
+              v-for="item in entry.facts"
+              :key="item.label"
+              class="flex gap-4 border-gray-200 px-4 py-2 not-last:border-b dark:border-gray-700"
+            >
+              <dt class="font-medium">{{ item.label }}</dt>
+              <dd class="ml-auto">{{ item.value }}</dd>
             </div>
           </dl>
-        </NeCard>
-        <NeCard>
-          <template #title>{{ t('standalone.flows.traffic_flow') }}</template>
-          <dl data-facts>
-            <div>
-              <dt>{{ t('standalone.flows.download_rate') }}</dt>
-              <dd>{{ formatRate(downloadRate) }}</dd>
-            </div>
-            <div>
-              <dt>{{ t('standalone.flows.upload_rate') }}</dt>
-              <dd>{{ formatRate(uploadRate) }}</dd>
-            </div>
-            <div>
-              <dt>{{ t('standalone.flows.download_bytes') }}</dt>
-              <dd>{{ byteFormat1024(downloadBytes) }}</dd>
-            </div>
-            <div>
-              <dt>{{ t('standalone.flows.upload_bytes') }}</dt>
-              <dd>{{ byteFormat1024(uploadBytes) }}</dd>
-            </div>
-            <div>
-              <dt>{{ t('standalone.flows.total_bytes') }}</dt>
-              <dd>{{ byteFormat1024(_flow.flow.total_bytes) }}</dd>
+        </div>
+      </div>
+
+      <!-- Card view -->
+      <div v-if="_flow != undefined && showCardView" class="gap-4 sm:grid sm:grid-cols-2">
+        <NeCard v-for="entry in facts" :key="entry.title">
+          <template #title>{{ entry.title }}</template>
+          <ul v-if="isStringArray(entry.facts)">
+            <li v-for="(item, index) in entry.facts" :key="index" class="list-inside list-disc">
+              {{ item }}
+            </li>
+          </ul>
+          <dl v-else class="*:sm:grid *:sm:grid-cols-2 *:sm:gap-4">
+            <div v-for="fact in entry.facts" :key="fact.label">
+              <dt>{{ fact.label }}</dt>
+              <dd>{{ fact.value }}</dd>
             </div>
           </dl>
         </NeCard>
       </div>
+
       <AdvancedSettingsDropdown>
         <pre class="col-span-full overflow-auto rounded-md bg-gray-50 p-4 text-sm dark:bg-gray-900">
         <code>{{ JSON.stringify(_flow, null, 2) }}</code>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 2f210ecdd..9d10e1124 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -2411,7 +2411,11 @@
       "scanning_description": "The flow is currently being analyzed. Additional insights will be available once the scan completes.",
       "risky": "Risky",
       "risky_description": "The flow is considered risky and may contain malicious traffic.",
-      "risks_detected": "Risks detected"
+      "risks_detected": "Risks detected",
+      "outgoing": "Outgoing",
+      "outgoing_description": "The connection has been initiated from local networks to the internet",
+      "broadcast": "Broadcast",
+      "broadcast_description": "The connection is a broadcast connection"
     },
     "ping_latency_monitor": {
       "title": "Ping latency monitor",

From 4af21486088f17db90389def552b0c292ac39725 Mon Sep 17 00:00:00 2001
From: Tommaso Bailetti <tommaso.bailetti@nethesis.it>
Date: Tue, 27 Jan 2026 12:21:10 +0100
Subject: [PATCH 09/20] added sorting

---
 .../standalone/monitoring/FlowsTable.vue      |   6 +-
 src/lib/__tests__/ipUtils.spec.ts             | 111 +++++++++++++++++-
 src/lib/ipUtils.ts                            |  69 +++++++++++
 3 files changed, 182 insertions(+), 4 deletions(-)

diff --git a/src/components/standalone/monitoring/FlowsTable.vue b/src/components/standalone/monitoring/FlowsTable.vue
index b6f8f10fc..b6b5b7a0f 100644
--- a/src/components/standalone/monitoring/FlowsTable.vue
+++ b/src/components/standalone/monitoring/FlowsTable.vue
@@ -159,7 +159,7 @@ import {
 import FlowTableRow from '@/components/standalone/monitoring/flows/FlowTableRow.vue'
 import { useRouteQuery } from '@vueuse/router'
 import FlowDetail from '@/components/standalone/monitoring/flows/FlowDetail.vue'
-import { ipv4ToInt } from '@/lib/ipUtils.ts'
+import { sortIps } from '@/lib/ipUtils.ts'
 import { faTable } from '@fortawesome/free-solid-svg-icons'
 
 const { t } = useI18n()
@@ -320,11 +320,11 @@ const sourceIps = computed<FilterOption[]>(() => {
     }
   })
   return Array.from(ipSet)
+    .sort(sortIps)
     .map((ip) => ({
       id: ip,
       label: ip
     }))
-    .sort((a, b) => ipv4ToInt(a.id) - ipv4ToInt(b.id))
 })
 
 const destinationIps = computed<FilterOption[]>(() => {
@@ -337,11 +337,11 @@ const destinationIps = computed<FilterOption[]>(() => {
     }
   })
   return Array.from(ipSet)
+    .sort(sortIps)
     .map((ip) => ({
       id: ip,
       label: ip
     }))
-    .sort((a, b) => ipv4ToInt(a.id) - ipv4ToInt(b.id))
 })
 
 type Filter<T> = (a: T) => boolean
diff --git a/src/lib/__tests__/ipUtils.spec.ts b/src/lib/__tests__/ipUtils.spec.ts
index 65108f921..2d7e486e7 100644
--- a/src/lib/__tests__/ipUtils.spec.ts
+++ b/src/lib/__tests__/ipUtils.spec.ts
@@ -1,5 +1,5 @@
 import { expect, test, describe } from 'vitest'
-import { ipv4ToInt } from '@/lib/ipUtils.ts'
+import { ipv4ToInt, sortIps } from '@/lib/ipUtils.ts'
 
 describe('ipUtils', function () {
   test.each([
@@ -20,4 +20,113 @@ describe('ipUtils', function () {
       expect(() => ipv4ToInt(ip)).toThrowError('Invalid IPv4 address')
     }
   )
+
+  describe('sortIps', () => {
+    test('sorts IPv4 addresses correctly', () => {
+      const ips = ['192.168.1.10', '192.168.1.2', '10.0.0.1', '192.168.1.1']
+      const sorted = [...ips].sort(sortIps)
+      expect(sorted).toEqual(['10.0.0.1', '192.168.1.1', '192.168.1.2', '192.168.1.10'])
+    })
+
+    test('sorts IPv6 addresses correctly', () => {
+      const ips = ['2001:db8::2', '2001:db8::1', '2001:db8::10', '::1']
+      const sorted = [...ips].sort(sortIps)
+      expect(sorted).toEqual(['::1', '2001:db8::1', '2001:db8::2', '2001:db8::10'])
+    })
+
+    test('sorts mixed IPv4 and IPv6 with IPv4 first', () => {
+      const ips = ['2001:db8::1', '192.168.1.1', '::1', '10.0.0.1', '2001:db8::2', '192.168.1.10']
+      const sorted = [...ips].sort(sortIps)
+      expect(sorted).toEqual([
+        '10.0.0.1',
+        '192.168.1.1',
+        '192.168.1.10',
+        '::1',
+        '2001:db8::1',
+        '2001:db8::2'
+      ])
+    })
+
+    test('handles compressed and expanded IPv6 notation', () => {
+      const ips = ['2001:0db8:0000:0000:0000:0000:0000:0001', '2001:db8::2', '2001:db8::1']
+      const sorted = [...ips].sort(sortIps)
+      expect(sorted).toEqual([
+        '2001:0db8:0000:0000:0000:0000:0000:0001',
+        '2001:db8::1',
+        '2001:db8::2'
+      ])
+    })
+
+    test('handles empty array', () => {
+      const sorted = [].sort(sortIps)
+      expect(sorted).toEqual([])
+    })
+
+    test('handles single IP', () => {
+      expect(['192.168.1.1'].sort(sortIps)).toEqual(['192.168.1.1'])
+      expect(['2001:db8::1'].sort(sortIps)).toEqual(['2001:db8::1'])
+    })
+
+    test('does not mutate original array when using spread', () => {
+      const ips = ['192.168.1.2', '192.168.1.1']
+      const original = [...ips]
+      const sorted = [...ips].sort(sortIps)
+      expect(ips).toEqual(original)
+      expect(sorted).toEqual(['192.168.1.1', '192.168.1.2'])
+    })
+
+    test('sorts real-world example from FlowsTable', () => {
+      const ips = [
+        '192.168.1.203',
+        '192.168.1.111',
+        '192.168.120.12',
+        '192.168.1.202',
+        '10.0.0.1',
+        '2001:db8::1',
+        '::1'
+      ]
+      const sorted = [...ips].sort(sortIps)
+      expect(sorted).toEqual([
+        '10.0.0.1',
+        '192.168.1.111',
+        '192.168.1.202',
+        '192.168.1.203',
+        '192.168.120.12',
+        '::1',
+        '2001:db8::1'
+      ])
+    })
+
+    test('comparator returns negative for IPv4 < IPv4', () => {
+      expect(sortIps('10.0.0.1', '192.168.1.1')).toBeLessThan(0)
+    })
+
+    test('comparator returns positive for IPv4 > IPv4', () => {
+      expect(sortIps('192.168.1.1', '10.0.0.1')).toBeGreaterThan(0)
+    })
+
+    test('comparator returns zero for equal IPv4', () => {
+      expect(sortIps('192.168.1.1', '192.168.1.1')).toBe(0)
+    })
+
+    test('comparator returns negative for IPv6 < IPv6', () => {
+      expect(sortIps('::1', '2001:db8::1')).toBeLessThan(0)
+    })
+
+    test('comparator returns positive for IPv6 > IPv6', () => {
+      expect(sortIps('2001:db8::1', '::1')).toBeGreaterThan(0)
+    })
+
+    test('comparator returns zero for equal IPv6', () => {
+      expect(sortIps('2001:db8::1', '2001:db8::1')).toBe(0)
+    })
+
+    test('comparator returns negative when IPv4 compared to IPv6', () => {
+      expect(sortIps('192.168.1.1', '2001:db8::1')).toBe(-1)
+    })
+
+    test('comparator returns positive when IPv6 compared to IPv4', () => {
+      expect(sortIps('2001:db8::1', '192.168.1.1')).toBe(1)
+    })
+  })
 })
diff --git a/src/lib/ipUtils.ts b/src/lib/ipUtils.ts
index 89ab53bc9..fafe864a0 100644
--- a/src/lib/ipUtils.ts
+++ b/src/lib/ipUtils.ts
@@ -8,3 +8,72 @@ export function ipv4ToInt(ip: string): number {
   }
   return ip.split('.').reduce((acc, val) => acc * 256 + parseInt(val), 0)
 }
+
+/**
+ * Check if a string is a valid IPv4 address
+ */
+function isIPv4(ip: string): boolean {
+  return /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(
+    ip
+  )
+}
+
+/**
+ * Normalize IPv6 address by expanding compressed notation
+ */
+function normalizeIPv6(ip: string): string {
+  // Remove zone identifier if present (e.g., %eth0)
+  const cleanIp = ip.split('%')[0] || ip
+
+  // Handle :: compression
+  if (cleanIp.includes('::')) {
+    const sides = cleanIp.split('::')
+    const leftGroups = sides[0] ? sides[0].split(':') : []
+    const rightGroups = sides[1] ? sides[1].split(':') : []
+    const missingGroups = 8 - leftGroups.length - rightGroups.length
+    const middleGroups = Array(missingGroups).fill('0')
+    const allGroups = [...leftGroups, ...middleGroups, ...rightGroups]
+    return allGroups.map((g) => g.padStart(4, '0')).join(':')
+  }
+
+  // Already expanded, just pad each group
+  return cleanIp
+    .split(':')
+    .map((g) => g.padStart(4, '0'))
+    .join(':')
+}
+
+/**
+ * Convert IPv6 address to array of numeric segments for comparison
+ */
+function ipv6ToSegments(ip: string): number[] {
+  const normalized = normalizeIPv6(ip)
+  return normalized.split(':').map((segment) => parseInt(segment, 16))
+}
+
+/**
+ * Sort IP addresses (IPv4 and IPv6). IPv4 addresses are sorted first, followed by IPv6.
+ *
+ * @param a First IP address
+ * @param b Second IP address
+ * @returns Negative if a < b, 0 if equal, positive if a > b
+ */
+export function sortIps(a: string, b: string): number {
+  const aIsV4 = isIPv4(a)
+  const bIsV4 = isIPv4(b)
+
+  if (aIsV4 && bIsV4) {
+    return ipv4ToInt(a) - ipv4ToInt(b)
+  }
+  if (!aIsV4 && !bIsV4) {
+    const segmentsA = ipv6ToSegments(a)
+    const segmentsB = ipv6ToSegments(b)
+    for (let i = 0; i < 8; i++) {
+      const diff = (segmentsA[i] || 0) - (segmentsB[i] || 0)
+      if (diff !== 0) return diff
+    }
+    return 0
+  }
+
+  return aIsV4 ? -1 : 1
+}

From a56243ecd9150ae46ef96bc0ebcf055806f56d40 Mon Sep 17 00:00:00 2001
From: Tommaso Bailetti <tommaso.bailetti@nethesis.it>
Date: Mon, 16 Feb 2026 10:23:29 +0100
Subject: [PATCH 10/20] wip

---
 package-lock.json                             | 118 ++++++++++++++
 package.json                                  |   2 +
 .../standalone/monitoring/FlowSection.vue     | 150 ++++++++++++++++++
 .../standalone/monitoring/FlowsTable.vue      |   1 -
 src/i18n/en.json                              |  12 +-
 src/main.ts                                   |   6 +
 .../monitoring/RealTimeMonitoringView.vue     |   4 +-
 7 files changed, 289 insertions(+), 4 deletions(-)
 create mode 100644 src/components/standalone/monitoring/FlowSection.vue

diff --git a/package-lock.json b/package-lock.json
index a148ebf12..693a5b450 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,8 @@
         "@nethesis/nethesis-solid-svg-icons": "github:nethesis/Font-Awesome#ns-solid",
         "@nethesis/vue-components": "^3.2.0",
         "@tailwindcss/vite": "^4.1.8",
+        "@tanstack/vue-query": "^5.92.9",
+        "@tanstack/vue-query-devtools": "^6.1.4",
         "@types/lodash-es": "^4.17.12",
         "@types/semver": "^7.5.8",
         "@vuepic/vue-datepicker": "^12.0.5",
@@ -2973,6 +2975,42 @@
         "vite": "^5.2.0 || ^6 || ^7"
       }
     },
+    "node_modules/@tanstack/match-sorter-utils": {
+      "version": "8.19.4",
+      "resolved": "https://registry.npmjs.org/@tanstack/match-sorter-utils/-/match-sorter-utils-8.19.4.tgz",
+      "integrity": "sha512-Wo1iKt2b9OT7d+YGhvEPD3DXvPv2etTusIMhMUoG7fbhmxcXCtIjJDEygy91Y2JFlwGyjqiBPRozme7UD8hoqg==",
+      "license": "MIT",
+      "dependencies": {
+        "remove-accents": "0.5.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/query-core": {
+      "version": "5.90.20",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.90.20.tgz",
+      "integrity": "sha512-OMD2HLpNouXEfZJWcKeVKUgQ5n+n3A2JFmBaScpNDUqSrQSjiveC7dKMe53uJUg1nDG16ttFPz2xfilz6i2uVg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/query-devtools": {
+      "version": "5.93.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.93.0.tgz",
+      "integrity": "sha512-+kpsx1NQnOFTZsw6HAFCW3HkKg0+2cepGtAWXjiiSOJJ1CtQpt72EE2nyZb+AjAbLRPoeRmPJ8MtQd8r8gsPdg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@tanstack/virtual-core": {
       "version": "3.13.19",
       "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.13.19.tgz",
@@ -2983,6 +3021,80 @@
         "url": "https://github.com/sponsors/tannerlinsley"
       }
     },
+    "node_modules/@tanstack/vue-query": {
+      "version": "5.92.9",
+      "resolved": "https://registry.npmjs.org/@tanstack/vue-query/-/vue-query-5.92.9.tgz",
+      "integrity": "sha512-jjAZcqKveyX0C4w/6zUqbnqk/XzuxNWaFsWjGTJWULVFizUNeLGME2gf9vVSDclIyiBhR13oZJPPs6fJgfpIJQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/match-sorter-utils": "^8.19.4",
+        "@tanstack/query-core": "5.90.20",
+        "@vue/devtools-api": "^6.6.3",
+        "vue-demi": "^0.14.10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.1.2",
+        "vue": "^2.6.0 || ^3.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@tanstack/vue-query-devtools": {
+      "version": "6.1.4",
+      "resolved": "https://registry.npmjs.org/@tanstack/vue-query-devtools/-/vue-query-devtools-6.1.4.tgz",
+      "integrity": "sha512-DR3r0sDc317TYLxfzQIst0YEZ5Va1FpJ8A70JDU9daSpTrRMJSYuGdLx4O1qUvwRlJqo4bRC1ixUuBzTJEkIMg==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/query-devtools": "5.93.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "@tanstack/vue-query": "^5.92.9",
+        "vue": "^3.3.0"
+      }
+    },
+    "node_modules/@tanstack/vue-query/node_modules/@vue/devtools-api": {
+      "version": "6.6.4",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
+      "license": "MIT"
+    },
+    "node_modules/@tanstack/vue-query/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@tanstack/vue-virtual": {
       "version": "3.13.19",
       "resolved": "https://registry.npmjs.org/@tanstack/vue-virtual/-/vue-virtual-3.13.19.tgz",
@@ -7346,6 +7458,12 @@
         "node": "^18.17.0 || >=20.5.0"
       }
     },
+    "node_modules/remove-accents": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.5.0.tgz",
+      "integrity": "sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A==",
+      "license": "MIT"
+    },
     "node_modules/require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
diff --git a/package.json b/package.json
index d34ff81fe..0863729a5 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,8 @@
     "@nethesis/nethesis-solid-svg-icons": "github:nethesis/Font-Awesome#ns-solid",
     "@nethesis/vue-components": "^3.2.0",
     "@tailwindcss/vite": "^4.1.8",
+    "@tanstack/vue-query": "^5.92.9",
+    "@tanstack/vue-query-devtools": "^6.1.4",
     "@types/lodash-es": "^4.17.12",
     "@types/semver": "^7.5.8",
     "@vuepic/vue-datepicker": "^12.0.5",
diff --git a/src/components/standalone/monitoring/FlowSection.vue b/src/components/standalone/monitoring/FlowSection.vue
new file mode 100644
index 000000000..8032db846
--- /dev/null
+++ b/src/components/standalone/monitoring/FlowSection.vue
@@ -0,0 +1,150 @@
+<script lang="ts" setup>
+import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
+import { ubusCall, ValidationError } from '@/lib/standalone/ubus.ts'
+import FlowsTable from '@/components/standalone/monitoring/FlowsTable.vue'
+import {
+  getAxiosErrorMessage,
+  NeButton,
+  NeInlineNotification,
+  NeSideDrawer,
+  NeSkeleton,
+  NeTextInput,
+  NeToggle
+} from '@nethesis/vue-components'
+import { useI18n } from 'vue-i18n'
+import { ref, watch } from 'vue'
+import { useUciPendingChangesStore } from '@/stores/standalone/uciPendingChanges.ts'
+import { MessageBag } from '@/lib/validation.ts'
+
+const { t } = useI18n()
+const uci = useUciPendingChangesStore()
+
+type FlowDaemonResponse = {
+  data: {
+    configuration: {
+      enabled: boolean
+      expired_persistence: string
+    }
+    status: boolean
+  }
+}
+
+const { data, error, status } = useQuery({
+  queryKey: ['flow', 'daemon'],
+  queryFn: async () => ubusCall<FlowDaemonResponse>('ns.flows', 'get-configuration'),
+  select: (data) => data.data
+})
+
+const enabled = ref(false)
+const expiredPersistence = ref('')
+watch(
+  data,
+  (val) => {
+    if (val != undefined) {
+      enabled.value = val.configuration.enabled
+      expiredPersistence.value = val.configuration.expired_persistence
+    }
+  },
+  { immediate: true }
+)
+
+const configuringDaemon = ref(false)
+
+type SetConfigPayload = {
+  enabled: boolean
+  expired_persistence: string
+}
+
+const validationBag = ref(new MessageBag())
+const queryClient = useQueryClient()
+const {
+  mutate,
+  isPending,
+  error: mutationError
+} = useMutation({
+  mutationFn: (payload: SetConfigPayload) => ubusCall('ns.flows', 'set-configuration', payload),
+  onSuccess: async () => {
+    await Promise.all([
+      uci.getChanges(),
+      queryClient.invalidateQueries({ queryKey: ['flow', 'daemon'] })
+    ])
+    configuringDaemon.value = false
+  },
+  onError: (err) => {
+    if (err instanceof ValidationError) {
+      validationBag.value = err.errorBag
+    }
+  },
+  onMutate: () => {
+    validationBag.value = new MessageBag()
+  }
+})
+
+function submit() {
+  mutate({
+    enabled: enabled.value,
+    expired_persistence: expiredPersistence.value
+  })
+}
+</script>
+
+<template>
+  <NeSkeleton v-if="status == 'pending'" :lines="10" />
+  <NeInlineNotification
+    v-else-if="status == 'error'"
+    :description="t(getAxiosErrorMessage(error))"
+    :title="t('standalone.flows.unable_to_get_flows_configuration')"
+    kind="error"
+  />
+  <div v-else class="space-y-4">
+    <div class="flex flex-wrap items-start gap-4">
+      <p class="mr-auto max-w-xl text-secondary-neutral">{{ t('standalone.flows.subtitle') }}</p>
+      <NeButton kind="secondary" size="lg" @click="configuringDaemon = true">
+        {{ t('standalone.flows.configure_flows_daemon') }}
+      </NeButton>
+    </div>
+    <NeInlineNotification
+      v-if="!data!.configuration.enabled"
+      :description="t('standalone.flows.daemon_disabled_description')"
+      :title="t('standalone.flows.daemon_disabled')"
+      kind="info"
+    />
+    <FlowsTable v-else />
+  </div>
+  <NeSideDrawer
+    :is-shown="configuringDaemon"
+    :title="t('standalone.flows.configure_flows_daemon')"
+    @close="configuringDaemon = false"
+  >
+    <form v-if="status == 'success'" class="space-y-8" @submit.prevent="submit">
+      <NeInlineNotification
+        v-if="mutationError != null && validationBag.size < 1"
+        :description="t(getAxiosErrorMessage(mutationError))"
+        :title="t('standalone.flows.unable_to_configure_flows_daemon')"
+        kind="error"
+      />
+      <NeToggle
+        v-model="enabled"
+        :disabled="isPending"
+        :label="enabled ? t('common.enabled') : t('common.disabled')"
+        :top-label="t('standalone.flows.daemon_enabled')"
+        :invalid-message="t(validationBag.getFirstI18nKeyFor('enabled'))"
+      />
+      <NeTextInput
+        v-model="expiredPersistence"
+        :disabled="isPending"
+        :label="t('standalone.flows.persistence_after_expiration')"
+        :invalid-message="t(validationBag.getFirstI18nKeyFor('expired_persistence'))"
+      />
+      <hr />
+      <div class="flex flex-wrap justify-end gap-6">
+        <NeButton :disabled="isPending" kind="tertiary" @click="configuringDaemon = false">
+          {{ t('common.cancel') }}
+        </NeButton>
+        <NeButton :disabled="isPending" :loading="isPending" kind="primary" type="submit">
+          {{ t('common.configure') }}
+        </NeButton>
+      </div>
+    </form>
+  </NeSideDrawer>
+</template>
diff --git a/src/components/standalone/monitoring/FlowsTable.vue b/src/components/standalone/monitoring/FlowsTable.vue
index b6b5b7a0f..35b455164 100644
--- a/src/components/standalone/monitoring/FlowsTable.vue
+++ b/src/components/standalone/monitoring/FlowsTable.vue
@@ -496,7 +496,6 @@ watch(flowDetails, (value) => {
 <template>
   <div class="space-y-8">
     <div class="space-y-4">
-      <p class="max-w-xl text-secondary-neutral">{{ t('standalone.flows.subtitle') }}</p>
       <NeInlineNotification
         v-if="error"
         kind="error"
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 9d10e1124..846ea9d47 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -2415,7 +2415,17 @@
       "outgoing": "Outgoing",
       "outgoing_description": "The connection has been initiated from local networks to the internet",
       "broadcast": "Broadcast",
-      "broadcast_description": "The connection is a broadcast connection"
+      "broadcast_description": "The connection is a broadcast connection",
+      "unable_to_get_flows_configuration": "Unable to get flows daemon configuration",
+      "unable_to_configure_flows_daemon": "Unable to configure flows daemon",
+      "daemon_disabled": "Flows daemon is disabled.",
+      "daemon_disabled_description": "Please enable it in the settings to view real-time network connections.",
+      "configure_flows_daemon": "Configure flows daemon",
+      "daemon_enabled": "Flows daemon enabled",
+      "persistence_after_expiration": "Flows persistence after expiration",
+      "persistence_after_expiration_description": "Keep flow information available for a short period after the flow has ended. This allows to view information about recently ended flows, which can be useful to investigate connections that are established and closed in a short time frame.",
+      "daemon_not_running": "Flows daemon is enabled but not running",
+      "daemon_not_running_description": "If you just enabled the daemon, commit changes and wait a few seconds for the daemon to start. If the problem persists, check the system logs for errors related to the flows daemon."
     },
     "ping_latency_monitor": {
       "title": "Ping latency monitor",
diff --git a/src/main.ts b/src/main.ts
index 3eff66a31..1501ba892 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -12,6 +12,7 @@ import messages from '@intlify/unplugin-vue-i18n/messages'
 
 import App from './App.vue'
 import router from './router'
+import { VueQueryPlugin } from '@tanstack/vue-query'
 
 const app = createApp(App)
 const pinia = createPinia()
@@ -38,4 +39,9 @@ app.use(
   })
 )
 
+// tanstack
+app.use(VueQueryPlugin, {
+  enableDevtoolsV6Plugin: true
+})
+
 app.mount('#app')
diff --git a/src/views/standalone/monitoring/RealTimeMonitoringView.vue b/src/views/standalone/monitoring/RealTimeMonitoringView.vue
index b385d3399..c98d3baa1 100644
--- a/src/views/standalone/monitoring/RealTimeMonitoringView.vue
+++ b/src/views/standalone/monitoring/RealTimeMonitoringView.vue
@@ -21,7 +21,7 @@ import { isStandaloneMode } from '@/lib/config'
 import { onMounted, ref } from 'vue'
 import { ubusCall } from '@/lib/standalone/ubus'
 import InstantTrafficMonitor from '@/components/standalone/monitoring/InstantTrafficMonitor.vue'
-import FlowsTable from '@/components/standalone/monitoring/FlowsTable.vue'
+import FlowSection from '@/components/standalone/monitoring/FlowSection.vue'
 
 const { t } = useI18n()
 
@@ -172,6 +172,6 @@ function openGrafana() {
     <VpnMonitor v-else-if="selectedTab === 'vpn'" />
     <SecurityMonitor v-else-if="selectedTab === 'security'" />
     <InstantTrafficMonitor v-else-if="selectedTab == 'instant-traffic'" />
-    <FlowsTable v-else-if="selectedTab == 'flows'" />
+    <FlowSection v-else-if="selectedTab == 'flows'" />
   </div>
 </template>

From 971fb039856a7d81167505ecb7eeb23c013bac24 Mon Sep 17 00:00:00 2001
From: Tommaso Bailetti <tommaso.bailetti@nethesis.it>
Date: Thu, 19 Feb 2026 12:52:02 +0100
Subject: [PATCH 11/20] refactor: using new APIs

---
 .../standalone/monitoring/FlowSection.vue     | 154 ++-----
 .../standalone/monitoring/FlowsTable.vue      | 410 ++++++------------
 .../monitoring/flows/FlowConfigureDrawer.vue  | 102 +++++
 src/lib/standalone/ndpiRisks.ts               |  35 --
 4 files changed, 275 insertions(+), 426 deletions(-)
 create mode 100644 src/components/standalone/monitoring/flows/FlowConfigureDrawer.vue

diff --git a/src/components/standalone/monitoring/FlowSection.vue b/src/components/standalone/monitoring/FlowSection.vue
index 8032db846..71f70b76b 100644
--- a/src/components/standalone/monitoring/FlowSection.vue
+++ b/src/components/standalone/monitoring/FlowSection.vue
@@ -1,23 +1,18 @@
 <script lang="ts" setup>
-import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
-import { ubusCall, ValidationError } from '@/lib/standalone/ubus.ts'
-import FlowsTable from '@/components/standalone/monitoring/FlowsTable.vue'
 import {
   getAxiosErrorMessage,
   NeButton,
   NeInlineNotification,
-  NeSideDrawer,
-  NeSkeleton,
-  NeTextInput,
-  NeToggle
+  NeSkeleton
 } from '@nethesis/vue-components'
 import { useI18n } from 'vue-i18n'
 import { ref, watch } from 'vue'
-import { useUciPendingChangesStore } from '@/stores/standalone/uciPendingChanges.ts'
-import { MessageBag } from '@/lib/validation.ts'
+import FlowConfigureDrawer from '@/components/standalone/monitoring/flows/FlowConfigureDrawer.vue'
+import { useQuery } from '@tanstack/vue-query'
+import { ubusCall } from '@/lib/standalone/ubus.ts'
+import FlowsTable from '@/components/standalone/monitoring/FlowsTable.vue'
 
 const { t } = useI18n()
-const uci = useUciPendingChangesStore()
 
 type FlowDaemonResponse = {
   data: {
@@ -29,122 +24,61 @@ type FlowDaemonResponse = {
   }
 }
 
-const { data, error, status } = useQuery({
-  queryKey: ['flow', 'daemon'],
+const { isSuccess, isError, isPending, data, error } = useQuery({
+  queryKey: ['flow', 'config'],
   queryFn: async () => ubusCall<FlowDaemonResponse>('ns.flows', 'get-configuration'),
   select: (data) => data.data
 })
 
+const configuringDaemon = ref(false)
 const enabled = ref(false)
 const expiredPersistence = ref('')
-watch(
-  data,
-  (val) => {
-    if (val != undefined) {
-      enabled.value = val.configuration.enabled
-      expiredPersistence.value = val.configuration.expired_persistence
-    }
-  },
-  { immediate: true }
-)
-
-const configuringDaemon = ref(false)
-
-type SetConfigPayload = {
-  enabled: boolean
-  expired_persistence: string
-}
-
-const validationBag = ref(new MessageBag())
-const queryClient = useQueryClient()
-const {
-  mutate,
-  isPending,
-  error: mutationError
-} = useMutation({
-  mutationFn: (payload: SetConfigPayload) => ubusCall('ns.flows', 'set-configuration', payload),
-  onSuccess: async () => {
-    await Promise.all([
-      uci.getChanges(),
-      queryClient.invalidateQueries({ queryKey: ['flow', 'daemon'] })
-    ])
-    configuringDaemon.value = false
-  },
-  onError: (err) => {
-    if (err instanceof ValidationError) {
-      validationBag.value = err.errorBag
-    }
-  },
-  onMutate: () => {
-    validationBag.value = new MessageBag()
+watch(data, (newData) => {
+  if (newData != undefined) {
+    enabled.value = newData.configuration.enabled
+    expiredPersistence.value = newData.configuration.expired_persistence
   }
 })
-
-function submit() {
-  mutate({
-    enabled: enabled.value,
-    expired_persistence: expiredPersistence.value
-  })
-}
 </script>
 
 <template>
-  <NeSkeleton v-if="status == 'pending'" :lines="10" />
-  <NeInlineNotification
-    v-else-if="status == 'error'"
-    :description="t(getAxiosErrorMessage(error))"
-    :title="t('standalone.flows.unable_to_get_flows_configuration')"
-    kind="error"
-  />
-  <div v-else class="space-y-4">
+  <div class="space-y-4">
     <div class="flex flex-wrap items-start gap-4">
       <p class="mr-auto max-w-xl text-secondary-neutral">{{ t('standalone.flows.subtitle') }}</p>
-      <NeButton kind="secondary" size="lg" @click="configuringDaemon = true">
-        {{ t('standalone.flows.configure_flows_daemon') }}
-      </NeButton>
+      <template v-if="isSuccess">
+        <NeButton
+          v-if="data!.configuration.enabled"
+          kind="secondary"
+          size="lg"
+          @click="configuringDaemon = true"
+        >
+          {{ t('standalone.flows.configure_flows_daemon') }}
+        </NeButton>
+      </template>
     </div>
+    <NeSkeleton v-if="isPending" :lines="10" />
     <NeInlineNotification
-      v-if="!data!.configuration.enabled"
-      :description="t('standalone.flows.daemon_disabled_description')"
-      :title="t('standalone.flows.daemon_disabled')"
-      kind="info"
+      v-else-if="isError"
+      :description="t(getAxiosErrorMessage(error))"
+      :title="t('standalone.unable_to_get_flows_configuration')"
+      kind="error"
     />
-    <FlowsTable v-else />
-  </div>
-  <NeSideDrawer
-    :is-shown="configuringDaemon"
-    :title="t('standalone.flows.configure_flows_daemon')"
-    @close="configuringDaemon = false"
-  >
-    <form v-if="status == 'success'" class="space-y-8" @submit.prevent="submit">
+    <template v-else>
       <NeInlineNotification
-        v-if="mutationError != null && validationBag.size < 1"
-        :description="t(getAxiosErrorMessage(mutationError))"
-        :title="t('standalone.flows.unable_to_configure_flows_daemon')"
-        kind="error"
-      />
-      <NeToggle
-        v-model="enabled"
-        :disabled="isPending"
-        :label="enabled ? t('common.enabled') : t('common.disabled')"
-        :top-label="t('standalone.flows.daemon_enabled')"
-        :invalid-message="t(validationBag.getFirstI18nKeyFor('enabled'))"
+        v-if="!data!.configuration.enabled"
+        :description="t('standalone.flows.daemon_disabled_description')"
+        :primary-button-label="t('standalone.flows.configure_flows_daemon')"
+        :title="t('standalone.flows.daemon_disabled')"
+        kind="info"
+        @primary-click="configuringDaemon = true"
       />
-      <NeTextInput
-        v-model="expiredPersistence"
-        :disabled="isPending"
-        :label="t('standalone.flows.persistence_after_expiration')"
-        :invalid-message="t(validationBag.getFirstI18nKeyFor('expired_persistence'))"
-      />
-      <hr />
-      <div class="flex flex-wrap justify-end gap-6">
-        <NeButton :disabled="isPending" kind="tertiary" @click="configuringDaemon = false">
-          {{ t('common.cancel') }}
-        </NeButton>
-        <NeButton :disabled="isPending" :loading="isPending" kind="primary" type="submit">
-          {{ t('common.configure') }}
-        </NeButton>
-      </div>
-    </form>
-  </NeSideDrawer>
+      <FlowsTable v-else />
+    </template>
+    <FlowConfigureDrawer
+      :enabled="enabled"
+      :expired-persistence="expiredPersistence"
+      :show="configuringDaemon"
+      @close="configuringDaemon = false"
+    />
+  </div>
 </template>
diff --git a/src/components/standalone/monitoring/FlowsTable.vue b/src/components/standalone/monitoring/FlowsTable.vue
index 35b455164..5fa7ab781 100644
--- a/src/components/standalone/monitoring/FlowsTable.vue
+++ b/src/components/standalone/monitoring/FlowsTable.vue
@@ -4,12 +4,64 @@ import {
   faArrowUp,
   faBroadcastTower,
   faClockRotateLeft,
-  faUsers,
-  faWarning
+  faUsers
 } from '@fortawesome/free-solid-svg-icons'
-import { isHighSeverityRisk } from '@/lib/standalone/ndpiRisks.ts'
 import type { IconDefinition } from '@fortawesome/fontawesome-svg-core'
 
+type FlowListResponse = {
+  data: {
+    current_page: number
+    flows: FlowEvent[]
+    total: number
+    last_page: number
+    per_page: number
+  }
+}
+
+export type FlowEvent = {
+  type: 'flow_dpi_complete' | 'flow'
+  interface: string
+  internal: boolean
+  flow: Flow
+}
+
+export type Flow = {
+  conntrack: {
+    id: string
+  }
+  detected_application_name: string
+  detected_protocol_name: string
+  detection_guessed?: boolean
+  detection_packets?: number
+  local_ip: string
+  local_port: number
+  other_ip: string
+  other_port: number
+  local_origin: boolean
+  first_seen_at: number
+  last_seen_at: number
+  local_bytes: number
+  local_rate: number
+  local_mac: string
+  other_bytes: number
+  other_rate: number
+  other_mac: string
+  other_type: 'remote' | 'local' | 'broadcast'
+  digest: string
+  host_server_name?: string
+  dns_host_name?: string
+  risks: {
+    ndpi_risk_score: number
+    ndpi_risk_score_client: number
+    ndpi_risk_score_server: number
+    risks?: number[]
+  }
+  ssl?: {
+    client_sni?: string
+  }
+  total_bytes: number
+}
+
 export type Badge = {
   id: string
   text: string
@@ -70,74 +122,13 @@ export function extractBadges(entry: FlowEvent): Badge[] {
       content: 'standalone.flows.scanning_description'
     })
   }
-  if (entry.flow.risks.risks?.some(isHighSeverityRisk)) {
-    badges.push({
-      id: 'risky',
-      text: 'standalone.flows.risky',
-      icon: faWarning,
-      customClasses: [
-        'bg-yellow-100',
-        'text-yellow-800',
-        'dark:bg-yellow-700',
-        'dark:text-yellow-100'
-      ],
-      content: 'standalone.flows.risky_description'
-    })
-  }
   return badges
 }
-
-export type FlowEvent = {
-  type: 'flow_dpi_complete' | 'flow'
-  interface: string
-  internal: boolean
-  flow: Flow
-}
-
-export type Flow = {
-  conntrack: {
-    id: string
-  }
-  detected_application_name: string
-  detected_protocol_name: string
-  detection_guessed?: boolean
-  detection_packets?: number
-  local_ip: string
-  local_port: number
-  other_ip: string
-  other_port: number
-  local_origin: boolean
-  first_seen_at: number
-  last_seen_at: number
-  local_bytes: number
-  local_rate: number
-  local_mac: string
-  other_bytes: number
-  other_rate: number
-  other_mac: string
-  other_type: 'remote' | 'local' | 'broadcast'
-  digest: string
-  host_server_name?: string
-  dns_host_name?: string
-  risks: {
-    ndpi_risk_score: number
-    ndpi_risk_score_client: number
-    ndpi_risk_score_server: number
-    risks?: number[]
-  }
-  ssl?: {
-    client_sni?: string
-  }
-  total_bytes: number
-}
 </script>
 
 <script lang="ts" setup>
 import { useI18n } from 'vue-i18n'
-import { computed, onMounted, ref, watch } from 'vue'
-import { ubusCall } from '@/lib/standalone/ubus.ts'
-import type { AxiosResponse } from 'axios'
-import { useInterval } from '@vueuse/core'
+import { computed, ref, watch } from 'vue'
 import {
   NeTable,
   NeTableBody,
@@ -146,10 +137,8 @@ import {
   NeTextInput,
   NeDropdownFilter,
   type FilterOption,
-  useItemPagination,
   NePaginator,
   type SortEvent,
-  NeProgressBar,
   NeInlineNotification,
   getAxiosErrorMessage,
   NeEmptyState,
@@ -161,30 +150,34 @@ import { useRouteQuery } from '@vueuse/router'
 import FlowDetail from '@/components/standalone/monitoring/flows/FlowDetail.vue'
 import { sortIps } from '@/lib/ipUtils.ts'
 import { faTable } from '@fortawesome/free-solid-svg-icons'
+import { useQuery, useQueryClient, keepPreviousData } from '@tanstack/vue-query'
+import { ubusCall } from '@/lib/standalone/ubus.ts'
 
 const { t } = useI18n()
+const queryClient = useQueryClient()
 
-type FlowListResponse = AxiosResponse<{
-  list: FlowEvent[]
-}>
+const currentPage = ref(1)
+const perPage = useRouteQuery<string, number>('per_page', '10', {
+  transform: {
+    get: (val) => parseInt(val),
+    set: (val) => val.toString()
+  }
+})
+watch(perPage, () => {
+  if (currentPage.value != 1) {
+    currentPage.value = 1
+  }
+})
+const sortDescending = useRouteQuery<string, boolean>('descending', 'true', {
+  transform: {
+    get: (val) => val == 'true',
+    set: (val) => val.toString()
+  }
+})
+type SortableKeys = 'duration' | 'last_seen_at' | 'download' | 'upload'
+const sortKey = useRouteQuery<SortableKeys>('sort', 'download')
 
-const data = ref<FlowEvent[]>([])
-const loading = ref(true)
-const error = ref<Error>()
-function fetchData() {
-  pause()
-  ubusCall<FlowListResponse>('ns.flows', 'list')
-    .then((res) => {
-      data.value = res.data.list
-      reset()
-      resume()
-    })
-    .catch((reason) => {
-      pause()
-      error.value = reason
-    })
-    .finally(() => (loading.value = false))
-}
+const flowDetails = ref<FlowEvent>()
 
 type RefreshInterval = '10s' | '30s' | '60s' | 'off'
 type RefreshFilterOption = FilterOption & {
@@ -208,53 +201,52 @@ const refreshIntervalOptions: RefreshFilterOption[] = [
     label: t('standalone.flows.refresh_interval', { value: 'off' })
   }
 ]
-const refreshIntervalSelection = ref<RefreshInterval[]>(['30s'])
-const refreshIntervalsValue = computed<number | null>(() => {
+const refreshIntervalSelection = useRouteQuery<string, RefreshInterval[]>('refresh_interval', '10s', {
+  transform: {
+    get: (val) => (val ? val.split(',') as RefreshInterval[] : ['10s']),
+    set: (val) => val.join(',')
+  }
+})
+const refreshIntervalsValue = computed<number | false>(() => {
+  if (flowDetails.value != undefined) {
+    return false
+  }
   switch (refreshIntervalSelection.value[0]) {
     case '10s':
-      return 10
+      return 10000
     case '30s':
-      return 30
+      return 30000
     case '60s':
-      return 60
+      return 60000
     case 'off':
     default:
-      return null
-  }
-})
-watch(refreshIntervalSelection, (val) => {
-  if (!val.includes('off')) {
-    fetchData()
+      return false
   }
 })
 
-onMounted(() => fetchData())
-
-const { counter, pause, reset, resume } = useInterval(1000, {
-  controls: true,
-  callback: async (count) => {
-    if (refreshIntervalsValue.value != null && count >= refreshIntervalsValue.value) {
-      fetchData()
-    }
-  }
+const { data, isError, error, isPending } = useQuery({
+  queryKey: ['flow', 'list', sortKey, sortDescending, perPage, currentPage],
+  queryFn: async () =>
+    ubusCall<FlowListResponse>('ns.flows', 'list', {
+      sort_by: sortKey.value,
+      desc: sortDescending.value,
+      per_page: perPage.value,
+      page: currentPage.value
+    }),
+  placeholderData: keepPreviousData,
+  refetchInterval: refreshIntervalsValue,
+  select: (data) => data.data
 })
-const progressBar = computed<number>(
-  () => (counter.value / (refreshIntervalsValue.value || 10)) * 100
-)
 
-watch(refreshIntervalsValue, (value) => {
-  if (value == null) {
-    pause()
-    reset()
-  } else {
-    reset()
-    resume()
+watch(refreshIntervalSelection, (val) => {
+  if (!val.includes('off')) {
+    queryClient.invalidateQueries({ queryKey: ['flow', 'list'] })
   }
 })
 
 const applications = computed<FilterOption[]>(() => {
   const appSet = new Set<string>()
-  data.value.forEach((flow) => {
+  data.value?.flows.forEach((flow) => {
     appSet.add(flow.flow.detected_application_name)
   })
   return Array.from(appSet)
@@ -282,7 +274,7 @@ const applications = computed<FilterOption[]>(() => {
 
 const protocols = computed<FilterOption[]>(() => {
   const protoSet = new Set<string>()
-  data.value.forEach((flow) => {
+  data.value?.flows.forEach((flow) => {
     protoSet.add(flow.flow.detected_protocol_name)
   })
   return Array.from(protoSet)
@@ -295,7 +287,7 @@ const protocols = computed<FilterOption[]>(() => {
 
 const badges = computed<FilterOption[]>(() => {
   const badgeMap = new Map<string, Badge>()
-  data.value.forEach((flow) => {
+  data.value?.flows.forEach((flow) => {
     extractBadges(flow).forEach((badge) => {
       if (!badgeMap.has(badge.id)) {
         badgeMap.set(badge.id, badge)
@@ -312,7 +304,7 @@ const badges = computed<FilterOption[]>(() => {
 
 const sourceIps = computed<FilterOption[]>(() => {
   const ipSet = new Set<string>()
-  data.value.forEach((flow) => {
+  data.value?.flows.forEach((flow) => {
     if (flow.flow.local_origin) {
       return ipSet.add(flow.flow.local_ip)
     } else {
@@ -329,7 +321,7 @@ const sourceIps = computed<FilterOption[]>(() => {
 
 const destinationIps = computed<FilterOption[]>(() => {
   const ipSet = new Set<string>()
-  data.value.forEach((flow) => {
+  data.value?.flows.forEach((flow) => {
     if (flow.flow.local_origin) {
       return ipSet.add(flow.flow.other_ip)
     } else {
@@ -344,169 +336,25 @@ const destinationIps = computed<FilterOption[]>(() => {
     }))
 })
 
-type Filter<T> = (a: T) => boolean
-
-const filter = useRouteQuery('filter', '')
-const filterApplications = useRouteQuery<string, string[]>('applications', '', {
-  transform: {
-    get: (val) => (val ? val.split(',') : []),
-    set: (val) => val.join(',')
-  }
-})
-const filterProtocols = useRouteQuery<string, string[]>('protocols', '', {
-  transform: {
-    get: (val) => (val ? val.split(',') : []),
-    set: (val) => val.join(',')
-  }
-})
-const filterBadges = useRouteQuery<string, string[]>('badge', '', {
-  transform: {
-    get: (val) => (val ? val.split(',') : []),
-    set: (val) => val.join(',')
-  }
-})
-const filterSource = useRouteQuery<string, string[]>('source', '', {
-  transform: {
-    get: (val) => (val ? val.split(',') : []),
-    set: (val) => val.join(',')
-  }
-})
-const filterDestination = useRouteQuery<string, string[]>('destination', '', {
-  transform: {
-    get: (val) => (val ? val.split(',') : []),
-    set: (val) => val.join(',')
-  }
-})
-const filters: Filter<FlowEvent>[] = [
-  (flow) => {
-    return Object.values(flow.flow).some((value) =>
-      String(value).toLowerCase().includes(filter.value.toLowerCase())
-    )
-  },
-  (flow) => {
-    if (!filterApplications.value.length) {
-      return true
-    }
-    return filterApplications.value.includes(flow.flow.detected_application_name)
-  },
-  (flow) => {
-    if (!filterProtocols.value.length) {
-      return true
-    }
-    return filterProtocols.value.includes(flow.flow.detected_protocol_name)
-  },
-  (flow) => {
-    if (!filterBadges.value.length) {
-      return true
-    }
-    return extractBadges(flow).some((items) => filterBadges.value.includes(items.id))
-  },
-  (flow) => {
-    if (!filterSource.value.length) {
-      return true
-    }
-    if (flow.flow.local_origin) {
-      return filterSource.value.includes(flow.flow.local_ip)
-    }
-    return filterSource.value.includes(flow.flow.other_ip)
-  },
-  (flow) => {
-    if (!filterDestination.value.length) {
-      return true
-    }
-    if (flow.flow.local_origin) {
-      return filterDestination.value.includes(flow.flow.other_ip)
-    }
-    return filterDestination.value.includes(flow.flow.local_ip)
-  }
-]
-
-const filteredData = computed<FlowEvent[]>(() => {
-  return data.value.filter((flow) => filters.every((filter) => filter(flow)))
-})
-
-type SortableKeys = 'duration' | 'last_seen_at' | 'download' | 'upload'
-const sortKey = useRouteQuery<SortableKeys>('sort', 'download')
-const sortDescending = useRouteQuery<string, boolean>('descending', 'true', {
-  transform: {
-    get: (val) => val == 'true',
-    set: (val) => val.toString()
-  }
-})
-const sortedItems = computed<FlowEvent[]>(() => {
-  const items = [...filteredData.value]
-  return items.sort((a, b) => {
-    let compare = 0
-    switch (sortKey.value) {
-      case 'duration':
-        compare =
-          a.flow.last_seen_at - a.flow.first_seen_at - (b.flow.last_seen_at - b.flow.first_seen_at)
-        break
-      case 'last_seen_at':
-        compare = a.flow.last_seen_at - b.flow.last_seen_at
-        break
-      case 'download':
-      case 'upload': {
-        const isDownload = sortKey.value == 'download'
-        const aRate = a.flow.local_origin == isDownload ? a.flow.other_rate : a.flow.local_rate
-        const bRate = b.flow.local_origin == isDownload ? b.flow.other_rate : b.flow.local_rate
-
-        // Handle missing rates: push flows with missing rates to the bottom
-        const aHasRate = aRate !== undefined && aRate != null
-        const bHasRate = bRate !== undefined && bRate != null
-
-        if (!aHasRate && !bHasRate) {
-          compare = 0
-        } else if (!aHasRate) {
-          // a has no rate, push to bottom: positive value means a > b
-          return 1
-        } else if (!bHasRate) {
-          // b has no rate, push to bottom: negative value means a < b
-          return -1
-        } else {
-          compare = aRate - bRate
-        }
-        break
-      }
-    }
-    return sortDescending.value ? -compare : compare
-  })
-})
-
-const pageSize = useRouteQuery<number>('page-size', 10)
-const { currentPage, paginatedItems } = useItemPagination(() => sortedItems.value, {
-  itemsPerPage: pageSize
-})
-
 const onSort = (payload: SortEvent) => {
   sortKey.value = payload.key as SortableKeys
   sortDescending.value = payload.descending
 }
-
-const flowDetails = ref<FlowEvent>()
-watch(flowDetails, (value) => {
-  if (value != undefined) {
-    pause()
-  } else {
-    resume()
-  }
-})
 </script>
 
 <template>
   <div class="space-y-8">
     <div class="space-y-4">
       <NeInlineNotification
-        v-if="error"
+        v-if="isError"
         kind="error"
         :title="t('error.cannot_retrieve_flows')"
         :description="t(getAxiosErrorMessage(error))"
       />
-      <div v-else-if="!loading" class="flex flex-wrap items-start gap-6">
+      <div v-else-if="!isPending" class="flex flex-wrap items-start gap-6">
         <div class="mr-auto flex flex-wrap items-center gap-4">
-          <NeTextInput v-model="filter" :placeholder="t('common.filter')" is-search />
+          <NeTextInput :placeholder="t('common.filter')" is-search />
           <NeDropdownFilter
-            v-model="filterApplications"
             :clear-filter-label="t('ne_dropdown_filter.clear_selection')"
             :clear-search-label="t('ne_dropdown_filter.clear_search')"
             :label="t('standalone.flows.application')"
@@ -518,7 +366,6 @@ watch(flowDetails, (value) => {
             show-options-filter
           />
           <NeDropdownFilter
-            v-model="filterProtocols"
             :clear-filter-label="t('ne_dropdown_filter.clear_selection')"
             :clear-search-label="t('ne_dropdown_filter.clear_search')"
             :label="t('standalone.flows.protocol')"
@@ -530,7 +377,6 @@ watch(flowDetails, (value) => {
             show-options-filter
           />
           <NeDropdownFilter
-            v-model="filterBadges"
             :clear-filter-label="t('ne_dropdown_filter.clear_selection')"
             :clear-search-label="t('ne_dropdown_filter.clear_search')"
             :label="t('standalone.flows.tags')"
@@ -542,7 +388,6 @@ watch(flowDetails, (value) => {
             show-options-filter
           />
           <NeDropdownFilter
-            v-model="filterSource"
             :clear-filter-label="t('ne_dropdown_filter.clear_selection')"
             :clear-search-label="t('ne_dropdown_filter.clear_search')"
             :label="t('standalone.flows.source')"
@@ -554,7 +399,6 @@ watch(flowDetails, (value) => {
             show-options-filter
           />
           <NeDropdownFilter
-            v-model="filterDestination"
             :clear-filter-label="t('ne_dropdown_filter.clear_selection')"
             :clear-search-label="t('ne_dropdown_filter.clear_search')"
             :label="t('standalone.flows.destination')"
@@ -578,14 +422,18 @@ watch(flowDetails, (value) => {
             :options="refreshIntervalOptions"
             kind="radio"
           />
+          <!--
+          FIXME: add back progress bar when API supports it
           <NeProgressBar :progress="progressBar" color="indigo" size="sm" />
+          -->
         </div>
       </div>
     </div>
     <NeTable
-      v-if="!error"
       :aria-label="t('standalone.flows.table_aria_label')"
-      :loading="loading"
+      :loading="isPending"
+      :skeleton-columns="11"
+      :skeleton-rows="perPage + 1"
       :sort-descending="sortDescending"
       :sort-key="sortKey"
       card-breakpoint="2xl"
@@ -620,9 +468,9 @@ watch(flowDetails, (value) => {
         </NeTableHeadCell>
         <NeTableHeadCell />
       </NeTableHead>
-      <NeTableBody v-if="paginatedItems.length > 0">
+      <NeTableBody v-if="data!.total > 0">
         <FlowTableRow
-          v-for="flow in paginatedItems"
+          v-for="flow in data!.flows"
           :key="flow.flow.digest"
           :item="flow"
           @show="flowDetails = $event"
@@ -640,16 +488,16 @@ watch(flowDetails, (value) => {
           </NeTableCell>
         </NeTableRow>
       </NeTableBody>
-      <template v-if="!loading && paginatedItems.length > 0" #paginator>
+      <template v-if="!isPending && data!.total > 0" #paginator>
         <NePaginator
           :current-page="currentPage"
           :nav-pagination-label="t('ne_table.pagination')"
           :next-label="t('ne_table.go_to_next_page')"
-          :page-size="pageSize"
+          :page-size="data!.per_page"
           :page-size-label="t('ne_table.show')"
           :previous-label="t('ne_table.go_to_previous_page')"
           :range-of-total-label="t('ne_table.of')"
-          :total-rows="sortedItems.length"
+          :total-rows="data!.total"
           @select-page="
             (page: number) => {
               currentPage = page
@@ -657,7 +505,7 @@ watch(flowDetails, (value) => {
           "
           @select-page-size="
             (size: number) => {
-              pageSize = size
+              perPage = size
             }
           "
         />
diff --git a/src/components/standalone/monitoring/flows/FlowConfigureDrawer.vue b/src/components/standalone/monitoring/flows/FlowConfigureDrawer.vue
new file mode 100644
index 000000000..c7e18fc30
--- /dev/null
+++ b/src/components/standalone/monitoring/flows/FlowConfigureDrawer.vue
@@ -0,0 +1,102 @@
+<script lang="ts" setup>
+import {
+  getAxiosErrorMessage,
+  NeButton,
+  NeInlineNotification,
+  NeSideDrawer,
+  NeTextInput,
+  NeToggle
+} from '@nethesis/vue-components'
+import { useI18n } from 'vue-i18n'
+import { ref } from 'vue'
+import { MessageBag } from '@/lib/validation.ts'
+import { ubusCall, ValidationError } from '@/lib/standalone/ubus.ts'
+import { useMutation, useQueryClient } from '@tanstack/vue-query'
+import { useUciPendingChangesStore } from '@/stores/standalone/uciPendingChanges.ts'
+
+const { t } = useI18n()
+
+type SetConfigPayload = {
+  enabled: boolean
+  expired_persistence: string
+}
+
+defineProps<{
+  show: boolean
+}>()
+
+const emit = defineEmits<{
+  close: []
+}>()
+
+const uci = useUciPendingChangesStore()
+const queryClient = useQueryClient()
+
+const enabled = defineModel<boolean>('enabled', { default: false })
+const expiredPersistence = defineModel<string>('expiredPersistence', { default: '' })
+
+const validationBag = ref(new MessageBag())
+
+const { mutate, error, status, isPending } = useMutation({
+  mutationFn: (payload: SetConfigPayload) => ubusCall('ns.flows', 'set-configuration', payload),
+  onMutate: () => validationBag.value.clear(),
+  onSuccess: async () => {
+    await Promise.all([
+      uci.getChanges(),
+      queryClient.invalidateQueries({ queryKey: ['flow', 'config'] })
+    ])
+    emit('close')
+  },
+  onError: (e: Error) => {
+    if (e instanceof ValidationError) {
+      validationBag.value = e.errorBag
+    }
+  }
+})
+
+function submit() {
+  mutate({
+    enabled: enabled.value,
+    expired_persistence: expiredPersistence.value
+  })
+}
+</script>
+
+<template>
+  <NeSideDrawer
+    :is-shown="show"
+    :title="t('standalone.flows.configure_flows_daemon')"
+    @close="emit('close')"
+  >
+    <form class="space-y-8" @submit.prevent="submit">
+      <NeInlineNotification
+        v-if="status == 'error' && validationBag.size < 1"
+        :description="t(getAxiosErrorMessage(error))"
+        :title="t('standalone.flows.unable_to_configure_flows_daemon')"
+        kind="error"
+      />
+      <NeToggle
+        v-model="enabled"
+        :disabled="isPending"
+        :invalid-message="t(validationBag.getFirstI18nKeyFor('enabled'))"
+        :label="enabled ? t('common.enabled') : t('common.disabled')"
+        :top-label="t('standalone.flows.daemon_enabled')"
+      />
+      <NeTextInput
+        v-model="expiredPersistence"
+        :disabled="isPending"
+        :invalid-message="t(validationBag.getFirstI18nKeyFor('expired_persistence'))"
+        :label="t('standalone.flows.persistence_after_expiration')"
+      />
+      <hr />
+      <div class="flex flex-wrap justify-end gap-6">
+        <NeButton :disabled="isPending" kind="tertiary" @click="emit('close')">
+          {{ t('common.cancel') }}
+        </NeButton>
+        <NeButton :disabled="isPending" :loading="isPending" kind="primary" type="submit">
+          {{ t('common.configure') }}
+        </NeButton>
+      </div>
+    </form>
+  </NeSideDrawer>
+</template>
diff --git a/src/lib/standalone/ndpiRisks.ts b/src/lib/standalone/ndpiRisks.ts
index 83bd92860..cb5f7dbfc 100644
--- a/src/lib/standalone/ndpiRisks.ts
+++ b/src/lib/standalone/ndpiRisks.ts
@@ -79,38 +79,3 @@ export const NDPI_RISKS: Record<number, string> = {
 export function getNdpiRiskDescription(riskCode: number): string {
   return NDPI_RISKS[riskCode] || 'Unknown Risk'
 }
-
-/**
- * Check if a risk code represents a high-severity risk
- * High severity risks include malware, exploits, data exfiltration, etc.
- * @param riskCode - The NDPI risk code
- * @returns true if the risk is considered high severity
- */
-export function isHighSeverityRisk(riskCode: number): boolean {
-  const highSeverityRisks = [
-    2,
-    3, // XSS, SQL Injection
-    26, // Risky Domain
-    27, // Malicious JA3
-    28, // Malicious SHA1 Certificate
-    39, // Possible DDoS/Exploit
-    52, // Malware Host Contacted
-    55, // Malicious Behavior
-    59 // Data Exfiltration
-  ]
-  return highSeverityRisks.includes(riskCode)
-}
-
-/**
- * Check if a risk code represents a medium-severity risk
- * Medium severity risks include weak crypto, suspicious traffic, etc.
- * @param riskCode - The NDPI risk code
- * @returns true if the risk is considered medium severity
- */
-export function isMediumSeverityRisk(riskCode: number): boolean {
-  const mediumSeverityRisks = [
-    1, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 29, 30, 31,
-    32, 33, 34, 35, 36, 37, 38, 40, 41, 42, 54, 56, 57, 58, 60
-  ]
-  return mediumSeverityRisks.includes(riskCode)
-}

From dfc3835433775be6143f90c1b8061b5e73ce8753 Mon Sep 17 00:00:00 2001
From: Tommaso Bailetti <tommaso.bailetti@nethesis.it>
Date: Mon, 23 Feb 2026 11:43:49 +0100
Subject: [PATCH 12/20] added customizable text for dropdown

---
 src/components/AdvancedSettingsDropdown.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/AdvancedSettingsDropdown.vue b/src/components/AdvancedSettingsDropdown.vue
index d84cc0d2a..f4f8b796e 100644
--- a/src/components/AdvancedSettingsDropdown.vue
+++ b/src/components/AdvancedSettingsDropdown.vue
@@ -21,7 +21,9 @@ const icon = computed<IconDefinition>(() => {
 
 <template>
   <NeButton kind="tertiary" @click="model = !model">
-    {{ t('common.advanced_settings') }}
+    <slot name="title">
+      {{ t('common.advanced_settings') }}
+    </slot>
     <template #suffix>
       <FontAwesomeIcon :icon="icon" class="h-4 w-4" aria-hidden="true" />
     </template>

From 1c49159fd90f925e48d8dcf44b520fc8532fa6c0 Mon Sep 17 00:00:00 2001
From: Tommaso Bailetti <tommaso.bailetti@nethesis.it>
Date: Mon, 23 Feb 2026 11:44:06 +0100
Subject: [PATCH 13/20] using latest apis

---
 .../standalone/monitoring/FlowsTable.vue      | 191 +++++++++++-------
 .../monitoring/flows/FlowDetail.vue           |  34 +---
 .../monitoring/flows/FlowTableRow.vue         |  31 +--
 src/i18n/en.json                              |   6 +-
 4 files changed, 141 insertions(+), 121 deletions(-)

diff --git a/src/components/standalone/monitoring/FlowsTable.vue b/src/components/standalone/monitoring/FlowsTable.vue
index 5fa7ab781..850d45fca 100644
--- a/src/components/standalone/monitoring/FlowsTable.vue
+++ b/src/components/standalone/monitoring/FlowsTable.vue
@@ -3,7 +3,7 @@ import {
   faArrowDown,
   faArrowUp,
   faBroadcastTower,
-  faClockRotateLeft,
+  faMagnifyingGlass,
   faUsers
 } from '@fortawesome/free-solid-svg-icons'
 import type { IconDefinition } from '@fortawesome/fontawesome-svg-core'
@@ -15,6 +15,12 @@ type FlowListResponse = {
     total: number
     last_page: number
     per_page: number
+    filters: {
+      applications: string[]
+      protocols: string[]
+      sources: string[]
+      destinations: string[]
+    }
   }
 }
 
@@ -117,7 +123,7 @@ export function extractBadges(entry: FlowEvent): Badge[] {
     badges.push({
       id: 'scanning',
       text: 'standalone.flows.scanning',
-      icon: faClockRotateLeft,
+      icon: faMagnifyingGlass,
       customClasses: ['bg-gray-100', 'text-gray-800', 'dark:bg-gray-700', 'dark:text-gray-100'],
       content: 'standalone.flows.scanning_description'
     })
@@ -148,14 +154,41 @@ import {
 import FlowTableRow from '@/components/standalone/monitoring/flows/FlowTableRow.vue'
 import { useRouteQuery } from '@vueuse/router'
 import FlowDetail from '@/components/standalone/monitoring/flows/FlowDetail.vue'
-import { sortIps } from '@/lib/ipUtils.ts'
 import { faTable } from '@fortawesome/free-solid-svg-icons'
 import { useQuery, useQueryClient, keepPreviousData } from '@tanstack/vue-query'
 import { ubusCall } from '@/lib/standalone/ubus.ts'
+import { refDebounced } from '@vueuse/core'
 
 const { t } = useI18n()
 const queryClient = useQueryClient()
 
+const applicationsFilter = useRouteQuery<string, string[]>('application', '', {
+  transform: {
+    get: (val) => (val ? val.split(',') : []),
+    set: (val) => val.join(',')
+  }
+})
+const protocolsFilter = useRouteQuery<string, string[]>('protocols', '', {
+  transform: {
+    get: (val) => (val ? val.split(',') : []),
+    set: (val) => val.join(',')
+  }
+})
+
+const sourceFilter = useRouteQuery<string, string[]>('source', '', {
+  transform: {
+    get: (val) => (val ? val.split(',') : []),
+    set: (val) => val.join(',')
+  }
+})
+
+const destinationFilter = useRouteQuery<string, string[]>('destination', '', {
+  transform: {
+    get: (val) => (val ? val.split(',') : []),
+    set: (val) => val.join(',')
+  }
+})
+
 const currentPage = ref(1)
 const perPage = useRouteQuery<string, number>('per_page', '10', {
   transform: {
@@ -201,12 +234,16 @@ const refreshIntervalOptions: RefreshFilterOption[] = [
     label: t('standalone.flows.refresh_interval', { value: 'off' })
   }
 ]
-const refreshIntervalSelection = useRouteQuery<string, RefreshInterval[]>('refresh_interval', '10s', {
-  transform: {
-    get: (val) => (val ? val.split(',') as RefreshInterval[] : ['10s']),
-    set: (val) => val.join(',')
+const refreshIntervalSelection = useRouteQuery<string, RefreshInterval[]>(
+  'refresh_interval',
+  '10s',
+  {
+    transform: {
+      get: (val) => (val ? (val.split(',') as RefreshInterval[]) : ['10s']),
+      set: (val) => val.join(',')
+    }
   }
-})
+)
 const refreshIntervalsValue = computed<number | false>(() => {
   if (flowDetails.value != undefined) {
     return false
@@ -224,20 +261,53 @@ const refreshIntervalsValue = computed<number | false>(() => {
   }
 })
 
+const query = useRouteQuery('query', '')
+const queryDebounced = refDebounced(query, 500)
+watch(queryDebounced, () => {
+  if (currentPage.value != 1) {
+    currentPage.value = 1
+  }
+})
+
 const { data, isError, error, isPending } = useQuery({
-  queryKey: ['flow', 'list', sortKey, sortDescending, perPage, currentPage],
+  queryKey: [
+    'flow',
+    'list',
+    queryDebounced,
+    sortKey,
+    sortDescending,
+    perPage,
+    currentPage,
+    applicationsFilter,
+    protocolsFilter,
+    sourceFilter,
+    destinationFilter
+  ],
   queryFn: async () =>
     ubusCall<FlowListResponse>('ns.flows', 'list', {
+      q: queryDebounced.value,
       sort_by: sortKey.value,
       desc: sortDescending.value,
       per_page: perPage.value,
-      page: currentPage.value
+      page: currentPage.value,
+      application: applicationsFilter.value,
+      protocol: protocolsFilter.value,
+      source: sourceFilter.value,
+      destination: destinationFilter.value
     }),
   placeholderData: keepPreviousData,
   refetchInterval: refreshIntervalsValue,
   select: (data) => data.data
 })
 
+watch(data, () => {
+  if (data.value != undefined) {
+    if (currentPage.value > data.value.last_page) {
+      currentPage.value = data.value.last_page
+    }
+  }
+})
+
 watch(refreshIntervalSelection, (val) => {
   if (!val.includes('off')) {
     queryClient.invalidateQueries({ queryKey: ['flow', 'list'] })
@@ -245,12 +315,8 @@ watch(refreshIntervalSelection, (val) => {
 })
 
 const applications = computed<FilterOption[]>(() => {
-  const appSet = new Set<string>()
-  data.value?.flows.forEach((flow) => {
-    appSet.add(flow.flow.detected_application_name)
-  })
-  return Array.from(appSet)
-    .map((app) => {
+  return (
+    data.value?.filters.applications.map((app) => {
       let label = app
       // Remove netify. prefix if present
       if (label.startsWith('netify.')) {
@@ -268,72 +334,39 @@ const applications = computed<FilterOption[]>(() => {
         id: app,
         label: label
       }
-    })
-    .sort((a, b) => a.label.localeCompare(b.label))
+    }) ?? []
+  )
 })
 
 const protocols = computed<FilterOption[]>(() => {
-  const protoSet = new Set<string>()
-  data.value?.flows.forEach((flow) => {
-    protoSet.add(flow.flow.detected_protocol_name)
-  })
-  return Array.from(protoSet)
-    .map((proto) => ({
-      id: proto,
-      label: proto
-    }))
-    .sort((a, b) => a.label.localeCompare(b.label))
+  return (
+    data.value?.filters.protocols.map((protocol) => ({
+      id: protocol,
+      label: protocol
+    })) ?? []
+  )
 })
 
 const badges = computed<FilterOption[]>(() => {
-  const badgeMap = new Map<string, Badge>()
-  data.value?.flows.forEach((flow) => {
-    extractBadges(flow).forEach((badge) => {
-      if (!badgeMap.has(badge.id)) {
-        badgeMap.set(badge.id, badge)
-      }
-    })
-  })
-  return Array.from(badgeMap.values())
-    .map((badge) => ({
-      id: badge.id,
-      label: t(badge.text)
-    }))
-    .sort((a, b) => a.label.localeCompare(b.label))
+  return []
 })
 
 const sourceIps = computed<FilterOption[]>(() => {
-  const ipSet = new Set<string>()
-  data.value?.flows.forEach((flow) => {
-    if (flow.flow.local_origin) {
-      return ipSet.add(flow.flow.local_ip)
-    } else {
-      return ipSet.add(flow.flow.other_ip)
-    }
-  })
-  return Array.from(ipSet)
-    .sort(sortIps)
-    .map((ip) => ({
-      id: ip,
-      label: ip
-    }))
+  return (
+    data.value?.filters.sources.map((sourceIp) => ({
+      id: sourceIp,
+      label: sourceIp
+    })) ?? []
+  )
 })
 
 const destinationIps = computed<FilterOption[]>(() => {
-  const ipSet = new Set<string>()
-  data.value?.flows.forEach((flow) => {
-    if (flow.flow.local_origin) {
-      return ipSet.add(flow.flow.other_ip)
-    } else {
-      return ipSet.add(flow.flow.local_ip)
-    }
-  })
-  return Array.from(ipSet)
-    .sort(sortIps)
-    .map((ip) => ({
-      id: ip,
-      label: ip
-    }))
+  return (
+    data.value?.filters.destinations.map((destinationIp) => ({
+      id: destinationIp,
+      label: destinationIp
+    })) ?? []
+  )
 })
 
 const onSort = (payload: SortEvent) => {
@@ -353,8 +386,9 @@ const onSort = (payload: SortEvent) => {
       />
       <div v-else-if="!isPending" class="flex flex-wrap items-start gap-6">
         <div class="mr-auto flex flex-wrap items-center gap-4">
-          <NeTextInput :placeholder="t('common.filter')" is-search />
+          <NeTextInput v-model="query" :placeholder="t('common.filter')" is-search />
           <NeDropdownFilter
+            v-model="applicationsFilter"
             :clear-filter-label="t('ne_dropdown_filter.clear_selection')"
             :clear-search-label="t('ne_dropdown_filter.clear_search')"
             :label="t('standalone.flows.application')"
@@ -366,6 +400,7 @@ const onSort = (payload: SortEvent) => {
             show-options-filter
           />
           <NeDropdownFilter
+            v-model="protocolsFilter"
             :clear-filter-label="t('ne_dropdown_filter.clear_selection')"
             :clear-search-label="t('ne_dropdown_filter.clear_search')"
             :label="t('standalone.flows.protocol')"
@@ -388,6 +423,7 @@ const onSort = (payload: SortEvent) => {
             show-options-filter
           />
           <NeDropdownFilter
+            v-model="sourceFilter"
             :clear-filter-label="t('ne_dropdown_filter.clear_selection')"
             :clear-search-label="t('ne_dropdown_filter.clear_search')"
             :label="t('standalone.flows.source')"
@@ -399,6 +435,7 @@ const onSort = (payload: SortEvent) => {
             show-options-filter
           />
           <NeDropdownFilter
+            v-model="destinationFilter"
             :clear-filter-label="t('ne_dropdown_filter.clear_selection')"
             :clear-search-label="t('ne_dropdown_filter.clear_search')"
             :label="t('standalone.flows.destination')"
@@ -454,18 +491,18 @@ const onSort = (payload: SortEvent) => {
         <NeTableHeadCell>
           {{ t('standalone.flows.destination') }}
         </NeTableHeadCell>
-        <NeTableHeadCell column-key="duration" sortable @sort="onSort">
-          {{ t('standalone.flows.duration') }}
-        </NeTableHeadCell>
-        <NeTableHeadCell column-key="last_seen_at" sortable @sort="onSort">
-          {{ t('standalone.flows.last_seen_at') }}
-        </NeTableHeadCell>
         <NeTableHeadCell column-key="download" sortable @sort="onSort">
           {{ t('standalone.flows.download') }}
         </NeTableHeadCell>
         <NeTableHeadCell column-key="upload" sortable @sort="onSort">
           {{ t('standalone.flows.upload') }}
         </NeTableHeadCell>
+        <NeTableHeadCell column-key="duration" sortable @sort="onSort">
+          {{ t('standalone.flows.duration') }}
+        </NeTableHeadCell>
+        <NeTableHeadCell column-key="last_seen_at" sortable @sort="onSort">
+          {{ t('standalone.flows.last_seen_at') }}
+        </NeTableHeadCell>
         <NeTableHeadCell />
       </NeTableHead>
       <NeTableBody v-if="data!.total > 0">
diff --git a/src/components/standalone/monitoring/flows/FlowDetail.vue b/src/components/standalone/monitoring/flows/FlowDetail.vue
index 56d9c4d71..32577470f 100644
--- a/src/components/standalone/monitoring/flows/FlowDetail.vue
+++ b/src/components/standalone/monitoring/flows/FlowDetail.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { byteFormat1024, kbpsFormat, NeCard, NeModal, NeToggle } from '@nethesis/vue-components'
+import { byteFormat1024, kbpsFormat, NeModal } from '@nethesis/vue-components'
 import type { FlowEvent } from '@/components/standalone/monitoring/FlowsTable.vue'
 import { useI18n } from 'vue-i18n'
 import { computed, ref, watch } from 'vue'
@@ -18,7 +18,6 @@ const props = defineProps<{
 }>()
 
 const _flow = ref<FlowEvent>()
-const showCardView = ref(false)
 
 watch(
   () => props.flow,
@@ -309,18 +308,12 @@ function isStringArray(facts: Fact[] | string[]): facts is string[] {
     :title="t('standalone.flows.flow_details')"
     :visible="flow != undefined"
     kind="neutral"
-    :size="showCardView ? 'xxl' : 'lg'"
+    size="lg"
     @close="$emit('close')"
     @primary-click="$emit('close')"
   >
     <div class="space-y-4">
-      <!-- Toggle for card/list view -->
-      <div v-if="_flow != undefined" class="flex justify-end">
-        <NeToggle v-model="showCardView" label="Card view" />
-      </div>
-
-      <!-- List view -->
-      <div v-if="_flow != undefined && !showCardView">
+      <div v-if="_flow != undefined">
         <div v-for="entry in facts" :key="entry.title" class="mb-6">
           <h1 class="pb-2 text-xl">{{ entry.title }}</h1>
           <ul v-if="isStringArray(entry.facts)">
@@ -345,25 +338,10 @@ function isStringArray(facts: Fact[] | string[]): facts is string[] {
         </div>
       </div>
 
-      <!-- Card view -->
-      <div v-if="_flow != undefined && showCardView" class="gap-4 sm:grid sm:grid-cols-2">
-        <NeCard v-for="entry in facts" :key="entry.title">
-          <template #title>{{ entry.title }}</template>
-          <ul v-if="isStringArray(entry.facts)">
-            <li v-for="(item, index) in entry.facts" :key="index" class="list-inside list-disc">
-              {{ item }}
-            </li>
-          </ul>
-          <dl v-else class="*:sm:grid *:sm:grid-cols-2 *:sm:gap-4">
-            <div v-for="fact in entry.facts" :key="fact.label">
-              <dt>{{ fact.label }}</dt>
-              <dd>{{ fact.value }}</dd>
-            </div>
-          </dl>
-        </NeCard>
-      </div>
-
       <AdvancedSettingsDropdown>
+        <template #title>
+          {{ t('standalone.flows.raw_data') }}
+        </template>
         <pre class="col-span-full overflow-auto rounded-md bg-gray-50 p-4 text-sm dark:bg-gray-900">
         <code>{{ JSON.stringify(_flow, null, 2) }}</code>
       </pre>
diff --git a/src/components/standalone/monitoring/flows/FlowTableRow.vue b/src/components/standalone/monitoring/flows/FlowTableRow.vue
index 64cdc078c..9af10202a 100644
--- a/src/components/standalone/monitoring/flows/FlowTableRow.vue
+++ b/src/components/standalone/monitoring/flows/FlowTableRow.vue
@@ -50,9 +50,15 @@ const badges = computed<Badge[]>(() => extractBadges(item))
 const sourceIp = computed<string>(() =>
   item.flow.local_origin ? item.flow.local_ip : item.flow.other_ip
 )
+const sourcePort = computed<number>(() =>
+  item.flow.local_origin ? item.flow.local_port : item.flow.other_port
+)
 const destinationIp = computed<string>(() =>
   item.flow.local_origin ? item.flow.other_ip : item.flow.local_ip
 )
+const destinationPort = computed<number>(() =>
+  item.flow.local_origin ? item.flow.other_port : item.flow.local_port
+)
 
 function formatRate(rate: number): string {
   return kbpsFormat((rate * 8) / 1000)
@@ -73,7 +79,7 @@ function formatRate(rate: number): string {
       </span>
     </NeTableCell>
     <NeTableCell :data-label="t('standalone.flows.source')">
-      {{ sourceIp }}
+      {{ sourceIp }}:{{ sourcePort }}
     </NeTableCell>
     <NeTableCell :data-label="t('standalone.flows.destination')">
       <NeTooltip
@@ -81,24 +87,17 @@ function formatRate(rate: number): string {
         trigger-event="mouseenter click"
       >
         <template #content>
-          <p>Destination IP: {{ destinationIp }}</p>
+          <p>{{ t('standalone.flows.destination_ip') }}Destination IP: {{ destinationIp }}</p>
+          <p>{{ t('standalone.flows.destination_port') }} :{{ destinationPort }}</p>
           <p v-if="item.flow.host_server_name != undefined">
-            Destination DNS: {{ item.flow.host_server_name }}
+            {{ t('standalone.flows.destination_dns')}} : {{ item.flow.host_server_name }}
           </p>
         </template>
         <template #trigger>
-          {{ item.flow.dns_host_name ?? item.flow.host_server_name }}
+          {{ item.flow.dns_host_name ?? item.flow.host_server_name }}:{{ destinationPort }}
         </template>
       </NeTooltip>
-      <template v-else>
-        {{ destinationIp }}
-      </template>
-    </NeTableCell>
-    <NeTableCell :data-label="t('standalone.flows.duration')">
-      {{ flowAge }}
-    </NeTableCell>
-    <NeTableCell :data-label="t('standalone.flows.last_seen_at')">
-      {{ new Date(item.flow.last_seen_at).toLocaleTimeString() }}
+      <template v-else> {{ destinationIp }}:{{ destinationPort }} </template>
     </NeTableCell>
     <NeTableCell :data-label="t('standalone.flows.download')">
       <div class="flex items-center gap-2">
@@ -114,6 +113,12 @@ function formatRate(rate: number): string {
         <span v-else>{{ formatRate(item.flow.other_rate) }}</span>
       </div>
     </NeTableCell>
+    <NeTableCell :data-label="t('standalone.flows.duration')">
+      {{ flowAge }}
+    </NeTableCell>
+    <NeTableCell :data-label="t('standalone.flows.last_seen_at')">
+      {{ new Date(item.flow.last_seen_at).toLocaleTimeString() }}
+    </NeTableCell>
     <NeTableCell :data-label="t('standalone.flows.more_info')">
       <div class="flex items-start">
         <NeButton kind="tertiary" @click="$emit('show', item)">
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 846ea9d47..349e988ce 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -2386,6 +2386,7 @@
       "source_port": "Source port",
       "source_mac": "Source MAC",
       "destination_ip": "Destination IP",
+      "destination_dns": "Destination DNS",
       "destination_port": "Destination port",
       "destination_mac": "Destination MAC",
       "traffic_inspection_details": "Traffic Inspection Details",
@@ -2409,8 +2410,6 @@
       "no_flows_found_description": "No flows found for the current filters. Try changing the search filters or wait for new connections to be established.",
       "scanning": "Scanning",
       "scanning_description": "The flow is currently being analyzed. Additional insights will be available once the scan completes.",
-      "risky": "Risky",
-      "risky_description": "The flow is considered risky and may contain malicious traffic.",
       "risks_detected": "Risks detected",
       "outgoing": "Outgoing",
       "outgoing_description": "The connection has been initiated from local networks to the internet",
@@ -2425,7 +2424,8 @@
       "persistence_after_expiration": "Flows persistence after expiration",
       "persistence_after_expiration_description": "Keep flow information available for a short period after the flow has ended. This allows to view information about recently ended flows, which can be useful to investigate connections that are established and closed in a short time frame.",
       "daemon_not_running": "Flows daemon is enabled but not running",
-      "daemon_not_running_description": "If you just enabled the daemon, commit changes and wait a few seconds for the daemon to start. If the problem persists, check the system logs for errors related to the flows daemon."
+      "daemon_not_running_description": "If you just enabled the daemon, commit changes and wait a few seconds for the daemon to start. If the problem persists, check the system logs for errors related to the flows daemon.",
+      "raw_data": "Raw data"
     },
     "ping_latency_monitor": {
       "title": "Ping latency monitor",

From dcb2127a3e836f486286a7a099423a08814f7478 Mon Sep 17 00:00:00 2001
From: Tommaso Bailetti <tommaso.bailetti@nethesis.it>
Date: Mon, 23 Feb 2026 13:57:10 +0100
Subject: [PATCH 14/20] added clear filters button

---
 .../standalone/monitoring/FlowsTable.vue      | 20 +++++++++++++++++--
 .../monitoring/flows/FlowDetail.vue           |  8 ++++----
 .../monitoring/flows/FlowTableRow.vue         |  2 +-
 3 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/components/standalone/monitoring/FlowsTable.vue b/src/components/standalone/monitoring/FlowsTable.vue
index 850d45fca..e572e0dd3 100644
--- a/src/components/standalone/monitoring/FlowsTable.vue
+++ b/src/components/standalone/monitoring/FlowsTable.vue
@@ -149,7 +149,8 @@ import {
   getAxiosErrorMessage,
   NeEmptyState,
   NeTableCell,
-  NeTableRow
+  NeTableRow,
+  NeButton
 } from '@nethesis/vue-components'
 import FlowTableRow from '@/components/standalone/monitoring/flows/FlowTableRow.vue'
 import { useRouteQuery } from '@vueuse/router'
@@ -373,6 +374,14 @@ const onSort = (payload: SortEvent) => {
   sortKey.value = payload.key as SortableKeys
   sortDescending.value = payload.descending
 }
+
+function resetFilters() {
+  query.value = ''
+  applicationsFilter.value = []
+  protocolsFilter.value = []
+  sourceFilter.value = []
+  destinationFilter.value = []
+}
 </script>
 
 <template>
@@ -446,6 +455,9 @@ const onSort = (payload: SortEvent) => {
             kind="checkbox"
             show-options-filter
           />
+          <NeButton kind="tertiary" @click="resetFilters">
+            {{ t('common.clear_filters') }}
+          </NeButton>
         </div>
         <div class="space-y-2">
           <NeDropdownFilter
@@ -521,7 +533,11 @@ const onSort = (payload: SortEvent) => {
               :description="t('standalone.flows.no_flows_found_description')"
               :icon="faTable"
               :title="t('standalone.flows.no_flows_found')"
-            />
+            >
+              <NeButton @click="resetFilters">
+                {{ t('common.clear_filters') }}
+              </NeButton>
+            </NeEmptyState>
           </NeTableCell>
         </NeTableRow>
       </NeTableBody>
diff --git a/src/components/standalone/monitoring/flows/FlowDetail.vue b/src/components/standalone/monitoring/flows/FlowDetail.vue
index 32577470f..f7f7ca3f9 100644
--- a/src/components/standalone/monitoring/flows/FlowDetail.vue
+++ b/src/components/standalone/monitoring/flows/FlowDetail.vue
@@ -312,10 +312,10 @@ function isStringArray(facts: Fact[] | string[]): facts is string[] {
     @close="$emit('close')"
     @primary-click="$emit('close')"
   >
-    <div class="space-y-4">
-      <div v-if="_flow != undefined">
-        <div v-for="entry in facts" :key="entry.title" class="mb-6">
-          <h1 class="pb-2 text-xl">{{ entry.title }}</h1>
+    <div class="space-y-6">
+      <div v-if="_flow != undefined" class="space-y-8">
+        <div v-for="entry in facts" :key="entry.title">
+          <h1 class="pb-2">{{ entry.title }}</h1>
           <ul v-if="isStringArray(entry.facts)">
             <li
               v-for="(item, index) in entry.facts"
diff --git a/src/components/standalone/monitoring/flows/FlowTableRow.vue b/src/components/standalone/monitoring/flows/FlowTableRow.vue
index 9af10202a..7dad91742 100644
--- a/src/components/standalone/monitoring/flows/FlowTableRow.vue
+++ b/src/components/standalone/monitoring/flows/FlowTableRow.vue
@@ -90,7 +90,7 @@ function formatRate(rate: number): string {
           <p>{{ t('standalone.flows.destination_ip') }}Destination IP: {{ destinationIp }}</p>
           <p>{{ t('standalone.flows.destination_port') }} :{{ destinationPort }}</p>
           <p v-if="item.flow.host_server_name != undefined">
-            {{ t('standalone.flows.destination_dns')}} : {{ item.flow.host_server_name }}
+            {{ t('standalone.flows.destination_dns') }} : {{ item.flow.host_server_name }}
           </p>
         </template>
         <template #trigger>

From 9adfbf94bea7dd60a577e564ec44b340838e6e71 Mon Sep 17 00:00:00 2001
From: Tommaso Bailetti <tommaso.bailetti@nethesis.it>
Date: Mon, 23 Feb 2026 14:45:43 +0100
Subject: [PATCH 15/20] added back loading

---
 .../standalone/monitoring/FlowsTable.vue      |  8 ++---
 .../monitoring/flows/RefreshProgressBar.vue   | 29 +++++++++++++++++++
 2 files changed, 32 insertions(+), 5 deletions(-)
 create mode 100644 src/components/standalone/monitoring/flows/RefreshProgressBar.vue

diff --git a/src/components/standalone/monitoring/FlowsTable.vue b/src/components/standalone/monitoring/FlowsTable.vue
index e572e0dd3..8ce7888f4 100644
--- a/src/components/standalone/monitoring/FlowsTable.vue
+++ b/src/components/standalone/monitoring/FlowsTable.vue
@@ -153,6 +153,7 @@ import {
   NeButton
 } from '@nethesis/vue-components'
 import FlowTableRow from '@/components/standalone/monitoring/flows/FlowTableRow.vue'
+import RefreshProgressBar from '@/components/standalone/monitoring/flows/RefreshProgressBar.vue'
 import { useRouteQuery } from '@vueuse/router'
 import FlowDetail from '@/components/standalone/monitoring/flows/FlowDetail.vue'
 import { faTable } from '@fortawesome/free-solid-svg-icons'
@@ -270,7 +271,7 @@ watch(queryDebounced, () => {
   }
 })
 
-const { data, isError, error, isPending } = useQuery({
+const { data, isError, error, isPending, dataUpdatedAt } = useQuery({
   queryKey: [
     'flow',
     'list',
@@ -471,10 +472,7 @@ function resetFilters() {
             :options="refreshIntervalOptions"
             kind="radio"
           />
-          <!--
-          FIXME: add back progress bar when API supports it
-          <NeProgressBar :progress="progressBar" color="indigo" size="sm" />
-          -->
+          <RefreshProgressBar :data-updated-at="dataUpdatedAt" :interval="refreshIntervalsValue" />
         </div>
       </div>
     </div>
diff --git a/src/components/standalone/monitoring/flows/RefreshProgressBar.vue b/src/components/standalone/monitoring/flows/RefreshProgressBar.vue
new file mode 100644
index 000000000..c136defcb
--- /dev/null
+++ b/src/components/standalone/monitoring/flows/RefreshProgressBar.vue
@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { useIntervalFn, useNow } from '@vueuse/core'
+import { NeProgressBar } from '@nethesis/vue-components'
+
+const { dataUpdatedAt, interval } = defineProps<{
+  dataUpdatedAt: number
+  interval: number | false
+}>()
+
+const now = useNow({
+  scheduler: (cb) => useIntervalFn(cb, 1000)
+})
+
+const progress = computed(() => {
+  if (interval == false) {
+    return 0
+  }
+  const elapsed = now.value.getTime() - dataUpdatedAt
+  const progressValue = (elapsed / interval) * 100
+  return Math.max(0, Math.min(progressValue, 100))
+})
+</script>
+
+<template>
+  <div v-if="interval != false">
+    <NeProgressBar :progress="progress" color="indigo" size="sm" />
+  </div>
+</template>

From 850319fe79dff6bfc01ffe0f4c29dea47f6d1377 Mon Sep 17 00:00:00 2001
From: Tommaso Bailetti <tommaso.bailetti@nethesis.it>
Date: Mon, 23 Feb 2026 15:07:18 +0100
Subject: [PATCH 16/20] updated how configuring the daemon works

---
 .../standalone/monitoring/FlowSection.vue       | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/standalone/monitoring/FlowSection.vue b/src/components/standalone/monitoring/FlowSection.vue
index 71f70b76b..546ed16ae 100644
--- a/src/components/standalone/monitoring/FlowSection.vue
+++ b/src/components/standalone/monitoring/FlowSection.vue
@@ -24,13 +24,20 @@ type FlowDaemonResponse = {
   }
 }
 
+const configuringDaemon = ref(false)
 const { isSuccess, isError, isPending, data, error } = useQuery({
   queryKey: ['flow', 'config'],
   queryFn: async () => ubusCall<FlowDaemonResponse>('ns.flows', 'get-configuration'),
-  select: (data) => data.data
+  select: (data) => data.data,
+  refetchInterval: () => {
+    if (configuringDaemon.value) {
+      return false
+    } else {
+      return 5000
+    }
+  }
 })
 
-const configuringDaemon = ref(false)
 const enabled = ref(false)
 const expiredPersistence = ref('')
 watch(data, (newData) => {
@@ -72,6 +79,12 @@ watch(data, (newData) => {
         kind="info"
         @primary-click="configuringDaemon = true"
       />
+      <NeInlineNotification
+        v-else-if="!data!.status"
+        :description="t('standalone.flows.daemon_not_running_description')"
+        :title="t('standalone.flows.daemon_not_running')"
+        kind="warning"
+      />
       <FlowsTable v-else />
     </template>
     <FlowConfigureDrawer

From 26c0c10f5489647ea9e541f6cab59c4efecc2cf0 Mon Sep 17 00:00:00 2001
From: Tommaso Bailetti <tommaso.bailetti@nethesis.it>
Date: Mon, 23 Feb 2026 16:51:54 +0100
Subject: [PATCH 17/20] fixed typo

---
 src/components/standalone/monitoring/flows/FlowTableRow.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/standalone/monitoring/flows/FlowTableRow.vue b/src/components/standalone/monitoring/flows/FlowTableRow.vue
index 7dad91742..250231ad1 100644
--- a/src/components/standalone/monitoring/flows/FlowTableRow.vue
+++ b/src/components/standalone/monitoring/flows/FlowTableRow.vue
@@ -87,7 +87,7 @@ function formatRate(rate: number): string {
         trigger-event="mouseenter click"
       >
         <template #content>
-          <p>{{ t('standalone.flows.destination_ip') }}Destination IP: {{ destinationIp }}</p>
+          <p>{{ t('standalone.flows.destination_ip') }}: {{ destinationIp }}</p>
           <p>{{ t('standalone.flows.destination_port') }} :{{ destinationPort }}</p>
           <p v-if="item.flow.host_server_name != undefined">
             {{ t('standalone.flows.destination_dns') }} : {{ item.flow.host_server_name }}

From 69784246e32619e44ed49f4354f50fb66d25c6e4 Mon Sep 17 00:00:00 2001
From: Tommaso Bailetti <tommaso.bailetti@nethesis.it>
Date: Wed, 25 Feb 2026 16:07:48 +0100
Subject: [PATCH 18/20] using tags from backend

---
 .../standalone/monitoring/FlowsTable.vue      | 151 +++++++++++-------
 1 file changed, 94 insertions(+), 57 deletions(-)

diff --git a/src/components/standalone/monitoring/FlowsTable.vue b/src/components/standalone/monitoring/FlowsTable.vue
index 8ce7888f4..09eb5f612 100644
--- a/src/components/standalone/monitoring/FlowsTable.vue
+++ b/src/components/standalone/monitoring/FlowsTable.vue
@@ -4,6 +4,7 @@ import {
   faArrowUp,
   faBroadcastTower,
   faMagnifyingGlass,
+  faQuestion,
   faUsers
 } from '@fortawesome/free-solid-svg-icons'
 import type { IconDefinition } from '@fortawesome/fontawesome-svg-core'
@@ -20,6 +21,7 @@ type FlowListResponse = {
       protocols: string[]
       sources: string[]
       destinations: string[]
+      tags: string[]
     }
   }
 }
@@ -29,6 +31,7 @@ export type FlowEvent = {
   interface: string
   internal: boolean
   flow: Flow
+  tags: string[]
 }
 
 export type Flow = {
@@ -76,59 +79,76 @@ export type Badge = {
   customClasses: string[]
 }
 
-export function extractBadges(entry: FlowEvent): Badge[] {
-  const badges: Badge[] = []
-  if (!entry.flow.local_origin && entry.flow.other_type == 'remote') {
-    badges.push({
-      id: 'remote',
-      text: 'standalone.flows.remote',
-      icon: faArrowDown,
-      customClasses: ['bg-rose-100', 'text-rose-800', 'dark:bg-rose-700', 'dark:text-rose-100'],
-      content: 'standalone.flows.remote_description'
-    })
-  }
-  if (entry.flow.local_origin && entry.flow.other_type == 'remote') {
-    badges.push({
-      id: 'outgoing',
-      text: 'standalone.flows.outgoing',
-      icon: faArrowUp,
-      customClasses: ['bg-green-100', 'text-green-800', 'dark:bg-green-700', 'dark:text-green-100'],
-      content: 'standalone.flows.outgoing_description'
-    })
-  }
-  if (entry.flow.other_type == 'local') {
-    badges.push({
-      id: 'local',
-      text: 'standalone.flows.internal',
-      icon: faUsers,
-      customClasses: ['bg-blue-100', 'text-blue-800', 'dark:bg-blue-700', 'dark:text-blue-100'],
-      content: 'standalone.flows.internal_description'
-    })
-  }
-  if (entry.flow.other_type == 'broadcast') {
-    badges.push({
-      id: 'broadcast',
-      text: 'standalone.flows.broadcast',
-      icon: faBroadcastTower,
-      customClasses: [
-        'bg-purple-100',
-        'text-purple-800',
-        'dark:bg-purple-700',
-        'dark:text-purple-100'
-      ],
-      content: 'standalone.flows.broadcast_description'
-    })
-  }
-  if (entry.type == 'flow') {
-    badges.push({
-      id: 'scanning',
-      text: 'standalone.flows.scanning',
-      icon: faMagnifyingGlass,
-      customClasses: ['bg-gray-100', 'text-gray-800', 'dark:bg-gray-700', 'dark:text-gray-100'],
-      content: 'standalone.flows.scanning_description'
-    })
+export function matchBadge(tag: string): Badge {
+  switch (tag) {
+    case 'remote': {
+      return {
+        id: 'remote',
+        text: 'standalone.flows.remote',
+        icon: faArrowDown,
+        customClasses: ['bg-rose-100', 'text-rose-800', 'dark:bg-rose-700', 'dark:text-rose-100'],
+        content: 'standalone.flows.remote_description'
+      }
+    }
+    case 'outgoing': {
+      return {
+        id: 'outgoing',
+        text: 'standalone.flows.outgoing',
+        icon: faArrowUp,
+        customClasses: [
+          'bg-green-100',
+          'text-green-800',
+          'dark:bg-green-700',
+          'dark:text-green-100'
+        ],
+        content: 'standalone.flows.outgoing_description'
+      }
+    }
+    case 'internal': {
+      return {
+        id: 'local',
+        text: 'standalone.flows.internal',
+        icon: faUsers,
+        customClasses: ['bg-blue-100', 'text-blue-800', 'dark:bg-blue-700', 'dark:text-blue-100'],
+        content: 'standalone.flows.internal_description'
+      }
+    }
+    case 'broadcast': {
+      return {
+        id: 'broadcast',
+        text: 'standalone.flows.broadcast',
+        icon: faBroadcastTower,
+        customClasses: [
+          'bg-purple-100',
+          'text-purple-800',
+          'dark:bg-purple-700',
+          'dark:text-purple-100'
+        ],
+        content: 'standalone.flows.broadcast_description'
+      }
+    }
+    case 'scanning': {
+      return {
+        id: 'scanning',
+        text: 'standalone.flows.scanning',
+        icon: faMagnifyingGlass,
+        customClasses: ['bg-gray-100', 'text-gray-800', 'dark:bg-gray-700', 'dark:text-gray-100'],
+        content: 'standalone.flows.scanning_description'
+      }
+    }
+    default: {
+      return {
+        id: tag,
+        text: tag,
+        icon: faQuestion,
+        customClasses: ['bg-gray-100', 'text-gray-800', 'dark:bg-gray-700', 'dark:text-gray-100']
+      }
+    }
   }
-  return badges
+}
+
+export function extractBadges(entry: FlowEvent): Badge[] {
+  return entry.tags.map((tag) => matchBadge(tag))
 }
 </script>
 
@@ -176,7 +196,12 @@ const protocolsFilter = useRouteQuery<string, string[]>('protocols', '', {
     set: (val) => val.join(',')
   }
 })
-
+const tagsFilter = useRouteQuery<string, string[]>('tags', '', {
+  transform: {
+    get: (val) => (val ? val.split(',') : []),
+    set: (val) => val.join(',')
+  }
+})
 const sourceFilter = useRouteQuery<string, string[]>('source', '', {
   transform: {
     get: (val) => (val ? val.split(',') : []),
@@ -282,6 +307,7 @@ const { data, isError, error, isPending, dataUpdatedAt } = useQuery({
     currentPage,
     applicationsFilter,
     protocolsFilter,
+    tagsFilter,
     sourceFilter,
     destinationFilter
   ],
@@ -295,7 +321,8 @@ const { data, isError, error, isPending, dataUpdatedAt } = useQuery({
       application: applicationsFilter.value,
       protocol: protocolsFilter.value,
       source: sourceFilter.value,
-      destination: destinationFilter.value
+      destination: destinationFilter.value,
+      tag: tagsFilter.value
     }),
   placeholderData: keepPreviousData,
   refetchInterval: refreshIntervalsValue,
@@ -349,8 +376,16 @@ const protocols = computed<FilterOption[]>(() => {
   )
 })
 
-const badges = computed<FilterOption[]>(() => {
-  return []
+const tags = computed<FilterOption[]>(() => {
+  return (
+    data.value?.filters.tags.map((tag) => {
+      const badge = matchBadge(tag)
+      return {
+        id: badge.id,
+        label: t(badge.text)
+      }
+    }) ?? []
+  )
 })
 
 const sourceIps = computed<FilterOption[]>(() => {
@@ -380,6 +415,7 @@ function resetFilters() {
   query.value = ''
   applicationsFilter.value = []
   protocolsFilter.value = []
+  tagsFilter.value = []
   sourceFilter.value = []
   destinationFilter.value = []
 }
@@ -422,13 +458,14 @@ function resetFilters() {
             show-options-filter
           />
           <NeDropdownFilter
+            v-model="tagsFilter"
             :clear-filter-label="t('ne_dropdown_filter.clear_selection')"
             :clear-search-label="t('ne_dropdown_filter.clear_search')"
             :label="t('standalone.flows.tags')"
             :more-options-hidden-label="t('ne_dropdown_filter.more_options_hidden')"
             :no-options-label="t('ne_dropdown_filter.no_options')"
             :open-menu-aria-label="t('ne_dropdown_filter.open_filter')"
-            :options="badges"
+            :options="tags"
             kind="checkbox"
             show-options-filter
           />

From ca2b75889af1debcf41e7532d963abc4f94515ed Mon Sep 17 00:00:00 2001
From: Tommaso Bailetti <tommaso.bailetti@nethesis.it>
Date: Mon, 2 Mar 2026 14:57:16 +0100
Subject: [PATCH 19/20] added additional info coming from netifyd server

---
 .../standalone/monitoring/FlowSection.vue     |   4 +-
 .../standalone/monitoring/FlowsTable.vue      |  63 ++++++-----
 .../monitoring/flows/FlowDetail.vue           |  15 +--
 .../monitoring/flows/FlowTableRow.vue         |  44 ++++----
 src/lib/standalone/ndpiRisks.ts               |  81 --------------
 src/stores/standalone/netifyd.ts              | 104 ++++++++++++++++++
 6 files changed, 166 insertions(+), 145 deletions(-)
 delete mode 100644 src/lib/standalone/ndpiRisks.ts
 create mode 100644 src/stores/standalone/netifyd.ts

diff --git a/src/components/standalone/monitoring/FlowSection.vue b/src/components/standalone/monitoring/FlowSection.vue
index 546ed16ae..d9a1f8fe8 100644
--- a/src/components/standalone/monitoring/FlowSection.vue
+++ b/src/components/standalone/monitoring/FlowSection.vue
@@ -25,12 +25,13 @@ type FlowDaemonResponse = {
 }
 
 const configuringDaemon = ref(false)
+const daemonRunning = ref(false)
 const { isSuccess, isError, isPending, data, error } = useQuery({
   queryKey: ['flow', 'config'],
   queryFn: async () => ubusCall<FlowDaemonResponse>('ns.flows', 'get-configuration'),
   select: (data) => data.data,
   refetchInterval: () => {
-    if (configuringDaemon.value) {
+    if (configuringDaemon.value || daemonRunning.value) {
       return false
     } else {
       return 5000
@@ -42,6 +43,7 @@ const enabled = ref(false)
 const expiredPersistence = ref('')
 watch(data, (newData) => {
   if (newData != undefined) {
+    daemonRunning.value = newData.status
     enabled.value = newData.configuration.enabled
     expiredPersistence.value = newData.configuration.expired_persistence
   }
diff --git a/src/components/standalone/monitoring/FlowsTable.vue b/src/components/standalone/monitoring/FlowsTable.vue
index 09eb5f612..9067028be 100644
--- a/src/components/standalone/monitoring/FlowsTable.vue
+++ b/src/components/standalone/monitoring/FlowsTable.vue
@@ -17,8 +17,14 @@ type FlowListResponse = {
     last_page: number
     per_page: number
     filters: {
-      applications: string[]
-      protocols: string[]
+      applications: {
+        id: number
+        name: string
+      }[]
+      protocols: {
+        id: number
+        name: string
+      }[]
       sources: string[]
       destinations: string[]
       tags: string[]
@@ -38,7 +44,9 @@ export type Flow = {
   conntrack: {
     id: string
   }
+  detected_application: number
   detected_application_name: string
+  detected_protocol: number
   detected_protocol_name: string
   detection_guessed?: boolean
   detection_packets?: number
@@ -180,9 +188,11 @@ import { faTable } from '@fortawesome/free-solid-svg-icons'
 import { useQuery, useQueryClient, keepPreviousData } from '@tanstack/vue-query'
 import { ubusCall } from '@/lib/standalone/ubus.ts'
 import { refDebounced } from '@vueuse/core'
+import { useNetifydStore } from '@/stores/standalone/netifyd.ts'
 
 const { t } = useI18n()
 const queryClient = useQueryClient()
+const netifydStore = useNetifydStore()
 
 const applicationsFilter = useRouteQuery<string, string[]>('application', '', {
   transform: {
@@ -326,7 +336,9 @@ const { data, isError, error, isPending, dataUpdatedAt } = useQuery({
     }),
   placeholderData: keepPreviousData,
   refetchInterval: refreshIntervalsValue,
-  select: (data) => data.data
+  select: (data) => data.data,
+  refetchOnReconnect: () => refreshIntervalsValue.value != false,
+  refetchOnWindowFocus: () => refreshIntervalsValue.value != false
 })
 
 watch(data, () => {
@@ -344,36 +356,27 @@ watch(refreshIntervalSelection, (val) => {
 })
 
 const applications = computed<FilterOption[]>(() => {
-  return (
-    data.value?.filters.applications.map((app) => {
-      let label = app
-      // Remove netify. prefix if present
-      if (label.startsWith('netify.')) {
-        label = label.substring(7)
-      }
-      // Replace dashes with spaces
-      label = label.replace(/-/g, ' ')
-      // Capitalize first character of each word
-      label = label
-        .split(' ')
-        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-        .join(' ')
-
-      return {
-        id: app,
-        label: label
-      }
-    }) ?? []
-  )
+  if (data.value == undefined) {
+    return []
+  }
+  return data.value.filters.applications.map((application) => {
+    return {
+      id: application.name,
+      label: netifydStore.getApplicationNameById(application.id, application.name)
+    }
+  })
 })
 
 const protocols = computed<FilterOption[]>(() => {
-  return (
-    data.value?.filters.protocols.map((protocol) => ({
-      id: protocol,
-      label: protocol
-    })) ?? []
-  )
+  if (data.value == undefined) {
+    return []
+  }
+  return data.value.filters.protocols.map((protocol) => {
+    return {
+      id: protocol.name,
+      label: netifydStore.getProtocolNameById(protocol.id, protocol.name)
+    }
+  })
 })
 
 const tags = computed<FilterOption[]>(() => {
diff --git a/src/components/standalone/monitoring/flows/FlowDetail.vue b/src/components/standalone/monitoring/flows/FlowDetail.vue
index f7f7ca3f9..3f039855f 100644
--- a/src/components/standalone/monitoring/flows/FlowDetail.vue
+++ b/src/components/standalone/monitoring/flows/FlowDetail.vue
@@ -4,10 +4,11 @@ import type { FlowEvent } from '@/components/standalone/monitoring/FlowsTable.vu
 import { useI18n } from 'vue-i18n'
 import { computed, ref, watch } from 'vue'
 import { formatDistance } from 'date-fns'
-import { getNdpiRiskDescription } from '@/lib/standalone/ndpiRisks.ts'
 import AdvancedSettingsDropdown from '@/components/AdvancedSettingsDropdown.vue'
+import { useNetifydStore } from '@/stores/standalone/netifyd.ts'
 
 const { t } = useI18n()
+const netifydStore = useNetifydStore()
 
 defineEmits<{
   close: []
@@ -124,11 +125,11 @@ const facts = computed<FactsGroup[]>(() => {
     facts: [
       {
         label: t('standalone.flows.protocol'),
-        value: _flow.value.flow.detected_protocol_name
+        value: netifydStore.getProtocolByFlow(_flow.value.flow).label
       },
       {
         label: t('standalone.flows.application'),
-        value: _flow.value.flow.detected_application_name
+        value: netifydStore.getApplicationByFlow(_flow.value.flow).label
       },
       {
         label: t('standalone.flows.packets_analyzed'),
@@ -137,14 +138,6 @@ const facts = computed<FactsGroup[]>(() => {
     ]
   })
 
-  // Risks Detected (conditional)
-  if ((_flow.value.flow.risks.risks?.length ?? 0) > 0) {
-    groups.push({
-      title: t('standalone.flows.risks_detected'),
-      facts: _flow.value.flow.risks.risks?.map((risk) => getNdpiRiskDescription(risk)) ?? []
-    })
-  }
-
   // Flow Info
   groups.push({
     title: t('standalone.flows.flow_info'),
diff --git a/src/components/standalone/monitoring/flows/FlowTableRow.vue b/src/components/standalone/monitoring/flows/FlowTableRow.vue
index 250231ad1..535493fb4 100644
--- a/src/components/standalone/monitoring/flows/FlowTableRow.vue
+++ b/src/components/standalone/monitoring/flows/FlowTableRow.vue
@@ -9,8 +9,14 @@ import { useI18n } from 'vue-i18n'
 import { computed } from 'vue'
 import { differenceInSeconds } from 'date-fns'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { faArrowDown, faArrowUp, faMagnifyingGlassPlus } from '@fortawesome/free-solid-svg-icons'
+import {
+  faArrowDown,
+  faArrowUp,
+  faCircleQuestion,
+  faMagnifyingGlassPlus
+} from '@fortawesome/free-solid-svg-icons'
 import FlowBadge from '@/components/standalone/monitoring/flows/FlowBadge.vue'
+import { type Application, type Protocol, useNetifydStore } from '@/stores/standalone/netifyd.ts'
 
 const { item } = defineProps<{
   item: FlowEvent
@@ -21,6 +27,7 @@ defineEmits<{
 }>()
 
 const { t } = useI18n()
+const netifydStore = useNetifydStore()
 
 const flowAge = computed<string>(() => {
   const totalSeconds = differenceInSeconds(item.flow.last_seen_at, item.flow.first_seen_at)
@@ -30,20 +37,9 @@ const flowAge = computed<string>(() => {
   return [hours, minutes, seconds].map((value) => String(value).padStart(2, '0')).join(':')
 })
 
-const applicationName = computed<string>(() => {
-  let name = item.flow.detected_application_name
-  // Remove netify. prefix if present
-  if (name.startsWith('netify.')) {
-    name = name.substring(7)
-  }
-  // Replace dashes with spaces
-  name = name.replace(/-/g, ' ')
-  // Capitalize first character of each word
-  return name
-    .split(' ')
-    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-    .join(' ')
-})
+const appDetails = computed<Application>(() => netifydStore.getApplicationByFlow(item.flow))
+
+const protocolDetails = computed<Protocol>(() => netifydStore.getProtocolByFlow(item.flow))
 
 const badges = computed<Badge[]>(() => extractBadges(item))
 
@@ -68,10 +64,14 @@ function formatRate(rate: number): string {
 <template>
   <NeTableRow>
     <NeTableCell :data-label="t('standalone.flows.application')">
-      {{ applicationName }}
+      <span class="flex items-center gap-4">
+        <img v-if="appDetails.icon" :src="appDetails.icon" class="size-6" :alt="appDetails.label" />
+        <FontAwesomeIcon v-else :icon="faCircleQuestion" class="size-6" />
+        <span>{{ appDetails.label }}</span>
+      </span>
     </NeTableCell>
     <NeTableCell :data-label="t('standalone.flows.protocol')">
-      {{ item.flow.detected_protocol_name }}
+      {{ protocolDetails.label }}
     </NeTableCell>
     <NeTableCell :data-label="t('standalone.flows.tags')">
       <span class="flex flex-wrap gap-2">
@@ -83,18 +83,18 @@ function formatRate(rate: number): string {
     </NeTableCell>
     <NeTableCell :data-label="t('standalone.flows.destination')">
       <NeTooltip
-        v-if="item.flow.dns_host_name != undefined || item.flow.host_server_name != undefined"
+        v-if="item.flow.host_server_name != undefined"
         trigger-event="mouseenter click"
       >
         <template #content>
           <p>{{ t('standalone.flows.destination_ip') }}: {{ destinationIp }}</p>
-          <p>{{ t('standalone.flows.destination_port') }} :{{ destinationPort }}</p>
-          <p v-if="item.flow.host_server_name != undefined">
-            {{ t('standalone.flows.destination_dns') }} : {{ item.flow.host_server_name }}
+          <p>{{ t('standalone.flows.destination_port') }}: {{ destinationPort }}</p>
+          <p v-if="item.flow.dns_host_name != undefined">
+            {{ t('standalone.flows.destination_dns') }} : {{ item.flow.dns_host_name }}
           </p>
         </template>
         <template #trigger>
-          {{ item.flow.dns_host_name ?? item.flow.host_server_name }}:{{ destinationPort }}
+          {{ item.flow.host_server_name }}:{{ destinationPort }}
         </template>
       </NeTooltip>
       <template v-else> {{ destinationIp }}:{{ destinationPort }} </template>
diff --git a/src/lib/standalone/ndpiRisks.ts b/src/lib/standalone/ndpiRisks.ts
deleted file mode 100644
index cb5f7dbfc..000000000
--- a/src/lib/standalone/ndpiRisks.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-/**
- * NDPI Risk Categorization
- *
- * This mapping is based on the official nDPI risk categorization.
- * Each risk code corresponds to a specific security or privacy concern that nDPI can detect.
- *
- * Reference: https://github.com/ntop/nDPI/blob/dev/src/include/ndpi_typedefs.h
- */
-
-export const NDPI_RISKS: Record<number, string> = {
-  0: 'Unknown Traffic', // NDPI_NO_RISK
-  1: 'Unsafe Protocol', // NDPI_URL_POSSIBLE_XSS
-  2: 'Possible XSS Attack', // NDPI_URL_POSSIBLE_SQL_INJECTION
-  3: 'Possible SQL Injection', // NDPI_URL_POSSIBLE_RCE_INJECTION
-  4: 'Binary Application Transfer', // NDPI_BINARY_APPLICATION_TRANSFER
-  5: 'Known Protocol on Non-Standard Port', // NDPI_KNOWN_PROTOCOL_ON_NON_STANDARD_PORT
-  6: 'TLS (Self) Selfsigned Certificate', // NDPI_TLS_SELFSIGNED_CERTIFICATE
-  7: 'TLS Obsolete Version (1.0 or older)', // NDPI_TLS_OBSOLETE_VERSION
-  8: 'TLS Weak Cipher', // NDPI_TLS_WEAK_CIPHER
-  9: 'TLS Certificate Expired', // NDPI_TLS_CERTIFICATE_EXPIRED
-  10: 'TLS Certificate Mismatch', // NDPI_TLS_CERTIFICATE_MISMATCH
-  11: 'HTTP Suspicious User-Agent', // NDPI_HTTP_SUSPICIOUS_USER_AGENT
-  12: 'HTTP Numeric IP Address', // NDPI_HTTP_NUMERIC_IP_ADDRESS
-  13: 'HTTP Suspicious URL', // NDPI_HTTP_SUSPICIOUS_URL
-  14: 'HTTP Suspicious Header', // NDPI_HTTP_SUSPICIOUS_HEADER
-  15: 'TLS Not Carrying HTTPS', // NDPI_TLS_NOT_CARRYING_HTTPS
-  16: 'Suspicious DGA Domain', // NDPI_SUSPICIOUS_DGA_DOMAIN
-  17: 'Malformed Packet', // NDPI_MALFORMED_PACKET
-  18: 'SSH Obsolete Client/Server Version', // NDPI_SSH_OBSOLETE_CLIENT_VERSION_OR_CIPHER
-  19: 'SMB Insecure Version', // NDPI_SMB_INSECURE_VERSION
-  20: 'TLS Suspicious ESNI Usage', // NDPI_TLS_SUSPICIOUS_ESNI_USAGE
-  21: 'Unsafe Protocol', // NDPI_UNSAFE_PROTOCOL
-  22: 'DNS Suspicious Traffic', // NDPI_DNS_SUSPICIOUS_TRAFFIC
-  23: 'TLS Missing SNI', // NDPI_TLS_MISSING_SNI
-  24: 'HTTP Suspicious Content', // NDPI_HTTP_SUSPICIOUS_CONTENT
-  25: 'Risky ASN', // NDPI_RISKY_ASN
-  26: 'Risky Domain', // NDPI_RISKY_DOMAIN
-  27: 'Malicious JA3 Fingerprint', // NDPI_MALICIOUS_JA3
-  28: 'Malicious SHA1 Certificate', // NDPI_MALICIOUS_SHA1_CERTIFICATE
-  29: 'Desktop/File Sharing Session', // NDPI_DESKTOP_OR_FILE_SHARING_SESSION
-  30: 'TLS Uncommon ALPN', // NDPI_TLS_UNCOMMON_ALPN
-  31: 'TLS Certificate Validity Too Long', // NDPI_TLS_CERT_VALIDITY_TOO_LONG
-  32: 'TLS Suspicious Extension', // NDPI_TLS_SUSPICIOUS_EXTENSION
-  33: 'TLS Fatal Alert', // NDPI_TLS_FATAL_ALERT
-  34: 'Suspicious Entropy', // NDPI_SUSPICIOUS_ENTROPY
-  35: 'Clear Text Credentials', // NDPI_CLEAR_TEXT_CREDENTIALS
-  36: 'DNS Large Packet', // NDPI_DNS_LARGE_PACKET
-  37: 'DNS Fragmented', // NDPI_DNS_FRAGMENTED
-  38: 'Invalid Characters in DNS Query', // NDPI_INVALID_CHARACTERS
-  39: 'Possible DDoS', // NDPI_POSSIBLE_EXPLOIT
-  40: 'TLS Certificate About to Expire', // NDPI_TLS_CERTIFICATE_ABOUT_TO_EXPIRE
-  41: 'Punycode IDN Domain', // NDPI_PUNYCODE_IDN
-  42: 'Error Code Detected', // NDPI_ERROR_CODE_DETECTED
-  43: 'HTTP Crawler/Bot', // NDPI_HTTP_CRAWLER_BOT
-  44: 'Anonymous Subscriber', // NDPI_ANONYMOUS_SUBSCRIBER
-  45: 'Unidirectional Traffic', // NDPI_UNIDIRECTIONAL_TRAFFIC
-  46: 'HTTP Obsolete Server', // NDPI_HTTP_OBSOLETE_SERVER
-  47: 'Periodic Flow', // NDPI_PERIODIC_FLOW
-  48: 'Minor Issues', // NDPI_MINOR_ISSUES
-  49: 'TCP Issues', // NDPI_TCP_ISSUES
-  50: 'Fully Encrypted Flow', // NDPI_FULLY_ENCRYPTED
-  51: 'TLS ALPN/SNI Mismatch', // NDPI_TLS_ALPN_SNI_MISMATCH
-  52: 'Malware Host Contacted', // NDPI_MALWARE_HOST_CONTACTED
-  53: 'Binary Data Transfer', // NDPI_BINARY_DATA_TRANSFER
-  54: 'Probing Attempt', // NDPI_PROBING_ATTEMPT
-  55: 'Malicious Behavior', // NDPI_MALICIOUS_BEHAVIOR
-  56: 'Possibly Unwanted Application', // NDPI_POSSIBLY_UNWANTED_APPLICATION
-  57: 'Suspicious File Download/Upload', // NDPI_SUSPICIOUS_FILE_DOWNLOAD_UPLOAD
-  58: 'Connection to Non-Standard Port', // NDPI_CONNECTION_TO_NONSTANDARD_PORT
-  59: 'Data Exfiltration', // NDPI_DATA_EXFILTRATION
-  60: 'Uncommon/Suspicious Activity' // NDPI_UNCOMMON_SUSPICIOUS_ACTIVITY
-}
-
-/**
- * Get the description for an NDPI risk code
- * @param riskCode - The NDPI risk code
- * @returns The description of the risk, or 'Unknown Risk' if not found
- */
-export function getNdpiRiskDescription(riskCode: number): string {
-  return NDPI_RISKS[riskCode] || 'Unknown Risk'
-}
diff --git a/src/stores/standalone/netifyd.ts b/src/stores/standalone/netifyd.ts
new file mode 100644
index 000000000..76081b0b1
--- /dev/null
+++ b/src/stores/standalone/netifyd.ts
@@ -0,0 +1,104 @@
+import { defineStore } from 'pinia'
+import { useQuery } from '@tanstack/vue-query'
+import { ubusCall } from '@/lib/standalone/ubus.ts'
+import type { Flow } from '@/components/standalone/monitoring/FlowsTable.vue'
+
+export type Response<T> = {
+  data: {
+    values: T[]
+  }
+}
+
+export type Application = {
+  id: number
+  tag: string
+  label: string
+  icon?: string
+}
+
+export type Protocol = {
+  id: number
+  tag: string
+  label: string
+}
+
+export const useNetifydStore = defineStore('netifyd', () => {
+  const applications = useQuery({
+    queryKey: ['netifyd', 'applications'],
+    queryFn: () => ubusCall<Response<Application>>('ns.dpi', 'list-application-catalog'),
+    select: (data) => data.data.values,
+    initialData: { data: { values: [] } }
+  })
+
+  const protocols = useQuery({
+    queryKey: ['netifyd', 'protocols'],
+    queryFn: () => ubusCall<Response<Application>>('ns.dpi', 'list-protocol-catalog'),
+    select: (data) => data.data.values,
+    initialData: { data: { values: [] } }
+  })
+
+  function getApplicationByFlow(flow: Flow): Application {
+    const app = applications.data.value.find((app) => app.id == flow.detected_application)
+    if (app != undefined) {
+      return app
+    }
+    return {
+      id: flow.detected_application,
+      tag: flow.detected_application_name,
+      label: generateApplicationLabel(flow.detected_application_name)
+    }
+  }
+
+
+  function generateApplicationLabel(applicationName: string): string {
+    let name = applicationName
+    // Remove netify. prefix if present
+    if (name.startsWith('netify.')) {
+      name = name.substring(7)
+    }
+    // Replace dashes with spaces
+    name = name.replace(/-/g, ' ')
+    // Capitalize first character of each word
+    return name
+      .split(' ')
+      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+      .join(' ')
+  }
+
+  function getProtocolByFlow(flow: Flow): Protocol {
+    const proto = protocols.data.value.find((proto) => proto.id == flow.detected_protocol)
+    if (proto != undefined) {
+      return proto
+    }
+    return {
+      id: flow.detected_protocol,
+      tag: flow.detected_protocol_name,
+      label: flow.detected_protocol_name
+    }
+  }
+
+  function getApplicationNameById(id: number, fallback: string): string {
+    const app = applications.data.value.find((app) => app.id == id)
+    if (app != undefined) {
+      return app.label
+    }
+    return generateApplicationLabel(fallback)
+  }
+
+  function getProtocolNameById(id: number, fallback: string): string {
+    const proto = protocols.data.value.find((proto) => proto.id == id)
+    if (proto != undefined) {
+      return proto.label
+    }
+    return fallback
+  }
+
+  return {
+    applications,
+    protocols,
+    getApplicationByFlow,
+    getProtocolByFlow,
+    getApplicationNameById,
+    getProtocolNameById
+  }
+})

From f3bf922a8ad9536c24517ea290ba2d4d0620056a Mon Sep 17 00:00:00 2001
From: Tommaso Bailetti <tommaso.bailetti@nethesis.it>
Date: Mon, 2 Mar 2026 14:57:32 +0100
Subject: [PATCH 20/20] updated labels and sort order

---
 .../monitoring/flows/FlowTableRow.vue         |  9 ++-----
 src/i18n/en.json                              |  5 ++--
 src/stores/standalone/netifyd.ts              |  1 -
 .../monitoring/RealTimeMonitoringView.vue     | 26 +++++++++----------
 4 files changed, 18 insertions(+), 23 deletions(-)

diff --git a/src/components/standalone/monitoring/flows/FlowTableRow.vue b/src/components/standalone/monitoring/flows/FlowTableRow.vue
index 535493fb4..7faec1d16 100644
--- a/src/components/standalone/monitoring/flows/FlowTableRow.vue
+++ b/src/components/standalone/monitoring/flows/FlowTableRow.vue
@@ -82,10 +82,7 @@ function formatRate(rate: number): string {
       {{ sourceIp }}:{{ sourcePort }}
     </NeTableCell>
     <NeTableCell :data-label="t('standalone.flows.destination')">
-      <NeTooltip
-        v-if="item.flow.host_server_name != undefined"
-        trigger-event="mouseenter click"
-      >
+      <NeTooltip v-if="item.flow.host_server_name != undefined" trigger-event="mouseenter click">
         <template #content>
           <p>{{ t('standalone.flows.destination_ip') }}: {{ destinationIp }}</p>
           <p>{{ t('standalone.flows.destination_port') }}: {{ destinationPort }}</p>
@@ -93,9 +90,7 @@ function formatRate(rate: number): string {
             {{ t('standalone.flows.destination_dns') }} : {{ item.flow.dns_host_name }}
           </p>
         </template>
-        <template #trigger>
-          {{ item.flow.host_server_name }}:{{ destinationPort }}
-        </template>
+        <template #trigger> {{ item.flow.host_server_name }}:{{ destinationPort }} </template>
       </NeTooltip>
       <template v-else> {{ destinationIp }}:{{ destinationPort }} </template>
     </NeTableCell>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 349e988ce..4116f1ee2 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -2287,6 +2287,7 @@
       "cannot_open_grafana_message": "Grafana monitoring is available only after connecting the unit to a controller",
       "cannot_open_report_from_controller": "Cannot open report from a controlled unit. You can open the report by accessing the unit UI directly, or by accessing the controller UI, going to 'Unit manager' page, clicking the three dots menu of the unit and selecting 'Open metrics'.",
       "traffic": "Traffic",
+      "daily_traffic": "Daily traffic",
       "connectivity": "WAN uplinks",
       "vpn": "VPN",
       "security": "Security",
@@ -2298,7 +2299,7 @@
       "today_top_protocols": "Protocols",
       "no_protocols": "No protocols",
       "daily_total_traffic": "Daily total traffic",
-      "instant_traffic": "Real-time traffic",
+      "top_talkers": "Top Talkers",
       "today_traffic": "Today traffic",
       "recent_traffic": "Recent traffic",
       "host": "Host",
@@ -2358,7 +2359,7 @@
       "error_fetching_data": "Error fetching data",
       "remote_hosts": "Remote hosts",
       "no_data_available": "No data available",
-      "flows": "Flows"
+      "live_flows": "Live flows"
     },
     "flows": {
       "subtitle": "View real-time network connections, each row represents an active flow with live transfer rates and total traffic.",
diff --git a/src/stores/standalone/netifyd.ts b/src/stores/standalone/netifyd.ts
index 76081b0b1..99ed61b18 100644
--- a/src/stores/standalone/netifyd.ts
+++ b/src/stores/standalone/netifyd.ts
@@ -49,7 +49,6 @@ export const useNetifydStore = defineStore('netifyd', () => {
     }
   }
 
-
   function generateApplicationLabel(applicationName: string): string {
     let name = applicationName
     // Remove netify. prefix if present
diff --git a/src/views/standalone/monitoring/RealTimeMonitoringView.vue b/src/views/standalone/monitoring/RealTimeMonitoringView.vue
index c98d3baa1..85208ba70 100644
--- a/src/views/standalone/monitoring/RealTimeMonitoringView.vue
+++ b/src/views/standalone/monitoring/RealTimeMonitoringView.vue
@@ -27,8 +27,16 @@ const { t } = useI18n()
 
 const { tabs, selectedTab } = useTabs([
   {
-    name: 'traffic',
-    label: t('standalone.real_time_monitor.traffic')
+    name: 'daily-traffic',
+    label: t('standalone.real_time_monitor.daily_traffic')
+  },
+  {
+    name: 'live-flows',
+    label: t('standalone.real_time_monitor.live_flows')
+  },
+  {
+    name: 'top-talkers',
+    label: t('standalone.real_time_monitor.top_talkers')
   },
   {
     name: 'connectivity',
@@ -41,14 +49,6 @@ const { tabs, selectedTab } = useTabs([
   {
     name: 'security',
     label: t('standalone.real_time_monitor.security')
-  },
-  {
-    name: 'instant-traffic',
-    label: t('standalone.real_time_monitor.instant_traffic')
-  },
-  {
-    name: 'flows',
-    label: t('standalone.real_time_monitor.flows')
   }
 ])
 
@@ -167,11 +167,11 @@ function openGrafana() {
       class="mb-8"
       @select-tab="selectedTab = $event"
     />
-    <TrafficMonitor v-if="selectedTab === 'traffic'" />
+    <TrafficMonitor v-if="selectedTab === 'daily-traffic'" />
     <ConnectivityMonitor v-else-if="selectedTab === 'connectivity'" />
     <VpnMonitor v-else-if="selectedTab === 'vpn'" />
     <SecurityMonitor v-else-if="selectedTab === 'security'" />
-    <InstantTrafficMonitor v-else-if="selectedTab == 'instant-traffic'" />
-    <FlowSection v-else-if="selectedTab == 'flows'" />
+    <InstantTrafficMonitor v-else-if="selectedTab == 'top-talkers'" />
+    <FlowSection v-else-if="selectedTab == 'live-flows'" />
   </div>
 </template>