feat(lite): alert when unreachable hosts (#6378)

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

@@ -1,4 +1,19 @@
 <template>
+  <UiModal
+    v-if="isSslModalOpen"
+    color="error"
+    :icon="faServer"
+    @close="clearUnreachableHostsUrls"
+  >
+    <template #title>{{ $t("unreachable-hosts") }}</template>
+    <template #subtitle>{{ $t("following-hosts-unreachable") }}</template>
+    <p>{{ $t("allow-self-signed-ssl") }}</p>
+    <ul>
+      <li v-for="url in unreachableHostsUrls" :key="url.hostname">
+        <a :href="url.href" target="_blank" rel="noopener">{{ url.href }}</a>
+      </li>
+    </ul>
+  </UiModal>
   <div v-if="!xenApiStore.isConnected">
     <AppLogin />
   </div>
@@ -17,15 +32,22 @@
 </template>
 
 <script lang="ts" setup>
-import { watchEffect } from "vue";
+import { difference } from "lodash";
+import { computed, ref, watch, watchEffect } from "vue";
 import favicon from "@/assets/favicon.svg";
+import { faServer } from "@fortawesome/free-solid-svg-icons";
 import AppHeader from "@/components/AppHeader.vue";
 import AppLogin from "@/components/AppLogin.vue";
 import AppTooltips from "@/components/AppTooltips.vue";
 import InfraPoolList from "@/components/infra/InfraPoolList.vue";
+import UiModal from "@/components/ui/UiModal.vue";
 import { useChartTheme } from "@/composables/chart-theme.composable";
+import { useHostStore } from "@/stores/host.store";
 import { useXenApiStore } from "@/stores/xen-api.store";
 
+const unreachableHostsUrls = ref<URL[]>([]);
+const clearUnreachableHostsUrls = () => (unreachableHostsUrls.value = []);
+
 let link: HTMLLinkElement | null = document.querySelector("link[rel~='icon']");
 if (link == null) {
   link = document.createElement("link");
@@ -41,6 +63,8 @@ if (window.localStorage?.getItem("colorMode") !== "light") {
 }
 
 const xenApiStore = useXenApiStore();
+const hostStore = useHostStore();
+useChartTheme();
 
 watchEffect(() => {
   if (xenApiStore.isConnected) {
@@ -48,7 +72,21 @@ watchEffect(() => {
   }
 });
 
-useChartTheme();
+watch(
+  () => hostStore.allRecords,
+  (hosts, previousHosts) => {
+    difference(hosts, previousHosts).forEach((host) => {
+      const url = new URL("http://localhost");
+      url.protocol = window.location.protocol;
+      url.hostname = host.address;
+      fetch(url, { mode: "no-cors" }).catch(() =>
+        unreachableHostsUrls.value.push(url)
+      );
+    });
+  }
+);
+
+const isSslModalOpen = computed(() => unreachableHostsUrls.value.length > 0);
 </script>
 
 <style lang="postcss">

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

@@ -4,6 +4,7 @@
   "add-or": "+OR",
   "add-sort": "Add sort",
   "alarms": "Alarms",
+  "allow-self-signed-ssl":"You may need to allow self-signed SSL certificates in your browser",
   "appearance": "Appearance",
   "ascending": "ascending",
   "available-properties-for-advanced-filter": "Available properties for advanced filter:",
@@ -25,6 +26,7 @@
   "export-vms": "Export VMs",
   "hosts": "Hosts",
   "language": "Language",
+  "following-hosts-unreachable":"The following hosts are unreachable",
   "loading-hosts": "Loading hosts…",
   "log-out": "Log out",
   "login": "Login",
@@ -49,6 +51,7 @@
   "top-#": "Top {n}",
   "total-free": "Total free",
   "total-used": "Total used",
+  "unreachable-hosts": "Unreachable hosts",
   "version": "Version",
   "vms": "VMs"
 }

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

@@ -5,6 +5,7 @@
   "add-sort": "Ajouter un tri",
   "alarms": "Alarmes",
   "appearance": "Apparence",
+  "allow-self-signed-ssl":"Vous devrez peut-être autoriser les certificats SSL auto-signés depuis votre navigateur",
   "ascending": "ascendant",
   "available-properties-for-advanced-filter": "Propriétés disponibles pour le filtrage avancé :",
   "backup": "Sauvegarde",
@@ -25,6 +26,7 @@
   "export-vms": "Exporter les VMs",
   "hosts": "Hôtes",
   "language": "Langue",
+  "following-hosts-unreachable":"Les hôtes suivants sont inaccessibles",
   "loading-hosts": "Chargement des hôtes…",
   "log-out": "Se déconnecter",
   "login": "Connexion",
@@ -49,6 +51,7 @@
   "top-#": "Top {n}",
   "total-free": "Total libre",
   "total-used": "Total utilisé",
+  "unreachable-hosts": "Hôtes inaccessibles",
   "version": "Version",
   "vms": "VMs"
 }