Restructure longhorn UI proxy link to contain dynamic namespace

shell/pages/c/_cluster/longhorn/__tests__/longhorn.index.test.ts

@@ -0,0 +1,81 @@
+import { shallowMount } from '@vue/test-utils';
+
+import { Banner } from '@components/Banner';
+import LonghornOverview from '@shell/pages/c/_cluster/longhorn/index.vue';
+
+const longhornFrontend = {
+  id:         'default/longhorn-frontend',
+  type:       'service',
+  apiVersion: 'v1',
+  kind:       'Service',
+  metadata:   {
+    labels:    { app: 'longhorn-ui' },
+    name:      'longhorn-frontend',
+    namespace: 'default',
+  }
+};
+
+describe('page: LonghornOverview', () => {
+  const commonMocks = {
+    $store: {
+      dispatch: () => jest.fn,
+      getters:  {
+        currentProduct:      () => 'cluster',
+        'cluster/findAll':   () => jest.fn(),
+        'cluster/schemaFor': () => jest.fn(),
+        'cluster/matching':  () => jest.fn(),
+        'i18n/t':            () => jest.fn(),
+      },
+    }
+  };
+
+  const createWrapper = (overrides?: any) => {
+    return shallowMount(LonghornOverview, {
+      mocks: commonMocks,
+      ...overrides,
+    });
+  };
+
+  it('initializes externalLinks as an empty array', () => {
+    const wrapper = createWrapper({
+      stubs: {
+        Banner:    { template: '<span />' },
+        LazyImage: { template: '<span />' },
+      }
+    });
+
+    expect(wrapper.vm.externalLinks).toStrictEqual([]);
+  });
+
+  it('populates externalLinks proxy link correctly when uiService is valid', async() => {
+    const wrapper = createWrapper({
+      computed: {
+        currentCluster: () => ({ id: '_' }),
+        uiService:      () => longhornFrontend
+      },
+      stubs: {
+        Banner:    { template: '<span />' },
+        LazyImage: { template: '<span />' },
+      }
+    });
+
+    const proxyUrl = `/k8s/clusters/_/api/v1/namespaces/${ longhornFrontend.metadata.namespace }/services/http:longhorn-frontend:80/proxy/`;
+
+    await wrapper.vm.$nextTick();
+
+    const containsProxyUrl = wrapper.vm.externalLinks.find((link) => link.link);
+
+    expect(containsProxyUrl).toBeTruthy();
+    expect(containsProxyUrl.link).toStrictEqual(proxyUrl);
+  });
+
+  it('displays error banner when externalLinks array is empty', () => {
+    const wrapper = createWrapper({ stubs: { LazyImage: { template: '<span />' } } });
+
+    expect(wrapper.vm.externalLinks).toStrictEqual([]);
+
+    const banner = wrapper.findComponent(Banner);
+
+    expect(banner.exists()).toBe(true);
+  });
+});

shell/pages/c/_cluster/longhorn/index.vue

@@ -1,14 +1,17 @@
 <script>
 import { mapGetters } from 'vuex';
+import isEmpty from 'lodash/isEmpty';
 
 import InstallRedirect from '@shell/utils/install-redirect';
 
+import { SERVICE } from '@shell/config/types';
 import { NAME, CHART_NAME } from '@shell/config/product/longhorn';
 
+import { Banner } from '@components/Banner';
 import LazyImage from '@shell/components/LazyImage';
 
 export default {
-  components: { LazyImage },
+  components: { Banner, LazyImage },
 
   middleware: InstallRedirect(NAME, CHART_NAME),
 
@@ -19,18 +22,30 @@ export default {
     };
   },
 
-  computed: { ...mapGetters(['currentCluster']) },
+  computed: {
+    ...mapGetters(['currentCluster']),
 
-  mounted() {
-    this.externalLinks = [
-      {
-        enabled:     true,
-        iconSrc:     this.longhornImgSrc,
-        label:       'longhorn.overview.linkedList.longhorn.label',
-        description: 'longhorn.overview.linkedList.longhorn.description',
-        link:        `/k8s/clusters/${ this.currentCluster.id }/api/v1/namespaces/longhorn-system/services/http:longhorn-frontend:80/proxy/`
-      },
-    ];
+    uiService() {
+      return this.$store.getters['cluster/matching'](SERVICE, 'app=longhorn-ui')[0];
+    }
+  },
+
+  async mounted() {
+    if ( this.$store.getters['cluster/schemaFor'](SERVICE) ) {
+      await this.$store.dispatch('cluster/findAll', { type: SERVICE });
+    }
+
+    if ( !isEmpty(this.uiService) && this.uiService.metadata?.namespace ) {
+      this.externalLinks = [
+        {
+          enabled:     true,
+          iconSrc:     this.longhornImgSrc,
+          label:       'longhorn.overview.linkedList.longhorn.label',
+          description: 'longhorn.overview.linkedList.longhorn.description',
+          link:        `/k8s/clusters/${ this.currentCluster.id }/api/v1/namespaces/${ this.uiService.metadata.namespace }/services/http:longhorn-frontend:80/proxy/`
+        },
+      ];
+    }
   },
 
   methods: {}
@@ -52,7 +67,10 @@ export default {
         </div>
       </div>
     </header>
-    <div class="links">
+    <div
+      v-if="externalLinks && externalLinks.length"
+      class="links"
+    >
       <div
         v-for="fel in externalLinks"
         :key="fel.label"
@@ -75,5 +93,12 @@ export default {
         </a>
       </div>
     </div>
+
+    <Banner
+      v-else
+      data-testid="longhorn-links-na"
+      color="error"
+      :label="t('longhorn.overview.linkedList.longhorn.na')"
+    />
   </section>
 </template>