improvement for ip addresses displaying

vatesfr · Feb 3, 2025 · 1190751 · 1190751
1 parent 652a79e
commit 1190751
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 61 deletions.
diff --git a/@xen-orchestra/web-core/lib/components/card/VtsCardRowKeyValue.vue b/@xen-orchestra/web-core/lib/components/card/VtsCardRowKeyValue.vue
@@ -26,7 +26,7 @@ const slots = defineSlots<{
 .vts-card-row-key-value {
   display: flex;
   align-items: center;
-  gap: 0.8rem;
+  gap: 1.2rem;
 
   .key {
     width: 12rem;
@@ -36,6 +36,7 @@ const slots = defineSlots<{
   }
 
   .value {
+    width: 20rem;
     color: var(--color-neutral-txt-primary);
   }
 

diff --git a/@xen-orchestra/web-core/lib/locales/en.json b/@xen-orchestra/web-core/lib/locales/en.json
@@ -138,7 +138,6 @@
 
   "total": "Total",
   "total-cpus": "Total CPUs",
-  "unknown": "Unknown",
   "unlocked": "Unlocked",
   "uuid": "UUID",
   "vlan": "VLAN",

diff --git a/@xen-orchestra/web-core/lib/locales/fr.json b/@xen-orchestra/web-core/lib/locales/fr.json
@@ -138,7 +138,6 @@
 
   "total": "Total",
   "total-cpus": "Total CPUs",
-  "unknown": "Inconnu",
   "unlocked": "Débloqué",
   "uuid": "UUID",
   "vlan": "VLAN",

diff --git a/@xen-orchestra/web/src/components/host/HostPifsSidePanel.vue b/@xen-orchestra/web/src/components/host/HostPifsSidePanel.vue
@@ -1,5 +1,5 @@
 <template>
-  <UiPanel class="pif-panel">
+  <UiPanel class="host-pifs-side-panel">
     <VtsNoSelectionHero v-if="!pif" type="panel" />
     <template #header>
       <UiButton disabled size="medium" variant="tertiary" accent="info" :left-icon="faEdit">
@@ -143,40 +143,40 @@
       <UiCardTitle>{{ $t('network-information') }}</UiCardTitle>
       <div class="content">
         <!-- IP ADDRESSES -->
-        <VtsCardRowKeyValue v-for="ip in allIps" :key="ip">
-          <template v-if="allIps[0] === ip" #key>
+        <VtsCardRowKeyValue class="ip-addresses">
+          <template #key>
             {{ $t('ip-addresses') }}
           </template>
-          <template #value>
-            <div class="ip-adresses">
-              <div v-tooltip class="text-ellipsis">{{ ip }}</div>
-            </div>
-          </template>
-          <template #addons>
-            <UiButtonIcon
-              v-tooltip="copied && $t('core.copied')"
-              class="ip-address"
-              :icon="faCopy"
-              size="medium"
-              accent="info"
-              @click="copy(pif.ip)"
-            />
-            <MenuList v-if="allIps[0] === ip" placement="bottom-end">
-              <template #trigger="{ isOpen, open }">
+          <template v-if="allIps.length > 0" #value>
+            <div v-for="(ip, index) in allIps" :key="ip" class="ip-address-item">
+              <span class="text-ellipsis">{{ ip }}</span>
+              <div>
                 <UiButtonIcon
-                  v-if="allIps.length > 1"
-                  v-tooltip="isOpen ? false : { content: $t('more-actions'), placement: 'bottom-end' }"
-                  :icon="faEllipsis"
+                  v-if="ip !== '-'"
+                  v-tooltip="copied && $t('core.copied')"
+                  :icon="faCopy"
                   size="medium"
                   accent="info"
-                  :selected="isOpen"
-                  @click="open($event)"
+                  @click="copy(ip)"
                 />
-              </template>
-              <MenuItem :icon="faCopy" @click="copy(allIps.join(', '))">
-                <div>{{ t('copy-all') }}</div>
-              </MenuItem>
-            </MenuList>
+                <MenuList v-if="index === 0" placement="bottom-end">
+                  <template #trigger="{ isOpen, open }">
+                    <UiButtonIcon
+                      v-if="index === 0 && allIps.length > 1"
+                      v-tooltip="isOpen ? false : { content: $t('more-actions'), placement: 'bottom-end' }"
+                      :icon="faEllipsis"
+                      size="medium"
+                      accent="info"
+                      :selected="isOpen"
+                      @click="open($event)"
+                    />
+                  </template>
+                  <MenuItem :icon="faCopy" @click="copy(allIps.join(', '))">
+                    <div>{{ t('copy-all') }}</div>
+                  </MenuItem>
+                </MenuList>
+              </div>
+            </div>
           </template>
         </VtsCardRowKeyValue>
         <!-- MAC ADDRESSES -->
@@ -354,20 +354,12 @@ const network = computed(() => (pif.value ? get(pif.value.$network) : undefined)
 
 const allIps = computed(() => {
   if (!pif.value) return []
-  // pif.value.ipv6.push('192.168.0.1', '192.168.0.1', '192.168.0.1', '192.168.0.1', '192.168.0.1', '192.168.0.1')
   const ips = [pif.value.ip, ...pif.value.ipv6].filter(ip => ip)
   return ips.length > 0 ? ips : ['-']
 })
 
 const networkNameLabel = computed(() => network.value?.name_label || '-')
 
-// const ipAddress = computed(() => (pif.value?.ip ? pif.value.ip : '-'))
-//
-// const ipV6Address = computed(() => {
-//   const ipv6 = pif.value?.ipv6?.filter(ip => ip.trim() !== '') || []
-//   return ipv6.length > 0 ? ipv6 : []
-// })
-
 const networkNbd = computed(() => (network.value?.nbd ? t('on') : t('off')))
 
 const networkTags = computed(() => (network.value?.tags?.length ? network.value.tags : '-'))
@@ -396,7 +388,7 @@ const byteFormatter = computed(() => (value: number) => {
 </script>
 
 <style scoped lang="postcss">
-.pif-panel {
+.host-pifs-side-panel {
   width: 40rem;
   border-top: none;
 }
@@ -415,15 +407,18 @@ const byteFormatter = computed(() => (value: number) => {
     gap: 0.8rem;
   }
 
-  .ip-address {
-    display: flex;
-  }
+  .ip-addresses {
+    align-items: flex-start;
+    .ip-address-item {
+      display: flex;
+      align-items: center;
+      margin-bottom: 0.4rem;
+      justify-content: space-between;
 
-  .ip-adresses {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
   }
 }
 </style>
diff --git a/@xen-orchestra/web/src/components/host/HostPifsTable.vue b/@xen-orchestra/web/src/components/host/HostPifsTable.vue
@@ -178,17 +178,10 @@ const getPifVlan = (pif: XoPif) => (pif.vlan !== -1 ? pif.vlan.toString() : t('n
 
 const getIPv6Formatted = (pif: XoPif) => pif.ipv6.filter(ip => ip.trim() !== '').length
 
-const getIpMode = (pif: XoPif) => {
-  switch (pif.mode) {
-    case 'Static':
-      return t('static')
-    case 'DHCP':
-      return t('dhcp')
-    case 'None':
-      return t('none')
-    default:
-      return t('unknown')
-  }
+const getIpMode = (ipMode: string) => {
+  if (ipMode === 'Static') return t('static')
+  if (ipMode === 'DHCP') return t('dhcp')
+  return t('none')
 }
 
 const searchQuery = ref('')
@@ -245,7 +238,7 @@ const { visibleColumns, rows } = useTable('pifs', filteredPifs, {
       { label: t('ip-addresses') }
     ),
     define('mac', record => record.mac, { label: t('mac-addresses') }),
-    define('mode', record => getIpMode(record), { label: t('ip-mode') }),
+    define('mode', record => getIpMode(record.mode), { label: t('ip-mode') }),
     define('more', noop, { label: '', isHideable: false }),
   ],
 })