@rancher/shell 3.0.12-rc.2 → 3.0.12-rc.3

package/components/formatter/__tests__/FleetSummaryGraph.test.ts

@@ -0,0 +1,216 @@
+import { shallowMount } from '@vue/test-utils';
+import FleetSummaryGraph from '@shell/components/formatter/FleetSummaryGraph.vue';
+import { FLEET } from '@shell/config/types';
+import { ExtendedVue, Vue } from 'vue/types/vue';
+import { DefaultProps } from 'vue/types/options';
+
+const FleetSummaryGraphComponent = FleetSummaryGraph as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>;
+
+function makeRow({
+  type = FLEET.GIT_REPO,
+  resourceCounts = {},
+  targetClusters = [],
+  statusResourceCountsForCluster = undefined,
+}: {
+  type?: string;
+  resourceCounts?: Record<string, number>;
+  targetClusters?: any[];
+  statusResourceCountsForCluster?: any;
+} = {}) {
+  const row: Record<string, any> = {
+    id:     'test-ns/test-row',
+    type,
+    status: { resourceCounts },
+    targetClusters,
+  };
+
+  if (statusResourceCountsForCluster !== undefined) {
+    row.statusResourceCountsForCluster = statusResourceCountsForCluster;
+  }
+
+  return row;
+}
+
+describe('component: FleetSummaryGraph', () => {
+  describe('summary', () => {
+    it('returns status.resourceCounts for GitRepo rows', () => {
+      const resourceCounts = {
+        desiredReady: 7,
+        ready:        7,
+      };
+      const wrapper = shallowMount(FleetSummaryGraphComponent, {
+        propsData: {
+          row: makeRow({
+            resourceCounts,
+            targetClusters: [{ id: 'cluster-1' }],
+          }),
+        },
+      });
+
+      expect((wrapper.vm as any).summary).toStrictEqual(resourceCounts);
+    });
+
+    it('returns status.resourceCounts for HelmOp rows', () => {
+      const resourceCounts = {
+        desiredReady: 3,
+        ready:        2,
+        modified:     1,
+      };
+      const wrapper = shallowMount(FleetSummaryGraphComponent, {
+        propsData: {
+          row: makeRow({
+            type:           FLEET.HELM_OP,
+            resourceCounts,
+            targetClusters: [{ id: 'cluster-1' }],
+          }),
+        },
+      });
+
+      expect((wrapper.vm as any).summary).toStrictEqual(resourceCounts);
+    });
+
+    it('does not return function when row has statusResourceCountsForCluster as a method', () => {
+      const resourceCounts = {
+        desiredReady: 5,
+        ready:        5,
+      };
+      const wrapper = shallowMount(FleetSummaryGraphComponent, {
+        propsData: {
+          row: makeRow({
+            resourceCounts,
+            targetClusters:                 [{ id: 'cluster-1' }],
+            // Simulate a class method — the bug was that a truthy function
+            // caused summary to return the function itself instead of resourceCounts
+            statusResourceCountsForCluster: (clusterId: string) => ({ desiredReady: 0 }),
+          }),
+        },
+      });
+
+      const summary = (wrapper.vm as any).summary;
+
+      expect(typeof summary).not.toBe('function');
+      expect(summary).toStrictEqual(resourceCounts);
+    });
+
+    it('calls statusResourceCountsForCluster with clusterId when clusterId prop is set', () => {
+      const perClusterData = {
+        desiredReady: 2,
+        ready:        1,
+      };
+      const mockFn = jest.fn().mockReturnValue(perClusterData);
+
+      const wrapper = shallowMount(FleetSummaryGraphComponent, {
+        propsData: {
+          row:       makeRow({ statusResourceCountsForCluster: mockFn }),
+          clusterId: 'cluster-1',
+        },
+      });
+
+      expect((wrapper.vm as any).summary).toStrictEqual(perClusterData);
+      expect(mockFn).toHaveBeenCalledWith('cluster-1');
+    });
+
+    it('returns empty object when status.resourceCounts is undefined', () => {
+      const wrapper = shallowMount(FleetSummaryGraphComponent, { propsData: { row: makeRow() } });
+
+      expect((wrapper.vm as any).summary).toStrictEqual({});
+    });
+  });
+
+  describe('show', () => {
+    it('returns true when stateParts exist and row has targetClusters', () => {
+      const wrapper = shallowMount(FleetSummaryGraphComponent, {
+        propsData: {
+          row: makeRow({
+            resourceCounts: {
+              desiredReady: 5,
+              ready:        5,
+            },
+            targetClusters: [{ id: 'cluster-1' }],
+          }),
+        },
+      });
+
+      expect((wrapper.vm as any).show).toBeTruthy();
+    });
+
+    it('returns false when stateParts exist but targetClusters is empty', () => {
+      const wrapper = shallowMount(FleetSummaryGraphComponent, {
+        propsData: {
+          row: makeRow({
+            resourceCounts: {
+              desiredReady: 5,
+              ready:        5,
+            },
+            targetClusters: [],
+          }),
+        },
+      });
+
+      expect((wrapper.vm as any).show).toBeFalsy();
+    });
+
+    it('returns true for FLEET.CLUSTER type even without targetClusters', () => {
+      const wrapper = shallowMount(FleetSummaryGraphComponent, {
+        propsData: {
+          row: makeRow({
+            type:           FLEET.CLUSTER,
+            resourceCounts: {
+              desiredReady: 3,
+              ready:        3,
+            },
+          }),
+        },
+      });
+
+      expect((wrapper.vm as any).show).toBeTruthy();
+    });
+
+    it('returns false when resourceCounts is empty', () => {
+      const wrapper = shallowMount(FleetSummaryGraphComponent, { propsData: { row: makeRow({ targetClusters: [{ id: 'cluster-1' }] }) } });
+
+      expect((wrapper.vm as any).show).toBeFalsy();
+    });
+  });
+
+  describe('stateParts', () => {
+    it('filters out keys starting with "desired"', () => {
+      const wrapper = shallowMount(FleetSummaryGraphComponent, {
+        propsData: {
+          row: makeRow({
+            resourceCounts: {
+              desiredReady: 5,
+              ready:        5,
+            },
+            targetClusters: [{ id: 'cluster-1' }],
+          }),
+        },
+      });
+
+      const parts = (wrapper.vm as any).stateParts;
+
+      expect(parts.every((p: any) => !p.label.startsWith('Desired'))).toBe(true);
+    });
+
+    it('filters out entries with value 0', () => {
+      const wrapper = shallowMount(FleetSummaryGraphComponent, {
+        propsData: {
+          row: makeRow({
+            resourceCounts: {
+              desiredReady: 5,
+              ready:        5,
+              notReady:     0,
+            },
+            targetClusters: [{ id: 'cluster-1' }],
+          }),
+        },
+      });
+
+      const parts = (wrapper.vm as any).stateParts;
+      const labels = parts.map((p: any) => p.label);
+
+      expect(labels).toContain('Ready');
+      expect(labels).not.toContain('NotReady');
+    });
+  });
+});

