feat(xo-6): add store

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

@@ -28,7 +28,7 @@
             {{ $t('network') }}
           </template>
           <template #value>
-            {{ props.pif.name_label }}
+            {{ getNetworkData(pif, 'name_label') }}
           </template>
           <template #addons>
             <UiButtonIcon :icon="faCopy" size="medium" accent="info" />
@@ -78,7 +78,7 @@
           </template>
           <template #value>
             <div class="tags">
-              <UiTag v-for="tag in pif.tags" :key="tag" accent="info" variant="secondary">
+              <UiTag v-for="tag in getTags(pif)" :key="tag" accent="info" variant="secondary">
                 {{ tag }}
               </UiTag>
             </div>
@@ -183,7 +183,7 @@
             {{ $t('network-block-device') }}
           </template>
           <template #value>
-            {{ $t(`${props.pif.nbd}`) }}
+            {{ $t(`${getNetworkData(pif, 'nbd')}`) }}
           </template>
           <template #addons>
             <UiButtonIcon :icon="faCopy" size="medium" accent="info" />
@@ -194,7 +194,7 @@
             {{ $t('default-locking-mode') }}
           </template>
           <template #value>
-            {{ $t(`${props.pif.defaultIsLocked}`) }}
+            {{ $t(`${getNetworkData(pif, 'defaultIsLocked')}`) }}
           </template>
           <template #addons>
             <UiButtonIcon :icon="faCopy" size="medium" accent="info" />
@@ -207,10 +207,9 @@
 
 <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 { XoPif } from '@/types/xo/pif.type'
+import { useNetworkStore } from '@/stores/xo-rest-api/network.store'
+import type { XoNetwork } from '@/types/xo/network.type'
+import type { XoPif } from '@/types/xo/pif.type'
 import VtsCardRowKeyValue from '@core/components/card/VtsCardRowKeyValue.vue'
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import UiButton from '@core/components/ui/button/UiButton.vue'
@@ -223,14 +222,28 @@ import { vTooltip } from '@core/directives/tooltip.directive'
 import { faCircle, faCopy, faEdit, faEllipsis, faStar, faTrash } from '@fortawesome/free-solid-svg-icons'
 import { computed } from 'vue'
 
-// TODO: Replace mocked data by store and type values
 const props = defineProps<{
-  pif: object | null | undefined
+  pif: XoPif
 }>()
 
+const { get } = useNetworkStore().subscribe()
+
 const allIps = computed(() => {
   return [props.pif.ip, ...props.pif.ipv6].filter(ip => ip)
 })
+
+const getNetworkData = (pif: XoPif, type: keyof XoNetwork) => {
+  const network: XoNetwork = get(pif.$network)!
+  if (type === 'name_label') {
+    return network.name_label ? network.name_label : 'Unknown'
+  } else if (type === 'nbd' || type === 'defaultIsLocked') {
+    return network[type] ? 'on' : 'off'
+  }
+}
+const getTags = (pif: XoPif) => {
+  const network: XoNetwork = get(pif.$network)!
+  return network.tags.length > 0 ? network.tags : []
+}
 </script>
 
 <style scoped lang="postcss">

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="pif-table">
+  <div v-if="isReady" class="pif-table">
     <UiTitle type="h4" class="header">
       <slot>{{ $t('pifs') }}</slot>
       <template #actions>
@@ -61,7 +61,7 @@
                   <VtsIcon :icon="faNetworkWired" accent="current" />
                   <VtsIcon accent="success" :icon="faCircle" :overlay-icon="faCheck" />
                 </UiComplexIcon>
-                <p v-tooltip class="text-ellipsis">{{ row.value.name_label }}</p>
+                <p v-tooltip class="text-ellipsis">{{ getNetworkName(row.value) }}</p>
               </div>
               <div v-if="column.id === 'device'" v-tooltip class="text-ellipsis">{{ row.value.device }}</div>
               <div v-if="column.id === 'status'" v-tooltip>
@@ -90,6 +90,9 @@
 
 <script setup lang="ts">
 import PifStatus from '@/components/pif/PifStatus.vue'
+import { useNetworkStore } from '@/stores/xo-rest-api/network.store'
+import type { XoNetwork } from '@/types/xo/network.type'
+import type { XoPif } from '@/types/xo/pif.type'
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import ColumnTitle from '@core/components/table/ColumnTitle.vue'
 import VtsTable from '@core/components/table/VtsTable.vue'
@@ -105,7 +108,6 @@ import UiTopBottomTable from '@core/components/ui/top-bottom-table/UiTopBottomTa
 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,
@@ -123,13 +125,20 @@ import {
 import { computed, ref } from 'vue'
 
 const props = defineProps<{
-  pifs: object[]
+  pifs: XoPif[]
 }>()
 
 const emit = defineEmits<{
-  rowSelect: [value: string]
+  rowSelect: [value: XoPif['id']]
 }>()
 
+const { get, isReady } = useNetworkStore().subscribe()
+
+const getNetworkName = (pif: XoPif) => {
+  const network: XoNetwork = get(pif.$network)!
+  return network.name_label ? network.name_label : 'Unknown'
+}
+
 const searchQuery = ref('')
 
 const filteredPifs = computed(() => {
@@ -150,13 +159,13 @@ const { visibleColumns, rows } = useTable('pifs', filteredPifs, {
   rowId: record => record.id,
   columns: define => [
     define('checkbox', () => '', { label: '', isHideable: false }),
-    define('network', () => '', { label: 'Network', isHideable: true }),
-    define('device', () => '', { label: 'Device', isHideable: true }),
+    define('network', record => record.$network, { label: 'Network', isHideable: true }),
+    define('device', record => record.device, { label: 'Device', isHideable: true }),
     define('status', () => '', { label: 'Status', isHideable: true }),
-    define('vlan', () => '', { label: 'Vlan', isHideable: true }),
-    define('ip', () => '', { label: 'IP Addresses', isHideable: true }),
-    define('mac', () => '', { label: 'MAC address', isHideable: true }),
-    define('mode', () => '', { label: 'IP mode', isHideable: true }),
+    define('vlan', record => record.vlan, { label: 'Vlan', isHideable: true }),
+    define('ip', record => record.ip, { label: 'IP Addresses', isHideable: true }),
+    define('mac', record => record.mac, { label: 'MAC address', isHideable: true }),
+    define('mode', record => record.mode, { label: 'IP mode', isHideable: true }),
     define('more', () => '', { label: '', isHideable: false }),
   ],
 })
@@ -178,9 +187,9 @@ const getHeaderIcon = (status: pifHeader) => {
   return headerIcon[status].icon
 }
 
-const selectedRowId = ref('')
+const selectedRowId = ref<XoPif['id']>()
 
-const selectRow = (rowId: string) => {
+const selectRow = (rowId: XoPif['id']) => {
   selectedRowId.value = rowId
   emit('rowSelect', rowId)
 }