From 48974c801b1db100926381dc8f91c89cb6bf7cc4 Mon Sep 17 00:00:00 2001
From: Joris-k <joris.kosacki@vates.tech>
Date: Thu, 21 Nov 2024 12:20:46 +0100
Subject: [PATCH] feat(xo-lite): add selected pifs in side panel and copy to
 clipboard

---
 @xen-orchestra/lite/src/locales/en.json       |  2 +
 @xen-orchestra/lite/src/locales/fr.json       |  2 +
 .../lite/src/stores/xen-api/network.store.ts  |  8 +-
 .../lite/src/views/pool/PoolNetworkView.vue   | 78 ++++++++++++++++---
 4 files changed, 78 insertions(+), 12 deletions(-)

diff --git a/@xen-orchestra/lite/src/locales/en.json b/@xen-orchestra/lite/src/locales/en.json
index 4046052bfb0..77c77b30fd1 100644
--- a/@xen-orchestra/lite/src/locales/en.json
+++ b/@xen-orchestra/lite/src/locales/en.json
@@ -67,6 +67,7 @@
   "dns": "DNS",
   "do-you-have-needs": "You have needs and/or expectations? Let us know",
   "documentation": "Documentation",
+  "device": "Device",
   "edit": "Edit",
   "edit-config": "Edit config",
   "enabled": "Enabled",
@@ -155,6 +156,7 @@
   "password-invalid": "Password invalid",
   "pause": "Pause",
   "please-confirm": "Please confirm",
+  "pifs": "PIFs",
   "pifs-status": "PIFs status",
   "pool-cpu-usage": "Pool CPU Usage",
   "pool-ram-usage": "Pool RAM Usage",
diff --git a/@xen-orchestra/lite/src/locales/fr.json b/@xen-orchestra/lite/src/locales/fr.json
index ef8f72746e7..f9447d25773 100644
--- a/@xen-orchestra/lite/src/locales/fr.json
+++ b/@xen-orchestra/lite/src/locales/fr.json
@@ -67,6 +67,7 @@
   "display": "Affichage",
   "do-you-have-needs": "Vous avez des besoins et/ou des attentes ? Faites le nous savoir",
   "documentation": "Documentation",
+  "device": "Appareil",
   "edit": "Modifier",
   "edit-config": "Modifier config",
   "enabled": "Activé",
@@ -155,6 +156,7 @@
   "password-invalid": "Mot de passe incorrect",
   "pause": "Pause",
   "please-confirm": "Veuillez confirmer",
+  "pifs": "PIFs",
   "pifs-status": "Statut des PIFs",
   "pool-cpu-usage": "Utilisation CPU du Pool",
   "pool-ram-usage": "Utilisation RAM du Pool",
diff --git a/@xen-orchestra/lite/src/stores/xen-api/network.store.ts b/@xen-orchestra/lite/src/stores/xen-api/network.store.ts
index 6f35646dee5..96c1670dd9d 100644
--- a/@xen-orchestra/lite/src/stores/xen-api/network.store.ts
+++ b/@xen-orchestra/lite/src/stores/xen-api/network.store.ts
@@ -1,4 +1,4 @@
-import type { XenApiPif } from '@/libs/xen-api/xen-api.types'
+import type { XenApiNetwork, 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'
@@ -79,8 +79,14 @@ export const useNetworkStore = defineStore('xen-api-network', () => {
       }))
   })
 
+  const getPIFsInformationByNetwork = (network: XenApiNetwork) => {
+    const PIFsOpaqueRefNetwork = network.PIFs
+    return PIFsOpaqueRefNetwork.map(ref => pifContext.records.value.find(pif => pif.$ref === ref)).filter(pif => !!pif)
+  }
+
   const context = {
     ...baseContext,
+    getPIFsInformationByNetwork,
     networksWithVLANs,
     hostPrivateNetworks,
   }
diff --git a/@xen-orchestra/lite/src/views/pool/PoolNetworkView.vue b/@xen-orchestra/lite/src/views/pool/PoolNetworkView.vue
index 8f1803493b9..d5fc5be3192 100644
--- a/@xen-orchestra/lite/src/views/pool/PoolNetworkView.vue
+++ b/@xen-orchestra/lite/src/views/pool/PoolNetworkView.vue
@@ -35,7 +35,7 @@
               </tr>
             </thead>
             <tbody>
-              <tr v-for="(item, index) in networksWithVLANs" :key="index" @click="selectNetworkToSidebar(item)">
+              <tr v-for="(item, index) in networksWithVLANs" :key="index" @click="selectNetworkToSidepanel(item)">
                 <td><UiCheckbox v-model="item.selected" accent="info" /></td>
                 <td>{{ item.name_label }}</td>
                 <td>{{ item.name_description }}</td>
@@ -108,8 +108,8 @@
       </div>
       <UiCardSpinner v-if="!isReady" />
     </UiCard>
-    <UiPanel>
-      <template v-if="selectedNetwork" #header>
+    <UiPanel v-if="selectedNetwork">
+      <template #header>
         <UiButton variant="tertiary" size="medium" accent="info" :left-icon="faEdit">{{ $t('edit') }}</UiButton>
         <UiButton variant="tertiary" size="medium" accent="danger" :left-icon="faTrash">{{ $t('delete') }}</UiButton>
         <UiButtonIcon accent="info" size="medium" :icon="faEllipsis" />
@@ -120,27 +120,38 @@
           <div class="typo p3-regular content-details">
             <div>{{ $t('uuid') }}</div>
             <div class="text-ellipsis">{{ selectedNetwork?.uuid }}</div>
