@xen-orchestra/web-core 0.28.0 → 0.30.0

package/lib/components/quick-info-row/VtsQuickInfoRow.vue

@@ -5,7 +5,7 @@
         {{ label }}
       </slot>
     </span>
-    <span class="typo-body-regular value">
+    <span v-tooltip class="typo-body-regular value text-ellipsis">
       <slot name="value">
         {{ value }}
       </slot>

package/lib/components/select/VtsSelect.vue

@@ -28,7 +28,7 @@
           </div>
         </template>
         <UiDropdown v-if="isLoading || options.length === 0" accent="normal" disabled>
-          {{ isLoading ? t('loading-in-progress') : t('no-results') }}
+          {{ isLoading ? t('loading') : t('no-results') }}
         </UiDropdown>
         <template v-for="option of options" :key="option.id">
           <slot :option="option as FormSelectIdToOption<TSelectId>">

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

@@ -1,7 +1,7 @@
 <template>
-  <div :class="[type, { error }]" class="vts-state-hero">
+  <div :class="[className, { horizontal, error, success, 'no-background': noBackground }]" class="vts-state-hero">
     <UiLoader v-if="busy" class="loader" />
-    <img v-else-if="imageSrc" :src="imageSrc" alt="" class="image" />
+    <img v-else-if="imageSrc" :src="imageSrc" :alt="type" class="image" />
     <div v-if="slots.default" :class="typoClass" class="content">
       <slot />
     </div>
@@ -10,23 +10,28 @@
 
 <script lang="ts" setup>
 import UiLoader from '@core/components/ui/loader/UiLoader.vue'
+import { toVariants } from '@core/utils/to-variants.util.ts'
 import { computed } from 'vue'
 
