Merge branch 'master' into fix_vsan_fqdn

vatesfr · Jan 24, 2025 · 901e6f2 · 901e6f2
2 parents 733b26d + 1f4ec8d
commit 901e6f2
Show file tree

Hide file tree

Showing 35 changed files with 407 additions and 151 deletions.
diff --git a/@xen-orchestra/lite/CHANGELOG.md b/@xen-orchestra/lite/CHANGELOG.md
@@ -5,6 +5,7 @@
 - Fix persistent scrollbar on the right (PR [#8191](https://github.com/vatesfr/xen-orchestra/pull/8191))
 - [Console]: Displays a loader when the console is loading (PR [#8226](https://github.com/vatesfr/xen-orchestra/pull/8226))
 - [i18n] Add Spanish translation (contribution made by [@DSJ2](https://github.com/DSJ2)) (PR [#8220](https://github.com/vatesfr/xen-orchestra/pull/8220))
+- [Console]: Adding a border when console is focused (PR [#8235](https://github.com/vatesfr/xen-orchestra/pull/8235))
 
 ## **0.6.0** (2024-11-29)
 

diff --git a/@xen-orchestra/lite/src/components/account-menu/AccountMenu.vue b/@xen-orchestra/lite/src/components/account-menu/AccountMenu.vue
@@ -1,5 +1,5 @@
 <template>
-  <MenuList placement="bottom-end" border>
+  <MenuList placement="bottom-end">
     <template #trigger="{ open, isOpen }">
       <UiAccountMenuButton
         v-tooltip="isOpen ? false : { content: $t('settings'), placement: 'left' }"

diff --git a/@xen-orchestra/lite/src/components/component-story/ComponentStory.vue b/@xen-orchestra/lite/src/components/component-story/ComponentStory.vue
@@ -13,7 +13,7 @@
     </TabItem>
     <TabItem v-bind="tab(TAB.SLOTS, slotParams)">Slots</TabItem>
     <TabItem v-bind="tab(TAB.SETTINGS, settingParams)">Settings</TabItem>
-    <MenuList placement="bottom" border>
+    <MenuList placement="bottom">
       <template #trigger="{ open, isOpen }">
         <TabItem :active="isOpen" :disabled="presets === undefined" class="preset-tab" @click="open">
           <UiIcon :icon="faSliders" />

diff --git a/@xen-orchestra/lite/src/components/vm/VmHeader.vue b/@xen-orchestra/lite/src/components/vm/VmHeader.vue
@@ -2,7 +2,7 @@
   <TitleBar :icon="faDisplay">
     {{ name }}
     <template #actions>
-      <MenuList v-if="vm !== undefined" placement="bottom-end" border>
+      <MenuList v-if="vm !== undefined" placement="bottom-end">
         <template #trigger="{ open, isOpen }">
           <UiButton
             size="medium"
@@ -18,7 +18,7 @@
         </template>
         <VmActionPowerStateItems :vm-refs="[vm.$ref]" />
       </MenuList>
-      <MenuList v-if="vm !== undefined" placement="bottom-end" border>
+      <MenuList v-if="vm !== undefined" placement="bottom-end">
         <template #trigger="{ open, isOpen }">
           <UiButtonIcon
             v-tooltip="{

diff --git a/@xen-orchestra/lite/src/components/vm/VmsActionsBar.vue b/@xen-orchestra/lite/src/components/vm/VmsActionsBar.vue
@@ -2,7 +2,7 @@
   <MenuList
     :disabled="selectedRefs.length === 0"
     :horizontal="!isMobile"
-    :border="isMobile"
+    :no-border="!isMobile"
     class="vms-actions-bar"
     placement="bottom-end"
   >

diff --git a/@xen-orchestra/lite/src/views/host/HostConsoleView.vue b/@xen-orchestra/lite/src/views/host/HostConsoleView.vue
@@ -7,12 +7,7 @@
       <VtsLayoutConsole>
         <VtsRemoteConsole v-if="url" ref="console-element" :url :is-console-available="isConsoleAvailable" />
         <template #actions>
-          <VtsActionsConsole
-            :open-in-new-tab="openInNewTab"
-            :send-ctrl-alt-del="sendCtrlAltDel"
-            :toggle-full-screen="toggleFullScreen"
-            :is-fullscreen="!uiStore.hasUi"
-          />
+          <VtsActionsConsole :send-ctrl-alt-del="sendCtrlAltDel" />
           <VtsDivider type="stretch" />
           <VtsClipboardConsole />
         </template>
@@ -41,13 +36,12 @@ import VtsDivider from '@core/components/divider/VtsDivider.vue'
 import { useUiStore } from '@core/stores/ui.store'
 import { computed, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useRoute, useRouter } from 'vue-router'
+import { useRoute } from 'vue-router'
 
 const STOP_OPERATIONS = [HOST_OPERATION.SHUTDOWN]
 
 usePageTitleStore().setTitle(useI18n().t('console'))
 
-const router = useRouter()
 const route = useRoute()
 const uiStore = useUiStore()
 const xenApiStore = useXenApiStore()
@@ -105,15 +99,6 @@ const isConsoleAvailable = computed(() =>
 const consoleElement = useTemplateRef('console-element')
 
 const sendCtrlAltDel = () => consoleElement.value?.sendCtrlAltDel()
-
-const toggleFullScreen = () => {
-  uiStore.hasUi = !uiStore.hasUi
-}
-
-const openInNewTab = () => {
-  const routeData = router.resolve({ query: { ui: '0' } })
-  window.open(routeData.href, '_blank')
-}
 </script>
 
 <style lang="postcss" scoped>

diff --git a/@xen-orchestra/lite/src/views/vm/VmConsoleView.vue b/@xen-orchestra/lite/src/views/vm/VmConsoleView.vue
@@ -7,12 +7,7 @@
       <VtsLayoutConsole>
         <VtsRemoteConsole v-if="url" ref="console-element" :url :is-console-available="isConsoleAvailable" />
         <template #actions>
-          <VtsActionsConsole
-            :open-in-new-tab="openInNewTab"
-            :send-ctrl-alt-del="sendCtrlAltDel"
-            :toggle-full-screen="toggleFullScreen"
-            :is-fullscreen="!uiStore.hasUi"
-          />
+          <VtsActionsConsole :send-ctrl-alt-del="sendCtrlAltDel" />
           <VtsDivider type="stretch" />
           <VtsClipboardConsole />
         </template>
@@ -38,11 +33,9 @@ import VtsLayoutConsole from '@core/components/console/VtsLayoutConsole.vue'
 import VtsRemoteConsole from '@core/components/console/VtsRemoteConsole.vue'
 import VtsDivider from '@core/components/divider/VtsDivider.vue'
 import { useUiStore } from '@core/stores/ui.store'
-import { useActiveElement, useMagicKeys, whenever } from '@vueuse/core'
-import { logicAnd } from '@vueuse/math'
 import { computed, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useRoute, useRouter } from 'vue-router'
+import { useRoute } from 'vue-router'
 
 const STOP_OPERATIONS = [
   VM_OPERATION.SHUTDOWN,
@@ -56,7 +49,6 @@ const STOP_OPERATIONS = [
 
 usePageTitleStore().setTitle(useI18n().t('console'))
 
-const router = useRouter()
 const route = useRoute()
 const uiStore = useUiStore()
 const xenApiStore = useXenApiStore()
@@ -104,22 +96,6 @@ const isConsoleAvailable = computed(() =>
 const consoleElement = useTemplateRef('console-element')
 
 const sendCtrlAltDel = () => consoleElement.value?.sendCtrlAltDel()
-
-const toggleFullScreen = () => {
-  uiStore.hasUi = !uiStore.hasUi
-}
-
-const openInNewTab = () => {
-  const routeData = router.resolve({ query: { ui: '0' } })
-  window.open(routeData.href, '_blank')
-}
-
-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>

diff --git a/@xen-orchestra/web-core/lib/components/console/VtsActionsConsole.vue b/@xen-orchestra/web-core/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"
@@ -39,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>

diff --git a/@xen-orchestra/web-core/lib/components/console/VtsRemoteConsole.vue b/@xen-orchestra/web-core/lib/components/console/VtsRemoteConsole.vue
@@ -9,6 +9,7 @@
 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, useTemplateRef, watchEffect } from 'vue'
@@ -84,8 +85,32 @@ 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 || !props.isConsoleAvailable) {
     return
@@ -124,6 +149,12 @@ defineExpose({
   /* 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>
diff --git a/@xen-orchestra/web-core/lib/components/menu/MenuItem.vue b/@xen-orchestra/web-core/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 />

diff --git a/@xen-orchestra/web-core/lib/components/menu/MenuList.vue b/@xen-orchestra/web-core/lib/components/menu/MenuList.vue
@@ -2,7 +2,13 @@
 <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>
@@ -21,7 +27,7 @@ defineOptions({
 
 const props = defineProps<{
   horizontal?: boolean
-  border?: boolean
+  noBorder?: boolean
   disabled?: boolean
   placement?: Options['placement']
 }>()

diff --git a/@xen-orchestra/web-core/lib/components/table/ColumnTitle.vue b/@xen-orchestra/web-core/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 }"

diff --git a/@xen-orchestra/web-core/lib/composables/route-query/types.ts b/@xen-orchestra/web-core/lib/composables/route-query/types.ts
@@ -28,8 +28,9 @@ export type BooleanActions = { toggle: (value?: boolean) => void }
 
 export type Actions = SetActions<any> & MapActions<any, any> & ArrayActions<any> & BooleanActions
 
-export type GuessActions<TData> =
-  TData extends Set<infer TValue>
+export type GuessActions<TData> = TData extends string | number
+  ? EmptyObject
+  : TData extends Set<infer TValue>
     ? SetActions<TValue>
     : TData extends (infer TValue)[]
       ? ArrayActions<TValue>

diff --git a/@xen-orchestra/web-core/lib/layouts/CoreLayout.vue b/@xen-orchestra/web-core/lib/layouts/CoreLayout.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="core-layout">
-    <header class="header">
+    <header v-if="uiStore.hasUi" class="header">
       <slot name="app-logo" />
       <UiButtonIcon
         v-tooltip="{
@@ -16,18 +16,23 @@
       <slot name="app-header" />
     </header>
     <div class="container">
-      <VtsBackdrop v-if="sidebarStore.isExpanded && !sidebarStore.isLocked" @click="sidebarStore.toggleExpand(false)" />
-      <VtsLayoutSidebar class="sidebar">
-        <template #header>
-          <slot name="sidebar-header" />
-        </template>
-        <template #default>
-          <slot name="sidebar-content" />
-        </template>
-        <template #footer>
-          <slot name="sidebar-footer" />
-        </template>
-      </VtsLayoutSidebar>
+      <template v-if="uiStore.hasUi">
+        <VtsBackdrop
+          v-if="sidebarStore.isExpanded && !sidebarStore.isLocked"
+          @click="sidebarStore.toggleExpand(false)"
+        />
+        <VtsLayoutSidebar class="sidebar">
+          <template #header>
+            <slot name="sidebar-header" />
+          </template>
+          <template #default>
+            <slot name="sidebar-content" />
+          </template>
+          <template #footer>
+            <slot name="sidebar-footer" />
+          </template>
+        </VtsLayoutSidebar>
+      </template>
       <main class="main-container">
         <slot name="content" />
       </main>
@@ -41,8 +46,10 @@ import VtsLayoutSidebar from '@core/components/layout/VtsLayoutSidebar.vue'
 import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import { useSidebarStore } from '@core/stores/sidebar.store'
+import { useUiStore } from '@core/stores/ui.store'
 import { faAngleDoubleLeft, faBars } from '@fortawesome/free-solid-svg-icons'
 
+const uiStore = useUiStore()
 const sidebarStore = useSidebarStore()
 </script>
 

diff --git a/@xen-orchestra/web-core/package.json b/@xen-orchestra/web-core/package.json
@@ -19,6 +19,7 @@
     "@novnc/novnc": "^1.4.0",
     "@types/d3-time-format": "^4.0.3",
     "@vueuse/core": "^10.7.1",
+    "@vueuse/math": "^10.7.1",
     "@vueuse/shared": "^10.7.1",
     "d3-time-format": "^4.1.0",
     "echarts": "^5.4.3",