feat(lite): open console in new window (#6868)

Add a link to open the console in a new window.

@xen-orchestra/lite/src/App.vue

@@ -4,10 +4,10 @@
     <AppLogin />
   </div>
   <div v-else>
-    <AppHeader />
+    <AppHeader v-if="uiStore.hasUi" />
     <div style="display: flex">
-      <AppNavigation />
-      <main class="main">
+      <AppNavigation v-if="uiStore.hasUi" />
+      <main class="main" :class="{ 'no-ui': !uiStore.hasUi }">
         <RouterView />
       </main>
     </div>
@@ -90,5 +90,9 @@ whenever(
   flex: 1;
   height: calc(100vh - 8rem);
   background-color: var(--background-color-secondary);
+
+  &.no-ui {
+    height: 100vh;
+  }
 }
 </style>

@xen-orchestra/lite/src/locales/en.json

@@ -82,6 +82,7 @@
   "not-found": "Not found",
   "object": "Object",
   "object-not-found": "Object {id} can't be found…",
+  "open-in-new-window": "Open in new window",
   "or": "Or",
   "page-not-found": "This page is not to be found…",
   "password": "Password",
@@ -114,7 +115,6 @@
   "settings": "Settings",
   "shutdown": "Shutdown",
   "snapshot": "Snapshot",
-  "selected-vms-in-execution": "Some selected VMs are running",
   "sort-by": "Sort by",
   "stacked-cpu-usage": "Stacked CPU usage",
   "stacked-ram-usage": "Stacked RAM usage",

@xen-orchestra/lite/src/locales/fr.json

@@ -82,6 +82,7 @@
   "not-found": "Non trouvé",
   "object": "Objet",
   "object-not-found": "L'objet {id} est introuvable…",
+  "open-in-new-window": "Ouvrir dans une nouvelle fenêtre",
   "or": "Ou",
   "page-not-found": "Cette page est introuvable…",
   "password": "Mot de passe",
@@ -114,7 +115,6 @@
   "settings": "Paramètres",
   "shutdown": "Arrêter",
   "snapshot": "Instantané",
-  "selected-vms-in-execution": "Certaines VMs sélectionnées sont en cours d'exécution",
   "sort-by": "Trier par",
   "stacked-cpu-usage": "Utilisation CPU empilée",
   "stacked-ram-usage": "Utilisation RAM empilée",

@xen-orchestra/lite/src/stores/ui.store.ts

@@ -1,6 +1,7 @@
 import { useBreakpoints, useColorMode } from "@vueuse/core";
 import { defineStore } from "pinia";
 import { computed, ref } from "vue";
+import { useRoute } from "vue-router";
 
 export const useUiStore = defineStore("ui", () => {
   const currentHostOpaqueRef = ref();
@@ -13,10 +14,14 @@ export const useUiStore = defineStore("ui", () => {
 
   const isMobile = computed(() => !isDesktop.value);
 
+  const route = useRoute();
+  const hasUi = computed(() => route.query.ui !== "0");
+
   return {
     colorMode,
     currentHostOpaqueRef,
     isDesktop,
     isMobile,
+    hasUi,
   };
 });

@xen-orchestra/lite/src/views/vm/VmConsoleView.vue

@@ -1,28 +1,43 @@
 <template>
-  <div class="vm-console-view">
+  <div :class="{ 'no-ui': !uiStore.hasUi }" class="vm-console-view">
     <div v-if="hasError">{{ $t("error-occurred") }}</div>
     <UiSpinner v-else-if="!isReady" class="spinner" />
     <div v-else-if="!isVmRunning" class="not-running">
       <div><img alt="" src="@/assets/monitor.svg" /></div>
       {{ $t("power-on-for-console") }}
     </div>
-    <RemoteConsole
-      v-else-if="vm && vmConsole"
-      :is-console-available="isConsoleAvailable"
-      :location="vmConsole.location"
-      class="remote-console"
-    />
+    <template v-else-if="vm && vmConsole">
+      <RemoteConsole
+        :is-console-available="isConsoleAvailable"
+        :location="vmConsole.location"
+        class="remote-console"
+      />
+      <div class="open-in-new-window">
+        <RouterLink
+          v-if="uiStore.hasUi"
+          :to="{ query: { ui: '0' } }"
+          class="link"
+          target="_blank"
+        >
+          <UiIcon :icon="faArrowUpRightFromSquare" />
+          {{ $t("open-in-new-window") }}
+        </RouterLink>
+      </div>
+    </template>
   </div>
 </template>
 
 <script lang="ts" setup>
 import RemoteConsole from "@/components/RemoteConsole.vue";
+import UiIcon from "@/components/ui/icon/UiIcon.vue";
 import UiSpinner from "@/components/ui/UiSpinner.vue";
 import { isOperationsPending } from "@/libs/utils";
 import { POWER_STATE, VM_OPERATION, type XenApiVm } from "@/libs/xen-api";
 import { useConsoleStore } from "@/stores/console.store";
 import { usePageTitleStore } from "@/stores/page-title.store";
+import { useUiStore } from "@/stores/ui.store";
 import { useVmStore } from "@/stores/vm.store";
+import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
 import { computed } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRoute } from "vue-router";
@@ -40,6 +55,7 @@ const STOP_OPERATIONS = [
 usePageTitleStore().setTitle(useI18n().t("console"));
 
 const route = useRoute();
+const uiStore = useUiStore();
 
 const {
   isReady: isVmReady,
@@ -85,6 +101,10 @@ const isConsoleAvailable = computed(
   align-items: center;
   justify-content: center;
   height: calc(100% - 14.5rem);
+
+  &.no-ui {
+    height: 100%;
+  }
 }
 
 .spinner {
@@ -112,4 +132,30 @@ const isConsoleAvailable = computed(
   color: var(--color-extra-blue-base);
   font-size: 3.6rem;
 }
+
+.open-in-new-window {
+  position: absolute;
+  top: 0;
+  right: 0;
+  overflow: hidden;
+
+  & > .link {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    background-color: var(--color-extra-blue-base);
+    color: var(--color-blue-scale-500);
+    text-decoration: none;
+    padding: 1.5rem;
+    font-size: 1.6rem;
+    border-radius: 0 0 0 0.8rem;
+    white-space: nowrap;
+    transform: translateX(calc(100% - 4.5rem));
+    transition: transform 0.2s ease-in-out;
+
+    &:hover {
+      transform: translateX(0);
+    }
+  }
+}
 </style>

@xen-orchestra/lite/src/views/vm/VmRootView.vue

@@ -1,7 +1,9 @@
 <template>
   <ObjectNotFoundWrapper :is-ready="isReady" :uuid-checker="hasUuid">
-    <VmHeader />
-    <VmTabBar :uuid="vm!.uuid" />
+    <template v-if="uiStore.hasUi">
+      <VmHeader />
+      <VmTabBar :uuid="vm!.uuid" />
+    </template>
     <RouterView />
   </ObjectNotFoundWrapper>
 </template>