feat(xo-6): handle None values

@xen-orchestra/web-core/lib/locales/en.json

@@ -76,6 +76,7 @@
   "network-block-device": "Network block device",
   "network-information": "Network Information",
   "no-data": "No data",
+  "none": "None",
   "object-not-found": "Object {id} can't be found…",
   "off": "Off",
   "on": "On",
@@ -118,6 +119,7 @@
 
   "total": "Total",
   "total-cpus": "Total CPUs",
+  "unknown": "Unknown",
   "uuid": "Uuid",
   "vlan": "VLAN",
   "vms": "VMs"

@xen-orchestra/web-core/lib/locales/fr.json

@@ -76,6 +76,7 @@
   "network-block-device": "Appareil de blocage réseau",
   "network-information": "Information du réseau",
   "no-data": "Aucune donnée",
+  "none": "Aucun",
   "object-not-found": "L'objet {id} est introuvable…",
   "off": "Éteint",
   "on": "Allumé",
@@ -117,6 +118,7 @@
 
   "total": "Total",
   "total-cpus": "Total CPUs",
+  "unknown": "Inconnu",
   "uuid": "Uuid",
   "vlan": "VLAN",
   "vms": "VMs"

@xen-orchestra/web/src/components/pif/PifPanel.vue

@@ -28,7 +28,7 @@
             {{ $t('network') }}
           </template>
           <template #value>
-            {{ getNetworkData(pif, 'name_label') }}
+            {{ getNetworkData('name_label') }}
           </template>
           <template #addons>
             <UiButtonIcon :icon="faCopy" size="medium" accent="info" />
@@ -50,23 +50,23 @@
             {{ $t('pif-status') }}
           </template>
           <template #value>
-            <PifStatus :icon="faCircle" :pif="props.pif" card />
+            <PifStatus :pif="props.pif" card />
           </template>
         </VtsCardRowKeyValue>
         <VtsCardRowKeyValue>
           <template #key>
             {{ $t('physical-interface-status') }}
           </template>
           <template #value>
-            <PifStatus :icon="faCircle" :pif="props.pif" card />
+            <PifStatus :pif="props.pif" card />
           </template>
         </VtsCardRowKeyValue>
         <VtsCardRowKeyValue>
           <template #key>
             {{ $t('vlan') }}
           </template>
           <template #value>
-            {{ props.pif.vlan }}
+            {{ getPifData('vlan') }}
           </template>
           <template #addons>
             <UiButtonIcon :icon="faCopy" size="medium" accent="info" />
@@ -77,8 +77,9 @@
             {{ $t('tags') }}
           </template>
           <template #value>
-            <div class="tags">
-              <UiTag v-for="tag in getTags(pif)" :key="tag" accent="info" variant="secondary">
+            <div v-if="!Array.isArray(getNetworkData('tags'))">{{ getNetworkData('tags') }}</div>
+            <div v-else class="tags">
+              <UiTag v-for="tag in getNetworkData('tags')" :key="tag" accent="info" variant="secondary">
                 {{ tag }}
               </UiTag>
             </div>
@@ -95,7 +96,8 @@
             {{ $t('ip-addresses') }}
           </template>
           <template #value>
-            <p v-for="ip in allIps" :key="ip" v-tooltip class="ip-address text-ellipsis">{{ ip }}</p>
+            <p v-for="ip in allIps" :key="ip" v-tooltip class="ip-address text-ellipsis">{{ getPifData('ip') }}</p>
+            <p v-if="!allIps.length">{{ getPifData('ip') }}</p>
           </template>
           <template #addons>
             <UiButtonIcon v-if="allIps.length > 1" :icon="faEllipsis" size="medium" accent="info" />
@@ -118,7 +120,7 @@
             {{ $t('netmask') }}
           </template>
           <template #value>
-            {{ props.pif.netmask }}
+            {{ getPifData('netmask') }}
           </template>
           <template #addons>
             <UiButtonIcon :icon="faCopy" size="medium" accent="info" />
@@ -129,7 +131,7 @@
             {{ $t('dns') }}
           </template>
           <template #value>
-            {{ props.pif.dns }}
+            {{ getPifData('dns') }}
           </template>
           <template #addons>
             <UiButtonIcon :icon="faCopy" size="medium" accent="info" />
@@ -140,7 +142,7 @@
             {{ $t('gateway') }}
           </template>
           <template #value>
-            {{ props.pif.gateway }}
+            {{ getPifData('gateway') }}
           </template>
           <template #addons>
             <UiButtonIcon :icon="faCopy" size="medium" accent="info" />
@@ -183,7 +185,7 @@
             {{ $t('network-block-device') }}
           </template>
           <template #value>
-            {{ $t(`${getNetworkData(pif, 'nbd')}`) }}
+            {{ $t(`${getNetworkData('nbd')}`) }}
           </template>
           <template #addons>
             <UiButtonIcon :icon="faCopy" size="medium" accent="info" />
