@xen-orchestra/web-core 0.55.0 → 0.57.0

package/lib/tables/column-definitions/action-column.ts

@@ -4,18 +4,30 @@ import { defineColumn } from '@core/packages/table/define-column'
 import type { ButtonIconConfig } from '@core/tables/column-definitions/button-icon-column.ts'
 import { renderHeadCell } from '@core/tables/helpers/render-head-cell'
 import type { HeaderConfig } from '@core/tables/types.ts'
-import { h, toValue } from 'vue'
+import { type Component, h, toValue } from 'vue'
 
 export type { ActionItem }
 
 export const useActionColumn = defineColumn((config: HeaderConfig & Partial<ButtonIconConfig>) => ({
   renderHead: () => renderHeadCell(config.headerLabel),
-  renderBody: (params: { onClick: () => void; actions?: ActionItem[] }) =>
-    h(VtsActionCell, {
-      buttonIcon: toValue(config.buttonIcon ?? 'fa:eye'),
-      buttonAccent: toValue(config.buttonAccent),
-      buttonSize: toValue(config.buttonSize),
-      actions: params.actions,
-      onClick: params.onClick,
-    }),
+  renderBody: (params: {
+    onClick: () => void
+    actions?: ActionItem[]
+    component?: Component
+    props?: Record<string, unknown>
+  }) => {
+    const { component, props } = params
+
+    return h(
+      VtsActionCell,
+      {
+        buttonIcon: toValue(config.buttonIcon ?? 'fa:eye'),
+        buttonAccent: toValue(config.buttonAccent),
+        buttonSize: toValue(config.buttonSize),
+        actions: params.actions,
+        onClick: params.onClick,
+      },
+      component ? () => h(component, props) : undefined
+    )
+  },
 }))

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/tables/column-sets/vm-columns.ts

@@ -1,14 +1,13 @@
 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 { useNumberColumn } from '@core/tables/column-definitions/number-column.ts'
-import { useSelectItemColumn } from '@core/tables/column-definitions/select-item-column'
 import { useTagColumn } from '@core/tables/column-definitions/tag-column.ts'
 import { useI18n } from 'vue-i18n'
 
 export const useVmColumns = defineColumns(() => {
   const { t } = useI18n()
-
   return {
     vm: useLinkColumn({ headerLabel: () => t('vm') }),
     ipAddresses: useAddressColumn({ headerLabel: () => t('ip-addresses') }),
@@ -16,6 +15,6 @@ export const useVmColumns = defineColumns(() => {
     ram: useNumberColumn({ headerLabel: () => t('ram') }),
     diskSpace: useNumberColumn({ headerLabel: () => t('disk-space') }),
     tags: useTagColumn({ headerLabel: () => t('tags') }),
-    selectItem: useSelectItemColumn(),
+    actions: useActionColumn({}),
   }
 })

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/state-hero.type.ts

@@ -0,0 +1,19 @@
+export const STATE_HERO_TYPES = [
+  'busy',
+  'no-result',
+  'under-construction',
+  'no-data',
+  'no-selection',
+  'error',
+  'not-found',
+  'offline',
+  'all-good',
+  'all-done',
+  'creating',
+] as const
+
+export type StateHeroType = (typeof STATE_HERO_TYPES)[number]
+
+export type StateHeroFormat = 'page' | 'card' | 'panel' | 'table'
+
+export type StateHeroSize = 'extra-small' | 'small' | 'medium' | 'large'

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/types/vue-virtual-scroller.d.ts

@@ -48,10 +48,16 @@ declare module 'vue-virtual-scroller' {
     after(): unknown
   }
 
+  interface ScrollToOptions {
+    smooth?: boolean
+    align?: 'start' | 'center' | 'end' | 'nearest'
+    offset?: number
+  }
+
   export interface RecycleScrollerInstance {
     getScroll(): { start: number; end: number }
-    scrollToItem(index: number): void
-    scrollToPosition(position: number): void
+    scrollToItem(index: number, options?: ScrollToOptions): void
+    scrollToPosition(position: number, options?: ScrollToOptions): void
   }
 
   export const RecycleScroller: <T>(

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>>
@@ -11,7 +11,7 @@ export const IK_TREE_ITEM_TOGGLE = Symbol('IK_TREE_ITEM_TOGGLE') as InjectionKey
 
 export const IK_TREE_ITEM_EXPANDED = Symbol('IK_TREE_ITEM_EXPANDED') as InjectionKey<Ref<boolean>>
 
-export const IK_TREE_LIST_DEPTH = Symbol('IK_TREE_LIST_DEPTH') as InjectionKey<number>
+export const IK_TREE_LIST_DEPTH = Symbol('IK_TREE_LIST_DEPTH') as InjectionKey<Ref<number>>
 
 export const IK_MENU_HORIZONTAL = Symbol('IK_MENU_HORIZONTAL') as InjectionKey<ComputedRef<boolean>>
 
@@ -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.55.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,
-  }
-})