From 4773bb7472f022b6fd5aa172dcbb378313260ba6 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andrea.leardini@nethesis.it>
Date: Tue, 12 Nov 2024 17:01:24 +0100
Subject: [PATCH] feat(monitoring): show ip addresses of wan ifaces (#433)

---
 .../controller/users/UsersTable.vue           |   2 +-
 .../monitoring/ConnectivityMonitor.vue        | 128 ++++++++++++---
 .../connectivity/WanConnectionsCard.vue       |   7 +
 .../CreateOrEditTunnelDrawer.vue              |   1 -
 src/composables/useNetworkDevices.ts          |  81 ++++++++++
 src/composables/useUciNetworkConfig.ts        |  75 +++++++++
 src/i18n/en/translation.json                  |   3 +-
 src/lib/standalone/network.ts                 | 115 ++++++++++++-
 .../network/InterfacesAndDevicesView.vue      | 153 +++++-------------
 9 files changed, 424 insertions(+), 141 deletions(-)
 create mode 100644 src/composables/useNetworkDevices.ts
 create mode 100644 src/composables/useUciNetworkConfig.ts

diff --git a/src/components/controller/users/UsersTable.vue b/src/components/controller/users/UsersTable.vue
index 46e4916f0..93574fe05 100644
--- a/src/components/controller/users/UsersTable.vue
+++ b/src/components/controller/users/UsersTable.vue
@@ -21,7 +21,7 @@ import { type ControllerAccount } from '@/stores/controller/accounts'
 import { useLoginStore } from '@/stores/controller/controllerLogin'
 import { ref } from 'vue'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { faCheck, faCircleCheck, faCircleXmark } from '@fortawesome/free-solid-svg-icons'
+import { faCircleCheck, faCircleXmark } from '@fortawesome/free-solid-svg-icons'
 
 const props = defineProps<{
   users: ControllerAccount[]
diff --git a/src/components/standalone/monitoring/ConnectivityMonitor.vue b/src/components/standalone/monitoring/ConnectivityMonitor.vue
index 2ede431c9..e4fe0b005 100644
--- a/src/components/standalone/monitoring/ConnectivityMonitor.vue
+++ b/src/components/standalone/monitoring/ConnectivityMonitor.vue
@@ -19,11 +19,16 @@ import InterfaceTrafficCard from './connectivity/InterfaceTrafficCard.vue'
 import { isEmpty } from 'lodash-es'
 import type { Policy } from '@/composables/useMwan'
 import WanConnectionsCard from './connectivity/WanConnectionsCard.vue'
+import { useNetworkDevices } from '@/composables/useNetworkDevices'
+import { getIpv4Addresses, getIpv6Addresses, getName, isDeviceUp } from '@/lib/standalone/network'
+import { useUciNetworkConfig } from '@/composables/useUciNetworkConfig'
 
 export type Wan = {
   iface: string
   device: string
   status?: string
+  ip4Addresses?: string[]
+  ip6Addresses?: string[]
 }
 
 export type WanEvent = {
@@ -32,10 +37,20 @@ export type WanEvent = {
 }
 
 const { t } = useI18n()
+const { allDevices, listDevices, loadingListDevices, errorListDevices, errorListDevicesDetails } =
+  useNetworkDevices()
+const {
+  networkConfig,
+  getNetworkConfig,
+  loadingNetworkConfig,
+  errorNetworkConfig,
+  errorNetworkConfigDetails
+} = useUciNetworkConfig()
 
 const wans = ref<Wan[]>([])
 const mwanEvents = ref<Record<string, any[]>>({})
 const mwanPolicies = ref<Policy[]>([])
+
 let loading = ref({
   listWans: false,
   getMwanReport: false,
@@ -51,43 +66,75 @@ let error = ref({
   getMwanPoliciesDetails: ''
 })
 
+const loadingData = computed(() => {
+  return (
+    loading.value.listWans ||
+    loading.value.getMwanReport ||
+    loading.value.getMwanPolicies ||
+    loadingNetworkConfig.value ||
+    loadingListDevices.value
+  )
+})
+
 const wanConnections = computed(() => {
-  const wanData = []
+  const wanData: Wan[] = []
 
   for (const wan of wans.value) {
     // get wan status from policy data
     let statusFound = false
 
-    for (const policy of mwanPolicies.value) {
-      if (statusFound) {
-        break
-      }
-
-      for (const policyMembers of Object.values(policy.members)) {
+    if (mwanPolicies.value.length > 0) {
+      // multiwan configured
+      for (const policy of mwanPolicies.value) {
         if (statusFound) {
           break
         }
 
-        for (const policyMember of policyMembers) {
-          if (policyMember.interface == wan.iface) {
-            wanData.push({
-              ...wan,
-              status: policyMember.status
-            })
-            statusFound = true
+        for (const policyMembers of Object.values(policy.members)) {
+          if (statusFound) {
             break
           }
+
+          for (const policyMember of policyMembers) {
+            if (policyMember.interface == wan.iface) {
+              const devFound = allDevices.value.find((dev) => getName(dev) === wan.device)
+
+              wanData.push({
+                ...wan,
+                status: policyMember.status,
+                ip4Addresses: devFound ? getIpv4Addresses(devFound, networkConfig.value) : [],
+                ip6Addresses: devFound ? getIpv6Addresses(devFound, networkConfig.value) : []
+              })
+              statusFound = true
+              break
+            }
+          }
         }
       }
+    } else {
+      // multiwan not configured
+
+      const devFound = allDevices.value.find((dev) => getName(dev) === wan.device)
+
+      if (devFound) {
+        wanData.push({
+          ...wan,
+          status: isDeviceUp(devFound, allDevices.value) ? 'online' : 'offline',
+          ip4Addresses: getIpv4Addresses(devFound, networkConfig.value),
+          ip6Addresses: getIpv6Addresses(devFound, networkConfig.value)
+        })
+      }
     }
   }
-  return wanData
+  return wanData.sort(sortByProperty('iface'))
 })
 
 onMounted(() => {
   listWans()
   getMwanReport()
   getMwanPolicies()
+  listDevices()
+  getNetworkConfig()
 })
 
 async function listWans() {
@@ -196,25 +243,60 @@ async function getMwanPolicies() {
         {{ error.getMwanPoliciesDetails }}
       </template>
     </NeInlineNotification>
-    <div class="grid grid-cols-1 gap-x-6 gap-y-6 xl:grid-cols-2">
+    <!-- listDevices error notification -->
+    <NeInlineNotification
+      v-if="errorListDevices"
+      kind="error"
+      :title="t('error.cannot_load_network_devices')"
+      :description="errorListDevices"
+      :closeAriaLabel="t('common.close')"
+      class="mb-4"
+    >
+      <template v-if="errorListDevicesDetails" #details>
+        {{ errorListDevicesDetails }}
+      </template>
+    </NeInlineNotification>
+    <!-- uci network config error notification -->
+    <NeInlineNotification
+      v-if="errorNetworkConfig"
+      kind="error"
+      :title="t('error.cannot_load_network_config')"
+      :description="errorNetworkConfig"
+      :closeAriaLabel="t('common.close')"
+      class="mb-4"
+    >
+      <template v-if="errorNetworkConfigDetails" #details>
+        {{ errorNetworkConfigDetails }}
+      </template>
+    </NeInlineNotification>
+    <div class="grid grid-cols-1 gap-x-6 gap-y-6 sm:grid-cols-12">
       <!-- skeleton -->
-      <template v-if="loading.listWans || loading.getMwanReport || loading.getMwanPolicies">
+      <template v-if="loadingData">
+        <NeCard
+          loading
+          :skeletonLines="7"
+          class="sm:col-span-12 3xl:col-span-8 6xl:col-span-4 7xl:col-span-3"
+        ></NeCard>
         <NeCard
           v-for="index in 4"
           :key="index"
           loading
-          :skeletonLines="5"
-          class="col-span-1"
+          :skeletonLines="7"
+          class="sm:col-span-12 xl:col-span-6 3xl:col-span-4 7xl:col-span-3"
         ></NeCard>
       </template>
       <template v-else>
         <!-- connections -->
-        <WanConnectionsCard v-if="wanConnections.length" :wanConnections="wanConnections" />
+        <WanConnectionsCard
+          v-if="wanConnections.length"
+          :wanConnections="wanConnections"
+          class="sm:col-span-12 3xl:col-span-8 6xl:col-span-4 7xl:col-span-3"
+        />
         <!-- wan events -->
         <NeCard
           v-if="isEmpty(mwanEvents)"
           :title="t('standalone.real_time_monitor.wan_events')"
-          class="col-span-1"
+          class="sm:col-span-12 xl:col-span-6 3xl:col-span-4 7xl:col-span-3"
         >
           <NeEmptyState
             :title="t('standalone.real_time_monitor.no_events_message')"
@@ -228,7 +310,7 @@ async function getMwanPolicies() {
           :key="wanName"
           :wan="wanName"
           :wanEvents="events"
-          class="col-span-1"
+          class="sm:col-span-12 xl:col-span-6 3xl:col-span-4 7xl:col-span-3"
         />
         <!-- wans traffic -->
         <InterfaceTrafficCard
@@ -236,7 +318,7 @@ async function getMwanPolicies() {
           :key="wan.device"
           :iface="wan.iface"
           :device="wan.device"
-          class="col-span-1"
+          class="sm:col-span-12 xl:col-span-6 3xl:col-span-4 7xl:col-span-3"
         />
       </template>
     </div>
diff --git a/src/components/standalone/monitoring/connectivity/WanConnectionsCard.vue b/src/components/standalone/monitoring/connectivity/WanConnectionsCard.vue
index be5861c48..fa1f9e838 100644
--- a/src/components/standalone/monitoring/connectivity/WanConnectionsCard.vue
+++ b/src/components/standalone/monitoring/connectivity/WanConnectionsCard.vue
@@ -38,6 +38,7 @@ const { currentPage, paginatedItems } = useItemPagination(() => props.wanConnect
         <NeTableHeadCell>{{ t('standalone.real_time_monitor.interface') }}</NeTableHeadCell>
         <NeTableHeadCell>{{ t('standalone.real_time_monitor.device') }}</NeTableHeadCell>
         <NeTableHeadCell>{{ t('common.status') }}</NeTableHeadCell>
+        <NeTableHeadCell>{{ t('common.ip_address') }}</NeTableHeadCell>
       </NeTableHead>
       <NeTableBody>
         <NeTableRow v-for="(item, index) in paginatedItems" :key="index">
@@ -66,6 +67,12 @@ const { currentPage, paginatedItems } = useItemPagination(() => props.wanConnect
               }}
             </div>
           </NeTableCell>
+          <NeTableCell :data-label="t('common.ip_address')">
+            <span v-if="item.ip4Addresses.length || item.ip6Addresses.length">
+              {{ (item.ip4Addresses || []).concat(item.ip6Addresses || []).join(', ') }}
+            </span>
+            <span v-else>-</span>
+          </NeTableCell>
         </NeTableRow>
       </NeTableBody>
       <template #paginator>
diff --git a/src/components/standalone/openvpn_tunnel/CreateOrEditTunnelDrawer.vue b/src/components/standalone/openvpn_tunnel/CreateOrEditTunnelDrawer.vue
index c67ad8c6a..a35551caa 100644
--- a/src/components/standalone/openvpn_tunnel/CreateOrEditTunnelDrawer.vue
+++ b/src/components/standalone/openvpn_tunnel/CreateOrEditTunnelDrawer.vue
@@ -36,7 +36,6 @@ import { useI18n } from 'vue-i18n'
 import type { ServerTunnel, ClientTunnel } from './TunnelManager.vue'
 import NeMultiTextInput from '../NeMultiTextInput.vue'
 import { ubusCall, ValidationError } from '@/lib/standalone/ubus'
-import { AxiosError } from 'axios'
 
 type TunnelDefaults = {
   secret: string
diff --git a/src/composables/useNetworkDevices.ts b/src/composables/useNetworkDevices.ts
new file mode 100644
index 000000000..d8c9c7660
--- /dev/null
+++ b/src/composables/useNetworkDevices.ts
@@ -0,0 +1,81 @@
+//  Copyright (C) 2024 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { ubusCall } from '@/lib/standalone/ubus'
+import { getAxiosErrorMessage } from '@nethesis/vue-components'
+import {
+  getName,
+  type DeviceOrIface,
+  type ZoneWithDeviceNames,
+  type ZoneWithDevices
+} from '@/lib/standalone/network'
+import { zonesSorting } from '@/stores/standalone/firewall'
+
+/**
+ * Composable that handles the network devices retrieved from the ns.devices list-devices API
+ */
+export function useNetworkDevices() {
+  const { t } = useI18n()
+
+  const allDevices = ref<DeviceOrIface[]>([])
+  const devicesByZone = ref<ZoneWithDeviceNames[]>([])
+  const loadingListDevices = ref(false)
+  const errorListDevices = ref('')
+  const errorListDevicesDetails = ref('')
+
+  const sortedZonesAndDevices = computed(() => {
+    const zones: ZoneWithDevices[] = []
+    devicesByZone.value.forEach((z: ZoneWithDeviceNames) => {
+      const deviceList: DeviceOrIface[] = []
+      z.devices.forEach((devName: string) => {
+        const devFound = allDevices.value.find((dev) => getName(dev) === devName)
+
+        if (devFound) {
+          deviceList.push(devFound)
+        }
+      })
+      const zone = { name: z.name, devices: deviceList }
+      zones.push(zone)
+    })
+
+    return zones.sort(zonesSorting)
+  })
+
+  async function listDevices() {
+    loadingListDevices.value = true
+    allDevices.value = []
+    devicesByZone.value = []
+    errorListDevices.value = ''
+    errorListDevicesDetails.value = ''
+
+    try {
+      const res = await ubusCall('ns.devices', 'list-devices')
+      const bond_devices = res.data.all_devices
+        .filter((device: DeviceOrIface) => device.name?.startsWith('bond-'))
+        .map((device: DeviceOrIface) => device.name?.slice(5))
+
+      allDevices.value = res.data.all_devices.filter(
+        (device: DeviceOrIface) => !bond_devices.includes(device.name ?? device['.name'])
+      )
+      devicesByZone.value = res.data.devices_by_zone
+    } catch (err: any) {
+      console.error(err)
+      errorListDevices.value = t(getAxiosErrorMessage(err))
+      errorListDevicesDetails.value = err.toString()
+    } finally {
+      loadingListDevices.value = false
+    }
+  }
+
+  return {
+    allDevices,
+    devicesByZone,
+    sortedZonesAndDevices,
+    listDevices,
+    loadingListDevices,
+    errorListDevices,
+    errorListDevicesDetails
+  }
+}
diff --git a/src/composables/useUciNetworkConfig.ts b/src/composables/useUciNetworkConfig.ts
new file mode 100644
index 000000000..91e92d78b
--- /dev/null
+++ b/src/composables/useUciNetworkConfig.ts
@@ -0,0 +1,75 @@
+//  Copyright (C) 2024 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { getUciConfig } from '@/lib/standalone/ubus'
+import { getAxiosErrorMessage } from '@nethesis/vue-components'
+
+export interface UciNetworkConfig {
+  device?: UciNetworkDevice[]
+  interface?: UciNetworkInterface[]
+}
+
+export interface UciNetworkDevice {
+  name?: string
+  '.anonymous'?: boolean
+  '.index'?: number
+  '.name'?: string
+  '.type'?: 'device'
+  ports?: string[]
+  type?: string
+  ipv6?: string
+}
+
+export interface UciNetworkInterface {
+  '.name'?: string
+  '.anonymous'?: boolean
+  '.index'?: number
+  '.type'?: 'interface'
+  device?: string
+  proto?: string
+  ipaddr?: string
+  ip6addr?: string
+  netmask?: string
+  force_link?: string
+  gateway?: string
+  metric?: string
+}
+
+/**
+ * Composable that handles UCI network configuration
+ */
+export function useUciNetworkConfig() {
+  const { t } = useI18n()
+
+  const networkConfig = ref<UciNetworkConfig>()
+  const loadingNetworkConfig = ref(false)
+  const errorNetworkConfig = ref('')
+  const errorNetworkConfigDetails = ref('')
+
+  async function getNetworkConfig() {
+    loadingNetworkConfig.value = true
+    errorNetworkConfig.value = ''
+    errorNetworkConfigDetails.value = ''
+
+    try {
+      networkConfig.value = await getUciConfig('network')
+    } catch (err: any) {
+      console.error(err)
+      networkConfig.value = undefined
+      errorNetworkConfig.value = t(getAxiosErrorMessage(err))
+      errorNetworkConfigDetails.value = err.toString()
+    } finally {
+      loadingNetworkConfig.value = false
+    }
+  }
+
+  return {
+    networkConfig,
+    getNetworkConfig,
+    loadingNetworkConfig,
+    errorNetworkConfig,
+    errorNetworkConfigDetails
+  }
+}
diff --git a/src/i18n/en/translation.json b/src/i18n/en/translation.json
index 9ad03c56a..2845535e3 100644
--- a/src/i18n/en/translation.json
+++ b/src/i18n/en/translation.json
@@ -56,7 +56,8 @@
     "no_data_available": "No data available",
     "type": "Type",
     "unknown": "Unknown",
-    "confirm": "Confirm"
+    "confirm": "Confirm",
+    "ip_address": "IP address"
   },
   "error": {
     "generic_error": "Something went wrong",
diff --git a/src/lib/standalone/network.ts b/src/lib/standalone/network.ts
index bdbceff94..c56c9d768 100644
--- a/src/lib/standalone/network.ts
+++ b/src/lib/standalone/network.ts
@@ -3,6 +3,8 @@
 
 import { SpecialZones, type Forwarding, type Zone } from '@/stores/standalone/firewall'
 import { useI18n } from 'vue-i18n'
+import { isEqual, uniqWith } from 'lodash-es'
+import type { UciNetworkConfig } from '@/composables/useUciNetworkConfig'
 
 export interface DeviceOrIface {
   name?: string
@@ -103,14 +105,20 @@ export function getInterfaceDisplayName(deviceOrIface: DeviceOrIface) {
   }
 }
 
-export function getAliasInterface(device: DeviceOrIface, networkConfig: any) {
+export function getAliasInterface(device: DeviceOrIface, networkConfig: UciNetworkConfig) {
+  if (!networkConfig) {
+    return
+  }
+
   const iface = getInterface(device)
 
   if (!iface) {
     return
   }
 
-  return networkConfig.interface.find((ifaceElem: any) => ifaceElem.device === `@${iface['.name']}`)
+  return networkConfig.interface?.find(
+    (ifaceElem: any) => ifaceElem.device === `@${iface['.name']}`
+  )
 }
 
 export function getFirewallZone(iface: any, firewallConfig: any) {
@@ -332,7 +340,7 @@ export function isHotspot(device: DeviceOrIface) {
   return device.hotspot
 }
 
-export function generateDeviceName(devicePrefix: string, networkConfig: any) {
+export function generateDeviceName(devicePrefix: string, networkConfig: UciNetworkConfig) {
   let num = -1
   let nameAlreadyExists = true
   let deviceNameGenerated = ''
@@ -340,7 +348,8 @@ export function generateDeviceName(devicePrefix: string, networkConfig: any) {
   do {
     num++
     deviceNameGenerated = `${devicePrefix}${num}`
-    nameAlreadyExists = networkConfig.device?.find((dev: any) => dev.name === deviceNameGenerated)
+    nameAlreadyExists =
+      networkConfig.device?.some((dev: any) => dev.name === deviceNameGenerated) || false
   } while (nameAlreadyExists)
 
   return deviceNameGenerated
@@ -377,3 +386,101 @@ export function forwardingsToByZone(zone: Zone, forwardings: Forwarding[]): Arra
 export function forwardingsFromByZone(zone: Zone, forwardings: Forwarding[]): Array<Forwarding> {
   return forwardings.filter((forwarding: Forwarding) => forwarding.destination == zone.name)
 }
+
+export function getIpv4Addresses(
+  device: DeviceOrIface,
+  networkConfig: UciNetworkConfig | undefined
+) {
+  if (!networkConfig) {
+    return []
+  }
+
+  const ipv4Addresses = []
+  const iface = getInterface(device)
+  const aliasIface = getAliasInterface(device, networkConfig)
+
+  // device ip addresses
+
+  if (device.ipaddrs && device.ipaddrs.length > 0) {
+    for (const ipv4 of device.ipaddrs) {
+      // skip alias addresses
+      if (!aliasIface || !aliasIface.ipaddr || !aliasIface.ipaddr.includes(ipv4.address)) {
+        ipv4Addresses.push(ipv4.address)
+      }
+    }
+  }
+
+  // interface ip address
+
+  if (iface?.ipaddr) {
+    // skip alias addresses
+    if (!aliasIface || !aliasIface.ipaddr || !aliasIface.ipaddr.includes(iface.ipaddr)) {
+      ipv4Addresses.push(iface.ipaddr)
+    }
+  }
+  if (isBond(device) && ipv4Addresses.length > 0) {
+    ipv4Addresses.splice(0, 1)
+  }
+  return uniqWith(ipv4Addresses, isEqual)
+}
+
+export function getIpv6Addresses(
+  device: DeviceOrIface,
+  networkConfig: UciNetworkConfig | undefined
+) {
+  if (!networkConfig) {
+    return []
+  }
+
+  // ensure ipv6 is enabled
+  if (device.ipv6 !== '1') {
+    return []
+  }
+
+  const ipv6Addresses = []
+  const iface = getInterface(device)
+  const aliasIface = getAliasInterface(device, networkConfig)
+
+  // device ip addresses
+
+  if (device.ip6addrs && device.ip6addrs.length > 0) {
+    for (const ipv6 of device.ip6addrs) {
+      // skip alias addresses
+      if (!aliasIface || !aliasIface.ip6addr || !aliasIface.ip6addr.includes(ipv6.address)) {
+        ipv6Addresses.push(ipv6.address)
+      }
+    }
+  }
+
+  // interface ip address
+
+  if (iface?.ip6addr) {
+    let addr = iface.ip6addr
+
+    // ipv6 address is stored inside a one-element array
+    if (addr instanceof Array) {
+      addr = addr[0]
+    }
+
+    // skip alias addresses
+    if (!aliasIface || !aliasIface.ip6addr || !aliasIface.ip6addr.includes(addr)) {
+      ipv6Addresses.push(addr)
+    }
+  }
+  return uniqWith(ipv6Addresses, isEqual)
+}
+
+export function isDeviceUp(device: DeviceOrIface, allDevices: DeviceOrIface[]) {
+  // get parent device if it's a vlan
+  if (isVlan(device)) {
+    const vlanParent = getVlanParent(device, allDevices)
+    return vlanParent?.up
+  }
+  return device?.up
+}
+
+export function getVlanParent(bridgeDevice: DeviceOrIface, allDevices: DeviceOrIface[]) {
+  const parentDevice = bridgeDevice.ifname
+  const deviceFound = allDevices.find((dev) => dev.name === parentDevice)
+  return deviceFound
+}
diff --git a/src/views/standalone/network/InterfacesAndDevicesView.vue b/src/views/standalone/network/InterfacesAndDevicesView.vue
index b29cef0a8..85004aa7b 100644
--- a/src/views/standalone/network/InterfacesAndDevicesView.vue
+++ b/src/views/standalone/network/InterfacesAndDevicesView.vue
@@ -42,7 +42,11 @@ import {
   isVpn,
   getZoneIconBackgroundStyle,
   getZoneIconForegroundStyle,
-  type DeviceVpnNetworks
+  type DeviceVpnNetworks,
+  getIpv4Addresses,
+  getIpv6Addresses,
+  getVlanParent,
+  isDeviceUp
 } from '@/lib/standalone/network'
 import ConfigureDeviceDrawer, {
   type DeviceType
@@ -50,10 +54,11 @@ import ConfigureDeviceDrawer, {
 import UnconfigureDeviceModal from '@/components/standalone/interfaces_and_devices/UnconfigureDeviceModal.vue'
 import CreateVlanDeviceDrawer from '@/components/standalone/interfaces_and_devices/CreateVlanDeviceDrawer.vue'
 import DeleteDeviceModal from '@/components/standalone/interfaces_and_devices/DeleteDeviceModal.vue'
-import { isEmpty, isEqual, uniqWith, toUpper, clone } from 'lodash-es'
+import { clone, isEmpty, toUpper } from 'lodash-es'
 import { zonesSorting } from '@/stores/standalone/firewall'
 import DeleteBondModal from '@/components/standalone/interfaces_and_devices/DeleteBondModal.vue'
 import DeviceButtons from '@/components/standalone/interfaces_and_devices/DeviceButtons.vue'
+import type { UciNetworkConfig } from '@/composables/useUciNetworkConfig'
 
 const LIST_DEVICES_INTERVAL_TIME = 10000
 const { t, te } = useI18n()
@@ -179,7 +184,7 @@ async function getNetworkConfig() {
     networkConfig.value = await getUciConfig('network')
   } catch (err: any) {
     console.error(err)
-    error.value.notificationTitle = t('error.cannot_load_firewall_config')
+    error.value.notificationTitle = t('error.cannot_load_network_config')
     error.value.notificationDescription = t(getAxiosErrorMessage(err))
   }
   loading.value.networkConfig = false
@@ -443,10 +448,10 @@ function showUnconfigureDeviceModal(device: any) {
   isShownUnconfigureDeviceModal.value = true
 }
 
-function getNumAlias(device: any, networkConfig: any) {
+function getNumAlias(device: any, networkConfig: UciNetworkConfig) {
   const alias = getAliasInterface(device, networkConfig)
-  const numIpv4Addresses = alias.ipaddr?.length || 0
-  const numIpv6Addresses = alias.ip6addr?.length || 0
+  const numIpv4Addresses = alias?.ipaddr?.length || 0
+  const numIpv6Addresses = alias?.ip6addr?.length || 0
   return numIpv4Addresses + numIpv6Addresses
 }
 
@@ -458,87 +463,10 @@ function hideCreateVlanDeviceDrawer() {
   isShownCreateVlanDeviceDrawer.value = false
 }
 
-function getIpv4Addresses(device: any) {
-  const ipv4Addresses = []
-  const iface = getInterface(device)
-  const aliasIface = getAliasInterface(device, networkConfig.value)
-
-  // device ip addresses
-
-  if (!isEmpty(device.ipaddrs)) {
-    for (const ipv4 of device.ipaddrs) {
-      // skip alias addresses
-      if (!aliasIface || !aliasIface.ipaddr || !aliasIface.ipaddr.includes(ipv4.address)) {
-        ipv4Addresses.push({ address: ipv4.address })
-      }
-    }
-  }
-
-  // interface ip address
-
-  if (iface?.ipaddr) {
-    // skip alias addresses
-    if (!aliasIface || !aliasIface.ipaddr || !aliasIface.ipaddr.includes(iface.ipaddr)) {
-      ipv4Addresses.push({ address: iface.ipaddr })
-    }
-  }
-  if (isBond(device) && ipv4Addresses.length > 0) {
-    ipv4Addresses.splice(0, 1)
-  }
-  return uniqWith(ipv4Addresses, isEqual)
-}
-
-function getIpv6Addresses(device: any) {
-  // ensure ipv6 is enabled
-  if (device.ipv6 !== '1') {
-    return
-  }
-
-  const ipv6Addresses = []
-  const iface = getInterface(device)
-  const aliasIface = getAliasInterface(device, networkConfig.value)
-
-  // device ip addresses
-
-  if (!isEmpty(device.ip6addrs)) {
-    for (const ipv6 of device.ip6addrs) {
-      // skip alias addresses
-      if (!aliasIface || !aliasIface.ip6addr || !aliasIface.ip6addr.includes(ipv6.address)) {
-        ipv6Addresses.push({ address: ipv6.address })
-      }
-    }
-  }
-
-  // interface ip address
-
-  if (iface?.ip6addr) {
-    let addr = iface.ip6addr
-
-    // ipv6 address is stored inside a one-element array
-    if (addr instanceof Array) {
-      addr = addr[0]
-    }
-
-    // skip alias addresses
-    if (!aliasIface || !aliasIface.ip6addr || !aliasIface.ip6addr.includes(addr)) {
-      ipv6Addresses.push({ address: addr })
-    }
-  }
-  return uniqWith(ipv6Addresses, isEqual)
-}
-
-function isDeviceUp(device: any) {
-  // get parent device if it's a vlan
-  if (isVlan(device)) {
-    device = getVlanParent(device)
-  }
-  return device?.up
-}
-
-function getDeviceMac(device: any) {
+function getDeviceMac(device: any, allDevices: DeviceOrIface[]) {
   // get parent device if it's a vlan
   if (isVlan(device)) {
-    device = getVlanParent(device)
+    device = getVlanParent(device, allDevices)
   }
 
   if (device?.mac) {
@@ -568,16 +496,10 @@ function getIpv6Gateway(device: any) {
   }
 }
 
-function getVlanParent(bridgeDevice: any) {
-  const parentDevice = bridgeDevice.ifname
-  const deviceFound = allDevices.value.find((dev) => dev.name === parentDevice)
-  return deviceFound
-}
-
-function getRxBytes(device: any) {
+function getRxBytes(device: any, allDevices: DeviceOrIface[]) {
   // get parent device if it's a vlan
   if (isVlan(device)) {
-    device = getVlanParent(device)
+    device = getVlanParent(device, allDevices)
   }
 
   if (device?.stats?.rx_bytes) {
@@ -587,10 +509,10 @@ function getRxBytes(device: any) {
   }
 }
 
-function getTxBytes(device: any) {
+function getTxBytes(device: any, allDevices: DeviceOrIface[]) {
   // get parent device if it's a vlan
   if (isVlan(device)) {
-    device = getVlanParent(device)
+    device = getVlanParent(device, allDevices)
   }
 
   if (device?.stats?.tx_bytes) {
@@ -854,9 +776,9 @@ function formatPackets(packets: number) {
                       </div>
                       <!-- second column -->
                       <div class="space-y-2">
-                        <div v-if="getDeviceMac(device)">
+                        <div v-if="getDeviceMac(device, allDevices)">
                           <span class="font-medium">MAC: </span>
-                          <span>{{ getDeviceMac(device) }}</span>
+                          <span>{{ getDeviceMac(device, allDevices) }}</span>
                         </div>
                         <!-- hotspot network -->
                         <div v-if="isHotspot(device)">
@@ -866,11 +788,14 @@ function formatPackets(packets: number) {
                           <span>{{ device.hotspot?.network }}</span>
                         </div>
                         <div>
-                          <div v-if="getIpv4Addresses(device)?.length">
-                            <div v-for="(ipv4, i) in getIpv4Addresses(device)" :key="i">
+                          <div v-if="getIpv4Addresses(device, networkConfig)?.length">
+                            <div
+                              v-for="(ipv4, i) in getIpv4Addresses(device, networkConfig)"
+                              :key="i"
+                            >
                               <div>
                                 <span class="font-medium">IPv4: </span>
-                                <span>{{ ipv4.address }}</span>
+                                <span>{{ ipv4 }}</span>
                               </div>
                             </div>
                           </div>
@@ -882,11 +807,14 @@ function formatPackets(packets: number) {
                           </div>
                         </div>
                         <div>
-                          <div v-if="getIpv6Addresses(device)?.length">
-                            <div v-for="(ipv6, i) in getIpv6Addresses(device)" :key="i">
+                          <div v-if="getIpv6Addresses(device, networkConfig)?.length">
+                            <div
+                              v-for="(ipv6, i) in getIpv6Addresses(device, networkConfig)"
+                              :key="i"
+                            >
                               <div>
                                 <span class="font-medium">IPv6: </span>
-                                <span>{{ ipv6.address }}</span>
+                                <span>{{ ipv6 }}</span>
                               </div>
                             </div>
                           </div>
@@ -955,16 +883,16 @@ function formatPackets(packets: number) {
                       </div>
                       <!-- third column -->
                       <div>
-                        <div v-if="getRxBytes(device)">
+                        <div v-if="getRxBytes(device, allDevices)">
                           <span class="font-medium">RX: </span>
-                          <span>{{ getRxBytes(device) || '-' }}</span>
+                          <span>{{ getRxBytes(device, allDevices) || '-' }}</span>
                           <span v-if="device.stats?.rx_packets">
                             ({{ formatPackets(device.stats.rx_packets) }} pkts)</span
                           >
                         </div>
-                        <div v-if="getTxBytes(device)">
+                        <div v-if="getTxBytes(device, allDevices)">
                           <span class="font-medium">TX: </span>
-                          <span>{{ getTxBytes(device) || '-' }}</span>
+                          <span>{{ getTxBytes(device, allDevices) || '-' }}</span>
                           <span v-if="device.stats?.tx_packets">
                             ({{ formatPackets(device.stats.tx_packets) }} pkts)</span
                           >
@@ -973,7 +901,10 @@ function formatPackets(packets: number) {
                       <!-- fourth column -->
                       <div>
                         <div v-if="!isVpn(device)">
-                          <div v-if="isDeviceUp(device)" class="mb-2 flex items-center gap-2">
+                          <div
+                            v-if="isDeviceUp(device, allDevices)"
+                            class="mb-2 flex items-center gap-2"
+                          >
                             <font-awesome-icon
                               :icon="['fas', 'circle-check']"
                               class="h-4 w-4"
@@ -1063,18 +994,18 @@ function formatPackets(packets: number) {
                             >
                               <div class="font-semibold">
                                 {{ t('standalone.interfaces_and_devices.alias') }}:
-                                {{ alias['.name'] }}
+                                {{ alias!['.name'] }}
                               </div>
                             </div>
                             <div class="flex grow flex-wrap gap-8 pr-40">
                               <!-- ipv4 addresses -->
-                              <div v-for="(ipv4, i) in alias.ipaddr" :key="i">
+                              <div v-for="(ipv4, i) in alias!.ipaddr" :key="i">
                                 <span class="font-medium">
                                   {{ t('standalone.interfaces_and_devices.ipv4') }}: </span
                                 ><span>{{ ipv4 }}</span>
                               </div>
                               <!-- ipv6 addresses -->
-                              <div v-for="(ipv6, i) in alias.ip6addr" :key="i">
+                              <div v-for="(ipv6, i) in alias!.ip6addr" :key="i">
                                 <span class="font-medium">
                                   {{ t('standalone.interfaces_and_devices.ipv6') }}: </span
                                 ><span>{{ ipv6 }}</span>