@xen-orchestra/web-core 0.56.0 → 0.58.0

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

@@ -0,0 +1,114 @@
+import { createEventHandler } from '@core/packages/overlay/create-event-handler.ts'
+import { OVERLAY_ABORT_EVENT } from '@core/packages/overlay/symbols.ts'
+import type {
+  ExtractOverlayResponse,
+  ForbidExtraEvents,
+  MaybeOptionalArgs,
+  MaybeOptionalKey,
+  OpenEvents,
+  Overlay,
+  OverlayEventHandler,
+  OverlayEvents,
+  Prettify,
+} from '@core/packages/overlay/types.ts'
+import { useOverlayStore } from '@core/packages/overlay/use-overlay-store.ts'
+import { reactiveComputed } from '@vueuse/core'
+import { defineAsyncComponent, markRaw, nextTick, reactive, type AsyncComponentLoader, type Component } from 'vue'
+import type { ComponentProps } from 'vue-component-type-helpers'
+
+export function useOverlay<TComponent extends Component, const TEvents extends OverlayEvents<TComponent>>({
+  component: componentLoader,
+  events,
+}: {
+  component: AsyncComponentLoader<TComponent>
+  events: TEvents & NoInfer<ForbidExtraEvents<TComponent, TEvents>>
+}) {
+  const overlayStore = useOverlayStore()
+
+  const key = Symbol('new-overlay')
+
+  const component = defineAsyncComponent(componentLoader)
+
+  let currentOverlay: Overlay | undefined
+
+  function abort() {
+    currentOverlay?.abort()
+  }
+
+  function open<TOpenEvents extends OpenEvents<TComponent, TEvents>>(
+    ...args: MaybeOptionalArgs<
+      Prettify<
+        { events?: TOpenEvents & NoInfer<ForbidExtraEvents<TComponent, TOpenEvents>> } & MaybeOptionalKey<
+          'props',
+          ComponentProps<TComponent>
+        >
+      >
+    >
+  ) {
+    const { events: openEvents, props } = args[0] ?? {}
+
+    abort()
+
+    return new Promise<ExtractOverlayResponse<TComponent, TEvents, TOpenEvents>>(resolve => {
+      const definitionEvents = events as Record<string, true | OverlayEventHandler>
+      const perOpenEvents = (openEvents ?? {}) as Record<string, OverlayEventHandler>
+
+      // A new object per `open()` call, so that a pending async handler of a
+      // replaced overlay cannot interfere with the one currently displayed
+      const overlay = reactive<Overlay>({
+        key,
+        component: markRaw(component),
+        props: {},
+        status: 'idle',
+        lastTrigger: undefined,
+        abort: () => settle({ event: OVERLAY_ABORT_EVENT, payload: undefined }),
+      })
+
+      currentOverlay = overlay
+
+      async function settle(response: ExtractOverlayResponse<TComponent, TEvents, TOpenEvents>) {
+        if (overlay.status === 'settled') {
+          return
+        }
+
+        overlay.status = 'settled'
+
+        // The `leave` transition freezes the DOM in its last painted state,
+        // so paint a non-busy frame before removing the overlay
+        await nextTick()
+
+        resolve(response)
+
+        overlayStore.unregister(overlay)
+
+        if (currentOverlay === overlay) {
+          currentOverlay = undefined
+        }
+      }
+
+      const handleEvent = createEventHandler({
+        overlay,
+        definitionEvents,
+        openEvents: perOpenEvents,
+        settle: response => settle(response as ExtractOverlayResponse<TComponent, TEvents, TOpenEvents>),
+      })
+
+      // Merge all props + events. If an event is provided in both, the `events`
+      // handler runs first, then the `openEvents` one, if needed.
+      const eventProps: Record<string, OverlayEventHandler> = {}
+
+      const eventNames = new Set([...Object.keys(definitionEvents), ...Object.keys(perOpenEvents)])
+
+      eventNames.forEach(eventName => {
+        eventProps[eventName] = (...emitArgs: unknown[]) => handleEvent(eventName, emitArgs)
+      })
+
+      // `reactiveComputed` keeps the merged props live when a reactive `props` object is passed
+      overlay.props = reactiveComputed(() => ({ ...(props as Record<string, unknown> | undefined), ...eventProps }))
+
+      overlayStore.register(overlay)
+    })
+  }
+
+  return { open, abort }
+}

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/remote-resource/define-remote-resource.ts

