@xen-orchestra/web-core 0.27.0 → 0.28.0

package/lib/packages/progress/use-progress.ts

@@ -0,0 +1,22 @@
+import type { Progress } from './types.ts'
+import { computed, type MaybeRefOrGetter, toValue } from 'vue'
+
+export function useProgress(rawCurrent: MaybeRefOrGetter<number>, rawTotal: MaybeRefOrGetter<number>): Progress {
+  const current = computed(() => toValue(rawCurrent))
+
+  const total = computed(() => toValue(rawTotal))
+
+  const percentage = computed(() => (total.value === 0 ? 0 : (current.value / total.value) * 100))
+
+  const percentageCap = computed(() => Math.max(100, Math.ceil(percentage.value / 100) * 100))
+
+  const fillWidth = computed(() => `${(percentage.value / percentageCap.value) * 100}%`)
+
+  return {
+    current,
+    total,
+    percentage,
+    fillWidth,
+    percentageCap,
+  }
+}

package/lib/packages/threshold/README.md

@@ -0,0 +1,30 @@
+# `useThreshold`
+
+`useThreshold` composable allows defining payloads for different thresholds.
+
+It returns the payload of the highest matching threshold for that value.
+
+## Arguments
+
+| Argument       | Type                                                                 | Required | Description                           |
+| -------------- | -------------------------------------------------------------------- | :------: | ------------------------------------- |
+| `currentValue` | `MaybeRefOrGetter<number>`                                           |    ✓     | The value to check against thresholds |
+| `config`       | `MaybeRefOrGetter<Record<number, TPayload> & { default: TPayload }>` |    ✓     | The thresholds configuration          |
+
+## Returns
+
+`ComputedRef<{ value: number | undefined; payload: TPayload }>`
+
+## Example
+
+```ts
+const threshold = useThreshold(value, {
+  50: 'orange',
+  100: 'red',
+  default: 'green',
+})
+
+// value = 20 → threshold = { value: undefined, payload: 'green' }
+// value = 70 → threshold = { value: 50, payload: 'orange' }
+// value = 130 → threshold = { value: 100, payload: 'red' }
+```

package/lib/packages/threshold/type.ts

@@ -0,0 +1,3 @@
+export type ThresholdConfig<TPayload> = Record<number, TPayload> & { default: TPayload }
+
+export type ThresholdResult<TPayload> = { value: number | undefined; payload: TPayload }

package/lib/packages/threshold/use-threshold.ts

@@ -0,0 +1,19 @@
+import type { ThresholdConfig, ThresholdResult } from '@core/packages/threshold/type.ts'
+import { computed, type ComputedRef, type MaybeRefOrGetter, toValue } from 'vue'
+
+export function useThreshold<TPayload>(
+  rawCurrentValue: MaybeRefOrGetter<number>,
+  rawConfig: MaybeRefOrGetter<ThresholdConfig<TPayload>>
+): ComputedRef<ThresholdResult<TPayload>> {
+  const currentValue = computed(() => toValue(rawCurrentValue))
+
+  const config = computed(() => toValue(rawConfig))
+
+  return computed(
+    () =>
+      Object.entries(config.value)
+        .map(([value, payload]) => ({ value: value === 'default' ? -Infinity : Number(value), payload }))
+        .sort((a, b) => b.value - a.value)
+        .find(threshold => currentValue.value >= threshold.value)!
+  )
+}

package/lib/types/object-icon.type.ts

@@ -1,43 +1,3 @@
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
-
-export type ObjectIconSize = 'extra-small' | 'small' | 'medium'
-
 export type VmState = 'running' | 'halted' | 'paused' | 'suspended'
 
 export type HostState = 'running' | 'halted' | 'maintenance'
-
-export type SrState = 'connected' | 'partially-connected' | 'disconnected'
-
-export type BackupRepositoryState = 'connected' | 'disconnected'
-
-export type NetworkState = 'connected' | 'disconnected'
-
-export type SupportedStateByType = {
-  host: HostState
-  vm: VmState
-  sr: SrState
-  'backup-repository': BackupRepositoryState
-  network: NetworkState
-}
-
-export type SupportedType = keyof SupportedStateByType
-
-export type SupportedState<TType extends SupportedType> = SupportedStateByType[TType]
-
-export type StatusConfig = {
-  icon: IconDefinition
-  color: `--${string}`
-  translate: {
-    x: [number, number, number]
-    y: [number, number, number]
-  }
-}
-
-export type TypeConfig<TType extends SupportedType> = {
-  mainIcon: IconDefinition
-  states: Record<SupportedState<TType>, StatusConfig>
-}
-
-export type ObjectIconConfig = {
-  [K in SupportedType]: TypeConfig<K>
-}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xen-orchestra/web-core",
   "type": "module",
