feat(xo-lite): add selected pifs in side panel and copy to clipboard

vatesfr · Nov 21, 2024 · fbc66f0 · fbc66f0
1 parent 04484a2
commit fbc66f0
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 12 deletions.
diff --git a/@xen-orchestra/lite/src/locales/en.json b/@xen-orchestra/lite/src/locales/en.json
@@ -39,6 +39,7 @@
   "configuration": "Configuration",
   "confirm-cancel": "Are you sure you want to cancel?",
   "confirm-delete": "You're about to delete {0}",
+  "coming-soon": "Coming soon!",
   "console-unavailable": "Console unavailable",
   "copy": "Copy",
   "cpu-provisioning": "CPU provisioning",
@@ -67,6 +68,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",
@@ -157,6 +159,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
@@ -39,6 +39,7 @@
   "configuration": "Configuration",
   "confirm-cancel": "Êtes-vous sûr de vouloir annuler ?",
   "confirm-delete": "Vous êtes sur le point de supprimer {0}",
+  "coming-soon": "Bientôt disponible !",
   "console-unavailable": "Console indisponible",
   "copy": "Copier",
   "cpu-provisioning": "Provisionnement CPU",
@@ -67,6 +68,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é",
@@ -157,6 +159,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
@@ -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
@@ -32,7 +32,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>
@@ -100,8 +100,8 @@
         </div>
       </div>
     </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" />
@@ -112,41 +112,82 @@
           <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>
             <div>{{ selectedNetwork?.default_locking_mode }}</div>
           </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 } from '@/libs/xen-api/xen-api.types'
+import type { XenApiNetwork, XenApiPif } 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'
@@ -176,9 +217,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)
@@ -195,9 +237,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>
@@ -223,6 +271,14 @@ const selectNetworkToSidebar = (network: any) => {
   align-items: center;
 }
 
+tbody tr {
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--color-info-background-hover);
+  }
+}
+
 .card-container {
   display: flex;
   flex-direction: column;