From 0aeeabfbde003731f557a451f69fa1505b6381be Mon Sep 17 00:00:00 2001
From: Joris-k <joris.kosacki@vates.tech>
Date: Fri, 6 Dec 2024 17:40:13 +0100
Subject: [PATCH 1/3] feat(xo-lite): add host network tab and pif table /
 status component and pif store

---
 .../lite/src/components/host/HostTabBar.vue   |   2 +-
 .../components/host/network/HostPifStatus.vue |  44 ++++
 .../components/host/network/HostPifTable.vue  | 235 ++++++++++++++++++
 @xen-orchestra/lite/src/locales/en.json       |   7 +
 @xen-orchestra/lite/src/locales/fr.json       |   7 +
 .../lite/src/stores/xen-api/pif.store.ts      |  34 +++
 .../lite/src/views/host/HostNetworkView.vue   |  17 +-
 .../lib/components/ui/checkbox/UiCheckbox.vue |   2 +-
 8 files changed, 344 insertions(+), 4 deletions(-)
 create mode 100644 @xen-orchestra/lite/src/components/host/network/HostPifStatus.vue
 create mode 100644 @xen-orchestra/lite/src/components/host/network/HostPifTable.vue
 create mode 100644 @xen-orchestra/lite/src/stores/xen-api/pif.store.ts

diff --git a/@xen-orchestra/lite/src/components/host/HostTabBar.vue b/@xen-orchestra/lite/src/components/host/HostTabBar.vue
index e918ee34e70..d64d5cf2626 100644
--- a/@xen-orchestra/lite/src/components/host/HostTabBar.vue
+++ b/@xen-orchestra/lite/src/components/host/HostTabBar.vue
@@ -6,7 +6,7 @@
     <RouterTab :to="{ name: 'host.console', params: { uuid } }">
       {{ $t('console') }}
     </RouterTab>
-    <RouterTab :to="{ name: 'host.network', params: { uuid } }" disabled>
+    <RouterTab :to="{ name: 'host.network', params: { uuid } }">
       {{ $t('network') }}
     </RouterTab>
     <RouterTab :to="{ name: 'host.tasks', params: { uuid } }" disabled>
