@xen-orchestra/web-core 0.29.0 → 0.31.0

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>
@@ -61,6 +60,10 @@ useStyleTag(style)
     flex-direction: column;
     gap: 0.8rem;
     width: 100%;
+
+    :deep(li) {
+      line-height: 1;
+    }
   }
 
   .footer {

package/lib/components/ui/panel/UiPanel.vue

@@ -35,7 +35,7 @@ const uiStore = useUiStore()
   background-color: var(--color-neutral-background-secondary);
 
   &:not(.mobile-drawer) {
-    height: calc(100dvh - 16rem);
+    min-height: calc(100dvh - 16rem);
   }
 
   .header {

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

@@ -91,13 +91,13 @@ const { id: showBySelectId } = useFormSelect([12, 24, 48, -1], {
 
   /* Workaround: we don't have "small" select yet */
   .show-by-select {
-    width: 6rem;
+    width: 7rem;
 
     &:deep(.ui-input) {
       height: 3rem;
       padding-inline: 0.8rem;
       gap: 0.8rem;
-      min-width: 6rem;
+      min-width: 7rem;
     }
 
     &:deep(.input) {

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,
 })