@xen-orchestra/web-core 0.0.1 → 0.0.2

package/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="novnc__novnc" />

package/lib/components/console/RemoteConsole.vue

@@ -0,0 +1,119 @@
+<template>
+  <div :class="uiStore.isMobile ? 'mobile' : undefined" class="remote-console">
+    <div ref="consoleContainer" class="console"></div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useUiStore } from '@core/stores/ui.store'
+import VncClient from '@novnc/novnc/core/rfb'
+import { promiseTimeout } from '@vueuse/shared'
+import { fibonacci } from 'iterable-backoff'
+import { onBeforeUnmount, ref, watchEffect } from 'vue'
+
+const props = defineProps<{
+  url: URL
+}>()
+
+const N_TOTAL_TRIES = 8
+const FIBONACCI_MS_ARRAY: number[] = Array.from(fibonacci().toMs().take(N_TOTAL_TRIES))
+
+const consoleContainer = ref<HTMLDivElement | null>(null)
+
+let vncClient: VncClient | undefined
+let nConnectionAttempts = 0
+
+const handleDisconnectionEvent = () => {
+  clearVncClient()
+
+  nConnectionAttempts++
+
+  if (nConnectionAttempts > N_TOTAL_TRIES) {
+    console.error('The number of reconnection attempts has been exceeded for:', props.url)
+    return
+  }
+
+  console.error(
+    `Connection lost for the remote console: ${props.url}. New attempt in ${
+      FIBONACCI_MS_ARRAY[nConnectionAttempts - 1]
+    }ms`
+  )
+  createVncConnection()
+}
+
+const handleConnectionEvent = () => (nConnectionAttempts = 0)
+
+const clearVncClient = () => {
+  if (vncClient === undefined) {
+    return
+  }
+
+  vncClient.removeEventListener('disconnect', handleDisconnectionEvent)
+  vncClient.removeEventListener('connect', handleConnectionEvent)
+  vncClient.disconnect()
+
+  vncClient = undefined
+}
+
+const createVncConnection = async () => {
+  if (nConnectionAttempts !== 0) {
+    await promiseTimeout(FIBONACCI_MS_ARRAY[nConnectionAttempts - 1])
+
+    if (vncClient !== undefined) {
+      // New VNC Client may have been created in the meantime
+      return
+    }
+  }
+
+  vncClient = new VncClient(consoleContainer.value!, props.url.toString(), {
+    wsProtocols: ['binary'],
+  })
+  vncClient.scaleViewport = true
+  vncClient.background = 'transparent'
+
+  vncClient.addEventListener('disconnect', handleDisconnectionEvent)
+  vncClient.addEventListener('connect', handleConnectionEvent)
+}
+
+watchEffect(() => {
+  if (consoleContainer.value === null) {
+    return
+  }
+
+  nConnectionAttempts = 0
+
+  clearVncClient()
+  createVncConnection()
+})
+
+onBeforeUnmount(() => {
+  clearVncClient()
+})
+
+const uiStore = useUiStore()
+</script>
+
+<style lang="postcss" scoped>
+.remote-console {
+  --padding: 0.8rem;
+  --height: 80rem;
+  --width: 100%;
+
+  &.mobile {
+    --padding: 0.8rem 0;
+    --height: 100%;
+    --width: 95vw;
+  }
+}
+
+.remote-console {
+  padding: var(--padding);
+  height: var(--height);
+  width: var(--width);
+  max-width: 100%;
+}
+
+.console {
+  height: 100%;
+}
+</style>

package/lib/types/iterable-backoff.d.ts

@@ -0,0 +1 @@
+declare module 'iterable-backoff'

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xen-orchestra/web-core",
   "type": "module",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "private": false,
   "exports": {
     "./*": {
@@ -10,13 +10,18 @@
     }
   },
   "devDependencies": {
+    "@fontsource/poppins": "^5.0.14",
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
     "@fortawesome/free-regular-svg-icons": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/vue-fontawesome": "^3.0.5",
+    "@novnc/novnc": "^1.4.0",
     "@types/lodash-es": "^4.17.12",
+    "@types/novnc__novnc": "^1.3.5",
     "@vue/tsconfig": "^0.5.1",
     "@vueuse/core": "^10.7.1",
+    "@vueuse/shared": "^10.7.1",
+    "iterable-backoff": "^0.1.0",
     "lodash-es": "^4.17.21",
     "pinia": "^2.1.7",
     "placement.js": "^1.0.0-beta.5",