@xen-orchestra/web-core 0.24.0 → 0.25.0

package/lib/components/menu/MenuList.vue

@@ -86,7 +86,6 @@ const open = (event: MouseEvent) => {
 
 <style lang="postcss" scoped>
 .menu-list {
-  z-index: 1;
   display: inline-flex;
   flex-direction: column;
   padding: 0.4rem;

package/lib/components/stacked-bar-with-legend/VtsStackedBarWithLegend.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="vts-stacked-bar-with-legend">
     <UiStackedBar :segments :max-value="maxValue" />
-    <VtsLegendList class="list" :horizontal="uiStore.isDesktop">
+    <VtsLegendList class="list" :horizontal="!uiStore.isMobile">
       <UiLegend
         v-for="segment in segments"
         :key="segment.label"

package/lib/components/ui/alarm-item/UiAlarmItem.vue

@@ -0,0 +1,132 @@
+<!-- v1 -->
+<template>
+  <li class="ui-alarm-item" :class="className">
+    <div class="content">
+      <div class="label-percent typo-body-regular text-ellipsis">
+        <UiButtonIcon
+          v-if="description"
+          :icon="isDescriptionVisible ? faAngleDown : faAngleRight"
+          size="small"
+          accent="brand"
+          :target-scale="2"
+          @click="toggleDescription()"
+        />
+        <span v-tooltip class="text-ellipsis">
+          {{ label }}
+        </span>
+        <span class="percent">{{ t('n-percent', percent) }}</span>
+      </div>
+      <div class="typo-body-regular-small info">
+        <div v-if="slots.link" class="link-container">
+          {{ t('on-object') }}
+          <span class="object-link">
+            <slot name="link" />
+          </span>
+          <span class="interpunct" />
+        </div>
+        <span>{{ timeAgo }}</span>
+      </div>
+    </div>
+    <div v-if="isDescriptionVisible" class="description">
+      {{ description }}
+    </div>
+  </li>
+</template>
+
+<script lang="ts" setup>
+import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
+import { useTimeAgo } from '@core/composables/locale-time-ago.composable.ts'
+import { vTooltip } from '@core/directives/tooltip.directive'
+import { toVariants } from '@core/utils/to-variants.util'
+import { faAngleDown, faAngleRight } from '@fortawesome/free-solid-svg-icons'
+import { useToggle } from '@vueuse/core'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { date, size } = defineProps<{
+  date: Date | number | string
+  label: string
+  size: 'small' | 'large'
+  percent: number
+  description?: string
+}>()
+
+const slots = defineSlots<{
+  link?(): any
+}>()
+
+const timeAgo = useTimeAgo(() => date)
+
+const { t } = useI18n()
+
+const className = computed(() => toVariants({ size }))
+
+const [isDescriptionVisible, toggleDescription] = useToggle(false)
+</script>
+
+<style scoped lang="postcss">
+.ui-alarm-item {
+  display: flex;
+  flex-direction: column;
+  padding: 0.8rem 1.2rem;
+  border-block: 0.1rem solid var(--color-neutral-border);
+  color: var(--color-neutral-txt-primary);
+
+  &:not(:first-child) {
+    border-block-start: none;
+  }
+
+  .content {
+    display: flex;
+    justify-content: space-between;
+    gap: 0.6rem;
+  }
+
+  .label-percent {
+    gap: 1.6rem;
+  }
+
+  .info,
+  .link-container,
+  .label-percent {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .percent {
+    color: var(--color-danger-txt-base);
+  }
+
+  .info,
+  .link-container {
+    gap: 0.8rem;
+    white-space: nowrap;
+  }
+
+  .interpunct::before {
+    content: '•';
+  }
+
+  .info > :not(.object-link),
+  .description {
+    color: var(--color-neutral-txt-secondary);
+  }
+
+  &.size--large {
+    gap: 0.8rem;
+
+    .content {
+      flex-direction: row;
+    }
+  }
+
+  &.size--small {
+    gap: 0.4rem;
+
+    .content {
+      flex-direction: column;
+    }
+  }
+}
+</style>

package/lib/components/ui/alarm-list/UiAlarmList.vue

@@ -0,0 +1,20 @@
+<!-- v1 -->
+<template>
+  <ul class="ui-alarm-list">
+    <slot />
+  </ul>
+</template>
+
+<script setup lang="ts">
+defineSlots<{
+  default(): any
+}>()
+</script>
+
+<style scoped lang="postcss">
+.ui-alarm-list {
+  overflow-y: auto;
+  overflow-x: hidden;
+  height: 100%;
+}
+</style>

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

@@ -0,0 +1,24 @@
+<!-- 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>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+</script>
+
+<style lang="postcss" scoped>
+.ui-data-ruler {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  color: var(--color-neutral-txt-secondary);
+}
+</style>

package/lib/components/ui/input/UiInput.vue

@@ -112,6 +112,7 @@ defineExpose({ focus })
   color: var(--color-neutral-txt-primary);
   height: 4rem;
   width: 100%;
+  min-width: 15rem;
   padding-inline: 1.6rem;
 
   .left-icon,

package/lib/components/ui/legend/UiLegend.vue

@@ -19,20 +19,20 @@ export type LegendItemAccent = 'neutral' | 'info' | 'success' | 'warning' | 'dan
 
 export type LegendItemProps = {
   accent: LegendItemAccent
-  value?: number
+  value?: number | string
   unit?: string
   tooltip?: string
 }
 
-const props = defineProps<LegendItemProps>()
+const { value, unit, accent } = defineProps<LegendItemProps>()
 
 defineSlots<{
-  default(): void
+  default(): any
 }>()
 
-const valueLabel = computed(() => [props.value, props.unit].join(' ').trim())
+const valueLabel = computed(() => [value, unit].join(' ').trim())
 
-const classNames = computed(() => toVariants({ accent: props.accent }))
+const classNames = computed(() => toVariants({ accent }))
 </script>
 
 <style lang="postcss" scoped>

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

@@ -9,7 +9,12 @@
       <span v-for="step in steps" :key="step">{{ n(step, 'percent') }}</span>
     </div>
     <VtsLegendList class="legend">
-      <UiLegend :accent :value="Math.round(percentage)" unit="%">{{ legend }}</UiLegend>
+      <UiLegend v-if="displayMode === 'percent'" :accent :value="Math.round(percentage)" unit="%">
+        {{ legend }}
+      </UiLegend>
+      <UiLegend v-else :accent :value="legendValue">
+        {{ legend }}
+      </UiLegend>
     </VtsLegendList>
   </div>
 </template>
@@ -17,27 +22,35 @@
 <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'
 
-const {
-  value: _value,
-  max = 100,
-  showSteps,
-} = defineProps<{
+interface Props {
   legend: string
   value: number
-  max?: 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)
 
-const percentage = computed(() => (max <= 0 ? 0 : (value.value / max) * 100))
+const max = computed(() => _max ?? 100)
+
+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)
@@ -56,6 +69,14 @@ const accent = computed(() => {
 })
 
 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}`
+})
 </script>
 
 <style lang="postcss" scoped>

package/lib/components/ui/query-search-bar/UiQuerySearchBar.vue

@@ -1,7 +1,7 @@
 <!-- v3 -->
 <template>
   <form class="ui-query-search-bar" @submit.prevent="emit('search', value)">
-    <label v-if="uiStore.isDesktop" :for="id" class="typo-body-regular-small label">
+    <label v-if="uiStore.isDesktopLarge" :for="id" class="typo-body-regular-small label">
       {{ t('core.query-search-bar.label') }}
     </label>
     <UiInput
@@ -10,26 +10,30 @@
       type="text"
       accent="brand"
       :aria-label="uiStore.isMobile ? t('core.query-search-bar.label') : undefined"
-      :icon="uiStore.isDesktop ? faMagnifyingGlass : undefined"
+      :icon="!uiStore.isMobile ? faMagnifyingGlass : undefined"
       :placeholder="t('core.query-search-bar.placeholder')"
     />
-    <template v-if="uiStore.isDesktop">
-      <UiButton size="medium" accent="brand" variant="primary" type="submit">{{ t('core.search') }}</UiButton>
+    <template v-if="!uiStore.isMobile">
+      <UiButton size="medium" accent="brand" variant="primary" type="submit" class="action-button">
+        {{ t('core.search') }}
+      </UiButton>
       <VtsDivider type="stretch" />
       <UiButton
         v-tooltip="t('coming-soon')"
         size="medium"
         accent="brand"
         variant="secondary"
-        :left-icon="faFilter"
         disabled
+        class="action-button"
       >
         {{ t('core.query-search-bar.use-query-builder') }}
       </UiButton>
     </template>
+
+    <!-- Mobile icons: search + filter -->
     <template v-else>
-      <UiButtonIcon accent="brand" size="medium" type="submit" :icon="faMagnifyingGlass" />
-      <UiButtonIcon accent="brand" size="medium" disabled :icon="faFilter" />
+      <UiButtonIcon accent="brand" size="medium" type="submit" :icon="faMagnifyingGlass" class="action-button" />
+      <UiButtonIcon accent="brand" size="medium" disabled :icon="faFilter" class="action-button" />
     </template>
   </form>
 </template>
@@ -62,11 +66,21 @@ const value = ref<string>('')
 <style lang="postcss" scoped>
 .ui-query-search-bar {
   display: flex;
-  gap: 1.6rem;
+  flex-wrap: nowrap;
   align-items: center;
+  gap: 1.6rem;
+  overflow-x: auto;
+  width: 100%;
+}
+
+.label {
+  color: var(--color-neutral-txt-secondary);
+  flex: 0 0 auto;
+  white-space: nowrap;
+}
 
-  .label {
-    color: var(--color-neutral-txt-secondary);
-  }
+.action-button {
+  flex: 0 0 auto;
+  white-space: nowrap;
 }
 </style>

package/lib/components/ui/table-actions/UiTableActions.vue

@@ -42,5 +42,12 @@ const slots = defineSlots<{
     align-items: center;
     gap: 2.4rem;
   }
+
+  /* TODO remove this when we have a better solution for the mobile view (waiting for the dropdown component) */
+  @media (max-width: 1440px) {
+    .actions {
+      display: block;
+    }
+  }
 }
 </style>

package/lib/locales/cs.json

@@ -27,6 +27,7 @@
   "all-done": "Vše dokončeno!",
   "all-good": "Všechno v pořádku!",
   "allow-self-signed-ssl": "Je možné že bude třeba ve vámi využívaném prohlížeči povolit samy sebou podepsané SSL certifikáty",
+  "api-error-details": "Podrobnosti o chybě API rozhraní",
   "appearance": "Vzhled",
   "ascending": "vzestupně",
   "auto-generated": "Automaticky vytvořeno",
@@ -59,7 +60,7 @@
   "bond-status": "Stav svazku",
   "boot-firmware": "Firmware zavádění",
   "boot-firmware-bios": "Šablona už obsahuje řetězec BIOS",
-  "boot-firmware-uefi": "Firmware zavádění je UEFI",
+  "boot-firmware-uefi": "Firmware, kterým zaváděno, je UEFI",
   "boot-vm": "Nastartovat virt. stroj",
   "build-number": "Číslo sestavení",
   "bytes.gi": "GiB",
@@ -79,9 +80,12 @@
   "confirm-cancel": "Opravdu chcete zrušit?",
   "confirm-delete": "Chystáte se smazat {0}",
   "connected": "Připojeno",
+  "connecting": "Připojuje se",
+  "connection": "Připojení",
+  "connection-failed": "Připojení se nezdařilo",
   "connections": "Spojení",
   "console": "Konzole",
-  "console-actions": "Akce konzole",
+  "console-actions": "Akce ohledně konzole",
   "console-clipboard": "Schránka konzole",
   "console-unavailable": "Konzole není k dispozici",
   "control-domain-memory": "Operační paměť řídící (virt) domény",
@@ -120,7 +124,7 @@
   "core.sort.descending": "Seřadit sestupně",
   "core.textarea.exceeds-max-characters": "Je třeba, aby zadání v kolonce bylo dlouhé nejvýše {max} znaků.",
   "cores-with-sockets": "Jader (patic)",
-  "cpu-cap": "zastropování procesoru",
+  "cpu-cap": "Zastropování procesoru",
   "cpu-mask": "Maska procesoru",
   "cpu-model": "Model procesoru",
   "cpu-provisioning": "Poskytování procesorů",
@@ -161,7 +165,7 @@
   "disk-name": "Název disku",
   "display": "Zobrazení",
   "dns": "DNS",
-  "do-you-have-needs": "Něco zde chybí a/nebo očekáváte? Dejte nám vědět",
+  "do-you-have-needs": "Něco potřebujete a/nebo očekáváte? Dejte nám vědět",
   "documentation": "Dokumentace",
   "documentation-name": "Dokumentace k {name}",
   "edit": "Upravit",
@@ -169,6 +173,7 @@
   "enabled": "Povoleno",
   "end-of-life": "Podpora pro tuto verzi skončila",
   "eol": "EOL",
+  "error": "Chyba",
   "error-no-data": "Chyba – nebylo možné shromáždit údaje.",
   "error-occurred": "Došlo k chybě",
   "exit-fullscreen": "Opustit režim na celou obrazovku",
@@ -202,6 +207,7 @@
   "for-replication": "Pro replikaci",
   "force-reboot": "Vynutit restart",
   "force-shutdown": "Vynutit vypnutí",
+  "forget": "Zapomenout",
   "fullscreen": "Na celou obrazovku",
   "fullscreen-leave": "Ukončit celoobrazovkový režim",
   "gateway": "Brána",
@@ -366,6 +372,7 @@
   "no-results": "Nic nenalezeno",
   "no-selected-vm-can-be-exported": "Žádný z označených virt. strojů není možné exportovat",
   "no-selected-vm-can-be-migrated": "Žádný z označených virt. strojů není možné přestěhovat",
+  "no-server-detected": "Nezjištěn žádný server",
   "no-tasks": "Žádné úlohy",
   "no-vif-detected": "Nebylo zjištěno žádné virt. rozhraní",
   "none": "Žádný",
@@ -428,7 +435,7 @@
   "reboot": "Restartovat",
   "receive": "Přijmout",
   "reformat": "Přeformátovat",
-  "relative-time.day": "1 den | {n} dny",
+  "relative-time.day": "1 den | {n} dnů",
   "relative-time.future": "V {str}",
   "relative-time.hour": "1 hodina | {n} hodin",
   "relative-time.minute": "1 minuta | {n} minut",
@@ -490,7 +497,7 @@
   "storage": "Úložiště",
   "storage-configuration": "Nastavení úložiště",
   "storage-repositories": "Repozitáře úložiště",
-  "storage-repository": "Repozitář na úložišti",
+  "storage-repository": "Repozitář úložiště",
   "storage-usage": "Využití úložiště",
   "success": "Úspěch",
   "summary": "Souhrn",
@@ -531,6 +538,7 @@
   "total-storage-repository": "Celkové úložiště repozitáře",
   "total-used": "Celkem využito",
   "total-used:": "Celkem využito:",
+  "unable-to-connect-to-the-pool": "Nebylo možné se připojit k fondu",
   "unknown": "Neznámé",
   "unlocked": "Odemčeno",
   "unreachable-hosts": "Nedosažitelní hostitelé",
@@ -544,7 +552,7 @@
   "vcpus-assigned": "Přiděleno virt. procesorů",
   "vcpus-used": "využito virt. procesorů",
   "vdi-throughput": "propustnost VDI",
-  "vdis": "Virt. disk | Virt. disk | Virt. disky",
+  "vdis": "Virt. disk | Virt. disky | Virt. disků",
   "version": "Verze",
   "vga": "VGA",
   "video-ram": "Videopaměť",
@@ -569,7 +577,7 @@
   "vm-status.suspended": "Uspané",
   "vm.active": "Aktivní",
   "vm.inactive": "Neaktivní",
-  "vms": "Virt. stroj | Virt. stroje",
+  "vms": "Virt. stroj | Virt. stroj | Virt. stroje",
   "vms-status": "Stav virt. strojů",
   "vms-status.halted": "Zastaveno",
   "vms-status.inactive": "Neaktivní",

package/lib/locales/de.json

@@ -10,15 +10,15 @@
   "admin-login": "Administrator Login",
   "admin-password": "Administrator Passwort",
   "admin-password-confirm": "Administrator Passwortbestätigung",
-  "alarm-type.cpu_usage": "CPU-Nutzung überschreitet {n}%",
-  "alarm-type.disk_usage": "Speicherbelegung überschreitet {n}%",
-  "alarm-type.fs_usage": "Dateisystem überschreitet {n}%",
-  "alarm-type.log_fs_usage": "Loggingdateisystem überschreitet {n}%",
-  "alarm-type.mem_usage": "Arbeitsspeicherauslastung überschreitet {n}%",
-  "alarm-type.memory_free_kib": "Freier Speicher fällt unter {n}%",
-  "alarm-type.network_usage": "Netzwerkauslastung überschreitet {n}%",
-  "alarm-type.physical_utilisation": "Physische Nutzung übersteigt {n}%",
-  "alarm-type.sr_io_throughput_total_per_host": "Gesamtdurchsatz der IO SR pro Host beträgt mehr als {n}%",
+  "alarm-type.cpu_usage": "CPU-Nutzung überschreitet @:n-percent",
+  "alarm-type.disk_usage": "Speicherbelegung überschreitet @:n-percent",
+  "alarm-type.fs_usage": "Dateisystem überschreitet @:n-percent",
+  "alarm-type.log_fs_usage": "Loggingdateisystem überschreitet @:n-percent",
+  "alarm-type.mem_usage": "Arbeitsspeicherauslastung überschreitet @:n-percent",
+  "alarm-type.memory_free_kib": "Freier Speicher fällt unter @:n-percent",
+  "alarm-type.network_usage": "Netzwerkauslastung überschreitet @:n-percent",
+  "alarm-type.physical_utilisation": "Physische Nutzung übersteigt @:n-percent",
+  "alarm-type.sr_io_throughput_total_per_host": "Gesamtdurchsatz der IO SR pro Host beträgt mehr als @:n-percent",
   "alarm-type.unknown": "unbekannter Alarmtyp",
   "alarms": "Alarme",
   "all-done": "Alles erledigt!",
@@ -113,6 +113,7 @@
   "cpu-usage": "Prozessorauslastung",
   "cpus": "Prozessoren",
   "create": "Erstellen",
+  "created-on": "Erstellt am",
   "custom-config": "Benutzerdefinierte Konfiguration",
   "dark-mode.auto": "Automatischer Dunkelmodus",
   "dark-mode.disable": "Deaktiviere den Dunkelmodus",
@@ -293,6 +294,7 @@
   "n-hosts": "1 Host | {n} Hosts",
   "n-hosts-awaiting-patch": "Der Host {n} benötigt dieses Patch | Die Hosts {n} benötigen dieses Patch",
   "n-missing": "{n} fehlen",
+  "n-percent": "{n}%",
   "n-vms": "1 VM | {n} VMs",
   "name": "Name",
   "netmask": "Netzmaske",
@@ -494,7 +496,7 @@
   "vm-management": "VM Verwaltung",
   "vm.active": "Aktiv",
   "vm.inactive": "Inaktiv",
-  "vms": "VMs",
+  "vms": "VM | VM | VMs",
   "vms-status": "VMs-Status",
   "vms-status.halted": "Angehalten",
   "vms-status.inactive": "Inaktiv",

package/lib/locales/en.json

@@ -13,15 +13,15 @@
   "admin-password": "Admin password",
   "admin-password-confirm": "Confirm admin password",
   "affinity-host": "Affinity host",
-  "alarm-type.cpu_usage": "CPU usage exceeds {n}%",
-  "alarm-type.disk_usage": "Disk usage exceeds {n}%",
-  "alarm-type.fs_usage": "FS usage exceeds {n}%",
-  "alarm-type.log_fs_usage": "Log FS usage exceeds {n}%",
-  "alarm-type.mem_usage": "Memory usage exceeds {n}%",
-  "alarm-type.memory_free_kib": "Free memory falls below {n}%",
-  "alarm-type.network_usage": "Network usage exceeds {n}%",
-  "alarm-type.physical_utilisation": "Physical utilisation exceeds {n}%",
-  "alarm-type.sr_io_throughput_total_per_host": "SR IO throughput total per host exceeds {n}%",
+  "alarm-type.cpu_usage": "CPU usage exceeds @:n-percent",
+  "alarm-type.disk_usage": "Disk usage exceeds @:n-percent",
+  "alarm-type.fs_usage": "FS usage exceeds @:n-percent",
+  "alarm-type.log_fs_usage": "Log FS usage exceeds @:n-percent",
+  "alarm-type.mem_usage": "Memory usage exceeds @:n-percent",
+  "alarm-type.memory_free_kib": "Free memory falls below @:n-percent",
+  "alarm-type.network_usage": "Network usage exceeds @:n-percent",
+  "alarm-type.physical_utilisation": "Physical utilisation exceeds @:n-percent",
+  "alarm-type.sr_io_throughput_total_per_host": "SR IO throughput total per host exceeds @:n-percent",
   "alarm-type.unknown": "Unknown alarm type",
   "alarms": "Alarms",
   "all-done": "All done!",
@@ -340,6 +340,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-percent": "{n}%",
   "n-vms": "1 VM | {n} VMs",
   "name": "Name",
   "nested-virtualization": "Nested virtualization",
@@ -577,7 +578,7 @@
   "vm-status.suspended": "Suspended",
   "vm.active": "Active",
   "vm.inactive": "Inactive",
-  "vms": "VM | VMs",
+  "vms": "VM | VM | VMs",
   "vms-status": "VMs status",
   "vms-status.halted": "Halted",
   "vms-status.inactive": "Inactive",