@xen-orchestra/web-core 0.29.0 → 0.30.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>

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",

package/lib/locales/en.json

@@ -27,6 +27,7 @@
   "alarms": "Alarms",
   "all-done": "All done!",
   "all-good": "All good!",
+  "all-quiet-launchpad": "All quiet on the launchpad",
   "allow-self-signed-ssl": "You may need to allow self-signed SSL certificates in your browser",
   "api-error-details": "API Error details",
   "appearance": "Appearance",
@@ -105,7 +106,9 @@
   "console": "Console",
   "console-actions": "Console actions",
   "console-clipboard": "Console clipboard",
+  "console-offline": "Console offline",
   "console-unavailable": "Console unavailable",
+  "console-unavailable-reason": "The console is currently unavailable because the {type} is powered off.",
   "control-domain-memory": "Control domain memory",
   "copy": "Copy",
   "copy-all": "Copy all",
@@ -153,6 +156,7 @@
   "cpus": "CPUs",
   "crash-dump-storage-repository": "Crash dump storage repository",
   "create": "Create",
+  "created-by": "Created by",
   "created-on": "Created on",
   "cron-pattern": "Cron pattern",
   "custom-config": "Custom config",
@@ -193,6 +197,7 @@
   "edit-config": "Edit config",
   "enabled": "Enabled",
   "end-of-life": "End of life",
+  "engines-off": "Engines off, orbit stable",
   "eol": "EOL",
   "error": "Error",
   "error-no-data": "Error, can't collect data.",
@@ -236,6 +241,7 @@
   "go-back": "Go back",
   "gpus": "GPUs",
   "graphics-display": "Graphics & Display",
+  "guest-tools": "Guest tools",
   "gzip": "gzip",
   "hardware": "Hardware",
   "hardware-specifications": "Hardware specifications",
@@ -243,8 +249,11 @@
   "here": "Here",
   "high-availability": "High availability (HA)",
   "host": "Host",
+  "host-currently-shutdown": "This host is currently shut down, so we can’t retrieve any data.",
   "host-description": "Host description",
   "host-internal-networks": "Host internal networks",
+  "host-not-running": "Host not running",
+  "host-off": "Host is powered off",
   "host-status.halted": "Stopped",
   "host-status.running": "Running",
   "host-status.unknown": "Unknown",
@@ -322,6 +331,7 @@
   "language": "Language",
   "last": "Last",
   "last-n-runs": "Last {n} runs",
+  "last-run-number": "Last run #{n}",
   "last-week": "Last week",
   "learn-more": "Learn more",
   "license-socket": "License socket",
@@ -329,8 +339,8 @@
   "licensing": "Licensing",
   "load-average": "Load average",
   "load-now": "Load now",
+  "loading": "Loading…",
   "loading-hosts": "Loading hosts…",
-  "loading-in-progress": "Loading in progress…",
   "locking-mode": "Locking mode",
   "locking-mode-default": "Default locking mode",
   "log-out": "Log out",
@@ -365,7 +375,6 @@
   "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",
@@ -391,11 +400,14 @@
   "news-name": "{name} news",
   "nic-type": "NIC type",
   "no-alarm-triggered": "No alarm triggered",
+  "no-alarms-detected": "No alarms detected",
   "no-backup-available": "No backup available",
   "no-config": "No configuration",
   "no-data": "No data",
+  "no-data-to-calculate": "No data to calculate",
   "no-network-detected": "No network detected",
   "no-pif-detected": "No PIF detected",
+  "no-pools-detected": "No pools detected",
   "no-result": "No result",
   "no-results": "No results",
   "no-selected-vm-can-be-exported": "No selected VM can be exported",
@@ -403,6 +415,7 @@
   "no-server-detected": "No server detected",
   "no-tasks": "No tasks",
   "no-vif-detected": "No VIF detected",
+  "no-vm-detected": "No VM detected",
   "none": "None",
   "not-found": "Not found",
   "not-running": "Not running",
@@ -425,6 +438,7 @@
   "password": "Password",
   "password-invalid": "Password invalid",
   "patches": "Patches",
+  "patches-up-to-date": "Patches up to date",
   "pause": "Pause",
   "physical-interface-status": "Physical interface status",
   "pick-template": "Pick template",
@@ -494,6 +508,7 @@
   "secure-boot": "Secure boot",
   "see-all": "See all",
   "see-less": "See less",
+  "see-n-more": "See {n} more",
   "select-compression": "Select a compression",
   "select-destination-host": "Select a destination host",
   "select-host": "Select host",
@@ -526,8 +541,11 @@
   "stacked-cpu-usage": "Stacked CPU usage",
   "stacked-ram-usage": "Stacked RAM usage",
   "start": "Start",
+  "start-console": "Start your {type} to access the console and resume operations!",
   "start-delay": "Start delay",
+  "start-host": "Start the host to resume operations, or check back later once it’s powered on.",
   "start-on-host": "Start on specific host",
+  "start-vm": "Start it to access its console, and configuration details.",
   "started": "Started",
   "state": "State",
   "static": "Static",
@@ -614,6 +632,9 @@
   "vm-is-running": "The VM is running",
   "vm-limit-topology": "VM limit topology",
   "vm-management": "VM management",
+  "vm-not-running": "VM not running",
+  "vm-off": "This virtual machine is powered off.",
+  "vm-shutdown": "VM is currently shut down",
   "vm-status.halted": "Halted",
   "vm-status.paused": "Paused",
   "vm-status.running": "Running",

package/lib/locales/es.json

@@ -306,7 +306,7 @@
   "load-average": "Carga media del sistema",
   "load-now": "Cargar ahora",
   "loading-hosts": "Cargando servidores…",
-  "loading-in-progress": "Cargando…",
+  "loading": "Cargando…",
   "locking-mode": "Modo de bloqueo",
   "locking-mode-default": "Modo de bloqueo por defecto",
   "log-out": "Desconectarse",

package/lib/locales/fa.json

@@ -265,7 +265,7 @@
   "load-average": "میانگین مصرف",
   "load-now": "اکنون بارگذاری کنید",
   "loading-hosts": "در حال بارگذاری میزبان ها…",
-  "loading-in-progress": "بارگیری در حال انجام است…",
+  "loading": "بارگیری در حال انجام است…",
   "locking-mode": "حالت قفل کردن",
   "locking-mode-default": "حالت قفل کردن پیش‌فرض",
   "log-out": "خروج",