From a05a2dd665a8c8e21885da175c96a2bc5a37bb77 Mon Sep 17 00:00:00 2001
From: Joris-K <joris.kosacki@vates.tech>
Date: Thu, 2 Jan 2025 11:17:19 +0100
Subject: [PATCH] improve

---
 .../network/PoolHostInternalNetworkTable.vue  |   8 +-
 .../pool/network/PoolNetworksSidePanel.vue    | 126 ++++++++++++------
 .../pool/network/PoolNetworksTable.vue        |   6 +-
 .../lite/src/stores/xen-api/network.store.ts  |  42 +-----
 .../src/stores/xen-api/pif-metrics.store.ts   |  20 +++
 .../lite/src/stores/xen-api/pif.store.ts      |  71 +++++++++-
 @xen-orchestra/lite/src/types/status.ts       |   2 +-
 .../lite/src/views/pool/PoolNetworkView.vue   |  17 ++-
 .../lib/components/table/ColumnTitle.vue      |   2 +-
 .../lib/components/ui/panel/UiPanel.vue       |   1 +
 10 files changed, 197 insertions(+), 98 deletions(-)
 create mode 100644 @xen-orchestra/lite/src/stores/xen-api/pif-metrics.store.ts

diff --git a/@xen-orchestra/lite/src/components/pool/network/PoolHostInternalNetworkTable.vue b/@xen-orchestra/lite/src/components/pool/network/PoolHostInternalNetworkTable.vue
index ddd3d0db392..f6e476470b1 100644
--- a/@xen-orchestra/lite/src/components/pool/network/PoolHostInternalNetworkTable.vue
+++ b/@xen-orchestra/lite/src/components/pool/network/PoolHostInternalNetworkTable.vue
@@ -56,7 +56,9 @@
                   <UiButtonIcon size="small" accent="info" :icon="getHeaderIcon(column.id)" />
                   {{ column.label }}
                 </th>
-                <ColumnTitle v-else :icon="getHeaderIcon(column.id)"> {{ column.label }}</ColumnTitle>
+                <ColumnTitle v-else :icon="getHeaderIcon(column.id)">
+                  <span class="text-ellipsis">{{ column.label }}</span>
+                </ColumnTitle>
               </template>
             </tr>
           </thead>
