@rancher/shell 3.0.6 → 3.0.8-rc.1

package/pages/home.vue

@@ -8,9 +8,9 @@ import { BadgeState } from '@components/BadgeState';
 import CommunityLinks from '@shell/components/CommunityLinks.vue';
 import SingleClusterInfo from '@shell/components/SingleClusterInfo.vue';
 import { mapGetters, mapState } from 'vuex';
-import { MANAGEMENT, CAPI } from '@shell/config/types';
+import { MANAGEMENT, CAPI, COUNT } from '@shell/config/types';
 import { NAME as MANAGER } from '@shell/config/product/manager';
-import { STATE } from '@shell/config/table-headers';
+import { AGE, STATE } from '@shell/config/table-headers';
 import { MODE, _IMPORT } from '@shell/config/query-params';
 import { createMemoryFormat, formatSi, parseSi, createMemoryValues } from '@shell/utils/units';
 import { markSeenReleaseNotes } from '@shell/utils/version';
@@ -28,8 +28,12 @@ import { PaginationParamFilter, FilterArgs, PaginationFilterField, PaginationArg
 import ProvCluster from '@shell/models/provisioning.cattle.io.cluster';
 import { sameContents } from '@shell/utils/array';
 import { PagTableFetchPageSecondaryResourcesOpts, PagTableFetchSecondaryResourcesOpts, PagTableFetchSecondaryResourcesReturns } from '@shell/types/components/paginatedResourceTable';
-import { CURRENT_RANCHER_VERSION } from '@shell/config/version';
+import { CURRENT_RANCHER_VERSION, getVersionData } from '@shell/config/version';
 import { CAPI as CAPI_LAB_AND_ANO } from '@shell/config/labels-annotations';
+import paginationUtils from '@shell/utils/pagination-utils';
+import ResourceTable from '@shell/components/ResourceTable.vue';
+import Preset from '@shell/mixins/preset';
+import { PaginationFeatureHomePageClusterConfig } from '@shell/types/resources/settings';
 
 export default defineComponent({
   name:       'Home',
@@ -42,9 +46,10 @@ export default defineComponent({
     CommunityLinks,
     SingleClusterInfo,
     TabTitle,
+    ResourceTable,
   },
 
-  mixins: [PageHeaderActions],
+  mixins: [PageHeaderActions, Preset],
 
   data() {
     const options = this.$store.getters[`type-map/optionsFor`](CAPI.RANCHER_CLUSTER)?.custom || {};
@@ -200,15 +205,41 @@ export default defineComponent({
 
       clusterCount: 0,
 
-      CURRENT_RANCHER_VERSION
+      CURRENT_RANCHER_VERSION,
+
+      /**
+       * User has decided to disable the alt list
+       */
+      altClusterListDisabled: false,
+      /**
+       * There are too many clusters to show in the home page list.
+       *
+       * If not disabled, show alt table
+       */
+      tooManyClusters:        undefined as boolean | undefined,
+      altClusterListRows:     undefined as any[] | undefined,
+      altClusterListFeature:  paginationUtils.getFeature<PaginationFeatureHomePageClusterConfig>({ rootGetters: this.$store.getters }, 'homePageCluster'),
+
+      presetVersion: getVersionData()?.Version,
     };
   },
 
+  mounted() {
+    this.preset('altClusterListDisabled', 'boolean');
+  },
+
   computed: {
     ...mapState(['managementReady']),
     ...mapGetters(['currentCluster', 'defaultClusterId']),
     mcm: mapFeature(MULTI_CLUSTER),
 
+    vaiOnSettingsHeaders() {
+      return [
+        ...this.headers, // include age as we're sorting by it
+        AGE
+      ];
+    },
+
     canCreateCluster() {
       return !!this.provClusterSchema?.collectionMethods.find((x: string) => x.toLowerCase() === 'post');
     },
@@ -216,6 +247,21 @@ export default defineComponent({
     afterLoginRoute: mapPref(AFTER_LOGIN_ROUTE),
     homePageCards:   mapPref(HIDE_HOME_PAGE_CARDS),
 
+    /**
+     * Show the alt table
+     */
+    altClusterList() {
+      return this.tooManyClusters && !this.altClusterListDisabled;
+    }
+
+  },
+
+  watch: {
+    async altClusterList(neu) {
+      if (neu) {
+        await this.initAltClusters();
+      }
+    },
   },
 
   async created() {
@@ -227,6 +273,12 @@ export default defineComponent({
     // If we do not, then if they set the landing page, that won't work unless the release notes are marked read
     // otherwise we always take them to the home page to see the release notes
     markSeenReleaseNotes(this.$store);
+
+    this.tooManyClusters = this.isTooManyClusters();
+
+    if (this.altClusterList) {
+      await this.initAltClusters();
+    }
   },
 
   // Forget the types when we leave the page
@@ -458,7 +510,83 @@ export default defineComponent({
       }
 
       return pagination;
-    }
+    },
+
+    async toggleAltClusterListDisabled(disabled: boolean) {
+      // Clear the cache so the table doesn't show the previous mode's results
+      await this.$store.dispatch('management/forgetType', CAPI.RANCHER_CLUSTER);
+
+      this.altClusterListDisabled = disabled;
+    },
+
+    /**
+     * Determine if we should use an alternative cluster list which contains most recently created clusters
+     *
+     * Checks
+     * - can view clusters
+     * - if vai is on
+     * - if alt list feature is on
+     * - if cluster count exceeds threshold
+     */
+    isTooManyClusters(): boolean {
+      if (!this.provClusterSchema || !this.canViewMgmtClusters) {
+        return false;
+      }
+
+      const featureConfig = this.altClusterListFeature;
+
+      if (!featureConfig || !featureConfig.enabled) { // vai is off, or feature is explicitly disabled
+        return false;
+      }
+
+      const threshold = featureConfig.configuration?.threshold;
+
+      if (threshold === undefined) { // invalid config
+        return false;
+      }
+
+      const counts = this.$store.getters[`management/all`](COUNT)?.[0]?.counts || {};
+
+      this.clusterCount = counts[CAPI.RANCHER_CLUSTER]?.summary.count;
+
+      return this.clusterCount > threshold;
+    },
+
+    /**
+     * Fetch clusters used to populate alt table
+     */
+    async initAltClusters() {
+      const featureConfig = this.altClusterListFeature;
+      const results = featureConfig?.configuration?.results || 50;
+
+      // Fetch a limited number of provisioning clusters
+      const opt1: ActionFindPageArgs = {
+        pagination: {
+          projectsOrNamespaces: [],
+          filters:              paginationFilterClusters(this.$store, false),
+          page:                 1,
+          pageSize:             results, // We're fetching the total results... then paging locally
+          sort:                 [{ field: 'metadata.creationTimestamp', asc: false }]
+        },
+        watch: false,
+      };
+      const provClusters = await this.$store.dispatch('management/findPage', { type: CAPI.RANCHER_CLUSTER, opt: opt1 });
+
+      // Also fetch the management clusters associated with the provisioning clusters
+      const opt2: ActionFindPageArgs = {
+        pagination: new FilterArgs({
+          filters: PaginationParamFilter.createMultipleFields(provClusters.map((r: any) => new PaginationFilterField({
+            field: 'id',
+            value: r.mgmtClusterId
+          }))),
+        }),
+        watch: false,
+      };
+
+      await this.$store.dispatch(`management/findPage`, { type: MANAGEMENT.CLUSTER, opt: opt2 });
+
+      this.altClusterListRows = provClusters;
+    },
   }
 });
 
@@ -485,9 +613,164 @@ export default defineComponent({
     <IndentedPanel class="mt-20 mb-20">
       <div class="row home-panels">
         <div class="col main-panel">
-          <div class="row panel">
+          <div
+            v-if="altClusterList !== undefined"
+            class="row panel"
+          >
+            <div
+              v-if="mcm && altClusterList"
+              class="col span-12"
+            >
+              <ResourceTable
+                :schema="provClusterSchema"
+                :table-actions="false"
+                :row-actions="false"
+                key-field="id"
+
+                :headers="vaiOnSettingsHeaders"
+                defaultSortBy="age"
+
+                :loading="!altClusterListRows"
+
+                :rows="altClusterListRows || []"
+                :rowsPerPage="altClusterListFeature?.configuration.pagesPerRow || 10"
+
+                :namespaced="false"
+                :groupable="false"
+              >
+                <template #header-left>
+                  <div class="row table-heading">
+                    <h1 class="mb-0">
+                      {{ t('landing.clusters.title') }}
+                    </h1>
+                  </div>
+                </template>
+                <template #sub-header-row>
+                  <h2 class="too-many-clusters">
+                    {{ t('landing.clusters.tooMany.showingSome', { rows: altClusterListRows?.length || '...', total: clusterCount}) }}
+                    <a @click="toggleAltClusterListDisabled(true)">{{ t('landing.clusters.tooMany.showAll') }}</a>
+                  </h2>
+                </template>
+                <!--
+                  Below is a big copy & paste from PaginatedResourceTable, however should be temporary (altClusterList removed in 2.14 once full SSP support for clusters if available)
+                -->
+                <template
+                  v-if="canCreateCluster || !!provClusterSchema"
+                  #header-middle
+                >
+                  <div class="table-heading">
+                    <router-link
+                      v-if="!!provClusterSchema"
+                      :to="manageLocation"
+                      class="btn btn-sm role-secondary"
+                      data-testid="cluster-management-manage-button"
+                      role="button"
+                      :aria-label="t('cluster.manageAction')"
+                      @keyup.space="$router.push(manageLocation)"
+                    >
+                      {{ t('cluster.manageAction') }}
+                    </router-link>
+                    <router-link
+                      v-if="canCreateCluster"
+                      :to="importLocation"
+                      class="btn btn-sm role-primary"
+                      data-testid="cluster-create-import-button"
+                      role="button"
+                      :aria-label="t('cluster.importAction')"
+                      @keyup.space="$router.push(importLocation)"
+                    >
+                      {{ t('cluster.importAction') }}
+                    </router-link>
+                    <router-link
+                      v-if="canCreateCluster"
+                      :to="createLocation"
+                      class="btn btn-sm role-primary"
+                      data-testid="cluster-create-button"
+                      role="button"
+                      :aria-label="t('generic.create')"
+                      @keyup.space="$router.push(createLocation)"
+                    >
+                      {{ t('generic.create') }}
+                    </router-link>
+                  </div>
+                </template>
+                <template #col:name="{row}">
+                  <td class="col-name">
+                    <div class="list-cluster-name">
+                      <p
+                        v-if="row.mgmt"
+                        class="cluster-name"
+                      >
+                        <router-link
+                          v-if="row.mgmt.isReady && !row.hasError"
+                          :to="{ name: 'c-cluster-explorer', params: { cluster: row.mgmt.id }}"
+                          role="link"
+                          :aria-label="row.nameDisplay"
+                        >
+                          {{ row.nameDisplay }}
+                        </router-link>
+                        <span v-else>{{ row.nameDisplay }}</span>
+                        <i
+                          v-if="row.unavailableMachines"
+                          v-clean-tooltip="row.unavailableMachines"
+                          class="conditions-alert-icon icon-alert icon"
+                        />
+                        <i
+                          v-if="row.isRke1"
+                          v-clean-tooltip="t('cluster.rke1Unsupported')"
+                          class="rke1-unsupported-icon icon-warning icon"
+                        />
+                      </p>
+                      <p
+                        v-if="row.description"
+                        class="cluster-description"
+                      >
+                        {{ row.description }}
+                      </p>
+                    </div>
+                  </td>
+                </template>
+                <template #col:kubernetesVersion="{row}">
+                  <td class="col-name">
+                    <span>
+                      {{ row.kubernetesVersion }}
+                    </span>
+                    <div
+                      v-clean-tooltip="{content: row.architecture.tooltip, placement: 'left'}"
+                      class="text-muted"
+                    >
+                      {{ row.architecture.label }}
+                    </div>
+                  </td>
+                </template>
+                <template #col:cpu="{row}">
+                  <td v-if="row.mgmt && cpuAllocatable(row.mgmt)">
+                    {{ `${cpuAllocatable(row.mgmt)} ${t('landing.clusters.cores', {count:cpuAllocatable(row.mgmt) })}` }}
+                  </td>
+                  <td v-else>
+                    &mdash;
+                  </td>
+                </template>
+                <template #col:memory="{row}">
+                  <td v-if="row.mgmt && memoryAllocatable(row.mgmt) && !memoryAllocatable(row.mgmt).match(/^0 [a-zA-z]/)">
+                    {{ memoryAllocatable(row.mgmt) }}
+                  </td>
+                  <td v-else>
+                    &mdash;
+                  </td>
+                </template>
+                <!-- <template #cell:explorer="{row}">
+                    <router-link v-if="row && row.isReady" class="btn btn-sm role-primary" :to="{name: 'c-cluster', params: {cluster: row.id}}">
+                      {{ t('landing.clusters.explore') }}
+                    </router-link>
+                    <button v-else :disabled="true" class="btn btn-sm role-primary">
+                      {{ t('landing.clusters.explore') }}
+                    </button>
+                  </template> -->
+              </ResourceTable>
+            </div>
             <div
-              v-if="mcm"
+              v-else-if="mcm"
               class="col span-12"
             >
               <PaginatedResourceTable
@@ -511,16 +794,25 @@ export default defineComponent({
               >
                 <template #header-left>
                   <div class="row table-heading">
-                    <h2 class="mb-0">
+                    <h1 class="mb-0">
                       {{ t('landing.clusters.title') }}
-                    </h2>
+                    </h1>
                     <BadgeState
-                      v-if="clusterCount"
+                      v-if="clusterCount && !tooManyClusters"
                       :label="clusterCount.toString()"
-                      color="role-tertiary ml-20 mr-20"
+                      color="bg-info ml-20 mr-20"
                     />
                   </div>
                 </template>
+                <template
+                  v-if="tooManyClusters"
+                  #sub-header-row
+                >
+                  <h2 class="too-many-clusters">
+                    {{ t('landing.clusters.tooMany.showingAll', { rows: altClusterListRows?.length || '...', total: clusterCount}) }}
+                    <a @click="toggleAltClusterListDisabled(false)">{{ t('landing.clusters.tooMany.showSome') }}</a>
+                  </h2>
+                </template>
                 <template
                   v-if="canCreateCluster || !!provClusterSchema"
                   #header-middle
@@ -663,6 +955,14 @@ export default defineComponent({
     }
     .main-panel {
       flex: auto;
+
+      .too-many-clusters {
+        margin-bottom: 5px;
+
+        a {
+          cursor: pointer;
+        }
+      }
     }
 
     .side-panel {
@@ -744,6 +1044,7 @@ export default defineComponent({
   .search {
     align-items: center;
     display: flex;
+    height: 39px;
 
     > INPUT {
       background-color: transparent;

package/plugins/__tests__/subscribe.events.test.ts

@@ -0,0 +1,194 @@
+import { SteveWatchEventListenerManager } from '@shell/plugins/subscribe-events';
+import { STEVE_WATCH_EVENT_TYPES } from '@shell/types/store/subscribe.types';
+
+// Mock function to create a consistent key for testing
+const mockKeyForSubscribe = jest.fn(({
+  params: {
+    type, name, id, selector, mode
+  }
+}) => {
+  return `${ type }-${ name }-${ id }-${ selector }-${ mode }`;
+});
+
+// Mock parameters and callbacks
+const mockParams1 = {
+  type: 'pods', name: 'my-pod', id: 'abc-123', selector: 'app=test'
+};
+const mockCallback1 = jest.fn();
+const mockCallback2 = jest.fn();
+
+// The class under test
+let manager: SteveWatchEventListenerManager;
+
+describe('steveWatchEventListenerManager', () => {
+  beforeEach(() => {
+    // Reset the manager and mocks before each test
+    manager = new SteveWatchEventListenerManager();
+    jest.clearAllMocks();
+    // Replace the internal keyForSubscribe with our mock
+    (manager as any).keyForSubscribe = mockKeyForSubscribe;
+  });
+
+  describe('initialization and Properties', () => {
+    it('should be created successfully', () => {
+      expect(manager).toBeInstanceOf(SteveWatchEventListenerManager);
+    });
+
+    it('should have a supportedEventTypes array with STEVE_WATCH_EVENT_TYPES.CHANGES', () => {
+      expect(manager.supportedEventTypes).toStrictEqual([STEVE_WATCH_EVENT_TYPES.CHANGES]);
+    });
+
+    it('should correctly identify a supported event type', () => {
+      const isSupported = manager.isSupportedEventType(STEVE_WATCH_EVENT_TYPES.CHANGES);
+
+      expect(isSupported).toBe(true);
+    });
+
+    it('should correctly identify an unsupported event type', () => {
+      const isSupported = manager.isSupportedEventType('some.other.event' as STEVE_WATCH_EVENT_TYPES);
+
+      expect(isSupported).toBe(false);
+    });
+  });
+
+  describe('watch Management', () => {
+    it('should return undefined when getting a non-existent watch', () => {
+      const watch = manager.getWatch({ params: mockParams1 });
+
+      expect(watch).toBeUndefined();
+    });
+
+    it('should create a watch when setStandardWatch is called with standardWatch true and no watch exists', () => {
+      manager.setStandardWatch({ standardWatch: true, args: { params: mockParams1 } });
+      const watch = (manager as any).watches[mockKeyForSubscribe({ params: mockParams1 })];
+
+      expect(watch).toBeDefined();
+      expect(watch.hasStandardWatch).toBe(true);
+      expect(watch.listeners).toStrictEqual([]);
+    });
+
+    it('should not create a watch when setStandardWatch is called with standardWatch false and no watch exists', () => {
+      manager.setStandardWatch({ standardWatch: false, args: { params: mockParams1 } });
+      const watch = (manager as any).watches[mockKeyForSubscribe({ params: mockParams1 })];
+
+      expect(watch).toBeUndefined();
+    });
+
+    it('should delete a watch when hasStandardWatch becomes false and there are no listeners', () => {
+      manager.setStandardWatch({ standardWatch: true, args: { params: mockParams1 } });
+      manager.setStandardWatch({ standardWatch: false, args: { params: mockParams1 } });
+      const watch = (manager as any).watches[mockKeyForSubscribe({ params: mockParams1 })];
+
+      expect(watch).toBeUndefined();
+    });
+  });
+
+  describe('listener and Callback Management', () => {
+    it('should add a new listener and a callback', () => {
+      const listener = manager.addEventListenerCallback({
+        callback: mockCallback1,
+        args:     {
+          event:  STEVE_WATCH_EVENT_TYPES.CHANGES,
+          params: mockParams1,
+          id:     'cb-1'
+        }
+      });
+
+      expect(listener).toBeDefined();
+      expect(listener.event).toBe(STEVE_WATCH_EVENT_TYPES.CHANGES);
+      expect(listener.callbacks['cb-1']).toBe(mockCallback1);
+      const watch = manager.getWatch({ params: mockParams1 });
+
+      expect(watch?.listeners.length).toBe(1);
+    });
+
+    it('should add a second callback to an existing listener', () => {
+      manager.addEventListenerCallback({
+        callback: mockCallback1,
+        args:     {
+          event:  STEVE_WATCH_EVENT_TYPES.CHANGES,
+          params: mockParams1,
+          id:     'cb-1'
+        }
+      });
+      manager.addEventListenerCallback({
+        callback: mockCallback2,
+        args:     {
+          event:  STEVE_WATCH_EVENT_TYPES.CHANGES,
+          params: mockParams1,
+          id:     'cb-2'
+        }
+      });
+
+      const listener = manager.getEventListener({ args: { event: STEVE_WATCH_EVENT_TYPES.CHANGES, params: mockParams1 } });
+
+      expect(Object.keys(listener?.callbacks || {})).toHaveLength(2);
+      expect(listener?.callbacks['cb-2']).toBe(mockCallback2);
+    });
+
+    it('should trigger a specific event listener and its callbacks', () => {
+      manager.addEventListenerCallback({
+        callback: mockCallback1,
+        args:     {
+          event:  STEVE_WATCH_EVENT_TYPES.CHANGES,
+          params: mockParams1,
+          id:     'cb-1'
+        }
+      });
+      manager.addEventListenerCallback({
+        callback: mockCallback2,
+        args:     {
+          event:  STEVE_WATCH_EVENT_TYPES.CHANGES,
+          params: mockParams1,
+          id:     'cb-2'
+        }
+      });
+
+      manager.triggerEventListener({ event: STEVE_WATCH_EVENT_TYPES.CHANGES, params: mockParams1 });
+      expect(mockCallback1).toHaveBeenCalledTimes(1);
+      expect(mockCallback2).toHaveBeenCalledTimes(1);
+    });
+
+    it('should remove a specific callback from a listener', () => {
+      manager.addEventListenerCallback({
+        callback: mockCallback1,
+        args:     {
+          event:  STEVE_WATCH_EVENT_TYPES.CHANGES,
+          params: mockParams1,
+          id:     'cb-1'
+        }
+      });
+      manager.removeEventListenerCallback({
+        event:  STEVE_WATCH_EVENT_TYPES.CHANGES,
+        params: mockParams1,
+        id:     'cb-1'
+      });
+      const listener = manager.getEventListener({ args: { event: STEVE_WATCH_EVENT_TYPES.CHANGES, params: mockParams1 } });
+
+      expect(listener?.callbacks['cb-1']).toBeUndefined();
+    });
+
+    it('should trigger all callbacks for a given watch', () => {
+      manager.addEventListenerCallback({
+        callback: mockCallback1,
+        args:     {
+          event:  STEVE_WATCH_EVENT_TYPES.CHANGES,
+          params: mockParams1,
+          id:     'cb-1'
+        }
+      });
+      manager.addEventListenerCallback({
+        callback: mockCallback2,
+        args:     {
+          event:  'another.event' as STEVE_WATCH_EVENT_TYPES,
+          params: mockParams1,
+          id:     'cb-2'
+        }
+      });
+
+      manager.triggerAllEventListeners({ params: mockParams1 });
+      expect(mockCallback1).toHaveBeenCalledTimes(1);
+      expect(mockCallback2).toHaveBeenCalledTimes(1);
+    });
+  });
+});

package/plugins/axios.js

@@ -11,7 +11,8 @@ export default function({
     const options = { parseJSON: false };
     const csrf = store.getters['cookies/get']({ key: CSRF, options });
 
-    if ( csrf ) {
+    // Request can ask not to send the CSRF header
+    if (csrf && !config.noApiCsrf) {
       config.headers['x-api-csrf'] = csrf;
     }
   });

package/plugins/dashboard-store/actions.js

@@ -220,6 +220,9 @@ export default {
       )
     ) {
       if (opt.watch !== false ) {
+        // Note - Empty revision here seems broken
+        // - list page (watch all) --> detail page (stop watch all, watch one) --> list page (watch all - no revision)
+        // - the missing revision means watch start from now... instead of the point the clusters were last monitored (cache contains stale data)
         const args = {
           type,
           revision:  '',
@@ -695,7 +698,7 @@ export default {
 
     const res = await dispatch('request', { opt, type });
 
-    await dispatch('load', { data: res });
+    await dispatch('load', { data: res, invalidatePageCache: opt.invalidatePageCache });
 
     if ( opt.watch !== false ) {
       dispatch('watch', createFindWatchArg({

package/plugins/dashboard-store/getters.js

@@ -526,7 +526,7 @@ export default {
     const store = state.config.namespace;
     const resource = id || context ? { id, context } : null;
 
-    return paginationUtils.isEnabled({ rootGetters }, { store, resource });
+    return paginationUtils.isEnabled({ rootGetters, $plugin: rootState.$plugin }, { store, resource });
   },
 
   /**