feat(xo-6): add console fullscreen action

@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 />
     <template #actions>
-      <VtsActionsConsole />
+      <VtsActionsConsole
+        :open-in-new-tab="openInNewTab"
+        :toggle-full-screen="toggleFullScreen"
+        :is-fullscreen="!uiStore.hasUi"
+      />
       <VtsDivider type="stretch" />
       <VtsClipboardConsole />
     </template>
@@ -17,15 +21,29 @@ 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
 }>()
 
+const router = useRouter()
+const uiStore = useUiStore()
+
 const url = computed(
   () => new URL(`/api/consoles/${props.host.controlDomain}`, window.location.origin.replace(/^http/, 'ws'))
 )
 
 const isHostConsoleAvailable = computed(() => props.host.power_state === 'Running')
+
+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 />
     <template #actions>
-      <VtsActionsConsole />
+      <VtsActionsConsole
+        :open-in-new-tab="openInNewTab"
+        :toggle-full-screen="toggleFullScreen"
+        :is-fullscreen="!uiStore.hasUi"
+      />
       <VtsDivider type="stretch" />
       <VtsClipboardConsole />
     </template>
@@ -17,13 +21,27 @@ 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
 }>()
 
+const router = useRouter()
+const uiStore = useUiStore()
+
 const url = computed(() => new URL(`/api/consoles/${props.vm.id}`, window.location.origin.replace(/^http/, 'ws')))
 
 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>