feat(xo-6): Add Side panel to host networks

@xen-orchestra/lite/src/locales/en.json

@@ -169,12 +169,10 @@
   "login-only-on-master": "Login is only possible on the master host",
   "migrate": "Migrate",
   "migrate-n-vms": "Migrate 1 VM | Migrate {n} VMs",
-  "more-actions": "More actions",
   "n-gb-left": "{n} GB left",
   "n-gb-required": "{n} GB required",
   "n-hosts-awaiting-patch": "{n} host is awaiting this patch | {n} hosts are awaiting this patch",
   "n-missing": "{n} missing",
-  "netmask": "Netmask",
   "network-download": "Download",
   "network-throughput": "Network throughput",
   "network-upload": "Upload",

@xen-orchestra/lite/src/locales/fr.json

@@ -169,12 +169,10 @@
   "login-only-on-master": "La connexion n'est possible que sur l'hôte primaire",
   "migrate": "Migrer",
   "migrate-n-vms": "Migrer 1 VM | Migrer {n} VMs",
-  "more-actions": "Plus d'actions",
   "n-gb-left": "{n} Go libres",
   "n-gb-required": "{n} Go requis",
   "n-hosts-awaiting-patch": "{n} hôte attend ce patch | {n} hôtes attendent ce patch",
   "n-missing": "{n} manquant | {n} manquants",
-  "netmask": "Masque réseau",
   "network-download": "Descendant",
   "network-throughput": "Débit du réseau",
   "network-upload": "Montant",

@xen-orchestra/web-core/lib/components/card/VtsCardRowKeyValue.vue

