@rancher/shell 2.0.2-rc.1 → 2.0.3

package/components/nav/TopLevelMenu.vue

@@ -76,58 +76,102 @@ export default {
       return this.clusters.length > this.maxClustersToShow;
     },
 
+    /**
+     * Filter mgmt clusters by
+     * 1. Harvester type 1 (filterOnlyKubernetesClusters)
+     * 2. Harvester type 2 (filterHiddenLocalCluster)
+     * 3. There's a matching prov cluster
+     *
+     * Convert remaining clusters to special format
+     */
     clusters() {
-      const all = this.$store.getters['management/all'](MANAGEMENT.CLUSTER);
-      let kubeClusters = filterHiddenLocalCluster(filterOnlyKubernetesClusters(all, this.$store), this.$store);
-      let pClusters = null;
+      if (!this.hasProvCluster) {
+        // We're filtering out mgmt clusters without prov clusters, so if the user can't see any prov clusters at all
+        // exit early
+        return [];
+      }
 
-      if (this.hasProvCluster) {
-        pClusters = this.$store.getters['management/all'](CAPI.RANCHER_CLUSTER);
-        const available = pClusters.reduce((p, c) => {
-          p[c.mgmt] = true;
+      const all = this.$store.getters['management/all'](MANAGEMENT.CLUSTER);
+      const mgmtClusters = filterHiddenLocalCluster(filterOnlyKubernetesClusters(all, this.$store), this.$store);
+      const provClusters = this.$store.getters['management/all'](CAPI.RANCHER_CLUSTER);
+      const provClustersByMgmtId = provClusters.reduce((res, provCluster) => {
+        if (provCluster.mgmt?.id) {
+          res[provCluster.mgmt.id] = provCluster;
+        }
 
-          return p;
-        }, {});
+        return res;
+      }, {});
 
+      return (mgmtClusters || []).reduce((res, mgmtCluster) => {
         // Filter to only show mgmt clusters that exist for the available provisioning clusters
         // Addresses issue where a mgmt cluster can take some time to get cleaned up after the corresponding
         // provisioning cluster has been deleted
-        kubeClusters = kubeClusters.filter((c) => !!available[c]);
-      }
+        if (!provClustersByMgmtId[mgmtCluster.id]) {
+          return res;
+        }
 
-      return kubeClusters?.map((x) => {
-        const pCluster = pClusters?.find((c) => c.mgmt?.id === x.id);
+        const pCluster = provClustersByMgmtId[mgmtCluster.id];
+
+        res.push({
+          id:              mgmtCluster.id,
+          label:           mgmtCluster.nameDisplay,
+          ready:           mgmtCluster.isReady && !pCluster?.hasError,
+          osLogo:          mgmtCluster.providerOsLogo,
+          providerNavLogo: mgmtCluster.providerMenuLogo,
+          badge:           mgmtCluster.badge,
+          isLocal:         mgmtCluster.isLocal,
+          isHarvester:     mgmtCluster.isHarvester,
+          pinned:          mgmtCluster.pinned,
+          description:     pCluster?.description || mgmtCluster.description,
+          pin:             () => mgmtCluster.pin(),
+          unpin:           () => mgmtCluster.unpin(),
+          clusterRoute:    { name: 'c-cluster-explorer', params: { cluster: mgmtCluster.id } }
+        });
 
-        return {
-          id:              x.id,
-          label:           x.nameDisplay,
-          ready:           x.isReady && !pCluster?.hasError,
-          osLogo:          x.providerOsLogo,
-          providerNavLogo: x.providerMenuLogo,
-          badge:           x.badge,
-          isLocal:         x.isLocal,
-          isHarvester:     x.isHarvester,
-          pinned:          x.pinned,
-          description:     pCluster?.description || x.description,
-          pin:             () => x.pin(),
-          unpin:           () => x.unpin(),
-          clusterRoute:    { name: 'c-cluster-explorer', params: { cluster: x.id } }
-        };
-      }) || [];
+        return res;
+      }, []);
     },
 
