From 46cc4bc4c5cf84a1b679b4341dc9e08fadfda40e Mon Sep 17 00:00:00 2001
From: Cody Jackson <cody.jackson@suse.com>
Date: Wed, 15 Jan 2025 09:52:41 -0700
Subject: [PATCH] Converting the management cluster list and detail pages to be
 paginated

fixes #9548
---
 shell/config/product/manager.js               |  20 +-
 shell/config/settings.ts                      |   2 +-
 .../detail/provisioning.cattle.io.cluster.vue | 454 +++++++-----------
 shell/list/provisioning.cattle.io.cluster.vue | 328 ++++++++++---
 shell/mixins/resource-fetch-api-pagination.js |   5 +-
 shell/plugins/dashboard-store/actions.js      |  15 +
 shell/plugins/steve/steve-pagination-utils.ts |   9 +-
 shell/utils/cluster.js                        |  22 +-
 shell/utils/settings.ts                       |   6 +-
 9 files changed, 489 insertions(+), 372 deletions(-)

diff --git a/shell/config/product/manager.js b/shell/config/product/manager.js
index 5de1739ef0c..f343e380ac1 100644
--- a/shell/config/product/manager.js
+++ b/shell/config/product/manager.js
@@ -14,6 +14,16 @@ import { BLANK_CLUSTER } from '@shell/store/store-types.js';
 
 export const NAME = 'manager';
 
