feat(xo-6): handle empty table

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

@@ -74,6 +74,8 @@
   "network-block-device": "Network block device",
   "new": "New",
   "no-data": "No data",
+  "no-result": "No result",
+  "no-network-detected": "No network detected",
   "none": "None",
   "object-not-found": "Object {id} can't be found…",
   "open-console-in-new-tab": "Open console in new tab",

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

@@ -74,6 +74,8 @@
   "network-block-device": "Dispositif de blocage réseau",
   "new": "Nouveau",
   "no-data": "Aucune donnée",
+  "no-result": "Aucun résulat",
+  "no-network-detected": "Aucun réseau détécté",
   "none": "Aucun",
   "object-not-found": "L'objet {id} est introuvable…",
   "open-console-in-new-tab": "Ouvrir la console dans un nouvel onglet",

@xen-orchestra/web/src/components/pool/PoolHostInternalNetworkTable.vue

@@ -69,6 +69,15 @@
             </tr>
           </tbody>
         </VtsTable>
+        <VtsStateHero v-if="searchQuery && filteredNetworks.length === 0" type="table" image="no-result">
+          <div>{{ $t('no-result') }}</div>
+        </VtsStateHero>
+        <VtsStateHero v-if="hostInternalNetwork.length === 0" type="table" image="no-data">
+          <div>{{ $t('no-network-detected') }}</div>
+        </VtsStateHero>
+        <VtsStateHero v-if="hasError" type="table" image="error">
+          <div>{{ $t('error-no-data') }}</div>
+        </VtsStateHero>
       </div>
       <UiTopBottomTable
         :selected-items="selected.length"
@@ -82,6 +91,7 @@
 <script setup lang="ts">
 import type { XoNetwork } from '@/types/xo/network.type'
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
 import ColumnTitle from '@core/components/table/ColumnTitle.vue'
 import VtsTable from '@core/components/table/VtsTable.vue'
 import UiButton from '@core/components/ui/button/UiButton.vue'
@@ -110,6 +120,7 @@ import { useI18n } from 'vue-i18n'
 const props = defineProps<{
   hostInternalNetwork: XoNetwork[]
   isReady: boolean
+  hasError: boolean
 }>()
 const { t } = useI18n()
 const reactiveHostInternalNetworks = ref<XoNetwork[]>(props.hostInternalNetwork || [])

@xen-orchestra/web/src/components/pool/PoolNetworksTable.vue

@@ -84,6 +84,12 @@
         <VtsStateHero v-if="searchQuery && filteredNetworks.length === 0" type="table" image="no-result">
           <div>{{ $t('no-result') }}</div>
         </VtsStateHero>
+        <VtsStateHero v-if="networks.length === 0" type="table" image="no-data">
+          <div>{{ $t('no-network-detected') }}</div>
+        </VtsStateHero>
+        <VtsStateHero v-if="hasError" type="table" image="error">
+          <div>{{ $t('error-no-data') }}</div>
+        </VtsStateHero>
       </div>
       <UiTopBottomTable
         :selected-items="selected.length"
@@ -131,6 +137,7 @@ import { useI18n } from 'vue-i18n'
 const props = defineProps<{
   networks: XoNetwork[]
   isReady: boolean
+  hasError: boolean
   selectedRowId: string | null
 }>()
 

@xen-orchestra/web/src/pages/pool/[id]/network.vue

@@ -4,12 +4,14 @@
       <PoolNetworksTable
         :networks="networksWithPIFs"
         :is-ready
+        :has-error
         :selected-row-id="selectedNetworkRowId"
         @row-select-network="selectNetwork"
       />
       <PoolHostInternalNetworkTable
         :host-internal-network="hostInternalNetworks"
         :is-ready
+        :has-error
         :selected-row-id="selectedHostInternalRowId"
         @row-select-host-internal-network="selectNetwork"
       />
@@ -34,15 +36,14 @@ import UiCard from '@core/components/ui/card/UiCard.vue'
 import UiPanel from '@core/components/ui/panel/UiPanel.vue'
 import { ref } from 'vue'
 
-const { networksWithPIFs, hostInternalNetworks, isReady } = useNetworkStore().subscribe()
+const { networksWithPIFs, hostInternalNetworks, isReady, hasError } = useNetworkStore().subscribe()
 const { pifsByNetwork } = usePifStore().subscribe()
 
 const selectedNetwork = ref<XoNetwork | undefined>(undefined)
 const selectedPIFs = ref<XoPif[] | undefined>(undefined)
 
 const selectedNetworkRowId = ref<string | null>(null)
 const selectedHostInternalRowId = ref<string | null>(null)
-
 const selectNetwork = (payload: { item: XoNetwork; table: string }) => {
   if (payload.table === 'network') {
     selectedHostInternalRowId.value = null