@@ -46,7 +46,7 @@ export function defineRemoteResource<
     receivedData: any,
     calledFrom: 'execute' | 'update',
     context?: ResourceContext<TArgs>
-  ) => void
+  ) => Promise<void>
   cacheExpirationMs?: number | false
   pollingIntervalMs?: number | false
   stream?: boolean
@@ -60,7 +60,7 @@ export function defineRemoteResource<TData, TState extends object, TArgs extends
     receivedData: any,
     calledFrom: 'execute' | 'update',
     context?: ResourceContext<TArgs>
-  ) => void
+  ) => Promise<void>
   cacheExpirationMs?: number | false
   pollingIntervalMs?: number | false
   stream?: boolean
@@ -79,8 +79,8 @@ export function defineRemoteResource<
     receivedData: any,
     calledFrom: 'execute' | 'update',
     context?: ResourceContext<TArgs>
-  ) => void
-  onDataRemoved?: (data: Ref<NoInfer<TData>>, receivedData: any) => void
+  ) => Promise<void>
+  onDataRemoved?: (data: Ref<NoInfer<TData>>, receivedData: any) => Promise<void>
   stream?: boolean
   initWatchCollection: () => {
     collectionId: string
@@ -89,7 +89,7 @@ export function defineRemoteResource<
     handleDelete: THandleDelete
     handlePost: THandlePost
     handleWatching: THandleWatching
-    predicate?: (receivedData: TData, context: ResourceContext<TArgs> | undefined) => boolean
+    predicate?: (receivedData: TData, context: ResourceContext<TArgs> | undefined) => Promise<boolean> | boolean
   }
 }): UseRemoteResource<TState, TArgs>
 
@@ -106,8 +106,8 @@ export function defineRemoteResource<
     receivedData: any,
     calledFrom: 'execute' | 'update',
     context?: ResourceContext<TArgs>
-  ) => void
-  onDataRemoved?: (data: Ref<NoInfer<TData>>, receivedData: any) => void
+  ) => Promise<void>
+  onDataRemoved?: (data: Ref<NoInfer<TData>>, receivedData: any) => Promise<void>
   cacheExpirationMs?: number | false
   pollingIntervalMs?: number | false
   stream?: boolean
@@ -118,15 +118,18 @@ export function defineRemoteResource<
     handleDelete: THandleDelete
     handlePost: THandlePost
     handleWatching: THandleWatching
