feat(xo-6): add host network view

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

@@ -59,7 +59,6 @@
 
   "descending": "sestupně",
   "description": "Popis",
-  "dhcp": "DHCP",
   "disabled": "Zakázáno",
   "display": "Zobrazení",
   "dns": "DNS",

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

@@ -57,7 +57,6 @@
 
   "descending": "absteigend",
   "description": "Beschreibung",
-  "dhcp": "DHCP",
   "disabled": "deaktiviert",
   "display": "Display",
   "dns": "DNS",
@@ -118,7 +117,6 @@
   "n-hosts-awaiting-patch": "Der Host {n} benötigt dieses Patch | Die Hosts {n} benötigen dieses Patch",
   "n-missing": "{n} verbleibend",
   "name": "Name",
-  "netmask": "Netzmaske",
   "network-download": "Download",
   "network-throughput": "Netzwerkdurchsatz",
   "network-upload": "Upload",

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

@@ -43,7 +43,6 @@
   "cpu-provisioning": "CPU provisioning",
   "cpu-provisioning-warning": "The number of vCPUs allocated exceeds the number of physical CPUs available. System performance could be affected",
   "cpu-usage": "CPU usage",
-  "delete": "Delete",
   "delete-vms": "Delete 1 VM | Delete {n} VMs",
   "deploy": "Deploy",
   "deploy-xoa": "Deploy XOA",
@@ -58,11 +57,7 @@
   "deploy-xoa-status.waiting": "Waiting for XOA to respond…",
 
   "descending": "descending",
-  "description": "Description",
-  "dhcp": "DHCP",
-  "disabled": "Disabled",
   "display": "Display",
-  "dns": "DNS",
   "do-you-have-needs": "You have needs and/or expectations? Let us know",
   "documentation": "Documentation",
   "edit-config": "Edit config",
@@ -178,16 +173,13 @@
   "migrate-n-vms": "Migrate 1 VM | Migrate {n} VMs",
   "n-hosts-awaiting-patch": "{n} host is awaiting this patch | {n} hosts are awaiting this patch",
   "n-missing": "{n} missing",
-  "name": "Name",
-  "netmask": "Netmask",
   "network-download": "Download",
   "network-throughput": "Network throughput",
   "network-upload": "Upload",
   "new-features-are-coming": "New features are coming soon!",
   "news": "News",
   "news-name": "{name} news",
   "no-alarm-triggered": "No alarm triggered",
-  "no-result": "No result",
   "no-selected-vm-can-be-exported": "No selected VM can be exported",
   "no-selected-vm-can-be-migrated": "No selected VM can be migrated",
   "no-tasks": "No tasks",
@@ -241,7 +233,6 @@
   "start": "Start",
   "start-on-host": "Start on specific host",
   "static-ip": "Static IP",
-  "status": "Status",
   "storage-usage": "Storage usage",
   "support": "Support",
   "suspend": "Suspend",

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

@@ -58,7 +58,6 @@
 
   "descending": "نزولی",
   "description": "توصیف",
-  "dhcp": "DHCP",
   "disabled": "غیر فعال",
   "display": "نمایش",
   "dns": "DNS",

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

@@ -43,7 +43,6 @@
   "cpu-provisioning": "Provisionnement CPU",
   "cpu-provisioning-warning": "Le nombre de vCPU alloués dépasse le nombre de CPU physique disponible. Les performances du système pourraient être affectées",
   "cpu-usage": "Utilisation CPU",
-  "delete": "Supprimer",
   "delete-vms": "Supprimer 1 VM | Supprimer {n} VMs",
   "deploy": "Déployer",
   "deploy-xoa": "Déployer XOA",
@@ -58,10 +57,6 @@
   "deploy-xoa-status.waiting": "En attente de réponse de la XOA…",
 
   "descending": "descendant",
-  "description": "Description",
-  "dhcp": "DHCP",
-  "dns": "DNS",
-  "disabled": "Désactivé",
   "display": "Affichage",
   "do-you-have-needs": "Vous avez des besoins et/ou des attentes ? Faites le nous savoir",
   "documentation": "Documentation",
@@ -178,16 +173,13 @@
   "migrate-n-vms": "Migrer 1 VM | Migrer {n} VMs",
   "n-hosts-awaiting-patch": "{n} hôte attend ce patch | {n} hôtes attendent ce patch",
   "n-missing": "{n} manquant | {n} manquants",
