@xen-orchestra/web-core 0.55.0 → 0.57.0

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

@@ -0,0 +1,99 @@
+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, onScopeDispose, 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 abortCurrent: (() => void) | undefined
+
+  onScopeDispose(() => abortCurrent?.(), true)
+
+  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] ?? {}
+
+    // Reopening while the previous overlay is still open replaces it
+    abortCurrent?.()
+
+    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,
+      })
+
+      function settle(response: ExtractOverlayResponse<TComponent, TEvents, TOpenEvents>) {
+        overlay.status = 'settled'
+        abortCurrent = undefined
+        resolve(response)
+        overlayStore.unregister(overlay)
+      }
+
+      abortCurrent = () => settle({ event: OVERLAY_ABORT_EVENT, payload: 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 }
+}

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

@@ -14,19 +14,19 @@ import {
   computed,
   type ComputedRef,
   type EffectScope,
+  effectScope,
   getCurrentScope,
+  type MaybeRef,
   type MaybeRefOrGetter,
   onScopeDispose,
   reactive,
   type Ref,
   ref,
   shallowRef,
-  triggerRef,
   toRef,
   toValue,
+  triggerRef,
   watch,
-  effectScope,
-  type MaybeRef,
 } from 'vue'
 
 const DEFAULT_CACHE_EXPIRATION_MS = 10_000
@@ -41,7 +41,12 @@ export function defineRemoteResource<
   url: string | ((...args: TArgs) => string)
   initialData: () => TData
   state?: (data: Ref<NoInfer<TData>>, context: ResourceContext<TArgs>) => TState
-  onDataReceived?: (data: Ref<NoInfer<TData>>, receivedData: any) => void
+  onDataReceived?: (
+    data: Ref<NoInfer<TData>>,
+    receivedData: any,
+    calledFrom: 'execute' | 'update',
+    context?: ResourceContext<TArgs>
+  ) => void
   cacheExpirationMs?: number | false
   pollingIntervalMs?: number | false
   stream?: boolean
