feat(lite): override host address with 'master' query param (#7187)

@xen-orchestra/lite/CHANGELOG.md

@@ -3,6 +3,7 @@
 ## **next**
 
 - [VM/Action] Ability to migrate a VM from its view (PR [#7164](https://github.com/vatesfr/xen-orchestra/pull/7164))
+- Ability to override host address with `master` URL query param (PR [#7187](https://github.com/vatesfr/xen-orchestra/pull/7187))
 
 ## **0.1.6** (2023-11-30)
 

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

@@ -12,6 +12,7 @@
     </RouterLink>
     <slot />
     <div class="right">
+      <PoolOverrideWarning as-tooltip />
       <AccountButton />
     </div>
   </header>
@@ -19,6 +20,7 @@
 
 <script lang="ts" setup>
 import AccountButton from "@/components/AccountButton.vue";
+import PoolOverrideWarning from "@/components/PoolOverrideWarning.vue";
 import TextLogo from "@/components/TextLogo.vue";
 import UiIcon from "@/components/ui/icon/UiIcon.vue";
 import { useNavigationStore } from "@/stores/navigation.store";
@@ -51,6 +53,10 @@ const { trigger: navigationTrigger } = storeToRefs(navigationStore);
     margin-left: 1rem;
     vertical-align: middle;
   }
+
+  .warning-not-current-pool {
+    font-size: 2.4rem;
+  }
 }
 
 .right {

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

@@ -2,6 +2,7 @@
   <div class="app-login form-container">
     <form @submit.prevent="handleSubmit">
       <img alt="XO Lite" src="../assets/logo-title.svg" />
+      <PoolOverrideWarning />
       <p v-if="isHostIsSlaveErr(error)" class="error">
         <UiIcon :icon="faExclamationCircle" />
         {{ $t("login-only-on-master") }}
@@ -45,6 +46,7 @@ import FormCheckbox from "@/components/form/FormCheckbox.vue";
 import FormInput from "@/components/form/FormInput.vue";
 import FormInputWrapper from "@/components/form/FormInputWrapper.vue";
 import LoginError from "@/components/LoginError.vue";
+import PoolOverrideWarning from "@/components/PoolOverrideWarning.vue";
 import UiButton from "@/components/ui/UiButton.vue";
 import UiIcon from "@/components/ui/icon/UiIcon.vue";
 import type { XenApiError } from "@/libs/xen-api/xen-api.types";

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

@@ -0,0 +1,59 @@
+<template>
+  <div
+    v-if="xenApi.isPoolOverridden"
+    class="warning-not-current-pool"
+    @click="xenApi.resetPoolMasterIp"
+    v-tooltip="
+      asTooltip && {
+        placement: 'right',
+        content: `
+      ${$t('you-are-currently-on', [masterSessionStorage])}.
+      ${$t('click-to-return-default-pool')}
+      `,
+      }
+    "
+  >
+    <div class="wrapper">
+      <UiIcon :icon="faWarning" />
+      <p v-if="!asTooltip">
+        <i18n-t keypath="you-are-currently-on">
+          <strong>{{ masterSessionStorage }}</strong>
+        </i18n-t>
+        <br />
+        {{ $t("click-to-return-default-pool") }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { faWarning } from "@fortawesome/free-solid-svg-icons";
+import { useSessionStorage } from "@vueuse/core";
+
+import UiIcon from "@/components/ui/icon/UiIcon.vue";
+import { useXenApiStore } from "@/stores/xen-api.store";
+import { vTooltip } from "@/directives/tooltip.directive";
+
+defineProps<{
+  asTooltip?: boolean;
+}>();
+
+const xenApi = useXenApiStore();
+const masterSessionStorage = useSessionStorage("master", null);
+</script>
+
+<style lang="postcss" scoped>
+.warning-not-current-pool {
+  color: var(--color-orange-world-base);
+  cursor: pointer;
+
+  .wrapper {
+    display: flex;
+    justify-content: center;
+
+    svg {
+      margin: auto 1rem;
+    }
+  }
+}
+</style>

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

@@ -27,6 +27,7 @@
   "cancel": "Cancel",
   "change-state": "Change state",
   "click-to-display-alarms": "Click to display alarms:",
+  "click-to-return-default-pool": "Click here to return to the default pool",
   "close": "Close",
   "coming-soon": "Coming soon!",
   "community": "Community",
@@ -190,5 +191,6 @@
   "vm-is-running": "The VM is running",
   "vms": "VMs",
   "xo-lite-under-construction": "XOLite is under construction",
+  "you-are-currently-on": "You are currently on: {0}",
   "zstd": "zstd"
 }

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

@@ -27,6 +27,7 @@
   "cancel": "Annuler",
   "change-state": "Changer l'état",
   "click-to-display-alarms": "Cliquer pour afficher les alarmes :",
+  "click-to-return-default-pool": "Cliquer ici pour revenir au pool par défaut",
   "close": "Fermer",
   "coming-soon": "Bientôt disponible !",
   "community": "Communauté",
@@ -190,5 +191,6 @@
   "vm-is-running": "La VM est en cours d'exécution",
   "vms": "VMs",
   "xo-lite-under-construction": "XOLite est en construction",
+  "you-are-currently-on": "Vous êtes actuellement sur : {0}",
   "zstd": "zstd"
 }

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

@@ -1,8 +1,10 @@
 import XapiStats from "@/libs/xapi-stats";
 import XenApi from "@/libs/xen-api/xen-api";
-import { useLocalStorage } from "@vueuse/core";
+import { useLocalStorage, useSessionStorage, whenever } from "@vueuse/core";
 import { defineStore } from "pinia";
 import { computed, ref, watchEffect } from "vue";
+import { useRouter } from "vue-router";
+import { useRoute } from "vue-router";
 
 const HOST_URL = import.meta.env.PROD
   ? window.origin
@@ -15,7 +17,27 @@ enum STATUS {
 }
 
 export const useXenApiStore = defineStore("xen-api", () => {
-  const xenApi = new XenApi(HOST_URL);
+  // undefined not correctly handled. See https://github.com/vueuse/vueuse/issues/3595
+  const masterSessionStorage = useSessionStorage<null | string>("master", null);
+  const router = useRouter();
+  const route = useRoute();
+
+  whenever(
+    () => route.query.master,
+    async (newMaster) => {
+      masterSessionStorage.value = newMaster as string;
+      await router.replace({ query: { ...route.query, master: undefined } });
+      window.location.reload();
+    }
+  );
+
+  const hostUrl = new URL(HOST_URL);
+  if (masterSessionStorage.value !== null) {
+    hostUrl.hostname = masterSessionStorage.value;
+  }
+
+  const isPoolOverridden = hostUrl.origin !== new URL(HOST_URL).origin;
+  const xenApi = new XenApi(hostUrl.origin);
   const xapiStats = new XapiStats(xenApi);
   const storedSessionId = useLocalStorage<string | undefined>(
     "sessionId",
@@ -75,14 +97,21 @@ export const useXenApiStore = defineStore("xen-api", () => {
     status.value = STATUS.DISCONNECTED;
   }
 
+  function resetPoolMasterIp() {
+    masterSessionStorage.value = null;
+    window.location.reload();
+  }
+
   return {
     isConnected,
     isConnecting,
+    isPoolOverridden,
     connect,
     reconnect,
     disconnect,
     getXapi,
     getXapiStats,
     currentSessionId,
+    resetPoolMasterIp,
   };
 });