@xen-orchestra/web-core 0.28.0 → 0.29.0

package/lib/components/progress-bar/VtsProgressBar.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="vts-progress-bar">
+    <UiDataRuler :max="percentageCap" :warning="threshold.payload" />
+    <UiProgressBar :accent="threshold.payload.accent ?? 'info'" :fill-width :legend />
+  </div>
+</template>
+
+<script generic="TSource" lang="ts" setup>
+import UiDataRuler from '@core/components/ui/data-ruler/UiDataRuler.vue'
+import UiProgressBar, { type ProgressBarAccent } from '@core/components/ui/progress-bar/UiProgressBar.vue'
+import { useProgress } from '@core/packages/progress/use-progress.ts'
+import type { ThresholdConfig } from '@core/packages/threshold/type.ts'
+import { useThreshold } from '@core/packages/threshold/use-threshold.ts'
+import { defaultProgressThresholds, useProgressToLegend } from '@core/utils/progress.util.ts'
+
+export type ProgressBarLegendType = 'percent' | 'bytes' | 'bytes-with-total' | 'value' | 'value-with-total'
+
+export type ProgressBarThresholdPayload = { accent?: ProgressBarAccent; tooltip?: string }
+
+export type ProgressBarThresholdConfig = ThresholdConfig<ProgressBarThresholdPayload>
+
+const {
+  current,
+  total,
+  label,
+  thresholds = defaultProgressThresholds(),
+  legendType,
+} = defineProps<{
+  current: number
+  total: number
+  label: string
+  legendType?: ProgressBarLegendType
+  thresholds?: ProgressBarThresholdConfig
+}>()
+
+const progress = useProgress(
+  () => current,
+  () => total
+)
+
+const { percentageCap, percentage, fillWidth } = progress
+
+const legend = useProgressToLegend(() => legendType, label, progress)
+
+const threshold = useThreshold(percentage, () => thresholds)
+</script>
+
+<style lang="postcss" scoped>
+.vts-progress-bar {
+  display: flex;
+  flex-direction: column;
+  gap: 1.6rem;
+}
+</style>

package/lib/components/progress-bar-group/VtsProgressBarGroup.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="vts-progress-bar-group">
+    <UiDataRuler :max="highestPercentageCap" :warning="threshold.payload" />
+    <UiProgressBar
+      v-for="item of progressItems"
+      :key="item.source.id"
+      :accent="item.threshold.payload?.accent ?? 'info'"
+      :fill-width="item.fillWidth"
+      :legend="toLegend(item.source.label, item)"
+    />
+  </div>
+</template>
+
+<script generic="TSource" lang="ts" setup>
+import type {
+  ProgressBarLegendType,
+  ProgressBarThresholdConfig,
+} from '@core/components/progress-bar/VtsProgressBar.vue'
+import UiDataRuler from '@core/components/ui/data-ruler/UiDataRuler.vue'
+import UiProgressBar from '@core/components/ui/progress-bar/UiProgressBar.vue'
+import { useProgressGroup } from '@core/packages/progress/use-progress-group.ts'
+import { useThreshold } from '@core/packages/threshold/use-threshold.ts'
+import { defaultProgressThresholds, useProgressToLegend } from '@core/utils/progress.util.ts'
+import { computed } from 'vue'
+
+export type ProgressBarGroupItem = { id: string; current: number; total: number; label: string }
+
+const {
+  items,
+  thresholds = defaultProgressThresholds(),
+  sort = 'desc',
+  legendType,
+  nItems,
+} = defineProps<{
+  items: ProgressBarGroupItem[]
+  legendType?: ProgressBarLegendType
+  thresholds?: ProgressBarThresholdConfig
+  sort?: 'asc' | 'desc' | 'none'
+  nItems?: number
+}>()
+
+const {
+  highestPercentageCap,
+  progressItems: rawProgressItems,
+  highestPercentage,
+} = useProgressGroup(() => items, {
+  sort: () => (sort === 'none' ? undefined : sort),
+})
+
+const progressItems = computed(() => {
+  const items = rawProgressItems.value.map(item => {
+    return {
+      ...item,
+      threshold: useThreshold(item.percentage, thresholds).value,
+    }
+  })
+
+  if (nItems) {
+    return items.slice(0, nItems)
+  }
+
+  return items
+})
+
+const toLegend = useProgressToLegend(() => legendType)
+
+const threshold = useThreshold(highestPercentage, () => thresholds)
+</script>
+
+<style lang="postcss" scoped>
+.vts-progress-bar-group {
+  display: flex;
+  flex-direction: column;
+  gap: 1.6rem;
+}
+</style>

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

@@ -1,24 +1,72 @@
 <!-- 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>
+    <span>{{ n(0, 'percent') }}</span>
+    <span>{{ n(max / 200, 'percent') }}</span>
+    <span class="max">
+      <VtsIcon
+        v-if="warning?.accent || warning?.tooltip"
+        v-tooltip="warning.tooltip ?? false"
+        :class="warning.accent ?? 'warning'"
+        class="icon"
+        name="fa:exclamation-circle"
+        size="small"
+      />
+      {{ n(max / 100, 'percent') }}</span
+    >
   </div>
 </template>
 
 <script lang="ts" setup>
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import { vTooltip } from '@core/directives/tooltip.directive.ts'
 import { useI18n } from 'vue-i18n'
 