+    /**
+     * Filter clusters by
+     * 1. Not pinned
+     * 2. Includes search term
+     *
+     * Sort remaining clusters
+     *
+     * Reduce number of clusters if too many too show
+     *
+     * Important! This is used to show unpinned clusters OR results of search
+     */
     clustersFiltered() {
       const search = (this.clusterFilter || '').toLowerCase();
-      const out = search ? this.clusters.filter((item) => item.label?.toLowerCase().includes(search)) : this.clusters;
-      const sorted = sortBy(out, ['ready:desc', 'label']);
+      let localCluster = null;
 
-      // put local cluster on top of list always
-      // https://github.com/rancher/dashboard/issues/10975
-      if (sorted.findIndex((c) => c.id === 'local') > 0) {
-        const localCluster = sorted.find((c) => c.id === 'local');
-        const localIndex = sorted.findIndex((c) => c.id === 'local');
+      const filtered = this.clusters.filter((c) => {
+        // If we're searching we don't care if pinned or not
+        if (search) {
+          if (!c.label?.toLowerCase().includes(search)) {
+            return false;
+          }
+        } else if (c.pinned) {
+          // Not searching, not pinned, don't care
+          return false;
+        }
+
+        if (!localCluster && c.id === 'local') {
+          // Local cluster is a special case, we're inserting it at top so don't include in the middle
+          localCluster = c;
+
+          return false;
+        }
 
-        sorted.splice(localIndex, 1);
+        return true;
+      });
+
+      const sorted = sortBy(filtered, ['ready:desc', 'label']);
+
+      // put local cluster on top of list always - https://github.com/rancher/dashboard/issues/10975
+      if (localCluster) {
         sorted.unshift(localCluster);
       }
 
@@ -141,25 +185,45 @@ export default {
       this.searchActive = false;
 
       if (sorted.length >= this.maxClustersToShow) {
-        const sortedPinOut = sorted.filter((item) => !item.pinned).slice(0, this.maxClustersToShow);
-
-        return sortedPinOut;
-      } else {
-        return sorted.filter((item) => !item.pinned);
+        return sorted.slice(0, this.maxClustersToShow);
       }
+
+      return sorted;
     },
 
+    /**
+     * Filter clusters by
+     * 1. Not pinned
+     * 2. Includes search term
+     *
+     * Sort remaining clusters
+     *
+     * Reduce number of clusters if too many too show
+     *
+     * Important! This is hidden if there's a filter (user searching)
+     */
     pinFiltered() {
-      const out = this.clusters.filter((item) => item.pinned);
-      const sorted = sortBy(out, ['ready:desc', 'label']);
+      let localCluster = null;
+      const filtered = this.clusters.filter((c) => {
+        if (!c.pinned) {
+          // We only care about pinned clusters
+          return false;
+        }
+
+        if (c.id === 'local') {
+          // Special case, we're going to add this at the start so filter out
+          localCluster = c;
+
+          return false;
+        }
+
+        return true;
+      });
 
-      // put local cluster on top of list always
-      // https://github.com/rancher/dashboard/issues/10975
-      if (sorted.findIndex((c) => c.id === 'local') > 0) {
-        const localCluster = sorted.find((c) => c.id === 'local');
-        const localIndex = sorted.findIndex((c) => c.id === 'local');
+      const sorted = sortBy(filtered, ['ready:desc', 'label']);
 
-        sorted.splice(localIndex, 1);
+      // put local cluster on top of list always - https://github.com/rancher/dashboard/issues/10975
+      if (localCluster) {
         sorted.unshift(localCluster);
       }
 
@@ -167,7 +231,7 @@ export default {
     },
 
     pinnedClustersHeight() {
-      const pinCount = this.clusters.filter((item) => item.pinned).length;
+      const pinCount = this.pinFiltered.length;
       const height = pinCount > 2 ? (pinCount * 43) : 90;
 
       return `min-height: ${ height }px`;
@@ -494,7 +558,7 @@ export default {
                 :to="{ name: 'home' }"
               >
                 <svg
-                  v-tooltip="getTooltipConfig(t('nav.home'))"
+                  v-clean-tooltip="getTooltipConfig(t('nav.home'))"
                   xmlns="http://www.w3.org/2000/svg"
                   height="24"
                   viewBox="0 0 24 24"
@@ -608,13 +672,13 @@ export default {
                     @shortkey="handleKeyComboClick"
                   >
                     <ClusterIconMenu
-                      v-tooltip="getTooltipConfig(c, true)"
+                      v-clean-tooltip="getTooltipConfig(c, true)"
                       :cluster="c"
                       :route-combo="routeCombo"
                       class="rancher-provider-icon"
                     />
                     <div
-                      v-tooltip="getTooltipConfig(c)"
+                      v-clean-tooltip="getTooltipConfig(c)"
                       class="cluster-name"
                     >
                       <p>{{ c.label }}</p>
@@ -635,12 +699,12 @@ export default {
                     :data-testid="`pinned-menu-cluster-disabled-${ c.id }`"
                   >
                     <ClusterIconMenu
-                      v-tooltip="getTooltipConfig(c, true)"
+                      v-clean-tooltip="getTooltipConfig(c, true)"
                       :cluster="c"
                       class="rancher-provider-icon"
                     />
                     <div
-                      v-tooltip="getTooltipConfig(c)"
+                      v-clean-tooltip="getTooltipConfig(c)"
                       class="cluster-name"
                     >
                       <p>{{ c.label }}</p>
@@ -683,13 +747,13 @@ export default {
                     @shortkey="handleKeyComboClick"
                   >
                     <ClusterIconMenu
-                      v-tooltip="getTooltipConfig(c, true)"
+                      v-clean-tooltip="getTooltipConfig(c, true)"
                       :cluster="c"
                       :route-combo="routeCombo"
                       class="rancher-provider-icon"
                     />
                     <div
-                      v-tooltip="getTooltipConfig(c)"
+                      v-clean-tooltip="getTooltipConfig(c)"
                       class="cluster-name"
                     >
                       <p>{{ c.label }}</p>
@@ -711,12 +775,12 @@ export default {
                     :data-testid="`menu-cluster-disabled-${ c.id }`"
                   >
                     <ClusterIconMenu
-                      v-tooltip="getTooltipConfig(c, true)"
+                      v-clean-tooltip="getTooltipConfig(c, true)"
                       :cluster="c"
                       class="rancher-provider-icon"
                     />
                     <div
-                      v-tooltip="getTooltipConfig(c)"
+                      v-clean-tooltip="getTooltipConfig(c)"
                       class="cluster-name"
                     >
                       <p>{{ c.label }}</p>
@@ -783,7 +847,7 @@ export default {
                   :to="a.to"
                 >
                   <IconOrSvg
-                    v-tooltip="getTooltipConfig(a.label)"
+                    v-clean-tooltip="getTooltipConfig(a.label)"
                     :icon="a.icon"
                     :src="a.svg"
                   />
@@ -811,7 +875,7 @@ export default {
                   :to="a.to"
                 >
                   <IconOrSvg
-                    v-tooltip="getTooltipConfig(a.label)"
+                    v-clean-tooltip="getTooltipConfig(a.label)"
                     :icon="a.icon"
                     :src="a.svg"
                   />
@@ -841,7 +905,7 @@ export default {
                   :to="a.to"
                 >
                   <IconOrSvg
-                    v-tooltip="getTooltipConfig(a.label)"
+                    v-clean-tooltip="getTooltipConfig(a.label)"
                     :icon="a.icon"
                     :src="a.svg"
                   />

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

@@ -5,7 +5,7 @@ import { mount, Wrapper } from '@vue/test-utils';
 // DISCLAIMER: This should not be added here, although we have several store requests which are irrelevant
 const defaultStore = {
   'management/byId':         jest.fn(),
-  'management/schemaFor':    jest.fn(),
+  'management/schemaFor':    () => ({}),
   'i18n/t':                  jest.fn(),
   'features/get':            jest.fn(),
   'prefs/theme':             jest.fn(),
@@ -20,7 +20,11 @@ describe('topLevelMenu', () => {
       mocks: {
         $store: {
           getters: {
-            'management/all': () => [{ name: 'whatever' }],
+            'management/all': () => [{
+              name: 'whatever',
+              id:   'an-id1',
+              mgmt: { id: 'an-id1' },
+            }],
             ...defaultStore
           },
         },
@@ -48,21 +52,21 @@ describe('topLevelMenu', () => {
             'management/all': () => [
               {
                 name:        'x32-cwf5-name',
-                id:          'x32-cwf5-id',
+                id:          'an-id1',
                 mgmt:        { id: 'an-id1' },
                 nameDisplay: 'c-cluster',
                 isReady:     true
               },
               {
                 name:        'x33-cwf5-name',
-                id:          'x33-cwf5-id',
+                id:          'an-id2',
                 mgmt:        { id: 'an-id2' },
                 nameDisplay: 'a-cluster',
                 isReady:     true
               },
               {
                 name:        'x34-cwf5-name',
-                id:          'x34-cwf5-id',
+                id:          'an-id3',
                 mgmt:        { id: 'an-id3' },
                 nameDisplay: 'b-cluster',
                 isReady:     true
@@ -70,7 +74,7 @@ describe('topLevelMenu', () => {
               {
                 name:        'local-name',
                 id:          'local',
-                mgmt:        { id: 'an-id4' },
+                mgmt:        { id: 'local' },
                 nameDisplay: 'local',
                 isReady:     true
               },
@@ -103,21 +107,21 @@ describe('topLevelMenu', () => {
             'management/all': () => [
               {
                 name:        'x32-cwf5-name',
-                id:          'x32-cwf5-id',
+                id:          'an-id1',
                 mgmt:        { id: 'an-id1' },
                 nameDisplay: 'c-cluster',
                 isReady:     true
               },
               {
                 name:        'x33-cwf5-name',
-                id:          'x33-cwf5-id',
+                id:          'an-id2',
                 mgmt:        { id: 'an-id2' },
                 nameDisplay: 'a-cluster',
                 isReady:     false
               },
               {
                 name:        'x34-cwf5-name',
-                id:          'x34-cwf5-id',
+                id:          'an-id3',
                 mgmt:        { id: 'an-id3' },
                 nameDisplay: 'b-cluster',
                 isReady:     true
@@ -125,7 +129,7 @@ describe('topLevelMenu', () => {
               {
                 name:        'local-name',
                 id:          'local',
-                mgmt:        { id: 'an-id4' },
+                mgmt:        { id: 'local' },
                 nameDisplay: 'local',
                 isReady:     true
               },
@@ -158,7 +162,7 @@ describe('topLevelMenu', () => {
             'management/all': () => [
               {
                 name:        'x32-cwf5-name',
-                id:          'x32-cwf5-id',
+                id:          'an-id1',
                 mgmt:        { id: 'an-id1' },
                 nameDisplay: 'c-cluster',
                 isReady:     true,
@@ -166,7 +170,7 @@ describe('topLevelMenu', () => {
               },
               {
                 name:        'x33-cwf5-name',
-                id:          'x33-cwf5-id',
+                id:          'an-id2',
                 mgmt:        { id: 'an-id2' },
                 nameDisplay: 'a-cluster',
                 isReady:     true,
@@ -174,7 +178,7 @@ describe('topLevelMenu', () => {
               },
               {
                 name:        'x34-cwf5-name',
-                id:          'x34-cwf5-id',
+                id:          'an-id3',
                 mgmt:        { id: 'an-id3' },
                 nameDisplay: 'b-cluster',
                 isReady:     true,
@@ -183,7 +187,7 @@ describe('topLevelMenu', () => {
               {
                 name:        'local-name',
                 id:          'local',
-                mgmt:        { id: 'an-id4' },
+                mgmt:        { id: 'local' },
                 nameDisplay: 'local',
                 isReady:     true,
                 pinned:      true
@@ -217,7 +221,7 @@ describe('topLevelMenu', () => {
             'management/all': () => [
               {
                 name:        'x32-cwf5-name',
-                id:          'x32-cwf5-id',
+                id:          'an-id1',
                 mgmt:        { id: 'an-id1' },
                 nameDisplay: 'c-cluster',
                 isReady:     true,
@@ -225,7 +229,7 @@ describe('topLevelMenu', () => {
               },
               {
                 name:        'x33-cwf5-name',
-                id:          'x33-cwf5-id',
+                id:          'an-id2',
                 mgmt:        { id: 'an-id2' },
                 nameDisplay: 'a-cluster',
                 isReady:     true,
@@ -233,7 +237,7 @@ describe('topLevelMenu', () => {
               },
               {
                 name:        'x34-cwf5-name',
-                id:          'x34-cwf5-id',
+                id:          'an-id3',
                 mgmt:        { id: 'an-id3' },
                 nameDisplay: 'b-cluster',
                 isReady:     false,
@@ -242,7 +246,7 @@ describe('topLevelMenu', () => {
               {
                 name:        'local-name',
                 id:          'local',
-                mgmt:        { id: 'an-id4' },
+                mgmt:        { id: 'local' },
                 nameDisplay: 'local',
                 isReady:     true,
                 pinned:      true
@@ -333,7 +337,7 @@ describe('topLevelMenu', () => {
   it('should show description if it is available on the mgmt cluster (relevant for RKE1/ember world)', async() => {
     const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
       data: () => {
-        return { hasProvCluster: false, showPinClusters: true };
+        return { hasProvCluster: true, showPinClusters: true };
       },
       mocks: {
         $store: {
@@ -347,6 +351,7 @@ describe('topLevelMenu', () => {
               {
                 name:        'whatever',
                 id:          'an-id1',
+                mgmt:        { id: 'an-id1' },
                 description: 'some-description1',
                 nameDisplay: 'some-label',
                 isReady:     true,
@@ -356,6 +361,7 @@ describe('topLevelMenu', () => {
               {
                 name:        'whatever',
                 id:          'an-id2',
+                mgmt:        { id: 'an-id2' },
                 description: 'some-description2',
                 nameDisplay: 'some-label',
                 pinned:      true
@@ -364,6 +370,7 @@ describe('topLevelMenu', () => {
               {
                 name:        'whatever',
                 id:          'an-id3',
+                mgmt:        { id: 'an-id3' },
                 description: 'some-description3',
                 nameDisplay: 'some-label',
                 isReady:     true
@@ -372,6 +379,7 @@ describe('topLevelMenu', () => {
               {
                 name:        'whatever',
                 id:          'an-id4',
+                mgmt:        { id: 'an-id4' },
                 description: 'some-description4',
                 nameDisplay: 'some-label'
               },
@@ -430,11 +438,15 @@ describe('topLevelMenu', () => {
     describe('should displays a no results message if have clusters but', () => {
       it('given no matching clusters', () => {
         const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
-          data:  () => ({ clusterFilter: 'whatever' }),
+          data:  () => ({ hasProvCluster: true, clusterFilter: 'whatever' }),
           mocks: {
             $store: {
               getters: {
-                'management/all': () => [{ nameDisplay: 'something else' }],
+                'management/all': () => [{
+                  id:          'an-id1',
+                  mgmt:        { id: 'an-id1' },
+                  nameDisplay: 'something else'
+                }],
                 ...defaultStore
               },
             },
@@ -449,11 +461,16 @@ describe('topLevelMenu', () => {
 
       it('given no matched pinned clusters', () => {
         const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
-          data:  () => ({ clusterFilter: 'whatever' }),
+          data:  () => ({ hasProvCluster: true, clusterFilter: 'whatever' }),
           mocks: {
             $store: {
               getters: {
-                'management/all': () => [{ nameDisplay: 'something else', pinned: true }],
+                'management/all': () => [{
+                  id:          'an-id1',
+                  mgmt:        { id: 'an-id1' },
+                  nameDisplay: 'something else',
+                  pinned:      true
+                }],
                 ...defaultStore
               },
             },
@@ -471,11 +488,15 @@ describe('topLevelMenu', () => {
       it('given matching clusters', () => {
         const search = 'you found me';
         const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
-          data:  () => ({ clusterFilter: search }),
+          data:  () => ({ hasProvCluster: true, clusterFilter: search }),
           mocks: {
             $store: {
               getters: {
-                'management/all': () => [{ nameDisplay: search }],
+                'management/all': () => [{
+                  id:          'an-id1',
+                  mgmt:        { id: 'an-id1' },
+                  nameDisplay: search
+                }],
                 ...defaultStore
               },
             },
@@ -492,11 +513,16 @@ describe('topLevelMenu', () => {
       it('given clusters with status pinned', () => {
         const search = 'you found me';
         const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
-          data:  () => ({ clusterFilter: search }),
+          data:  () => ({ hasProvCluster: true, clusterFilter: search }),
           mocks: {
             $store: {
               getters: {
-                'management/all': () => [{ nameDisplay: search, pinned: true }],
+                'management/all': () => [{
+                  nameDisplay: search,
+                  pinned:      true,
+                  id:          'an-id1',
+                  mgmt:        { id: 'an-id1' },
+                }],
                 ...defaultStore
               },
             },

package/config/labels-annotations.js

@@ -111,6 +111,7 @@ export const FLEET = {
   CLUSTER_NAME:         'management.cattle.io/cluster-name',
   BUNDLE_ID:            'fleet.cattle.io/bundle-id',
   MANAGED:              'fleet.cattle.io/managed',
+  CLUSTER_NAMESPACE:    'fleet.cattle.io/cluster-namespace',
   CLUSTER:              'fleet.cattle.io/cluster'
 };
 
@@ -172,3 +173,5 @@ export const SYSTEM_LABELS = [
   'node.kubernetes.io',
   'egress.rke2.io'
 ];
+
+export const CLOUD_CREDENTIALS = { EXPIRATION: 'rancher.io/expiration-timestamp' };

package/core/types-provisioning.ts

@@ -106,6 +106,11 @@ export interface IClusterProvisioner {
    */
   disabled?: boolean;
 
+  /**
+   * Hide the cluster provider card
+   */
+  hidden?: boolean;
+
   /**
    * Custom Dashboard route to navigate to when the cluster provider card is clicked
    */

package/core/types.ts

@@ -237,6 +237,16 @@ export interface ProductOptions {
    */
   to?: Location;
 
+  /**
+   * Alternative to the icon property. Uses require
+   */
+  svg?: Function;
+
+  /**
+   * Product name
+   */
+  name?: string;
+
   /**
    * Leaving these here for completeness but I don't think these should be advertised as useable to plugin creators.
    */
@@ -373,10 +383,25 @@ export interface ConfigureTypeOptions {
 }
 
 export interface ConfigureVirtualTypeOptions extends ConfigureTypeOptions {
+  /**
+   * Only load the product if the type is present
+   */
+  ifHave?: string;
+
+  /**
+   * Only load the product if the type is present
+   */
+  ifHaveType?: string | RegExp | Object;
+
+  /**
+   * The label that this type should display
+   */
+  label?: string;
+
   /**
    * The translation key displayed anywhere this type is referenced
    */
-  labelKey: string;
+  labelKey?: string;
 
   /**
    * An identifier that should be unique across all types