Fix issue to not have selected row on both table at the same time, fi…

…x some css
vatesfr · Dec 12, 2024 · 69a064f · 69a064f
1 parent 293396c
commit 69a064f
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 39 deletions.
diff --git a/@xen-orchestra/lite/src/components/pool/network/PoolHostInternalNetworkTable.vue b/@xen-orchestra/lite/src/components/pool/network/PoolHostInternalNetworkTable.vue
@@ -44,7 +44,7 @@
         :total-items="networkUuids.length"
         @toggle-select-all="toggleSelect"
       />
-      <div class="table">
+      <div v-if="filteredNetworks.length > 0" class="table">
         <VtsTable vertical-border>
           <thead>
             <tr>
@@ -65,7 +65,7 @@
               v-for="row of rows"
               :key="row.id"
               :class="{ 'row-selected': selectedRowId === (row.value as XenApiNetwork).uuid }"
-              @click="selectRow(row.value)"
+              @click="selectRow(row.value, 'host-internal-network')"
             >
               <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" />
@@ -78,21 +78,27 @@
           </tbody>
         </VtsTable>
       </div>
+
+      <VtsStateHero v-if="searchQuery && filteredNetworks.length === 0" type="table" image="no-result">
+        <div>{{ $t('no-result') }}</div>
+      </VtsStateHero>
+
+      <UiCardSpinner v-if="!isReady" />
       <UiTopBottomTable
         :selected-items="selected.length"
         :total-items="networkUuids.length"
         @toggle-select-all="toggleSelect"
       />
     </div>
   </div>
-  <UiCardSpinner v-if="!isReady" />
 </template>
 
 <script setup lang="ts">
 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 VtsIcon from '@core/components/icon/VtsIcon.vue'
+import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
 import ColumnTitle from '@core/components/table/ColumnTitle.vue'
 import VtsTable from '@core/components/table/VtsTable.vue'
 import UiButton from '@core/components/ui/button/UiButton.vue'