diff --git a/@xen-orchestra/lite/src/components/host/network/HostPifStatus.vue b/@xen-orchestra/lite/src/components/host/network/HostPifStatus.vue
new file mode 100644
index 00000000000..1590f46082d
--- /dev/null
+++ b/@xen-orchestra/lite/src/components/host/network/HostPifStatus.vue
@@ -0,0 +1,44 @@
+<template>
+  <UiInfo class="pif-status text-ellipsis" :accent="getStatusProps(status).accent">
+    <p class="text-ellipsis" :class="{ card }">{{ getStatusProps(status).text }}</p>
+  </UiInfo>
+</template>
+
+<script setup lang="ts">
+import UiInfo from '@core/components/ui/info/UiInfo.vue'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import { faCheck, faExclamation } from '@fortawesome/free-solid-svg-icons'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { pifStatus, card } = defineProps<{
+  pifStatus: any
+  card?: boolean
+}>()
+
+const { t } = useI18n()
+
+type Status = 'connected' | 'disconnected' | 'partial'
+type Accent = 'success' | 'warning' | 'danger'
+
+const states = computed<Record<Status, { text: string; icon: IconDefinition; accent: Accent }>>(() => ({
+  connected: { text: t('connected'), icon: faCheck, accent: 'success' },
+  disconnected: { text: t('disconnected'), icon: faCheck, accent: 'danger' },
+  partial: { text: t('disconnected-from-physical-device'), icon: faExclamation, accent: 'warning' },
+}))
+
+const status = computed(() => {
+  if (pifStatus) {
+    return 'connected'
+  }
+  return 'disconnected'
+})
+
+const getStatusProps = (status: Status) => states.value[status]
+</script>
+
+<style scoped lang="postcss">
+p:not(.card) {
+  font-size: 1.4rem !important;
+}
+</style>
diff --git a/@xen-orchestra/lite/src/components/host/network/HostPifTable.vue b/@xen-orchestra/lite/src/components/host/network/HostPifTable.vue
new file mode 100644
index 00000000000..565e7d42930
--- /dev/null
+++ b/@xen-orchestra/lite/src/components/host/network/HostPifTable.vue
@@ -0,0 +1,235 @@
+<template>
+  <div class="host-pif-table">
+    <UiTitle>
+      {{ $t('pifs') }}
+      <template #actions>
+        <UiButton
+          v-tooltip="$t('coming-soon')"
+          disabled
+          :left-icon="faPlus"
+          variant="secondary"
+          accent="info"
+          size="medium"
+        >
+          {{ $t('scan-pifs') }}
+        </UiButton>
+      </template>
+    </UiTitle>
+    <div class="container">
+      <UiQuerySearchBar class="table-query" @search="(value: string) => (searchQuery = value)" />
+      <UiTableActions title="Table actions">
+        <UiButton
+          v-tooltip="$t('coming-soon')"
+          disabled
+          :left-icon="faEdit"
+          variant="tertiary"
+          accent="info"
+          size="medium"
+        >
+          {{ $t('edit') }}
+        </UiButton>
+        <UiButton
+          v-tooltip="$t('coming-soon')"
+          disabled
+          :left-icon="faTrash"
+          variant="tertiary"
+          accent="danger"
+          size="medium"
+        >
+          {{ $t('delete') }}
+        </UiButton>
+      </UiTableActions>
+      <UiTopBottomTable
+        :selected-items="selected.length"
+        :total-items="pifsUuids.length"
+        @toggle-select-all="toggleSelect"
+      />
+      <div class="table">
+        <VtsTable vertical-border>
+          <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="getHeaderIcon(column.id)" />
+                  {{ column.label }}
+                </th>
+                <ColumnTitle v-else id="networks" :icon="getHeaderIcon(column.id)"> {{ column.label }}</ColumnTitle>
+              </template>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="row of rows" :key="row.id">
+              <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" />
+                <VtsIcon v-else-if="column.id === 'more'" accent="info" :icon="faEllipsis" />
+                <div v-else-if="column.id === 'status'" v-tooltip>
+                  <HostPifStatus class="status" :pif-status="column.value" />
+                </div>
+                <div v-else-if="column.id === 'network'" class="network">
+                  <UiComplexIcon size="medium" class="icon">
+                    <VtsIcon :icon="faNetworkWired" accent="current" />
+                    <VtsIcon accent="success" :icon="faCircle" :overlay-icon="faCheck" />
+                  </UiComplexIcon>
+                  <a v-tooltip href="" class="text-ellipsis name">{{ column.value }}</a>
+                </div>
+                <div v-else v-tooltip="{ placement: 'bottom-end' }" class="text-ellipsis">
+                  {{ column.value }}
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </VtsTable>
+      </div>
+      <UiTopBottomTable
+        :selected-items="selected.length"
+        :total-items="pifsUuids.length"
+        @toggle-select-all="toggleSelect"
+      />
+    </div>
+  </div>
+  <UiCardSpinner v-if="!isReady" />
+</template>
+
+<script lang="ts" setup>
+import HostPifStatus from '@/components/host/network/HostPifStatus.vue'
+import UiCardSpinner from '@/components/ui/UiCardSpinner.vue'
+import useMultiSelect from '@/composables/multi-select.composable'
+import type { XenApiNetwork, XenApiPif } from '@/libs/xen-api/xen-api.types'
+import { useNetworkStore } from '@/stores/xen-api/network.store'
+import VtsIcon from '@core/components/icon/VtsIcon.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'
+import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
+import UiCheckbox from '@core/components/ui/checkbox/UiCheckbox.vue'
+import UiComplexIcon from '@core/components/ui/complex-icon/UiComplexIcon.vue'
+import UiQuerySearchBar from '@core/components/ui/query-search-bar/UiQuerySearchBar.vue'
+import UiTableActions from '@core/components/ui/table-actions/UiTableActions.vue'
+import UiTitle from '@core/components/ui/title/UiTitle.vue'
+import UiTopBottomTable from '@core/components/ui/top-bottom-table/UiTopBottomTable.vue'
+import { useTable } from '@core/composables/table.composable'
+import { vTooltip } from '@core/directives/tooltip.directive'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import {
+  faAlignLeft,
+  faAt,
+  faCaretDown,
+  faCheck,
+  faCircle,
+  faEdit,
+  faEllipsis,
+  faNetworkWired,
+  faPlus,
+  faPowerOff,
+  faTrash,
+} from '@fortawesome/free-solid-svg-icons'
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { pifs } = defineProps<{
+  pifs: XenApiPif[]
+  isReady: boolean
+}>()
+
+const { t } = useI18n()
+
+const { getByOpaqueRef } = useNetworkStore().subscribe()
+
+const getNetworkName = (pif: string) => {
+  const network: XenApiNetwork = getByOpaqueRef(pif as XenApiNetwork['$ref'])!
+  return network?.name_label ? network.name_label : ''
+}
+
+const getVlanData = (vlan: number) => {
+  return vlan !== -1 ? vlan : t('none')
+}
+
+const searchQuery = ref('')
+
+const filteredNetworks = computed(() => {
+  const searchTerm = searchQuery.value.trim().toLocaleLowerCase()
+  if (!searchTerm) {
+    return pifs
+  }
+  return pifs.filter(pif => Object.values(pif).some(value => String(value).toLocaleLowerCase().includes(searchTerm)))
+})
+
+const pifsUuids = computed(() => pifs.map(pif => pif.uuid))
+
+const { selected, areAllSelected } = useMultiSelect(pifsUuids)
+
+const toggleSelect = () => {
+  selected.value = selected.value.length === 0 ? pifsUuids.value : []
+}
+
+const { visibleColumns, rows } = useTable('pifs', filteredNetworks, {
+  rowId: record => record.uuid,
+  columns: define => [
+    define('checkbox', () => '', { label: '', isHideable: false }),
+    define('network', record => getNetworkName(record.network), { label: 'Network', isHideable: true }),
+    define('device', { label: 'Device', isHideable: true }),
+    define('status', record => record.currently_attached, { label: 'Status', isHideable: true }),
+    define('VLAN', record => getVlanData(record.VLAN), { label: 'Vlan', isHideable: true }),
+    define('IP', { label: 'IP', isHideable: true }),
+    define('MAC', { label: 'MAC', isHideable: true }),
+    define('ip_configuration_mode', { label: 'Mode', isHideable: true }),
+    define('more', () => '', { label: '', isHideable: false }),
+  ],
+})
+type PifHeader = 'network' | 'device' | 'status' | 'VLAN' | 'IP' | 'MAC' | 'ip_configuration_mode' | 'more'
+const headerIcon: Record<PifHeader, { icon: IconDefinition }> = {
+  network: { icon: faAlignLeft },
+  device: { icon: faAlignLeft },
+  status: { icon: faPowerOff },
+  VLAN: { icon: faAlignLeft },
+  IP: { icon: faAt },
+  MAC: { icon: faAt },
+  ip_configuration_mode: { icon: faCaretDown },
+  more: { icon: faEllipsis },
+}
+const getHeaderIcon = (status: PifHeader) => headerIcon[status].icon
+</script>
+
+<style scoped lang="postcss">
+.host-pif-table,
+.container {
+  display: flex;
+  flex-direction: column;
+}
+
+.host-pif-table {
+  gap: 2.4rem;
+
+  .container {
+    gap: 0.8rem;
+
+    .table {
+      overflow-x: auto;
+
+      .network {
+        display: flex;
+        align-items: center;
+        gap: 1.8rem;
+      }
+
+      tr:last-child {
+        border-bottom: 1px solid var(--color-neutral-border);
+      }
+    }
+
+    .checkbox,
+    .more {
+      width: 4.8rem;
+    }
+  }
+
+  @media (max-width: 1440px) {
+    .table table {
+      width: 160rem;
+    }
+  }
+}
+</style>
diff --git a/@xen-orchestra/lite/src/locales/en.json b/@xen-orchestra/lite/src/locales/en.json
index a9217ed7ae1..1dde1a40903 100644
--- a/@xen-orchestra/lite/src/locales/en.json
+++ b/@xen-orchestra/lite/src/locales/en.json
@@ -35,6 +35,7 @@
   "close": "Close",
   "community": "Community",
   "community-name": "{name} community",
