@xen-orchestra/web-core 0.26.0 → 0.27.0

package/lib/components/ui/collapsible-list/UiCollapsibleList.vue

@@ -0,0 +1,73 @@
+<!-- v1 -->
+<template>
+  <div class="ui-collapsible-list" :class="{ expanded: isExpanded }">
+    <component :is="tag" class="container">
+      <slot />
+    </component>
+    <div v-if="hasMoreItems" class="footer">
+      <span v-if="!isExpanded" class="typo-body-regular-small">{{ t('n-more', { n: remainingItems }) }}</span>
+      <UiButton size="small" accent="brand" variant="tertiary" @click="isExpanded = !isExpanded">
+        {{ isExpanded ? t('see-less') : t('see-all') }}
+      </UiButton>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import UiButton from '@core/components/ui/button/UiButton.vue'
+import { useStyleTag } from '@vueuse/core'
+import { useMax } from '@vueuse/math'
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const {
+  tag,
+  totalItems,
+  visibleItems = 5,
+} = defineProps<{
+  tag: string
+  totalItems: number
+  visibleItems?: number
+}>()
+
+defineSlots<{
+  default(): any
+}>()
+
+const { t } = useI18n()
+
+const remainingItems = useMax(() => totalItems - visibleItems, 0)
+
+const hasMoreItems = computed(() => remainingItems.value > 0)
+
+const isExpanded = ref(false)
+
+const style = computed(
+  () => `.ui-collapsible-list:not(.expanded) > .container *:nth-child(n+${visibleItems + 1}) { display: none }`
+)
+
+useStyleTag(style)
+</script>
+
+<style lang="postcss" scoped>
+.ui-collapsible-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+  align-items: start;
+
+  .container {
+    display: flex;
+    flex-direction: column;
+    gap: 0.8rem;
+    width: 100%;
+  }
+
+  .footer {
+    display: flex;
+    gap: 1.2rem;
+    align-items: center;
+    color: var(--color-neutral-txt-secondary);
+  }
+}
+</style>

package/lib/components/ui/{quoteCode/UiQuoteCode.vue → log-entry-viewer/UiLogEntryViewer.vue}

@@ -1,44 +1,47 @@
+<!-- v2 -->
 <template>
-  <div class="ui-quote-code" :class="className">
+  <div class="ui-log-entry-viewer" :class="className">
     <div class="label-container">
       <div :class="fontClasses.labelClass" class="label">
         {{ label }}
       </div>
-      <div v-if="slots.actions || copy" class="actions">
-        <VtsCopyButton v-if="copy" :value="codeTextValue ?? ''" />
-        <slot name="actions" />
+      <div class="actions">
+        <VtsCopyButton :value="content" />
+        <UiButtonIcon :icon="faArrowUpRightFromSquare" size="medium" accent="brand" @click="openRawValueInNewTab()" />
       </div>
     </div>
-    <code ref="code-element" :class="fontClasses.codeClass" class="code-container">
-      <slot />
+    <code :class="fontClasses.codeClass" class="code-container">
+      {{ content }}
     </code>
   </div>
 </template>
 
 <script setup lang="ts">
 import VtsCopyButton from '@core/components/copy-button/VtsCopyButton.vue'
+import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import { useMapper } from '@core/packages/mapper'
 import { toVariants } from '@core/utils/to-variants.util.ts'
-import { computed, useTemplateRef } from 'vue'
+import { faArrowUpRightFromSquare } from '@fortawesome/free-solid-svg-icons'
+import { computed, watch } from 'vue'
 
-type QuoteCodeAccent = 'brand' | 'danger'
-type QuoteCodeSize = 'small' | 'medium'
+type LogEntryViewerAccent = 'info' | 'warning' | 'danger'
+type LogEntryViewerSize = 'small' | 'medium'
 