@@ -129,13 +131,13 @@ const { networks, isReady } = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  rowSelectHostInternalNetwork: [value: any]
+  rowSelectNetwork: [value: any]
 }>()
 
 const searchQuery = ref('')
 
 const selectRow = (item: any, table: string) => {
-  emit('rowSelectHostInternalNetwork', { item, table })
+  emit('rowSelectNetwork', { item, table })
 }
 
 const filteredNetworks = computed(() => {
diff --git a/@xen-orchestra/lite/src/components/pool/network/PoolNetworksSidePanel.vue b/@xen-orchestra/lite/src/components/pool/network/PoolNetworksSidePanel.vue
index 513309db05d..8ae6a03f155 100644
--- a/@xen-orchestra/lite/src/components/pool/network/PoolNetworksSidePanel.vue
+++ b/@xen-orchestra/lite/src/components/pool/network/PoolNetworksSidePanel.vue
@@ -1,83 +1,103 @@
 <template>
   <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>
+      <UiButton
+        v-tooltip="$t('coming-soon')"
+        disabled
+        variant="tertiary"
+        size="medium"
+        accent="info"
+        :left-icon="faEdit"
+      >
+        {{ $t('edit') }}
+      </UiButton>
+      <UiButton
+        v-tooltip="$t('coming-soon')"
+        disabled
+        variant="tertiary"
+        size="medium"
+        accent="danger"
+        :left-icon="faTrash"
+      >
+        {{ $t('delete') }}
+      </UiButton>
       <UiButtonIcon accent="info" size="medium" :icon="faEllipsis" />
     </template>
     <UiCard v-if="selectedNetwork" class="card-container">
       <UiCardTitle v-tooltip="{ placement: 'bottom-end' }" class="typo p1-medium text-ellipsis">
-        {{ (selectedNetwork as any)?.network.name_label }}
+        {{ selectedNetwork.network.name_label }}
       </UiCardTitle>
       <div>
         <div class="typo p3-regular content">
           <div class="title">{{ $t('uuid') }}</div>
-          <div class="value text-ellipsis">{{ (selectedNetwork as any)?.network.uuid }}</div>
+          <div class="value text-ellipsis">{{ getDisplayValue(selectedNetwork.network.uuid) }}</div>
           <UiButtonIcon
+            v-if="selectedNetwork.network.uuid"
             accent="info"
             size="medium"
             :icon="faCopy"
-            @click="copyToClipboard((selectedNetwork as any)?.network.uuid)"
+            @click="copyToClipboard(selectedNetwork.network.uuid)"
           />
         </div>
         <div class="typo p3-regular content">
           <div class="title">{{ $t('description') }}</div>
-          <div class="value text-ellipsis">{{ (selectedNetwork as any)?.network.name_description }}</div>
+          <div class="value text-ellipsis">{{ getDisplayValue(selectedNetwork.network.name_description) }}</div>
           <UiButtonIcon
+            v-if="selectedNetwork.network.name_description"
             accent="info"
             size="medium"
             :icon="faCopy"
-            @click="copyToClipboard((selectedNetwork as any)?.network.name_description)"
+            @click="copyToClipboard(selectedNetwork.network.name_description)"
           />
         </div>
-        <div v-if="(selectedNetwork as any)?.vlan" class="typo p3-regular content">
+        <div 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 class="value">{{ getDisplayValue(selectedNetwork.vlan) }}</div>
+          <UiButtonIcon
+            v-if="selectedNetwork.vlan"
+            accent="info"
+            size="medium"
+            :icon="faCopy"
+            @click="copyToClipboard(selectedNetwork.vlan)"
+          />
         </div>
         <div class="typo p3-regular content">
           <div class="title">{{ $t('mtu') }}</div>
-          <div class="value">{{ (selectedNetwork as any)?.network.MTU }}</div>
+          <div class="value">{{ getDisplayValue(selectedNetwork.network.MTU) }}</div>
           <UiButtonIcon
+            v-if="selectedNetwork.network.MTU"
             accent="info"
             size="medium"
             :icon="faCopy"
-            @click="copyToClipboard((selectedNetwork as any)?.network.MTU)"
+            @click="copyToClipboard(selectedNetwork.network.MTU)"
           />
         </div>
-        <div v-if="(selectedNetwork as any)?.network.purpose[0]" class="typo p3-regular content">
+        <div class="typo p3-regular content">
           <div class="title">{{ $t('network-block-device') }}</div>
-          <div class="value">{{ (selectedNetwork as any)?.network.purpose[0] }}</div>
+          <div class="value">{{ getDisplayValue(selectedNetwork.network.purpose[0]) }}</div>
           <UiButtonIcon
-            v-if="(selectedNetwork as any)?.network.purpose[0]"
+            v-if="selectedNetwork.network.purpose[0]"
             accent="info"
             size="medium"
             :icon="faCopy"
-            @click="copyToClipboard((selectedNetwork as any)?.network.purpose[0])"
+            @click="copyToClipboard(selectedNetwork.network.purpose[0])"
           />
         </div>
         <div class="typo p3-regular content">
           <div class="title">{{ $t('locking-mode-default') }}</div>
-          <div class="value default-locking">{{ (selectedNetwork as any)?.network.default_locking_mode }}</div>
+          <div class="value">{{ getDisplayValue(selectedNetwork.network.default_locking_mode) }}</div>
         </div>
       </div>
     </UiCard>
-    <UiCard
-      v-if="
-        selectedNetwork.network &&
-        (selectedNetwork as any)?.network.PIFs &&
-        (selectedNetwork as any)?.network.PIFs.length > 0
-      "
-      class="card-container"
-    >
+    <UiCard v-if="selectedNetwork?.network?.PIFs?.length > 0" class="card-container">
       <div class="typo p1-medium">
         {{ $t('pifs') }}
-        <UiCounter :value="selectedPIFsLength" variant="primary" size="small" accent="neutral" />
+        <UiCounter :value="selectedPifsLength" variant="primary" size="small" accent="neutral" />
       </div>
       <table class="simple-table">
         <thead>
           <tr>
-            <th class="text-left typo p3-regular">
+            <th class="text-left typo p3-regular host">
               {{ $t('host') }}
             </th>
             <th class="text-left typo p3-regular">
@@ -91,21 +111,19 @@
         </thead>
         <tbody>
           <tr v-for="selected in selectedPifs" :key="selected.PIF.uuid">
-            <td class="typo p3-regular">
+            <td class="typo p3-regular host">
               <UiObjectIcon :state="selected?.host?.hostStatus ? 'running' : 'disabled'" type="host" size="small" />
               <a>
                 {{ selected?.host?.name_label }}
               </a>
             </td>
-            <td class="typo p3-regular">
+            <td class="typo p3-regular device">
               {{ 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>
-              <UiInfo v-else accent="warning"> {{ $t('partially-connected') }}</UiInfo>
+            <td class="typo p3-regular status">
+              <VtsConnectionStatus :status="selected.status" />
             </td>
-            <td>
+            <td class="text-right">
               <UiButtonIcon size="small" accent="info" :icon="faAngleRight" />
             </td>
           </tr>
@@ -117,12 +135,13 @@
 
 <script setup lang="ts">
 import type { XenApiNetwork, XenApiPif } from '@/libs/xen-api/xen-api.types'
+import type { Status } from '@/types/status'
+import VtsConnectionStatus from '@core/components/connection-status/VtsConnectionStatus.vue'
 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'
 import UiPanel from '@core/components/ui/panel/UiPanel.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
@@ -132,11 +151,12 @@ import { computed } from 'vue'
 const { selectedPifs, selectedNetwork } = defineProps<{
   selectedNetwork?: {
     network: XenApiNetwork
-    status?: string
+    status?: Status
     vlan?: string
   }
   selectedPifs?: {
     PIF: XenApiPif
+    status: Status
     host?: {
       name_label?: string
       hostStatus?: boolean
@@ -144,7 +164,11 @@ const { selectedPifs, selectedNetwork } = defineProps<{
   }[]
 }>()
 
-const selectedPIFsLength = computed(() => selectedPifs?.length.toString())
+const selectedPifsLength = computed(() => selectedPifs?.length.toString())
+
+const getDisplayValue = (value?: string | number): string => {
+  return value ? String(value) : '-'
+}
 
 const copyToClipboard = (text: string | number) => {
   const stringText = String(text)
@@ -165,24 +189,42 @@ const copyToClipboard = (text: string | number) => {
 
     .title {
       color: var(--color-neutral-txt-secondary);
-      min-width: 12rem;
+      min-width: 14rem;
     }
 
     .value {
       color: var(--color-neutral-txt-primary);
       width: 20rem;
     }
-
-    .default-locking {
-      width: 23rem;
-    }
   }
 
   .text-left {
     text-align: left;
   }
 
+  .text-right {
+    text-align: right;
+  }
+
   .simple-table {
+    border-spacing: 0;
+    padding: 0.4rem;
+
+    td.host {
+      width: 13rem;
+      max-width: 13rem;
+    }
+
+    td.device {
+      width: 6rem;
+      max-width: 6rem;
+    }
+
+    td.status {
+      width: 14rem;
+      max-width: 14rem;
+    }
+
     tbody tr {
       cursor: pointer;
 
diff --git a/@xen-orchestra/lite/src/components/pool/network/PoolNetworksTable.vue b/@xen-orchestra/lite/src/components/pool/network/PoolNetworksTable.vue
index 727198b212a..993643d5bd8 100644
--- a/@xen-orchestra/lite/src/components/pool/network/PoolNetworksTable.vue
+++ b/@xen-orchestra/lite/src/components/pool/network/PoolNetworksTable.vue
@@ -67,7 +67,7 @@
                   {{ column.label }}
                 </th>
                 <ColumnTitle v-else :icon="getHeaderIcon(column.id)">
-                  {{ column.label }}
+                  <span class="text-ellipsis">{{ column.label }}</span>
                 </ColumnTitle>
               </template>
             </tr>
@@ -251,6 +251,10 @@ const getHeaderIcon = (status: NetworkHeader) => headerIcon[status]
     .more {
       width: 4.8rem;
     }
+
+    ::deep(.col-status) {
+      width: 2rem;
+    }
   }
 }
 </style>
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 7f69bcb70c6..3678a8d4318 100644
--- a/@xen-orchestra/lite/src/stores/xen-api/network.store.ts
+++ b/@xen-orchestra/lite/src/stores/xen-api/network.store.ts
@@ -1,6 +1,5 @@
-import type { XenApiNetwork, XenApiPif } from '@/libs/xen-api/xen-api.types'
+import type { XenApiPif } from '@/libs/xen-api/xen-api.types'
 import { createXapiStoreConfig } from '@/stores/xen-api/create-xapi-store-config'
-import { useHostMetricsStore } from '@/stores/xen-api/host-metrics.store'
 import { useHostStore } from '@/stores/xen-api/host.store'
 import { usePifStore } from '@/stores/xen-api/pif.store'
 import { usePoolStore } from '@/stores/xen-api/pool.store'
@@ -17,7 +16,6 @@ export const useNetworkStore = defineStore('xen-api-network', () => {
     poolStore: usePoolStore(),
     hostStore: useHostStore(),
     pifStore: usePifStore(),
-    metricsStore: useHostMetricsStore(),
   }
 
   const { context: baseContext, ...configRest } = createXapiStoreConfig('network', {
@@ -27,7 +25,6 @@ export const useNetworkStore = defineStore('xen-api-network', () => {
   const poolContext = deps.poolStore.getContext()
   const hostContext = deps.hostStore.getContext()
   const pifContext = deps.pifStore.getContext()
-  const metricsContext = deps.metricsStore.getContext()
 
   const pifsByNetwork = computed(() => {
     const pifsByNetworkMap = new Map<string, XenApiPif[]>()
@@ -63,46 +60,9 @@ export const useNetworkStore = defineStore('xen-api-network', () => {
   const hostInternalNetworks = computed(() => {
     return baseContext.records.value.filter(network => network.PIFs.length === 0) // Only networks without PIFs
   })
-  const PIFsInfoByNetwork = computed(() => {
-    const PIFsInfoMap = new Map<
-      string,
-      {
-        PIF: XenApiPif
-        host?: {
-          name_label?: string
-          status?: boolean
-        }
-      }[]
-    >()
-
-    pifContext.records.value.forEach(PIF => {
-      const hostInfo = hostContext.getByOpaqueRef(PIF.host)
-      const hostStatus = hostInfo?.metrics ? metricsContext.getByOpaqueRef(hostInfo.metrics)?.live || false : false
-
-      const enrichedPIF = {
-        PIF,
-        host: {
-          name_label: hostInfo?.name_label,
-          hostStatus,
-        },
-      }
-
-      if (!PIFsInfoMap.has(PIF.network)) {
-        PIFsInfoMap.set(PIF.network, [])
-      }
-      PIFsInfoMap.get(PIF.network)?.push(enrichedPIF)
-    })
-
-    return PIFsInfoMap
-  })
-
-  const getPIFsInformationByNetwork = (network: XenApiNetwork) => {
-    return PIFsInfoByNetwork.value.get(network?.$ref) || []
-  }
 
   const context = {
     ...baseContext,
-    getPIFsInformationByNetwork,
     networksWithVLANs,
     hostInternalNetworks,
   }
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 }, {})
+})
diff --git a/@xen-orchestra/lite/src/stores/xen-api/pif.store.ts b/@xen-orchestra/lite/src/stores/xen-api/pif.store.ts
index 5c013a85186..79c18341b41 100644
--- a/@xen-orchestra/lite/src/stores/xen-api/pif.store.ts
+++ b/@xen-orchestra/lite/src/stores/xen-api/pif.store.ts
@@ -1,12 +1,77 @@
-import type { XenApiPif } from '@/libs/xen-api/xen-api.types'
+import type { XenApiHost, XenApiNetwork, XenApiPif } from '@/libs/xen-api/xen-api.types'
 import { createXapiStoreConfig } from '@/stores/xen-api/create-xapi-store-config'
+import { useHostMetricsStore } from '@/stores/xen-api/host-metrics.store'
+import { useHostStore } from '@/stores/xen-api/host.store'
+import { usePifMetricsStore } from '@/stores/xen-api/pif-metrics.store'
 import type { Status } from '@/types/status'
 import { createSubscribableStoreContext } from '@core/utils/create-subscribable-store-context.util'
 import { defineStore } from 'pinia'
+import { computed } from 'vue'
 
 export const usePifStore = defineStore('xen-api-pif', () => {
+  const deps = {
+    hostStore: useHostStore(),
+    hostMetricsStore: useHostMetricsStore(),
+    pifMetricsStore: usePifMetricsStore(),
+  }
   const { context: baseContext, ...configRest } = createXapiStoreConfig('pif')
 
+  const hostContext = deps.hostStore.getContext()
+  const hostMetricsContext = deps.hostMetricsStore.getContext()
+  const pifMetricsContext = deps.pifMetricsStore.getContext()
+
+  const pifsInfoByNetwork = computed(() => {
+    const pifsInfoMap = new Map<
+      string,
+      {
+        PIF: XenApiPif
+        status: Status
+        host?: {
+          name_label?: string
+          status?: boolean
+        }
+      }[]
+    >()
+
+    baseContext.records.value.forEach(PIF => {
+      const hostInfo = hostContext.getByOpaqueRef(PIF.host) as XenApiHost
+      const hostStatus = hostMetricsContext.getByOpaqueRef(hostInfo.metrics)?.live
+
+      const pifCarrier = pifMetricsContext.getPifCarrier(PIF)
+      const pifCurrentlyAttached = PIF.currently_attached
+
+      const status = ((): Status => {
+        if (pifCarrier && pifCurrentlyAttached) {
+          return 'connected'
+        }
+        if (!pifCarrier && pifCurrentlyAttached) {
+          return 'disconnected-from-physical-device'
+        }
+        return 'disconnected'
+      })()
+
+      const enrichedPIF = {
+        PIF,
+        status,
+        host: {
+          name_label: hostInfo?.name_label,
+          hostStatus,
+        },
+      }
+
+      if (!pifsInfoMap.has(PIF.network)) {
+        pifsInfoMap.set(PIF.network, [])
+      }
+      pifsInfoMap.get(PIF.network)?.push(enrichedPIF)
+    })
+
+    return pifsInfoMap
+  })
+
+  const getPIFsInformationByNetwork = (network: XenApiNetwork) => {
+    return pifsInfoByNetwork.value.get(network?.$ref) || []
+  }
+
   const determineStatus = (PIFs: XenApiPif[]): Status => {
     if (PIFs.length === 0) {
       return 'disconnected'
@@ -21,7 +86,7 @@ export const usePifStore = defineStore('xen-api-pif', () => {
     return 'disconnected'
   }
 
-  const context = { ...baseContext, determineStatus }
+  const context = { ...baseContext, determineStatus, getPIFsInformationByNetwork }
 
-  return createSubscribableStoreContext({ context, ...configRest }, {})
+  return createSubscribableStoreContext({ context, ...configRest }, deps)
 })
diff --git a/@xen-orchestra/lite/src/types/status.ts b/@xen-orchestra/lite/src/types/status.ts
index 86338b58927..76d8760d26f 100644
--- a/@xen-orchestra/lite/src/types/status.ts
+++ b/@xen-orchestra/lite/src/types/status.ts
@@ -1 +1 @@
-export type Status = 'connected' | 'disconnected' | 'partially-connected'
+export type Status = 'connected' | 'disconnected' | 'partially-connected' | 'disconnected-from-physical-device'
diff --git a/@xen-orchestra/lite/src/views/pool/PoolNetworkView.vue b/@xen-orchestra/lite/src/views/pool/PoolNetworkView.vue
index 86178c00c27..6cb24170b45 100644
--- a/@xen-orchestra/lite/src/views/pool/PoolNetworkView.vue
+++ b/@xen-orchestra/lite/src/views/pool/PoolNetworkView.vue
@@ -11,11 +11,11 @@
         :networks="hostInternalNetworks"
         :is-ready
         :selected-row-id="selectedHostInternalRowId"
-        @row-select-host-internal-network="selectNetwork"
+        @row-select-network="selectNetwork"
       />
     </UiCard>
     <PoolNetworksSidePanel v-if="selectedNetworks" :selected-network="selectedNetworks" :selected-pifs="selectedPIFs" />
-    <UiPanel v-else class="panel-container">
+    <UiPanel v-else class="panel">
       <VtsNoSelectionHero type="panel" />
     </UiPanel>
   </div>
@@ -29,6 +29,8 @@ import UiCard from '@/components/ui/UiCard.vue'
 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 { usePifStore } from '@/stores/xen-api/pif.store'
+import type { Status } from '@/types/status'
 import VtsNoSelectionHero from '@core/components/state-hero/VtsNoSelectionHero.vue'
 import UiPanel from '@core/components/ui/panel/UiPanel.vue'
 import { ref } from 'vue'
@@ -36,17 +38,19 @@ import { useI18n } from 'vue-i18n'
 
 usePageTitleStore().setTitle(useI18n().t('network'))
 
-const { networksWithVLANs, hostInternalNetworks, isReady, getPIFsInformationByNetwork } = useNetworkStore().subscribe()
+const { networksWithVLANs, hostInternalNetworks, isReady } = useNetworkStore().subscribe()
+const { getPIFsInformationByNetwork } = usePifStore().subscribe()
 
 const selectedNetworks = ref<{
   network: XenApiNetwork
-  status?: string
+  status?: Status
   vlan?: string
 }>()
 
 const selectedPIFs = ref<
   {
     PIF: XenApiPif
+    status: Status
     host?: {
       name_label?: string
       hostStatus?: boolean
@@ -103,9 +107,10 @@ const selectNetwork = (payload: { item: any; table: string }) => {
     border-radius: 0.8rem;
   }
 
-  .panel-container {
-    width: 40rem;
+  .panel {
+    height: 100vh;
     border-top: none;
+    border-right: none;
   }
 }
 </style>
diff --git a/@xen-orchestra/web-core/lib/components/table/ColumnTitle.vue b/@xen-orchestra/web-core/lib/components/table/ColumnTitle.vue
index 85127619f52..6a73412f726 100644
--- a/@xen-orchestra/web-core/lib/components/table/ColumnTitle.vue
+++ b/@xen-orchestra/web-core/lib/components/table/ColumnTitle.vue
@@ -8,7 +8,7 @@
         @click="ev => (interactive ? open(ev) : noop())"
       >
         <div class="content">
-          <span class="label">
+          <span class="label text-ellipsis">
             <VtsIcon :icon accent="current" />
             <slot />
           </span>
diff --git a/@xen-orchestra/web-core/lib/components/ui/panel/UiPanel.vue b/@xen-orchestra/web-core/lib/components/ui/panel/UiPanel.vue
index f9ba61d8303..85ed005b150 100644
--- a/@xen-orchestra/web-core/lib/components/ui/panel/UiPanel.vue
+++ b/@xen-orchestra/web-core/lib/components/ui/panel/UiPanel.vue
@@ -45,6 +45,7 @@ const slots = defineSlots<{
     flex-direction: column;
     padding: 0.8rem;
     gap: 0.8rem;
+    min-width: calc(40rem - 0.1rem);
   }
 
   &.error {