@@ -26,15 +26,17 @@ const slots = defineSlots<{
 .vts-card-row-key-value {
   display: flex;
   align-items: center;
-  gap: 0.8rem;
+  gap: 1.2rem;
 
   .key {
+    width: 12rem;
     min-width: 12rem;
     overflow-wrap: break-word;
     color: var(--color-neutral-txt-secondary);
   }
 
   .value {
+    width: 20rem;
     color: var(--color-neutral-txt-primary);
   }
 

@xen-orchestra/web-core/lib/components/connection-status/VtsConnectionStatus.vue

@@ -14,6 +14,7 @@ export type ConnectionStatus =
   | 'disconnected'
   | 'partially-connected'
   | 'disconnected-from-physical-device'
+  | 'physically-disconnected'
 type ConnectionStatusesMap = Record<ConnectionStatus, { text: string; accent: InfoAccent }>
 
 const { status } = defineProps<{
@@ -27,6 +28,8 @@ const statuses: ComputedRef<ConnectionStatusesMap> = computed(() => ({
   disconnected: { text: t('disconnected'), accent: 'danger' },
   'partially-connected': { text: t('partially-connected'), accent: 'warning' },
   'disconnected-from-physical-device': { text: t('disconnected-from-physical-device'), accent: 'warning' },
+  // This status is used in host pif side panel
+  'physically-disconnected': { text: t('disconnected-from-physical-device'), accent: 'danger' },
 }))
 
 const currentStatus = computed(() => statuses.value[status])

@xen-orchestra/web-core/lib/components/data-table/VtsDataTable.vue

@@ -38,21 +38,29 @@ defineSlots<{
   display: flex;
   flex-direction: column;
   gap: 0.8rem;
+  overflow-x: auto;
 
   :deep(tbody) tr {
     &:hover {
       cursor: pointer;
       background-color: var(--color-info-background-hover);
     }
+
     &:active {
       background-color: var(--color-info-background-active);
     }
+
     &.selected {
       background-color: var(--color-info-background-selected);
     }
+
     &:last-child {
       border-bottom: 0.1rem solid var(--color-neutral-border);
     }
   }
+
+  :deep(th) {
+    width: 10rem;
+  }
 }
 </style>

@xen-orchestra/web-core/lib/components/state-hero/VtsStateHero.vue

@@ -107,9 +107,12 @@ const imageSrc = computed(() => {
     gap: 4rem;
     justify-content: unset;
     padding-top: 8rem;
+    position: relative;
 
     .text {
       order: 1;
+      position: sticky;
+      top: 2rem;
     }
 
     .loader {
@@ -120,6 +123,8 @@ const imageSrc = computed(() => {
     .image {
       order: 2;
       width: 80%;
+      position: sticky;
+      top: 10rem;
     }
   }
 

@xen-orchestra/web-core/lib/components/table/ColumnTitle.vue

@@ -7,8 +7,8 @@
         class="column-header"
         @click="ev => (interactive ? open(ev) : noop())"
       >
-        <div class="content">
-          <span class="label">
+        <div class="content text-ellipsis">
+          <span v-tooltip class="label">
             <VtsIcon :icon accent="current" />
             <slot />
           </span>

@xen-orchestra/web-core/lib/components/ui/panel/UiPanel.vue

@@ -23,10 +23,12 @@ const slots = defineSlots<{
 
 <style scoped lang="postcss">
 .ui-panel {
-  height: 100%;
+  max-height: calc(100dvh - 5.5rem);
+  position: sticky;
+  top: 0;
   display: flex;
   flex-direction: column;
-  border: 0.1rem solid var(--color-neutral-border);
+  border-inline-start: 0.1rem solid var(--color-neutral-border);
   background-color: var(--color-neutral-background-secondary);
 
   .header {

@xen-orchestra/web-core/lib/locales/en.json

@@ -11,6 +11,7 @@
   "console": "Console",
   "console-actions": "Console actions",
   "console-clipboard": "Console clipboard",
+  "copy-all": "Copy all",
   "copy-info-json": "Copy information into JSON",
 
   "core.close": "Close",
@@ -74,14 +75,18 @@
   "locking-mode": "Locking mode",
   "locking-mode-default": "Default locking mode",
   "log-out": "Log out",
+  "mac-address": "MAC address",
   "mac-addresses": "MAC addresses",
   "management": "Management",
   "master": "Primary host",
   "mtu": "MTU",
+  "more-actions": "More actions",
   "n-vms": "1 VM | {n} VMs",
   "name": "Name",
+  "netmask": "Netmask",
   "network": "Network",
   "network-block-device": "Network block device",
+  "network-information": "Network information",
   "networks": "Networks",
   "new": "New",
   "no-data": "No data",
@@ -97,11 +102,15 @@
   "page-not-found": "This page is not to be found…",
   "partially-connected": "Partially connected",
   "patches": "Patches",
+  "physical-interface-status": "Physical interface status",
+  "pif": "PIF",
+  "pif-status": "PIF status",
   "pifs": "PIFs",
   "pifs-status": "PIFs status",
   "power-on-host-for-console": "Power on your host to access its console",
   "power-on-vm-for-console": "Power on your VM to access its console",
   "professional-support": "Professional support",
+  "properties": "Properties",
   "receive": "Receive",
   "running-vm": "Running VM | Running VMs",
   "scan-pifs": "Scan PIFs",
@@ -116,6 +125,7 @@
   "storage": "Storage",
   "system": "System",
   "table-actions": "Table actions",
+  "tags": "Tags",
   "tasks": "Tasks",
 
   "tasks.n-subtasks": "{n} subtask | {n} subtasks",
@@ -130,6 +140,7 @@
   "total-cpus": "Total CPUs",
   "unknown": "Unknown",
   "unlocked": "Unlocked",
+  "uuid": "UUID",
   "vlan": "VLAN",
   "vms": "VMs"
 }

@xen-orchestra/web-core/lib/locales/fr.json

@@ -11,6 +11,7 @@
   "console": "Console",
   "console-actions": "Actions de la console",
   "console-clipboard": "Presse-papiers de la console",
+  "copy-all": "Copier tout",
   "copy-info-json": "Copier les informations en JSON",
 
   "core.close": "Fermer",
@@ -74,14 +75,18 @@
   "locking-mode": "Mode verrouillé",
   "locking-mode-default": "Mode verrouillé par défaut",
   "log-out": "Se déconnecter",
+  "mac-address": "Adresse MAC",
   "mac-addresses": "Adresses MAC",
   "management": "Gestion",
   "master": "Hôte primaire",
   "mtu": "MTU",
+  "more-actions": "Plus d'actions",
   "n-vms": "1 VM | {n} VMs",
   "name": "Nom",
+  "netmask": "Masque réseau",
   "network": "Réseau",
   "network-block-device": "Dispositif de blocage réseau",
+  "network-information": "Informations sur le réseau",
   "networks": "Réseaux",
   "new": "Nouveau",
   "no-data": "Aucune donnée",
@@ -97,11 +102,15 @@
   "page-not-found": "Cette page est introuvable…",
   "partially-connected": "Partiellement connecté",
   "patches": "Patches",
+  "physical-interface-status": "Statut de l'interface physique",
+  "pif": "PIF",
+  "pif-status": "Statut du PIF",
   "pifs": "PIFs",
   "pifs-status": "Statut des PIFs",
   "power-on-host-for-console": "Allumez votre hôte pour accéder à sa console",
   "power-on-vm-for-console": "Allumez votre VM pour accéder à sa console",
   "professional-support": "Support professionnel",
+  "properties": "Propriétés",
   "receive": "Recevoir",
   "running-vm": "VM en cours d'exécution | VMs en cours d'exécution",
   "scan-pifs": "Scan PIFs",
@@ -116,6 +125,7 @@
   "storage": "Stockage",
   "system": "Système",
   "table-actions": "Actions du tableau",
+  "tags": "Tags",
   "tasks": "Tâches",
 
   "tasks.n-subtasks": "{n} sous-tâche | {n} sous-tâches",
@@ -130,6 +140,7 @@
   "total-cpus": "Total CPUs",
   "unknown": "Inconnu",
   "unlocked": "Débloqué",
+  "uuid": "UUID",
   "vlan": "VLAN",
   "vms": "VMs"
 }