@rancher/shell 0.5.3 → 2.0.0

package/pages/c/_cluster/explorer/tools/index.vue

@@ -1,74 +1,37 @@
 <script>
 import { mapGetters } from 'vuex';
 import Loading from '@shell/components/Loading';
-import { _FLAGGED, DEPRECATED, HIDDEN, FROM_TOOLS } from '@shell/config/query-params';
+import { _FLAGGED, DEPRECATED as DEPRECATED_QUERY, HIDDEN, FROM_TOOLS } from '@shell/config/query-params';
 import { filterAndArrangeCharts } from '@shell/store/catalog';
-import { CATALOG, MANAGEMENT, NORMAN } from '@shell/config/types';
+import { CATALOG, NORMAN } from '@shell/config/types';
 import { CATALOG as CATALOG_ANNOTATIONS } from '@shell/config/labels-annotations';
 import LazyImage from '@shell/components/LazyImage';
-import AppSummaryGraph from '@shell/components/formatter/AppSummaryGraph';
-import { sortBy } from '@shell/utils/sort';
-import { LEGACY } from '@shell/store/features';
 import { isAlternate } from '@shell/utils/platform';
 import IconMessage from '@shell/components/IconMessage';
 import TypeDescription from '@shell/components/TypeDescription';
+import TabTitle from '@shell/components/TabTitle';
 
 export default {
   components: {
-    AppSummaryGraph, LazyImage, Loading, IconMessage, TypeDescription
+    LazyImage, Loading, IconMessage, TypeDescription, TabTitle
   },
 
   async fetch() {
     await this.$store.dispatch('catalog/load', { force: true, reset: true });
 
     const query = this.$route.query;
-    const projects = await this.$store.dispatch('management/findAll', { type: MANAGEMENT.PROJECT });
 
-    this.showDeprecated = query[DEPRECATED] === _FLAGGED;
+    this.showDeprecated = query[DEPRECATED_QUERY] === 'true' || query[DEPRECATED_QUERY] === _FLAGGED;
     this.showHidden = query[HIDDEN] === _FLAGGED;
 
     this.allInstalled = await this.$store.dispatch('cluster/findAll', { type: CATALOG.APP });
-
-    // If legacy feature flag enabled
-    if (this.legacyEnabled) {
-      const res = await this.$store.dispatch('management/findMatching', {
-        type:     MANAGEMENT.CATALOG_TEMPLATE,
-        selector: 'catalog.cattle.io/name=system-library'
-      });
-
-      if (res) {
-        this.v1SystemCatalog = res.reduce((map, template) => {
-          map[template.spec.displayName] = template;
-
-          return map;
-        }, {});
-      } else {
-        this.v1SystemCatalog = {};
-      }
-
-      // Need the project ID of the system project in order to get the apps
-      const systemProject = projects.find((p) => p.spec?.displayName === 'System');
-
-      if (systemProject) {
-        const id = systemProject.id.replace('/', ':');
-
-        this.systemProject = id;
-        await this.$store.dispatch('rancher/findAll', {
-          type: NORMAN.APP,
-          opt:  { url: `/v3/project/${ id }/apps`, force: true }
-        });
-      }
-    }
   },
 
   data() {
-    const legacyEnabled = this.$store.getters['features/get'](LEGACY);
-
     return {
       allInstalled:    null,
       v1SystemCatalog: null,
       systemProject:   null,
-      legacyEnabled,
     };
   },
 
@@ -96,7 +59,7 @@ export default {
     installedAppForChart() {
       const out = {};
 
-      for ( const app of this.installedApps ) {
+      for (const app of (this.installedApps || [])) {
         const matching = app.matchingChart();
 
         if ( !matching ) {
@@ -123,43 +86,21 @@ export default {
 
       charts = charts.filter((c) => c.sideLabel !== 'Experimental');
 
-      //  If legacy support is enabled, show V1 charts for some V1 Cluster tools
-      if (this.legacyEnabled) {
-        charts = charts.concat(this.legacyCharts);
-        charts = sortBy(charts, ['certifiedSort', 'chartNameDisplay']);
-      }
-
-      let chartsWithApps = charts.map((chart) => {
+      const chartsWithApps = charts.map((chart) => {
         return {
           chart,
           app: this.installedAppForChart[chart.id],
         };
       });
 
-      // V1 Legacy support
-      if (this.legacyEnabled) {
-        chartsWithApps = this.checkLegacyApp(chartsWithApps, this.v1Apps, 'v1-monitoring', 'rancher-monitoring', 'cluster-monitoring', false);
-        chartsWithApps = this.checkLegacyApp(chartsWithApps, this.v1Apps, 'v1-istio', 'rancher-istio', 'cluster-istio', true);
-        chartsWithApps = this.checkLegacyApp(chartsWithApps, this.v1Apps, 'v1-logging', 'rancher-logging', 'rancher-logging', true);
-      }
-
       return chartsWithApps;
     },
-
-    legacyCharts() {
-      // Fake charts for the legacy V1 tools
-      return [
-        this._legacyChart('monitoring'),
-        this._legacyChart('logging'),
-        this._legacyChart('istio'),
-      ];
-    }
   },
 
   watch: {
     namespaces() {
       // When the namespaces change, check the v1 apps - might indicate add or removal of a v1 app
-      if (this.legacyEnabled && this.systemProject) {
+      if (this.systemProject) {
         this.$store.dispatch('rancher/findAll', {
           type: NORMAN.APP,
           opt:  { url: `/v3/project/${ this.systemProject }/apps`, force: true }
@@ -173,22 +114,6 @@ export default {
   },
 
   methods: {
-    _legacyChart(id) {
-      return {
-        certifiedSort:    1,
-        chartNameDisplay: this.t(`v1ClusterTools.${ id }.label`),
-        chartDescription: this.t(`v1ClusterTools.${ id }.description`),
-        id:               `v1-${ id }`,
-        chartName:        `v1-${ id }`,
-        key:              `v1-${ id }`,
-        versions:         this.getLegacyVersions(`rancher-${ id }`),
-        repoKey:          this.rancherCatalog?._key,
-        legacy:           true,
-        legacyPage:       id,
-        iconName:         `icon-${ id }`,
-      };
-    },
-
     edit(app, version) {
       app.goToUpgrade(version, true);
     },
@@ -221,55 +146,6 @@ export default {
 
       this.$router.replace(route);
     },
-
-    getLegacyVersions(id) {
-      const versions = [];
-      const c = this.v1SystemCatalog?.[id];
-
-      if (c?.spec?.versions) {
-        c.spec.versions.forEach((v) => versions.push({ version: v.version }));
-      }
-
-      return versions;
-    },
-
-    checkLegacyApp(chartsWithApps, v1Apps, v1ChartName, v2ChartName, v1AppName, showOnlyIfInstalled) {
-      const v1 = chartsWithApps.find((a) => a.chart.chartName === v1ChartName);
-      const v2 = chartsWithApps.find((a) => a.chart.chartName === v2ChartName);
-
-      if (v1) {
-        const v1App = v1Apps.find((a) => a.id.indexOf(v1AppName) > 0);
-
-        v1.app = v1App;
-
-        // Add in the upgrade version information for a legacy v1 app
-        if (v1.app) {
-          v1.app.upgradeAvailable = undefined;
-          // Check if an upgrade is available
-          if (v1.chart.versions?.length) {
-            const latest = v1.chart.versions[0]?.version;
-
-            if (v1.app.currentVersion !== latest) {
-              v1.app.upgradeAvailable = latest;
-            }
-          }
-        } else if (showOnlyIfInstalled) {
-          // Remove the v1 chart if it is not already installed for charts which we no longer support
-          chartsWithApps = chartsWithApps.filter((c) => c !== v1);
-        }
-
-        if (v2) {
-          if (v1.app) {
-            v2.app = undefined;
-            v2.blocked = true;
-          } else if (v2.app) {
-            v1.blocked = true;
-          }
-        }
-      }
-
-      return chartsWithApps;
-    }
   }
 };
 </script>
@@ -330,10 +206,6 @@ export default {
         overflow: hidden;
         background-color: white;
 
-        &.legacy {
-          background-color: transparent;
-        }
-
         img {
           width: $logo - 4px;
           height: $logo - 4px;
@@ -416,9 +288,10 @@ export default {
 <template>
   <Loading v-if="$fetchState.pending" />
   <div v-else-if="options.length">
-    <h1 v-clean-html="t('catalog.tools.header')" />
+    <h1>
+      <TabTitle>{{ t('catalog.tools.header') }}</TabTitle>
+    </h1>
     <TypeDescription
-      v-if="!legacyEnabled"
       resource="chart"
     />
 
@@ -427,10 +300,10 @@ export default {
         v-for="opt in options"
         :key="opt.chart.id"
         class="item"
+        :data-testid="`cluster-tools-app-${opt.chart.id}`"
       >
         <div
           class="logo"
-          :class="{'legacy': opt.chart.legacy}"
         >
           <i
             v-if="opt.chart.iconName"
@@ -470,16 +343,6 @@ export default {
             class="description-content"
           />
         </div>
-        <div
-          v-if="opt.app && !opt.chart.legacy"
-          class="state"
-        >
-          <AppSummaryGraph
-            :row="opt.app"
-            label-key="generic.resourceCount"
-            :link-to="opt.app.detailLocation"
-          />
-        </div>
         <div class="action">
           <template v-if="opt.blocked">
             <button
@@ -488,26 +351,6 @@ export default {
               class="btn btn-sm role-primary"
             />
           </template>
-          <template v-else-if="opt.app && opt.chart.legacy">
-            <button
-              v-clean-html="t('catalog.tools.action.manage')"
-              class="btn btn-sm role-secondary"
-              @click="openV1Tool(opt.chart.legacyPage)"
-            />
-          </template>
-          <template v-else-if="opt.app && opt.upgradeAvailable && !opt.chart.legacy">
-            <button
-              class="btn btn-sm role-secondary"
-              @click="remove(opt.app, $event)"
-            >
-              <i class="icon icon-delete icon-lg" />
-            </button>
-            <button
-              v-clean-html="t('catalog.tools.action.upgrade')"
-              class="btn btn-sm role-secondary"
-              @click="edit(opt.app, opt.app.upgradeAvailable)"
-            />
-          </template>
           <template v-else-if="opt.app">
             <button
               class="btn btn-sm role-secondary"
@@ -521,13 +364,6 @@ export default {
               @click="edit(opt.app)"
             />
           </template>
-          <template v-else-if="opt.chart.legacy">
-            <button
-              v-clean-html="t('catalog.tools.action.install')"
-              class="btn btn-sm role-primary"
-              @click="openV1Tool(opt.chart.legacyPage)"
-            />
-          </template>
           <template v-else>
             <button
               v-clean-html="t('catalog.tools.action.install')"

package/pages/c/_cluster/fleet/index.vue

@@ -32,6 +32,10 @@ export default {
           return !!schema?.links?.collection;
         }
       },
+      clusterGroups: {
+        inStoreType: 'management',
+        type:        FLEET.CLUSTER_GROUP
+      },
       allBundles: {
         inStoreType: 'management',
         type:        FLEET.BUNDLE,
@@ -39,6 +43,10 @@ export default {
       gitRepos: {
         inStoreType: 'management',
         type:        FLEET.GIT_REPO,
+      },
+      fleetClusters: {
+        inStoreType: 'management',
+        type:        FLEET.CLUSTER,
       }
     }, this.$store);
 
@@ -56,7 +64,8 @@ export default {
 
   data() {
     return {
-      headers: [
+      admissableAreas: ['clusters', 'bundles', 'resources'],
+      headers:         [
         {
           name:          'name',
           labelKey:      'tableHeaders.repoName',
@@ -109,7 +118,6 @@ export default {
       }
 
       // When user doesn't have access to the workspaces fall back to namespaces
-
       return this.allNamespaces.filter((item) => {
         return item.metadata.annotations[WORKSPACE_ANNOTATION] === WORKSPACE;
       }).map(( obj ) => {
@@ -151,112 +159,82 @@ export default {
       });
     },
     getStatusInfo(area, row) {
+      const defaultStatusInfo = {
+        badgeClass: `${ STATES[STATES_ENUM.NOT_READY].color } badge-class-default`,
+        icon:       STATES[STATES_ENUM.NOT_READY].compoundIcon
+      };
+
       // classes are defined in the themes SASS files...
-      switch (area) {
-      case 'clusters':
-        if (row.clusterInfo?.ready === row.clusterInfo?.total && row.clusterInfo?.ready) {
-          return {
-            badgeClass: STATES[STATES_ENUM.ACTIVE].color,
-            icon:       STATES[STATES_ENUM.ACTIVE].compoundIcon
-          };
-        }
+      return this.getBadgeClassAndIcon(area, row) || defaultStatusInfo;
+    },
+    getBadgeClassAndIcon(area, row) {
+      let group;
 
-        return {
-          badgeClass: `${ STATES[STATES_ENUM.NOT_READY].color } badge-class-area-clusters`,
-          icon:       STATES[STATES_ENUM.NOT_READY].compoundIcon
-        };
-      case 'bundles':
-        if (row.bundles?.length && row.bundles?.every((bundle) => bundle.state?.toLowerCase() === STATES_ENUM.ACTIVE)) {
-          return {
-            badgeClass: STATES[STATES_ENUM.ACTIVE].color ? STATES[STATES_ENUM.ACTIVE].color : `${ STATES[STATES_ENUM.UNKNOWN].color } bg-unmapped-state`,
-            icon:       STATES[STATES_ENUM.ACTIVE].compoundIcon ? STATES[STATES_ENUM.ACTIVE].compoundIcon : `${ STATES[STATES_ENUM.UNKNOWN].compoundIcon } unmapped-icon`
-          };
-        }
-        if (row.bundles?.length && row.bundles?.some((bundle) => bundle.state?.toLowerCase() === STATES_ENUM.ERR_APPLIED)) {
-          return {
-            badgeClass: STATES[STATES_ENUM.ERR_APPLIED].color ? STATES[STATES_ENUM.ERR_APPLIED].color : `${ STATES[STATES_ENUM.UNKNOWN].color } bg-unmapped-state`,
-            icon:       STATES[STATES_ENUM.ERR_APPLIED].compoundIcon ? STATES[STATES_ENUM.ERR_APPLIED].compoundIcon : `${ STATES[STATES_ENUM.UNKNOWN].compoundIcon } unmapped-icon`
-          };
-        }
-        if (row.bundles?.length && row.bundles?.some((bundle) => bundle.state?.toLowerCase() === STATES_ENUM.NOT_READY)) {
-          return {
-            badgeClass: STATES[STATES_ENUM.NOT_READY].color ? STATES[STATES_ENUM.NOT_READY].color : `${ STATES[STATES_ENUM.UNKNOWN].color } bg-unmapped-state`,
-            icon:       STATES[STATES_ENUM.NOT_READY].compoundIcon ? STATES[STATES_ENUM.NOT_READY].compoundIcon : `${ STATES[STATES_ENUM.UNKNOWN].compoundIcon } unmapped-icon`
-          };
-        }
+      if (!this.admissableAreas.includes(area)) {
+        return false;
+      }
 
-        if (row.bundlesReady?.length === row.bundles?.length && row.bundlesReady && row.bundles?.length) {
-          return {
-            badgeClass: STATES[STATES_ENUM.ACTIVE].color,
-            icon:       STATES[STATES_ENUM.ACTIVE].compoundIcon
-          };
-        }
+      if (area === 'clusters') {
+        group = row.targetClusters;
+      } else if (area === 'bundles') {
+        group = row.bundles;
+      } else if (area === 'resources') {
+        group = row.status?.resources;
+      }
 
+      if (group?.length && group?.every((item) => item.state?.toLowerCase() === STATES_ENUM.ACTIVE)) {
         return {
-          badgeClass: `${ STATES[STATES_ENUM.NOT_READY].color } badge-class-area-bundles`,
-          icon:       STATES[STATES_ENUM.NOT_READY].compoundIcon
+          badgeClass: STATES[STATES_ENUM.ACTIVE].color ? STATES[STATES_ENUM.ACTIVE].color : `${ STATES[STATES_ENUM.UNKNOWN].color } bg-unmapped-state`,
+          icon:       STATES[STATES_ENUM.ACTIVE].compoundIcon ? STATES[STATES_ENUM.ACTIVE].compoundIcon : `${ STATES[STATES_ENUM.UNKNOWN].compoundIcon } unmapped-icon`
         };
-      case 'resources':
-        if (row.status?.resources?.length && row.status?.resources?.every((resource) => resource.state?.toLowerCase() === STATES_ENUM.ACTIVE)) {
-          return {
-            badgeClass: STATES[STATES_ENUM.ACTIVE].color ? STATES[STATES_ENUM.ACTIVE].color : `${ STATES[STATES_ENUM.UNKNOWN].color } bg-unmapped-state`,
-            icon:       STATES[STATES_ENUM.ACTIVE].compoundIcon ? STATES[STATES_ENUM.ACTIVE].compoundIcon : `${ STATES[STATES_ENUM.UNKNOWN].compoundIcon } unmapped-icon`
-          };
-        }
-        if (row.status?.resources?.length && row.status?.resources?.some((resource) => resource.state?.toLowerCase() === STATES_ENUM.ERR_APPLIED)) {
-          return {
-            badgeClass: STATES[STATES_ENUM.ERR_APPLIED].color ? STATES[STATES_ENUM.ERR_APPLIED].color : `${ STATES[STATES_ENUM.UNKNOWN].color } bg-unmapped-state`,
-            icon:       STATES[STATES_ENUM.ERR_APPLIED].compoundIcon ? STATES[STATES_ENUM.ERR_APPLIED].compoundIcon : `${ STATES[STATES_ENUM.UNKNOWN].compoundIcon } unmapped-icon`
-          };
-        }
-        if (row.status?.resources?.length && row.status?.resources?.some((resource) => resource.state?.toLowerCase() === STATES_ENUM.NOT_READY)) {
-          return {
-            badgeClass: STATES[STATES_ENUM.NOT_READY].color ? STATES[STATES_ENUM.NOT_READY].color : `${ STATES[STATES_ENUM.UNKNOWN].color } bg-unmapped-state`,
-            icon:       STATES[STATES_ENUM.NOT_READY].compoundIcon ? STATES[STATES_ENUM.NOT_READY].compoundIcon : `${ STATES[STATES_ENUM.UNKNOWN].compoundIcon } unmapped-icon`
-          };
-        }
+      }
+      if (group?.length && group?.some((item) => item.state?.toLowerCase() === STATES_ENUM.ERR_APPLIED)) {
+        return {
+          badgeClass: STATES[STATES_ENUM.ERR_APPLIED].color ? STATES[STATES_ENUM.ERR_APPLIED].color : `${ STATES[STATES_ENUM.UNKNOWN].color } bg-unmapped-state`,
+          icon:       STATES[STATES_ENUM.ERR_APPLIED].compoundIcon ? STATES[STATES_ENUM.ERR_APPLIED].compoundIcon : `${ STATES[STATES_ENUM.UNKNOWN].compoundIcon } unmapped-icon`
+        };
+      }
+      if (group?.length && group?.some((item) => item.state?.toLowerCase() === STATES_ENUM.NOT_READY)) {
+        return {
+          badgeClass: STATES[STATES_ENUM.NOT_READY].color ? STATES[STATES_ENUM.NOT_READY].color : `${ STATES[STATES_ENUM.UNKNOWN].color } bg-unmapped-state`,
+          icon:       STATES[STATES_ENUM.NOT_READY].compoundIcon ? STATES[STATES_ENUM.NOT_READY].compoundIcon : `${ STATES[STATES_ENUM.UNKNOWN].compoundIcon } unmapped-icon`
+        };
+      }
 
+      if (area === 'resources') {
         if (row.status?.resourceCounts?.desiredReady === row.status?.resourceCounts?.ready && row.status?.resourceCounts?.desiredReady) {
           return {
             badgeClass: STATES[STATES_ENUM.ACTIVE].color,
             icon:       STATES[STATES_ENUM.ACTIVE].compoundIcon
           };
         }
-
-        return {
-          badgeClass: `${ STATES[STATES_ENUM.NOT_READY].color } badge-class-area-resources`,
-          icon:       STATES[STATES_ENUM.NOT_READY].compoundIcon
-        };
-      default:
-        return {
-          badgeClass: `${ STATES[STATES_ENUM.NOT_READY].color } badge-class-default`,
-          icon:       STATES[STATES_ENUM.NOT_READY].compoundIcon
-        };
       }
+
+      return {
+        badgeClass: `${ STATES[STATES_ENUM.NOT_READY].color } badge-class-area-${ area }`,
+        icon:       STATES[STATES_ENUM.NOT_READY].compoundIcon
+      };
     },
     getTooltipInfo(area, row) {
-      switch (area) {
-      case 'clusters':
-        if (row.clusterInfo?.total) {
-          return `Ready: ${ row.clusterInfo?.ready }<br>Total: ${ row.clusterInfo?.total }`;
-        }
+      let group;
 
-        return '';
-      case 'bundles':
-        if (row.bundles?.length) {
-          return this.generateTooltipData(row.bundles);
-        }
+      if (!this.admissableAreas.includes(area)) {
+        return {};
+      }
 
-        return '';
-      case 'resources':
-        if (row.status?.resources?.length) {
-          return this.generateTooltipData(row.status?.resources);
-        }
+      if (area === 'clusters') {
+        group = row.targetClusters;
+      } else if (area === 'bundles') {
+        group = row.bundles;
+      } else if (area === 'resources') {
+        group = row.status?.resources;
+      }
 
-        return '';
-      default:
-        return {};
+      if (group?.length) {
+        return this.generateTooltipData(group);
       }
+
+      return '';
     },
     generateTooltipData(data) {
       const infoObj = {};
@@ -276,6 +254,23 @@ export default {
 
       return tooltipData;
     },
+    getBadgeValue(area, row) {
+      let value;
+
+      if (!this.admissableAreas.includes(area)) {
+        return 'N/A';
+      }
+
+      if (area === 'clusters') {
+        value = `${ row.targetClustersReady?.length || '0' }/${ row.targetClusters?.length || '?' }`;
+      } else if (area === 'bundles') {
+        value = `${ row.bundlesReady?.length || '0' }/${ row.bundles?.length || '?' }`;
+      } else if (area === 'resources') {
+        value = `${ row.status?.resourceCounts?.ready || '0' }/${ row.status?.resourceCounts?.desiredReady || '?' }`;
+      }
+
+      return value;
+    },
     toggleCollapse(val, key) {
       this.$set(this.isCollapsed, key, val);
     },
@@ -326,12 +321,12 @@ export default {
         <h3 class="mb-30">
           {{ t('fleet.dashboard.noRepo', null, true) }}
         </h3>
-        <n-link
+        <router-link
           :to="getStartedLink"
           class="btn role-secondary"
         >
           {{ t('fleet.dashboard.getStarted') }}
-        </n-link>
+        </router-link>
       </template>
     </div>
     <!-- fleet dashboard with repos -->
@@ -416,7 +411,7 @@ export default {
                 :tooltip-text="getTooltipInfo('clusters', row)"
                 :badge-class="getStatusInfo('clusters', row).badgeClass"
                 :icon="getStatusInfo('clusters', row).icon"
-                :value="`${ row.clusterInfo.ready }/${ row.clusterInfo.total }`"
+                :value="getBadgeValue('clusters', row)"
               />
             </template>
             <template #cell:bundlesReady="{row}">
@@ -427,7 +422,7 @@ export default {
                 :tooltip-text="getTooltipInfo('bundles', row)"
                 :badge-class="getStatusInfo('bundles', row).badgeClass"
                 :icon="getStatusInfo('bundles', row).icon"
-                :value="`${ row.bundlesReady.length || 0 }/${ row.bundles.length }`"
+                :value="getBadgeValue('bundles', row)"
               />
             </template>
             <template #cell:resourcesReady="{row}">
@@ -436,7 +431,7 @@ export default {
                 :tooltip-text="getTooltipInfo('resources', row)"
                 :badge-class="getStatusInfo('resources', row).badgeClass"
                 :icon="getStatusInfo('resources', row).icon"
-                :value="`${ row.status.resourceCounts.ready }/${ row.status.resourceCounts.desiredReady }`"
+                :value="getBadgeValue('resources', row)"
               />
             </template>
 

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

@@ -0,0 +1,89 @@
+import { shallowMount } from '@vue/test-utils';
+
+import IconMessage from '@shell/components/IconMessage';
+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 = {
+    $fetchState: { pending: false },
+    $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: {
+        IconMessage: { template: '<span />' },
+        LazyImage:   { template: '<span />' },
+      }
+    });
+
+    expect(wrapper.vm.externalLinks).toStrictEqual([]);
+  });
+
+  it('populates externalLinks proxy link correctly when uiServices contain service', async() => {
+    const proxyUrl = `/k8s/clusters/_/api/v1/namespaces/${ longhornFrontend.metadata.namespace }/services/http:longhorn-frontend:80/proxy/`;
+
+    interface LinkConfig {
+      enabled: boolean;
+      iconSrc: string;
+      label: string;
+      description: string;
+      link: string;
+    }
+
+    const wrapper = createWrapper({
+      computed: { currentCluster: () => ({ id: '_' }) },
+      stubs:    {
+        Banner:    { template: '<span />' },
+        LazyImage: { template: '<span />' },
+      }
+    });
+
+    wrapper.setData({ uiServices: [longhornFrontend] });
+
+    await wrapper.vm.$nextTick();
+
+    const containsProxyUrl = wrapper.vm.externalLinks.find((link: LinkConfig) => link.link);
+
+    expect(containsProxyUrl).toBeTruthy();
+    expect(containsProxyUrl.link).toStrictEqual(proxyUrl);
+  });
+
+  it('displays IconMessage when externalLinks array is empty', () => {
+    const wrapper = createWrapper({ stubs: { LazyImage: { template: '<span />' } } });
+
+    expect(wrapper.vm.externalLinks).toStrictEqual([]);
+
+    const iconMessage = wrapper.findComponent(IconMessage);
+
+    expect(iconMessage.exists()).toBe(true);
+  });
+});