-            <UiButtonIcon accent="info" size="medium" :icon="faCopy" />
+            <UiButtonIcon accent="info" size="medium" :icon="faCopy" @click="copyToClipboard(selectedNetwork?.uuid)" />
           </div>
           <div class="typo p3-regular content-details">
             <div>{{ $t('description') }}</div>
             <div>{{ selectedNetwork?.name_description }}</div>
-            <UiButtonIcon accent="info" size="medium" :icon="faCopy" />
+            <UiButtonIcon
+              accent="info"
+              size="medium"
+              :icon="faCopy"
+              @click="copyToClipboard(selectedNetwork?.name_description)"
+            />
           </div>
           <div class="typo p3-regular content-details">
             <div>{{ $t('vlan') }}</div>
-            <div>{{ selectedNetwork?.MTU }}</div>
+            <div>{{ (selectedNetwork as any)?.vlan }}</div>
             <UiButtonIcon accent="info" size="medium" :icon="faCopy" />
           </div>
           <div class="typo p3-regular content-details">
             <div>{{ $t('mtu') }}</div>
             <div>{{ selectedNetwork?.MTU }}</div>
-            <UiButtonIcon accent="info" size="medium" :icon="faCopy" />
+            <UiButtonIcon accent="info" size="medium" :icon="faCopy" @click="copyToClipboard(selectedNetwork?.MTU)" />
           </div>
           <div class="typo p3-regular content-details">
             <div>{{ $t('network-block-device') }}</div>
             <div>{{ selectedNetwork?.purpose[0] }}</div>
-            <UiButtonIcon accent="info" size="medium" :icon="faCopy" />
+            <UiButtonIcon
+              v-if="selectedNetwork?.purpose[0]"
+              accent="info"
+              size="medium"
+              :icon="faCopy"
+              @click="copyToClipboard(selectedNetwork?.purpose[0])"
+            />
           </div>
           <div class="typo p3-regular content-details">
             <div>{{ $t('locking-mode-default') }}</div>
@@ -148,14 +159,44 @@
           </div>
         </div>
       </UiCard>
+      <UiCard v-if="selectedNetwork?.PIFs && selectedNetwork.PIFs.length" class="card-container">
+        <div class="typo p1-medium">{{ $t('pifs') }}</div>
+        <div>
+          <div v-for="PIF in selectedPIFs" :key="PIF.uuid">
+            <div class="typo p3-regular content-details">
+              <div>{{ $t('uuid') }}</div>
+              <div class="text-ellipsis">{{ PIF.uuid }}</div>
+              <UiButtonIcon accent="info" size="medium" :icon="faCopy" @click="copyToClipboard(PIF.uuid)" />
+            </div>
+            <div class="typo p3-regular content-details">
+              <div>{{ $t('device') }}</div>
+              <div>{{ PIF.device }}</div>
+              <UiButtonIcon accent="info" size="medium" :icon="faCopy" @click="copyToClipboard(PIF.device)" />
+            </div>
+            <div class="typo p3-regular content-details">
+              <div>{{ $t('mtu') }}</div>
+              <div>{{ PIF.MTU }}</div>
+            </div>
+            <div class="typo p3-regular content-details">
+              <div>{{ $t('vlan') }}</div>
+              <div>{{ PIF.VLAN }}</div>
+            </div>
+            <div class="typo p3-regular content-details">
+              <div>{{ $t('pifs-status') }}</div>
+              <div>{{ PIF.currently_attached ? $t('connected') : $t('disconnected') }}</div>
+            </div>
+          </div>
+        </div>
+      </UiCard>
     </UiPanel>
+    <div v-else>{{ $t('coming-soon') }}</div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import UiCard from '@/components/ui/UiCard.vue'
+import type { XenApiNetwork, XenApiPif } from '@/libs/xen-api/xen-api.types'
 import UiCardSpinner from '@/components/ui/UiCardSpinner.vue'
-import type { XenApiNetwork } from '@/libs/xen-api/xen-api.types'
 import { usePageTitleStore } from '@/stores/page-title.store'
 import { useNetworkStore } from '@/stores/xen-api/network.store'
 import ColumnTitle from '@core/components/table/ColumnTitle.vue'
@@ -182,9 +223,10 @@ import { useI18n } from 'vue-i18n'
 
 usePageTitleStore().setTitle(useI18n().t('network'))
 
-const { networksWithVLANs, hostPrivateNetworks } = useNetworkStore().subscribe()
+const { networksWithVLANs, hostPrivateNetworks, getPIFsInformationByNetwork } = useNetworkStore().subscribe()
 
 const selectedNetwork = ref<XenApiNetwork>()
+const selectedPIFs = ref<XenApiPif[]>()
 
 const selectedItemsNetwork = computed(() => networksWithVLANs.value.filter(item => item.selected).length)
 const selectedItemsHostInternalNW = computed(() => hostPrivateNetworks.value.filter(item => item.selected).length)
@@ -201,9 +243,15 @@ const toggleSelectHostInternalNW = (isSelected: any) => {
   })
 }
 
-const selectNetworkToSidebar = (network: any) => {
+const selectNetworkToSidepanel = (network: XenApiNetwork) => {
+  selectedPIFs.value = getPIFsInformationByNetwork(network)
   selectedNetwork.value = network
 }
+
+const copyToClipboard = (text: string | number) => {
+  const stringText = String(text)
+  navigator.clipboard.writeText(stringText)
+}
 </script>
 
 <style lang="postcss" scoped>
@@ -230,6 +278,14 @@ const selectNetworkToSidebar = (network: any) => {
   width: 4.8rem;
 }
 
+tbody tr {
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--color-info-background-hover);
+  }
+}
+
 .card-container {
   display: flex;
   flex-direction: column;