@xen-orchestra/web-core 0.56.0 → 0.57.0

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

@@ -2,16 +2,26 @@ import { toComputed } from '@core/utils/to-computed.util.ts'
 import type { Progress } from './types.ts'
 import { computed, type MaybeRefOrGetter } from 'vue'
 
-export function useProgress(rawCurrent: MaybeRefOrGetter<number>, rawTotal: MaybeRefOrGetter<number>): Progress {
+export function useProgress(
+  rawCurrent: MaybeRefOrGetter<number>,
+  rawTotal: MaybeRefOrGetter<number>,
+  rawNoRuler: MaybeRefOrGetter<boolean> = false
+): Progress {
   const current = toComputed(rawCurrent)
 
   const total = toComputed(rawTotal)
 
+  const noRuler = toComputed(rawNoRuler)
+
   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}%`)
+  const fillWidth = computed(() => {
+    const max = noRuler.value ? 100 : percentageCap.value
+
+    return `${(Math.min(percentage.value, max) / max) * 100}%`
+  })
 
   return {
     current,

package/lib/packages/sidebar/index.ts

@@ -0,0 +1,2 @@
+export { useLeftSidebarStore, useRightSidebarStore, useSidebar } from '@core/packages/sidebar/sidebar.store.ts'
+export { SIDES, SIDEBAR_DEFAULTS, type SidebarSide, type SidebarState } from '@core/packages/sidebar/types.ts'

package/lib/packages/sidebar/sidebar.store.ts

@@ -0,0 +1,55 @@
+import { SIDEBAR_DEFAULTS, type SidebarSide } from '@core/packages/sidebar/types.ts'
+import { useSidebarResize } from '@core/packages/sidebar/use-sidebar-resize.ts'
+import { useSidebarResponsiveExpand } from '@core/packages/sidebar/use-sidebar-responsive-expand.ts'
+import { useUiStore } from '@core/stores/ui.store.ts'
+import { useLocalStorage, useToggle } from '@vueuse/core'
+import { defineStore } from 'pinia'
+import { computed } from 'vue'
+
+function createSidebar(side: SidebarSide) {
+  const uiStore = useUiStore()
+  const prefix = `sidebar.${side}`
+  const defaults = SIDEBAR_DEFAULTS[side]
+
+  const isExpanded = useLocalStorage(`${prefix}.expanded`, defaults.isExpanded)
+  const isLocked = useLocalStorage(`${prefix}.locked`, defaults.isLocked)
+  const width = useLocalStorage(`${prefix}.width`, defaults.width)
+
+  const toggleExpand = useToggle(isExpanded)
+  const toggleLock = useToggle(isLocked)
+  const { startResize, isResizing } = useSidebarResize(side, width)
+
+  useSidebarResponsiveExpand(isExpanded)
+
+  const cssWidth = computed(() => (uiStore.isSmall ? '100%' : `${width.value}px`))
+
+  const cssLockedOffset = computed(() => (isExpanded.value ? '0' : `-${cssWidth.value}`))
+
+  const cssUnlockedOffset = computed(() => {
+    if (isExpanded.value) {
+      return '0'
+    }
+
+    return side === 'left' ? `-${cssWidth.value}` : cssWidth.value
+  })
+
+  return {
+    isExpanded,
+    isLocked,
+    width,
+    toggleExpand,
+    toggleLock,
+    startResize,
+    isResizing,
+    cssWidth,
+    cssLockedOffset,
+    cssUnlockedOffset,
+  }
+}
+
+export const useLeftSidebarStore = defineStore('sidebar-left', () => createSidebar('left'))
+export const useRightSidebarStore = defineStore('sidebar-right', () => createSidebar('right'))
+
+export function useSidebar(side: SidebarSide = 'left') {
+  return side === 'left' ? useLeftSidebarStore() : useRightSidebarStore()
+}

package/lib/packages/sidebar/types.ts

@@ -0,0 +1,21 @@
+export const SIDES = ['left', 'right'] as const
+
+export type SidebarSide = (typeof SIDES)[number]
+
+export type SidebarState = {
+  isExpanded: boolean
+  isLocked: boolean
+  width: number
+  toggleExpand: (value?: boolean) => boolean
+  toggleLock: (value?: boolean) => boolean
+  startResize: (event: MouseEvent) => void
+  isResizing: boolean
+  cssWidth: string
+  cssLockedOffset: string | number
+  cssUnlockedOffset: string | number
+}
+
+export const SIDEBAR_DEFAULTS = {
+  left: { isExpanded: true, isLocked: true, width: 350 },
+  right: { isExpanded: false, isLocked: false, width: 350 },
+} satisfies Record<SidebarSide, Pick<SidebarState, 'isExpanded' | 'isLocked' | 'width'>>

package/lib/packages/sidebar/use-sidebar-resize.ts

@@ -0,0 +1,47 @@
+import type { SidebarSide } from '@core/packages/sidebar/types.ts'
+import { ifElse } from '@core/utils/if-else.utils.ts'
+import { useRafFn, useStyleTag } from '@vueuse/core'
+import { ref, type Ref } from 'vue'
+
+export function useSidebarResize(side: SidebarSide, width: Ref<number>) {
+  const isResizing = ref(false)
+
+  let initialX: number
+  let initialWidth: number
+  let clientX: number
+
+  function startResize(event: MouseEvent) {
+    clientX = event.clientX
+    initialX = clientX
+    initialWidth = width.value
+    isResizing.value = true
+    document.addEventListener('mousemove', handleMouseMove)
+    document.addEventListener('mouseup', handleMouseUp)
+  }
+
+  function handleMouseMove(event: MouseEvent) {
+    clientX = event.clientX
+  }
+
+  function handleMouseUp() {
+    isResizing.value = false
+    document.removeEventListener('mousemove', handleMouseMove)
+    document.removeEventListener('mouseup', handleMouseUp)
+  }
+
+  const { load, unload } = useStyleTag('body { cursor: col-resize !important; }', { immediate: false })
+
+  const resizeDelta = () => (side === 'left' ? initialWidth + clientX - initialX : initialWidth + initialX - clientX)
+
+  const { pause, resume } = useRafFn(
+    () => (width.value = Math.min(500, window.innerWidth * 0.3, Math.max(200, resizeDelta()))),
+    { immediate: false }
+  )
+
+  ifElse(isResizing, [load, resume], [pause, unload])
+
+  return {
+    startResize,
+    isResizing,
+  }
+}

package/lib/packages/sidebar/use-sidebar-responsive-expand.ts

@@ -0,0 +1,19 @@
+import { useUiStore } from '@core/stores/ui.store.ts'
+import { watch, type Ref } from 'vue'
+
+export function useSidebarResponsiveExpand(isExpanded: Ref<boolean>) {
+  const uiStore = useUiStore()
+
+  let desktopExpanded = isExpanded.value
+
+  watch(
+    () => uiStore.isSmall,
+    (isSmall, wasSmall) => {
+      if (isSmall && !wasSmall) {
+        desktopExpanded = isExpanded.value
+      } else if (!isSmall && wasSmall) {
+        isExpanded.value = desktopExpanded
+      }
+    }
+  )
+}

package/lib/tables/column-definitions/user-name-column.ts

@@ -0,0 +1,10 @@
+import VtsUserNameCell from '@core/components/table/cells/VtsUserNameCell.vue'
+import { defineColumn } from '@core/packages/table/define-column.ts'
+import { renderHeadCell } from '@core/tables/helpers/render-head-cell.ts'
+import type { HeaderConfig } from '@core/tables/types.ts'
+import { h } from 'vue'
+
+export const useUserNameColumn = defineColumn((config?: HeaderConfig) => ({
+  renderHead: () => renderHeadCell(config?.headerLabel),
+  renderBody: (content: string, props?: { href?: string }) => h(VtsUserNameCell, { content, href: props?.href }),
+}))

package/lib/tables/column-sets/server-columns.ts

@@ -1,7 +1,7 @@
 import { defineColumns } from '@core/packages/table/define-columns.ts'
+import { useActionColumn } from '@core/tables/column-definitions/action-column.ts'
 import { useAddressColumn } from '@core/tables/column-definitions/address-column.ts'
 import { useLinkColumn } from '@core/tables/column-definitions/link-column'
-import { useSelectItemColumn } from '@core/tables/column-definitions/select-item-column'
 import { useStatusColumn } from '@core/tables/column-definitions/status-column.ts'
 import { useI18n } from 'vue-i18n'
 
@@ -13,6 +13,6 @@ export const useServerColumns = defineColumns(() => {
     hostIp: useAddressColumn({ headerLabel: () => t('ip-address') }),
     status: useStatusColumn({ headerLabel: () => t('status') }),
     primaryHost: useLinkColumn({ headerLabel: () => t('master') }),
-    selectItem: useSelectItemColumn(),
+    actions: useActionColumn({}),
   }
 })

package/lib/tables/column-sets/user-columns.ts

@@ -0,0 +1,16 @@
+import { defineColumns } from '@core/packages/table/define-columns.ts'
+import { useSelectItemColumn } from '@core/tables/column-definitions/select-item-column.ts'
+import { useTruncatedTextColumn } from '@core/tables/column-definitions/truncated-text-column.ts'
+import { useUserNameColumn } from '@core/tables/column-definitions/user-name-column.ts'
+import { useI18n } from 'vue-i18n'
+
+export const useUserColumns = defineColumns(() => {
+  const { t } = useI18n()
+
+  return {
+    username: useUserNameColumn({ headerLabel: () => t('username') }),
+    email: useTruncatedTextColumn({ headerLabel: () => t('email') }),
+    providers: useTruncatedTextColumn({ headerLabel: () => t('providers') }),
+    selectItem: useSelectItemColumn(),
+  }
+})

package/lib/types/object.type.ts

@@ -1,5 +1,8 @@
-export type ObjectType = 'vm'
+export type ObjectType = 'vm' | 'host'
+
 export type VmActions = 'reboot' | 'shutdown' | 'force-reboot' | 'force-shutdown'
+export type HostActions = 'enable' | 'disable'
+
 export type VmBlockedOperations =
   | 'clean_shutdown'
   | 'hard_shutdown'
@@ -8,3 +11,8 @@ export type VmBlockedOperations =
   | 'hard_reboot'
   | 'suspend'
   | 'destroy'
+
+export type ActionsByObject = {
+  vm: VmActions
+  host: HostActions
+}

package/lib/types/task.type.ts

@@ -1,15 +1,8 @@
+import type { RouteLocationRaw } from 'vue-router'
+
 export type TaskStatus = 'failure' | 'interrupted' | 'pending' | 'success'
 
-export type Task = {
-  id: string
-  infos?: { data: unknown; message: string }[]
-  name?: string
-  progress?: number
-  tag?: string
-  userName?: string
-  start?: number
-  end?: number
-  status: TaskStatus
-  subtasks?: Task[]
-  warnings?: { data: unknown; message: string }[]
+export type TaskObjectSegment = {
+  text: string
+  to?: RouteLocationRaw
 }

package/lib/utils/injection-keys.util.ts

@@ -1,6 +1,6 @@
 import type { InputWrapperController } from '@core/components/input-wrapper/VtsInputWrapper.vue'
 import type { ModalAccent } from '@core/components/ui/modal/UiModal.vue'
-import type { ValueFormatter } from '@core/types/chart'
+import type { ValueFormatter } from '@core/types/chart.ts'
 import type { ComputedRef, InjectionKey, Ref } from 'vue'
 
 export const IK_CHART_VALUE_FORMATTER = Symbol('IK_CHART_VALUE_FORMATTER') as InjectionKey<ComputedRef<ValueFormatter>>
@@ -24,3 +24,5 @@ export const IK_DISABLED = Symbol('IK_DISABLED') as InjectionKey<ComputedRef<boo
 export const IK_INPUT_WRAPPER_CONTROLLER = Symbol('IK_INPUT_WRAPPER_CONTROLLER') as InjectionKey<InputWrapperController>
 
 export const IK_MODAL_ACCENT = Symbol('IK_MODAL_ACCENT') as InjectionKey<ComputedRef<ModalAccent>>
+
+export const IK_OVERLAY_ACCENT = Symbol('IK_OVERLAY_ACCENT') as InjectionKey<ComputedRef<ModalAccent>>

package/lib/utils/ip-address.utils.ts

@@ -16,3 +16,10 @@ export const getUniqueIpAddressesForDevice = (
 
   return [...new Set(getIpAddressesByDevice(addresses)[device])]
 }
+
+export function parseIpList(value: string, separator = ';'): string[] {
+  return value
+    .split(separator)
+    .map(ip => ip.trim())
+    .filter(ip => ip !== '')
+}

package/lib/utils/sr.utils.ts

@@ -32,3 +32,7 @@ export function getSrModalInfoVariant(scope: SrScope, accessMode: SrAccessMode):
 
   return 'pool-shared'
 }
+
+export function shouldShowTargetCount(scope: SrScope, targetCount: number) {
+  return targetCount > (scope.type === SR_SCOPE_TYPE.POOL ? 0 : 1)
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xen-orchestra/web-core",
   "type": "module",
-  "version": "0.56.0",
+  "version": "0.57.0",
   "private": false,
   "exports": {
     "./*": {
@@ -34,6 +34,7 @@
     "ndjson-readablestream": "^1.3.0",
     "placement.js": "^1.0.0-beta.5",
     "simple-icons": "^14.14.0",
+    "vue-component-type-helpers": "~3.3.7",
     "vue-echarts": "^6.6.8",
     "vue-virtual-scroller": "^2.0.0-beta.8"
   },

package/lib/stores/sidebar.store.ts

@@ -1,79 +0,0 @@
-import { useUiStore } from '@core/stores/ui.store'
-import { ifElse } from '@core/utils/if-else.utils'
-import { useLocalStorage, useRafFn, useStyleTag, useToggle } from '@vueuse/core'
-import { defineStore } from 'pinia'
-import { computed, ref, watch } from 'vue'
-
-export const useSidebarStore = defineStore('layout', () => {
-  const uiStore = useUiStore()
-  const isExpanded = useLocalStorage('sidebar.expanded', true)
-  const isLocked = useLocalStorage('sidebar.locked', true)
-  const width = useLocalStorage('sidebar.width', 350)
-  const toggleExpand = useToggle(isExpanded)
-  const toggleLock = useToggle(isLocked)
-  const isResizing = ref(false)
-  let desktopState = false
-
-  let initialX: number
-  let initialWidth: number
-  let clientX: number
-
-  function startResize(event: MouseEvent) {
-    clientX = event.clientX
-    initialX = clientX
-    initialWidth = width.value
-    isResizing.value = true
-    document.addEventListener('mousemove', handleMouseMove)
-    document.addEventListener('mouseup', handleMouseUp)
-  }
-
-  function handleMouseMove(event: MouseEvent) {
-    clientX = event.clientX
-  }
-
-  function handleMouseUp() {
-    isResizing.value = false
-    document.removeEventListener('mousemove', handleMouseMove)
-    document.removeEventListener('mouseup', handleMouseUp)
-  }
-
-  const cssWidth = computed(() => (uiStore.isSmall ? '100%' : `${width.value}px`))
-
-  const cssOffset = computed(() => (isExpanded.value ? 0 : `-${cssWidth.value}`))
-
-  const { load, unload } = useStyleTag('body { cursor: col-resize !important; }', { immediate: false })
-
-  const { pause, resume } = useRafFn(
-    () => (width.value = Math.min(500, Math.max(200, initialWidth + clientX - initialX))),
-    { immediate: false }
-  )
-
-  ifElse(isResizing, [load, resume], [pause, unload])
-
-  watch(
-    () => ({
-      isSmall: uiStore.isSmall,
-      isLarge: uiStore.isLarge,
-    }),
-    ({ isSmall, isLarge }) => {
-      if (isSmall) {
-        desktopState = isExpanded.value
-      } else {
-        isExpanded.value = isLarge ? true : desktopState
-      }
-    },
-    { immediate: true }
-  )
-
-  return {
-    isExpanded,
-    isLocked,
-    width,
-    toggleExpand,
-    toggleLock,
-    startResize,
-    isResizing,
-    cssWidth,
-    cssOffset,
-  }
-})