-  "name": "Nom",
-  "netmask": "Masque réseau",
   "network-download": "Descendant",
   "network-throughput": "Débit du réseau",
   "network-upload": "Montant",
   "new-features-are-coming": "De nouvelles fonctionnalités arrivent bientôt !",
   "news": "Actualités",
   "news-name": "Actualités {name}",
   "no-alarm-triggered": "Aucune alarme déclenchée",
-  "no-result": "Aucun résultat",
   "no-selected-vm-can-be-exported": "Aucune VM sélectionnée ne peut être exportée",
   "no-selected-vm-can-be-migrated": "Aucune VM sélectionnée ne peut être migrée",
   "no-tasks": "Aucune tâche",
@@ -241,7 +233,6 @@
   "start": "Démarrer",
   "start-on-host": "Démarrer sur un hôte spécifique",
   "static-ip": "IP statique",
-  "status": "Statut",
   "storage-usage": "Utilisation du stockage",
   "support": "Support",
   "suspend": "Suspendre",

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

@@ -25,11 +25,11 @@ const slots = defineSlots<{
 <style lang="postcss" scoped>
 .vts-card-row-key-value {
   display: flex;
-  align-items: center;
   gap: 0.8rem;
 
   .key {
     min-width: 12rem;
+    max-width: 12rem;
     overflow-wrap: break-word;
     color: var(--color-neutral-txt-secondary);
   }

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

@@ -9,7 +9,11 @@ import UiInfo, { type InfoAccent } from '@core/components/ui/info/UiInfo.vue'
 import { computed, type ComputedRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-type ConnectionStatus = 'connected' | 'disconnected' | 'partially-connected' | 'disconnected-from-physical-device'
+export type ConnectionStatus =
+  | 'connected'
+  | 'disconnected'
+  | 'partially-connected'
+  | 'disconnected-from-physical-device'
 type ConnectionStatusesMap = Record<ConnectionStatus, { text: string; accent: InfoAccent }>
 
 const { status } = defineProps<{

@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

@@ -3,12 +3,12 @@
   <MenuList :disabled placement="bottom-start">
     <template #trigger="{ open, isOpen }">
       <th
-        :class="{ interactive, disabled, focus: isOpen }"
+        :class="[headerClass, { interactive, disabled, focus: isOpen }]"
         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>
@@ -58,6 +58,7 @@ const props = withDefaults(
     icon?: IconDefinition
     interactive?: boolean
     disabled?: boolean
+    headerClass?: string
   }>(),
   {
     disabled: false,

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

@@ -0,0 +1,35 @@
+<template>
+  <div class="table-container">
+    <VtsLoadingHero :disabled="isReady" type="table">
+      <VtsTable class="table" vertical-border>
+        <thead>
+          <slot name="thead" />
+        </thead>
+        <tbody>
+          <slot name="tbody" />
+        </tbody>
+      </VtsTable>
+    </VtsLoadingHero>
+    <VtsErrorNoDataHero v-if="hasError" type="table" />
+    <VtsStateHero v-if="noDataMessage && isReady" type="table" image="no-data">
+      {{ noDataMessage }}
+    </VtsStateHero>
+  </div>
+</template>
+
+<script setup lang="ts">
+import VtsErrorNoDataHero from '@core/components/state-hero/VtsErrorNoDataHero.vue'
+import VtsLoadingHero from '@core/components/state-hero/VtsLoadingHero.vue'
+import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
+import VtsTable from '@core/components/table/VtsTable.vue'
+
+defineProps<{
+  isReady?: boolean
+  hasError?: boolean
+  noDataMessage?: string
+}>()
+defineSlots<{
+  thead(): any
+  tbody(): any
+}>()
+</script>

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

@@ -18,7 +18,7 @@ defineSlots<{
 .ui-card {
   display: flex;
   gap: 2.4rem;
-  padding: 2.4rem;
+  padding: 1.6rem;
   flex-direction: column;
   background-color: var(--color-neutral-background-primary);
   border: 0.1rem solid var(--color-neutral-border);

@xen-orchestra/web-core/lib/components/ui/checkbox/UiCheckbox.vue

@@ -39,7 +39,7 @@ const props = defineProps<{
   wrapperAttrs?: LabelHTMLAttributes
 }>()
 
-const checkboxModel = defineModel<boolean | undefined>({ default: undefined })
+const checkboxModel = defineModel<boolean | undefined | string[]>({ default: undefined })
 
 const slots = defineSlots<{
   default?(): any

@xen-orchestra/web-core/lib/components/ui/info/UiInfo.vue

@@ -44,7 +44,6 @@ const icon = computed(() => iconByAccent[accent])
 
 <style lang="postcss" scoped>
 .ui-info {
-  align-items: start;
   display: flex;
   gap: 0.8rem;
 

@xen-orchestra/web-core/lib/components/ui/input/UiInput.vue

@@ -69,6 +69,7 @@ const labelAccent = computed(() => (accent === 'info' ? 'neutral' : accent))
   position: relative;
   display: flex;
   flex-direction: column;
+  flex: 1;
   gap: 0.4rem;
 
   .input {

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

@@ -28,6 +28,7 @@ const slots = defineSlots<{
   flex-direction: column;
   border: 0.1rem solid var(--color-neutral-border);
   background-color: var(--color-neutral-background-secondary);
+  position: relative;
 
   .header {
     border-bottom: 0.1rem solid var(--color-neutral-border);
@@ -44,6 +45,8 @@ const slots = defineSlots<{
     flex-direction: column;
     padding: 0.8rem;
     gap: 0.8rem;
+    height: 100%;
+    cursor: default;
   }
 
   &.error {

@xen-orchestra/web-core/lib/components/ui/table-pagination/UiTablePagination.vue

@@ -12,7 +12,7 @@
     </span>
     <span class="typo p3-regular label show">{{ $t('core.show-by') }}</span>
     <div class="dropdown-wrapper">
-      <select v-model="pageSize" :disabled class="dropdown typo c3-regular" @change="goToFirstPage">
+      <select v-model="localPageSize" :disabled="disabled" class="dropdown typo c3-regular" @change="goToFirstPage">
         <option v-for="option in pageSizeOptions" :key="option" :value="option" class="typo p2-medium">
           {{ option }}
         </option>
@@ -33,7 +33,7 @@ import {
   faAngleRight,
 } from '@fortawesome/free-solid-svg-icons'
 import { useOffsetPagination } from '@vueuse/core'
-import { computed, ref, watch } from 'vue'
+import { computed, ref, watch, watchEffect } from 'vue'
 
 export type PaginationPayload = {
   currentPage: number
@@ -42,17 +42,42 @@ export type PaginationPayload = {
   endIndex: number
 }
 
-const { totalItems, disabled = false } = defineProps<{
+const {
+  totalItems,
+  disabled = false,
+  currPage,
+  perPage,
+  startIndex,
+  endIndex,
+} = defineProps<{
   totalItems: number
   disabled?: boolean
+  currPage: number
+  perPage: number
+  startIndex: number
+  endIndex: number
 }>()
 
 const emit = defineEmits<{
   change: [payload: PaginationPayload]
+  'update:currPage': [value: number]
+  'update:per-page': [value: number]
+  'update:start-index': [value: number]
+  'update:end-index': [value: number]
 }>()
 
-const pageSize = ref(50)
+const localPageSize = ref(perPage)
+const localCurrentPage = ref(currPage)
 const pageSizeOptions = [10, 50, 100, 150, 200]
+
+watch([() => perPage, () => currPage], ([newPerPage, newCurrPage], [oldPerPage, oldCurrPage]) => {
+  if (newPerPage !== oldPerPage) {
+    localPageSize.value = newPerPage
+  }
+  if (newCurrPage !== oldCurrPage) {
+    localCurrentPage.value = newCurrPage
+  }
+})
 const {
   currentPage,
   currentPageSize,
@@ -63,10 +88,11 @@ const {
   next: goToNextPage,
 } = useOffsetPagination({
   total: () => totalItems,
-  pageSize,
+  pageSize: localPageSize,
+  page: localCurrentPage,
 })
-const startIndex = computed(() => (currentPage.value - 1) * currentPageSize.value + 1)
-const endIndex = computed(() => Math.min(currentPage.value * currentPageSize.value, totalItems))
+const localStartIndex = computed(() => (currentPage.value - 1) * currentPageSize.value + 1)
+const localEndIndex = computed(() => Math.min(currentPage.value * currentPageSize.value, totalItems))
 
 const goToFirstPage = () => {
   currentPage.value = 1
@@ -75,12 +101,19 @@ const goToLastPage = () => {
   currentPage.value = pageCount.value
 }
 
+watchEffect(() => {
+  emit('update:currPage', localCurrentPage.value)
+  emit('update:per-page', localPageSize.value)
+  emit('update:start-index', localStartIndex.value)
+  emit('update:end-index', localEndIndex.value)
+})
+
 watch([currentPage, currentPageSize], ([newPage, newPageSize]) => {
   emit('change', {
     currentPage: newPage,
     pageSize: newPageSize,
-    startIndex: startIndex.value,
-    endIndex: endIndex.value,
+    startIndex: localStartIndex.value,
+    endIndex: localEndIndex.value,
   })
 })
 </script>