feat: changes the host when a new container is chosen (#3001)

assets/components/HostMenu.vue

@@ -90,6 +90,7 @@ import Pin from "~icons/ph/map-pin-simple";
 import Stack from "~icons/ph/stack";
 // @ts-ignore
 import Containers from "~icons/octicon/container-24";
+import { RouteLocationNormalizedLoaded } from "vue-router";
 
 const containerStore = useContainerStore();
 const { visibleContainers } = storeToRefs(containerStore);
@@ -166,6 +167,21 @@ const menuItems = computed(() => {
 
   return items;
 });
+
+const route = useRoute();
+
+const updateHostForContainerRoute = (to: RouteLocationNormalizedLoaded) => {
+  if (to.name === "container-id") {
+    const container = containerStore.findContainerById(to.params.id as string);
+    if (container) {
+      setHost(container.host);
+    }
+  }
+};
+
+updateHostForContainerRoute(route);
+
+onBeforeRouteUpdate((to) => updateHostForContainerRoute(to));
 </script>
 <style scoped lang="postcss">
 .menu {

assets/stores/container.ts

@@ -152,11 +152,14 @@ export const useContainerStore = defineStore("container", () => {
     ),
   );
 
+  const findContainerById = (id: string) => allContainersById.value[id];
+
   return {
     containers,
     allContainersById,
     visibleContainers,
     currentContainer,
+    findContainerById,
     containerNames,
     ready,
   };