@@ -194,7 +196,7 @@
             {{ $t('default-locking-mode') }}
           </template>
           <template #value>
-            {{ $t(`${getNetworkData(pif, 'defaultIsLocked')}`) }}
+            {{ $t(`${getNetworkData('defaultIsLocked')}`) }}
           </template>
           <template #addons>
             <UiButtonIcon :icon="faCopy" size="medium" accent="info" />
@@ -232,17 +234,25 @@ const allIps = computed(() => {
   return [props.pif.ip, ...props.pif.ipv6].filter(ip => ip)
 })
 
-const getNetworkData = (pif: XoPif, type: keyof XoNetwork) => {
-  const network: XoNetwork = get(pif.$network)!
-  if (type === 'name_label') {
-    return network.name_label ? network.name_label : 'Unknown'
-  } else if (type === 'nbd' || type === 'defaultIsLocked') {
-    return network[type] ? 'on' : 'off'
+const getNetworkData = (type: keyof XoNetwork) => {
+  const network: XoNetwork = get(props.pif.$network)!
+
+  switch (type) {
+    case 'name_label':
+      return network.name_label || '-'
+    case 'nbd':
+    case 'defaultIsLocked':
+      return network[type] ? 'on' : 'off'
+    case 'tags':
+      return network.tags.length ? network.tags : '-'
+    default:
+      return undefined
   }
 }
-const getTags = (pif: XoPif) => {
-  const network: XoNetwork = get(pif.$network)!
-  return network.tags.length > 0 ? network.tags : []
+
+const getPifData = (type: keyof XoPif) => {
+  const value = type === 'vlan' ? props.pif.vlan : props.pif[type]
+  return value === -1 || value === '' ? '-' : value
 }
 </script>
 

@xen-orchestra/web/src/components/pif/PifStatus.vue

@@ -1,6 +1,6 @@
 <template>
   <UiInfo class="pif-status text-ellipsis" :accent="getStatusProps(status).accent">
-    <p class="text-ellipsis">{{ getStatusProps(status).text }}</p>
+    <p class="text-ellipsis" :class="{ card }">{{ getStatusProps(status).text }}</p>
   </UiInfo>
 </template>
 
@@ -41,7 +41,7 @@ const getStatusProps = (status: NetworkStatus) => states.value[status as Network
 </script>
 
 <style scoped lang="postcss">
-.pif-status p {
+p:not(.card) {
   font-size: 1.4rem !important;
 }
 </style>

@xen-orchestra/web/src/components/pif/PifTable.vue

@@ -56,7 +56,7 @@
           >
             <td v-for="column of row.visibleColumns" :key="column.id" class="typo p2-regular">
               <UiCheckbox v-if="column.id === 'checkbox'" v-model="selected" accent="info" :value="row.id" />
-              <div v-if="column.id === 'network'" class="network">
+              <div v-if="column.id === 'network' && getNetworkName(row.value)" class="network">
                 <UiComplexIcon size="medium">
                   <VtsIcon :icon="faNetworkWired" accent="current" />
                   <VtsIcon accent="success" :icon="faCircle" :overlay-icon="faCheck" />
@@ -65,9 +65,11 @@
               </div>
               <div v-if="column.id === 'device'" v-tooltip class="text-ellipsis">{{ row.value.device }}</div>
               <div v-if="column.id === 'status'" v-tooltip>
-                <PifStatus :pif="row.value" />
+                <PifStatus class="status" :pif="row.value" />
+              </div>
+              <div v-if="column.id === 'vlan'" v-tooltip class="text-ellipsis">
+                {{ getPifData(row.value, 'vlan') }}
               </div>
-              <div v-if="column.id === 'vlan'" v-tooltip class="text-ellipsis">{{ row.value.vlan }}</div>
               <div v-if="column.id === 'ip'" v-tooltip class="text-ellipsis">{{ row.value.ip }}</div>
               <div v-if="column.id === 'mac'" v-tooltip class="text-ellipsis">{{ row.value.mac }}</div>
               <div v-if="column.id === 'mode'" v-tooltip class="text-ellipsis">{{ row.value.mode }}</div>
@@ -136,7 +138,12 @@ const { get, isReady } = useNetworkStore().subscribe()
 
 const getNetworkName = (pif: XoPif) => {
   const network: XoNetwork = get(pif.$network)!
-  return network.name_label ? network.name_label : 'Unknown'
+  return network.name_label ? network.name_label : ''
+}
+
+const getPifData = (pif: XoPif, type: keyof XoPif) => {
+  const value = type === 'vlan' ? pif.vlan : pif[type]
+  return value === -1 || value === '' ? '' : value
 }
 
 const searchQuery = ref('')
@@ -263,6 +270,10 @@ const selectRow = (rowId: XoPif['id']) => {
       display: flex;
       gap: 1.6rem;
     }
+
+    .status {
+      font-size: 8.4rem !important;
+    }
   }
 
   @media (max-width: 1500px) {