From 277606895fe1111fe6c4a5b04050078e66e91a93 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] 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 }, {})
+})