Update pagination settings (almost) ready for production

- 'almost' applies to enabling SSP by default - Previously the ui-performance object contained a required set of resources to apply SSP to - This isn't workable going forward where the available resources will be updated between versions - Now the default is to use a set of default resources which can change between versions - Users can override if they wish
rancher · Jan 20, 2025 · d9b64f8 · d9b64f8
1 parent 4a5d2bb
commit d9b64f8
Show file tree

Hide file tree

Showing 6 changed files with 121 additions and 70 deletions.
diff --git a/shell/assets/translations/en-us.yaml b/shell/assets/translations/en-us.yaml
@@ -7580,7 +7580,10 @@ performance:
     label: Server-side Pagination
     description: By default Lists will fetch all resources and paginate in the browser (create the page given sorting and filtering settings). Change this setting to enable pagination server-side. This should help the responsiveness of the UI in systems with a lot of resources.
     checkboxLabel: Enable Server-side Pagination
-    applicable: "This applies to the following resource types"
+    checkboxUseDefault:
+      label: Apply to default resource types
+      placeholder: Default types will be updated in future versions. Check this setting to override the default with your own manually supplied settings.
+    applicable: Applies to the following resource types
     incompatibleDescription: "Server-side Pagination is incompatible with Manual Refresh and Incremental Loading. Enabling this will disable them."
     featureFlag: The&nbsp;<a href="{ffUrl}">Feature Flag</a>&nbsp;`ui-sql-cache` must be enabled to use this feature
     resources:

diff --git a/shell/config/settings.ts b/shell/config/settings.ts
@@ -253,38 +253,8 @@ export const DEFAULT_PERF_SETTING: PerfSettings = {
     }
   },
   serverPagination: {
-    enabled: false,
-    stores:  {
-      cluster: {
-        resources: {
-          enableAll:  false,
-          enableSome: {
-            // if a resource list is shown by a custom resource list component or has specific list headers then it's not generically shown
-            // and must be included here.
-            enabled: [
-              NODE, EVENT,
-              WORKLOAD_TYPES.CRON_JOB, WORKLOAD_TYPES.DAEMON_SET, WORKLOAD_TYPES.DEPLOYMENT, WORKLOAD_TYPES.JOB, WORKLOAD_TYPES.STATEFUL_SET, POD,
-              CATALOG.APP, CATALOG.CLUSTER_REPO, CATALOG.OPERATION,
-              HPA, INGRESS, SERVICE,
-              PV, CONFIG_MAP, STORAGE_CLASS, PVC, SECRET,
-              WORKLOAD_TYPES.REPLICA_SET, WORKLOAD_TYPES.REPLICATION_CONTROLLER
-            ],
-            generic: true,
-          }
-        }
-      },
-      management: {
-        resources: {
-          enableAll:  false,
-          enableSome: {
-            enabled: [
-              { resource: CAPI.RANCHER_CLUSTER, context: ['home', 'side-bar'] },
-              { resource: MANAGEMENT.CLUSTER, context: ['side-bar'] },
-            ],
-            generic: false,
-          }
-        }
-      }
-    }
+    enabled:          false,
+    useDefaultStores: true,
+    stores:           undefined,
   }
 };
diff --git a/shell/pages/c/_cluster/settings/performance.vue b/shell/pages/c/_cluster/settings/performance.vue
@@ -10,6 +10,8 @@ import { _EDIT, _VIEW } from '@shell/config/query-params';
 import UnitInput from '@shell/components/form/UnitInput';
 import { STEVE_CACHE } from '@shell/store/features';
 import { NAME as SETTING_PRODUCT } from '@shell/config/product/settings';
+import paginationUtils from '@shell/utils/pagination-utils';
+import { isDevBuild } from '@shell/utils/version';
 
 const incompatible = {
   incrementalLoading: ['forceNsFilterV2', 'serverPagination'],
@@ -74,7 +76,8 @@ export default {
           product:  SETTING_PRODUCT,
           resource: MANAGEMENT.FEATURE
         }
-      }).href
+      }).href,
+      isDev: process.env.NODE_ENV === 'dev',
     };
   },
 
@@ -93,10 +96,15 @@ export default {
       return this.$store.getters['features/get'](STEVE_CACHE);
     },
 