+  "connected": "Connected",
   "configuration": "Configuration",
   "confirm-cancel": "Are you sure you want to cancel?",
   "confirm-delete": "You're about to delete {0}",
@@ -60,11 +61,14 @@
   "descending": "descending",
   "description": "Description",
   "dhcp": "DHCP",
+  "disconnected": "Disconnected",
+  "disconnected-from-physical-device": "Disconnected from physical device",
   "disabled": "Disabled",
   "display": "Display",
   "dns": "DNS",
   "do-you-have-needs": "You have needs and/or expectations? Let us know",
   "documentation": "Documentation",
+  "edit": "Edit",
   "edit-config": "Edit config",
   "enabled": "Enabled",
   "error-occurred": "An error has occurred",
@@ -186,6 +190,7 @@
   "new-features-are-coming": "New features are coming soon!",
   "news": "News",
   "news-name": "{name} news",
+  "none": "None",
   "no-alarm-triggered": "No alarm triggered",
   "no-result": "No result",
   "no-selected-vm-can-be-exported": "No selected VM can be exported",
@@ -199,6 +204,7 @@
   "password": "Password",
   "password-invalid": "Password invalid",
   "pause": "Pause",
+  "pifs": "PIFs",
   "please-confirm": "Please confirm",
   "pool-cpu-usage": "Pool CPU Usage",
   "pool-ram-usage": "Pool RAM Usage",