-    predicate?: (receivedData: TData, context: ResourceContext<TArgs> | undefined) => boolean
+    predicate?: (receivedData: TData, context: ResourceContext<TArgs> | undefined) => Promise<boolean> | boolean
   }
 }) {
   const cache = new Map<
     string,
     {
       count: number
+      evictionTimeout?: NodeJS.Timeout // TODO : Fixme , the actual type in browser is number, but NodeJS.Timeout in nodejs.
+      // Due to transitive types of vates/types, the type is NodeJS.Timeout.
       pause: VoidFunction
       resume: VoidFunction
+      isPaused: boolean
       state: object
       stateScope: EffectScope
       isReady: Ref<boolean>
@@ -181,9 +184,14 @@ export function defineRemoteResource<
 
   const onDataReceived =
     config.onDataReceived ??
-    ((data: Ref<TData>, receivedData: any, calledFrom: 'execute' | 'update', context?: ResourceContext<TArgs>) => {
+    (async (
+      data: Ref<TData>,
+      receivedData: any,
+      calledFrom: 'execute' | 'update',
+      context?: ResourceContext<TArgs>
+    ) => {
       // allow to ignore some update (like for sub collection. E.g. vms/:id/vdis)
-      if (watchCollection?.predicate?.(receivedData, context) === false) {
+      if ((await watchCollection?.predicate?.(receivedData, context)) === false) {
         return
       }
 
@@ -217,9 +225,9 @@ export function defineRemoteResource<
 
   const onDataRemoved =
     config.onDataRemoved ??
-    ((data: Ref<TData>, receivedData: any, context?: ResourceContext<TArgs>) => {
+    (async (data: Ref<TData>, receivedData: any, context?: ResourceContext<TArgs>) => {
       // allow to ignore some update (like for sub collection. E.g. vms/:id/vdis)
-      if (watchCollection?.predicate?.(receivedData, context) === false) {
+      if ((await watchCollection?.predicate?.(receivedData, context)) === false) {
         return
       }
 
@@ -246,7 +254,12 @@ export function defineRemoteResource<
     entry.count += 1
 
     if (entry.count === 1) {
-      entry.resume()
+      clearTimeout(entry.evictionTimeout)
+      entry.evictionTimeout = undefined
+      if (entry.isPaused) {
+        entry.resume()
+        entry.isPaused = false
+      }
     }
   }
 
@@ -263,13 +276,21 @@ export function defineRemoteResource<
       return
     }
 
-    entry.pause()
+    function cleanUp() {
+      if (entry === undefined) {
+        return
+      }
+
+      entry.pause()
+      entry.isPaused = true
+      entry.stateScope.stop()
+      cache.delete(url)
+    }
 
     if (cacheExpiration !== false) {
-      setTimeout(() => {
-        cache.get(url)?.stateScope.stop()
-        cache.delete(url)
-      }, cacheExpiration)
+      entry.evictionTimeout = setTimeout(cleanUp, cacheExpiration)
+    } else {
+      cleanUp()
     }
   }
 
@@ -285,6 +306,8 @@ export function defineRemoteResource<
     const lastError = ref<Error>()
 
     const hasError = computed(() => lastError.value !== undefined)
+    const stateScope = effectScope(true)
+    const sharedContext = { ...context, scope: stateScope }
 
     const data = shallowRef(buildData()) as Ref<TData>
     // trigger reactivity on data when no more updates since 100ms or after 500ms
@@ -322,7 +345,7 @@ export function defineRemoteResource<
           }
 
           for await (const event of readNDJSONStream(response.body)) {
-            onDataReceived(data, event, 'execute', context)
+            await onDataReceived(data, event, 'execute', sharedContext)
             void flushData()
           }
 
@@ -332,7 +355,7 @@ export function defineRemoteResource<
             void flushData()
           }
         } else {
-          onDataReceived(data, await response.json(), 'execute', context)
+          await onDataReceived(data, await response.json(), 'execute', sharedContext)
           void flushData()
         }
 
@@ -358,12 +381,12 @@ export function defineRemoteResource<
           handleWatching,
           handlePost,
           resource,
-          onDataReceived: receivedData => {
-            onDataReceived(data, receivedData, 'update', context)
+          onDataReceived: async receivedData => {
+            await onDataReceived(data, receivedData, 'update', sharedContext)
             void flushData()
           },
-          onDataRemoved: receivedData => {
-            onDataRemoved(data, receivedData, context)
+          onDataRemoved: async receivedData => {
+            await onDataRemoved(data, receivedData, sharedContext)
             void flushData()
           },
         })
@@ -379,13 +402,13 @@ export function defineRemoteResource<
       resume = timeoutPoll.resume
     }
 
-    const stateScope = effectScope(true)
-    const state = stateScope.run(() => buildState(data, context))!
+    const state = stateScope.run(() => buildState(data, sharedContext))!
 
     cache.set(url, {
       count: 0,
       pause,
       resume,
+      isPaused: true,
       state,
       stateScope,
       isReady,
@@ -423,6 +446,12 @@ export function defineRemoteResource<
       throw new Error('No effect scope found. Please provide a scope or use this function within a Vue component.')
     }
 
+    if (!scope.active) {
+      throw new Error(
+        'useRemoteResource() was called with an inactive effect scope. This usually means a stale scope/context, (e.g. captured from an unmounted component) is being reused'
+      )
+    }
+
     const isEnabled = toRef(optionsOrParentContext?.isEnabled ?? true)
 
     return scope.run(() => {

package/lib/packages/remote-resource/sse.store.ts

@@ -2,7 +2,7 @@ import { useNow } from '@vueuse/core'
 import { defineStore } from 'pinia'
 import { computed, ref, watch as watchVue } from 'vue'
 
-type EventFn = (object: unknown) => void
+type EventFn = (object: unknown) => Promise<void>
 export type THandlePost = (sseId: string) => Promise<string>
 export type THandleDelete = (sseId: string, subscriptionId: string) => Promise<void>
 export type THandleWatching = (
@@ -13,9 +13,9 @@ export type THandleWatching = (
         configs: Record<
           string,
           {
-            add: (object: unknown) => void
-            update: (object: unknown) => void
-            remove: (object: unknown) => void
+            add: EventFn
+            update: EventFn
+            remove: EventFn
           }
         >
       }

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.58.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"
   },