@@ -119,6 +125,7 @@ import { computed, ref } from 'vue'
 const { networks, isReady } = defineProps<{
   networks: XenApiNetwork[]
   isReady: boolean
+  selectedRowId: string | null
 }>()
 
 const emit = defineEmits<{
@@ -127,11 +134,8 @@ const emit = defineEmits<{
 
 const searchQuery = ref('')
 
-const selectedRowId = ref('')
-
-const selectRow = (item: any) => {
-  selectedRowId.value = item.uuid
-  emit('rowSelectHostInternalNetwork', item)
+const selectRow = (item: any, table: string) => {
+  emit('rowSelectHostInternalNetwork', { item, table })
 }
 
 const filteredNetworks = computed(() => {
@@ -193,6 +197,11 @@ const getHeaderIcon = (status: NetworkHeader) => headerIcon[status].icon
     .table {
       overflow-x: auto;
 
+      tr:hover {
+        cursor: pointer;
+        background-color: var(--color-info-background-hover);
+      }
+
       tr:last-child {
         border-bottom: 1px solid var(--color-neutral-border);
       }

diff --git a/@xen-orchestra/lite/src/components/pool/network/PoolNetworksSidePanel.vue b/@xen-orchestra/lite/src/components/pool/network/PoolNetworksSidePanel.vue
@@ -6,11 +6,11 @@
       <UiButtonIcon accent="info" size="medium" :icon="faEllipsis" />
     </template>
     <UiCard v-if="selectedNetwork" class="card-container">
-      <div v-tooltip="{ placement: 'bottom-end' }" class="typo p1-medium text-ellipsis">
+      <UiCardTitle v-tooltip="{ placement: 'bottom-end' }" class="typo p1-medium text-ellipsis">
         {{ (selectedNetwork as any)?.network.name_label }}
-      </div>
+      </UiCardTitle>
       <div>
-        <div class="typo p3-regular content-details">
+        <div class="typo p3-regular content">
           <div class="title">{{ $t('uuid') }}</div>
           <div class="value text-ellipsis">{{ (selectedNetwork as any)?.network.uuid }}</div>
           <UiButtonIcon
@@ -20,22 +20,22 @@
             @click="copyToClipboard((selectedNetwork as any)?.network.uuid)"
           />
         </div>
-        <div class="typo p3-regular content-details">
+        <div class="typo p3-regular content">
           <div class="title">{{ $t('description') }}</div>
-          <div class="value">{{ (selectedNetwork as any)?.network.name_description }}</div>
+          <div class="value text-ellipsis">{{ (selectedNetwork as any)?.network.name_description }}</div>
           <UiButtonIcon
             accent="info"
             size="medium"
             :icon="faCopy"
             @click="copyToClipboard((selectedNetwork as any)?.network.name_description)"
           />
         </div>
-        <div v-if="(selectedNetwork as any)?.vlan" class="typo p3-regular content-details">
+        <div v-if="(selectedNetwork as any)?.vlan" class="typo p3-regular content">
           <div class="title">{{ $t('vlan') }}</div>
           <div class="value">{{ (selectedNetwork as any)?.vlan }}</div>
           <UiButtonIcon accent="info" size="medium" :icon="faCopy" />
         </div>
-        <div class="typo p3-regular content-details">
+        <div class="typo p3-regular content">
           <div class="title">{{ $t('mtu') }}</div>
           <div class="value">{{ (selectedNetwork as any)?.network.MTU }}</div>
           <UiButtonIcon
@@ -45,7 +45,7 @@
             @click="copyToClipboard((selectedNetwork as any)?.network.MTU)"
           />
         </div>
-        <div v-if="(selectedNetwork as any)?.network.purpose[0]" class="typo p3-regular content-details">
+        <div v-if="(selectedNetwork as any)?.network.purpose[0]" class="typo p3-regular content">
           <div class="title">{{ $t('network-block-device') }}</div>
           <div class="value">{{ (selectedNetwork as any)?.network.purpose[0] }}</div>
           <UiButtonIcon
@@ -56,9 +56,9 @@
             @click="copyToClipboard((selectedNetwork as any)?.network.purpose[0])"
           />
         </div>
-        <div class="typo p3-regular content-details">
+        <div class="typo p3-regular content">
           <div class="title">{{ $t('locking-mode-default') }}</div>
-          <div class="value">{{ (selectedNetwork as any)?.network.default_locking_mode }}</div>
+          <div class="value default-locking">{{ (selectedNetwork as any)?.network.default_locking_mode }}</div>
         </div>
       </div>
     </UiCard>
@@ -93,9 +93,13 @@
           <tr v-for="selected in selectedPifs" :key="selected.PIF.uuid">
             <td class="typo p3-regular">
               <UiObjectIcon :state="selected?.host?.hostStatus ? 'running' : 'disabled'" type="host" size="small" />
-              {{ selected?.host?.name_label }}
+              <a>
+                {{ selected?.host?.name_label }}
+              </a>
+            </td>
+            <td class="typo p3-regular">
+              {{ selected.PIF.device }}
             </td>
-            <td class="typo p3-regular">{{ selected.PIF.device }}</td>
             <td class="typo p3-regular">
               <UiInfo v-if="selected.PIF.currently_attached" accent="success"> {{ $t('connected') }}</UiInfo>
               <UiInfo v-else-if="!selected.PIF.currently_attached" accent="danger"> {{ $t('disconnected') }}</UiInfo>
@@ -116,6 +120,7 @@ import type { XenApiNetwork, XenApiPif } from '@/libs/xen-api/xen-api.types'
 import UiButton from '@core/components/ui/button/UiButton.vue'
 import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import UiCard from '@core/components/ui/card/UiCard.vue'
+import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
 import UiCounter from '@core/components/ui/counter/UiCounter.vue'
 import UiInfo from '@core/components/ui/info/UiInfo.vue'
 import UiObjectIcon from '@core/components/ui/object-icon/UiObjectIcon.vue'
@@ -154,7 +159,7 @@ const copyToClipboard = (text: string | number) => {
   flex-direction: column;
   gap: 1.6rem;
 
-  .content-details {
+  .content {
     display: flex;
     align-items: center;
     gap: 0.8rem;
@@ -168,6 +173,10 @@ const copyToClipboard = (text: string | number) => {
       color: var(--color-neutral-txt-primary);
       width: 20rem;
     }
+
+    .default-locking {
+      width: 23rem;
+    }
   }
 
   .text-left {
@@ -182,16 +191,19 @@ const copyToClipboard = (text: string | number) => {
         background-color: var(--color-info-background-hover);
       }
     }
-  }
 
-  .simple-table {
     thead tr th {
       color: var(--color-neutral-txt-secondary);
     }
 
     tbody tr td {
       color: var(--color-neutral-txt-primary);
     }
+
+    tbody tr td a {
+      margin-left: 0.8rem;
+      text-decoration: underline solid #6b63bf;
+    }
   }
 }
 </style>
diff --git a/@xen-orchestra/lite/src/components/pool/network/PoolNetworksTable.vue b/@xen-orchestra/lite/src/components/pool/network/PoolNetworksTable.vue
@@ -54,7 +54,7 @@
         :total-items="networkUuids.length"
         @toggle-select-all="toggleSelect"
       />
-      <div class="table">
+      <div v-if="filteredNetworks.length > 0" class="table">
         <VtsTable vertical-border>
           <thead>
             <tr>
@@ -75,7 +75,7 @@
               v-for="row of rows"
               :key="row.id"
               :class="{ 'row-selected': selectedRowId === (row.value as any).network.uuid }"
-              @click="selectRow(row.value)"
+              @click="selectRow(row.value, 'network')"
             >
               <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" />
@@ -91,14 +91,19 @@
           </tbody>
         </VtsTable>
       </div>
+
+      <VtsStateHero v-if="searchQuery && filteredNetworks.length === 0" type="table" image="no-result">
+        <div>{{ $t('no-result') }}</div>
+      </VtsStateHero>
+
+      <UiCardSpinner v-if="!isReady" />
       <UiTopBottomTable
         :selected-items="selected.length"
         :total-items="networkUuids.length"
         @toggle-select-all="toggleSelect"
       />
     </div>
   </div>
-  <UiCardSpinner v-if="!isReady" />
 </template>
 
 <script setup lang="ts">
@@ -107,6 +112,7 @@ 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 VtsIcon from '@core/components/icon/VtsIcon.vue'
+import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
 import ColumnTitle from '@core/components/table/ColumnTitle.vue'
 import VtsTable from '@core/components/table/VtsTable.vue'
 import UiButton from '@core/components/ui/button/UiButton.vue'
@@ -140,18 +146,16 @@ const { networks, isReady } = defineProps<{
     vlan?: string
   }[]
   isReady: boolean
+  selectedRowId: string | null
 }>()
 
 const emit = defineEmits<{
   rowSelectNetwork: [value: any]
 }>()
 
 
-const selectedRowId = ref('')
-
-const selectRow = (item: any) => {
-  selectedRowId.value = item.network.uuid
-  emit('rowSelectNetwork', item)
+const selectRow = (item: any, table: string) => {
+  emit('rowSelectNetwork', { item, table })
 }
 
 const searchQuery = ref('')
@@ -229,6 +233,11 @@ const getHeaderIcon = (status: NetworkHeader) => headerIcon[status].icon
     .table {
       overflow-x: auto;
 
+      tbody tr:hover {
+        cursor: pointer;
+        background-color: var(--color-info-background-hover);
+      }
+
       tr:last-child {
         border-bottom: 1px solid var(--color-neutral-border);
       }

diff --git a/@xen-orchestra/lite/src/views/pool/PoolNetworkView.vue b/@xen-orchestra/lite/src/views/pool/PoolNetworkView.vue
@@ -1,9 +1,18 @@
 <template>
   <div class="pool-network-view">
     <UiCard class="card">
-        <PoolNetworksTable :networks="networksWithVLANs" :is-ready @row-select-network="selectNetwork" />
-        <PoolHostInternalNetworkTable :networks="hostInternalNetworks" :is-ready @row-select-host-internal-network="selectNetwork"
-        />
+      <PoolNetworksTable
+        :networks="networksWithVLANs"
+        :is-ready
+        :selected-row-id="selectedNetworkRowId"
+        @row-select-network="selectNetwork"
+      />
+      <PoolHostInternalNetworkTable
+        :host-internal-network="hostInternalNetworks"
+        :is-ready
+        :selected-row-id="selectedHostInternalRowId"
+        @row-select-host-internal-network="selectNetwork"
+      />
     </UiCard>
     <PoolNetworksSidePanel v-if="selectedNetworks" :selected-network="selectedNetworks" :selected-pifs="selectedPIFs" />
     <UiPanel v-else class="panel-container">
@@ -46,10 +55,17 @@ const selectedPIFs = ref<
 >()
 
 
-const selectNetwork = (item: any) => {
-  if (item.network) {
-    const network = networksWithVLANs.value.find(pif => pif.network.uuid === item.network.uuid)
-    selectedPIFs.value = getPIFsInformationByNetwork(item.network)
+const selectedNetworkRowId = ref<string | null>(null)
+const selectedHostInternalRowId = ref<string | null>(null)
+
+const selectNetwork = (payload: { item: any; table: string }) => {
+  if (payload.table === 'network') {
+    selectedHostInternalRowId.value = null
+
+    selectedNetworkRowId.value = payload.item.network.uuid
+
+    const network = networksWithVLANs.value.find(pif => pif.network.uuid === payload.item.network.uuid)
+    selectedPIFs.value = getPIFsInformationByNetwork(payload.item.network)
     if (network) {
       selectedNetworks.value = {
         network: network.network,
@@ -58,7 +74,12 @@ const selectNetwork = (item: any) => {
       }
     }
   } else {
-    const hostInternalNetwork = hostInternalNetworks.value.find(pif => pif.uuid === item.uuid)
+    const hostInternalNetwork = hostInternalNetworks.value.find(pif => pif.uuid === payload.item.uuid)
+
+    selectedNetworkRowId.value = null
+
+    selectedHostInternalRowId.value = payload.item.uuid
+
     if (hostInternalNetwork) {
       selectedNetworks.value = {
         network: hostInternalNetwork,