@@ -220,6 +226,7 @@
 
   "resume": "Resume",
   "save": "Save",
+  "scan-pifs": "Scan PIFs",
   "select-compression": "Select a compression",
   "select-destination-host": "Select a destination host",
   "selected-vms-in-execution": "Some selected VMs are running",
diff --git a/@xen-orchestra/lite/src/locales/fr.json b/@xen-orchestra/lite/src/locales/fr.json
index d9f86ea546e..a7ac3f46e1f 100644
--- a/@xen-orchestra/lite/src/locales/fr.json
+++ b/@xen-orchestra/lite/src/locales/fr.json
@@ -36,6 +36,7 @@
   "community": "Communauté",
   "community-name": "Communauté {name}",
   "configuration": "Configuration",
+  "connected": "Connecté",
   "confirm-cancel": "Êtes-vous sûr de vouloir annuler ?",
   "confirm-delete": "Vous êtes sur le point de supprimer {0}",
   "console-unavailable": "Console indisponible",
@@ -60,11 +61,14 @@
   "descending": "descendant",
   "description": "Description",
   "dhcp": "DHCP",
+  "disconnected": "Déconnecté",
+  "disconnected-from-physical-device": "Déconnecté de l'appareil physique",
   "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",
+  "edit": "Modifier",
   "edit-config": "Modifier config",
   "enabled": "Activé",
   "error-occurred": "Une erreur est survenue",
@@ -186,6 +190,7 @@
   "new-features-are-coming": "De nouvelles fonctionnalités arrivent bientôt !",
   "news": "Actualités",
   "news-name": "Actualités {name}",
+  "none": "Aucun",
   "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",
@@ -199,6 +204,7 @@
   "password": "Mot de passe",
   "password-invalid": "Mot de passe incorrect",
   "pause": "Pause",
+  "pifs": "PIFs",
   "please-confirm": "Veuillez confirmer",
   "pool-cpu-usage": "Utilisation CPU du Pool",
   "pool-ram-usage": "Utilisation RAM du Pool",
@@ -220,6 +226,7 @@
 
   "resume": "Reprendre",
   "save": "Enregistrer",
+  "scan-pifs": "Scanner les PIFs",
   "select-compression": "Sélectionnez une compression",
   "select-destination-host": "Sélectionnez un hôte de destination",
   "selected-vms-in-execution": "Certaines VMs sélectionnées sont en cours d'exécution",