+export const MACHINE_SUMMARY = {
+  name:      'summary',
+  labelKey:  'tableHeaders.machines',
+  sort:      false,
+  search:    false,
+  formatter: 'MachineSummaryGraph',
+  align:     'center',
+  width:     100,
+};
+
 export function init(store) {
   const {
     product,
@@ -162,16 +172,6 @@ export function init(store) {
 
   weightGroup('advanced', -1, true);
 
-  const MACHINE_SUMMARY = {
-    name:      'summary',
-    labelKey:  'tableHeaders.machines',
-    sort:      false,
-    search:    false,
-    formatter: 'MachineSummaryGraph',
-    align:     'center',
-    width:     100,
-  };
-
   headers(CAPI.RANCHER_CLUSTER, [
     STATE,
     {
diff --git a/shell/config/settings.ts b/shell/config/settings.ts
index 43c76e5bec3..edf34cb2f80 100644
--- a/shell/config/settings.ts
+++ b/shell/config/settings.ts
@@ -278,7 +278,7 @@ export const DEFAULT_PERF_SETTING: PerfSettings = {
           enableAll:  false,
           enableSome: {
             enabled: [
-              { resource: CAPI.RANCHER_CLUSTER, context: ['home', 'side-bar'] },
+              { resource: CAPI.RANCHER_CLUSTER, context: ['home', 'side-bar', 'provisioning.cattle.io.clusters'] },
               { resource: MANAGEMENT.CLUSTER, context: ['side-bar'] },
             ],
             generic: false,
diff --git a/shell/detail/provisioning.cattle.io.cluster.vue b/shell/detail/provisioning.cattle.io.cluster.vue
index 9131596a572..b07d7300e08 100644
--- a/shell/detail/provisioning.cattle.io.cluster.vue
+++ b/shell/detail/provisioning.cattle.io.cluster.vue
@@ -1,12 +1,9 @@
 <script>
 import Loading from '@shell/components/Loading';
 import { Banner } from '@components/Banner';
-import ResourceTable, { defaultTableSortGenerationFn } from '@shell/components/ResourceTable';
 import ResourceTabs from '@shell/components/form/ResourceTabs';
-import SortableTable from '@shell/components/SortableTable';
 import CopyCode from '@shell/components/CopyCode';
 import Tab from '@shell/components/Tabbed/Tab';
-import { allHash } from '@shell/utils/promise';
 import { CAPI, MANAGEMENT, NORMAN, SNAPSHOT } from '@shell/config/types';
 import {
   STATE, NAME as NAME_COL, AGE, AGE_NORMAN, INTERNAL_EXTERNAL_IP, STATE_NORMAN, ROLES, MACHINE_NODE_OS, MANAGEMENT_NODE_OS, NAME,
@@ -29,42 +26,24 @@ import Socket, {
   EVENT_CONNECT_ERROR
 } from '@shell/utils/socket';
 import { get } from '@shell/utils/object';
-import CapiMachineDeployment from '@shell/models/cluster.x-k8s.io.machinedeployment';
 import { isAlternate } from '@shell/utils/platform';
+import PaginatedResourceTable from '@shell/components/PaginatedResourceTable';
+import SortableTable from '@shell/components/ResourceTable';
+import { PaginationParamFilter, FilterArgs } from '@shell/types/store/pagination.types';
+import { hasAccessToLocalCluster } from '@shell/utils/cluster';
 
 let lastId = 1;
 const ansiup = new AnsiUp();
 
-/**
- * Machine Deployment has a reference to the 'template' used to create that deployment
- * For an empty machine pool, we (obviously) don't get any machine deployments for that pool.
- *
- * This class allows us to fake a machine deployment - when created, we set additional properties (_cluster etc)
- * and use these in the getters.
- **/
-class EmptyCapiMachineDeployment extends CapiMachineDeployment {
-  get inClusterSpec() {
-    return this._clusterSpec;
-  }
-
-  get cluster() {
-    return this._cluster;
-  }
-
-  get template() {
-    return this._template;
-  }
-}
-
 export default {
   emits: ['input'],
 
   components: {
     Loading,
     Banner,
-    ResourceTable,
-    ResourceTabs,
+    PaginatedResourceTable,
     SortableTable,
+    ResourceTabs,
     Tab,
     CopyCode,
     CustomCommand,
@@ -101,93 +80,26 @@ export default {
       this.extCustomParams = { provider: this.value.machineProvider };
     }
 
-    const schema = this.$store.getters[`management/schemaFor`](CAPI.RANCHER_CLUSTER);
-    const fetchOne = { schemaDefinitions: schema.fetchResourceFields() };
-
-    if ( this.$store.getters['management/canList'](CAPI.MACHINE_DEPLOYMENT) ) {
-      fetchOne.machineDeployments = this.$store.dispatch('management/findAll', { type: CAPI.MACHINE_DEPLOYMENT });
-    }
-
-    if ( this.$store.getters['management/canList'](CAPI.MACHINE) ) {
-      fetchOne.machines = this.$store.dispatch('management/findAll', { type: CAPI.MACHINE });
-    }
-
-    if ( this.$store.getters['management/canList'](SNAPSHOT) ) {
-      fetchOne.snapshots = this.$store.dispatch('management/findAll', { type: SNAPSHOT });
-    }
+    const promises = {};
 
     if ( this.value.isImported || this.value.isCustom || this.value.isHostedKubernetesProvider ) {
-      fetchOne.clusterToken = this.value.getOrCreateToken();
+      promises.clusterToken = this.value.getOrCreateToken();
     }
 
-    // Need to get Norman clusters so that we can check if user has permissions to access the local cluster
-    if ( this.$store.getters['rancher/canList'](NORMAN.CLUSTER) ) {
-      fetchOne.normanClusters = this.$store.dispatch('rancher/findAll', { type: NORMAN.CLUSTER });
-    }
+    // Does the user have access to the local cluster? Need to in order to be able to show the 'Related Resources' tab
+    promises.hasLocalAccess = hasAccessToLocalCluster(this.$store);
 
     if ( this.value.isRke1 && this.$store.getters['isRancher'] ) {
-      fetchOne.etcdBackups = this.$store.dispatch('rancher/findAll', { type: NORMAN.ETCD_BACKUP });
-
-      fetchOne.normanNodePools = this.$store.dispatch('rancher/findAll', { type: NORMAN.NODE_POOL });
+      promises.rke1Snapshots = this.$store.dispatch('rancher/findAll', { type: NORMAN.ETCD_BACKUP });
+      promises.rke1Nodes = this.$store.dispatch('rancher/findAll', { type: NORMAN.NODE_POOL });
     }
 
-    const fetchOneRes = await allHash(fetchOne);
+    this.loadNodeTemplateForMasthead();
 
-    this.allMachines = fetchOneRes.machines || [];
-    this.allMachineDeployments = fetchOneRes.machineDeployments || [];
-    this.haveMachines = !!fetchOneRes.machines;
-    this.haveDeployments = !!fetchOneRes.machineDeployments;
-    this.clusterToken = fetchOneRes.clusterToken;
-    this.etcdBackups = fetchOneRes.etcdBackups;
-
-    if (fetchOneRes.normanClusters) {
-      // Does the user have access to the local cluster? Need to in order to be able to show the 'Related Resources' tab
-      this.hasLocalAccess = !!fetchOneRes.normanClusters.find((c) => c.internal);
-    }
-
-    const fetchTwo = {};
-
-    const thisClusterMachines = this.allMachineDeployments.filter((deployment) => {
-      return deployment?.spec?.clusterName === this.value.metadata.name;
-    });
-
-    const machineDeploymentTemplateType = thisClusterMachines?.[0]?.templateType;
-
-    if (machineDeploymentTemplateType && this.$store.getters['management/schemaFor'](machineDeploymentTemplateType) ) {
-      fetchTwo.mdtt = this.$store.dispatch('management/findAll', { type: machineDeploymentTemplateType });
-    }
-
-    if (!this.showMachines) {
-      if ( this.$store.getters['management/canList'](MANAGEMENT.NODE) ) {
-        fetchTwo.allNodes = this.$store.dispatch('management/findAll', { type: MANAGEMENT.NODE });
-      }
-
-      if ( this.$store.getters['management/canList'](MANAGEMENT.NODE_POOL) ) {
-        fetchTwo.allNodePools = this.$store.dispatch('management/findAll', { type: MANAGEMENT.NODE_POOL });
-      }
-
-      if ( this.$store.getters['management/canList'](MANAGEMENT.NODE_TEMPLATE) ) {
-        fetchTwo.nodeTemplates = this.$store.dispatch('management/findAll', { type: MANAGEMENT.NODE_TEMPLATE });
-      }
-    }
-
-    const fetchTwoRes = await allHash(fetchTwo);
-
-    this.allNodes = fetchTwoRes.allNodes || [];
-    this.haveNodes = !!fetchTwoRes.allNodes;
-    this.allNodePools = fetchTwoRes.allNodePools || [];
-    this.haveNodePools = !!fetchTwoRes.allNodePools;
-    this.machineTemplates = fetchTwoRes.mdtt || [];
-
-    // Fetch RKE template revisions so we can show when an updated template is available
-    // This request does not need to be blocking
-    if ( this.$store.getters['management/canList'](MANAGEMENT.RKE_TEMPLATE) ) {
-      this.$store.dispatch('management/findAll', { type: MANAGEMENT.RKE_TEMPLATE });
-    }
-
-    if ( this.$store.getters['management/canList'](MANAGEMENT.RKE_TEMPLATE_REVISION) ) {
-      this.$store.dispatch('management/findAll', { type: MANAGEMENT.RKE_TEMPLATE_REVISION });
-    }
+    this.clusterToken = await promises.clusterToken;
+    this.hasLocalAccess = await promises.hasLocalAccess;
+    this.rke1Snapshots = await promises.rke1Snapshots;
+    this.rke1Nodes = await promises.rke1Nodes;
   },
 
   created() {
@@ -201,27 +113,23 @@ export default {
       this.logSocket.disconnect();
       this.logSocket = null;
     }
+
+    this.$store.dispatch('management/forgetType', CAPI.MACHINE);
+    this.$store.dispatch('management/forgetType', MANAGEMENT.NODE);
+    this.$store.dispatch('management/forgetType', MANAGEMENT.NODE_TEMPLATE);
   },
 
   data() {
     return {
+      hasLocalAccess: false,
 
-      allMachines:           [],
-      allMachineDeployments: [],
-      allNodes:              [],
-      allNodePools:          [],
-
-      haveMachines:    false,
-      haveDeployments: false,
-      haveNodes:       false,
-      haveNodePools:   false,
-      hasLocalAccess:  false,
-
-      mgmtNodeSchema: this.$store.getters[`management/schemaFor`](MANAGEMENT.NODE),
-      machineSchema:  this.$store.getters[`management/schemaFor`](CAPI.MACHINE),
+      mgmtNodeSchema:     this.$store.getters[`management/schemaFor`](MANAGEMENT.NODE),
+      machineSchema:      this.$store.getters[`management/schemaFor`](CAPI.MACHINE),
+      rke1Snapshots:      [],
+      rke1Nodes:          [],
+      rke2SnapshotSchema: this.$store.getters[`management/schemaFor`](SNAPSHOT),
 
       clusterToken: null,
-      etcdBackups:  null,
 
       logOpen:   false,
       logSocket: null,
@@ -243,18 +151,18 @@ export default {
     };
   },
 
-  watch: {
-    showNodes(neu) {
-      if (neu) {
-        this.$store.dispatch('rancher/findAll', { type: NORMAN.NODE });
-      }
+  computed: {
+    machinePools() {
+      return this.$store.getters['management/all'](CAPI.MACHINE);
+    },
+
+    machineNodes() {
+      return this.$store.getters['management/all'](MANAGEMENT.NODE);
     },
-  },
 
-  computed: {
     defaultTab() {
       if (this.showRegistration) {
-        if (this.value.isRke2 ? !this.machines?.length : !this.nodes?.length) {
+        if (!this.machinePools?.length && !this.machineNodes?.length) {
           return 'registration';
         }
       }
@@ -283,103 +191,14 @@ export default {
       return info;
     },
 
-    fakeMachines() {
-      const machineNameFn = (clusterName, machinePoolName) => `${ clusterName }-${ machinePoolName }`;
-
-      // When we scale up, the quantity will change to N+1 - so from 0 to 1, the quantity changes,
-      // but it takes tiem for the machine to appear, so the pool is empty, but if we just go off on a non-zero quqntity
-      // then the pool would be hidden - so we find empty pool by checking the machines
-      const emptyPools = (this.value.spec.rkeConfig?.machinePools || []).filter((mp) => {
-        const machineFullName = machineNameFn(this.value.name, mp.name);
-
-        const machines = this.value.machines.filter((machine) => {
-          const isElementalCluster = machine.spec?.infrastructureRef?.apiVersion.startsWith('elemental.cattle.io');
-          const machinePoolInfName = machine.spec?.infrastructureRef?.name;
-
-          if (isElementalCluster) {
-            return machinePoolInfName.includes(machineFullName);
-          }
-
-          // if labels exist, then the machineFullName must unequivocally be equal to manchineLabelFullName (based on labels)
-          const machineLabelClusterName = machine.metadata?.labels?.['cluster.x-k8s.io/cluster-name'];
-          const machineLabelPoolName = machine.metadata?.labels?.['rke.cattle.io/rke-machine-pool-name'];
-
-          if (machineLabelClusterName && machineLabelPoolName) {
-            const manchineLabelFullName = machineNameFn(machineLabelClusterName, machineLabelPoolName);
-
-            return machineFullName === manchineLabelFullName;
-          }
-
-          return machinePoolInfName.startsWith(machineFullName);
-        });
-
-        return machines.length === 0;
-      });
-
-      // When a deployment has no machines it's not shown.... so add a fake machine to it
-      // This is a catch all scenario seen in older node pool world but not deployments
-      return emptyPools.map((mp, i) => {
-        const pool = new EmptyCapiMachineDeployment(
-          {
-            id:       i,
-            metadata: {
-              name:      `${ this.value.nameDisplay }-${ mp.name }`,
-              namespace: this.value.namespace,
-            },
-            spec: {}
-          },
-          {
-            getters:     this.$store.getters,
-            rootGetters: this.$root.$store.getters,
-          }
-        );
-
-        const templateNamePrefix = `${ pool.metadata.name }-`;
-
-        // All of these properties are needed to ensure the pool displays correctly and that we can scale up and down
-        pool._template = this.machineTemplates.find((t) => t.metadata.name.startsWith(templateNamePrefix));
-        pool._cluster = this.value;
-        pool._clusterSpec = mp;
-
-        return {
-          poolId:           pool.id,
-          mainRowKey:       'isFake',
-          pool,
-          availableActions: []
-        };
-      });
-    },
-
-    machines() {
-      return [...this.value.machines, ...this.fakeMachines];
-    },
-
-    nodes() {
-      const nodes = this.allNodes.filter((x) => x.mgmtClusterId === this.value.mgmtClusterId);
-
-      return [...nodes, ...this.fakeNodes];
-    },
-
-    fakeNodes() {
-      // When a pool has no nodes it's not shown.... so add a fake node to it
-      const emptyNodePools = this.allNodePools.filter((x) => x.spec.clusterName === this.value.mgmtClusterId && x.spec.quantity === 0);
-
-      return emptyNodePools.map((np) => ({
-        spec:             { nodePoolName: np.id.replace('/', ':') },
-        mainRowKey:       'isFake',
-        pool:             np,
-        availableActions: []
-      }));
-    },
-
     showMachines() {
-      const showMachines = this.haveMachines && (this.value.isRke2 || !!this.machines.length);
+      const showMachines = this.machinePools.length && (this.value.isRke2 || !!this.machines.length);
 
       return showMachines && this.extDetailTabs.machines;
     },
 
     showNodes() {
-      return !this.showMachines && this.haveNodes && !!this.nodes.length;
+      return !this.showMachines && !!this.machineNodes;
     },
 
     showSnapshots() {
@@ -443,20 +262,6 @@ export default {
       ];
     },
 
-    rke1Snapshots() {
-      const mgmtId = this.value.mgmt?.id;
-
-      if ( !mgmtId ) {
-        return [];
-      }
-
-      return (this.etcdBackups || []).filter((x) => x.clusterId === mgmtId);
-    },
-
-    rke2Snapshots() {
-      return this.value.etcdSnapshots;
-    },
-
     rke1SnapshotHeaders() {
       return [
         STATE_NORMAN,
@@ -574,6 +379,91 @@ export default {
   },
 
   methods: {
+    // To display the provider and kubernetes in the masthead of this page we need to retrieve the appropriate node templates so they models can find the data
+    loadNodeTemplateForMasthead() {
+      if (this.$store.getters['management/canList'](MANAGEMENT.NODE_TEMPLATE)) {
+        const args = { id: MANAGEMENT.NODE_TEMPLATE, context: 'provisioning.cattle.io.cluster' };
+
+        if (this.$store.getters[`management/paginationEnabled`]?.(args)) {
+          const templateOpt = PaginationParamFilter.createMultipleFields([{
+            field: 'spec.clusterName',
+            value: this.value.metadata.name,
+            exact: true,
+          }]);
+
+          this.$store.dispatch(`management/findPage`, {
+            type: MANAGEMENT.NODE_TEMPLATE,
+            opt:  {
+              force:      true,
+              pagination: new FilterArgs({ filters: templateOpt })
+            }
+          });
+        } else {
+          this.$store.dispatch('management/findAll', { type: MANAGEMENT.NODE_TEMPLATE });
+        }
+      }
+    },
+
+    snapshotApiFilter(pagination) {
+      if (!pagination.filters) {
+        pagination.filters = [];
+      }
+
+      const required = PaginationParamFilter.createSingleField({
+        field: 'spec.clusterName',
+        exact: true,
+        value: this.value.metadata.name,
+      });
+
+      pagination.filters.push(required);
+
+      return pagination;
+    },
+
+    snapshotLocalFilter(rows) {
+      return rows.filter((r) => r.spec.clusterName === this.value.metadata.name);
+    },
+
+    machinePoolApiFilter(pagination) {
+      if (!pagination.filters) {
+        pagination.filters = [];
+      }
+
+      const required = PaginationParamFilter.createSingleField({
+        field: 'spec.clusterName',
+        exact: true,
+        value: this.value.metadata.name,
+      });
+
+      pagination.filters.push(required);
+
+      return pagination;
+    },
+
+    machinePoolLocalFilter(rows) {
+      return rows.filter((r) => r.spec.clusterName === this.value.metadata.name);
+    },
+
+    nodePoolApiFilter(pagination) {
+      if (!pagination.filters) {
+        pagination.filters = [];
+      }
+
+      const required = PaginationParamFilter.createSingleField({
+        field: 'spec.clusterName',
+        exact: true,
+        value: this.value.metadata.name,
+      });
+
+      pagination.filters.push(required);
+
+      return pagination;
+    },
+
+    nodePoolLocalFilter(rows) {
+      return rows.filter((r) => r.spec.clusterName === this.value.metadata.name || r.id.includes(this.value.metadata.name));
+    },
+
     toggleScaleDownModal( event, resources ) {
       // Check if the user held alt key when an action is clicked.
       const alt = isAlternate(event);
@@ -691,26 +581,6 @@ export default {
         return day(time).format(this.dateTimeFormatStr);
       }
     },
-
-    machineSortGenerationFn() {
-      // The sort generation function creates a unique value and is used to create a key including sort details.
-      // The unique key determines if the list is redrawn or a cached version is shown.
-      // Because we ensure the 'not in a pool' group is there via a row, and timing issues, the unqiue key doesn't change
-      // after a machine is added/removed... so the list won't update... so we need to inject a string to ensure the key is fresh
-      const base = defaultTableSortGenerationFn(this.machineSchema, this.$store);
-
-      return base + (!!this.fakeMachines.length ? '-fake' : '');
-    },
-
-    nodeSortGenerationFn() {
-      // The sort generation function creates a unique value and is used to create a key including sort details.
-      // The unique key determines if the list is redrawn or a cached version is shown.
-      // Because we ensure the 'not in a pool' group is there via a row, and timing issues, the unqiue key doesn't change
-      // after a machine is added/removed... so the list won't update... so we need to inject a string to ensure the key is fresh
-      const base = defaultTableSortGenerationFn(this.mgmtNodeSchema, this.$store);
-
-      return base + (!!this.fakeNodes.length ? '-fake' : '');
-    },
   }
 };
 </script>
@@ -750,8 +620,7 @@ export default {
         :label-key="value.isCustom ? 'cluster.tabs.machines' : 'cluster.tabs.machinePools'"
         :weight="4"
       >
-        <ResourceTable
-          :rows="machines"
+        <PaginatedResourceTable
           :schema="machineSchema"
           :headers="machineHeaders"
           default-sort-by="name"
@@ -759,19 +628,10 @@ export default {
           :group-by="value.isCustom ? null : 'poolId'"
           group-ref="pool"
           :group-sort="['pool.nameDisplay']"
-          :sort-generation-fn="machineSortGenerationFn"
+          :api-filter="machinePoolApiFilter"
+          :local-filter="machinePoolLocalFilter"
+          context="provisioning.cattle.io.cluster"
         >
-          <template #main-row:isFake="{fullColspan}">
-            <tr class="main-row">
-              <td
-                :colspan="fullColspan"
-                class="no-entries"
-              >
-                {{ t('node.list.noNodes') }}
-              </td>
-            </tr>
-          </template>
-
           <template #group-by="{group}">
             <div
               class="pool-row"
@@ -829,7 +689,7 @@ export default {
               </div>
             </div>
           </template>
-        </ResourceTable>
+        </PaginatedResourceTable>
       </Tab>
 
       <Tab
@@ -838,27 +698,17 @@ export default {
         :label-key="value.isCustom ? 'cluster.tabs.machines' : 'cluster.tabs.machinePools'"
         :weight="4"
       >
-        <ResourceTable
+        <PaginatedResourceTable
           :schema="mgmtNodeSchema"
           :headers="mgmtNodeSchemaHeaders"
-          :rows="nodes"
           :groupable="false"
           :group-by="value.isCustom ? null : 'spec.nodePoolName'"
           group-ref="pool"
           :group-sort="['pool.nameDisplay']"
-          :sort-generation-fn="nodeSortGenerationFn"
+          :api-filter="nodePoolApiFilter"
+          :local-filter="nodePoolLocalFilter"
+          context="provisioning.cattle.io.cluster"
         >
-          <template #main-row:isFake="{fullColspan}">
-            <tr class="main-row">
-              <td
-                :colspan="fullColspan"
-                class="no-entries"
-              >
-                {{ t('node.list.noNodes') }}
-              </td>
-            </tr>
-          </template>
-
           <template #group-by="{group}">
             <div
               class="pool-row"
@@ -923,7 +773,7 @@ export default {
               </div>
             </div>
           </template>
-        </ResourceTable>
+        </PaginatedResourceTable>
       </Tab>
 
       <Tab
@@ -1018,16 +868,19 @@ export default {
         :weight="1"
       >
         <SortableTable
+          v-if="value.isRke1"
           class="snapshots"
           :data-testid="'cluster-snapshots-list'"
-          :headers="value.isRke1 ? rke1SnapshotHeaders : rke2SnapshotHeaders"
+          :headers="rke1SnapshotHeaders"
           default-sort-by="age"
           :table-actions="value.isRke1"
-          :rows="value.isRke1 ? rke1Snapshots : rke2Snapshots"
+          :rows="rke1Snapshots"
           :search="false"
           :groupable="true"
           :group-by="snapshotsGroupBy"
         >
+          <!-- Removing the group by namespace/list buttons in the middle header -->
+          <template #header-middle />
           <template #header-right>
             <AsyncButton
               mode="snapshot"
@@ -1044,6 +897,39 @@ export default {
             </div>
           </template>
         </SortableTable>
+        <PaginatedResourceTable
+          v-else
+          class="snapshots"
+          :data-testid="'cluster-snapshots-list'"
+          :schema="rke2SnapshotSchema"
+          :headers="rke2SnapshotHeaders"
+          default-sort-by="age"
+          :table-actions="value.isRke1"
+          :search="false"
+          :namespaces="false"
+          :group-by="snapshotsGroupBy"
+          :api-filter="snapshotApiFilter"
+          :local-filter="snapshotLocalFilter"
+          context="provisioning.cattle.io.cluster"
+        >
+          <!-- Removing the group by namespace/list buttons in the middle header -->
+          <template #header-middle />
+          <template #header-right>
+            <AsyncButton
+              mode="snapshot"
+              class="btn role-primary"
+              :disabled="!isClusterReady"
+              @click="takeSnapshot"
+            />
+          </template>
+          <template #group-by="{group}">
+            <div class="group-bar">
+              <div class="group-tab">
+                {{ t('cluster.snapshot.groupLabel') }}: {{ group.key }}
+              </div>
+            </div>
+          </template>
+        </PaginatedResourceTable>
       </Tab>
     </ResourceTabs>
   </div>
diff --git a/shell/list/provisioning.cattle.io.cluster.vue b/shell/list/provisioning.cattle.io.cluster.vue
index e2f2fb0c404..24711ed0529 100644
--- a/shell/list/provisioning.cattle.io.cluster.vue
+++ b/shell/list/provisioning.cattle.io.cluster.vue
@@ -1,23 +1,24 @@
 <script>
 import { Banner } from '@components/Banner';
-import ResourceTable from '@shell/components/ResourceTable';
+import PaginatedResourceTable from '@shell/components/PaginatedResourceTable';
 import Masthead from '@shell/components/ResourceList/Masthead';
 import { allHash } from '@shell/utils/promise';
 import { CAPI, MANAGEMENT, SNAPSHOT, NORMAN } from '@shell/config/types';
 import { MODE, _IMPORT } from '@shell/config/query-params';
-import { filterOnlyKubernetesClusters, filterHiddenLocalCluster } from '@shell/utils/cluster';
+import { filterOnlyKubernetesClusters, filterHiddenLocalCluster, paginationFilterHiddenLocalCluster } from '@shell/utils/cluster';
 import { mapFeature, HARVESTER as HARVESTER_FEATURE } from '@shell/store/features';
 import { NAME as EXPLORER } from '@shell/config/product/explorer';
-import ResourceFetch from '@shell/mixins/resource-fetch';
 import { BadgeState } from '@components/BadgeState';
 import CloudCredExpired from '@shell/components/formatter/CloudCredExpired';
+import { PaginationParamFilter, FilterArgs, PaginationFilterField } from '@shell/types/store/pagination.types';
+import { AGE, STATE } from '@shell/config/table-headers';
+import { MACHINE_SUMMARY } from '@shell/config/product/manager';
 
 export default {
   components: {
-    Banner, ResourceTable, Masthead, BadgeState, CloudCredExpired
+    Banner, PaginatedResourceTable, Masthead, BadgeState, CloudCredExpired
   },
-  mixins: [ResourceFetch],
-  props:  {
+  props: {
     loadIndeterminate: {
       type:    Boolean,
       default: false
@@ -34,68 +35,30 @@ export default {
     }
   },
 
-  async fetch() {
-    this.$initializeFetchData(CAPI.RANCHER_CLUSTER);
-    const hash = {
-      rancherClusters: this.$fetchType(CAPI.RANCHER_CLUSTER),
-      normanClusters:  this.$fetchType(NORMAN.CLUSTER, [], 'rancher'),
-      mgmtClusters:    this.$fetchType(MANAGEMENT.CLUSTER),
-    };
-
-    this.$store.dispatch('rancher/findAll', { type: NORMAN.CLOUD_CREDENTIAL });
-
-    if ( this.$store.getters['management/canList'](SNAPSHOT) ) {
-      hash.etcdSnapshots = this.$fetchType(SNAPSHOT);
-    }
-
-    if ( this.$store.getters['management/canList'](CAPI.MACHINE) ) {
-      hash.capiMachines = this.$fetchType(CAPI.MACHINE);
-    }
-
-    if ( this.$store.getters['management/canList'](MANAGEMENT.NODE) ) {
-      hash.mgmtNodes = this.$fetchType(MANAGEMENT.NODE);
-    }
-
-    if ( this.$store.getters['management/canList'](MANAGEMENT.NODE_POOL) ) {
-      hash.mgmtPools = this.$fetchType(MANAGEMENT.NODE_POOL);
-    }
-
-    if ( this.$store.getters['management/canList'](MANAGEMENT.NODE_TEMPLATE) ) {
-      hash.mgmtTemplates = this.$fetchType(MANAGEMENT.NODE_TEMPLATE);
-    }
-
-    if ( this.$store.getters['management/canList'](CAPI.MACHINE_DEPLOYMENT) ) {
-      hash.machineDeployments = this.$fetchType(CAPI.MACHINE_DEPLOYMENT);
-    }
-
-    // Fetch RKE template revisions so we can show when an updated template is available
-    // This request does not need to be blocking
-    if ( this.$store.getters['management/canList'](MANAGEMENT.RKE_TEMPLATE_REVISION) ) {
-      this.$fetchType(MANAGEMENT.RKE_TEMPLATE_REVISION);
-    }
-
-    const res = await allHash(hash);
-
-    this.mgmtClusters = res.mgmtClusters;
-  },
-
   data() {
     return {
-      resource:     CAPI.RANCHER_CLUSTER,
-      schema:       this.$store.getters['management/schemaFor'](CAPI.RANCHER_CLUSTER),
-      mgmtClusters: [],
+      paginationContext:          'provisioning.cattle.io.clusters',
+      resource:                   CAPI.RANCHER_CLUSTER,
+      schema:                     this.$store.getters['management/schemaFor'](CAPI.RANCHER_CLUSTER),
+      canViewSnapshots:           this.$store.getters['management/canList'](SNAPSHOT),
+      canViewCapiMachines:        this.$store.getters['management/canList'](CAPI.MACHINE),
+      canViewManagementNodes:     this.$store.getters['management/canList'](MANAGEMENT.NODE),
+      canViewManagementPools:     this.$store.getters['management/canList'](MANAGEMENT.NODE_POOL),
+      canViewManagementTemplates: this.$store.getters['management/canList'](MANAGEMENT.NODE_TEMPLATE),
+      canViewMachineDeployments:  this.$store.getters['management/canList'](CAPI.MACHINE_DEPLOYMENT),
+      canViewRkeTemplateRevision: this.$store.getters['management/canList'](MANAGEMENT.RKE_TEMPLATE_REVISION),
     };
   },
 
   computed: {
-    filteredRows() {
-      // If Harvester feature is enabled, hide Harvester Clusters
-      if (this.harvesterEnabled) {
-        return filterHiddenLocalCluster(filterOnlyKubernetesClusters(this.rows, this.$store), this.$store);
-      }
+    // We no longer make the request for rows the paginated table does. We still need to access these rows for things like harvester.
+    rows() {
+      return this.$refs.paginatedTable?.rows || [];
+    },
 
-      // Otherwise, show Harvester clusters - these will be shown with a warning
-      return filterHiddenLocalCluster(this.rows, this.$store);
+    // We no longer make the request for rows the paginated table does. We still need to access these rows for things like harvester.
+    filteredRows() {
+      return this.$refs.paginatedTable?.filteredRows || [];
     },
 
     hiddenHarvesterCount() {
@@ -167,7 +130,227 @@ export default {
         expiring: counts.expiring ? this.t('cluster.cloudCredentials.banners.expiring', { count: counts.expiring }) : '',
         expired:  counts.expired ? this.t('cluster.cloudCredentials.banners.expired', { count: counts.expired }) : '',
       };
-    }
+    },
+
+    headers() {
+      return [
+        STATE,
+        {
+          name:          'name',
+          labelKey:      'tableHeaders.name',
+          value:         'nameDisplay',
+          sort:          false, // ['nameSort'],
+          formatter:     'ClusterLink',
+          canBeVariable: true,
+        },
+        {
+          name:     'kubernetesVersion',
+          labelKey: 'tableHeaders.version',
+          subLabel: 'Architecture',
+          value:    'kubernetesVersion',
+          sort:     'kubernetesVersion',
+          search:   'kubernetesVersion',
+        },
+        {
+          name:      'provider',
+          labelKey:  'tableHeaders.provider',
+          subLabel:  'Distro',
+          value:     'machineProvider',
+          sort:      ['machineProvider', 'provisioner'],
+          formatter: 'ClusterProvider',
+        },
+        MACHINE_SUMMARY,
+        AGE,
+        {
+          name:  'explorer',
+          label: ' ',
+          align: 'right',
+          width: 65,
+        }];
+    },
+  },
+
+  methods: {
+    clusterFilter(clusters) {
+      // If Harvester feature is enabled, hide Harvester Clusters
+      if (this.harvesterEnabled) {
+        return filterHiddenLocalCluster(filterOnlyKubernetesClusters(clusters, this.$store), this.$store);
+      }
+
+      // Otherwise, show Harvester clusters - these will be shown with a warning
+      return filterHiddenLocalCluster(clusters, this.$store);
+    },
+    apiFilter(pagination) {
+      if (!pagination.filters) {
+        pagination.filters = [];
+      }
+
+      // The first filter is has an empty fields prop which is causing the table to be empty
+      pagination.filters = pagination.filters.filter((f) => f.fields.length > 0);
+      pagination.filters.push(paginationFilterHiddenLocalCluster(this.$store, false));
+
+      return pagination;
+    },
+    async fetchSecondaryResources() {
+      const hash = {
+        rancherClusters: this.$store.dispatch('management/findAll', { type: CAPI.RANCHER_CLUSTER }),
+        normanClusters:  this.$store.dispatch('rancher/findAll', { type: NORMAN.CLUSTER }),
+        mgmtClusters:    this.$store.dispatch('management/findAll', { type: MANAGEMENT.CLUSTER }),
+      };
+
+      this.$store.dispatch('rancher/findAll', { type: NORMAN.CLOUD_CREDENTIAL });
+
+      if ( this.canViewSnapshots ) {
+        hash.etcdSnapshots = this.$store.dispatch('management/findAll', { type: SNAPSHOT });
+      }
+
+      if ( this.canViewCapiMachines ) {
+        hash.capiMachines = this.$store.dispatch('management/findAll', { type: CAPI.MACHINE });
+      }
+
+      if ( this.canViewManagementNodes ) {
+        hash.mgmtNodes = this.$store.dispatch('management/findAll', { type: MANAGEMENT.NODE });
+      }
+
+      if ( this.canViewManagementPools ) {
+        hash.mgmtPools = this.$store.dispatch('management/findAll', { type: MANAGEMENT.NODE_POOL });
+      }
+
+      if ( this.canViewManagementTemplates ) {
+        hash.mgmtTemplates = this.$store.dispatch('management/findAll', { type: MANAGEMENT.NODE_TEMPLATE });
+      }
+
+      if ( this.canViewMachineDeployments ) {
+        hash.machineDeployments = this.$store.dispatch('management/findAll', { type: CAPI.MACHINE_DEPLOYMENT });
+      }
+
+      // Fetch RKE template revisions so we can show when an updated template is available
+      // This request does not need to be blocking
+      if ( this.canViewRkeTemplateRevision ) {
+        this.$store.dispatch('management/findAll', { type: MANAGEMENT.RKE_TEMPLATE_REVISION });
+      }
+
+      await allHash(hash);
+    },
+
+    async fetchPageSecondaryResources({
+      canPaginate, force, page, pagResult
+    }) {
+      if (!canPaginate || !page?.length) {
+        return;
+      }
+
+      const hash = {};
+
+      if ( this.canViewSnapshots ) {
+        const paginatedOpt = {
+          force,
+          pagination: new FilterArgs({
+            filters: PaginationParamFilter.createMultipleFields(page.map((r) => new PaginationFilterField({
+              field: 'spec.clusterName',
+              value: r.metadata.name
+            }))),
+          })
+        };
+
+        hash.etcdSnapshots = this.$store.dispatch(`management/findPageOrAll`, {
+          type: SNAPSHOT, context: this.paginationContext, paginatedOpt
+        });
+      }
+
+      if ( this.canViewCapiMachines ) {
+        const paginatedOpt = {
+          force,
+          pagination: new FilterArgs({
+            filters: PaginationParamFilter.createMultipleFields(page.map((r) => new PaginationFilterField({
+              field: 'spec.clusterName',
+              value: r.metadata.name
+            }))),
+          })
+        };
+
+        hash.capiMachines = this.$store.dispatch(`management/findPageOrAll`, {
+          type: CAPI.MACHINE, context: this.paginationContext, paginatedOpt
+        });
+      }
+
+      if ( this.canViewManagementNodes ) {
+        const paginatedOpt = {
+          force,
+          pagination: new FilterArgs({
+            filters: PaginationParamFilter.createMultipleFields(page.map((r) => new PaginationFilterField({
+              field: 'id',
+              value: r.id,
+              exact: false,
+            }))),
+          })
+        };
+
+        hash.mgmtNodes = this.$store.dispatch(`management/findPageOrAll`, {
+          type: MANAGEMENT.NODE, context: this.paginationContext, paginatedOpt
+        });
+      }
+
+      if ( this.canViewManagementTemplates && this.canViewManagementPools ) {
+        const nodePoolFilters = PaginationParamFilter.createMultipleFields(page
+          .filter((p) => p.status?.clusterName)
+          .map((r) => new PaginationFilterField({
+            field: 'spec.clusterName',
+            value: r.status?.clusterName
+          })));
+        const nodePools = await this.$store.dispatch(`management/findPageOrAll`, {
+          type:         MANAGEMENT.NODE_POOL,
+          context:      this.paginationContext,
+          paginatedOpt: {
+            force,
+            pagination: new FilterArgs({ filters: nodePoolFilters })
+          }
+        });
+
+        const templateOpt = PaginationParamFilter.createMultipleFields(nodePools
+          .filter((np) => !!np.nodeTemplateId)
+          .map((np) => new PaginationFilterField({
+            field: 'id',
+            value: np.nodeTemplateId,
+            exact: true,
+          })));
+
+        hash.mgmtTemplates = this.$store.dispatch(`management/findPageOrAll`, {
+          type:         MANAGEMENT.NODE_TEMPLATE,
+          context:      this.paginationContext,
+          paginatedOpt: {
+            force,
+            pagination: new FilterArgs({ filters: templateOpt })
+          }
+        });
+      }
+
+      if ( this.canViewMachineDeployments ) {
+        const paginatedOpt = {
+          force,
+          pagination: new FilterArgs({
+            filters: PaginationParamFilter.createMultipleFields(page.map((r) => new PaginationFilterField({
+              field: 'spec.clusterName',
+              value: r.metadata.name
+            }))),
+          })
+        };
+
+        hash.machineDeployments = this.$store.dispatch(`management/findPageOrAll`, {
+          type: CAPI.MACHINE_DEPLOYMENT, context: this.paginationContext, paginatedOpt
+        });
+      }
+
+      await allHash(hash);
+    },
+  },
+
+  beforeUnmount() {
+    this.$store.dispatch('management/forgetType', SNAPSHOT);
+    this.$store.dispatch('management/forgetType', CAPI.MACHINE);
+    this.$store.dispatch('management/forgetType', MANAGEMENT.NODE);
+    this.$store.dispatch('management/forgetType', MANAGEMENT.NODE_TEMPLATE);
+    this.$store.dispatch('management/forgetType', CAPI.MACHINE_DEPLOYMENT);
   },
 
   $loadingResources() {
@@ -179,12 +362,6 @@ export default {
 
 <template>
   <div>
-    <Banner
-      v-if="hiddenHarvesterCount"
-      color="info"
-      :label="t('cluster.harvester.clusterWarning', {count: hiddenHarvesterCount} )"
-    />
-
     <Masthead
       :schema="schema"
       :resource="resource"
@@ -219,15 +396,20 @@ export default {
       :label="tokenExpiredData.expired"
     />
 
-    <ResourceTable
+    <PaginatedResourceTable
+      ref="paginatedTable"
       :schema="schema"
-      :rows="filteredRows"
+      :headers="headers"
+      :pagination-headers="headers"
       :namespaced="nonStandardNamespaces"
-      :loading="loading"
+      :api-filter="apiFilter"
+      :local-filter="clusterFilter"
+      :fetch-secondary-resources="fetchSecondaryResources"
+      :fetch-page-secondary-resources="fetchPageSecondaryResources"
       :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
       :data-testid="'cluster-list'"
-      :force-update-live-and-delayed="forceUpdateLiveAndDelayed"
       :sub-rows="true"
+      :context="paginationContext"
     >
       <!-- Why are state column and subrow overwritten here? -->
       <!-- for rke1 clusters, where they try to use the mgmt cluster stateObj instead of prov cluster stateObj,  -->
@@ -304,6 +486,6 @@ export default {
           {{ t('cluster.explore') }}
         </button>
       </template>
-    </ResourceTable>
+    </PaginatedResourceTable>
   </div>
 </template>
diff --git a/shell/mixins/resource-fetch-api-pagination.js b/shell/mixins/resource-fetch-api-pagination.js
index 5cc7b0640b5..d8071f5c25d 100644
--- a/shell/mixins/resource-fetch-api-pagination.js
+++ b/shell/mixins/resource-fetch-api-pagination.js
@@ -20,7 +20,10 @@ export default {
     },
 
     /**
-     * Where in the ui this mixin is used. For instance the home page cluster list would be `home`
+     * Where in the ui this mixin is used. For instance the home page cluster list would be `home`.
+     *
+     * This is used as method to enable server side pagination in certain areas of the code.
+     * See @shell/config.settings.ts DEFAULT_PERF_SETTING.serverPagination for some examples of enabling SSP on resources in specific areas.
      */
     context: {
       type:    String,
diff --git a/shell/plugins/dashboard-store/actions.js b/shell/plugins/dashboard-store/actions.js
index f174d092e7a..510d67bb199 100644
--- a/shell/plugins/dashboard-store/actions.js
+++ b/shell/plugins/dashboard-store/actions.js
@@ -143,6 +143,21 @@ export default {
     }
   },
 
+  async findPageOrAll(ctx, {
+    type, context, paginatedOpt, findAllOpt
+  }) {
+    const { getters, dispatch } = ctx;
+
+    const args = {
+      id: type,
+      context,
+    };
+
+    const paginationEnabled = getters[`paginationEnabled`]?.(args);
+
+    return paginationEnabled ? dispatch('findPage', { type, opt: paginatedOpt }) : dispatch('findAll', { type, opt: findAllOpt });
+  },
+
   /**
    *
    * @param {*} ctx
diff --git a/shell/plugins/steve/steve-pagination-utils.ts b/shell/plugins/steve/steve-pagination-utils.ts
index 84eac5f4d08..e403413f108 100644
--- a/shell/plugins/steve/steve-pagination-utils.ts
+++ b/shell/plugins/steve/steve-pagination-utils.ts
@@ -12,7 +12,8 @@ import {
   SERVICE,
   INGRESS,
   WORKLOAD_TYPES,
-  HPA
+  HPA,
+  SNAPSHOT
 } from '@shell/config/types';
 import { CAPI as CAPI_LABELS, CATTLE_PUBLIC_ENDPOINTS } from '@shell/config/labels-annotations';
 import { Schema } from '@shell/plugins/steve/schema';
@@ -153,6 +154,9 @@ class StevePaginationUtils extends NamespaceProjectFilters {
     [CAPI.MACHINE]: [
       { field: 'spec.clusterName' }
     ],
+    // [CAPI.MACHINE_DEPLOYMENT]: [
+    // { field: 'spec.clusterName' } // Pending API support  (blocked https://github.com/rancher/rancher/issues/48473 (index fields)
+    // ],
     [EVENT]: [
       { field: '_type' },
       { field: 'reason' },
@@ -195,6 +199,9 @@ class StevePaginationUtils extends NamespaceProjectFilters {
       { field: 'status.reason' },
       { field: 'spec.persistentVolumeReclaimPolicy' },
     ],
+    [SNAPSHOT]: [
+      // { field: 'spec.clusterName' } // Pending API support  (blocked https://github.com/rancher/rancher/issues/48473 (index fields)
+    ],
     [STORAGE_CLASS]: [
       { field: 'provisioner' },
       // { field: `metadata.annotations[STORAGE.DEFAULT_STORAGE_CLASS]` }, // Pending API Support - https://github.com/rancher/rancher/issues/48453
diff --git a/shell/utils/cluster.js b/shell/utils/cluster.js
index ac05751ae47..ad57a01b8c6 100644
--- a/shell/utils/cluster.js
+++ b/shell/utils/cluster.js
@@ -3,7 +3,7 @@ import { camelToTitle } from '@shell/utils/string';
 import { CAPI } from '@shell/config/labels-annotations';
 import { MANAGEMENT, VIRTUAL_HARVESTER_PROVIDER } from '@shell/config/types';
 import { SETTING } from '@shell/config/settings';
-import { PaginationFilterField, PaginationParamFilter } from '@shell/types/store/pagination.types';
+import { PaginationFilterField, PaginationParamFilter, FilterArgs } from '@shell/types/store/pagination.types';
 
 /**
  * Combination of paginationFilterHiddenLocalCluster and paginationFilterOnlyKubernetesClusters
@@ -63,6 +63,26 @@ export function paginationFilterHiddenLocalCluster(store, filterMgmtCluster = tr
   return PaginationParamFilter.createMultipleFields(filter);
 }
 
+export async function hasAccessToLocalCluster(store) {
+  const opt = {
+    force:      true,
+    pagination: new FilterArgs({
+      filters: PaginationParamFilter.createMultipleFields([new PaginationFilterField({
+        field:  `id`,
+        value:  'fleet-local/local',
+        exact:  true,
+        equals: false,
+      })]),
+    })
+  };
+
+  const clusters = await store.dispatch('management/findPage', { type: MANAGEMENT.CLUSTER, opt });
+
+  const localCluster = clusters.filter((c) => c.id === 'local');
+
+  return localCluster.length > 0;
+}
+
 /**
  * The vai backed api's `filter` equivalent of `filterOnlyKubernetesClusters`
  *
diff --git a/shell/utils/settings.ts b/shell/utils/settings.ts
index 1af7553a724..7a368e22f6e 100644
--- a/shell/utils/settings.ts
+++ b/shell/utils/settings.ts
@@ -104,5 +104,9 @@ export const getPerformanceSetting = (rootGetters: Record<string, (arg0: string,
   // Start with the default and overwrite the values from the setting - ensures we have defaults for newly added options
   const safeDefaults = Object.assign({}, DEFAULT_PERF_SETTING);
 
-  return Object.assign(safeDefaults, perfSetting || {});
+  const r = Object.assign(safeDefaults, perfSetting || {});
+
+  r.serverPagination.stores.management.resources.enableSome.enabled[0]?.context?.push('provisioning.cattle.io.clusters');
+
+  return r;
 };