-const { size, accent } = defineProps<{
+const {
+  size,
+  accent,
+  content: rawContent = '',
+} = defineProps<{
   label: string
-  size: QuoteCodeSize
-  accent: QuoteCodeAccent
-  copy?: boolean
+  content: string | object | undefined
+  size: LogEntryViewerSize
+  accent: LogEntryViewerAccent
 }>()
 
-const slots = defineSlots<{
+defineSlots<{
   default(): any
-  actions?(): any
 }>()
 
-const codeElement = useTemplateRef('code-element')
-const codeTextValue = computed(() => codeElement.value?.textContent)
-
 const mapping = {
   small: {
     labelClass: 'typo-body-regular-small',
@@ -57,10 +60,32 @@ const className = computed(() =>
     accent,
   })
 )
+
+const content = computed(() => {
+  if (typeof rawContent === 'object') {
+    return JSON.stringify(rawContent, null, 2)
+  }
+
+  return rawContent
+})
+
+const pre = document.createElement('pre')
+
+watch(
+  () => content,
+  content => {
+    pre.textContent = content.value
+  },
+  { immediate: true }
+)
+
+function openRawValueInNewTab() {
+  window.open('', '_blank')?.document.body.appendChild(pre)
+}
 </script>
 
 <style lang="postcss" scoped>
-.ui-quote-code {
+.ui-log-entry-viewer {
   display: flex;
   flex-direction: column;
   gap: 0.4rem;
@@ -88,11 +113,19 @@ const className = computed(() =>
     border-inline-start: 0.2rem solid;
     white-space: pre-wrap;
     word-break: break-word;
+    max-height: 18rem;
+    overflow: auto;
+  }
+
+  &.accent--info {
+    .code-container {
+      border-inline-start-color: var(--color-info-item-base);
+    }
   }
 
-  &.accent--brand {
+  &.accent--warning {
     .code-container {
-      border-inline-start-color: var(--color-brand-item-base);
+      border-inline-start-color: var(--color-warning-item-base);
     }
   }
 

package/lib/components/ui/table-pagination/UiTablePagination.vue

@@ -11,27 +11,15 @@
       {{ t('core.select.n-object-of', { from, to, total }) }}
     </span>
     <span class="typo-body-regular-small label show">{{ t('core.pagination.show-by') }}</span>
-    <div class="dropdown-wrapper">
-      <select v-model="showBy" class="dropdown typo-body-regular-small">
-        <option v-for="option in [12, 24, 48, -1]" :key="option" :value="option" class="typo-body-bold-small">
-          {{ option === -1 ? t('core.pagination.all') : option }}
-        </option>
-      </select>
-      <VtsIcon :icon="faAngleDown" accent="current" class="icon" />
-    </div>
+    <VtsSelect :id="showBySelectId" accent="brand" class="typo-body-regular-small show-by-select" />
   </div>
 </template>
 
 <script lang="ts" setup>
-import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import VtsSelect from '@core/components/select/VtsSelect.vue'
 import PaginationButton from '@core/components/ui/table-pagination/PaginationButton.vue'
-import {
-  faAngleDoubleLeft,
-  faAngleDoubleRight,
-  faAngleDown,
-  faAngleLeft,
-  faAngleRight,
-} from '@fortawesome/free-solid-svg-icons'
+import { useFormSelect } from '@core/packages/form-select'
+import { faAngleDoubleLeft, faAngleDoubleRight, faAngleLeft, faAngleRight } from '@fortawesome/free-solid-svg-icons'
 import { useI18n } from 'vue-i18n'
 
 defineProps<{
@@ -52,6 +40,13 @@ const emit = defineEmits<{
 const showBy = defineModel<number>('showBy', { default: 24 })
 
 const { t } = useI18n()
+
+const { id: showBySelectId } = useFormSelect([12, 24, 48, -1], {
+  model: showBy,
+  option: {
+    label: option => (option === -1 ? t('core.pagination.all') : option.toString()),
+  },
+})
 </script>
 
 <style lang="postcss" scoped>
@@ -74,73 +69,18 @@ const { t } = useI18n()
     margin-right: 0.8rem;
   }
 
-  .dropdown-wrapper {
-    position: relative;
+  /* Workaround: we don't have "small" select yet */
+  .show-by-select {
+    width: 7rem;
 
-    .dropdown {
-      cursor: pointer;
-      padding: 0.2rem 0.6rem;
+    &:deep(.ui-input) {
       height: 3rem;
-      width: 5rem;
-      appearance: none;
-      border-radius: 0.4rem;
-      color: var(--color-brand-txt-base);
-      border: 0.1rem solid var(--color-neutral-border);
-      background-color: var(--color-neutral-background-primary);
-
-      &:hover {
-        border-color: var(--color-brand-item-hover);
-        background-color: var(--color-brand-background-hover);
-        color: var(--color-brand-txt-hover);
-
-        + .icon {
-          color: var(--color-brand-txt-hover);
-        }
-      }
-
-      &:disabled {
-        cursor: not-allowed;
-        background-color: var(--color-neutral-background-disabled);
-        color: var(--color-neutral-txt-secondary);
-        border-color: transparent;
-
-        + .icon {
-          color: var(--color-neutral-txt-secondary);
-        }
-      }
-
-      &:active {
-        background-color: var(--color-brand-background-active);
-        border-color: var(--color-brand-item-active);
-      }
-
-      &:focus-visible {
-        outline: 0.1rem solid var(--color-brand-item-base);
-        border: 0.1rem solid var(--color-brand-item-base);
-        color: var(--color-brand-txt-base);
-        background-color: var(--color-brand-background-selected);
-
-        + .icon {
-          color: var(--color-brand-txt-base);
-        }
-      }
-
-      option {
-        background-color: var(--color-neutral-background-primary);
-        border: 0.1rem solid var(--color-neutral-border);
-        border-radius: 0.4rem;
-        color: var(--color-neutral-txt-primary);
-      }
+      padding-inline: 0.8rem;
+      gap: 0.8rem;
     }
 
-    .icon {
-      position: absolute;
-      top: 50%;
-      right: 0.8rem;
-      transform: translateY(-50%);
-      pointer-events: none;
-      font-size: 1rem;
-      color: var(--color-brand-txt-base);
+    &:deep(.input) {
+      font-size: 1.4rem;
     }
   }
 }

package/lib/composables/default-tab.composable.md

@@ -0,0 +1,42 @@
+# `useDefaultTab` Composable
+
+This composable manages automatic navigation to default tabs and remembers the last visited tab for a given router dispatcher.
+
+## How it works
+
+The composable watches route changes and:
+
+- Automatically redirects to the remembered or default tab when navigating to the base dispatcher route
+- Stores the current tab in localStorage for future visits
+- Uses the naming convention `{dispatcherRouteName}/{tabName}` for tab route names
+
+## Parameters
+
+| Name                  | Type     | Required | Description                                     |
+| --------------------- | -------- | :------: | ----------------------------------------------- |
+| `dispatcherRouteName` | `string` |    ✓     | Dispatcher page route name (e.g., '/pool/<id>') |
+| `defaultTab`          | `string` |    ✓     | Default tab name (e.g., 'dashboard')            |
+
+## Usage
+
+```typescript
+// In the dispatcher page component (e.g., `pages/pool/[id].vue`)
+useDefaultTab('pool/[id]', 'dashboard')
+
+// User first navigates to /pool/123
+// → Automatic redirect to /pool/123/dashboard (default tab)
+
+// User then navigates to /pool/123/stats
+// → 'stats' is stored as the last visited tab for this route
+
+// Finally, user navigates to /pool/456
+// → Automatic redirect to /pool/456/stats
+```
+
+## Storage
+
+Tab preferences are stored in localStorage under the key `default-tabs` with the structure:
+
+```typescript
+Map<string, string> // dispatcherRouteName -> lastVisitedTab
+```

package/lib/composables/default-tab.composable.ts

@@ -0,0 +1,26 @@
+import { useLocalStorage } from '@vueuse/core'
+import { watch } from 'vue'
+import { type RouteLocationRaw, type RouteRecordName, useRoute, useRouter } from 'vue-router'
+
+export function useDefaultTab(dispatcherRouteName: RouteRecordName & string, defaultTab: string) {
+  const storage = useLocalStorage('default-tabs', new Map<string, string>())
+  const router = useRouter()
+  const route = useRoute()
+
+  watch(
+    () => route.name as string,
+    name => {
+      if (name === dispatcherRouteName) {
+        const tabName = storage.value.get(dispatcherRouteName) ?? defaultTab
+        void router.replace({ name: `${dispatcherRouteName}/${tabName}` } as RouteLocationRaw)
+      } else if (!name.startsWith(dispatcherRouteName)) {
+        return
+      }
+
+      const tab = name.slice(dispatcherRouteName.length).split('/')[1] ?? defaultTab
+
+      storage.value.set(dispatcherRouteName, tab)
+    },
+    { immediate: true }
+  )
+}

package/lib/composables/link-component.composable.ts

@@ -1,9 +1,10 @@
 import type { MaybeRefOrGetter } from 'vue'
 import { computed, toValue } from 'vue'
-import type { RouteLocationRaw } from 'vue-router'
+import type { RouteLocationAsPathGeneric, RouteLocationAsRelativeGeneric, RouteLocationAsString } from 'vue-router'
 
 export type LinkOptions = {
-  to?: RouteLocationRaw
+  // Using RouteLocationRaw makes the build fail ("Expression produces a union type that is too complex to represent")
+  to?: RouteLocationAsString | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric
   href?: string
   target?: '_blank' | '_self'
   disabled?: boolean

package/lib/locales/cs.json

@@ -550,7 +550,6 @@
   "uuid": "UUID",
   "vcpus": "virt. procesor | virt. procesor | virt. procesory",
   "vcpus-assigned": "Přiděleno virt. procesorů",
-  "vcpus-used": "využito virt. procesorů",
   "vdi-throughput": "propustnost VDI",
   "vdis": "Virt. disk | Virt. disky | Virt. disků",
   "version": "Verze",

package/lib/locales/de.json

@@ -480,7 +480,6 @@
   "uuid": "UUID",
   "vcpus": "vCPU | vCPU | vCPUs",
   "vcpus-assigned": "Zugewiesene vCPUs",
-  "vcpus-used": "Genutzte vCPUs",
   "vdis": "VDI | VDI | VDIs",
   "version": "Version",
   "vif": "VIF",

package/lib/locales/en.json

@@ -347,6 +347,7 @@
   "n-hosts": "1 host | {n} hosts",
   "n-hosts-awaiting-patch": "{n} host is awaiting this patch | {n} hosts are awaiting this patch",
   "n-missing": "{n} missing",
+  "n-more": "{n} more",
   "n-percent": "{n}%",
   "n-vms": "1 VM | {n} VMs",
   "name": "Name",
@@ -471,6 +472,7 @@
   "scheduler-granularity": "Scheduler granularity",
   "secure-boot": "Secure boot",
   "see-all": "See all",
+  "see-less": "See less",
   "select-compression": "Select a compression",
   "select-destination-host": "Select a destination host",
   "select-host": "Select host",
@@ -561,13 +563,13 @@
   "unreachable-hosts": "Unreachable hosts",
   "unreachable-hosts-reload-page": "Done, reload the page",
   "up-to-date": "Up-to-date",
+  "update": "Update",
   "used": "Used",
   "user-config": "User config",
   "username": "Username",
   "uuid": "UUID",
   "vcpus": "vCPU | vCPU | vCPUs",
   "vcpus-assigned": "vCPUs assigned",
-  "vcpus-used": "vCPUs used",
   "vdi-throughput": "VDI throughput",
   "vdis": "VDI | VDI | VDIs",
   "version": "Version",

package/lib/locales/es.json

@@ -551,7 +551,6 @@
   "uuid": "UUID",
   "vcpus": "vCPU|vCPU|vCPUs",
   "vcpus-assigned": "vCPUs asignados",
-  "vcpus-used": "vCPUs usados",
   "vdi-throughput": "Rendimiento de VDI",
   "vdis": "VDI|VDI|VDIs",
   "version": "Versión",

package/lib/locales/fa.json

@@ -462,7 +462,6 @@
   "user-config": "تنظیمات کاربر",
   "uuid": "UUID",
   "vcpus": "CPUمجازی | CPUمجازی | CPUهای مجازی",
-  "vcpus-used": "CPUهای مجازی استفاده شده",
   "vdis": "دسکتاپ مجازی | دسکتاپ مجازی | دسکتاپ های مجازی",
   "version": "نسخه",
   "vif": "VIF",

package/lib/locales/fr.json

@@ -347,6 +347,7 @@
   "n-hosts": "1 hôte | {n} hôtes",
   "n-hosts-awaiting-patch": "{n} hôte attend ce patch | {n} hôtes attendent ce patch",
   "n-missing": "{n} manquant | {n} manquants",
+  "n-more": "{n} de plus",
   "n-percent": "{n} %",
   "n-vms": "1 VM | {n} VMs",
   "name": "Nom",
@@ -471,6 +472,7 @@
   "scheduler-granularity": "Granularité de la planification",
   "secure-boot": "Démarrage sécurisé",
   "see-all": "Voir tout",
+  "see-less": "Voir moins",
   "select-compression": "Sélectionnez une compression",
   "select-destination-host": "Sélectionnez un hôte de destination",
   "select-host": "Sélectionnez un hôte",
@@ -561,13 +563,13 @@
   "unreachable-hosts": "Hôtes inaccessibles",
   "unreachable-hosts-reload-page": "C'est fait. Rafraîchir la page",
   "up-to-date": "À jour",
+  "update": "Mettre à jour",
   "used": "Utilisé",
   "user-config": "Configuration utilisateur",
   "username": "Nom d'utilisateur",
   "uuid": "UUID",
   "vcpus": "vCPU | vCPU | vCPUs",
   "vcpus-assigned": "vCPUs assignés",
-  "vcpus-used": "vCPUs utilisés",
   "vdi-throughput": "Débit du VDI",
   "vdis": "VDI | VDI | VDIs",
   "version": "Version",

package/lib/locales/nl.json

@@ -551,7 +551,6 @@
   "uuid": "UUID",
   "vcpus": "vCPU | vCPU | vCPU's",
   "vcpus-assigned": "Toegewezen vCPU's",
-  "vcpus-used": "Gebruikte vCPU's",
   "vdi-throughput": "VDI-doorvoer",
   "vdis": "VDI | VDI | VDI's",
   "version": "Versie",

package/lib/locales/sv.json

@@ -519,7 +519,6 @@
   "uuid": "UUID",
   "vcpus": "vCPUer",
   "vcpus-assigned": "vCPUs tilldelade",
-  "vcpus-used": "vCPUer använt",
   "vdis": "VDI | VDI | VDIer",
   "version": "Version",
   "vga": "VGA",

package/lib/packages/form-select/types.ts

@@ -2,6 +2,8 @@ import type { CollectionItem, CollectionItemProperties } from '@core/packages/co
 import type { KeyOfByValue } from '@core/types/utility.type.ts'
 import type { ComputedRef, InjectionKey, Reactive, Ref, UnwrapRef } from 'vue'
 
+export const EMPTY_OPTION = Symbol('EMPTY_OPTION')
+
 export type FormSelectId<
   TCustomProperties extends CollectionItemProperties = CollectionItemProperties,
   TSource = unknown,
@@ -48,6 +50,7 @@ export type FormSelectController = Reactive<{
   isDisabled: ComputedRef<boolean>
   isMultiple: ComputedRef<boolean>
   isNavigatingWithKeyboard: Ref<boolean>
+  isOpen: Ref<boolean>
   closeDropdown(keepFocus: boolean): void
   focusSearchOrTrigger(): void
 }>

package/lib/packages/form-select/use-form-option-controller.ts

@@ -1,5 +1,5 @@
-import { unrefElement, useEventListener, whenever } from '@vueuse/core'
-import { computed, inject, type MaybeRefOrGetter, ref, toValue } from 'vue'
+import { unrefElement, useEventListener } from '@vueuse/core'
+import { computed, inject, type MaybeRefOrGetter, ref, toValue, watchEffect } from 'vue'
 import { type FormOption, IK_FORM_SELECT_CONTROLLER } from './types.ts'
 
 export function useFormOptionController<TOption extends FormOption>(_option: MaybeRefOrGetter<TOption>) {
@@ -13,12 +13,11 @@ export function useFormOptionController<TOption extends FormOption>(_option: May
 
   const elementRef = ref<HTMLDivElement>()
 
-  whenever(
-    () => option.value.flags.active,
-    () => {
+  watchEffect(() => {
+    if (controller.isOpen && option.value.flags.active) {
       unrefElement(elementRef)?.scrollIntoView({ block: 'nearest' })
     }
-  )
+  })
 
   useEventListener(elementRef, 'click', event => {
     if (controller.isDisabled) {

package/lib/packages/form-select/use-form-select-controller.ts

@@ -199,6 +199,7 @@ export function useFormSelectController(select: FormSelect) {
       isDisabled: select.isDisabled,
       isMultiple: select.isMultiple,
       isNavigatingWithKeyboard,
+      isOpen,
       focusSearchOrTrigger,
       closeDropdown,
     })