@@ -50,7 +55,12 @@ export function defineRemoteResource<
 export function defineRemoteResource<TData, TState extends object, TArgs extends any[] = []>(config: {
   url: string | ((...args: TArgs) => string)
   state?: (data: Ref<TData | undefined>, context: ResourceContext<TArgs>) => TState
-  onDataReceived?: (data: Ref<TData | undefined>, receivedData: any) => void
+  onDataReceived?: (
+    data: Ref<TData | undefined>,
+    receivedData: any,
+    calledFrom: 'execute' | 'update',
+    context?: ResourceContext<TArgs>
+  ) => void
   cacheExpirationMs?: number | false
   pollingIntervalMs?: number | false
   stream?: boolean
@@ -64,7 +74,12 @@ export function defineRemoteResource<
   url: string | ((...args: TArgs) => string)
   initialData: () => TData
   state?: (data: Ref<NoInfer<TData>>, context: ResourceContext<TArgs>) => TState
-  onDataReceived?: (data: Ref<NoInfer<TData>>, receivedData: any) => void
+  onDataReceived?: (
+    data: Ref<NoInfer<TData>>,
+    receivedData: any,
+    calledFrom: 'execute' | 'update',
+    context?: ResourceContext<TArgs>
+  ) => void
   onDataRemoved?: (data: Ref<NoInfer<TData>>, receivedData: any) => void
   stream?: boolean
   initWatchCollection: () => {
@@ -86,7 +101,12 @@ export function defineRemoteResource<
   url: string | ((...args: TArgs) => string)
   initialData?: () => TData
   state?: (data: Ref<TData>, context: ResourceContext<TArgs>) => TState
-  onDataReceived?: (data: Ref<NoInfer<TData>>, receivedData: any) => void
+  onDataReceived?: (
+    data: Ref<NoInfer<TData>>,
+    receivedData: any,
+    calledFrom: 'execute' | 'update',
+    context?: ResourceContext<TArgs>
+  ) => void
   onDataRemoved?: (data: Ref<NoInfer<TData>>, receivedData: any) => void
   cacheExpirationMs?: number | false
   pollingIntervalMs?: number | false
@@ -161,33 +181,38 @@ export function defineRemoteResource<
 
   const onDataReceived =
     config.onDataReceived ??
-    ((data: Ref<TData>, receivedData: any, context?: ResourceContext<TArgs>) => {
+    ((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) {
         return
       }
 
-      if (data.value === undefined || (Array.isArray(data.value) && Array.isArray(receivedData))) {
-        data.value = receivedData
-
-        if (watchCollection !== undefined && Array.isArray(data.value)) {
-          handleBuffer(data as Ref<TData[]>)
-          isBufferEventsProcessed = true
+      if (!Array.isArray(data.value)) {
+        if (data.value === undefined) {
+          data.value = receivedData
+        } else {
+          merge(data.value, receivedData)
         }
+
         return
       }
 
-      if (Array.isArray(data.value)) {
-        if (!isBufferEventsProcessed) {
-          bufferedEvents.push(['update', receivedData])
-        } else {
-          removeData(data.value, receivedData)
-          data.value.push(receivedData)
-        }
+      const store = data.value as TData[]
+
+      if (Array.isArray(receivedData)) {
+        data.value = receivedData as TData
+
         return
       }
 
-      merge(data.value, receivedData)
+      if (calledFrom === 'execute') {
+        store.push(receivedData)
+      } else if (!isBufferEventsProcessed) {
+        bufferedEvents.push(['update', receivedData])
+      } else {
+        removeData(store, receivedData)
+        store.push(receivedData)
+      }
     })
 
   const onDataRemoved =
@@ -292,13 +317,23 @@ export function defineRemoteResource<
         }
 
         if (config.stream) {
+          if (Array.isArray(data.value)) {
+            data.value = [] as TData
+          }
+
           for await (const event of readNDJSONStream(response.body)) {
-            onDataReceived(data, event)
-            flushData()
+            onDataReceived(data, event, 'execute', context)
+            void flushData()
+          }
+
+          if (watchCollection !== undefined && Array.isArray(data.value)) {
+            handleBuffer(data as Ref<TData[]>)
+            isBufferEventsProcessed = true
+            void flushData()
           }
         } else {
-          onDataReceived(data, await response.json())
-          flushData()
+          onDataReceived(data, await response.json(), 'execute', context)
+          void flushData()
         }
 
         isReady.value = true
@@ -324,12 +359,12 @@ export function defineRemoteResource<
           handlePost,
           resource,
           onDataReceived: receivedData => {
-            onDataReceived(data, receivedData, context)
-            flushData()
+            onDataReceived(data, receivedData, 'update', context)
+            void flushData()
           },
           onDataRemoved: receivedData => {
             onDataRemoved(data, receivedData, context)
-            flushData()
+            void flushData()
           },
         })
         await execute()

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/packages/tree/types.ts

@@ -24,6 +24,12 @@ export type TreeNode<
   TDiscriminator = any,
 > = Leaf<TData, TDiscriminator> | Branch<TData, TChildNode, TDiscriminator>
 
+export type FlatTreeNode<TNode extends TreeNode = TreeNode> = {
+  id: TreeNodeId
+  node: TNode
+  depth: number
+}
+
 export type BaseTreeNodeOptions<TData extends object, TDiscriminator> = {
   discriminator?: TDiscriminator
   predicate?: (node: TreeNodeBase<TData, TDiscriminator>) => boolean | undefined

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

@@ -1,14 +1,14 @@
 import { buildNodes } from '@core/packages/tree/build-nodes'
 import type {
   DefinitionToTreeNode,
+  FlatTreeNode,
   TreeContext,
   TreeNode,
   TreeNodeDefinition,
   TreeNodeId,
   UseTreeOptions,
 } from '@core/packages/tree/types'
-import { useTimeoutFn } from '@vueuse/core'
-import { computed, type MaybeRefOrGetter, nextTick, reactive, ref, toValue } from 'vue'
+import { computed, type MaybeRefOrGetter, reactive, ref, toValue } from 'vue'
 
 export function useTree<
   TDefinition extends TreeNodeDefinition,
@@ -53,6 +53,32 @@ export function useTree<
 
   const visibleNodes = computed(() => nodes.value.filter(node => !node.isExcluded))
 
+  const flatNodes = computed<FlatTreeNode[]>(() => {
+    const result: FlatTreeNode[] = []
+
+    const flatten = (list: TreeNode[]) => {
+      for (const node of list) {
+        result.push({ id: node.id, node, depth: node.depth })
+        if (node.isBranch && !node.isCollapsed) {
+          flatten(node.children)
+        }
+      }
+    }
+
+    flatten(visibleNodes.value)
+
+    return result
+  })
+
+  const flatNodeIndexById = computed(() => {
+    const index = new Map<TreeNodeId, number>()
+    const list = flatNodes.value
+    for (let i = 0; i < list.length; i++) {
+      index.set(list[i].id, i)
+    }
+    return index
+  })
+
   const getNode = (id: TreeNodeId | undefined) => (id !== undefined ? nodesMap.value.get(id) : undefined)
   const getNodes = (ids: TreeNodeId[]) => ids.map(getNode).filter(node => node !== undefined) as TreeNode[]
 
@@ -80,46 +106,19 @@ export function useTree<
     return undefined
   }
 
-  const scrollToNodeElement = async (id: string | number, options?: ScrollIntoViewOptions) => {
-    const node = findNodeByObjectId(nodes.value, id)
+  const expandToNode = (objectId: string | number): TreeNode | undefined => {
+    const node = findNodeByObjectId(nodes.value, objectId)
     if (!node) {
-      if (id) {
-        useTimeoutFn(async () => {
-          await nextTick()
-          await scrollToNodeElement(id, options)
-        }, 200)
-      }
-      return
+      return undefined
     }
 
-    getHierarchy(node).forEach(node => {
-      if (node.isBranch) {
-        node.toggleCollapse(false)
+    getHierarchy(node).forEach(ancestor => {
+      if (ancestor.isBranch) {
+        ancestor.toggleCollapse(false)
       }
     })
 
-    const nodeElement = document.querySelector<HTMLElement>(`[data-node-id="${id}"]`)
-
-    if (!nodeElement) {
-      useTimeoutFn(async () => {
-        await nextTick()
-        await scrollToNodeElement(id, options)
-      }, 200)
-      return
-    }
-
-    const hasChildren = node.isBranch && node.hasChildren
-    const cfg: ScrollIntoViewOptions = options ?? { block: hasChildren ? 'start' : 'center', behavior: 'smooth' }
-
-    if (hasChildren) {
-      nodeElement.style.scrollMarginTop = '0.8rem'
-
-      useTimeoutFn(async () => {
-        nodeElement.style.scrollMarginTop = ''
-      }, 1000)
-    }
-
-    nodeElement.scrollIntoView(cfg)
+    return node
   }
 
   const selectedNodes = computed(() => getNodes(Array.from(selectedIds.value.values())))
@@ -140,6 +139,8 @@ export function useTree<
 
   return {
     nodes: visibleNodes,
+    flatNodes,
+    flatNodeIndexById,
     activeId,
     activeNode,
     selectedIds,
@@ -148,6 +149,6 @@ export function useTree<
     collapsedIds,
     expandedIds,
     options,
-    scrollToNodeElement,
+    expandToNode,
   }
 }

package/lib/stores/panel.store.ts

@@ -1,12 +1,63 @@
 import { useUiStore } from '@core/stores/ui.store'
+import { useLocalStorage } from '@vueuse/core'
 import { defineStore } from 'pinia'
-import { computed, ref } from 'vue'
+import { computed, watch } from 'vue'
 
 export const usePanelStore = defineStore('panel', () => {
   const uiStore = useUiStore()
-  const isExpanded = ref(false)
-  const open = () => (isExpanded.value = true)
-  const close = () => (isExpanded.value = false)
+  const isExpanded = useLocalStorage('panel.expanded', true)
+  const isLocked = useLocalStorage('panel.locked', true)
 
-  return { open, close, isExpanded: computed(() => !uiStore.isSmall || isExpanded.value) }
+  const cssHorizontalOffset = computed(() => (isExpanded.value ? 0 : '100%'))
+  /* Panel closes automatically when it has no content (true on small UI or when not locked) */
+  const syncsOpenStateWithSelection = computed(() => uiStore.isSmall || !isLocked.value)
+
+  function expand() {
+    isExpanded.value = true
+  }
+
+  function collapse() {
+    isExpanded.value = false
+  }
+
+  function syncWithSelection(hasSelection: boolean) {
+    if (!syncsOpenStateWithSelection.value) {
+      return
+    }
+    if (!hasSelection && isExpanded.value) {
+      collapse()
+    } else if (hasSelection && !isExpanded.value) {
+      expand()
+    }
+  }
+
+  function toggleLock() {
+    const next = !isLocked.value
+    isLocked.value = next
+    if (next && !uiStore.isSmall && !isExpanded.value) {
+      expand()
+    }
+  }
+
+  watch(
+    () => uiStore.isSmall,
+    isSmall => {
+      /* Expand when coming back from small to large UI, if locked and not expanded */
+      if (!isSmall && isLocked.value && !isExpanded.value) {
+        expand()
+      }
+    },
+    { immediate: true }
+  )
+
+  return {
+    isExpanded,
+    isLocked,
+    syncsOpenStateWithSelection,
+    expand,
+    collapse,
+    toggleLock,
+    syncWithSelection,
+    cssHorizontalOffset,
+  }
 })