-  "version": "0.27.0",
+  "version": "0.28.0",
   "private": false,
   "exports": {
     "./*": {

package/lib/components/icon/NewVtsIcon.vue

@@ -1,49 +0,0 @@
-<template>
-  <DisplayIcon v-if="icon" class="vts-icon" :class="className" :icon />
-</template>
-
-<script lang="ts" setup>
-import { type IconName, icons } from '@core/icons'
-import { DisplayIcon } from '@core/packages/icon'
-import { toVariants } from '@core/utils/to-variants.util.ts'
-import { computed } from 'vue'
-
-export type IconSize = 'small' | 'medium' | 'large' | 'current'
-
-const { size, name } = defineProps<{
-  size: IconSize
-  name: IconName
-}>()
-
-const className = computed(() =>
-  toVariants({
-    size: size === 'current' ? undefined : size,
-  })
-)
-
-const icon = computed(() => {
-  const icon = icons[name]
-
-  if (icon === undefined) {
-    console.warn(`Icon "${name}" not found.`)
-  }
-
-  return icon
-})
-</script>
-
-<style lang="postcss" scoped>
-.vts-icon {
-  &.size--small {
-    font-size: 1.2rem;
-  }
-
-  &.size--medium {
-    font-size: 1.6rem;
-  }
-
-  &.size--large {
-    font-size: 2rem;
-  }
-}
-</style>

package/lib/components/ui/complex-icon/UiComplexIcon.vue

@@ -1,45 +0,0 @@
-<!-- v2 -->
-<template>
-  <FontAwesomeLayers :class="toVariants({ size })" class="ui-complex-icon">
-    <slot />
-  </FontAwesomeLayers>
-</template>
-
-<script lang="ts" setup>
-import { toVariants } from '@core/utils/to-variants.util'
-import { FontAwesomeLayers } from '@fortawesome/vue-fontawesome'
-
-defineProps<{
-  size: 'small' | 'medium' | 'large'
-}>()
-</script>
-
-<style lang="postcss" scoped>
-.ui-complex-icon {
-  :nth-child(2) {
-    font-size: 0.5em;
-    transform: translate(100%, 80%);
-
-    :deep(path) {
-      stroke: var(--color-neutral-background-primary);
-      stroke-width: 100px;
-      stroke-linejoin: round;
-      paint-order: stroke;
-    }
-  }
-
-  /*SIZE VARIANTS*/
-
-  &.size--small {
-    font-size: 1.2rem;
-  }
-
-  &.size--medium {
-    font-size: 1.6rem;
-  }
-
-  &.size--large {
-    font-size: 2rem;
-  }
-}
-</style>

package/lib/components/ui/object-icon/UiObjectIcon.vue

@@ -1,251 +0,0 @@
-<!-- VM v2 -->
-<!-- Host v2 -->
-<!-- SR v2 -->
-<!-- Backup Repository v2 -->
-<!-- Network v2 -->
-<template>
-  <FontAwesomeLayers :class="[toVariants({ size }), { muted: stateConfig === undefined }]" class="ui-object-icon">
-    <VtsIcon :icon="mainIcon" accent="current" />
-    <VtsIcon :icon="stateIcon" accent="current" :style="stateIconStyle" class="state" />
-  </FontAwesomeLayers>
-</template>
-
-<script generic="TType extends SupportedType" lang="ts" setup>
-import VtsIcon from '@core/components/icon/VtsIcon.vue'
-import type { ObjectIconConfig, SupportedState, SupportedType } from '@core/types/object-icon.type'
-import { toVariants } from '@core/utils/to-variants.util'
-import {
-  faCheckCircle,
-  faCircleMinus,
-  faCircleXmark,
-  faDatabase,
-  faDisplay,
-  faMoon,
-  faNetworkWired,
-  faPause,
-  faPlay,
-  faServer,
-  faStop,
-  faTriangleExclamation,
-  faWarehouse,
-} from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeLayers } from '@fortawesome/vue-fontawesome'
-import { computed } from 'vue'
-
-export type ObjectIconSize = 'small' | 'medium' | 'large'
-
-const props = withDefaults(
-  defineProps<{
-    type: TType
-    size: ObjectIconSize
-    state?: SupportedState<TType> | 'disabled'
-  }>(),
-  { state: 'disabled' }
-)
-
-const config: ObjectIconConfig = {
-  vm: {
-    mainIcon: faDisplay,
-    states: {
-      running: {
-        icon: faPlay,
-        color: '--color-success-item-base',
-        translate: {
-          x: [100, 132, 148],
-          y: [65, 75, 90],
-        },
-      },
-      halted: {
-        icon: faStop,
-        color: '--color-danger-item-base',
-        translate: {
-          x: [100, 136, 144],
-          y: [65, 75, 90],
-        },
-      },
-      suspended: {
-        icon: faMoon,
-        color: '--color-info-item-base',
-        translate: {
-          x: [88, 130, 140],
-          y: [65, 75, 90],
-        },
-      },
-      paused: {
-        icon: faPause,
-        color: '--color-info-item-active',
-        translate: {
-          x: [110, 154, 170],
-          y: [65, 75, 90],
-        },
-      },
-    },
-  },
-  host: {
-    mainIcon: faServer,
-    states: {
-      running: {
-        icon: faPlay,
-        color: '--color-success-item-base',
-        translate: {
-          x: [82, 122, 136],
-          y: [66, 70, 90],
-        },
-      },
-      halted: {
-        icon: faStop,
-        color: '--color-danger-item-base',
-        translate: {
-          x: [90, 122, 134],
-          y: [65, 72, 85],
-        },
-      },
-      maintenance: {
-        icon: faTriangleExclamation,
-        color: '--color-warning-item-base',
-        translate: {
-          x: [60, 88, 100],
-          y: [68, 72, 82],
-        },
-      },
-    },
-  },
-  sr: {
-    mainIcon: faDatabase,
-    states: {
-      connected: {
-        icon: faCheckCircle,
-        color: '--color-success-item-base',
-        translate: {
-          x: [60, 90, 100],
-          y: [65, 75, 90],
-        },
-      },
-      'partially-connected': {
-        icon: faCircleMinus,
-        color: '--color-warning-item-base',
-        translate: {
-          x: [60, 90, 100],
-          y: [65, 75, 90],
-        },
-      },
-      disconnected: {
-        icon: faCircleXmark,
-        color: '--color-danger-item-base',
-        translate: {
-          x: [60, 90, 100],
-          y: [65, 75, 90],
-        },
-      },
-    },
-  },
-  'backup-repository': {
-    mainIcon: faWarehouse,
-    states: {
-      connected: {
-        icon: faCheckCircle,
-        color: '--color-success-item-base',
-        translate: {
-          x: [112, 130, 162],
-          y: [74, 78, 102],
-        },
-      },
-      disconnected: {
-        icon: faCircleXmark,
-        color: '--color-danger-item-base',
-        translate: {
-          x: [112, 130, 162],
-          y: [74, 78, 102],
-        },
-      },
-    },
-  },
-  network: {
-    mainIcon: faNetworkWired,
-    states: {
-      connected: {
-        icon: faCheckCircle,
-        color: '--color-success-item-base',
-        translate: {
-          x: [84, 110, 128],
-          y: [66, 72, 88],
-        },
-      },
-      disconnected: {
-        icon: faCircleXmark,
-        color: '--color-danger-item-base',
-        translate: {
-          x: [84, 110, 128],
-          y: [66, 72, 88],
-        },
-      },
-    },
-  },
-}
-
-const mainIcon = computed(() => config[props.type].mainIcon)
-const stateConfig = computed(() => (props.state === 'disabled' ? undefined : config[props.type].states[props.state]))
-const stateIcon = computed(() => stateConfig.value?.icon)
-
-const stateIconStyle = computed(() => {
-  if (stateConfig.value === undefined) {
-    return undefined
-  }
-
-  let translateIndex: number
-
-  if (props.size === 'small') {
-    translateIndex = 0
-  } else if (props.size === 'large') {
-    translateIndex = 2
-  } else {
-    translateIndex = 1
-  }
-
-  return {
-    color: `var(${stateConfig.value.color})`,
-    '--state-icon-translate-x': `${stateConfig.value.translate.x[translateIndex]}%`,
-    '--state-icon-translate-y': `${stateConfig.value.translate.y[translateIndex]}%`,
-  }
-})
-</script>
-
-<style lang="postcss" scoped>
-.ui-object-icon {
-  flex-shrink: 0;
-
-  &.muted {
-    color: var(--color-neutral-txt-secondary);
-  }
-
-  .state {
-    transform: translate(var(--state-icon-translate-x), var(--state-icon-translate-y));
-  }
-
-  /* SIZE VARIANTS */
-
-  &.size--small {
-    font-size: 0.8rem;
-
-    .state {
-      font-size: 0.75em;
-    }
-  }
-
-  &.size--medium {
-    font-size: 1.6rem;
-
-    .state {
-      font-size: 0.625em;
-    }
-  }
-
-  &.size--large {
-    font-size: 2.4rem;
-
-    .state {
-      font-size: 0.5em;
-    }
-  }
-}
-</style>