From 08af27b5fbde5cb08114c8db9644c64e0ddc781d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastian=20Czech?= <czechsebastian@icloud.com>
Date: Fri, 15 Nov 2024 15:03:14 +0100
Subject: [PATCH] feat(xo-6): implement network view

---
 @xen-orchestra/lite/src/locales/en.json       |   6 -
 @xen-orchestra/lite/src/locales/fr.json       |   6 -
 .../components/card/VtsCardRowKeyValue.vue    |   1 +
 .../connection-status/VtsConnectionStatus.vue |   6 +-
 .../components/state-hero/VtsStateHero.vue    |   5 +
 .../lib/components/table/ColumnTitle.vue      |   7 +-
 .../lib/components/table/VtsDataTable.vue     |  35 ++
 .../lib/components/ui/card/UiCard.vue         |   2 +-
 .../lib/components/ui/checkbox/UiCheckbox.vue |   2 +-
 .../lib/components/ui/input/UiInput.vue       |   1 +
 .../lib/components/ui/panel/UiPanel.vue       |   2 +
 .../ui/table-pagination/UiTablePagination.vue |  51 ++-
 .../table/multi-select.composable.ts          |  32 ++
 @xen-orchestra/web-core/lib/locales/en.json   |  35 +-
 @xen-orchestra/web-core/lib/locales/fr.json   |  35 +-
 .../web/src/components/pif/PifRow.vue         |  90 ++++++
 .../web/src/components/pif/PifStatus.vue      |  31 ++
 .../web/src/components/pool/PoolHeader.vue    |   6 +-
 .../pool/PoolHostInternalNetworkTable.vue     | 272 ++++++++++++++++
 .../components/pool/PoolNetworksSidePanel.vue | 213 ++++++++++++
 .../src/components/pool/PoolNetworksTable.vue | 304 ++++++++++++++++++
 .../web/src/pages/pool/[id]/networks.vue      |  31 ++
 .../src/stores/xo-rest-api/network.store.ts   |  14 +-
 .../web/src/stores/xo-rest-api/pif.store.ts   |  33 +-
 .../web/src/types/xo/network.type.ts          |   5 +
 .../web/src/utils/xo-api-definition.util.ts   |   4 +-
 @xen-orchestra/web/typed-router.d.ts          |   1 +
 27 files changed, 1188 insertions(+), 42 deletions(-)
 create mode 100644 @xen-orchestra/web-core/lib/components/table/VtsDataTable.vue
 create mode 100644 @xen-orchestra/web-core/lib/composables/table/multi-select.composable.ts
 create mode 100644 @xen-orchestra/web/src/components/pif/PifRow.vue
 create mode 100644 @xen-orchestra/web/src/components/pif/PifStatus.vue
 create mode 100644 @xen-orchestra/web/src/components/pool/PoolHostInternalNetworkTable.vue
 create mode 100644 @xen-orchestra/web/src/components/pool/PoolNetworksSidePanel.vue
 create mode 100644 @xen-orchestra/web/src/components/pool/PoolNetworksTable.vue
 create mode 100644 @xen-orchestra/web/src/pages/pool/[id]/networks.vue

diff --git a/@xen-orchestra/lite/src/locales/en.json b/@xen-orchestra/lite/src/locales/en.json
index a9217ed7ae1..50a4435e4eb 100644
--- a/@xen-orchestra/lite/src/locales/en.json
+++ b/@xen-orchestra/lite/src/locales/en.json
@@ -43,7 +43,6 @@
   "cpu-provisioning": "CPU provisioning",
   "cpu-provisioning-warning": "The number of vCPUs allocated exceeds the number of physical CPUs available. System performance could be affected",
   "cpu-usage": "CPU usage",
-  "delete": "Delete",
   "delete-vms": "Delete 1 VM | Delete {n} VMs",
   "deploy": "Deploy",
   "deploy-xoa": "Deploy XOA",
@@ -58,11 +57,8 @@
   "deploy-xoa-status.waiting": "Waiting for XOA to respond…",
 
   "descending": "descending",
-  "description": "Description",
   "dhcp": "DHCP",
-  "disabled": "Disabled",
   "display": "Display",
-  "dns": "DNS",
   "do-you-have-needs": "You have needs and/or expectations? Let us know",
   "documentation": "Documentation",
   "edit-config": "Edit config",
@@ -178,7 +174,6 @@
   "migrate-n-vms": "Migrate 1 VM | Migrate {n} VMs",
   "n-hosts-awaiting-patch": "{n} host is awaiting this patch | {n} hosts are awaiting this patch",
   "n-missing": "{n} missing",
-  "name": "Name",
   "netmask": "Netmask",
   "network-download": "Download",
   "network-throughput": "Network throughput",
@@ -187,7 +182,6 @@
   "news": "News",
   "news-name": "{name} news",
   "no-alarm-triggered": "No alarm triggered",
-  "no-result": "No result",
   "no-selected-vm-can-be-exported": "No selected VM can be exported",
   "no-selected-vm-can-be-migrated": "No selected VM can be migrated",
   "no-tasks": "No tasks",
diff --git a/@xen-orchestra/lite/src/locales/fr.json b/@xen-orchestra/lite/src/locales/fr.json
index d9f86ea546e..f8052b82f3d 100644
--- a/@xen-orchestra/lite/src/locales/fr.json
+++ b/@xen-orchestra/lite/src/locales/fr.json
@@ -43,7 +43,6 @@
   "cpu-provisioning": "Provisionnement CPU",
   "cpu-provisioning-warning": "Le nombre de vCPU alloués dépasse le nombre de CPU physique disponible. Les performances du système pourraient être affectées",
   "cpu-usage": "Utilisation CPU",
-  "delete": "Supprimer",
   "delete-vms": "Supprimer 1 VM | Supprimer {n} VMs",
   "deploy": "Déployer",
   "deploy-xoa": "Déployer XOA",
@@ -58,10 +57,7 @@
   "deploy-xoa-status.waiting": "En attente de réponse de la XOA…",
 
   "descending": "descendant",
-  "description": "Description",
   "dhcp": "DHCP",
-  "dns": "DNS",
-  "disabled": "Désactivé",
   "display": "Affichage",
   "do-you-have-needs": "Vous avez des besoins et/ou des attentes ? Faites le nous savoir",
   "documentation": "Documentation",
@@ -178,7 +174,6 @@
   "migrate-n-vms": "Migrer 1 VM | Migrer {n} VMs",
   "n-hosts-awaiting-patch": "{n} hôte attend ce patch | {n} hôtes attendent ce patch",
   "n-missing": "{n} manquant | {n} manquants",
-  "name": "Nom",
   "netmask": "Masque réseau",
   "network-download": "Descendant",
   "network-throughput": "Débit du réseau",
@@ -187,7 +182,6 @@
   "news": "Actualités",
   "news-name": "Actualités {name}",
   "no-alarm-triggered": "Aucune alarme déclenchée",
-  "no-result": "Aucun résultat",
   "no-selected-vm-can-be-exported": "Aucune VM sélectionnée ne peut être exportée",
   "no-selected-vm-can-be-migrated": "Aucune VM sélectionnée ne peut être migrée",
   "no-tasks": "Aucune tâche",
