fix: tries to reconnect of remote host disconnects (#2876)

assets/auto-imports.d.ts

@@ -230,6 +230,7 @@ declare global {
   const useGamepad: typeof import('@vueuse/core')['useGamepad']
   const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
   const useHead: typeof import('@vueuse/head')['useHead']
+  const useHosts: typeof import('./stores/hosts')['useHosts']
   const useI18n: typeof import('vue-i18n')['useI18n']
   const useIdle: typeof import('@vueuse/core')['useIdle']
   const useImage: typeof import('@vueuse/core')['useImage']
@@ -587,6 +588,7 @@ declare module 'vue' {
     readonly useGamepad: UnwrapRef<typeof import('@vueuse/core')['useGamepad']>
     readonly useGeolocation: UnwrapRef<typeof import('@vueuse/core')['useGeolocation']>
     readonly useHead: UnwrapRef<typeof import('@vueuse/head')['useHead']>
+    readonly useHosts: UnwrapRef<typeof import('./stores/hosts')['useHosts']>
     readonly useI18n: UnwrapRef<typeof import('vue-i18n')['useI18n']>
     readonly useIdle: UnwrapRef<typeof import('@vueuse/core')['useIdle']>
     readonly useImage: UnwrapRef<typeof import('@vueuse/core')['useImage']>
@@ -937,6 +939,7 @@ declare module '@vue/runtime-core' {
     readonly useGamepad: UnwrapRef<typeof import('@vueuse/core')['useGamepad']>
     readonly useGeolocation: UnwrapRef<typeof import('@vueuse/core')['useGeolocation']>
     readonly useHead: UnwrapRef<typeof import('@vueuse/head')['useHead']>
+    readonly useHosts: UnwrapRef<typeof import('./stores/hosts')['useHosts']>
     readonly useI18n: UnwrapRef<typeof import('vue-i18n')['useI18n']>
     readonly useIdle: UnwrapRef<typeof import('@vueuse/core')['useIdle']>
     readonly useImage: UnwrapRef<typeof import('@vueuse/core')['useImage']>

assets/components/SideMenu.vue

@@ -10,10 +10,11 @@
     </div>
     <transition :name="sessionHost ? 'slide-left' : 'slide-right'" mode="out-in">
       <ul class="menu p-0" v-if="!sessionHost">
-        <li v-for="host in config.hosts">
-          <a @click.prevent="setHost(host.id)">
+        <li v-for="host in hosts">
+          <a @click.prevent="setHost(host.id)" :class="{ 'pointer-events-none text-base-content/50': !host.available }">
             <ph:computer-tower />
             {{ host.name }}
+            <span class="badge badge-error badge-xs p-1.5" v-if="!host.available">offline</span>
           </a>
         </li>
       </ul>
@@ -68,6 +69,7 @@ import { sessionHost } from "@/composable/storage";
 const store = useContainerStore();
 
 const { activeContainers, visibleContainers, ready } = storeToRefs(store);
+const { hosts } = useHosts();
 
 function setHost(host: string | null) {
   sessionHost.value = host;
@@ -116,16 +118,6 @@ const menuItems = computed(() => {
   }
 });
 
-const hosts = computed(() =>
-  config.hosts.reduce(
-    (acc, item) => {
-      acc[item.id] = item;
-      return acc;
-    },
-    {} as Record<string, { name: string; id: string }>,
-  ),
-);
-
 const activeContainersById = computed(() =>
   activeContainers.value.reduce(
     (acc, item) => {

assets/stores/container.ts

@@ -5,6 +5,7 @@ import { Container } from "@/models/Container";
 import i18n from "@/modules/i18n";
 
 const { showToast } = useToast();
+const { markHostAvailable } = useHosts();
 // @ts-ignore
 const { t } = i18n.global;
 
@@ -68,6 +69,11 @@ export const useContainerStore = defineStore("container", () => {
       }
     });
 
+    es.addEventListener("host-unavailable", (e) => {
+      const hostId = (e as MessageEvent).data;
+      markHostAvailable(hostId, false);
+    });
+
     es.addEventListener("container-health", (e) => {
       const event = JSON.parse((e as MessageEvent).data) as { actorId: string; health: ContainerHealth };
       const container = allContainersById.value[event.actorId];

assets/stores/hosts.ts

@@ -0,0 +1,25 @@
+type Host = {
+  name: string;
+  id: string;
+  available: boolean;
+};
+const hosts = computed(() =>
+  config.hosts.reduce(
+    (acc, item) => {
+      acc[item.id] = { ...item, available: true };
+      return acc;
+    },
+    {} as Record<string, Host>,
+  ),
+);
+
+const markHostAvailable = (id: string, available: boolean) => {
+  hosts.value[id].available = available;
+};
+
+export function useHosts() {
+  return {
+    hosts,
+    markHostAvailable,
+  };
+}