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",
@@ -59,10 +58,8 @@
 
   "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",
@@ -179,7 +176,6 @@
   "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",
@@ -241,7 +237,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",
@@ -59,8 +58,6 @@
 
   "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",
@@ -179,7 +176,6 @@
   "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",
@@ -241,7 +237,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/table/ColumnTitle.vue

@@ -3,12 +3,12 @@
   <MenuList :disabled placement="bottom-start" border>
     <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/ui/checkbox/UiCheckbox.vue

@@ -43,7 +43,7 @@ const props = withDefaults(
   { disabled: undefined }
 )
 
-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

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

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

@@ -44,6 +44,7 @@ const slots = defineSlots<{
     flex-direction: column;
     padding: 0.8rem;
     gap: 0.8rem;
+    cursor: default;
   }
 
   &.error {

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

@@ -1,4 +1,3 @@
-<!-- v2 -->
 <template>
   <div class="ui-table-pagination">
     <div class="buttons-container">
@@ -12,7 +11,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 +32,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 +41,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 +87,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 +100,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>

@xen-orchestra/web-core/lib/composables/multi-select.composable.md

@@ -0,0 +1,33 @@
+# useMultiSelect composable
+
+```vue
+<template>
+  <table>
+    <thead>
+      <tr>
+        <th>
+          <input type="checkbox" v-model="areAllSelected" />
+        </th>
+        <th>Name</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="item in items">
+        <td>
+          <input type="checkbox" :value="item.id" v-model="selected" />
+        </td>
+        <td>{{ item.name }}</td>
+      </tr>
+    </tbody>
+  </table>
+
+  <!-- You can use something else than a "Select All" checkbox -->
+  <button @click="areAllSelected = !areAllSelected">Toggle all selected</button>
+</template>
+
+<script lang="ts" setup>
+import useMultiSelect from './multi-select.composable'
+
+const { selected, areAllSelected } = useMultiSelect()
+</script>
+```

@xen-orchestra/web-core/lib/composables/table/multi-select.composable.ts

@@ -0,0 +1,32 @@
+import { computed, ref, unref, type MaybeRef, type Ref } from 'vue'
+
+export default function useMultiSelect<T>(usableIds: MaybeRef<T[]>, selectableIds?: MaybeRef<T[]>) {
+  const $selected = ref(new Set()) as Ref<Set<T>>
+
+  const selected = computed({
+    get() {
+      return unref(usableIds).filter(usableId => $selected.value.has(usableId))
+    },
+    set(ids: T[]) {
+      $selected.value = new Set(ids)
+    },
+  })
+
+  const areAllSelected = computed({
+    get() {
+      return (unref(selectableIds) ?? unref(usableIds)).every(id => $selected.value.has(id))
+    },
+    set(value: boolean) {
+      if (value) {
+        $selected.value = new Set(unref(selectableIds) ?? unref(usableIds))
+      } else {
+        $selected.value = new Set()
+      }
+    },
+  })
+
+  return {
+    selected,
+    areAllSelected,
+  }
+}

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

@@ -18,6 +18,7 @@
   "dark-mode.auto": "Automatischer Dunkelmodus",
 
   "dashboard": "Dashboard",
+  "dhcp": "DHCP",
   "documentation-name": "{name} Dokumentation",
   "error-no-data": "Fehler beim Datenabruf.",
   "fullscreen": "Vollbild",
@@ -28,6 +29,7 @@
   "log-out": "Abmelden",
   "master": "Primärer Host",
   "n-vms": "1 VM | {n} VMs",
+  "netmask": "Netzmaske",
   "network": "Netzwerk",
   "object-not-found": "Objekt {id} wurde nicht gefunden…",
   "open-console-in-new-tab": "Konsole in neuem Reiter öffnen",