feat(web-stack): implement actions and clipboard for VM console

Author: MathieuRA

@xen-orchestra/lite/src/components/RemoteConsole.vue

@@ -111,6 +111,8 @@ defineExpose({
 <style lang="postcss" scoped>
 .vm-console {
   height: 80rem;
+  flex: 1;
+  max-width: 100%;
 
   & > :deep(div) {
     background-color: transparent !important;

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

@@ -94,7 +94,6 @@
   "following-hosts-unreachable": "Die folgenden Hosts sind nicht erreichbar",
   "force-reboot": "Neustart erzwingen",
   "force-shutdown": "Herunterfahren erzwingen",
-  "fullscreen": "Vollbild",
   "fullscreen-leave": "Vollbild schließen",
   "gateway": "Gateway",
   "n-gb-left": "{n} GB frei",
@@ -137,7 +136,6 @@
   "object": "Objekt",
   "ok": "OK",
   "on-object": "auf {object}",
-  "open-console-in-new-tab": "Konsole in neuem Reiter öffnen",
   "or": "Oder",
   "page-not-found": "Diese Seite wurde nicht gefunden…",
   "password": "Passwort",
@@ -167,7 +165,6 @@
   "select-compression": "Kompression auswählen",
   "select-destination-host": "Zielhost auswählen",
   "selected-vms-in-execution": "Einige der ausgewählten VMs sind eingeschaltet",
-  "send-ctrl-alt-del": "Ctrl+Alt+Del senden",
   "send-us-feedback": "Gib uns Feedback",
 
   "select.network": "Ein Netzwerk auswählen",

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

@@ -96,7 +96,6 @@
   "following-hosts-unreachable": "The following hosts are unreachable",
   "force-reboot": "Force reboot",
   "force-shutdown": "Force shutdown",
-  "fullscreen": "Fullscreen",
   "fullscreen-leave": "Leave fullscreen",
   "gateway": "Gateway",
   "n-gb-left": "{n} GB left",
@@ -139,7 +138,6 @@
   "object": "Object",
   "ok": "OK",
   "on-object": "on {object}",
-  "open-console-in-new-tab": "Open console in new tab",
   "or": "Or",
   "page-not-found": "This page is not to be found…",
   "password": "Password",
@@ -169,7 +167,6 @@
   "select-compression": "Select a compression",
   "select-destination-host": "Select a destination host",
   "selected-vms-in-execution": "Some selected VMs are running",
-  "send-ctrl-alt-del": "Send Ctrl+Alt+Del",
   "send-us-feedback": "Send us feedback",
 
   "select.network": "Select a network",

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

@@ -95,7 +95,6 @@
   "following-hosts-unreachable": "میزبان های زیر در دسترس نیستند",
   "force-reboot": "راه اندازی مجدد اجباری",
   "force-shutdown": "خاموش کردن اجباری",
-  "fullscreen": "تمام صفحه",
   "fullscreen-leave": "خروج از حالت تمام صفحه",
   "gateway": "دروازه",
   "n-gb-left": "{n} GB باقی مانده است",
@@ -137,7 +136,6 @@
   "object-not-found": "شیء {id} پیدا نمی شود…",
   "ok": "اوکی",
   "on-object": "در {object}",
-  "open-console-in-new-tab": "باز کردن کنسول در برگه جدید",
   "or": "یا",
   "page-not-found": "این صفحه پیدا نمی شود…",
   "password": "کلمه عبور",
@@ -167,7 +165,6 @@
   "select-compression": "یک فشرده سازی انتخاب کنید",
   "select-destination-host": "یک میزبان مقصد انتخاب کنید",
   "selected-vms-in-execution": "برخی از ماشین های مجازی انتخاب شده در حال اجرا هستند",
-  "send-ctrl-alt-del": "ارسال کلیدهای Ctrl+Alt+Del",
   "send-us-feedback": "برای ما بازخورد ارسال کنید",
 
   "select.network": "یک شبکه انتخاب کنید",

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

@@ -96,7 +96,6 @@
   "following-hosts-unreachable": "Les hôtes suivants sont inaccessibles",
   "force-reboot": "Forcer le redémarrage",
   "force-shutdown": "Forcer l'arrêt",
-  "fullscreen": "Plein écran",
   "fullscreen-leave": "Quitter plein écran",
   "gateway": "Passerelle",
   "n-gb-left": "{n} Go libres",
@@ -139,7 +138,6 @@
   "object": "Objet",
   "ok": "OK",
   "on-object": "sur {object}",
-  "open-console-in-new-tab": "Ouvrir la console dans un nouvel onglet",
   "or": "Ou",
   "page-not-found": "Cette page est introuvable…",
   "password": "Mot de passe",
@@ -169,7 +167,6 @@
   "select-compression": "Sélectionnez une compression",
   "select-destination-host": "Sélectionnez un hôte de destination",
   "selected-vms-in-execution": "Certaines VMs sélectionnées sont en cours d'exécution",
-  "send-ctrl-alt-del": "Envoyer Ctrl+Alt+Suppr",
   "send-us-feedback": "Envoyez-nous vos commentaires",
 
   "select.network": "Sélectionner un réseau",

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

@@ -4,26 +4,30 @@
     <UiSpinner v-else-if="!isReady" class="spinner" />
     <UiStatusPanel v-else-if="!isVmRunning" :image-source="monitor" :title="$t('power-on-vm-for-console')" />
     <template v-else-if="vm && vmConsole">
-      <MenuList horizontal>
-        <MenuItem v-if="uiStore.hasUi" :icon="faArrowUpRightFromSquare" @click="openInNewTab">
-          {{ $t('open-console-in-new-tab') }}
-        </MenuItem>
-        <MenuItem
-          :icon="uiStore.hasUi ? faUpRightAndDownLeftFromCenter : faDownLeftAndUpRightToCenter"
-          @click="toggleFullScreen"
-        >
-          {{ $t(uiStore.hasUi ? 'fullscreen' : 'fullscreen-leave') }}
-        </MenuItem>
-        <MenuItem :disabled="!consoleElement" :icon="faKeyboard" @click="sendCtrlAltDel">
-          {{ $t('send-ctrl-alt-del') }}
-        </MenuItem>
-      </MenuList>
       <RemoteConsole
+        v-if="!uiStore.hasUi"
         ref="consoleElement"
         :is-console-available="isConsoleAvailable"
         :location="vmConsole.location"
         class="remote-console"
       />
+      <VtsLayoutConsole v-else>
+        <RemoteConsole
+          ref="consoleElement"
+          :is-console-available="isConsoleAvailable"
+          :location="vmConsole.location"
+          class="remote-console"
+        />
+        <template #actions>
+          <VtsActionsConsole
+            :open-in-new-tab="openInNewTab"
+            :send-ctrl-alt-del="sendCtrlAltDel"
+            :toggle-full-screen="toggleFullScreen"
+          />
+          <VtsDivider type="stretch" />
+          <VtsClipboardConsole />
+        </template>
+      </VtsLayoutConsole>
     </template>
   </div>
 </template>
@@ -39,15 +43,11 @@ import type { XenApiVm } from '@/libs/xen-api/xen-api.types'
 import { usePageTitleStore } from '@/stores/page-title.store'
 import { useConsoleStore } from '@/stores/xen-api/console.store'
 import { useVmStore } from '@/stores/xen-api/vm.store'
-import MenuItem from '@core/components/menu/MenuItem.vue'
-import MenuList from '@core/components/menu/MenuList.vue'
+import VtsActionsConsole from '@core/components/console/VtsActionsConsole.vue'
+import VtsClipboardConsole from '@core/components/console/VtsClipboardConsole.vue'
+import VtsLayoutConsole from '@core/components/console/VtsLayoutConsole.vue'
+import VtsDivider from '@core/components/divider/VtsDivider.vue'
 import { useUiStore } from '@core/stores/ui.store'
-import {
-  faArrowUpRightFromSquare,
-  faDownLeftAndUpRightToCenter,
-  faKeyboard,
-  faUpRightAndDownLeftFromCenter,
-} from '@fortawesome/free-solid-svg-icons'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
@@ -136,46 +136,4 @@ const openInNewTab = () => {
   max-width: 100%;
   height: 100%;
 }
-
-.not-available {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  text-align: center;
-  gap: 4rem;
-  color: var(--color-info-txt-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-info-txt-base);
-    color: var(--color-info-txt-item);
-    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);
-    }
-  }
-}
-
-.vm-console-view:deep(.menu-list) {
-  background-color: transparent;
-  align-self: center;
-}
 </style>

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

@@ -0,0 +1,58 @@
+<template>
+  <UiCardTitle>{{ $t('console-actions') }}</UiCardTitle>
+  <UiButton
+    v-tooltip="openInNewTab === undefined ? $t('coming-soon') : undefined"
+    :disabled="openInNewTab === undefined"
+    accent="info"
+    variant="tertiary"
+    size="medium"
+    :left-icon="faArrowUpRightFromSquare"
+    @click="openInNewTab"
+  >
+    {{ $t('open-console-in-new-tab') }}
+  </UiButton>
+  <UiButton
+    v-tooltip="toggleFullScreen === undefined ? $t('coming-soon') : undefined"
+    :disabled="toggleFullScreen === undefined"
+    accent="info"
+    variant="tertiary"
+    size="medium"
+    :left-icon="faUpRightAndDownLeftFromCenter"
+    @click="toggleFullScreen"
+  >
+    {{ $t('fullscreen') }}
+  </UiButton>
+  <UiButton
+    v-tooltip="sendCtrlAltDel === undefined ? $t('coming-soon') : undefined"
+    accent="info"
+    variant="tertiary"
+    size="medium"
+    :disabled="sendCtrlAltDel === undefined"
+    :left-icon="faKeyboard"
+    @click="sendCtrlAltDel"
+  >
+    {{ $t('send-ctrl-alt-del') }}
+  </UiButton>
+</template>
+
+<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 { faArrowUpRightFromSquare, faKeyboard, faUpRightAndDownLeftFromCenter } from '@fortawesome/free-solid-svg-icons'
+
+// temporary undefined for xo6
+defineProps<{
+  openInNewTab?: () => void
+  toggleFullScreen?: () => void
+  sendCtrlAltDel?: () => void
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.ui-button {
+  align-self: start;
+  gap: 0.8rem;
+  text-align: left;
+}
+</style>

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

@@ -0,0 +1,37 @@
+<template>
+  <div class="vts-clipboard-console">
+    <UiCardTitle>{{ $t('console-clipboard') }}</UiCardTitle>
+    <UiTextarea accent="info" :model-value="modelValue" />
+    <div class="btn">
+      <UiButton v-tooltip="$t('coming-soon')" accent="info" variant="primary" size="medium" disabled>
+        {{ $t('send') }}
+      </UiButton>
+      <UiButton v-tooltip="$t('coming-soon')" accent="info" variant="secondary" size="medium" disabled>
+        {{ $t('receive') }}
+      </UiButton>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import UiButton from '@core/components/ui/button/UiButton.vue'
+import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
+import UiTextarea from '@core/components/ui/input/UiTextarea.vue'
+import { vTooltip } from '@core/directives/tooltip.directive'
+import { ref } from 'vue'
+
+const modelValue = ref('')
+</script>
+
+<style lang="postcss" scoped>
+.vts-clipboard-console {
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+  width: 100%;
+}
+.btn {
+  display: flex;
+  gap: 0.8rem;
+}
+</style>

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

@@ -0,0 +1,38 @@
+<template>
+  <div :class="uiStore.isMobile ? 'mobile' : undefined" class="vts-layout-console">
+    <slot />
+    <UiCard>
+      <slot name="actions" />
+    </UiCard>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import UiCard from '@core/components/ui/card/UiCard.vue'
+import { useUiStore } from '@core/stores/ui.store'
+
+defineSlots<{
+  default(): any
+  actions(): any
+}>()
+
+const uiStore = useUiStore()
+</script>
+
+<style lang="postcss" scoped>
+.vts-layout-console {
+  display: flex;
+  gap: 2.4rem;
+  padding: 0.8rem;
+
+  &.mobile {
+    flex-direction: column;
+  }
+}
+.ui-card {
+  height: fit-content;
+  gap: 1.6rem;
+  padding: 1.6rem;
+  width: 43rem;
+}
+</style>

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

@@ -97,9 +97,8 @@ const uiStore = useUiStore()
 
 <style lang="postcss" scoped>
 .vts-remote-console {
-  padding: 0.8rem;
   height: 80rem;
-  width: 100%;
+  flex-grow: 1;
   max-width: 100%;
 
   &.mobile {

@xen-orchestra/web-core/lib/locales/de.json

@@ -19,6 +19,7 @@
 
   "dashboard": "Dashboard",
   "documentation-name": "{name} Dokumentation",
+  "fullscreen": "Vollbild",
   "hosts": "Hosts",
   "learn-more": "Mehr erfahren",
   "loading-in-progress": "Ladevorgang läuft…",
@@ -27,10 +28,12 @@
   "n-vms": "1 VM | {n} VMs",
   "network": "Netzwerk",
   "object-not-found": "Objekt {id} wurde nicht gefunden…",
+  "open-console-in-new-tab": "Konsole in neuem Reiter öffnen",
   "patches": "Patches",
   "power-on-vm-for-console": "Konsole ist nach Start der VM verfügbar",
   "power-on-host-for-console": "Konsole ist nach Start des Hosts verfügbar",
   "running-vm": "VM eingeschalten | VMs eingeschalten",
+  "send-ctrl-alt-del": "Ctrl+Alt+Del senden",
   "stats": "Statistiken",
   "storage": "Speicher",
   "support-name": "{name} pro support",