-export type StateHeroType = 'page' | 'card' | 'panel' | 'table'
-
-const { type, busy, image, noBackground } = defineProps<{
-  type: StateHeroType
+export type StateHeroFormat = 'page' | 'card' | 'panel' | 'table'
+
+type StateHeroType =
+  | 'no-result'
+  | 'under-construction'
+  | 'no-data'
+  | 'no-selection'
+  | 'error'
+  | 'not-found'
+  | 'offline'
+  | 'all-good'
+  | 'all-done'
+
+const { format, type, size, busy } = defineProps<{
+  format: StateHeroFormat
+  type?: StateHeroType
+  size: 'extra-small' | 'small' | 'medium' | 'large'
+  horizontal?: boolean
   busy?: boolean
-  image?:
-    | 'no-result'
-    | 'under-construction'
-    | 'no-data'
-    | 'no-selection'
-    | 'error'
-    | 'not-found'
-    | 'offline'
-    | 'all-good'
-    | 'all-done'
   noBackground?: boolean
 }>()
 
@@ -34,15 +39,20 @@ const slots = defineSlots<{
   default?(): any
 }>()
 
-const typoClass = computed(() => (type === 'page' ? 'typo-h2' : 'typo-h4'))
-const error = computed(() => !noBackground && !busy && image === 'error')
+const typoClass = computed(() => (format === 'page' ? 'typo-h2' : 'typo-h4'))
+
+const className = computed(() => toVariants({ size, format }))
+
+const error = computed(() => !busy && type === 'error')
+
+const success = computed(() => !busy && (type === 'all-good' || type === 'all-done'))
 
 const imageSrc = computed(() => {
-  if (!image) {
+  if (!type) {
     return undefined
   }
 
-  return new URL(`../../assets/${image}.svg`, import.meta.url).href
+  return new URL(`../../assets/${type}.svg`, import.meta.url).href
 })
 </script>
 
@@ -50,33 +60,54 @@ const imageSrc = computed(() => {
 .vts-state-hero {
   flex: 1;
   display: flex;
-  flex-direction: column;
   align-items: center;
   justify-content: center;
+  gap: 2.4rem;
 
-  &.error {
-    background-color: var(--color-danger-background-selected);
+  &:not(.horizontal) {
+    flex-direction: column;
 
     .content {
-      color: var(--color-danger-txt-base);
+      align-items: center;
     }
   }
 
+  .image {
+    order: 2;
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    gap: 1.6rem;
+  }
+
   .loader,
   .content {
+    order: 3;
     color: var(--color-brand-txt-base);
   }
 
-  .image {
-    order: 2;
+  &.success {
+    .content {
+      color: var(--color-success-txt-base);
+    }
   }
 
-  .content {
-    order: 3;
+  &.error {
+    background-color: var(--color-danger-background-selected);
+
+    &.no-background {
+      background-color: transparent;
+    }
+
+    .content {
+      color: var(--color-danger-txt-base);
+    }
   }
 
-  &.page {
-    gap: 2.4rem;
+  &.format--card {
+    gap: 2rem;
 
     .content {
       order: 3;
@@ -84,36 +115,31 @@ const imageSrc = computed(() => {
 
     .loader {
       order: 1;
-      font-size: 10rem;
     }
 
     .image {
       order: 2;
-      width: 90%;
-      max-height: none;
     }
   }
 
-  &.card {
-    gap: 2rem;
+  &.format--table {
+    padding: 4rem;
+    gap: 2.4rem;
 
     .content {
       order: 3;
     }
 
     .loader {
-      font-size: 6rem;
       order: 1;
     }
 
     .image {
       order: 2;
-      width: 70%;
-      max-height: 20rem;
     }
   }
 
-  &.panel {
+  &.format--panel {
     gap: 4rem;
     justify-content: unset;
     padding-top: 8rem;
@@ -124,31 +150,65 @@ const imageSrc = computed(() => {
 
     .loader {
       order: 3;
-      font-size: 6.4rem;
     }
 
     .image {
       order: 2;
-      width: 80%;
     }
   }
 
-  &.table {
-    padding: 4rem;
-    gap: 2.4rem;
+  &.format--page {
+    gap: 10rem;
 
     .content {
       order: 3;
     }
 
+    .loader {
+      order: 1;
+    }
+
     .image {
       order: 2;
-      max-height: 20rem;
     }
+  }
 
+  &.size--extra-small {
     .loader {
-      order: 1;
-      font-size: 10rem;
+      font-size: 1.6rem;
+    }
+
+    .image {
+      max-height: 14rem;
+    }
+  }
+
+  &.size--small {
+    .loader {
+      font-size: 2.4rem;
+    }
+
+    .image {
+      max-height: 18rem;
+    }
+  }
+
+  &.size--medium {
+    .loader {
+      font-size: 6.4rem;
+    }
+
+    .image {
+      max-height: 30rem;
+    }
+  }
+
+  &.size--large {
+    .loader {
+      font-size: 9.6rem;
+    }
+    .image {
+      max-height: 50rem;
     }
   }
 }

package/lib/components/task/VtsQuickTaskList.vue

@@ -3,7 +3,7 @@
     <li v-if="loading">
       <div class="loading">
         <UiLoader />
-        <div>{{ t('loading-in-progress') }}</div>
+        <div>{{ t('loading') }}</div>
       </div>
     </li>
     <template v-else>

package/lib/components/ui/card/UiCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="ui-card" :class="{ horizontal }">
+  <div class="ui-card" :class="{ horizontal, 'has-error': hasError }">
     <slot />
   </div>
 </template>
@@ -7,6 +7,7 @@
 <script lang="ts" setup>
 defineProps<{
   horizontal?: boolean
+  hasError?: boolean
 }>()
 
 defineSlots<{
@@ -39,5 +40,9 @@ defineSlots<{
   &.horizontal {
     flex-direction: row;
   }
+
+  &.has-error {
+    background-color: var(--color-danger-background-selected);
+  }
 }
 </style>

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

@@ -5,9 +5,8 @@
       <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') }}
+        {{ isExpanded ? t('see-less') : t('see-n-more', { n: remainingItems }) }}
       </UiButton>
     </div>
   </div>

package/lib/components/ui/data-ruler/UiDataRuler.vue

@@ -1,24 +1,72 @@
 <!-- v1 -->
 <template>
   <div class="ui-data-ruler typo-body-regular-small">
-    <span>{{ t('n-percent', 0) }}</span>
-    <span>{{ t('n-percent', 50) }}</span>
-    <span>{{ t('n-percent', 100) }}</span>
+    <span>{{ n(0, 'percent') }}</span>
+    <span>{{ n(max / 200, 'percent') }}</span>
+    <span class="max">
+      <VtsIcon
+        v-if="warning?.accent || warning?.tooltip"
+        v-tooltip="warning.tooltip ?? false"
+        :class="warning.accent ?? 'warning'"
+        class="icon"
+        name="fa:exclamation-circle"
+        size="small"
+      />
+      {{ n(max / 100, 'percent') }}</span
+    >
   </div>
 </template>
 
 <script lang="ts" setup>
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import { vTooltip } from '@core/directives/tooltip.directive.ts'
 import { useI18n } from 'vue-i18n'
 
-const { t } = useI18n()
+const { max = 100 } = defineProps<{
+  max?: number
+  warning?: {
+    accent?: 'info' | 'warning' | 'danger'
+    tooltip?: string
+  }
+}>()
+
+const { n } = useI18n()
 </script>
 
 <style lang="postcss" scoped>
 .ui-data-ruler {
-  display: flex;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
   align-items: center;
-  justify-content: space-between;
   gap: 1rem;
   color: var(--color-neutral-txt-secondary);
+
+  .icon {
+    &.warning {
+      color: var(--color-warning-item-base);
+    }
+
+    &.danger {
+      color: var(--color-danger-item-base);
+    }
+  }
+
+  .max {
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+  }
+
+  & > span:first-child {
+    justify-self: start;
+  }
+
+  & > span:nth-child(2) {
+    justify-self: center;
+  }
+
+  & > span:last-child {
+    justify-self: end;
+  }
 }
 </style>

package/lib/components/ui/progress-bar/UiProgressBar.vue

@@ -1,19 +1,12 @@
 <!-- v2 -->
 <template>
-  <div class="ui-progress-bar" :class="className">
+  <div :class="className" class="ui-progress-bar">
     <div class="progress-bar">
-      <div class="fill" :style="{ width: `${fillWidth}%` }" />
+      <div :style="{ width: fillWidth }" class="fill" />
     </div>
-    <div v-if="shouldShowSteps" class="steps typo-body-regular-small">
-      <span>{{ n(0, 'percent') }}</span>
-      <span v-for="step in steps" :key="step">{{ n(step, 'percent') }}</span>
-    </div>
-    <VtsLegendList class="legend">
-      <UiLegend v-if="displayMode === 'percent'" :accent :value="Math.round(percentage)" unit="%">
-        {{ legend }}
-      </UiLegend>
-      <UiLegend v-else :accent :value="legendValue">
-        {{ legend }}
+    <VtsLegendList v-if="legend" class="legend">
+      <UiLegend :accent :value="legend.value">
+        {{ legend.label }}
       </UiLegend>
     </VtsLegendList>
   </div>
@@ -22,61 +15,20 @@
 <script lang="ts" setup>
 import VtsLegendList from '@core/components/legend-list/VtsLegendList.vue'
 import UiLegend from '@core/components/ui/legend/UiLegend.vue'
-import { formatSizeRaw } from '@core/utils/size.util.ts'
 import { toVariants } from '@core/utils/to-variants.util'
-import { useClamp, useMax } from '@vueuse/math'
 import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-interface Props {
-  legend: string
-  value: number
-  showSteps?: boolean
-}
-interface PercentageProps {
-  max?: number
-  displayMode: 'percent'
-}
-interface ValueProps {
-  max: number
-  displayMode: 'value'
-}
-
-const { value: _value, max: _max, showSteps, displayMode } = defineProps<Props & (PercentageProps | ValueProps)>()
-
-const { n } = useI18n()
 
-const value = useMax(0, () => _value)
+export type ProgressBarAccent = 'info' | 'warning' | 'danger'
 
-const max = computed(() => _max ?? 100)
+export type ProgressBarLegend = { label: string; value?: string | number }
 
-const percentage = computed(() => (max.value <= 0 ? 0 : (value.value / max.value) * 100))
-const maxPercentage = computed(() => Math.ceil(percentage.value / 100) * 100)
-const fillWidth = useClamp(() => (percentage.value / maxPercentage.value) * 100 || 0, 0, 100)
-const shouldShowSteps = computed(() => showSteps || percentage.value > 100)
-const steps = useMax(1, () => Math.floor(maxPercentage.value / 100))
-
-const accent = computed(() => {
-  if (percentage.value >= 90) {
-    return 'danger'
-  }
+const { accent, legend } = defineProps<{
+  accent: ProgressBarAccent
+  fillWidth: string
+  legend?: ProgressBarLegend
+}>()
 
-  if (percentage.value >= 80) {
-    return 'warning'
-  }
-
-  return 'info'
-})
-
-const className = computed(() => toVariants({ accent: accent.value }))
-
-const formattedValue = computed(() => formatSizeRaw(value.value, 1))
-
-const formattedMax = computed(() => formatSizeRaw(max.value, 0))
-
-const legendValue = computed(() => {
-  return `${formattedValue.value.value} ${formattedValue.value.prefix} / ${formattedMax.value.value} ${formattedMax.value.prefix}`
-})
+const className = computed(() => toVariants({ accent }))
 </script>
 
 <style lang="postcss" scoped>
@@ -87,30 +39,22 @@ const legendValue = computed(() => {
 
   .progress-bar {
     width: 100%;
-    height: 1.2rem;
     border-radius: 0.4rem;
     overflow: hidden;
     background-color: var(--color-neutral-background-disabled);
 
     .fill {
       width: 0;
-      height: 100%;
+      height: 1.2rem;
       transition: width 0.25s ease-in-out;
     }
   }
 
-  .steps {
-    color: var(--color-neutral-txt-secondary);
-    display: flex;
-    justify-content: space-between;
-  }
-
   .legend {
     margin-inline-start: auto;
   }
 
   /* ACCENT */
-
   &.accent--info {
     .fill {
       background-color: var(--color-info-item-base);

package/lib/composables/tree-filter.composable.ts

@@ -1,12 +1,14 @@
 import type { TreeNodeBase } from '@core/composables/tree/tree-node-base'
+import { refDebounced } from '@vueuse/shared'
 import { computed, ref } from 'vue'
 
 export function useTreeFilter() {
   const filter = ref('')
-  const hasFilter = computed(() => filter.value.trim().length > 0)
+  const debouncedFilter = refDebounced(filter, 500)
+  const hasFilter = computed(() => debouncedFilter.value.trim().length > 0)
 
   const predicate = (node: TreeNodeBase) =>
-    hasFilter.value ? node.label.toLocaleLowerCase().includes(filter.value.toLocaleLowerCase()) : undefined
+    hasFilter.value ? node.label.toLocaleLowerCase().includes(debouncedFilter.value.toLocaleLowerCase()) : undefined
 
   return { filter, predicate }
 }

package/lib/icons/index.ts

@@ -12,7 +12,7 @@ export const icons = defineIconPack({
 
 export type IconName = Exclude<keyof typeof icons, typeof ICON_SYMBOL>
 
-export type ObjectIconName = Extract<IconName, `object:${string}`>
+export type ObjectIconName = Extract<IconName, `object:${string}:${string}`>
 
 export function icon<TName extends IconName>(name: TName): TName {
   return name

package/lib/icons/object-icons.ts

@@ -3,9 +3,12 @@ import { defineIcon } from '@core/packages/icon/define-icon.ts'
 import type { IconTransforms } from '@core/packages/icon/types.ts'
 import { createMapper } from '@core/packages/mapper/create-mapper.ts'
 import {
+  faArrowLeft,
   faBan,
+  faBoxArchive,
   faCheck,
   faCircle,
+  faClock,
   faDatabase,
   faDesktop,
   faMinus,
@@ -17,7 +20,6 @@ import {
   faServer,
   faStop,
   faTriangleExclamation,
-  faWarehouse,
   faXmark,
 } from '@fortawesome/free-solid-svg-icons'
 
@@ -148,6 +150,32 @@ function getMainColor(state: string) {
     : 'var(--color-neutral-txt-primary)'
 }
 
+const backupIcon = defineIcon({ icon: faBoxArchive })
+
+const backupRepository = defineIcon([
+  { icon: backupIcon, translate: [0, -4], borderColor: defaultTransforms.borderColor, size: 10 },
+  { icon: backupIcon, translate: [-4, 4], borderColor: defaultTransforms.borderColor, size: 10 },
+  { icon: backupIcon, translate: [4, 4], borderColor: defaultTransforms.borderColor, size: 10 },
+])
+
+const backupJob = defineIcon([
+  { icon: backupIcon, borderColor: defaultTransforms.borderColor },
+  { icon: faCircle, translate: [6, 6], borderColor: defaultTransforms.borderColor, size: 12 },
+  { icon: faArrowLeft, translate: [6, 6], color: 'var(--color-neutral-background-primary)', size: 8 },
+])
+
+const backupSchedule = defineIcon([
+  { icon: backupIcon, borderColor: defaultTransforms.borderColor },
+  { icon: faCircle, translate: [6, 6], size: 12, color: 'var(--color-neutral-background-primary)' },
+  { icon: faClock, translate: [6, 6], size: 11 },
+])
+
+const backupLog = defineIcon([
+  { icon: backupIcon, borderColor: defaultTransforms.borderColor },
+  { icon: faCircle, translate: [6, 6], borderColor: defaultTransforms.borderColor, size: 12 },
+  { icon: faPlay, translate: [6.5, 6], color: 'var(--color-neutral-background-primary)', size: 6 },
+])
+
 export const objectIcons = defineIconPack({
   vm: defineIcon([['running', 'halted', 'suspended', 'paused', 'muted']], state => [
     {
@@ -179,9 +207,12 @@ export const objectIcons = defineIconPack({
   ]),
   'backup-repository': defineIcon([['connected', 'disconnected']], state => [
     {
-      icon: faWarehouse,
+      icon: backupRepository,
       color: getMainColor(state),
     },
     { icon: getStatusIcon(state) },
   ]),
+  'backup-job': backupJob,
+  'backup-schedule': backupSchedule,
+  'backup-log': backupLog,
 })

package/lib/locales/cs.json

@@ -313,7 +313,7 @@
   "load-average": "Průměrné vytížení",
   "load-now": "Načíst nyní",
   "loading-hosts": "Načítání hostitelů…",
-  "loading-in-progress": "Probíhá načítání…",
+  "loading": "Probíhá načítání…",
   "locking-mode": "Režim zamykání",
   "locking-mode-default": "Výchozí režim zamykání",
   "log-out": "Odhlásit",

package/lib/locales/de.json

@@ -310,7 +310,7 @@
   "load-average": "Durchschnittsauslastung",
   "load-now": "Jetzt laden",
   "loading-hosts": "Lade Hosts…",
-  "loading-in-progress": "Ladevorgang läuft…",
+  "loading": "Ladevorgang läuft…",
   "locking-mode": "Sperrmodus",
   "locking-mode-default": "Standard-Sperrmodus",
   "log-out": "Abmelden",