use new component for status and move code in pif store

@xen-orchestra/lite/src/components/pool/network/PoolNetworksTable.vue

@@ -77,7 +77,7 @@
               <td v-for="column of row.visibleColumns" :key="column.id" class="typo p2-regular">
                 <UiCheckbox v-if="column.id === 'checkbox'" v-model="selected" accent="info" :value="row.id" />
                 <VtsIcon v-else-if="column.id === 'more'" accent="info" :icon="faEllipsis" />
-                <PoolNetworksPifStatus v-else-if="column.id === 'status'" :status="column.value" />
+                <VtsConnectionStatus v-else-if="column.id === 'status'" :status="column.value" />
                 <div v-else v-tooltip="{ placement: 'bottom-end' }" class="text-ellipsis">
                   {{ column.value }}
                 </div>
@@ -97,10 +97,10 @@
 </template>
 
 <script setup lang="ts">
-import PoolNetworksPifStatus, { type Status } from '@/components/pool/network/PoolNetworksPifStatus.vue'
 import UiCardSpinner from '@/components/ui/UiCardSpinner.vue'
 import useMultiSelect from '@/composables/multi-select.composable'
 import type { XenApiNetwork } from '@/libs/xen-api/xen-api.types'
+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'
@@ -128,10 +128,12 @@ import {
 } from '@fortawesome/free-solid-svg-icons'
 import { computed, ref } from 'vue'
 
+export type Status = 'connected' | 'disconnected' | 'partially-connected'
+
 const { networks, isReady } = defineProps<{
   networks: {
     network: XenApiNetwork
-    status?: Status
+    status: Status
     vlan?: string
   }[]
   isReady: boolean

@xen-orchestra/lite/src/stores/xen-api/network.store.ts

@@ -1,8 +1,7 @@
-import type { Status } from '@/components/pool/network/PoolNetworksPifStatus.vue'
 import type { XenApiPif } 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 { usePifStore } from '@/stores/xen-api/pif.store'
+import { usePifStore } from '@/stores/xen-api/pif.store' // Importez le pifStore
 import { usePoolStore } from '@/stores/xen-api/pool.store'
 import { createSubscribableStoreContext } from '@core/utils/create-subscribable-store-context.util'
 import { sortByNameLabel } from '@core/utils/sort-by-name-label.util'
@@ -28,7 +27,7 @@ export const useNetworkStore = defineStore('xen-api-network', () => {
   const pifContext = deps.pifStore.getContext()
 
   const pifsByNetwork = computed(() => {
-    const PIFsByNetworkMap = new Map<string, XenApiPif[]>()
+    const pifsByNetworkMap = new Map<string, XenApiPif[]>()
 
     const poolMasterRef = poolContext.pool.value?.master
 
@@ -37,13 +36,13 @@ export const useNetworkStore = defineStore('xen-api-network', () => {
       pifContext.records.value
         .filter(pif => pif.host === poolMasterRef)
         .forEach(pif => {
-          if (!PIFsByNetworkMap.has(pif.network)) {
-            PIFsByNetworkMap.set(pif.network, [])
+          if (!pifsByNetworkMap.has(pif.network)) {
+            pifsByNetworkMap.set(pif.network, [])
           }
-          PIFsByNetworkMap.get(pif.network)?.push(pif)
+          pifsByNetworkMap.get(pif.network)?.push(pif)
         })
     }
-    return PIFsByNetworkMap
+    return pifsByNetworkMap
   })
 
   const networksWithVLANs = computed(() =>
@@ -53,8 +52,7 @@ export const useNetworkStore = defineStore('xen-api-network', () => {
         const relatedPifs = pifsByNetwork.value.get(network.$ref) || []
         const vlan =
           relatedPifs.length > 0 ? (relatedPifs[0].VLAN === -1 ? t('none') : relatedPifs[0].VLAN.toString()) : ''
-        const status = determineStatus(relatedPifs)
-
+        const status = pifContext.determineStatus(relatedPifs)
         return { network, vlan, status }
       })
   )
@@ -71,17 +69,3 @@ export const useNetworkStore = defineStore('xen-api-network', () => {
 
   return createSubscribableStoreContext({ context, ...configRest }, deps)
 })
-
-function determineStatus(PIFs: XenApiPif[]): Status {
-  if (PIFs.length === 0) {
-    return 'disconnected'
-  }
-  const currentlyAttached = PIFs.map(PIF => PIF.currently_attached)
-  if (currentlyAttached.every(Boolean)) {
-    return 'connected'
-  }
-  if (currentlyAttached.some(Boolean)) {
-    return 'partial'
-  }
-  return 'disconnected'
-}

@xen-orchestra/lite/src/stores/xen-api/pif.store.ts

@@ -1,9 +1,27 @@
+import type { Status } from '@/components/pool/network/PoolNetworksTable.vue'
+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 usePifStore = defineStore('xen-api-pif', () => {
-  const config = createXapiStoreConfig('pif')
+  const { context: baseContext, ...configRest } = createXapiStoreConfig('pif')
 
-  return createSubscribableStoreContext(config, {})
+  const determineStatus = (PIFs: XenApiPif[]): Status => {
+    if (PIFs.length === 0) {
+      return 'disconnected'
+    }
+    const currentlyAttached = PIFs.map(PIF => PIF.currently_attached)
+    if (currentlyAttached.every(Boolean)) {
+      return 'connected'
+    }
+    if (currentlyAttached.some(Boolean)) {
+      return 'partially-connected'
+    }
+    return 'disconnected'
+  }
+
+  const context = { ...baseContext, determineStatus }
+
+  return createSubscribableStoreContext({ context, ...configRest }, {})
 })

@xen-orchestra/web-core/lib/components/ui/info/UiInfo.vue

@@ -44,6 +44,7 @@ const icon = computed(() => iconByAccent[accent])
 
 <style lang="postcss" scoped>
 .ui-info {
+  align-items: start;
   display: flex;
   gap: 0.8rem;