diff --git a/@xen-orchestra/web-core/lib/components/card/VtsCardRowKeyValue.vue b/@xen-orchestra/web-core/lib/components/card/VtsCardRowKeyValue.vue
index 513e358fd97..04d4f722847 100644
--- a/@xen-orchestra/web-core/lib/components/card/VtsCardRowKeyValue.vue
+++ b/@xen-orchestra/web-core/lib/components/card/VtsCardRowKeyValue.vue
@@ -30,6 +30,7 @@ const slots = defineSlots<{
 
   .key {
     min-width: 12rem;
+    max-width: 12rem;
     overflow-wrap: break-word;
     color: var(--color-neutral-txt-secondary);
   }
diff --git a/@xen-orchestra/web-core/lib/components/connection-status/VtsConnectionStatus.vue b/@xen-orchestra/web-core/lib/components/connection-status/VtsConnectionStatus.vue
index cd0288a2541..c1526c66874 100644
--- a/@xen-orchestra/web-core/lib/components/connection-status/VtsConnectionStatus.vue
+++ b/@xen-orchestra/web-core/lib/components/connection-status/VtsConnectionStatus.vue
@@ -9,7 +9,11 @@ import UiInfo, { type InfoAccent } from '@core/components/ui/info/UiInfo.vue'
 import { computed, type ComputedRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-type ConnectionStatus = 'connected' | 'disconnected' | 'partially-connected' | 'disconnected-from-physical-device'
+export type ConnectionStatus =
+  | 'connected'
+  | 'disconnected'
+  | 'partially-connected'
+  | 'disconnected-from-physical-device'
 type ConnectionStatusesMap = Record<ConnectionStatus, { text: string; accent: InfoAccent }>
 
 const { status } = defineProps<{
diff --git a/@xen-orchestra/web-core/lib/components/state-hero/VtsStateHero.vue b/@xen-orchestra/web-core/lib/components/state-hero/VtsStateHero.vue
index 134fea7f428..40fd6e242ab 100644
--- a/@xen-orchestra/web-core/lib/components/state-hero/VtsStateHero.vue
+++ b/@xen-orchestra/web-core/lib/components/state-hero/VtsStateHero.vue
@@ -107,9 +107,12 @@ const imageSrc = computed(() => {
     gap: 4rem;
     justify-content: unset;
     padding-top: 8rem;
+    position: relative;
 
     .text {
       order: 1;
+      position: sticky;
+      top: 2rem;
     }
 
     .loader {
@@ -120,6 +123,8 @@ const imageSrc = computed(() => {
     .image {
       order: 2;
       width: 80%;
+      position: sticky;
+      top: 10rem;
     }
   }
 
diff --git a/@xen-orchestra/web-core/lib/components/table/ColumnTitle.vue b/@xen-orchestra/web-core/lib/components/table/ColumnTitle.vue
index 85127619f52..1b7ec7916c1 100644
--- a/@xen-orchestra/web-core/lib/components/table/ColumnTitle.vue
+++ b/@xen-orchestra/web-core/lib/components/table/ColumnTitle.vue
@@ -3,12 +3,12 @@
   <MenuList :disabled placement="bottom-start" border>
     <template #trigger="{ open, isOpen }">
       <th
-        :class="{ interactive, disabled, focus: isOpen }"
+        :class="[headerClass, { interactive, disabled, focus: isOpen }]"
         class="column-header"
         @click="ev => (interactive ? open(ev) : noop())"
       >
-        <div class="content">
-          <span class="label">
+        <div class="content text-ellipsis">
+          <span v-tooltip class="label">
             <VtsIcon :icon accent="current" />
             <slot />
           </span>
@@ -58,6 +58,7 @@ const props = withDefaults(
     icon?: IconDefinition
     interactive?: boolean
     disabled?: boolean
+    headerClass?: string
   }>(),
   {
     disabled: false,
diff --git a/@xen-orchestra/web-core/lib/components/table/VtsDataTable.vue b/@xen-orchestra/web-core/lib/components/table/VtsDataTable.vue
new file mode 100644
index 00000000000..494e564156d
--- /dev/null
+++ b/@xen-orchestra/web-core/lib/components/table/VtsDataTable.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="table-container">
+    <VtsLoadingHero :disabled="isReady" type="table">
+      <VtsTable class="table" vertical-border>
+        <thead>
+          <slot name="thead" />
+        </thead>
+        <tbody>
+          <slot name="tbody" />
+        </tbody>
+      </VtsTable>
+    </VtsLoadingHero>
+    <VtsErrorNoDataHero v-if="hasError" type="table" />
+    <VtsStateHero v-if="noDataMessage" type="table" image="no-data">
+      {{ noDataMessage }}
+    </VtsStateHero>
+  </div>
+</template>
+
+<script setup lang="ts">
+import VtsErrorNoDataHero from '@core/components/state-hero/VtsErrorNoDataHero.vue'
+import VtsLoadingHero from '@core/components/state-hero/VtsLoadingHero.vue'
+import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
+import VtsTable from '@core/components/table/VtsTable.vue'
+
+defineProps<{
+  isReady?: boolean
+  hasError?: boolean
+  noDataMessage?: string
+}>()
+defineSlots<{
+  thead(): any
+  tbody(): any
+}>()
+</script>
diff --git a/@xen-orchestra/web-core/lib/components/ui/card/UiCard.vue b/@xen-orchestra/web-core/lib/components/ui/card/UiCard.vue
index e22ef9bcd12..ceb7fa6281b 100644
--- a/@xen-orchestra/web-core/lib/components/ui/card/UiCard.vue
+++ b/@xen-orchestra/web-core/lib/components/ui/card/UiCard.vue
@@ -18,7 +18,7 @@ defineSlots<{
 .ui-card {
   display: flex;
   gap: 2.4rem;
-  padding: 2.4rem;
+  padding: 1.6rem;
   flex-direction: column;
   background-color: var(--color-neutral-background-primary);
   border: 0.1rem solid var(--color-neutral-border);
diff --git a/@xen-orchestra/web-core/lib/components/ui/checkbox/UiCheckbox.vue b/@xen-orchestra/web-core/lib/components/ui/checkbox/UiCheckbox.vue
index bc8860c6d8a..b0f7c6b5ca4 100644
--- a/@xen-orchestra/web-core/lib/components/ui/checkbox/UiCheckbox.vue
+++ b/@xen-orchestra/web-core/lib/components/ui/checkbox/UiCheckbox.vue
@@ -39,7 +39,7 @@ const props = defineProps<{
   wrapperAttrs?: LabelHTMLAttributes
 }>()
 
-const checkboxModel = defineModel<boolean | undefined>({ default: undefined })
+const checkboxModel = defineModel<boolean | undefined | string[]>({ default: undefined })
 
 const slots = defineSlots<{
   default?(): any
diff --git a/@xen-orchestra/web-core/lib/components/ui/input/UiInput.vue b/@xen-orchestra/web-core/lib/components/ui/input/UiInput.vue
index 30e75dba17b..540eed1538b 100644
--- a/@xen-orchestra/web-core/lib/components/ui/input/UiInput.vue
+++ b/@xen-orchestra/web-core/lib/components/ui/input/UiInput.vue
@@ -69,6 +69,7 @@ const labelAccent = computed(() => (accent === 'info' ? 'neutral' : accent))
   position: relative;
   display: flex;
   flex-direction: column;
+  flex: 1;
   gap: 0.4rem;
 
   .input {
diff --git a/@xen-orchestra/web-core/lib/components/ui/panel/UiPanel.vue b/@xen-orchestra/web-core/lib/components/ui/panel/UiPanel.vue
index bbb0c10e60d..319355978c0 100644
--- a/@xen-orchestra/web-core/lib/components/ui/panel/UiPanel.vue
+++ b/@xen-orchestra/web-core/lib/components/ui/panel/UiPanel.vue
@@ -28,6 +28,7 @@ const slots = defineSlots<{
   flex-direction: column;
   border: 0.1rem solid var(--color-neutral-border);
   background-color: var(--color-neutral-background-secondary);
+  position: relative;
 
   .header {
     border-bottom: 0.1rem solid var(--color-neutral-border);
@@ -44,6 +45,7 @@ const slots = defineSlots<{
     flex-direction: column;
     padding: 0.8rem;
     gap: 0.8rem;
+    height: 100%;
   }
 
   &.error {
diff --git a/@xen-orchestra/web-core/lib/components/ui/table-pagination/UiTablePagination.vue b/@xen-orchestra/web-core/lib/components/ui/table-pagination/UiTablePagination.vue
index b7b4bcd7be9..6a5d330d66f 100644
--- a/@xen-orchestra/web-core/lib/components/ui/table-pagination/UiTablePagination.vue
+++ b/@xen-orchestra/web-core/lib/components/ui/table-pagination/UiTablePagination.vue
@@ -12,7 +12,7 @@
     </span>
     <span class="typo p3-regular label show">{{ $t('core.show-by') }}</span>
     <div class="dropdown-wrapper">
-      <select v-model="pageSize" :disabled class="dropdown typo c3-regular" @change="goToFirstPage">
+      <select v-model="localPageSize" :disabled="disabled" class="dropdown typo c3-regular" @change="goToFirstPage">
         <option v-for="option in pageSizeOptions" :key="option" :value="option" class="typo p2-medium">
           {{ option }}
         </option>
@@ -33,7 +33,7 @@ import {
   faAngleRight,
 } from '@fortawesome/free-solid-svg-icons'
 import { useOffsetPagination } from '@vueuse/core'
-import { computed, ref, watch } from 'vue'
+import { computed, ref, watch, watchEffect } from 'vue'
 
 export type PaginationPayload = {
   currentPage: number
@@ -42,17 +42,42 @@ export type PaginationPayload = {
   endIndex: number
 }
 
-const { totalItems, disabled = false } = defineProps<{
+const {
+  totalItems,
+  disabled = false,
+  currPage,
+  perPage,
+  startIndex,
+  endIndex,
+} = defineProps<{
   totalItems: number
   disabled?: boolean
+  currPage: number
+  perPage: number
+  startIndex: number
+  endIndex: number
 }>()
 
 const emit = defineEmits<{
   change: [payload: PaginationPayload]
+  'update:currPage': [value: number]
+  'update:per-page': [value: number]
+  'update:start-index': [value: number]
+  'update:end-index': [value: number]
 }>()
 
-const pageSize = ref(50)
+const localPageSize = ref(perPage)
+const localCurrentPage = ref(currPage)
 const pageSizeOptions = [10, 50, 100, 150, 200]
+
+watch([() => perPage, () => currPage], ([newPerPage, newCurrPage], [oldPerPage, oldCurrPage]) => {
+  if (newPerPage !== oldPerPage) {
+    localPageSize.value = newPerPage
+  }
+  if (newCurrPage !== oldCurrPage) {
+    localCurrentPage.value = newCurrPage
+  }
+})
 const {
   currentPage,
   currentPageSize,
@@ -63,10 +88,11 @@ const {
   next: goToNextPage,
 } = useOffsetPagination({
   total: () => totalItems,
-  pageSize,
+  pageSize: localPageSize,
+  page: localCurrentPage,
 })
-const startIndex = computed(() => (currentPage.value - 1) * currentPageSize.value + 1)
-const endIndex = computed(() => Math.min(currentPage.value * currentPageSize.value, totalItems))
+const localStartIndex = computed(() => (currentPage.value - 1) * currentPageSize.value + 1)
+const localEndIndex = computed(() => Math.min(currentPage.value * currentPageSize.value, totalItems))
 
 const goToFirstPage = () => {
   currentPage.value = 1
@@ -75,12 +101,19 @@ const goToLastPage = () => {
   currentPage.value = pageCount.value
 }
 
+watchEffect(() => {
+  emit('update:currPage', localCurrentPage.value)
+  emit('update:per-page', localPageSize.value)
+  emit('update:start-index', localStartIndex.value)
+  emit('update:end-index', localEndIndex.value)
+})
+
 watch([currentPage, currentPageSize], ([newPage, newPageSize]) => {
   emit('change', {
     currentPage: newPage,
     pageSize: newPageSize,
-    startIndex: startIndex.value,
-    endIndex: endIndex.value,
+    startIndex: localStartIndex.value,
+    endIndex: localEndIndex.value,
   })
 })
 </script>
diff --git a/@xen-orchestra/web-core/lib/composables/table/multi-select.composable.ts b/@xen-orchestra/web-core/lib/composables/table/multi-select.composable.ts
new file mode 100644
index 00000000000..d4f900f0bc5
--- /dev/null
+++ b/@xen-orchestra/web-core/lib/composables/table/multi-select.composable.ts
@@ -0,0 +1,32 @@
+import { computed, ref, unref, type MaybeRef, type Ref } from 'vue'
+
+export default function useMultiSelect<T>(usableIds: MaybeRef<T[]>, selectableIds?: MaybeRef<T[]>) {
+  const $selected = ref(new Set()) as Ref<Set<T>>
+
+  const selected = computed({
+    get() {
+      return unref(usableIds).filter(usableId => $selected.value.has(usableId))
+    },
+    set(ids: T[]) {
+      $selected.value = new Set(ids)
+    },
+  })
+
+  const areAllSelected = computed({
+    get() {
+      return (unref(selectableIds) ?? unref(usableIds)).every(id => $selected.value.has(id))
+    },
+    set(value: boolean) {
+      if (value) {
+        $selected.value = new Set(unref(selectableIds) ?? unref(usableIds))
+      } else {
+        $selected.value = new Set()
+      }
+    },
+  })
+
+  return {
+    selected,
+    areAllSelected,
+  }
+}
diff --git a/@xen-orchestra/web-core/lib/locales/en.json b/@xen-orchestra/web-core/lib/locales/en.json
index aeaaed0b2f1..d03d86207ce 100644
--- a/@xen-orchestra/web-core/lib/locales/en.json
+++ b/@xen-orchestra/web-core/lib/locales/en.json
@@ -1,4 +1,5 @@
 {
+  "access-forum": "Access forum",
   "alarms": "Alarms",
 
   "bytes.ki": "KiB",
@@ -6,9 +7,11 @@
   "bytes.gi": "GiB",
 
   "coming-soon": "Coming soon!",
+  "connected": "Connected",
   "console": "Console",
   "console-actions": "Console actions",
   "console-clipboard": "Console clipboard",
+  "copy-info-json": "Copy information into JSON",
 
   "core.copied": "Copied",
   "core.copy-id": "Copy ID",
@@ -19,7 +22,6 @@
   "core.hide": "Hide",
   "core.open": "Open",
   "core.quick-actions": "Quick actions",
-
   "core.search": "Search",
   "core.show-by": "Show by",
 
@@ -32,6 +34,7 @@
   "core.select.unselect": "Unselect all",
   "core.select.n-object-of": "{from} - {to} of {total} objects",
   "core.select.n-selected-of": "{count} selected of {total} objects",
+
   "core.sidebar.close": "Close sidebar",
   "core.sidebar.lock": "Lock sidebar open",
   "core.sidebar.open": "Open sidebar",
@@ -44,30 +47,51 @@
   "dark-mode.disable": "Disable dark mode",
   "dark-mode.auto": "Auto dark mode",
 
-  "access-forum": "Access forum",
-  "connected": "Connected",
   "dashboard": "Dashboard",
+  "dns": "DNS",
+  "default-locking-mode": "Default locking mode",
+  "delete": "Delete",
+  "description": "Description",
+  "device": "Device",
+  "disabled": "Disabled",
   "disconnected": "Disconnected",
   "disconnected-from-physical-device": "Disconnected from physical device",
   "documentation-name": "{name} documentation",
+  "edit": "Edit",
   "error-no-data": "Error, can't collect data.",
   "exit-fullscreen": "Exit fullscreen",
   "fullscreen": "Fullscreen",
   "gateway": "Gateway",
   "hosts": "Hosts",
+  "host-internal-networks": "Host internal networks",
+  "id": "Id",
   "learn-more": "Learn more",
   "loading-in-progress": "Loading in progress…",
+  "locking-mode": "Locking mode",
+  "locking-mode-default": "Default locking mode",
   "log-out": "Log out",
   "master": "Primary host",
+  "mtu": "MTU",
+  "name": "Name",
   "n-vms": "1 VM | {n} VMs",
   "network": "Network",
+  "networks": "Networks",
+  "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…",
+  "off": "Off",
+  "on": "On",
   "open-console-in-new-tab": "Open console in new tab",
   "other": "Other",
   "page-not-found": "This page is not to be found…",
   "partially-connected": "Partially connected",
   "patches": "Patches",
+  "pifs": "PIFs",
+  "pifs-status": "PIFs status",
   "power-on-vm-for-console": "Power on your VM to access its console",
   "power-on-host-for-console": "Power on your host to access its console",
   "professional-support": "Professional support",
@@ -81,8 +105,9 @@
   "stats": "Stats",
   "storage": "Storage",
   "system": "System",
-
+  "table-actions": "Table actions",
   "tasks": "Tasks",
+
   "tasks.n-subtasks": "{n} subtask | {n} subtasks",
   "tasks.no-tasks": "No tasks",
   "tasks.quick-view": "Tasks' quick view",
@@ -93,5 +118,7 @@
 
   "total": "Total",
   "total-cpus": "Total CPUs",
+  "unlocked": "Unlocked",
+  "vlan": "VLAN",
   "vms": "VMs"
 }
diff --git a/@xen-orchestra/web-core/lib/locales/fr.json b/@xen-orchestra/web-core/lib/locales/fr.json
index e89426d8e9c..6633604bf02 100644
--- a/@xen-orchestra/web-core/lib/locales/fr.json
+++ b/@xen-orchestra/web-core/lib/locales/fr.json
@@ -1,4 +1,5 @@
 {
+  "access-forum": "Accès au forum",
   "alarms": "Alarmes",
 
   "bytes.ki": "Kio",
@@ -6,9 +7,11 @@
   "bytes.gi": "Gio",
 
   "coming-soon": "Bientôt disponible !",
+  "connected": "Connecté",
   "console": "Console",
   "console-actions": "Actions de la console",
   "console-clipboard": "Presse-papiers de la console",
+  "copy-info-json": "Copier les informations en JSON",
 
   "core.copied": "Copié",
   "core.copy-id": "Copier l'ID",
@@ -19,7 +22,6 @@
   "core.hide": "Masquer",
   "core.open": "Ouvrir",
   "core.quick-actions": "Actions rapides",
-
   "core.search": "Rechercher",
   "core.show-by": "Afficher par",
 
@@ -32,6 +34,7 @@
   "core.select.unselect": "Tout désélectionner",
   "core.select.n-object-of": "{from} - {to} de {total} objets",
   "core.select.n-selected-of": "{count} objet sélectionné sur {total} | {count} objet sélectionné sur {total} | {count} objets sélectionnés sur {total}",
+
   "core.sidebar.close": "Fermer la barre latérale",
   "core.sidebar.lock": "Verrouiller la barre latérale",
   "core.sidebar.open": "Ouvrir la barre latérale",
@@ -44,30 +47,51 @@
   "dark-mode.disable": "Désactiver le mode sombre",
   "dark-mode.auto": "Mode sombre automatique",
 
-  "access-forum": "Accès au forum",
-  "connected": "Connecté",
   "dashboard": "Tableau de bord",
+  "default-locking-mode": "Mode de verrouillage par defaut",
+  "dns": "DNS",
+  "delete": "Supprimer",
+  "description": "Description",
+  "device": "Appareil",
+  "disabled": "Désactivé",
   "disconnected": "Déconnecté",
   "disconnected-from-physical-device": "Déconnecté de l'appareil physique",
   "documentation-name": "Documentation {name}",
+  "edit": "Modifier",
   "error-no-data": "Erreur, impossible de collecter les données.",
   "exit-fullscreen": "Quitter le plein écran",
   "fullscreen": "Plein écran",
   "gateway": "Passerelle",
   "hosts": "Hôtes",
+  "host-internal-networks": "Réseaux internes de l'hôte",
+  "id": "Id",
   "learn-more": "En savoir plus",
   "loading-in-progress": "Chargement en cours…",
+  "locking-mode": "Mode verrouillé",
+  "locking-mode-default": "Mode verrouillé par défaut",
   "log-out": "Se déconnecter",
   "master": "Hôte primaire",
+  "name": "Nom",
+  "mtu": "MTU",
   "n-vms": "1 VM | {n} VMs",
   "network": "Réseau",
+  "networks": "Réseaux",
+  "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…",
+  "off": "Éteint",
+  "on": "Allumé",
   "open-console-in-new-tab": "Ouvrir la console dans un nouvel onglet",
   "other": "Autre",
   "page-not-found": "Cette page est introuvable…",
   "partially-connected": "Partiellement connecté",
   "patches": "Patches",
+  "pifs": "PIFs",
+  "pifs-status": "Statut des PIFs",
   "power-on-vm-for-console": "Allumez votre VM pour accéder à sa console",
   "power-on-host-for-console": "Allumez votre hôte pour accéder à sa console",
   "professional-support": "Support professionel",
@@ -81,8 +105,9 @@
   "stats": "Stats",
   "storage": "Stockage",
   "system": "Système",
-
+  "table-actions": "Actions du tableau",
   "tasks": "Tâches",
+
   "tasks.n-subtasks": "{n} sous-tâche | {n} sous-tâches",
   "tasks.no-tasks": "Aucune tâche",
   "tasks.quick-view": "Vue rapide des tâches",
@@ -93,5 +118,7 @@
 
   "total": "Total",
   "total-cpus": "Total CPUs",
+  "unlocked": "Déverrouillé",
+  "vlan": "VLAN",
   "vms": "VMs"
 }
diff --git a/@xen-orchestra/web/src/components/pif/PifRow.vue b/@xen-orchestra/web/src/components/pif/PifRow.vue
new file mode 100644
index 00000000000..5317ff2cd63
--- /dev/null
+++ b/@xen-orchestra/web/src/components/pif/PifRow.vue
@@ -0,0 +1,90 @@
+<template>
+  <tr>
+    <td v-if="host" class="typo p3-regular text-ellipsis host">
+      <UiObjectIcon :state="hostState" type="host" size="small" />
+      <a v-tooltip class="text-ellipsis">
+        {{ host.name_label }}
+      </a>
+    </td>
+    <td class="typo p3-regular device text-ellipsis">{{ pif.device }}</td>
+    <td class="typo p3-regular status">
+      <VtsConnectionStatus :status />
+    </td>
+    <td>
+      <UiButtonIcon size="small" accent="info" :icon="faAngleRight" />
+    </td>
+  </tr>
+</template>
+
+<script setup lang="ts">
+import { useHostStore } from '@/stores/xo-rest-api/host.store'
+import type { XoPif } from '@/types/xo/pif.type'
+import VtsConnectionStatus, { type ConnectionStatus } from '@core/components/connection-status/VtsConnectionStatus.vue'
+import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
+import UiObjectIcon from '@core/components/ui/object-icon/UiObjectIcon.vue'
+import { vTooltip } from '@core/directives/tooltip.directive'
+import { faAngleRight } from '@fortawesome/free-solid-svg-icons'
+import { computed } from 'vue'
+
+const { pif } = defineProps<{
+  pif: XoPif
+}>()
+const { records: hosts } = useHostStore().subscribe()
+
+const status = computed<ConnectionStatus>(() => {
+  if (pif.carrier && pif.attached) {
+    return 'connected'
+  }
+  if (!pif.carrier && pif.attached) {
+    return 'disconnected-from-physical-device'
+  }
+  return 'disconnected'
+})
+
+const host = computed(() => hosts.value.find(host => host.id === pif.$host))
+const hostState = computed(() => {
+  return host.value?.power_state ? 'running' : 'disabled'
+})
+// TODO: Select the right row in network table, wait for the PR #8198 to implementation
+// const redirectToHostNetwork = (pif: XoPif) => {
+//   router.push({ name: '/host/[id]/network', params: { id: pif.$host }, query: { pif: pif.id } })
+// }
+</script>
+
+<style scoped lang="postcss">
+td {
+  padding: 0 0.4rem;
+}
+
+td.host {
+  width: 13rem;
+  max-width: 13rem;
+}
+
+td.device {
+  width: 6rem;
+  max-width: 6rem;
+}
+
+td.status {
+  width: 12rem;
+  max-width: 12rem;
+}
+
+tbody tr {
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--color-info-background-hover);
+  }
+}
+
+tbody tr td {
+  color: var(--color-neutral-txt-primary);
+}
+
+tbody tr td a {
+  margin-left: 0.8rem;
+  text-decoration: underline solid #6b63bf;
+}
+</style>
diff --git a/@xen-orchestra/web/src/components/pif/PifStatus.vue b/@xen-orchestra/web/src/components/pif/PifStatus.vue
new file mode 100644
index 00000000000..0d73ae42eee
--- /dev/null
+++ b/@xen-orchestra/web/src/components/pif/PifStatus.vue
@@ -0,0 +1,31 @@
+<template>
+  <VtsConnectionStatus :status />
+</template>
+
+<script setup lang="ts">
+import { usePifStore } from '@/stores/xo-rest-api/pif.store'
+import type { XoNetwork } from '@/types/xo/network.type'
+import VtsConnectionStatus, { type ConnectionStatus } from '@core/components/connection-status/VtsConnectionStatus.vue'
+import { computed } from 'vue'
+
+const { network } = defineProps<{
+  network: XoNetwork
+}>()
+
+const { records: pifs } = usePifStore().subscribe()
+const networkPifs = computed(() => pifs.value.filter(pif => network.PIFs.includes(pif.id)))
+
+const status = computed<ConnectionStatus>(() => {
+  if (networkPifs.value.length === 0) {
+    return 'disconnected'
+  }
+  if (networkPifs.value.every(pif => pif.attached)) {
+    return 'connected'
+  }
+  if (networkPifs.value.some(pif => pif.attached)) {
+    return 'partially-connected'
+  }
+
+  return 'disconnected'
+})
+</script>
diff --git a/@xen-orchestra/web/src/components/pool/PoolHeader.vue b/@xen-orchestra/web/src/components/pool/PoolHeader.vue
index fa9bf1764dd..48f9fd08ffc 100644
--- a/@xen-orchestra/web/src/components/pool/PoolHeader.vue
+++ b/@xen-orchestra/web/src/components/pool/PoolHeader.vue
@@ -7,7 +7,11 @@
     <TabItem disabled>{{ $t('alarms') }}</TabItem>
     <TabItem disabled>{{ $t('stats') }}</TabItem>
     <TabItem disabled>{{ $t('system') }}</TabItem>
-    <TabItem disabled>{{ $t('network') }}</TabItem>
+    <RouterLink v-slot="{ isActive, href }" :to="`/pool/${pool.id}/networks`" custom>
+      <TabItem :active="isActive" :href tag="a">
+        {{ $t('network') }}
+      </TabItem>
+    </RouterLink>
     <TabItem disabled>{{ $t('storage') }}</TabItem>
     <TabItem disabled>{{ $t('tasks') }}</TabItem>
     <RouterLink v-slot="{ isActive, href }" :to="`/pool/${pool.id}/hosts`" custom>
diff --git a/@xen-orchestra/web/src/components/pool/PoolHostInternalNetworkTable.vue b/@xen-orchestra/web/src/components/pool/PoolHostInternalNetworkTable.vue
new file mode 100644
index 00000000000..e12376d1320
--- /dev/null
+++ b/@xen-orchestra/web/src/components/pool/PoolHostInternalNetworkTable.vue
@@ -0,0 +1,272 @@
+<template>
+  <div class="pool-host-internal-networks-table">
+    <UiTitle>
+      {{ $t('host-internal-networks') }}
+      <template #actions>
+        <UiButton disabled :left-icon="faPlus" variant="secondary" accent="info" size="medium">
+          {{ $t('new') }}
+        </UiButton>
+      </template>
+    </UiTitle>
+    <div class="table-actions">
+      <UiQuerySearchBar class="table-query" @search="(value: string) => (searchQuery = value)" />
+      <UiTableActions :title="$t('table-actions')">
+        <UiButton disabled :left-icon="faEdit" variant="tertiary" accent="info" size="medium">
+          {{ $t('edit') }}
+        </UiButton>
+        <UiButton disabled :left-icon="faTrash" variant="tertiary" accent="danger" size="medium">
+          {{ $t('delete') }}
+        </UiButton>
+      </UiTableActions>
+      <div class="selection">
+        <UiTopBottomTable
+          :selected-items="selected.length"
+          :total-items="usableIds.length"
+          @toggle-select-all="toggleSelect"
+        />
+        <UiTablePagination
+          v-model:curr-page="pagination.currentPage"
+          v-model:per-page="pagination.pageSize"
+          v-model:start-index="pagination.startIndex"
+          v-model:end-index="pagination.endIndex"
+          :total-items="usableIds.length"
+        />
+      </div>
+    </div>
+    <div class="table-container">
+      <VtsDataTable
+        :is-ready
+        :has-error
+        :no-data-message="networksByPool.length === 0 ? $t('no-network-detected') : undefined"
+      >
+        <template #thead>
+          <tr>
+            <template v-for="column of visibleColumns" :key="column.id">
+              <th v-if="column.id === 'checkbox'" class="checkbox">
+                <UiCheckbox :v-model="areAllSelected" accent="info" @update:model-value="toggleSelect" />
+              </th>
+              <th v-else-if="column.id === 'more'" class="more">
+                <UiButtonIcon size="small" accent="info" :icon="faEllipsis" />
+                {{ column.label }}
+              </th>
+              <ColumnTitle v-else :id="column.id" :header-class="`col-${column.id}`" :icon="headerIcon[column.id]">
+                {{ column.label }}
+              </ColumnTitle>
+            </template>
+          </tr>
+        </template>
+        <template #tbody>
+          <tr
+            v-for="row of rows"
+            :key="row.id"
+            :class="{ selected: selectedNetworkId === row.id }"
+            @click="selectedNetworkId = row.id"
+          >
+            <td v-for="column of row.visibleColumns" :key="column.id" class="typo p2-regular">
+              <div v-if="column.id === 'checkbox'">
+                <UiCheckbox v-model="selected" accent="info" :value="row.id" />
+              </div>
+              <div v-else-if="column.id === 'more'">
+                <VtsIcon accent="info" :icon="faEllipsis" />
+              </div>
+              <div v-else v-tooltip="{ placement: 'bottom-end' }" class="text-ellipsis">
+                {{ column.value }}
+              </div>
+            </td>
+          </tr>
+        </template>
+      </VtsDataTable>
+      <VtsStateHero v-if="searchQuery && filteredNetworks.length === 0" type="table" image="no-result">
+        {{ $t('no-result') }}
+      </VtsStateHero>
+      <div class="selection">
+        <UiTopBottomTable
+          :selected-items="selected.length"
+          :total-items="usableIds.length"
+          @toggle-select-all="toggleSelect"
+        />
+        <UiTablePagination
+          v-model:curr-page="pagination.currentPage"
+          v-model:per-page="pagination.pageSize"
+          v-model:start-index="pagination.startIndex"
+          v-model:end-index="pagination.endIndex"
+          :total-items="usableIds.length"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useNetworkStore } from '@/stores/xo-rest-api/network.store'
+import type { XoPool } from '@/types/xo/pool.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 VtsDataTable from '@core/components/table/VtsDataTable.vue'
+import UiButton from '@core/components/ui/button/UiButton.vue'
+import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
+import UiCheckbox from '@core/components/ui/checkbox/UiCheckbox.vue'
+import UiQuerySearchBar from '@core/components/ui/query-search-bar/UiQuerySearchBar.vue'
+import UiTableActions from '@core/components/ui/table-actions/UiTableActions.vue'
+import UiTablePagination, { type PaginationPayload } from '@core/components/ui/table-pagination/UiTablePagination.vue'
+import UiTitle from '@core/components/ui/title/UiTitle.vue'
+import UiTopBottomTable from '@core/components/ui/top-bottom-table/UiTopBottomTable.vue'
+import { useRouteQuery } from '@core/composables/route-query.composable'
+import useMultiSelect from '@core/composables/table/multi-select.composable'
+import { useTable } from '@core/composables/table.composable'
+import { vTooltip } from '@core/directives/tooltip.directive'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import {
+  faAlignLeft,
+  faCaretDown,
+  faEdit,
+  faEllipsis,
+  faHashtag,
+  faPlus,
+  faTrash,
+} from '@fortawesome/free-solid-svg-icons'
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { pool } = defineProps<{
+  pool: XoPool
+}>()
+
+const pagination = ref<PaginationPayload>({
+  currentPage: 1,
+  pageSize: 10,
+  startIndex: 0,
+  endIndex: 0,
+})
+
+const { t } = useI18n()
+const { networksWithoutPifs, isReady, hasError } = useNetworkStore().subscribe()
+const networksByPool = computed(() => networksWithoutPifs.value.filter(network => network.$pool === pool.id))
+const selectedNetworkId = useRouteQuery('id')
+
+const findPageById = () => {
+  const index = networksByPool.value.findIndex(network => network.id === selectedNetworkId.value)
+  if (index === -1) return null
+  pagination.value.currentPage = Math.floor(index / pagination.value.pageSize) + 1
+}
+
+watch(
+  () => networksByPool,
+  () => {
+    findPageById()
+  }
+)
+
+const searchQuery = ref('')
+
+const filteredNetworks = computed(() => {
+  let filtered = networksByPool.value
+
+  if (!searchQuery.value) {
+    return networksByPool.value.slice(pagination.value.startIndex - 1, pagination.value.endIndex)
+  }
+
+  filtered = networksByPool.value.filter(network =>
+    Object.values(network).some(value => String(value).toLowerCase().includes(searchQuery.value.toLowerCase()))
+  )
+
+  return filtered.slice(pagination.value.startIndex - 1, pagination.value.endIndex)
+})
+
+const usableIds = computed(() => networksByPool.value.map(network => network.id))
+
+const { selected, areAllSelected } = useMultiSelect(usableIds)
+
+const toggleSelect = () => {
+  selected.value = selected.value.length === 0 ? usableIds.value : []
+}
+
+const getLockingMode = (lockingMode: boolean) => {
+  return lockingMode ? t('disabled') : t('unlocked')
+}
+
+const { visibleColumns, rows } = useTable('networks', filteredNetworks, {
+  rowId: record => record.id,
+  columns: define => [
+    define('checkbox', () => '', { label: '', isHideable: false }),
+    define('name_label', record => record.name_label, { label: t('name') }),
+    define('name_description', record => record.name_description, {
+      label: t('description'),
+    }),
+    define('MTU', record => record.MTU, { label: 'MTU' }),
+    define('default_locking_mode', record => getLockingMode(record.defaultIsLocked), {
+      label: t('locking-mode-default'),
+    }),
+    define('more', () => '', { label: '', isHideable: false }),
+  ],
+})
+
+type networkHeader = 'name_label' | 'name_description' | 'MTU' | 'default_locking_mode' | 'more'
+
+const headerIcon: Record<networkHeader, IconDefinition> = {
+  name_label: faAlignLeft,
+  name_description: faAlignLeft,
+  MTU: faHashtag,
+  default_locking_mode: faCaretDown,
+  more: faEllipsis,
+}
+</script>
+
+<style scoped lang="postcss">
+.pool-host-internal-networks-table,
+.table-actions {
+  display: flex;
+  flex-direction: column;
+}
+
+.pool-host-internal-networks-table {
+  gap: 2.4rem;
+  overflow: hidden;
+
+  .table-actions {
+    gap: 0.8rem;
+  }
+
+  .selection {
+    margin: 0.8rem 0;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .table-container {
+    overflow-x: auto;
+
+    .checkbox,
+    .more {
+      width: 4.5rem;
+    }
+
+    :deep(.col-MTU) {
+      width: 8.5rem;
+    }
+
+    :deep(.col-default_locking_mode) {
+      width: 18rem;
+    }
+
+    :deep(.col-name_label),
+    :deep(.col-name_description) {
+      width: 20rem;
+    }
+
+    tbody tr:hover {
+      cursor: pointer;
+      background-color: var(--color-info-background-hover);
+    }
+
+    tr:last-child {
+      border-bottom: 0.1rem solid var(--color-neutral-border);
+    }
+  }
+
+  .selected {
+    background-color: var(--color-info-background-selected);
+  }
+}
+</style>
diff --git a/@xen-orchestra/web/src/components/pool/PoolNetworksSidePanel.vue b/@xen-orchestra/web/src/components/pool/PoolNetworksSidePanel.vue
new file mode 100644
index 00000000000..ae6ba1ea5f0
--- /dev/null
+++ b/@xen-orchestra/web/src/components/pool/PoolNetworksSidePanel.vue
@@ -0,0 +1,213 @@
+<template>
+  <UiPanel class="pool-network-side-panel">
+    <VtsNoSelectionHero v-if="!network" type="panel" />
+    <template #header>
+      <UiButton disabled variant="tertiary" size="medium" accent="info" :left-icon="faEdit">{{ $t('edit') }}</UiButton>
+      <UiButton disabled variant="tertiary" size="medium" accent="danger" :left-icon="faTrash">
+        {{ $t('delete') }}
+      </UiButton>
+      <UiButtonIcon disabled accent="info" size="medium" :icon="faEllipsis" />
+    </template>
+    <div class="card-container">
+      <UiCard v-if="network">
+        <UiCardTitle class="typo p1-medium">
+          <p v-tooltip="{ placement: 'bottom-end' }" class="text-ellipsis">{{ network.name_label }}</p>
+        </UiCardTitle>
+        <div>
+          <VtsCardRowKeyValue>
+            <template #key>
+              {{ $t('id') }}
+            </template>
+            <template #value>
+              {{ network.id }}
+            </template>
+            <template #addons>
+              <UiButtonIcon
+                v-tooltip="copied && $t('core.copied')"
+                :icon="faCopy"
+                size="medium"
+                accent="info"
+                @click="copy(network.id)"
+              />
+            </template>
+          </VtsCardRowKeyValue>
+          <VtsCardRowKeyValue>
+            <template #key>
+              {{ $t('description') }}
+            </template>
+            <template #value>
+              {{ network.name_description }}
+            </template>
+            <template #addons>
+              <UiButtonIcon
+                v-tooltip="copied && $t('core.copied')"
+                :icon="faCopy"
+                size="medium"
+                accent="info"
+                @click="copy(network.name_description)"
+              />
+            </template>
+          </VtsCardRowKeyValue>
+          <VtsCardRowKeyValue v-if="pifs.length > 0 && pifs[0].vlan">
+            <template #key>
+              {{ $t('vlan') }}
+            </template>
+            <template #value>
+              {{ getNetworkVlan(pifs[0].vlan) }}
+            </template>
+            <template #addons>
+              <UiButtonIcon
+                v-tooltip="copied && $t('core.copied')"
+                :icon="faCopy"
+                size="medium"
+                accent="info"
+                @click="copy(getNetworkVlan(pifs[0].vlan))"
+              />
+            </template>
+          </VtsCardRowKeyValue>
+          <VtsCardRowKeyValue>
+            <template #key>
+              {{ $t('mtu') }}
+            </template>
+            <template #value>
+              {{ network.MTU }}
+            </template>
+            <template #addons>
+              <UiButtonIcon
+                v-tooltip="copied && $t('core.copied')"
+                :icon="faCopy"
+                size="medium"
+                accent="info"
+                @click="copy(String(network.MTU))"
+              />
+            </template>
+          </VtsCardRowKeyValue>
+          <VtsCardRowKeyValue>
+            <template #key>
+              {{ $t('network-block-device') }}
+            </template>
+            <template #value>
+              {{ nbd }}
+            </template>
+            <template #addons>
+              <UiButtonIcon
+                v-tooltip="copied && $t('core.copied')"
+                :icon="faCopy"
+                size="medium"
+                accent="info"
+                @click="copy(String(network.nbd))"
+              />
+            </template>
+          </VtsCardRowKeyValue>
+          <VtsCardRowKeyValue>
+            <template #key>
+              {{ $t('locking-mode-default') }}
+            </template>
+            <template #value>
+              {{ lockingMode }}
+            </template>
+          </VtsCardRowKeyValue>
+        </div>
+      </UiCard>
+      <UiCard v-if="network && network.PIFs && network.PIFs.length > 0">
+        <div class="typo p1-medium">
+          {{ $t('pifs') }}
+          <UiCounter :value="selectedPIFsLength" variant="primary" size="small" accent="neutral" />
+        </div>
+        <table class="simple-table">
+          <thead>
+            <tr>
+              <th class="text-left typo p3-regular text-ellipsis host">
+                {{ $t('host') }}
+              </th>
+              <th class="text-left typo p3-regular text-ellipsis">
+                {{ $t('device') }}
+              </th>
+              <th class="text-left typo p3-regular text-ellipsis">
+                {{ $t('pifs-status') }}
+              </th>
+              <th />
+            </tr>
+          </thead>
+          <tbody>
+            <PifRow v-for="pif in pifs" :key="pif.id" :pif />
+          </tbody>
+        </table>
+      </UiCard>
+    </div>
+  </UiPanel>
+</template>
+
+<script setup lang="ts">
+import PifRow from '@/components/pif/PifRow.vue'
+import { useNetworkStore } from '@/stores/xo-rest-api/network.store'
+import { usePifStore } from '@/stores/xo-rest-api/pif.store'
+import type { XoPif } from '@/types/xo/pif.type'
+import VtsCardRowKeyValue from '@core/components/card/VtsCardRowKeyValue.vue'
+import VtsNoSelectionHero from '@core/components/state-hero/VtsNoSelectionHero.vue'
+import UiButton from '@core/components/ui/button/UiButton.vue'
+import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
+import UiCard from '@core/components/ui/card/UiCard.vue'
+import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
+import UiCounter from '@core/components/ui/counter/UiCounter.vue'
+import UiPanel from '@core/components/ui/panel/UiPanel.vue'
+import { useRouteQuery } from '@core/composables/route-query.composable'
+import { vTooltip } from '@core/directives/tooltip.directive'
+import { faCopy, faEdit, faEllipsis, faTrash } from '@fortawesome/free-solid-svg-icons'
+import { useClipboard } from '@vueuse/core'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const { records: networks } = useNetworkStore().subscribe()
+const { pifsByNetwork } = usePifStore().subscribe()
+
+const networkId = useRouteQuery('id')
+
+const network = computed(() => networks.value.find(network => network.id === networkId.value))
+
+const pifs = computed(() => {
+  if (!network.value) {
+    return []
+  }
+
+  return pifsByNetwork.value.get(network.value.id) || []
+})
+
+const selectedPIFsLength = computed(() => pifs.value.length.toString())
+
+const { copy, copied } = useClipboard()
+
+const getNetworkVlan = (vlan: XoPif['vlan']) => {
+  return vlan !== -1 ? vlan.toString() : t('none')
+}
+
+const lockingMode = computed(() => (network.value?.defaultIsLocked ? t('disabled') : t('unlocked')))
+
+const nbd = computed(() => (network.value?.nbd ? t('on') : t('off')))
+</script>
+
+<style scoped lang="postcss">
+.pool-network-side-panel {
+  width: 40rem;
+  border-top: none;
+
+  .card-container {
+    display: flex;
+    flex-direction: column;
+    gap: 1.6rem;
+    cursor: default;
+    position: sticky;
+    top: 1rem;
+
+    .text-left {
+      text-align: left;
+    }
+
+    .simple-table {
+      border-spacing: 0;
+    }
+  }
+}
+</style>
diff --git a/@xen-orchestra/web/src/components/pool/PoolNetworksTable.vue b/@xen-orchestra/web/src/components/pool/PoolNetworksTable.vue
new file mode 100644
index 00000000000..7fe09da986d
--- /dev/null
+++ b/@xen-orchestra/web/src/components/pool/PoolNetworksTable.vue
@@ -0,0 +1,304 @@
+<template>
+  <div class="pool-networks-table">
+    <UiTitle>
+      {{ $t('networks') }}
+      <template #actions>
+        <UiDropdownButton disabled>{{ $t('new') }}</UiDropdownButton>
+      </template>
+    </UiTitle>
+    <div class="table-actions">
+      <UiQuerySearchBar class="table-query" @search="(value: string) => (searchQuery = value)" />
+      <UiTableActions :title="$t('table-actions')">
+        <UiButton disabled :left-icon="faEdit" variant="tertiary" accent="info" size="medium">
+          {{ $t('edit') }}
+        </UiButton>
+        <UiButton disabled :left-icon="faCopy" variant="tertiary" accent="info" size="medium">
+          {{ $t('copy-info-json') }}
+        </UiButton>
+        <UiButton disabled :left-icon="faTrash" variant="tertiary" accent="danger" size="medium">
+          {{ $t('delete') }}
+        </UiButton>
+      </UiTableActions>
+      <div class="selection">
+        <UiTopBottomTable
+          :selected-items="selected.length"
+          :total-items="usableIds.length"
+          @toggle-select-all="toggleSelect"
+        />
+        <UiTablePagination
+          v-model:curr-page="pagination.currentPage"
+          v-model:per-page="pagination.pageSize"
+          v-model:start-index="pagination.startIndex"
+          v-model:end-index="pagination.endIndex"
+          :total-items="usableIds.length"
+        />
+      </div>
+    </div>
+    <div class="table-container">
+      <VtsDataTable
+        :is-ready
+        :has-error
+        :no-data-message="networksByPool.length === 0 ? $t('no-network-detected') : undefined"
+      >
+        <template #thead>
+          <tr>
+            <template v-for="column of visibleColumns" :key="column.id">
+              <th v-if="column.id === 'checkbox'" class="checkbox">
+                <UiCheckbox :v-model="areAllSelected" accent="info" @update:model-value="toggleSelect" />
+              </th>
+              <th v-else-if="column.id === 'more'" class="more">
+                <UiButtonIcon size="small" accent="info" :icon="faEllipsis" />
+                {{ column.label }}
+              </th>
+              <ColumnTitle v-else :id="column.id" :header-class="`col-${column.id}`" :icon="headerIcon[column.id]">
+                {{ column.label }}
+              </ColumnTitle>
+            </template>
+          </tr>
+        </template>
+        <template #tbody>
+          <tr
+            v-for="row of rows"
+            :key="row.id"
+            :class="{ selected: selectedNetworkId === row.id }"
+            @click="selectedNetworkId = row.id"
+          >
+            <td v-for="column of row.visibleColumns" :key="column.id" class="typo p2-regular">
+              <div v-if="column.id === 'checkbox'">
+                <UiCheckbox v-model="selected" accent="info" :value="row.id" />
+              </div>
+              <div v-else-if="column.id === 'status'" class="status">
+                <PifStatus :network="row.value" />
+              </div>
+              <div v-else-if="column.id === 'more'">
+                <VtsIcon accent="info" :icon="faEllipsis" />
+              </div>
+              <div v-else v-tooltip="{ placement: 'bottom-end' }" class="text-ellipsis">
+                {{ column.value }}
+              </div>
+            </td>
+          </tr>
+        </template>
+      </VtsDataTable>
+      <VtsStateHero v-if="searchQuery && filteredNetworks.length === 0" type="table" image="no-result">
+        {{ $t('no-result') }}
+      </VtsStateHero>
+      <div class="selection">
+        <UiTopBottomTable
+          :selected-items="selected.length"
+          :total-items="usableIds.length"
+          @toggle-select-all="toggleSelect"
+        />
+        <UiTablePagination
+          v-model:curr-page="pagination.currentPage"
+          v-model:per-page="pagination.pageSize"
+          v-model:start-index="pagination.startIndex"
+          v-model:end-index="pagination.endIndex"
+          :total-items="usableIds.length"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import PifStatus from '@/components/pif/PifStatus.vue'
+import { useNetworkStore } from '@/stores/xo-rest-api/network.store'
+import { usePifStore } from '@/stores/xo-rest-api/pif.store'
+import type { XoNetwork } from '@/types/xo/network.type'
+import type { XoPool } from '@/types/xo/pool.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 VtsDataTable from '@core/components/table/VtsDataTable.vue'
+import UiButton from '@core/components/ui/button/UiButton.vue'
+import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
+import UiCheckbox from '@core/components/ui/checkbox/UiCheckbox.vue'
+import UiDropdownButton from '@core/components/ui/dropdown-button/UiDropdownButton.vue'
+import UiQuerySearchBar from '@core/components/ui/query-search-bar/UiQuerySearchBar.vue'
+import UiTableActions from '@core/components/ui/table-actions/UiTableActions.vue'
+import UiTablePagination, { type PaginationPayload } from '@core/components/ui/table-pagination/UiTablePagination.vue'
+import UiTitle from '@core/components/ui/title/UiTitle.vue'
+import UiTopBottomTable from '@core/components/ui/top-bottom-table/UiTopBottomTable.vue'
+import { useRouteQuery } from '@core/composables/route-query.composable'
+import useMultiSelect from '@core/composables/table/multi-select.composable'
+import { useTable } from '@core/composables/table.composable'
+import { vTooltip } from '@core/directives/tooltip.directive'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import {
+  faAlignLeft,
+  faCaretDown,
+  faCopy,
+  faEdit,
+  faEllipsis,
+  faHashtag,
+  faPowerOff,
+  faTrash,
+} from '@fortawesome/free-solid-svg-icons'
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { pool } = defineProps<{
+  pool: XoPool
+}>()
+
+const pagination = ref<PaginationPayload>({
+  currentPage: 1,
+  pageSize: 10,
+  startIndex: 0,
+  endIndex: 0,
+})
+
+const { t } = useI18n()
+
+const { networksWithPifs, isReady, hasError } = useNetworkStore().subscribe()
+
+const networksByPool = computed(() => networksWithPifs.value.filter(network => network.$pool === pool.id))
+
+const { records: pifs } = usePifStore().subscribe()
+
+const selectedNetworkId = useRouteQuery('id')
+
+const findPageById = () => {
+  const index = networksByPool.value.findIndex(network => network.id === selectedNetworkId.value)
+  if (index === -1) {
+    return null
+  }
+
+  pagination.value.currentPage = Math.floor(index / pagination.value.pageSize) + 1
+}
+
+watch(
+  () => networksByPool,
+  () => {
+    findPageById()
+  }
+)
+
+const searchQuery = ref('')
+
+const filteredNetworks = computed(() => {
+  let filtered = networksByPool.value
+
+  if (!searchQuery.value) {
+    return networksByPool.value.slice(pagination.value.startIndex - 1, pagination.value.endIndex)
+  }
+
+  filtered = networksByPool.value.filter(network =>
+    Object.values(network).some(value => String(value).toLowerCase().includes(searchQuery.value.toLowerCase()))
+  )
+
+  return filtered.slice(pagination.value.startIndex - 1, pagination.value.endIndex)
+})
+
+const getNetworkVlan = (network: XoNetwork) => {
+  const networkPIFs = pifs.value.filter(pif => network.PIFs.includes(pif.id))
+
+  if (networkPIFs.length > 0) {
+    return networkPIFs[0].vlan !== -1 ? networkPIFs[0].vlan.toString() : t('none')
+  }
+}
+
+const getLockingMode = (lockingMode: boolean) => {
+  return lockingMode ? t('disabled') : t('unlocked')
+}
+
+const usableIds = computed(() => networksByPool.value.map(network => network.id))
+
+const { selected, areAllSelected } = useMultiSelect(usableIds)
+
+const toggleSelect = () => {
+  selected.value = selected.value.length === 0 ? usableIds.value : []
+}
+
+const { visibleColumns, rows } = useTable('networks', filteredNetworks, {
+  rowId: record => record.id,
+  columns: define => [
+    define('checkbox', () => '', { label: '', isHideable: false }),
+    define('name_label', record => record.name_label, { label: t('name') }),
+    define('name_description', record => record.name_description, {
+      label: t('description'),
+    }),
+    define('status', () => '', { label: t('pifs-status') }),
+    define('vlan', record => getNetworkVlan(record), { label: 'VLAN' }),
+    define('MTU', record => record.MTU, { label: 'MTU' }),
+    define('default_locking_mode', record => getLockingMode(record.defaultIsLocked), {
+      label: t('locking-mode-default'),
+    }),
+    define('more', () => '', { label: '', isHideable: false }),
+  ],
+})
+
+type networkHeader = 'name_label' | 'name_description' | 'status' | 'vlan' | 'MTU' | 'default_locking_mode'
+
+const headerIcon: Record<networkHeader, IconDefinition> = {
+  name_label: faAlignLeft,
+  name_description: faAlignLeft,
+  status: faPowerOff,
+  vlan: faAlignLeft,
+  MTU: faHashtag,
+  default_locking_mode: faCaretDown,
+}
+</script>
+
+<style scoped lang="postcss">
+.pool-networks-table,
+.table-actions {
+  display: flex;
+  flex-direction: column;
+}
+
+.pool-networks-table {
+  gap: 2.4rem;
+  overflow: hidden;
+
+  .table-actions {
+    gap: 0.8rem;
+  }
+
+  .selection {
+    margin: 0.8rem 0;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .table-container {
+    overflow-x: auto;
+
+    .checkbox,
+    .more {
+      width: 4.5rem;
+    }
+
+    :deep(.column-header) {
+      &.col-vlan,
+      &.col-MTU {
+        width: 8.5rem;
+      }
+
+      &.col-status,
+      &.col-default_locking_mode {
+        width: 18rem;
+      }
+
+      &.col-name_label,
+      &.col-name_description {
+        width: 20rem;
+      }
+    }
+
+    tbody tr:hover {
+      cursor: pointer;
+      background-color: var(--color-info-background-hover);
+    }
+
+    tr:last-child {
+      border-bottom: 0.1rem solid var(--color-neutral-border);
+    }
+  }
+
+  .selected {
+    background-color: var(--color-info-background-selected);
+  }
+}
+</style>
diff --git a/@xen-orchestra/web/src/pages/pool/[id]/networks.vue b/@xen-orchestra/web/src/pages/pool/[id]/networks.vue
new file mode 100644
index 00000000000..8260fe63889
--- /dev/null
+++ b/@xen-orchestra/web/src/pages/pool/[id]/networks.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="networks">
+    <UiCard class="card">
+      <PoolNetworksTable :pool />
+      <PoolHostInternalNetworkTable :pool />
+    </UiCard>
+    <PoolNetworksSidePanel />
+  </div>
+</template>
+
+<script setup lang="ts">
+import PoolHostInternalNetworkTable from '@/components/pool/PoolHostInternalNetworkTable.vue'
+import PoolNetworksSidePanel from '@/components/pool/PoolNetworksSidePanel.vue'
+import PoolNetworksTable from '@/components/pool/PoolNetworksTable.vue'
+import type { XoPool } from '@/types/xo/pool.type'
+import UiCard from '@core/components/ui/card/UiCard.vue'
+
+defineProps<{
+  pool: XoPool
+}>()
+</script>
+
+<style scoped lang="postcss">
+.networks {
+  display: flex;
+  .card {
+    margin: 0.8rem;
+    flex: 1;
+  }
+}
+</style>
diff --git a/@xen-orchestra/web/src/stores/xo-rest-api/network.store.ts b/@xen-orchestra/web/src/stores/xo-rest-api/network.store.ts
index 5fd796750f7..4073a9248d6 100644
--- a/@xen-orchestra/web/src/stores/xo-rest-api/network.store.ts
+++ b/@xen-orchestra/web/src/stores/xo-rest-api/network.store.ts
@@ -1,9 +1,19 @@
 import { createXoStoreConfig } from '@/utils/create-xo-store-config.util'
 import { createSubscribableStoreContext } from '@core/utils/create-subscribable-store-context.util'
 import { defineStore } from 'pinia'
+import { computed } from 'vue'
 
 export const useNetworkStore = defineStore('network', () => {
-  const config = createXoStoreConfig('network')
+  const { context: baseContext, ...configRest } = createXoStoreConfig('network')
 
-  return createSubscribableStoreContext(config, {})
+  const networksWithPifs = computed(() => baseContext.records.value.filter(network => network.PIFs.length > 0))
+
+  const networksWithoutPifs = computed(() => baseContext.records.value.filter(network => network.PIFs.length === 0))
+
+  const context = {
+    ...baseContext,
+    networksWithPifs,
+    networksWithoutPifs,
+  }
+  return createSubscribableStoreContext({ context, ...configRest }, {})
 })
diff --git a/@xen-orchestra/web/src/stores/xo-rest-api/pif.store.ts b/@xen-orchestra/web/src/stores/xo-rest-api/pif.store.ts
index a77f510b32d..92412d914d7 100644
--- a/@xen-orchestra/web/src/stores/xo-rest-api/pif.store.ts
+++ b/@xen-orchestra/web/src/stores/xo-rest-api/pif.store.ts
@@ -1,15 +1,25 @@
+import { useHostStore } from '@/stores/xo-rest-api/host.store'
+import { usePoolStore } from '@/stores/xo-rest-api/pool.store'
 import type { XoHost } from '@/types/xo/host.type'
+import type { XoNetwork } from '@/types/xo/network.type'
 import type { XoPif } from '@/types/xo/pif.type'
 import { createXoStoreConfig } from '@/utils/create-xo-store-config.util'
 import { createSubscribableStoreContext } from '@core/utils/create-subscribable-store-context.util'
 import { defineStore } from 'pinia'
 import { computed } from 'vue'
 
+const deps = {
+  poolStore: usePoolStore(),
+  hostStore: useHostStore(),
+}
+
+const poolContext = deps.poolStore.getContext()
+const hostContext = deps.hostStore.getContext()
+
 export const usePifStore = defineStore('pif', () => {
   const { context: baseContext, ...configRest } = createXoStoreConfig('pif')
   const pifsByHost = computed<Map<string, XoPif[]>>(() => {
     const pifsByHostMap = new Map<XoHost['id'], XoPif[]>()
-
     baseContext.records.value.forEach(pif => {
       const hostId = pif.$host
       if (!pifsByHostMap.has(hostId)) {
@@ -20,9 +30,28 @@ export const usePifStore = defineStore('pif', () => {
     })
     return pifsByHostMap
   })
+
+  const pifsByNetwork = computed<Map<string, XoPif[]>>(() => {
+    const pifsByNetworkMap = new Map<XoNetwork['id'], XoPif[]>()
+    const poolMasterRef = poolContext.records.value[0].master
+    const currentHostRef = hostContext.records.value.find(host => host.id === poolMasterRef)
+    if (currentHostRef) {
+      baseContext.records.value.forEach(pif => {
+        const NetworkId = pif.$network
+        if (!pifsByNetworkMap.has(NetworkId)) {
+          pifsByNetworkMap.set(NetworkId, [])
+        }
+
+        pifsByNetworkMap.get(NetworkId)!.push(pif)
+      })
+    }
+
+    return pifsByNetworkMap
+  })
   const context = {
     ...baseContext,
     pifsByHost,
+    pifsByNetwork,
   }
-  return createSubscribableStoreContext({ context, ...configRest }, {})
+  return createSubscribableStoreContext({ context, ...configRest }, deps)
 })
diff --git a/@xen-orchestra/web/src/types/xo/network.type.ts b/@xen-orchestra/web/src/types/xo/network.type.ts
index 940e2b94b5b..ce45b0d1c19 100644
--- a/@xen-orchestra/web/src/types/xo/network.type.ts
+++ b/@xen-orchestra/web/src/types/xo/network.type.ts
@@ -1,9 +1,14 @@
+import type { XoPool } from '@/types/xo/pool.type'
 import type { Branded } from '@core/types/utility.type'
 
 export type XoNetwork = {
+  $pool: Branded<XoPool['id']>
   defaultIsLocked: boolean
   id: Branded<'network'>
   name_label: string
+  name_description: string
+  MTU: number
   nbd: boolean
   tags: string[]
+  PIFs: string[]
 }
diff --git a/@xen-orchestra/web/src/utils/xo-api-definition.util.ts b/@xen-orchestra/web/src/utils/xo-api-definition.util.ts
index edf87dfc656..d9f9bfda837 100644
--- a/@xen-orchestra/web/src/utils/xo-api-definition.util.ts
+++ b/@xen-orchestra/web/src/utils/xo-api-definition.util.ts
@@ -41,13 +41,13 @@ export const xoApiDefinition = {
   pif: {
     type: 'collection',
     path: 'pifs',
-    fields: '$host,$network,attached,carrier,device,dns,gateway,id,ip,ipv6,mac,mode,mtu,netmask,speed',
+    fields: '$host,$network,attached,carrier,device,dns,gateway,id,ip,ipv6,mac,mode,mtu,netmask,speed,vlan',
     handler: (record: XoPif) => record,
   },
   network: {
     type: 'collection',
     path: 'networks',
-    fields: 'id, defaultIsLocked,name_label,nbd,tags',
+    fields: 'id,defaultIsLocked,name_label,nbd,tags,$pool,name_description,MTU,PIFs',
     handler: (record: XoNetwork) => record,
   },
 } satisfies ApiDefinition
diff --git a/@xen-orchestra/web/typed-router.d.ts b/@xen-orchestra/web/typed-router.d.ts
index e3a1a98ebf1..abd6fb7646d 100644
--- a/@xen-orchestra/web/typed-router.d.ts
+++ b/@xen-orchestra/web/typed-router.d.ts
@@ -30,6 +30,7 @@ declare module 'vue-router/auto-routes' {
     '/pool/[id]': RouteRecordInfo<'/pool/[id]', '/pool/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
     '/pool/:id': RouteRecordInfo<'/pool/:id', '/pool/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
     '/pool/[id]/hosts': RouteRecordInfo<'/pool/[id]/hosts', '/pool/:id/hosts', { id: ParamValue<true> }, { id: ParamValue<false> }>,
+    '/pool/[id]/networks': RouteRecordInfo<'/pool/[id]/networks', '/pool/:id/networks', { id: ParamValue<true> }, { id: ParamValue<false> }>,
     '/pool/[id]/vms': RouteRecordInfo<'/pool/[id]/vms', '/pool/:id/vms', { id: ParamValue<true> }, { id: ParamValue<false> }>,
     '/vm/[id]': RouteRecordInfo<'/vm/[id]', '/vm/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
     '/vm/[id]/console': RouteRecordInfo<'/vm/[id]/console', '/vm/:id/console', { id: ParamValue<true> }, { id: ParamValue<false> }>,