feat(port forward): support multiple object types

public/i18n/en/translation.json

@@ -1306,6 +1306,7 @@
       "enter_restricted_addresses": "Enter restricted addresses",
       "restricted_addresses": "Restricted addresses",
       "restricted_object": "Restricted object",
+      "restricted_object_tooltip": "All objects supported, except host sets with IP ranges",
       "no_object": "No object",
       "port_forwards_for_destination_name": "Port forwards for destination '{name}'"
     },

src/components/standalone/firewall/CreateOrEditPortForwardDrawer.vue

@@ -766,7 +766,15 @@ async function createOrEditPortForward() {
             :selected-label="t('ne_combobox.selected')"
             :user-input-label="t('ne_combobox.user_input_label')"
             ref="restrictObjectRef"
-          />
+          >
+            <template #tooltip>
+              <NeTooltip
+                ><template #content>{{
+                  t('standalone.port_forward.restricted_object_tooltip')
+                }}</template></NeTooltip
+              >
+            </template>
+          </NeCombobox>
           <NeToggle
             :topLabel="t('standalone.port_forward.log')"
             :label="

src/components/standalone/users_objects/ObjectTooltip.vue

@@ -90,11 +90,17 @@ function isHostSet(object: HostSet | DomainSet): object is HostSet {
         <template v-if="isHostSet(object)">
           <ul class="space-y-1" :class="{ 'list-inside list-disc': multipleEntries }">
             <li v-for="ipaddr in object.ipaddr" :key="ipaddr">
-              {{ ipaddr }}
-            </li>
-            <li v-for="children in object.children" :key="children.id">
-              <FontAwesomeIcon v-if="icon" :icon="icon" aria-hidden="true" class="h-4 w-4" />
-              {{ children.name }}
+              <span class="inline-flex items-center gap-1.5">
+                <span v-if="ipaddr.includes('/ns_')">
+                  <font-awesome-icon
+                    :icon="objects.getObjectIcon(objects.getRecord(ipaddr)?.subtype || '')"
+                    class="h-4 w-4"
+                    aria-hidden="true"
+                  />
+                  {{ objects.getRecord(ipaddr)?.name || '-' }}
+                </span>
+                <span v-else>{{ ipaddr }}</span>
+              </span>
             </li>
           </ul>
         </template>

src/stores/standalone/objects.ts

@@ -3,6 +3,16 @@ import { computed, ref } from 'vue'
 import type { IpVersion } from '@/composables/useObjects'
 import { ubusCall } from '@/lib/standalone/ubus'
 import type { AxiosResponse } from 'axios'
+import {
+  faDesktop,
+  faNetworkWired,
+  faArrowsLeftRightToLine,
+  faAddressCard,
+  faBoxArchive,
+  faGlobe,
+  faCloud,
+  faCircleQuestion
+} from '@fortawesome/free-solid-svg-icons'
 
 export type NsObject = {
   id: string
@@ -70,12 +80,38 @@ export const useObjectStore = defineStore('objects', () => {
       })
   }
 
+  function getObjectIcon(subtype: string) {
+    switch (subtype) {
+      case 'host':
+      case 'dns_record':
+        return faDesktop
+      case 'cidr':
+        return faNetworkWired
+      case 'range':
+        return faArrowsLeftRightToLine
+      case 'dhcp_static_lease':
+        return faAddressCard
+      case 'host_set':
+        return faBoxArchive
+      case 'vpn_user':
+        return faGlobe
+      case 'domain_set':
+        return faCloud
+      default:
+        return faCircleQuestion
+    }
+  }
+
+  function getRecord(record: string) {
+    return objects.value.find((obj) => obj.id === record)
+  }
+
   const objects = computed<Array<HostSet | DomainSet>>(() => {
     return [...hostSets.value, ...domainSets.value]
   })
 
   // loading objects on store usage
   load()
 
-  return { loading, load, hostSets, error, objects }
+  return { loading, load, hostSets, error, objects, getObjectIcon, getRecord }
 })

src/views/standalone/firewall/PortForward.vue

@@ -145,12 +145,7 @@ async function listObjectSuggestions() {
   try {
     const res = await ubusCall('ns.redirects', 'list-object-suggestions')
     destinationObjectSuggestions.value = res.data.objects.ns_dst
-    restrictObjectSuggestions.value = res.data.objects.ns_src.map((domainSet: DomainSet) => {
-      return {
-        ...domainSet,
-        id: `objects/${domainSet.id}`
-      }
-    })
+    restrictObjectSuggestions.value = res.data.objects.ns_src
   } catch (err: any) {
     console.error(err)
     error.value.listObjectSuggestions = t(getAxiosErrorMessage(err))