feat(xo-6): add console fullscreen action

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

@xen-orchestra/web-core/lib/components/console/VtsRemoteConsole.vue

@@ -11,7 +11,7 @@ import { useUiStore } from '@core/stores/ui.store'
 import VncClient from '@novnc/novnc/lib/rfb'
 import { promiseTimeout } from '@vueuse/shared'
 import { fibonacci } from 'iterable-backoff'
-import { onBeforeUnmount, ref, watchEffect } from 'vue'
+import { onBeforeUnmount, ref, watch, watchEffect } from 'vue'
 
 const props = defineProps<{
   url: URL
@@ -86,6 +86,16 @@ async function createVncConnection() {
   vncClient.addEventListener('connect', handleConnectionEvent)
 }
 
+watch(
+  () => uiStore.hasUi,
+  newVal => {
+    if (newVal && vncClient) {
+      if (vncClient.scaleViewport) 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,8 +16,11 @@
       <slot name="app-header" />
     </header>
     <div class="container">
-      <VtsBackdrop v-if="sidebarStore.isExpanded && !sidebarStore.isLocked" @click="sidebarStore.toggleExpand(false)" />
-      <VtsLayoutSidebar class="sidebar">
+      <VtsBackdrop
+        v-if="sidebarStore.isExpanded && !sidebarStore.isLocked && uiStore.hasUi"
+        @click="sidebarStore.toggleExpand(false)"
+      />
+      <VtsLayoutSidebar v-if="uiStore.hasUi" class="sidebar">
         <template #header>
           <slot name="sidebar-header" />
         </template>
@@ -41,8 +44,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/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/host/[id]/console.vue

@@ -3,7 +3,11 @@
   <VtsLayoutConsole v-else>
     <VtsRemoteConsole :url :is-console-available="isHostConsoleAvailable" />
     <template #actions>
-      <VtsActionsConsole />
+      <VtsActionsConsole
+        :open-in-new-tab="openInNewTab"
+        :toggle-full-screen="toggleFullScreen"
+        :is-fullscreen="!uiStore.hasUi"
+      />
       <VtsDivider type="stretch" />
       <VtsClipboardConsole />
     </template>
@@ -18,7 +22,9 @@ import VtsClipboardConsole from '@core/components/console/VtsClipboardConsole.vu
 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 { computed } from 'vue'
+import { useRouter } from 'vue-router'
 
 const props = defineProps<{
   host: XoHost
@@ -28,6 +34,9 @@ const { isHostOperationPending } = useHostStore().subscribe()
 
 const STOP_OPERATIONS = [HOST_OPERATION.SHUTDOWN, HOST_OPERATION.REBOOT]
 
+const router = useRouter()
+const uiStore = useUiStore()
+
 const url = computed(
   () => new URL(`/api/consoles/${props.host.controlDomain}`, window.location.origin.replace(/^http/, 'ws'))
 )
@@ -37,4 +46,13 @@ const isHostConsoleRunning = computed(() => props.host.power_state === 'Running'
 const isHostConsoleAvailable = computed(() =>
   props.host.controlDomain !== undefined ? !isHostOperationPending(props.host!, STOP_OPERATIONS) : false
 )
+
+const openInNewTab = () => {
+  const routeData = router.resolve({ query: { ui: '0' } })
+  window.open(routeData.href, '_blank')
+}
+
+const toggleFullScreen = () => {
+  uiStore.hasUi = !uiStore.hasUi
+}
 </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>

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

@@ -3,7 +3,11 @@
   <VtsLayoutConsole v-else>
     <VtsRemoteConsole :url :is-console-available="isConsoleAvailable" />
     <template #actions>
-      <VtsActionsConsole />
+      <VtsActionsConsole
+        :open-in-new-tab="openInNewTab"
+        :toggle-full-screen="toggleFullScreen"
+        :is-fullscreen="!uiStore.hasUi"
+      />
       <VtsDivider type="stretch" />
       <VtsClipboardConsole />
     </template>
@@ -19,7 +23,9 @@ import VtsClipboardConsole from '@core/components/console/VtsClipboardConsole.vu
 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 { computed } from 'vue'
+import { useRouter } from 'vue-router'
 
 const props = defineProps<{
   vm: XoVm
@@ -37,11 +43,24 @@ const STOP_OPERATIONS = [
   VM_OPERATION.SUSPEND,
 ]
 
+const router = useRouter()
+const uiStore = useUiStore()
+
 const url = computed(() => new URL(`/api/consoles/${props.vm.id}`, window.location.origin.replace(/^http/, 'ws')))
 
 const isVmConsoleRunning = computed(() => props.vm.power_state === 'Running' && props.vm.other.disable_pv_vnc !== '1')
 
 const isConsoleAvailable = computed(() =>
   props.vm !== undefined ? !isVmOperatingPending(props.vm, STOP_OPERATIONS) : false
 )
+const isVmConsoleAvailable = computed(() => props.vm.power_state === 'Running' && props.vm.other.disable_pv_vnc !== '1')
+
+const openInNewTab = () => {
+  const routeData = router.resolve({ query: { ui: '0' } })
+  window.open(routeData.href, '_blank')
+}
+
+const toggleFullScreen = () => {
+  uiStore.hasUi = !uiStore.hasUi
+}
 </script>

CHANGELOG.unreleased.md

@@ -14,7 +14,7 @@
 - **XO 6**:
   - [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]: Add fullscreen functionality for console (PR [#8238](https://github.com/vatesfr/xen-orchestra/pull/8238))
 ### Bug fixes
 
 > Users must be able to say: “I had this issue, happy to know it's fixed”