package/components/formatter/__tests__/PodsUsage.test.ts

@@ -7,11 +7,9 @@ describe('component: PodsUsage', () => {
       props: {
         row: {
           isReady: true,
-          mgmt:    {
-            status: {
-              requested:   { pods: 10 },
-              allocatable: { pods: 20 }
-            }
+          status:  {
+            requested:   { pods: 10 },
+            allocatable: { pods: 20 }
           }
         }
       },
@@ -28,11 +26,9 @@ describe('component: PodsUsage', () => {
       props: {
         row: {
           isReady: true,
-          mgmt:    {
-            status: {
-              requested:   { pods: 10 },
-              allocatable: { pods: 0 }
-            }
+          status:  {
+            requested:   { pods: 10 },
+            allocatable: { pods: 0 }
           }
         }
       },

package/components/nav/NamespaceFilter.vue

@@ -1005,8 +1005,8 @@ export default {
     .ns-filter-clear {
       cursor: pointer;
       position: absolute;
-      right: 10px;
-      top: 10px;
+      right: 12px;
+      top: 5px;
       line-height: 24px;
       text-align: center;
       width: 14px;

package/components/nav/TopLevelMenu.helper.ts

@@ -35,7 +35,18 @@ interface UpdateArgs {
 }
 
 type MgmtCluster = {
-  [key: string]: any
+  [key: string]: any,
+  id: string,
+  nameDisplay: string,
+  canExplore: boolean,
+  providerMenuLogo: string,
+  badge: string,
+  iconColor: string,
+  isLocal: boolean,
+  pinned: boolean,
+  description: string,
+  pin: () => void
+  unpin: () => void
 }
 
 type ProvCluster = {
@@ -148,7 +159,8 @@ export abstract class BaseTopLevelMenuHelper {
     return {
       id:              mgmtCluster.id,
       label:           mgmtCluster.nameDisplay,
-      ready:           mgmtCluster.isReady,
+      // Align side nav cluster, home page name link and cluster management cluster explore buttons on canExplore
+      ready:           mgmtCluster.canExplore,
       providerNavLogo: mgmtCluster.providerMenuLogo,
       badge:           mgmtCluster.badge,
       iconColor:       mgmtCluster.iconColor,
@@ -488,7 +500,7 @@ export class TopLevelMenuHelperLegacy extends BaseTopLevelMenuHelper implements
     const maxClustersToShow = args.unPinnedMax || 10;
 
     const search = (clusterFilter || '').toLowerCase();
-    let localCluster: MgmtCluster | null = null;
+    let localCluster: TopLevelMenuCluster | null = null;
 
     const filtered = clusters.filter((c) => {
       // If we're searching we don't care if pinned or not

package/components/nav/TopLevelMenu.vue

@@ -98,6 +98,17 @@ export default {
       return count?.summary.count;
     },
 
+    routeComboActive() {
+      if (!this.routeCombo) {
+        return false;
+      }
+
+      const ready = [...this.appBar.pinFiltered, ...this.appBar.clustersFiltered].filter((c) => c.ready);
+      const readyCount = ready.length;
+
+      return readyCount > 1 || (readyCount === 1 && this.clusterId !== ready[0].id);
+    },
+
     // New
     search() {
       return (this.clusterFilter || '').toLowerCase();
@@ -386,7 +397,7 @@ export default {
     },
 
     clusterMenuClick(ev, cluster) {
-      if (this.routeCombo) {
+      if (this.routeComboActive) {
         ev.preventDefault();
 
         if (this.isCurrRouteClusterExplorer && this.productFromRoute === this.currentProduct?.name) {
@@ -423,7 +434,7 @@ export default {
     },
 
     async goToHarvesterCluster() {
-      const localCluster = this.$store.getters['management/all'](CAPI.RANCHER_CLUSTER).find((C) => C.id === 'fleet-local/local');
+      const localCluster = this.$store.getters['management/byId'](CAPI.RANCHER_CLUSTER, 'fleet-local/local');
 
       try {
         await localCluster.goToHarvesterCluster();
@@ -446,7 +457,7 @@ export default {
         content = this.shown ? null : contentText;
 
       // if key combo is pressed, then we update the tooltip as well
-      } else if (this.routeCombo &&
+      } else if (this.routeComboActive &&
         typeof item === 'object' &&
         !Array.isArray(item) &&
         item !== null &&
@@ -706,7 +717,7 @@ export default {
                     <ClusterIconMenu
                       v-clean-tooltip="getTooltipConfig(c, true)"
                       :cluster="c"
-                      :route-combo="routeCombo"
+                      :route-combo="routeComboActive"
                       class="rancher-provider-icon"
                     />
                     <div
@@ -785,7 +796,7 @@ export default {
                     <ClusterIconMenu
                       v-clean-tooltip="getTooltipConfig(c, true)"
                       :cluster="c"
-                      :route-combo="routeCombo"
+                      :route-combo="routeComboActive"
                       class="rancher-provider-icon"
                     />
                     <div

package/components/nav/__tests__/TopLevelMenu.test.ts

@@ -110,28 +110,28 @@ describe('topLevelMenu', () => {
                 id:          'an-id1',
                 mgmt:        { id: 'an-id1' },
                 nameDisplay: 'c-cluster',
-                isReady:     true
+                canExplore:  true
               },
               {
                 name:        'x33-cwf5-name',
                 id:          'an-id2',
                 mgmt:        { id: 'an-id2' },
                 nameDisplay: 'a-cluster',
-                isReady:     true
+                canExplore:  true
               },
               {
                 name:        'x34-cwf5-name',
                 id:          'an-id3',
                 mgmt:        { id: 'an-id3' },
                 nameDisplay: 'b-cluster',
-                isReady:     true
+                canExplore:  true
               },
               {
                 name:        'local-name',
                 id:          'local',
                 mgmt:        { id: 'local' },
                 nameDisplay: 'local',
-                isReady:     true
+                canExplore:  true
               },
             ])
           }
@@ -156,28 +156,28 @@ describe('topLevelMenu', () => {
         id:          'an-id1',
         mgmt:        { id: 'an-id1' },
         nameDisplay: 'c-cluster',
-        isReady:     true
+        canExplore:  true
       },
       {
         name:        'x33-cwf5-name',
         id:          'an-id2',
         mgmt:        { id: 'an-id2' },
         nameDisplay: 'a-cluster',
-        isReady:     false
+        canExplore:  false
       },
       {
         name:        'x34-cwf5-name',
         id:          'an-id3',
         mgmt:        { id: 'an-id3' },
         nameDisplay: 'b-cluster',
-        isReady:     true
+        canExplore:  true
       },
       {
         name:        'local-name',
         id:          'local',
         mgmt:        { id: 'local' },
         nameDisplay: 'local',
-        isReady:     true,
+        canExplore:  true,
         isLocal:     true,
       },
     ];
@@ -195,9 +195,9 @@ describe('topLevelMenu', () => {
     await waitForIt();
 
     expect(wrapper.find('[data-testid="top-level-menu-cluster-0"] .cluster-name p').text()).toStrictEqual('local');
+    expect(wrapper.find('[data-testid="top-level-menu-cluster-3"] .cluster-name p').text()).toStrictEqual('a-cluster');
     expect(wrapper.find('[data-testid="top-level-menu-cluster-1"] .cluster-name p').text()).toStrictEqual('b-cluster');
     expect(wrapper.find('[data-testid="top-level-menu-cluster-2"] .cluster-name p').text()).toStrictEqual('c-cluster');
-    expect(wrapper.find('[data-testid="top-level-menu-cluster-3"] .cluster-name p').text()).toStrictEqual('a-cluster');
   });
 
   it('should show local cluster always on top of the list of clusters (pinned and ready clusters)', async() => {
@@ -212,7 +212,7 @@ describe('topLevelMenu', () => {
                 id:          'an-id1',
                 mgmt:        { id: 'an-id1' },
                 nameDisplay: 'c-cluster',
-                isReady:     true,
+                canExplore:  true,
                 pinned:      true
               },
               {
@@ -220,7 +220,7 @@ describe('topLevelMenu', () => {
                 id:          'an-id2',
                 mgmt:        { id: 'an-id2' },
                 nameDisplay: 'a-cluster',
-                isReady:     true,
+                canExplore:  true,
                 pinned:      true
               },
               {
@@ -228,7 +228,7 @@ describe('topLevelMenu', () => {
                 id:          'an-id3',
                 mgmt:        { id: 'an-id3' },
                 nameDisplay: 'b-cluster',
-                isReady:     true,
+                canExplore:  true,
                 pinned:      true
               },
               {
@@ -236,7 +236,7 @@ describe('topLevelMenu', () => {
                 id:          'local',
                 mgmt:        { id: 'local' },
                 nameDisplay: 'local',
-                isReady:     true,
+                canExplore:  true,
                 pinned:      true
               },
             ])
@@ -271,7 +271,7 @@ describe('topLevelMenu', () => {
                 id:          'an-id1',
                 mgmt:        { id: 'an-id1' },
                 nameDisplay: 'c-cluster',
-                isReady:     true,
+                canExplore:  true,
                 pinned:      true
               },
               {
@@ -279,7 +279,7 @@ describe('topLevelMenu', () => {
                 id:          'an-id2',
                 mgmt:        { id: 'an-id2' },
                 nameDisplay: 'a-cluster',
-                isReady:     true,
+                canExplore:  true,
                 pinned:      true
               },
               {
@@ -287,7 +287,7 @@ describe('topLevelMenu', () => {
                 id:          'an-id3',
                 mgmt:        { id: 'an-id3' },
                 nameDisplay: 'b-cluster',
-                isReady:     false,
+                canExplore:  false,
                 pinned:      true
               },
               {
@@ -295,7 +295,7 @@ describe('topLevelMenu', () => {
                 id:          'local',
                 mgmt:        { id: 'local' },
                 nameDisplay: 'local',
-                isReady:     true,
+                canExplore:  true,
                 pinned:      true
               },
             ])
@@ -328,7 +328,7 @@ describe('topLevelMenu', () => {
                 mgmt:        { id: 'an-id1' },
                 description: 'some-description1',
                 nameDisplay: 'some-label',
-                isReady:     true,
+                canExplore:  true,
                 pinned:      true
               },
               // pinned NOT ready cluster
@@ -347,7 +347,7 @@ describe('topLevelMenu', () => {
                 mgmt:        { id: 'an-id3' },
                 description: 'some-description3',
                 nameDisplay: 'some-label',
-                isReady:     true
+                canExplore:  true
               },
               // unpinned NOT ready cluster
               {
@@ -392,7 +392,7 @@ describe('topLevelMenu', () => {
                 mgmt:        { id: 'an-id1' },
                 description: 'some-description1',
                 nameDisplay: 'some-label',
-                isReady:     true,
+                canExplore:  true,
                 pinned:      true
               },
               // pinned NOT ready cluster
@@ -411,7 +411,7 @@ describe('topLevelMenu', () => {
                 mgmt:        { id: 'an-id3' },
                 description: 'some-description3',
                 nameDisplay: 'some-label',
-                isReady:     true
+                canExplore:  true
               },
               // unpinned NOT ready cluster
               {
@@ -713,4 +713,128 @@ describe('topLevelMenu', () => {
       expect(wrapper.vm.mgmtClusters).toStrictEqual([]);
     });
   });
+
+  describe('computed properties', () => {
+    describe('routeComboActive', () => {
+      it('should be true when routeCombo is true and there are multiple ready clusters', async() => {
+        const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
+          global: {
+            mocks: {
+              $route: {},
+              $store: {
+                ...generateStore([
+                  {
+                    nameDisplay: 'cluster1',
+                    id:          'an-id1',
+                    mgmt:        { id: 'an-id1' },
+                    canExplore:  true
+                  },
+                  {
+                    nameDisplay: 'cluster2',
+                    id:          'an-id2',
+                    mgmt:        { id: 'an-id2' },
+                    canExplore:  true
+                  }
+                ])
+              }
+            },
+            stubs: ['BrandImage', 'router-link'],
+          }
+        });
+
+        await waitForIt();
+        await wrapper.setData({ routeCombo: true });
+
+        expect(wrapper.vm.routeComboActive).toBe(true);
+      });
+
+      it('should be false when routeCombo is false', async() => {
+        const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
+          global: {
+            mocks: {
+              $route: {},
+              $store: {
+                ...generateStore([
+                  {
+                    nameDisplay: 'cluster1',
+                    id:          'an-id1',
+                    mgmt:        { id: 'an-id1' },
+                    canExplore:  true
+                  },
+                  {
+                    nameDisplay: 'cluster2',
+                    id:          'an-id2',
+                    mgmt:        { id: 'an-id2' },
+                    canExplore:  true
+                  }
+                ])
+              }
+            },
+            stubs: ['BrandImage', 'router-link'],
+          }
+        });
+
+        await waitForIt();
+        await wrapper.setData({ routeCombo: false });
+
+        expect(wrapper.vm.routeComboActive).toBe(false);
+      });
+
+      it('should be false when there is only one ready cluster and it is the current cluster', async() => {
+        const store = generateStore([
+          {
+            nameDisplay: 'cluster1',
+            id:          'an-id1',
+            mgmt:        { id: 'an-id1' },
+            canExplore:  true
+          }
+        ]);
+
+        store.getters.clusterId = 'an-id1' as any;
+
+        const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
+          global: {
+            mocks: {
+              $route: {},
+              $store: store
+            },
+            stubs: ['BrandImage', 'router-link'],
+          }
+        });
+
+        await waitForIt();
+        await wrapper.setData({ routeCombo: true });
+
+        expect(wrapper.vm.routeComboActive).toBe(false);
+      });
+
+      it('should be true when there is only one ready cluster but it is not the current cluster', async() => {
+        const store = generateStore([
+          {
+            nameDisplay: 'cluster1',
+            id:          'an-id1',
+            mgmt:        { id: 'an-id1' },
+            canExplore:  true
+          }
+        ]);
+
+        store.getters.clusterId = 'some-other-cluster-id' as any;
+
+        const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
+          global: {
+            mocks: {
+              $route: {},
+              $store: store
+            },
+            stubs: ['BrandImage', 'router-link'],
+          }
+        });
+
+        await waitForIt();
+        await wrapper.setData({ routeCombo: true });
+
+        expect(wrapper.vm.routeComboActive).toBe(true);
+      });
+    });
+  });
 });