@xen-orchestra/web-core 0.20.1 → 0.21.0

package/lib/components/ui/tree-item-label/UiTreeItemLabel.vue

@@ -16,7 +16,7 @@
       </template>
       <UiButtonIcon
         v-if="hasToggle"
-        v-tooltip="isExpanded ? $t('core.close') : $t('core.open')"
+        v-tooltip="isExpanded ? t('core.close') : t('core.open')"
         class="toggle"
         accent="brand"
         :icon="isExpanded ? faAngleDown : faAngleRight"
@@ -47,6 +47,7 @@ import { IK_TREE_ITEM_EXPANDED, IK_TREE_ITEM_HAS_CHILDREN, IK_TREE_LIST_DEPTH }
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { faAngleDown, faAngleRight } from '@fortawesome/free-solid-svg-icons'
 import { inject, ref, useAttrs } from 'vue'
+import { useI18n } from 'vue-i18n'
 import type { RouteLocationRaw } from 'vue-router'
 
 defineOptions({
@@ -69,6 +70,8 @@ defineSlots<{
   addons?(): any
 }>()
 
+const { t } = useI18n()
+
 const attrs = useAttrs()
 
 const hasToggle = inject(IK_TREE_ITEM_HAS_CHILDREN, ref(false))

package/lib/composables/local-time-ago.composable.ts

@@ -0,0 +1,53 @@
+import { useTimestamp } from '@vueuse/core'
+import { computed, type MaybeRefOrGetter, toValue } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+export enum SECONDS {
+  MINUTE = 60,
+  HOUR = SECONDS.MINUTE * 60,
+  DAY = SECONDS.HOUR * 24,
+  WEEK = SECONDS.DAY * 7,
+  MONTH = SECONDS.DAY * 30,
+  YEAR = SECONDS.DAY * 365,
+}
+
+export type TimeThreshold = [number, Intl.RelativeTimeFormatUnit]
+
+const timeThresholds: TimeThreshold[] = [
+  [SECONDS.MINUTE, 'second'],
+  [SECONDS.HOUR, 'minute'],
+  [SECONDS.DAY, 'hour'],
+  [SECONDS.WEEK, 'day'],
+  [SECONDS.MONTH, 'week'],
+  [SECONDS.YEAR, 'month'],
+  [Infinity, 'year'],
+]
+
+export function useTimeAgo(referenceDate: MaybeRefOrGetter<Date | number | string>) {
+  const { locale } = useI18n()
+
+  const formatter = computed(() => new Intl.RelativeTimeFormat(locale.value, { numeric: 'auto' }))
+
+  const now = useTimestamp({ interval: 1000 })
+
+  const referenceTime = computed(() => new Date(toValue(referenceDate)).getTime())
+
+  const distance = computed(() => {
+    const diff = Math.trunc((referenceTime.value - now.value) / 1000)
+
+    if (Math.abs(diff) < 60) {
+      return Math.trunc(diff / 10) * 10 || 0 // Avoid recomputing when the value changes from 0 to -0
+    }
+
+    return timeThresholds.reduce(
+      (acc, [threshold]) => (Math.abs(acc) < threshold ? acc : Math.trunc(acc / threshold) * threshold),
+      diff
+    )
+  })
+
+  return computed(() => {
+    const index = timeThresholds.findIndex(([threshold]) => Math.abs(distance.value) < threshold)
+    const divisor = index > 0 ? timeThresholds[index - 1][0] : 1
+    return formatter.value.format(Math.trunc(distance.value / divisor), timeThresholds[index][1])
+  })
+}

package/lib/composables/locale-time-ago.composable.ts

@@ -0,0 +1,53 @@
+import { useTimestamp } from '@vueuse/core'
+import { computed, type MaybeRefOrGetter, toValue } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+export enum SECONDS {
+  MINUTE = 60,
+  HOUR = SECONDS.MINUTE * 60,
+  DAY = SECONDS.HOUR * 24,
+  WEEK = SECONDS.DAY * 7,
+  MONTH = SECONDS.DAY * 30,
+  YEAR = SECONDS.DAY * 365,
+}
+
+export type TimeThreshold = [number, Intl.RelativeTimeFormatUnit]
+
+const timeThresholds: TimeThreshold[] = [
+  [SECONDS.MINUTE, 'second'],
+  [SECONDS.HOUR, 'minute'],
+  [SECONDS.DAY, 'hour'],
+  [SECONDS.WEEK, 'day'],
+  [SECONDS.MONTH, 'week'],
+  [SECONDS.YEAR, 'month'],
+  [Infinity, 'year'],
+]
+
+export function useTimeAgo(referenceDate: MaybeRefOrGetter<Date | number | string>) {
+  const { locale } = useI18n()
+
+  const formatter = computed(() => new Intl.RelativeTimeFormat(locale.value, { numeric: 'auto' }))
+
+  const now = useTimestamp({ interval: 1000 })
+
+  const referenceTime = computed(() => new Date(toValue(referenceDate)).getTime())
+
+  const distance = computed(() => {
+    const diff = Math.trunc((referenceTime.value - now.value) / 1000)
+
+    if (Math.abs(diff) < 60) {
+      return Math.trunc(diff / 10) * 10 || 0 // Avoid recomputing when the value changes from 0 to -0
+    }
+
+    return timeThresholds.reduce(
+      (acc, [threshold]) => (Math.abs(acc) < threshold ? acc : Math.trunc(acc / threshold) * threshold),
+      diff
+    )
+  })
+
+  return computed(() => {
+    const index = timeThresholds.findIndex(([threshold]) => Math.abs(distance.value) < threshold)
+    const divisor = index > 0 ? timeThresholds[index - 1][0] : 1
+    return formatter.value.format(Math.trunc(distance.value / divisor), timeThresholds[index][1])
+  })
+}

package/lib/icons/fa-icons.ts

@@ -0,0 +1,164 @@
+import { defineIconPack } from '@core/packages/icon/define-icon-pack.ts'
+import { faBuilding, faFile, faFolderClosed, faFolderOpen, faSquareCheck } from '@fortawesome/free-regular-svg-icons'
+import {
+  faAlignLeft,
+  faAngleDoubleLeft,
+  faAngleDoubleRight,
+  faAngleDown,
+  faAngleLeft,
+  faAngleRight,
+  faAngleUp,
+  faArrowDown,
+  faArrowRight,
+  faArrowRightFromBracket,
+  faArrowUp,
+  faArrowUpRightFromSquare,
+  faAt,
+  faBars,
+  faBarsProgress,
+  faBook,
+  faCamera,
+  faCaretDown,
+  faCaretUp,
+  faCheck,
+  faCircle,
+  faCircleCheck,
+  faCircleMinus,
+  faCircleNotch,
+  faCirclePlay,
+  faCircleXmark,
+  faCity,
+  faClose,
+  faCode,
+  faComments,
+  faCopy,
+  faDatabase,
+  faDesktop,
+  faDisplay,
+  faDownLeftAndUpRightToCenter,
+  faDownload,
+  faEarthAmericas,
+  faEdit,
+  faEllipsis,
+  faEllipsisVertical,
+  faExternalLink,
+  faEyeSlash,
+  faFileCsv,
+  faFileExport,
+  faFilter,
+  faFont,
+  faGear,
+  faHashtag,
+  faHeadset,
+  faKeyboard,
+  faLayerGroup,
+  faList,
+  faLock,
+  faLockOpen,
+  faMagnifyingGlass,
+  faMemory,
+  faMicrochip,
+  faMinus,
+  faMoon,
+  faNetworkWired,
+  faPause,
+  faPencil,
+  faPlay,
+  faPlug,
+  faPlus,
+  faPowerOff,
+  faRemove,
+  faRepeat,
+  faRotateLeft,
+  faRoute,
+  faSatellite,
+  faServer,
+  faSliders,
+  faTrash,
+  faUpRightAndDownLeftFromCenter,
+  faXmark,
+} from '@fortawesome/free-solid-svg-icons'
+
+export const faIcons = defineIconPack({
+  'align-left': { icon: faAlignLeft },
+  'angle-double-left': { icon: faAngleDoubleLeft },
+  'angle-double-right': { icon: faAngleDoubleRight },
+  'angle-down': { icon: faAngleDown },
+  'angle-left': { icon: faAngleLeft },
+  'angle-right': { icon: faAngleRight },
+  'angle-up': { icon: faAngleUp },
+  'arrow-down': { icon: faArrowDown },
+  'arrow-right': { icon: faArrowRight },
+  'arrow-right-from-bracket': { icon: faArrowRightFromBracket },
+  'arrow-up': { icon: faArrowUp },
+  'arrow-up-right-from-square': { icon: faArrowUpRightFromSquare },
+  at: { icon: faAt },
+  bars: { icon: faBars },
+  'bars-progress': { icon: faBarsProgress },
+  book: { icon: faBook },
+  building: { icon: faBuilding },
+  camera: { icon: faCamera },
+  'caret-down': { icon: faCaretDown },
+  'caret-up': { icon: faCaretUp },
+  check: { icon: faCheck },
+  circle: { icon: faCircle },
+  'circle-check': { icon: faCircleCheck },
+  'circle-minus': { icon: faCircleMinus },
+  'circle-notch': { icon: faCircleNotch },
+  'circle-play': { icon: faCirclePlay },
+  'circle-xmark': { icon: faCircleXmark },
+  city: { icon: faCity },
+  close: { icon: faClose },
+  code: { icon: faCode },
+  comments: { icon: faComments },
+  copy: { icon: faCopy },
+  database: { icon: faDatabase },
+  desktop: { icon: faDesktop },
+  display: { icon: faDisplay },
+  'down-left-and-up-right-to-center': { icon: faDownLeftAndUpRightToCenter },
+  download: { icon: faDownload },
+  'earth-americas': { icon: faEarthAmericas },
+  edit: { icon: faEdit },
+  ellipsis: { icon: faEllipsis },
+  'ellipsis-vertical': { icon: faEllipsisVertical },
+  'external-link': { icon: faExternalLink },
+  'eye-slash': { icon: faEyeSlash },
+  file: { icon: faFile },
+  'file-csv': { icon: faFileCsv },
+  'file-export': { icon: faFileExport },
+  filter: { icon: faFilter },
+  'folder-closed': { icon: faFolderClosed },
+  'folder-open': { icon: faFolderOpen },
+  font: { icon: faFont },
+  gear: { icon: faGear },
+  hashtag: { icon: faHashtag },
+  headset: { icon: faHeadset },
+  keyboard: { icon: faKeyboard },
+  'layer-group': { icon: faLayerGroup },
+  list: { icon: faList },
+  lock: { icon: faLock },
+  'lock-open': { icon: faLockOpen },
+  'magnifying-glass': { icon: faMagnifyingGlass },
+  memory: { icon: faMemory },
+  microchip: { icon: faMicrochip },
+  minus: { icon: faMinus },
+  moon: { icon: faMoon },
+  'network-wired': { icon: faNetworkWired },
+  pause: { icon: faPause },
+  pencil: { icon: faPencil },
+  play: { icon: faPlay },
+  plug: { icon: faPlug },
+  plus: { icon: faPlus },
+  'power-off': { icon: faPowerOff },
+  remove: { icon: faRemove },
+  repeat: { icon: faRepeat },
+  'rotate-left': { icon: faRotateLeft },
+  route: { icon: faRoute },
+  satellite: { icon: faSatellite },
+  server: { icon: faServer },
+  sliders: { icon: faSliders },
+  'square-check': { icon: faSquareCheck },
+  trash: { icon: faTrash },
+  'up-right-and-down-left-from-center': { icon: faUpRightAndDownLeftFromCenter },
+  xmark: { icon: faXmark },
+})

package/lib/icons/index.ts

@@ -0,0 +1,15 @@
+import { faIcons } from '@core/icons/fa-icons.ts'
+import { legacyIcons } from '@core/icons/legacy-icons.ts'
+import { objectIcons } from '@core/icons/object-icons.ts'
+import { defineIconPack } from '@core/packages/icon/define-icon-pack.ts'
+import type { ICON_SYMBOL } from '@core/packages/icon/types.ts'
+
+export const icons = defineIconPack({
+  fa: faIcons,
+  legacy: legacyIcons,
+  object: objectIcons,
+})
+
+export type IconName = Exclude<keyof typeof icons, typeof ICON_SYMBOL>
+
+export type ObjectIconName = Extract<IconName, `object:${string}`>

package/lib/icons/legacy-icons.ts

@@ -0,0 +1,80 @@
+import { defineIconPack } from '@core/packages/icon/define-icon-pack.ts'
+import { defineIcon } from '@core/packages/icon/define-icon.ts'
+import { createMapper } from '@core/packages/mapper/create-mapper.ts'
+import {
+  faCheck,
+  faCircle,
+  faCircleInfo,
+  faExclamation,
+  faInfo,
+  faMinus,
+  faPlay,
+  faStar,
+  faStop,
+  faXmark,
+} from '@fortawesome/free-solid-svg-icons'
+
+const getStatusIcon = createMapper(
+  {
+    info: faInfo,
+    success: faCheck,
+    warning: faExclamation,
+    danger: faXmark,
+    muted: faMinus,
+  },
+  'muted'
+)
+
+const getStatusColor = createMapper(
+  {
+    info: 'var(--color-info-txt-item)',
+    success: 'var(--color-success-txt-item)',
+    warning: 'var(--color-warning-txt-item)',
+    danger: 'var(--color-danger-txt-item)',
+    muted: 'var(--color-neutral-txt-secondary)',
+  },
+  'muted'
+)
+
+export const legacyIcons = defineIconPack({
+  'circle-progress': defineIcon([['success', 'warning', 'danger']], accent => [
+    {
+      icon: accent === 'success' ? faCheck : faExclamation,
+    },
+  ]),
+  halted: {
+    icon: faStop,
+    color: 'var(--color-danger-item-base)',
+  },
+  info: {
+    icon: faCircleInfo,
+    color: 'var(--color-info-item-base)',
+  },
+  'legend-circle': { icon: faCircle, size: 8 },
+  primary: [
+    {
+      icon: faCircle,
+      color: 'var(--color-info-item-base)',
+    },
+    {
+      icon: faStar,
+      color: 'var(--color-info-txt-item)',
+      size: 8,
+    },
+  ],
+  running: {
+    icon: faPlay,
+    color: 'var(--color-success-item-base)',
+  },
+  status: defineIcon([['info', 'success', 'warning', 'danger', 'muted']], accent => [
+    {
+      icon: faCircle,
+      color: accent === 'muted' ? 'var(--color-neutral-background-disabled)' : `var(--color-${accent}-item-base)`,
+    },
+    {
+      icon: getStatusIcon(accent),
+      color: getStatusColor(accent),
+      size: 8,
+    },
+  ]),
+})

package/lib/icons/object-icons.ts

@@ -0,0 +1,187 @@
+import { defineIconPack } from '@core/packages/icon/define-icon-pack.ts'
+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 {
+  faBan,
+  faCheck,
+  faCircle,
+  faDatabase,
+  faDesktop,
+  faMinus,
+  faMoon,
+  faNetworkWired,
+  faPause,
+  faPlay,
+  faQuestion,
+  faServer,
+  faStop,
+  faTriangleExclamation,
+  faWarehouse,
+  faXmark,
+} from '@fortawesome/free-solid-svg-icons'
+
+const defaultTransforms: IconTransforms = {
+  translate: 6,
+  size: 8,
+  borderColor: 'var(--color-neutral-background-primary)',
+}
+
+const getStatusIcon = createMapper(
+  {
+    running: defineIcon({
+      icon: faPlay,
+      color: 'var(--color-success-item-base)',
+      ...defaultTransforms,
+    }),
+    halted: defineIcon({
+      icon: faStop,
+      color: 'var(--color-danger-item-base)',
+      ...defaultTransforms,
+    }),
+    suspended: defineIcon(
+      [
+        {
+          icon: faCircle,
+          color: 'var(--color-neutral-border)',
+        },
+        {
+          icon: faMoon,
+          color: 'var(--color-neutral-txt-secondary)',
+          size: 12,
+        },
+      ],
+      defaultTransforms
+    ),
+    paused: defineIcon(
+      [
+        {
+          icon: faCircle,
+          color: 'var(--color-brand-item-base)',
+        },
+        {
+          icon: faPause,
+          color: 'var(--color-info-txt-item)',
+          size: 12,
+        },
+      ],
+      defaultTransforms
+    ),
+    muted: undefined,
+    unknown: defineIcon([
+      {
+        icon: faQuestion,
+        color: 'var(--color-neutral-txt-secondary)',
+        ...defaultTransforms,
+      },
+    ]),
+    maintenance: defineIcon([
+      {
+        icon: faTriangleExclamation,
+        color: 'var(--color-warning-item-base)',
+        ...defaultTransforms,
+      },
+    ]),
+    disabled: defineIcon(
+      [
+        {
+          icon: faCircle,
+          color: 'var(--color-neutral-border)',
+        },
+        {
+          icon: faBan,
+          color: 'var(--color-neutral-txt-secondary)',
+          size: 12,
+        },
+      ],
+      defaultTransforms
+    ),
+    connected: defineIcon(
+      [
+        {
+          icon: faCircle,
+          color: 'var(--color-success-item-base)',
+        },
+        {
+          icon: faCheck,
+          color: 'var(--color-success-txt-item)',
+          size: 12,
+        },
+      ],
+      defaultTransforms
+    ),
+    'partially-connected': defineIcon(
+      [
+        {
+          icon: faCircle,
+          color: 'var(--color-warning-item-base)',
+        },
+        {
+          icon: faMinus,
+          color: 'var(--color-warning-txt-item)',
+          size: 12,
+        },
+      ],
+      defaultTransforms
+    ),
+    disconnected: defineIcon(
+      [
+        {
+          icon: faCircle,
+          color: 'var(--color-danger-item-base)',
+        },
+        {
+          icon: faXmark,
+          color: 'var(--color-danger-txt-item)',
+          size: 12,
+        },
+      ],
+      defaultTransforms
+    ),
+  },
+  'unknown'
+)
+
+function getMainColor(state: string) {
+  return state === 'muted' || state === 'unknown'
+    ? 'var(--color-neutral-txt-secondary)'
+    : 'var(--color-neutral-txt-primary)'
+}
+
+export const objectIcons = defineIconPack({
+  vm: defineIcon([['running', 'halted', 'suspended', 'paused', 'muted']], state => [
+    {
+      icon: faDesktop,
+      color: getMainColor(state),
+    },
+    { icon: getStatusIcon(state) },
+  ]),
+  host: defineIcon([['running', 'halted', 'disabled', 'muted', 'unknown']], state => [
+    {
+      icon: faServer,
+      color: getMainColor(state),
+    },
+    { icon: getStatusIcon(state) },
+  ]),
+  sr: defineIcon([['connected', 'partially-connected', 'disconnected', 'muted']], state => [
+    {
+      icon: faDatabase,
+      color: getMainColor(state),
+    },
+    { icon: getStatusIcon(state) },
+  ]),
+  network: defineIcon([['connected', 'disconnected']], state => [
+    {
+      icon: faNetworkWired,
+      color: getMainColor(state),
+    },
+    { icon: getStatusIcon(state) },
+  ]),
+  'backup-repository': defineIcon([['connected', 'disconnected']], state => [
+    {
+      icon: faWarehouse,
+      color: getMainColor(state),
+    },
+    { icon: getStatusIcon(state) },
+  ]),
+})

package/lib/layouts/CoreLayout.vue

@@ -4,13 +4,14 @@
       <slot name="app-logo" />
       <UiButtonIcon
         v-tooltip="{
-          content: sidebarStore.isExpanded ? $t('core.sidebar.close') : $t('core.sidebar.open'),
+          content: sidebarStore.isExpanded ? t('core.sidebar.close') : t('core.sidebar.open'),
           placement: 'right',
         }"
         accent="brand"
         size="medium"
-        :icon="sidebarStore.isExpanded ? faAngleDoubleLeft : faBars"
+        :icon="faBars"
         class="sidebar-toggle"
+        :target-scale="1.8"
         @click="sidebarStore.toggleExpand()"
       />
       <slot name="app-header" />
@@ -47,7 +48,10 @@ import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import { useSidebarStore } from '@core/stores/sidebar.store'
 import { useUiStore } from '@core/stores/ui.store'
-import { faAngleDoubleLeft, faBars } from '@fortawesome/free-solid-svg-icons'
+import { faBars } from '@fortawesome/free-solid-svg-icons'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
 
 const uiStore = useUiStore()
 const sidebarStore = useSidebarStore()

package/lib/locales/cs.json

@@ -397,7 +397,6 @@
   "power-on-mode": "Režim zapínání",
   "power-on-vm-for-console": "Konzole virt. stroje bude přístupná až po jeho zapnutí",
   "power-state": "Stav napájení",
-  "primary-host": "Hlavní hostitel",
   "professional-support": "Profesionální podpora",
   "properties": "Vlastnosti",
   "property": "Vlastnost",

package/lib/locales/de.json

@@ -191,7 +191,7 @@
   "hosts-status.running": "Gestartet",
   "hosts-status.unknown": "Unbekannt",
   "hosts-status.unknown.tooltip": "Host-Metriken sind nicht erreichbar",
-  "id": "Id",
+  "id": "ID",
   "in-last-three-jobs": "In ihren letzten drei Jobs",
   "invalid-field": "Ungültiges Feld",
   "ip-addresses": "IP-Adressen",