-    steveCacheApplicableResources() {
+    steveCacheAndSSPEnabled() {
+      return this.steveCacheEnabled && this.value.serverPagination.enabled
+    },
+
+    sspApplicableResources() {
       const storeResources = [];
+      const stores = paginationUtils.getStoreSettings(this.value.serverPagination);
 
-      Object.entries(this.value.serverPagination.stores).forEach(([store, settings]) => {
+      Object.entries(stores).forEach(([store, settings]) => {
         const resources = [];
 
         if (settings.resources.enableAll) {
@@ -173,7 +181,7 @@ export default {
       this.$store.dispatch('cluster/promptModal', {
         component:      'GenericPrompt',
         componentProps: {
-          applyMode: 'enable',
+          applyMode: 'continue',
           confirm:   (confirmed) => {
             this.value[property].enabled = confirmed;
           },
@@ -189,11 +197,15 @@ export default {
       });
     },
 
-    setPaginationDefaults() {
+    sspApplyDefaults(defaultStore) {
       this.value = {
         ...this.value,
         serverPagination: { ...DEFAULT_PERF_SETTING.serverPagination }
       };
+
+      if (defaultStore) {
+        this.value.serverPagination.stores = paginationUtils.getStoreDefault()
+      }
     }
   },
 };
@@ -213,10 +225,6 @@ export default {
             {{ t('performance.serverPagination.label') }}
           </h2>
           <p>{{ t('performance.serverPagination.description') }}</p>
-          <Banner
-            color="error"
-            label-key="performance.experimental"
-          />
           <Banner
             v-if="!steveCacheEnabled"
             v-clean-html="t(`performance.serverPagination.featureFlag`, { ffUrl }, true)"
@@ -226,22 +234,37 @@ export default {
             v-model:value="value.serverPagination.enabled"
             :mode="mode"
             :label="t('performance.serverPagination.checkboxLabel')"
-            class="mt-10 mb-20"
+            class="mt-10 mb-10"
             :primary="true"
-            :disabled="(!steveCacheEnabled && !value.serverPagination.enabled)"
+            :disabled="!steveCacheEnabled"
             @update:value="compatibleWarning('serverPagination', $event)"
           />
+
+          <div>
+            <Checkbox
+              v-model:value="value.serverPagination.useDefaultStores"
+              :mode="mode"
+              :label-key="'performance.serverPagination.checkboxUseDefault.label'"
+              :tooltip-key="'performance.serverPagination.checkboxUseDefault.placeholder'"
+              class="mt-10 mb-10"
+              :primary="true"
+              :disabled="!steveCacheAndSSPEnabled"
+            />
+          </div>
+
           <p :class="{ 'text-muted': !value.serverPagination.enabled }">
             {{ t('performance.serverPagination.applicable') }}
           </p>
           <p
-            v-clean-html="steveCacheApplicableResources"
+            v-clean-html="sspApplicableResources"
             :class="{ 'text-muted': !value.serverPagination.enabled }"
           />
           <button
+            v-if="isDev"
             class="btn btn-sm role-primary"
             style="width: fit-content;"
-            @click.prevent="setPaginationDefaults()"
+            @click.prevent="sspApplyDefaults(true)"
+            :disabled="!steveCacheAndSSPEnabled"
           >
             {{ t('performance.serverPagination.populateDefaults') }}
           </button>

diff --git a/shell/plugins/steve/steve-pagination-utils.ts b/shell/plugins/steve/steve-pagination-utils.ts
@@ -12,10 +12,12 @@ import {
   SERVICE,
   INGRESS,
   WORKLOAD_TYPES,
-  HPA
+  HPA,
+  SECRET
 } from '@shell/config/types';
 import { CAPI as CAPI_LABELS, CATTLE_PUBLIC_ENDPOINTS } from '@shell/config/labels-annotations';
 import { Schema } from '@shell/plugins/steve/schema';
+import { PaginationSettingsStore } from '@shell/types/resources/settings';
 
 class NamespaceProjectFilters {
   /**
@@ -458,4 +460,37 @@ class StevePaginationUtils extends NamespaceProjectFilters {
   }
 }
 
+export const PAGINATION_SETTINGS_STORE_DEFAULTS: PaginationSettingsStore = {
+  cluster: {
+    resources: {
+      enableAll:  false,
+      enableSome: {
+        // if a resource list is shown by a custom resource list component or has specific list headers then it's not generically shown
+        // and must be included here.
+        enabled: [
+          NODE, EVENT,
+          WORKLOAD_TYPES.CRON_JOB, WORKLOAD_TYPES.DAEMON_SET, WORKLOAD_TYPES.DEPLOYMENT, WORKLOAD_TYPES.JOB, WORKLOAD_TYPES.STATEFUL_SET, POD,
+          CATALOG.APP, CATALOG.CLUSTER_REPO, CATALOG.OPERATION,
+          HPA, INGRESS, SERVICE,
+          PV, CONFIG_MAP, STORAGE_CLASS, PVC, SECRET,
+          WORKLOAD_TYPES.REPLICA_SET, WORKLOAD_TYPES.REPLICATION_CONTROLLER
+        ],
+        generic: true,
+      }
+    }
+  },
+  management: {
+    resources: {
+      enableAll:  false,
+      enableSome: {
+        enabled: [
+          { resource: CAPI.RANCHER_CLUSTER, context: ['home', 'side-bar'] },
+          { resource: MANAGEMENT.CLUSTER, context: ['side-bar'] },
+        ],
+        generic: false,
+      }
+    }
+  }
+};
+
 export default new StevePaginationUtils();
diff --git a/shell/types/resources/settings.d.ts b/shell/types/resources/settings.d.ts
@@ -1,3 +1,25 @@
+
+export interface PaginationSettingsStore {
+  [name: string]: {
+    resources: {
+      /**
+       * Enable for all resources in this store
+       */
+      enableAll: boolean,
+      enableSome: {
+        /**
+         * Specific resource type to enable
+         */
+        enabled: (string | { resource: string, context: string[]})[],
+        /**
+         * There's no hardcoded headers or custom list for the resource type, headers will be generated from schema attributes.columns
+         */
+        generic: boolean,
+      },
+    }
+  }
+}
+
 /**
  * Settings to handle server side pagination
  */
@@ -6,29 +28,14 @@ export interface PaginationSettings {
    * Global setting to enable or disable
    */
   enabled: boolean,
+  /**
+   * Override `stores` and apply pagination to a set of default resource types that can change between versions
+   */
+  useDefaultStores: boolean,
   /**
    * Should pagination be enabled for resources in a store
    */
-  stores: {
-    [name: string]: {
-      resources: {
-        /**
-         * Enable for all resources in this store
-         */
-        enableAll: boolean,
-        enableSome: {
-          /**
-           * Specific resource type to enable
-           */
-          enabled: (string | { resource: string, context: string[]})[],
-          /**
-           * There's no hardcoded headers or custom list for the resource type, headers will be generated from schema attributes.columns
-           */
-          generic: boolean,
-        },
-      }
-    }
-  }
+  stores: PaginationSettingsStore | undefined
 }
 
 type Links = {

diff --git a/shell/utils/pagination-utils.ts b/shell/utils/pagination-utils.ts
@@ -1,4 +1,4 @@
-import { PaginationSettings } from '@shell/types/resources/settings';
+import { PaginationSettings, PaginationSettingsStore } from '@shell/types/resources/settings';
 import {
   NAMESPACE_FILTER_ALL_USER as ALL_USER,
   NAMESPACE_FILTER_ALL as ALL,
@@ -14,6 +14,7 @@ import { sameArrayObjects } from '@shell/utils/array';
 import { isEqual } from '@shell/utils/object';
 import { STEVE_CACHE } from '@shell/store/features';
 import { getPerformanceSetting } from '@shell/utils/settings';
+import { PAGINATION_SETTINGS_STORE_DEFAULTS } from '@shell/plugins/steve/steve-pagination-utils';
 
 /**
  * Helper functions for server side pagination
@@ -32,6 +33,18 @@ class PaginationUtils {
     return perf.serverPagination;
   }
 
+  public getStoreSettings(ctx: any): PaginationSettingsStore
+  public getStoreSettings(serverPagination: PaginationSettings): PaginationSettingsStore
+  public getStoreSettings(arg: any | PaginationSettings): PaginationSettingsStore {
+    const serverPagination: PaginationSettings = arg?.rootGetters !== undefined ? this.getSettings(arg) : arg;
+
+    return serverPagination?.useDefaultStores ? this.getStoreDefault() : serverPagination?.stores || this.getStoreDefault();
+  }
+
+  public getStoreDefault(): PaginationSettingsStore {
+    return PAGINATION_SETTINGS_STORE_DEFAULTS;
+  }
+
   isSteveCacheEnabled({ rootGetters }: any): boolean {
     // We always get Feature flags as part of start up (see `dispatch('features/loadServer')` in loadManagement)
     return rootGetters['features/get']?.(STEVE_CACHE);
@@ -58,7 +71,7 @@ class PaginationUtils {
       return false;
     }
 
-    const storeSettings = settings.stores?.[enabledFor.store];
+    const storeSettings = this.getStoreSettings(settings)?.[enabledFor.store];
 
     // No pagination setting for target store, not enabled
     if (!storeSettings) {