-const { t } = useI18n()
+const { max = 100 } = defineProps<{
+  max?: number
+  warning?: {
+    accent?: 'info' | 'warning' | 'danger'
+    tooltip?: string
+  }
+}>()
+
+const { n } = useI18n()
 </script>
 
 <style lang="postcss" scoped>
 .ui-data-ruler {
-  display: flex;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
   align-items: center;
-  justify-content: space-between;
   gap: 1rem;
   color: var(--color-neutral-txt-secondary);
+
+  .icon {
+    &.warning {
+      color: var(--color-warning-item-base);
+    }
+
+    &.danger {
+      color: var(--color-danger-item-base);
+    }
+  }
+
+  .max {
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+  }
+
+  & > span:first-child {
+    justify-self: start;
+  }
+
+  & > span:nth-child(2) {
+    justify-self: center;
+  }
+
+  & > span:last-child {
+    justify-self: end;
+  }
 }
 </style>

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

@@ -1,19 +1,12 @@
 <!-- v2 -->
 <template>
-  <div class="ui-progress-bar" :class="className">
+  <div :class="className" class="ui-progress-bar">
     <div class="progress-bar">
-      <div class="fill" :style="{ width: `${fillWidth}%` }" />
+      <div :style="{ width: fillWidth }" class="fill" />
     </div>
-    <div v-if="shouldShowSteps" class="steps typo-body-regular-small">
-      <span>{{ n(0, 'percent') }}</span>
-      <span v-for="step in steps" :key="step">{{ n(step, 'percent') }}</span>
-    </div>
-    <VtsLegendList class="legend">
-      <UiLegend v-if="displayMode === 'percent'" :accent :value="Math.round(percentage)" unit="%">
-        {{ legend }}
-      </UiLegend>
-      <UiLegend v-else :accent :value="legendValue">
-        {{ legend }}
+    <VtsLegendList v-if="legend" class="legend">
+      <UiLegend :accent :value="legend.value">
+        {{ legend.label }}
       </UiLegend>
     </VtsLegendList>
   </div>
@@ -22,61 +15,20 @@
 <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'
-
-interface Props {
-  legend: string
-  value: 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)
+export type ProgressBarAccent = 'info' | 'warning' | 'danger'
 
-const max = computed(() => _max ?? 100)
+export type ProgressBarLegend = { label: string; value?: string | number }
 
-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)
-const steps = useMax(1, () => Math.floor(maxPercentage.value / 100))
-
-const accent = computed(() => {
-  if (percentage.value >= 90) {
-    return 'danger'
-  }
+const { accent, legend } = defineProps<{
+  accent: ProgressBarAccent
+  fillWidth: string
+  legend?: ProgressBarLegend
+}>()
 
-  if (percentage.value >= 80) {
-    return 'warning'
-  }
-
-  return 'info'
-})
-
-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}`
-})
+const className = computed(() => toVariants({ accent }))
 </script>
 
 <style lang="postcss" scoped>
@@ -87,30 +39,22 @@ const legendValue = computed(() => {
 
   .progress-bar {
     width: 100%;
-    height: 1.2rem;
     border-radius: 0.4rem;
     overflow: hidden;
     background-color: var(--color-neutral-background-disabled);
 
     .fill {
       width: 0;
-      height: 100%;
+      height: 1.2rem;
       transition: width 0.25s ease-in-out;
     }
   }
 
-  .steps {
-    color: var(--color-neutral-txt-secondary);
-    display: flex;
-    justify-content: space-between;
-  }
-
   .legend {
     margin-inline-start: auto;
   }
 
   /* ACCENT */
-
   &.accent--info {
     .fill {
       background-color: var(--color-info-item-base);

package/lib/locales/en.json

@@ -260,6 +260,7 @@
   "hyper-threading": "Hyper threading (SMT)",
   "id": "ID",
   "in-last-three-jobs": "In their last three jobs",
+  "in-progress": "In progress",
   "install-settings": "Install settings",
   "interfaces": "Interface | Interface | Interfaces",
   "interrupted": "Interrupted",

package/lib/locales/fr.json

@@ -260,6 +260,7 @@
   "hyper-threading": "Hyper-threading (SMT)",
   "id": "ID",
   "in-last-three-jobs": "Dans leurs trois derniers jobs",
+  "in-progress": "En cours",
   "install-settings": "Paramètres d'installation",
   "interfaces": "Interface | Interface | Interfaces",
   "interrupted": "Interrompu",

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

@@ -37,7 +37,7 @@ export function useProgressGroup<TSource>(
   )
 
   const highestPercentageCap = computed(() =>
-    progressItems.value.reduce((highestCap, item) => Math.max(highestCap, item.percentageCap.value), 0)
+    progressItems.value.reduce((highestCap, item) => Math.max(highestCap, item.percentageCap.value), 100)
   )
 
   const normalizedProgressItems = useArrayMap(progressItems, item => {

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.28.0",
+  "version": "0.29.0",
   "private": false,
   "exports": {
     "./*": {