@xen-orchestra/web-core 0.7.0 → 0.8.0

package/lib/assets/css/typography/_style.pcss

@@ -6,6 +6,7 @@
   &.p3-regular-underline,
   &.p4-regular-underline {
     text-decoration: underline;
+    text-underline-offset: 0.2rem;
   }
 
   /* ITALIC */

package/lib/components/layout/VtsLayoutSidebar.vue

@@ -74,7 +74,7 @@ const ui = useUiStore()
 
   .lock {
     text-align: right;
-    padding: 0.8rem;
+    padding: 0.8rem 0.8rem 0;
   }
 
   .content {

package/lib/components/state-hero/VtsErrorNoDataHero.vue

@@ -0,0 +1,11 @@
+<template>
+  <VtsStateHero class="vts-error-hero" image="error" :type>{{ $t('error-no-data') }}</VtsStateHero>
+</template>
+
+<script lang="ts" setup>
+import VtsStateHero, { type StateHeroType } from '@core/components/state-hero/VtsStateHero.vue'
+
+defineProps<{
+  type: StateHeroType
+}>()
+</script>

package/lib/components/state-hero/VtsNoSelectionHero.vue

@@ -0,0 +1,13 @@
+<template>
+  <VtsStateHero :type class="vts-no-selection-hero" image="no-selection">
+    {{ $t('select-to-see-details') }}
+  </VtsStateHero>
+</template>
+
+<script lang="ts" setup>
+import VtsStateHero, { type StateHeroType } from '@core/components/state-hero/VtsStateHero.vue'
+
+defineProps<{
+  type: StateHeroType
+}>()
+</script>

package/lib/components/state-hero/VtsObjectNotFoundHero.vue

@@ -1,13 +1,14 @@
 <template>
-  <VtsStateHero class="vts-object-not-found-hero" image="no-result" type="page">
+  <VtsStateHero class="vts-object-not-found-hero" image="no-result" :type>
     {{ $t('object-not-found', { id }) }}
   </VtsStateHero>
 </template>
 
 <script lang="ts" setup>
-import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
+import VtsStateHero, { type StateHeroType } from '@core/components/state-hero/VtsStateHero.vue'
 
 defineProps<{
   id: string
+  type: StateHeroType
 }>()
 </script>

package/lib/components/state-hero/VtsStateHero.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="type" class="vts-state-hero">
+  <div :class="[type, { error }]" class="vts-state-hero">
     <UiLoader v-if="busy" class="loader" />
     <img v-else-if="imageSrc" :src="imageSrc" alt="" class="image" />
     <p v-if="slots.default" :class="typoClass" class="text">
@@ -12,7 +12,7 @@
 import UiLoader from '@core/components/ui/loader/UiLoader.vue'
 import { computed } from 'vue'
 
-export type StateHeroType = 'page' | 'card' | 'panel'
+export type StateHeroType = 'page' | 'card' | 'panel' | 'table'
 
 const props = defineProps<{
   type: StateHeroType
@@ -25,6 +25,7 @@ const slots = defineSlots<{
 }>()
 
 const typoClass = computed(() => (props.type === 'page' ? 'typo h2-black' : 'typo h4-medium'))
+const error = computed(() => !props.busy && props.image === 'error')
 
 const imageSrc = computed(() => {
   if (!props.image) {
@@ -43,6 +44,14 @@ const imageSrc = computed(() => {
   align-items: center;
   justify-content: center;
 
+  &.error {
+    background-color: var(--color-danger-background-selected);
+
+    .text {
+      color: var(--color-danger-txt-base);
+    }
+  }
+
   .loader,
   .text {
     color: var(--color-info-txt-base);
@@ -113,5 +122,24 @@ const imageSrc = computed(() => {
       width: 80%;
     }
   }
+
+  &.table {
+    padding: 4rem;
+    gap: 2.4rem;
+
+    .text {
+      order: 3;
+    }
+
+    .image {
+      order: 2;
+      max-height: 20rem;
+    }
+
+    .loader {
+      order: 1;
+      font-size: 10rem;
+    }
+  }
 }
 </style>

package/lib/components/ui/donut-chart/UiDonutChart.vue

@@ -1,7 +1,7 @@
 <!-- v3 -->
 <template>
   <svg class="ui-donut-chart" viewBox="0 0 100 100">
-    <circle class="segment" cx="50" cy="50" r="40" />
+    <circle class="segment accent--muted" cx="50" cy="50" r="40" />
     <circle
       v-for="(segment, index) in computedSegments"
       :key="index"
@@ -44,8 +44,8 @@ const computedSegments = computed(() => {
   let nextOffset = circumference / 4
 
   return props.segments.map(segment => {
+    const percent = totalValue.value === 0 ? 0 : (segment.value / totalValue.value) * circumference
     const offset = nextOffset
-    const percent = (segment.value / totalValue.value) * circumference
     nextOffset -= percent
 
     return {

package/lib/components/ui/dropdown-button/UiDropdownButton.vue

@@ -0,0 +1,81 @@
+<!-- v3 -->
+<template>
+  <button type="button" class="ui-dropdown-item" :class="{ selected }" :disabled="isDisabled">
+    <VtsIcon :icon accent="current" class="left-icon" fixed-width />
+    <span class="typo p1-regular label">
+      <slot />
+    </span>
+    <VtsIcon :icon="faAngleDown" accent="current" class="right-icon" fixed-width />
+  </button>
+</template>
+
+<script lang="ts" setup>
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import { useContext } from '@core/composables/context.composable'
+import { DisabledContext } from '@core/context'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import { faAngleDown } from '@fortawesome/free-solid-svg-icons'
+
+const props = withDefaults(
+  defineProps<{
+    disabled?: boolean
+    selected?: boolean
+    icon?: IconDefinition
+  }>(),
+  { disabled: undefined }
+)
+
+const isDisabled = useContext(DisabledContext, () => props.disabled)
+</script>
+
+<style scoped lang="postcss">
+.ui-dropdown-item {
+  display: inline-flex;
+  align-items: center;
+  padding-block: 0.4rem;
+  padding-inline: 1.6rem;
+  gap: 0.8rem;
+  background: var(--color-neutral-background-primary);
+  border: 0.1rem solid var(--color-info-txt-base);
+  border-radius: 9rem;
+  cursor: pointer;
+  position: relative;
+  color: var(--color-info-txt-base);
+
+  &:hover {
+    border-color: var(--color-info-txt-hover);
+    background-color: var(--color-info-background-hover);
+    color: var(--color-info-txt-hover);
+  }
+
+  &:active {
+    border-color: var(--color-info-txt-active);
+    background-color: var(--color-info-background-active);
+    color: var(--color-info-txt-active);
+  }
+
+  &.selected:not(:disabled) {
+    background-color: var(--color-info-background-selected);
+    outline: 0.1rem solid var(--color-info-txt-base);
+  }
+
+  &:focus-visible {
+    outline: none;
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: -0.5rem;
+      border: 0.2rem solid var(--color-info-txt-base);
+      border-radius: 0.4rem;
+    }
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    border-color: var(--color-neutral-txt-secondary);
+    background-color: var(--color-neutral-background-disabled);
+    color: var(--color-neutral-txt-secondary);
+  }
+}
+</style>

package/lib/components/ui/link/UiLink.vue

@@ -0,0 +1,75 @@
+<!-- v2 -->
+<template>
+  <component :is="component" :class="classes" class="ui-link" v-bind="attributes">
+    <VtsIcon :icon accent="current" />
+    <slot />
+    <VtsIcon
+      v-if="attributes.target === '_blank'"
+      :icon="faArrowUpRightFromSquare"
+      accent="current"
+      class="external-icon"
+    />
+  </component>
+</template>
+
+<script lang="ts" setup>
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import { type LinkOptions, useLinkComponent } from '@core/composables/link-component.composable'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import { faArrowUpRightFromSquare } from '@fortawesome/free-solid-svg-icons'
+import { computed } from 'vue'
+
+const props = defineProps<
+  LinkOptions & {
+    size: 'small' | 'medium'
+    icon?: IconDefinition
+  }
+>()
+
+const typoClasses = {
+  small: 'typo p3-regular-underline',
+  medium: 'typo p1-regular-underline',
+}
+
+const { component, attributes, isDisabled } = useLinkComponent('span', () => props)
+
+const classes = computed(() => [typoClasses[props.size], { disabled: isDisabled.value }])
+</script>
+
+<style lang="postcss" scoped>
+.ui-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.8rem;
+  color: var(--color-info-txt-base);
+
+  &:hover {
+    color: var(--color-info-txt-hover);
+  }
+
+  &:active {
+    color: var(--color-info-txt-active);
+  }
+
+  &:focus-visible {
+    outline: none;
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: -0.6rem;
+      border: 0.2rem solid var(--color-info-txt-base);
+      border-radius: 0.4rem;
+    }
+  }
+
+  &.disabled {
+    color: var(--color-neutral-txt-secondary);
+    cursor: not-allowed;
+  }
+
+  .external-icon {
+    font-size: 0.75em;
+  }
+}
+</style>

package/lib/components/ui/tag/UiTagsList.vue

@@ -0,0 +1,14 @@
+<!-- v1 -->
+<template>
+  <div class="ui-tags-list">
+    <slot />
+  </div>
+</template>
+
+<style lang="postcss" scoped>
+.ui-tags-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+}
+</style>

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

@@ -0,0 +1,53 @@
+import type { MaybeRefOrGetter } from 'vue'
+import { computed, toValue } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
+
+export type LinkOptions = {
+  to?: RouteLocationRaw
+  href?: string
+  target?: '_blank' | '_self'
+  disabled?: boolean
+}
+
+export function useLinkComponent(defaultComponent: string, options: MaybeRefOrGetter<LinkOptions>) {
+  const config = computed(() => toValue(options))
+
+  const isDisabled = computed(() => config.value.disabled || (!config.value.to && !config.value.href))
+
+  const component = computed(() => {
+    if (isDisabled.value) {
+      return defaultComponent
+    }
+
+    if (config.value.href) {
+      return 'a'
+    }
+
+    return 'RouterLink'
+  })
+
+  const attributes = computed(() => {
+    if (isDisabled.value) {
+      return {}
+    }
+
+    if (config.value.href) {
+      return {
+        rel: 'noopener noreferrer',
+        target: config.value.target ?? '_blank',
+        href: config.value.href,
+      }
+    }
+
+    return {
+      target: config.value.target,
+      to: config.value.to,
+    }
+  })
+
+  return {
+    isDisabled,
+    component,
+    attributes,
+  }
+}

package/lib/locales/cs.json

@@ -41,6 +41,7 @@
 
   "dashboard": "Přehled",
   "documentation-name": "Dokumentace k {name}",
+  "error-no-data": "Chyba – není možné shromažďovat údaje.",
   "hosts": "Hostitelé",
   "learn-more": "Zjistit více",
   "loading-in-progress": "Probíhá načítání…",

package/lib/locales/de.json

@@ -19,7 +19,9 @@
 
   "dashboard": "Dashboard",
   "documentation-name": "{name} Dokumentation",
+  "error-no-data": "Fehler beim Datenabruf.",
   "fullscreen": "Vollbild",
+  "gateway": "Gateway",
   "hosts": "Hosts",
   "learn-more": "Mehr erfahren",
   "loading-in-progress": "Ladevorgang läuft…",

package/lib/locales/en.json

@@ -45,8 +45,10 @@
   "access-forum": "Access forum",
   "dashboard": "Dashboard",
   "documentation-name": "{name} documentation",
+  "error-no-data": "Error, can't collect data.",
   "exit-fullscreen": "Exit fullscreen",
   "fullscreen": "Fullscreen",
+  "gateway": "Gateway",
   "hosts": "Hosts",
   "learn-more": "Learn more",
   "loading-in-progress": "Loading in progress…",
@@ -66,8 +68,10 @@
   "receive": "Receive",
   "running-vm": "Running VM | Running VMs",
   "see-all": "See all",
+  "select-to-see-details": "Select an element to see details",
   "send": "Send",
   "send-ctrl-alt-del": "Send Ctrl+Alt+Del",
+  "speed": "Speed",
   "stats": "Stats",
   "storage": "Storage",
   "system": "System",

package/lib/locales/fa.json

@@ -33,7 +33,9 @@
 
   "dashboard": "داشبورد",
   "documentation-name": "اسناد {name}",
+  "error-no-data": "خطا، نمی توان داده ها را جمع آوری کرد.",
   "fullscreen": "تمام صفحه",
+  "gateway": "دروازه",
   "learn-more": "بیشتر بدانید",
   "loading-in-progress": "بارگیری در حال انجام است…",
   "log-out": "خروج",

package/lib/locales/fr.json

@@ -45,8 +45,10 @@
   "access-forum": "Accès au forum",
   "dashboard": "Tableau de bord",
   "documentation-name": "Documentation {name}",
+  "error-no-data": "Erreur, impossible de collecter les données.",
   "exit-fullscreen": "Quitter le plein écran",
   "fullscreen": "Plein écran",
+  "gateway": "Passerelle",
   "hosts": "Hôtes",
   "learn-more": "En savoir plus",
   "loading-in-progress": "Chargement en cours…",
@@ -66,8 +68,10 @@
   "receive": "Recevoir",
   "running-vm": "VM en cours d'exécution | VMs en cours d'exécution",
   "see-all": "Voir tout",
+  "select-to-see-details": "Sélectionnez un élement pour voir les details",
   "send": "Envoyer",
   "send-ctrl-alt-del": "Envoyer Ctrl+Alt+Suppr",
+  "speed": "Vitesse",
   "stats": "Stats",
   "storage": "Stockage",
   "system": "Système",

package/lib/packages/job/README.md

@@ -0,0 +1,130 @@
+# Job System Documentation
+
+The Job System provides a type-safe way to manage asynchronous operations with built-in state handling and identity-based concurrency control.
+
+## Core Concepts
+
+- **Job**: An asynchronous operation with validation, state management, and concurrency control
+- **Job Arguments**: Typed parameters that can be single values or arrays
+- **Job Identity**: Values used to track concurrent executions of the same job
+
+## Usage
+
+### When to use argument identity?
+
+You'll want to use a Job argument as identity when two different values means two different processes.
+
+Let's imagine a job to save a document, which will take `id` and `content` as arguments.
+
+Should the job be tracked by the document ID? Yes, because `isRunning` could be `true` for file A and `false` for file B.
+
+Should the job be tracked by the document content? No, because `isRunning` should stay `true` for a specific file, even if the `content` value changes.
+
+### Defining Job Arguments
+
+```typescript
+const userIdArg = defineJobArg<string>({
+  identify: true, // Automatically use value as identity for primitive types
+})
+
+const itemsArg = defineJobArg<Item>({
+  identify: item => item.id, // `Item` not being a primitive, we need to use a function to get its identity
+  toArray: true, // this argument will always be converted to an array if needed
+})
+
+const forceArg = defineJobArg<boolean>({
+  identify: false, // Don't track this argument for concurrency. Whether it to be true or false shouldn't affect the running state of the job
+})
+```
+
+### Defining a Job
+
+```typescript
+const myJob = defineJob('processItems', [userIdArg, itemsArg, optionsArg], () => ({
+  validate(isRunning, userId, items) {
+    // You can use custom running check additionnal to internal one
+    if (isRunning || isProcessingItems(userId, items)) {
+      throw new JobRunningError('Items are being processed')
+    }
+
+    if (items.length === 0) {
+      throw new JobError('No item to process')
+    }
+
+    if (!userId) {
+      throw new JobError('User ID required')
+    }
+  },
+  run(userId, items, force) {
+    // Job implementation
+    return procesItems(userId, items, force)
+  },
+}))
+```
+
+## Type System
+
+### Argument Types
+
+When defining a job argument with `defineJobArg<string>({ toArray?: false })`, then:
+
+- the `defineJob`'s `run` handler will receive a `string`
+- the `defineJob`'s `validate` handler will receive a `string | undefined`
+- the generated `useJob` will receive a `MaybeRefOrGetter<string | undefined>`
+
+When defining a job argument with `defineJobArg<string>({ toArray: true })`, then:
+
+- the `defineJob`'s `run` handler will receive a `string[]`
+- the `defineJob`'s `validate` handler will receive a `string[] | undefined`
+- the generated `useJob` will receive a `MaybeRefOrGetter<MaybeArray<string | undefined>>`
+
+### Using a Job
+
+```typescript
+// Define reactive arguments
+const userId = ref()
+
+const selectedItems = computed(() => props.selectedItems)
+
+// Create job instance with destructured properties
+const {
+  run, // Execute the handler
+  canRun, // A `boolean` computed
+  errorMessage, // A `string | undefined` computed
+  isRunning, // A `boolean` computed
+} = useMyJob(userId, selectedItems, false)
+```
+
+When calling `run`, the job will be marked as "running" for the specified `userId` and `selectedItems` (`force` is ignored because it has been configured with `identify: false`)
+
+When using an array, the tracking is done for each item individually.
+
+Let's take a simplified example for a 5-second handling process:
+
+```typescript
+const userId = ref(1)
+
+const selectedItems = ref([{ id: 'A' }, { id: 'B' }])
+
+const { run, isRunning } = useMyJob(userId, selectedItems)
+
+run()
+
+// isRunning = true
+
+userId.value = 2
+
+// isRunning = false
+
+userId.value = 1
+
+// isRunning = true
+
+selectedItems.value = [{ id: 'A' }, { id: 'C' }]
+
+// isRunning = true
+
+selectedItems.value = [{ id: 'C' }]
+
+// isRunning = false
+```

package/lib/packages/job/define-job-arg.ts

@@ -0,0 +1,12 @@
+export type JobIdentity = string | number | boolean | null | undefined
+
+export type JobArg<TType = any, TToArray extends boolean = boolean> = {
+  identify: ((source: TType) => JobIdentity) | (TType extends JobIdentity ? boolean : false)
+  toArray: TToArray
+}
+
+export function defineJobArg<TType>(config: JobArg<TType, true>): JobArg<TType, true>
+export function defineJobArg<TType>(config: JobArg<TType, false>): JobArg<TType, false>
+export function defineJobArg<TType>(config: JobArg<TType>): JobArg<TType> {
+  return config
+}