@xen-orchestra/web-core 0.27.0 → 0.29.0

package/lib/utils/progress.util.ts

@@ -0,0 +1,72 @@
+import type {
+  ProgressBarLegendType,
+  ProgressBarThresholdPayload,
+} from '@core/components/progress-bar/VtsProgressBar.vue'
+import type { ProgressBarLegend } from '@core/components/ui/progress-bar/UiProgressBar.vue'
+import type { Progress } from '@core/packages/progress/types.ts'
+import type { ThresholdConfig } from '@core/packages/threshold/type.ts'
+import { formatSize } from '@core/utils/size.util.ts'
+import { computed, type ComputedRef, type MaybeRefOrGetter, type Reactive, toValue } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+export function defaultProgressThresholds(tooltip?: string): ThresholdConfig<ProgressBarThresholdPayload> {
+  return {
+    80: { accent: 'warning', tooltip },
+    90: { accent: 'danger', tooltip },
+    default: {},
+  }
+}
+
+export function cpuProgressThresholds(tooltip?: string): ThresholdConfig<ProgressBarThresholdPayload> {
+  return {
+    100: { accent: 'warning', tooltip },
+    300: { accent: 'danger', tooltip },
+    default: {},
+  }
+}
+
+export function useProgressToLegend(
+  rawType: MaybeRefOrGetter<ProgressBarLegendType | undefined>
+): (label: string, progress: Progress | Reactive<Progress>) => ProgressBarLegend | undefined
+
+export function useProgressToLegend(
+  rawType: MaybeRefOrGetter<ProgressBarLegendType | undefined>,
+  label: string,
+  progress: Progress | Reactive<Progress>
+): ComputedRef<ProgressBarLegend | undefined>
+
+export function useProgressToLegend(
+  rawType: MaybeRefOrGetter<ProgressBarLegendType | undefined>,
+  label?: string,
+  progress?: Progress | Reactive<Progress>
+) {
+  const { n } = useI18n()
+
+  const type = computed(() => toValue(rawType))
+
+  function toLegend(label: string, progress: Progress | Reactive<Progress>): ProgressBarLegend | undefined {
+    switch (type.value) {
+      case 'percent':
+        return { label, value: n(toValue(progress.percentage) / 100, { maximumFractionDigits: 1, style: 'percent' }) }
+      case 'bytes':
+        return { label, value: formatSize(toValue(progress.current), 0) }
+      case 'bytes-with-total':
+        return {
+          label,
+          value: `${formatSize(toValue(progress.current), 0)} / ${formatSize(toValue(progress.total), 1)}`,
+        }
+      case 'value':
+        return { label, value: n(toValue(progress.current)) }
+      case 'value-with-total':
+        return { label, value: `${n(toValue(progress.current))} / ${n(toValue(progress.total))}` }
+      default:
+        return undefined
+    }
+  }
+
+  if (label && progress) {
+    return computed(() => toLegend(label, progress))
+  }
+
+  return toLegend
+}

package/lib/utils/size.util.ts

@@ -39,3 +39,9 @@ export const formatSizeParse = (size: number | undefined, unit?: string) => {
 
   return result
 }
+
+export function formatSize(bytes: number, decimals: number): string {
+  const { value, prefix } = formatSizeRaw(bytes, decimals)
+
+  return `${value} ${prefix}`
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xen-orchestra/web-core",
   "type": "module",
-  "version": "0.27.0",
+  "version": "0.29.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>