feat: open exposed services in a new window

Instead of rendering them inside an iframe, open them in a new window. Closes #25. Signed-off-by: Utku Ozdemir <[email protected]>
siderolabs · Mar 12, 2024 · 190218a · 190218a
1 parent 0960100
commit 190218a
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 79 deletions.
diff --git a/frontend/src/components/common/MenuItem/TMenuItem.vue b/frontend/src/components/common/MenuItem/TMenuItem.vue
@@ -5,30 +5,36 @@ Use of this software is governed by the Business Source License
 included in the LICENSE file.
 -->
 <template>
-  <router-link :to="route" active-class="item__active">
+  <component :is="componentType" v-bind="componentAttributes">
     <div class="item">
       <t-icon v-if="icon" class="item__icon" :icon="icon" :svg-base64="iconSvgBase64"/>
       <p class="item__name truncate">{{ name }}</p>
       <div v-if="label" class="rounded-full text-naturals-N13 bg-naturals-N4 text-xs p-1 w-6 h-6 text-center" :class="labelColor ? 'text-' + labelColor : ''">
         {{ label }}
       </div>
     </div>
-  </router-link>
+  </component>
 </template>
 
 <script setup lang="ts">
 import TIcon, { IconType } from "@/components/common/Icon/TIcon.vue";
 
 type Props = {
   route: string | object,
+  regularLink?: boolean,
   name: string,
   icon?: IconType,
   iconSvgBase64?: string,
   label?: string | number,
   labelColor?: string
 };
 
-defineProps<Props>();
+const props = defineProps<Props>();
+
+const componentType = props.regularLink ? "a" : "router-link";
+const componentAttributes = props.regularLink ?
+    { href: props.route, target: "_blank" } :
+    { to: props.route, activeClass: "item__active" };
 </script>
 
 <style scoped>

diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
@@ -33,7 +33,6 @@ import ConfigPatches from "@/views/cluster/Config/Patches.vue";
 import PatchEdit from "@/views/cluster/Config/PatchEdit.vue";
 import KubernetesManifestSync from "@/views/cluster/Manifest/Sync.vue";
 import NodeDetails from "@/views/cluster/Nodes/NodeDetails.vue";
-import ExposedService from "@/views/cluster/ExposedService/ExposedService.vue";
 import ClusterBackups from "@/views/cluster/Backups/Backups.vue";
 
 import PageNotFound from "@/views/common/PageNotFound.vue";
@@ -298,14 +297,6 @@ const routes: RouteRecordRaw[] = [
         inner: KubernetesManifestSync,
       },
     },
-    {
-      path: "/services/:service",
-      name: "ExposedService",
-      component: ClusterScoped,
-      props: {
-        inner: ExposedService,
-      },
-    },
     {
       path: "/backups",
       name: "Backups",

diff --git a/frontend/src/views/cluster/ExposedService/ExposedService.vue b/frontend/src/views/cluster/ExposedService/ExposedService.vue
diff --git a/frontend/src/views/cluster/ExposedService/ExposedServiceSideBar.vue b/frontend/src/views/cluster/ExposedService/ExposedServiceSideBar.vue
@@ -18,10 +18,11 @@ included in the LICENSE file.
           <t-menu-item
               v-for="service in exposedServices"
               :key="service.metadata.id"
-              :route="'/cluster/' + route.params.cluster +  '/services/' + service.metadata.labels?.[LabelExposedServiceAlias]"
+              :route="exposedServiceUrl(service)"
               :name="service.spec.label"
               :icon-svg-base64="service.spec.icon_base64"
               icon="exposed-service"
+              regular-link
           />
         </template>
         <template v-else>
@@ -39,7 +40,7 @@ import { useRoute } from "vue-router";
 import { ResourceTyped } from "@/api/grpc";
 import Watch from "@/api/watch";
 import { ExposedServiceSpec } from "@/api/omni/specs/omni.pb";
-import { DefaultNamespace, LabelCluster, ExposedServiceType, LabelExposedServiceAlias } from "@/api/resources";
+import { DefaultNamespace, LabelCluster, ExposedServiceType, LabelExposedServiceAlias, workloadProxyHostPrefix } from "@/api/resources";
 import { Runtime } from "@/api/common/omni.pb";
 import TIcon from "@/components/common/Icon/TIcon.vue";
 import { Disclosure, DisclosureButton, DisclosurePanel } from "@headlessui/vue";
@@ -57,6 +58,12 @@ exposedServicesWatch.setup({
   },
   selectors: [`${LabelCluster}=${route.params.cluster}`]
 });
+
+const exposedServiceUrl = (service: ResourceTyped<ExposedServiceSpec>) => {
+  const alias = service.metadata.labels?.[LabelExposedServiceAlias];
+
+  return `${window.location.protocol}//${workloadProxyHostPrefix}-${alias}-${window.location.hostname}`
+}
 </script>
 
 <style scoped>