feat(xo-6): add console fullscreen action

@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>

@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>

@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>

@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'
@@ -98,6 +99,18 @@ async function createVncConnection() {
   }
 }
 
+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

@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>
 

@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",

@xen-orchestra/web/src/pages/host/[id].vue

@@ -2,7 +2,7 @@
   <VtsLoadingHero v-if="!isReady" type="page" />
   <VtsObjectNotFoundHero v-else-if="!host" :id="route.params.id" type="page" />
   <RouterView v-else v-slot="{ Component }">
-    <HostHeader :host />
+    <HostHeader v-if="uiStore.hasUi" :host />
     <component :is="Component" :host />
   </RouterView>
 </template>
@@ -13,12 +13,14 @@ import { useHostStore } from '@/stores/xo-rest-api/host.store'
 import type { XoHost } from '@/types/xo/host.type'
 import VtsLoadingHero from '@core/components/state-hero/VtsLoadingHero.vue'
 import VtsObjectNotFoundHero from '@core/components/state-hero/VtsObjectNotFoundHero.vue'
+import { useUiStore } from '@core/stores/ui.store'
 import { computed } from 'vue'
 import { useRoute } from 'vue-router/auto'
 
 const route = useRoute<'/host/[id]'>()
 
 const { isReady, get } = useHostStore().subscribe()
+const uiStore = useUiStore()
 
 const host = computed(() => get(route.params.id as XoHost['id']))
 </script>

@xen-orchestra/web/src/pages/vm/[id].vue

@@ -2,7 +2,7 @@
   <VtsLoadingHero v-if="!isReady" type="page" />
   <VtsObjectNotFoundHero v-else-if="!vm" :id="route.params.id" type="page" />
   <RouterView v-else v-slot="{ Component }">
-    <VmHeader :vm />
+    <VmHeader v-if="uiStore.hasUi" :vm />
     <component :is="Component" :vm />
   </RouterView>
 </template>
@@ -13,12 +13,14 @@ import { useVmStore } from '@/stores/xo-rest-api/vm.store'
 import type { XoVm } from '@/types/xo/vm.type'
 import VtsLoadingHero from '@core/components/state-hero/VtsLoadingHero.vue'
 import VtsObjectNotFoundHero from '@core/components/state-hero/VtsObjectNotFoundHero.vue'
+import { useUiStore } from '@core/stores/ui.store'
 import { computed } from 'vue'
 import { useRoute } from 'vue-router/auto'
 
 const route = useRoute<'/vm/[id]'>()
 
 const { isReady, get: getVm } = useVmStore().subscribe()
+const uiStore = useUiStore()
 
 const vm = computed(() => getVm(route.params.id as XoVm['id']))
 </script>

CHANGELOG.unreleased.md

@@ -17,6 +17,7 @@
   - [Console]: Add Ctrl+Alt+Del functionality to console (PR [#8239](https://github.com/vatesfr/xen-orchestra/pull/8239))
   - [UI]: Use user language set in XO 5 to set the language in XO 6 (PR [#8232](https://github.com/vatesfr/xen-orchestra/pull/8232))
   - [Console]: Adding a border when console is focused (PR [#8235](https://github.com/vatesfr/xen-orchestra/pull/8235))
+  - [Console]: Add fullscreen functionality for console (PR [#8238](https://github.com/vatesfr/xen-orchestra/pull/8238))
 - [Backup] New [ChaCha20-Poly1305](https://en.wikipedia.org/wiki/ChaCha20-Poly1305) encryption for remotes, allow encrypted files larger than 64GB (PR [#8237](https://github.com/vatesfr/xen-orchestra/pull/8237))
 
 ### Bug fixes