@xen-orchestra/web-core 0.10.0 → 0.11.0

package/lib/components/charts/LinearChart.md

@@ -0,0 +1,33 @@
+# LinearChart component
+
+```vue
+<template>
+  <LinearChart :data="data" :value-formatter="customValueFormatter" />
+</template>
+
+<script lang="ts" setup>
+import type { LinearChartData } from '@/types/chart'
+import LinearChart from '@/components/charts/LinearChart.vue'
+
+const data: LinearChartData = [
+  {
+    label: 'First series',
+    data: [
+      { timestamp: 1670478371123, value: 1234 },
+      { timestamp: 1670478519751, value: 1234 },
+    ],
+  },
+  {
+    label: 'Second series',
+    data: [
+      { timestamp: 1670478519751, value: 1234 },
+      { timestamp: 167047555000, value: 1234 },
+    ],
+  },
+]
+
+const customValueFormatter = (value: number) => {
+  return `${value} (Doubled: ${value * 2})`
+}
+</script>
+```

package/lib/components/charts/LinearChart.vue

@@ -0,0 +1,77 @@
+<template>
+  <VueCharts :option autoresize class="chart" />
+</template>
+
+<script lang="ts" setup>
+import type { LinearChartData, ValueFormatter } from '@core/types/chart'
+import { IK_CHART_VALUE_FORMATTER } from '@core/utils/injection-keys.util'
+import { utcFormat } from 'd3-time-format'
+import type { EChartsOption } from 'echarts'
+import { LineChart } from 'echarts/charts'
+import { GridComponent, LegendComponent, TooltipComponent } from 'echarts/components'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { computed, provide } from 'vue'
+import VueCharts from 'vue-echarts'
+
+const props = defineProps<{
+  data: LinearChartData
+  valueFormatter?: ValueFormatter
+  maxValue?: number
+}>()
+
+const Y_AXIS_MAX_VALUE = 200
+
+const valueFormatter = computed<ValueFormatter>(() => {
+  const formatter = props.valueFormatter
+
+  return value => {
+    if (formatter === undefined) {
+      return value.toString()
+    }
+
+    return formatter(value)
+  }
+})
+
+provide(IK_CHART_VALUE_FORMATTER, valueFormatter)
+
+use([CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
+
+const option = computed<EChartsOption>(() => ({
+  legend: {
+    data: props.data.map(series => series.label),
+  },
+  tooltip: {
+    valueFormatter: v => valueFormatter.value(v as number),
+  },
+  xAxis: {
+    type: 'time',
+    axisLabel: {
+      formatter: (timestamp: number) => utcFormat('%a\n%I:%M\n%p')(new Date(timestamp)),
+      showMaxLabel: false,
+      showMinLabel: false,
+    },
+  },
+  yAxis: {
+    type: 'value',
+    axisLabel: {
+      formatter: valueFormatter.value,
+    },
+    max: props.maxValue ?? Y_AXIS_MAX_VALUE,
+  },
+  series: props.data.map((series, index) => ({
+    type: 'line',
+    name: series.label,
+    zlevel: index + 1,
+    data: series.data.map(item => [item.timestamp, item.value]),
+  })),
+}))
+</script>
+
+<style lang="postcss" scoped>
+.chart {
+  width: 100%;
+  height: 30rem;
+}
+</style>

package/lib/components/connection-status/VtsConnectionStatus.vue

@@ -9,7 +9,11 @@ import UiInfo, { type InfoAccent } from '@core/components/ui/info/UiInfo.vue'
 import { computed, type ComputedRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-type ConnectionStatus = 'connected' | 'disconnected' | 'partially-connected' | 'disconnected-from-physical-device'
+export type ConnectionStatus =
+  | 'connected'
+  | 'disconnected'
+  | 'partially-connected'
+  | 'disconnected-from-physical-device'
 type ConnectionStatusesMap = Record<ConnectionStatus, { text: string; accent: InfoAccent }>
 
 const { status } = defineProps<{

package/lib/components/console/VtsActionsConsole.vue

@@ -1,9 +1,7 @@
 <template>
   <UiCardTitle>{{ $t('console-actions') }}</UiCardTitle>
   <UiButton
-    v-tooltip="toggleFullScreen === undefined ? $t('coming-soon') : undefined"
     class="button"
-    :disabled="toggleFullScreen === undefined"
     accent="info"
     variant="tertiary"
     size="medium"
@@ -13,9 +11,7 @@
     {{ $t(isFullscreen ? 'exit-fullscreen' : 'fullscreen') }}
   </UiButton>
   <UiButton
-    v-tooltip="openInNewTab === undefined ? $t('coming-soon') : undefined"
     class="button"
-    :disabled="openInNewTab === undefined"
     accent="info"
     variant="tertiary"
     size="medium"
@@ -25,12 +21,10 @@
     {{ $t('open-console-in-new-tab') }}
   </UiButton>
   <UiButton
-    v-tooltip="sendCtrlAltDel === undefined ? $t('coming-soon') : undefined"
     class="button"
     accent="info"
     variant="tertiary"
     size="medium"
-    :disabled="sendCtrlAltDel === undefined"
     :left-icon="faKeyboard"
     @click="sendCtrlAltDel"
   >
@@ -41,21 +35,41 @@
 <script lang="ts" setup>
 import UiButton from '@core/components/ui/button/UiButton.vue'
 import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
-import { vTooltip } from '@core/directives/tooltip.directive'
+import { useUiStore } from '@core/stores/ui.store'
 import {
   faArrowUpRightFromSquare,
   faDownLeftAndUpRightToCenter,
   faKeyboard,
   faUpRightAndDownLeftFromCenter,
 } from '@fortawesome/free-solid-svg-icons'
+import { useActiveElement, useMagicKeys, whenever } from '@vueuse/core'
+import { logicAnd } from '@vueuse/math'
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
 
-// temporary undefined for xo6
 defineProps<{
-  openInNewTab?: () => void
-  toggleFullScreen?: () => void
-  sendCtrlAltDel?: () => void
-  isFullscreen?: boolean
+  sendCtrlAltDel: () => void
 }>()
+
+const router = useRouter()
+const uiStore = useUiStore()
+
+const isFullscreen = computed(() => !uiStore.hasUi)
+
+const openInNewTab = () => {
+  const routeData = router.resolve({ query: { ui: '0' } })
+  window.open(routeData.href, '_blank')
+}
+
+const toggleFullScreen = () => {
+  uiStore.hasUi = !uiStore.hasUi
+}
+const { escape } = useMagicKeys()
+const activeElement = useActiveElement()
+const canClose = computed(
+  () => (activeElement.value == null || activeElement.value.tagName !== 'CANVAS') && !uiStore.hasUi
+)
+whenever(logicAnd(escape, canClose), toggleFullScreen)
 </script>
 
 <style lang="postcss" scoped>

package/lib/components/console/VtsRemoteConsole.vue

@@ -1,51 +1,61 @@
 <template>
   <div :class="uiStore.isMobile ? 'mobile' : undefined" class="vts-remote-console">
-    <div ref="consoleContainer" class="console" />
+    <VtsLoadingHero :disabled="isReady" type="panel" />
+    <div ref="console-container" class="console" />
   </div>
 </template>
 
 <script lang="ts" setup>
+import VtsLoadingHero from '@core/components/state-hero/VtsLoadingHero.vue'
 import { useUiStore } from '@core/stores/ui.store'
 import VncClient from '@novnc/novnc/lib/rfb'
+import { whenever } from '@vueuse/core'
 import { promiseTimeout } from '@vueuse/shared'
 import { fibonacci } from 'iterable-backoff'
-import { onBeforeUnmount, ref, watchEffect } from 'vue'
+import { onBeforeUnmount, ref, useTemplateRef, watchEffect } from 'vue'
 
 const props = defineProps<{
   url: URL
+  isConsoleAvailable: boolean
 }>()
 
+const uiStore = useUiStore()
+
 const N_TOTAL_TRIES = 8
 const FIBONACCI_MS_ARRAY: number[] = Array.from(fibonacci().toMs().take(N_TOTAL_TRIES))
 
-const consoleContainer = ref<HTMLDivElement | null>(null)
+const consoleContainer = useTemplateRef<HTMLDivElement | null>('console-container')
+const isReady = ref(false)
 
 let vncClient: VncClient | undefined
 let nConnectionAttempts = 0
 
 function handleDisconnectionEvent() {
   clearVncClient()
+  if (props.isConsoleAvailable) {
+    nConnectionAttempts++
 
-  nConnectionAttempts++
+    if (nConnectionAttempts > N_TOTAL_TRIES) {
+      console.error('The number of reconnection attempts has been exceeded for:', props.url)
+      return
+    }
 
-  if (nConnectionAttempts > N_TOTAL_TRIES) {
-    console.error('The number of reconnection attempts has been exceeded for:', props.url)
-    return
+    console.error(
+      `Connection lost for the remote console: ${props.url}. New attempt in ${
+        FIBONACCI_MS_ARRAY[nConnectionAttempts - 1]
+      }ms`
+    )
+    createVncConnection()
   }
-
-  console.error(
-    `Connection lost for the remote console: ${props.url}. New attempt in ${
-      FIBONACCI_MS_ARRAY[nConnectionAttempts - 1]
-    }ms`
-  )
-  createVncConnection()
 }
 
 function handleConnectionEvent() {
   nConnectionAttempts = 0
+  isReady.value = true
 }
 
 function clearVncClient() {
+  isReady.value = false
   if (vncClient === undefined) {
     return
   }
@@ -75,10 +85,34 @@ async function createVncConnection() {
 
   vncClient.addEventListener('disconnect', handleDisconnectionEvent)
   vncClient.addEventListener('connect', handleConnectionEvent)
+  const canvas = consoleContainer.value?.querySelector('canvas') as HTMLCanvasElement | null
+  if (canvas !== null) {
+    // Todo: See with Clémence to specify the desired focus behavior
+    canvas.setAttribute('tabindex', '0')
+    canvas.addEventListener('focus', () => {
+      canvas.classList.add('focused')
+    })
+
+    canvas.addEventListener('blur', () => {
+      canvas.classList.remove('focused')
+    })
+  }
 }
 
+whenever(
+  () => uiStore.hasUi,
+  () => {
+    if (!vncClient) {
+      return
+    }
+    // the state is changed from false to true for xo-lite to trigger the change
+    vncClient.scaleViewport = false
+    vncClient.scaleViewport = true
+  }
+)
+
 watchEffect(() => {
-  if (consoleContainer.value === null) {
+  if (consoleContainer.value === null || !props.isConsoleAvailable) {
     return
   }
 
@@ -92,7 +126,9 @@ onBeforeUnmount(() => {
   clearVncClient()
 })
 
-const uiStore = useUiStore()
+defineExpose({
+  sendCtrlAltDel: () => vncClient?.sendCtrlAltDel(),
+})
 </script>
 
 <style lang="postcss" scoped>
@@ -113,6 +149,12 @@ const uiStore = useUiStore()
   /* Required because the library adds "margin: auto" to the canvas which makes the canvas centered in space and not aligned to the rest of the layout */
   :deep(canvas) {
     margin: 0 auto !important;
+    cursor: default !important;
+    border: 6px solid transparent;
+
+    &.focused {
+      border: var(--color-success-txt-base) 6px solid;
+    }
   }
 }
 </style>

package/lib/components/data-table/VtsDataTable.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="table-container">
+    <VtsLoadingHero :disabled="isReady" type="table">
+      <VtsTable vertical-border>
+        <thead>
+          <slot name="thead" />
+        </thead>
+        <tbody>
+          <slot name="tbody" />
+        </tbody>
+      </VtsTable>
+    </VtsLoadingHero>
+    <VtsErrorNoDataHero v-if="isReady && hasError" type="table" />
+    <VtsStateHero v-if="isReady && noDataMessage" type="table" image="no-data" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import VtsErrorNoDataHero from '@core/components/state-hero/VtsErrorNoDataHero.vue'
+import VtsLoadingHero from '@core/components/state-hero/VtsLoadingHero.vue'
+import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
+import VtsTable from '@core/components/table/VtsTable.vue'
+
+defineProps<{
+  isReady?: boolean
+  hasError?: boolean
+  noDataMessage?: string
+}>()
+
+defineSlots<{
+  thead(): any
+  tbody(): any
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.table-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+
+  :deep(tbody) tr {
+    &:hover {
+      cursor: pointer;
+      background-color: var(--color-info-background-hover);
+    }
+    &:active {
+      background-color: var(--color-info-background-active);
+    }
+    &.selected {
+      background-color: var(--color-info-background-selected);
+    }
+    &:last-child {
+      border-bottom: 0.1rem solid var(--color-neutral-border);
+    }
+  }
+}
+</style>

package/lib/components/menu/MenuItem.vue

@@ -11,7 +11,7 @@
     >
       <slot />
     </MenuTrigger>
-    <MenuList v-else :disabled="isDisabled" border>
+    <MenuList v-else :disabled="isDisabled">
       <template #trigger="{ open, isOpen }">
         <MenuTrigger :active="isOpen" :busy="isBusy" :disabled="isDisabled" :icon @click="open">
           <slot />
@@ -27,28 +27,24 @@
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import MenuList from '@core/components/menu/MenuList.vue'
 import MenuTrigger from '@core/components/menu/MenuTrigger.vue'
-import { useContext } from '@core/composables/context.composable'
-import { DisabledContext } from '@core/context'
+import { useDisabled } from '@core/composables/disabled.composable'
 import { IK_CLOSE_MENU, IK_MENU_HORIZONTAL } from '@core/utils/injection-keys.util'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { faAngleDown, faAngleRight } from '@fortawesome/free-solid-svg-icons'
 import { computed, inject, ref } from 'vue'
 
-const props = withDefaults(
-  defineProps<{
-    icon?: IconDefinition
-    onClick?: () => any
-    disabled?: boolean
-    busy?: boolean
-  }>(),
-  { disabled: undefined }
-)
+const props = defineProps<{
+  icon?: IconDefinition
+  onClick?: () => any
+  disabled?: boolean
+  busy?: boolean
+}>()
 
 const isParentHorizontal = inject(
   IK_MENU_HORIZONTAL,
   computed(() => false)
 )
-const isDisabled = useContext(DisabledContext, () => props.disabled)
+const isDisabled = useDisabled(() => props.disabled)
 
 const submenuIcon = computed(() => (isParentHorizontal.value ? faAngleDown : faAngleRight))
 

package/lib/components/menu/MenuList.vue

@@ -2,15 +2,20 @@
 <template>
   <slot :is-open="isOpen" :open="open" name="trigger" />
   <Teleport :disabled="!shouldTeleport" to="body">
-    <ul v-if="!hasTrigger || isOpen" ref="menu" :class="{ horizontal, border }" class="menu-list" v-bind="$attrs">
+    <ul
+      v-if="!hasTrigger || isOpen"
+      ref="menu"
+      :class="{ horizontal, border: !noBorder }"
+      class="menu-list"
+      v-bind="$attrs"
+    >
       <slot />
     </ul>
   </Teleport>
 </template>
 
 <script lang="ts" setup>
-import { useContext } from '@core/composables/context.composable'
-import { DisabledContext } from '@core/context'
+import { useDisabled } from '@core/composables/disabled.composable'
 import { IK_CLOSE_MENU, IK_MENU_HORIZONTAL, IK_MENU_TELEPORTED } from '@core/utils/injection-keys.util'
 import { onClickOutside, unrefElement, whenever } from '@vueuse/core'
 import placementJs, { type Options } from 'placement.js'
@@ -20,15 +25,12 @@ defineOptions({
   inheritAttrs: false,
 })
 
-const props = withDefaults(
-  defineProps<{
-    horizontal?: boolean
-    border?: boolean
-    disabled?: boolean
-    placement?: Options['placement']
-  }>(),
-  { disabled: undefined }
-)
+const props = defineProps<{
+  horizontal?: boolean
+  noBorder?: boolean
+  disabled?: boolean
+  placement?: Options['placement']
+}>()
 
 const slots = useSlots()
 const isOpen = ref(false)
@@ -42,7 +44,7 @@ provide(
   computed(() => props.horizontal ?? false)
 )
 
-useContext(DisabledContext, () => props.disabled)
+useDisabled(() => props.disabled)
 
 let clearClickOutsideEvent: (() => void) | undefined
 

package/lib/components/tab/TabItem.vue

@@ -6,8 +6,7 @@
 </template>
 
 <script lang="ts" setup>
-import { useContext } from '@core/composables/context.composable'
-import { DisabledContext } from '@core/context'
+import { useDisabled } from '@core/composables/disabled.composable'
 import { useUiStore } from '@core/stores/ui.store'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
@@ -18,12 +17,12 @@ const props = withDefaults(
     active?: boolean
     tag?: string
   }>(),
-  { tag: 'span', disabled: undefined }
+  { tag: 'span' }
 )
 
 const { isMobile } = storeToRefs(useUiStore())
 
-const isDisabled = useContext(DisabledContext, () => props.disabled)
+const isDisabled = useDisabled(() => props.disabled)
 
 const classNames = computed(() => {
   return [

package/lib/components/tab/TabList.vue

@@ -6,17 +6,13 @@
 </template>
 
 <script lang="ts" setup>
-import { useContext } from '@core/composables/context.composable'
-import { DisabledContext } from '@core/context'
+import { useDisabled } from '@core/composables/disabled.composable'
 
-const props = withDefaults(
-  defineProps<{
-    disabled?: boolean
-  }>(),
-  { disabled: undefined }
-)
+const props = defineProps<{
+  disabled?: boolean
+}>()
 
-useContext(DisabledContext, () => props.disabled)
+useDisabled(() => props.disabled)
 </script>
 
 <style lang="postcss" scoped>

package/lib/components/table/ColumnTitle.vue

@@ -1,6 +1,6 @@
 <!-- v1.0 -->
 <template>
-  <MenuList :disabled placement="bottom-start" border>
+  <MenuList :disabled placement="bottom-start">
     <template #trigger="{ open, isOpen }">
       <th
         :class="{ interactive, disabled, focus: isOpen }"

package/lib/components/ui/account-menu-button/UiAccountMenuButton.vue

@@ -7,15 +7,14 @@
 
 <script lang="ts" setup>
 import UiUserLogo from '@core/components/ui/user-logo/UiUserLogo.vue'
-import { useContext } from '@core/composables/context.composable'
-import { DisabledContext } from '@core/context'
+import { useDisabled } from '@core/composables/disabled.composable'
 
 defineProps<{
   size: 'small' | 'medium'
   selected?: boolean
 }>()
 
-const isDisabled = useContext(DisabledContext)
+const isDisabled = useDisabled()
 </script>
 
 <style lang="postcss" scoped>

package/lib/components/ui/button/UiButton.vue

@@ -9,8 +9,7 @@
 
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
-import { useContext } from '@core/composables/context.composable'
-import { DisabledContext } from '@core/context'
+import { useDisabled } from '@core/composables/disabled.composable'
 import { toVariants } from '@core/utils/to-variants.util'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { faLock } from '@fortawesome/free-solid-svg-icons'
@@ -20,26 +19,21 @@ type ButtonVariant = 'primary' | 'secondary' | 'tertiary'
 type ButtonAccent = 'info' | 'success' | 'warning' | 'danger'
 type ButtonSize = 'small' | 'medium' | 'large'
 
-const props = withDefaults(
-  defineProps<{
-    variant: ButtonVariant
-    accent: ButtonAccent
-    size: ButtonSize
-    busy?: boolean
-    disabled?: boolean
-    lockIcon?: boolean
-    leftIcon?: IconDefinition
-  }>(),
-  {
-    disabled: undefined,
-  }
-)
+const props = defineProps<{
+  variant: ButtonVariant
+  accent: ButtonAccent
+  size: ButtonSize
+  busy?: boolean
+  disabled?: boolean
+  lockIcon?: boolean
+  leftIcon?: IconDefinition
+}>()
 
 defineSlots<{
   default(): any
 }>()
 
-const isDisabled = useContext(DisabledContext, () => props.disabled)
+const isDisabled = useDisabled(() => props.disabled)
 
 const fontClasses = {
   small: 'typo p3-medium',