diff --git a/@xen-orchestra/lite/src/stores/xen-api/pif.store.ts b/@xen-orchestra/lite/src/stores/xen-api/pif.store.ts
new file mode 100644
index 00000000000..b0e11880f15
--- /dev/null
+++ b/@xen-orchestra/lite/src/stores/xen-api/pif.store.ts
@@ -0,0 +1,34 @@
+import type { XenApiHost } from '@/libs/xen-api/xen-api.types'
+import { createXapiStoreConfig } from '@/stores/xen-api/create-xapi-store-config'
+import { useHostStore } from '@/stores/xen-api/host.store'
+import { createSubscribableStoreContext } from '@core/utils/create-subscribable-store-context.util'
+import { defineStore } from 'pinia'
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+
+export const usePifStore = defineStore('xen-api-pif', () => {
+  const route = useRoute()
+
+  const deps = {
+    hostStore: useHostStore(),
+  }
+  const { context: baseContext, ...configRest } = createXapiStoreConfig('pif')
+
+  const hostContext = deps.hostStore.getContext()
+
+  const currentHostPifs = computed(() => {
+    const currentHostUuid = route.params.uuid as XenApiHost['uuid']
+
+    return baseContext.records.value.filter(pif => {
+      const host = hostContext.getByOpaqueRef(pif.host)
+      return host?.uuid === currentHostUuid
+    })
+  })
+
+  const context = {
+    ...baseContext,
+    currentHostPifs,
+  }
+
+  return createSubscribableStoreContext({ context, ...configRest }, deps)
+})
diff --git a/@xen-orchestra/lite/src/views/host/HostNetworkView.vue b/@xen-orchestra/lite/src/views/host/HostNetworkView.vue
index 4a52297b68a..60cba06b207 100644
--- a/@xen-orchestra/lite/src/views/host/HostNetworkView.vue
+++ b/@xen-orchestra/lite/src/views/host/HostNetworkView.vue
@@ -1,11 +1,24 @@
 <template>
-  <PageUnderConstruction />
+  <UiCard class="host-network-view">
+    <HostPifTable :pifs="pifs" :is-ready />
+  </UiCard>
 </template>
 
 <script lang="ts" setup>
-import PageUnderConstruction from '@/components/PageUnderConstruction.vue'
+import HostPifTable from '@/components/host/network/HostPifTable.vue'
 import { usePageTitleStore } from '@/stores/page-title.store'
+import { usePifStore } from '@/stores/xen-api/pif.store'
+import UiCard from '@core/components/ui/card/UiCard.vue'
 import { useI18n } from 'vue-i18n'
 
 usePageTitleStore().setTitle(useI18n().t('network'))
+
+const { currentHostPifs: pifs, isReady } = usePifStore().subscribe()
 </script>
+
+<style lang="postcss" scoped>
+.host-network-view {
+  border: solid 0.1rem var(--color-neutral-border);
+  margin: 0.8rem;
+}
+</style>
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 8b1bdaf05b3..2092b8a2d93 100644
--- a/@xen-orchestra/web-core/lib/components/ui/checkbox/UiCheckbox.vue
+++ b/@xen-orchestra/web-core/lib/components/ui/checkbox/UiCheckbox.vue
@@ -43,7 +43,7 @@ const props = withDefaults(
   { disabled: undefined }
 )
 
