fix(port forward): fix ObjectTooltip for dhcp objects

NethServer · Oct 4, 2024 · 27ded1f · 27ded1f
1 parent fd24cbb
commit 27ded1f
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 6 deletions.
diff --git a/src/components/standalone/users_objects/ObjectTooltip.vue b/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>

diff --git a/src/stores/standalone/objects.ts b/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 }
 })