-const checkboxModel = defineModel<boolean | undefined>({ default: undefined })
+const checkboxModel = defineModel<boolean | undefined | string[]>({ default: undefined })
 
 const slots = defineSlots<{
   default?(): any

From 8efb839a02251a41af0c9b7d5c386567c9d3e44d Mon Sep 17 00:00:00 2001
From: Joris-K <joris.kosacki@vates.tech>
Date: Mon, 30 Dec 2024 17:04:50 +0100
Subject: [PATCH 2/3] remove duplicate

---
 @xen-orchestra/lite/src/locales/en.json | 3 ---
 @xen-orchestra/lite/src/locales/fr.json | 3 ---
 2 files changed, 6 deletions(-)

diff --git a/@xen-orchestra/lite/src/locales/en.json b/@xen-orchestra/lite/src/locales/en.json
index 1dde1a40903..b57f333c450 100644
--- a/@xen-orchestra/lite/src/locales/en.json
+++ b/@xen-orchestra/lite/src/locales/en.json
@@ -35,7 +35,6 @@
   "close": "Close",
   "community": "Community",
   "community-name": "{name} community",
-  "connected": "Connected",
   "configuration": "Configuration",
   "confirm-cancel": "Are you sure you want to cancel?",
   "confirm-delete": "You're about to delete {0}",
@@ -61,8 +60,6 @@
   "descending": "descending",
   "description": "Description",
   "dhcp": "DHCP",
-  "disconnected": "Disconnected",
-  "disconnected-from-physical-device": "Disconnected from physical device",
   "disabled": "Disabled",
   "display": "Display",
   "dns": "DNS",
diff --git a/@xen-orchestra/lite/src/locales/fr.json b/@xen-orchestra/lite/src/locales/fr.json
index a7ac3f46e1f..b59b5273752 100644
--- a/@xen-orchestra/lite/src/locales/fr.json
+++ b/@xen-orchestra/lite/src/locales/fr.json
@@ -36,7 +36,6 @@
   "community": "Communauté",
   "community-name": "Communauté {name}",
   "configuration": "Configuration",
-  "connected": "Connecté",
   "confirm-cancel": "Êtes-vous sûr de vouloir annuler ?",
   "confirm-delete": "Vous êtes sur le point de supprimer {0}",
   "console-unavailable": "Console indisponible",
@@ -61,8 +60,6 @@
   "descending": "descendant",
   "description": "Description",
   "dhcp": "DHCP",
-  "disconnected": "Déconnecté",
-  "disconnected-from-physical-device": "Déconnecté de l'appareil physique",
   "dns": "DNS",
   "disabled": "Désactivé",
   "display": "Affichage",

From 0604061cf3ae52cc840502de70e8db3819d12534 Mon Sep 17 00:00:00 2001
From: Joris-K <joris.kosacki@vates.tech>
Date: Thu, 2 Jan 2025 15:48:55 +0100
Subject: [PATCH 3/3] adding VtsConnectionStatus component and pif metrics
 store

---
 .../components/host/network/HostPifStatus.vue | 44 -------------------
 .../components/host/network/HostPifTable.vue  | 25 ++++++++---
 .../src/stores/xen-api/pif-metrics.store.ts   | 20 +++++++++
 3 files changed, 40 insertions(+), 49 deletions(-)
 delete mode 100644 @xen-orchestra/lite/src/components/host/network/HostPifStatus.vue
 create mode 100644 @xen-orchestra/lite/src/stores/xen-api/pif-metrics.store.ts

diff --git a/@xen-orchestra/lite/src/components/host/network/HostPifStatus.vue b/@xen-orchestra/lite/src/components/host/network/HostPifStatus.vue
deleted file mode 100644
index 1590f46082d..00000000000
--- a/@xen-orchestra/lite/src/components/host/network/HostPifStatus.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-  <UiInfo class="pif-status text-ellipsis" :accent="getStatusProps(status).accent">
-    <p class="text-ellipsis" :class="{ card }">{{ getStatusProps(status).text }}</p>
-  </UiInfo>
-</template>
-
-<script setup lang="ts">
-import UiInfo from '@core/components/ui/info/UiInfo.vue'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
-import { faCheck, faExclamation } from '@fortawesome/free-solid-svg-icons'
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-const { pifStatus, card } = defineProps<{
-  pifStatus: any
-  card?: boolean
-}>()
-
-const { t } = useI18n()
-
-type Status = 'connected' | 'disconnected' | 'partial'
-type Accent = 'success' | 'warning' | 'danger'
-
-const states = computed<Record<Status, { text: string; icon: IconDefinition; accent: Accent }>>(() => ({
-  connected: { text: t('connected'), icon: faCheck, accent: 'success' },
-  disconnected: { text: t('disconnected'), icon: faCheck, accent: 'danger' },
-  partial: { text: t('disconnected-from-physical-device'), icon: faExclamation, accent: 'warning' },
-}))
-
-const status = computed(() => {
-  if (pifStatus) {
-    return 'connected'
-  }
-  return 'disconnected'
-})
-
-const getStatusProps = (status: Status) => states.value[status]
-</script>
-
-<style scoped lang="postcss">
-p:not(.card) {
-  font-size: 1.4rem !important;
-}
-</style>
diff --git a/@xen-orchestra/lite/src/components/host/network/HostPifTable.vue b/@xen-orchestra/lite/src/components/host/network/HostPifTable.vue
index 565e7d42930..69bfe556145 100644
--- a/@xen-orchestra/lite/src/components/host/network/HostPifTable.vue
+++ b/@xen-orchestra/lite/src/components/host/network/HostPifTable.vue
@@ -66,7 +66,7 @@
                 <UiCheckbox v-if="column.id === 'checkbox'" v-model="selected" accent="info" :value="row.id" />
                 <VtsIcon v-else-if="column.id === 'more'" accent="info" :icon="faEllipsis" />
                 <div v-else-if="column.id === 'status'" v-tooltip>
-                  <HostPifStatus class="status" :pif-status="column.value" />
+                  <VtsConnectionStatus :status="column.value" />
                 </div>
                 <div v-else-if="column.id === 'network'" class="network">
                   <UiComplexIcon size="medium" class="icon">
@@ -94,11 +94,12 @@
 </template>
 
 <script lang="ts" setup>
-import HostPifStatus from '@/components/host/network/HostPifStatus.vue'
 import UiCardSpinner from '@/components/ui/UiCardSpinner.vue'
 import useMultiSelect from '@/composables/multi-select.composable'
 import type { XenApiNetwork, XenApiPif } from '@/libs/xen-api/xen-api.types'
 import { useNetworkStore } from '@/stores/xen-api/network.store'
+import { usePifMetricsStore } from '@/stores/xen-api/pif-metrics.store'
+import VtsConnectionStatus from '@core/components/connection-status/VtsConnectionStatus.vue'
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import ColumnTitle from '@core/components/table/ColumnTitle.vue'
 import VtsTable from '@core/components/table/VtsTable.vue'
@@ -137,9 +138,10 @@ const { pifs } = defineProps<{
 const { t } = useI18n()
 
 const { getByOpaqueRef } = useNetworkStore().subscribe()
+const { getPifCarrier } = usePifMetricsStore().subscribe()
 
-const getNetworkName = (pif: string) => {
-  const network: XenApiNetwork = getByOpaqueRef(pif as XenApiNetwork['$ref'])!
+const getNetworkName = (networkRef: string) => {
+  const network: XenApiNetwork = getByOpaqueRef(networkRef as XenApiNetwork['$ref'])!
   return network?.name_label ? network.name_label : ''
 }
 
@@ -147,6 +149,19 @@ const getVlanData = (vlan: number) => {
   return vlan !== -1 ? vlan : t('none')
 }
 
+const getPifStatus = (pif: XenApiPif) => {
+  const carrier = getPifCarrier(pif)
+  const currentlyAttached = pif.currently_attached
+
+  if (currentlyAttached && carrier) {
+    return 'connected'
+  }
+  if (currentlyAttached && !carrier) {
+    return 'partially-connected'
+  }
+  return 'disconnected'
+}
+
 const searchQuery = ref('')
 
 const filteredNetworks = computed(() => {
@@ -171,7 +186,7 @@ const { visibleColumns, rows } = useTable('pifs', filteredNetworks, {
     define('checkbox', () => '', { label: '', isHideable: false }),
     define('network', record => getNetworkName(record.network), { label: 'Network', isHideable: true }),
     define('device', { label: 'Device', isHideable: true }),
-    define('status', record => record.currently_attached, { label: 'Status', isHideable: true }),
+    define('status', record => getPifStatus(record), { label: 'Status', isHideable: true }),
     define('VLAN', record => getVlanData(record.VLAN), { label: 'Vlan', isHideable: true }),
     define('IP', { label: 'IP', isHideable: true }),
     define('MAC', { label: 'MAC', isHideable: true }),
diff --git a/@xen-orchestra/lite/src/stores/xen-api/pif-metrics.store.ts b/@xen-orchestra/lite/src/stores/xen-api/pif-metrics.store.ts
new file mode 100644
index 00000000000..a17365fbfeb
--- /dev/null
+++ b/@xen-orchestra/lite/src/stores/xen-api/pif-metrics.store.ts
@@ -0,0 +1,20 @@
+import type { XenApiPif } from '@/libs/xen-api/xen-api.types'
+import { createXapiStoreConfig } from '@/stores/xen-api/create-xapi-store-config'
+import { createSubscribableStoreContext } from '@core/utils/create-subscribable-store-context.util'
+import { defineStore } from 'pinia'
+
+export const usePifMetricsStore = defineStore('xen-api-pif-metrics', () => {
+  const { context: baseContext, ...configRest } = createXapiStoreConfig('pif_metrics')
+
+  const getPifCarrier = (pif: XenApiPif) => {
+    const pifMetrics = baseContext.getByOpaqueRef(pif.metrics)
+    return pifMetrics.carrier
+  }
+
+  const context = {
+    ...baseContext,
+    getPifCarrier,
+  }
+
+  return createSubscribableStoreContext({ context, ...configRest }, {})
+})