Merge pull request rancher#10349 from richard-cox/pagination

Server-side pagination - First, limited change, disabled in code
momesgin · Apr 5, 2024 · 7108e56 · 7108e56
2 parents b3eee6c + d189d23
commit 7108e56
Show file tree

Hide file tree

Showing 41 changed files with 2,102 additions and 496 deletions.
diff --git a/shell/assets/translations/en-us.yaml b/shell/assets/translations/en-us.yaml
@@ -4335,7 +4335,7 @@ prefs:
   advFeatures:
     title: Advanced Features
     viewInApi: Enable "View in API"
-    allNamespaces: Show system Namespaces managed by Rancher (not intended for editing or deletion)
+    allNamespaces: Show dynamic Namespaces managed by Rancher (not intended for editing or deletion)
     themeShortcut: Enable Dark/Light Theme keyboard shortcut toggle (shift+T)
     pluginDeveloper: Enable Extension developer features
   hideDesc:
@@ -4781,6 +4781,7 @@ resourceList:
     createFromYaml: Create from YAML
     createResource: "Create {resourceName}"
   nsFiltering: "Please select one or more namespaces or projects using the filter above."
+  nsFilteringGeneric: "Please select a valid namespace or project option using the filter above."
   nsFilterToolTip: "Filtering is restricted to projects and namespaces"
 resourceLoadingIndicator:
   loading: Loading

diff --git a/shell/components/EventsTable.vue b/shell/components/EventsTable.vue
diff --git a/shell/components/ResourceList/index.vue b/shell/components/ResourceList/index.vue
@@ -55,7 +55,7 @@ export default {
 
       // If your list page has a fetch then it's responsible for populating rows itself
       if ( component?.fetch ) {
-        this.hasFetch = true;
+        this.componentWillFetch = true;
       }
 
       // If the custom component supports it, ask it what resources it loads, so we can
@@ -68,15 +68,15 @@ export default {
       }
     }
 
-    if ( !this.hasFetch ) {
+    if ( !this.componentWillFetch ) {
       if ( !schema ) {
         store.dispatch('loadingError', new Error(this.t('nav.failWhale.resourceListNotFound', { resource }, true)));
 
         return;
       }
 
-      // See comment for `namespaceFilterRequired` watcher, skip fetch if we don't have a valid NS
-      if (!this.namespaceFilterRequired) {
+      // See comment for `namespaceFilter` and `pagination` watchers, skip fetch if we're not ready yet... and something is going to call fetch later on
+      if (!this.namespaceFilterRequired && (!this.canPaginate || this.refreshFlag)) {
         await this.$fetchType(resource);
       }
     }
@@ -103,7 +103,11 @@ export default {
       extensionType:                    ExtensionPoint.PANEL,
       extensionLocation:                PanelLocation.RESOURCE_LIST,
       loadResources:                    [resource], // List of resources that will be loaded, this could be many (`Workloads`)
-      hasFetch:                         false,
+      /**
+       * Will the custom component handle the fetch of resources....
+       * or will this instance fetch resources
+       */
+      componentWillFetch:               false,
       // manual refresh
       manualRefreshInit:                false,
       watch:                            false,
@@ -113,7 +117,7 @@ export default {
       // incremental loading
       loadIndeterminate:                false,
       // query param for simple filtering
-      useQueryParamsForSimpleFiltering: true
+      useQueryParamsForSimpleFiltering: true,
     };
   },
 
@@ -124,7 +128,7 @@ export default {
         return [];
       }
 
-      return this.$store.getters['type-map/headersFor'](this.schema);
+      return this.$store.getters['type-map/headersFor'](this.schema, this.canPaginate);
     },
 
     groupBy() {
@@ -138,6 +142,7 @@ export default {
   },
 
   watch: {
+
     /**
      * When a NS filter is required and the user selects a different one, kick off a new set of API requests
      *
@@ -148,14 +153,46 @@ export default {
      * This covers case 1
      */
     namespaceFilter(neu, old) {
-      if (sameContents(neu, old)) {
-        return;
+      if (neu && !this.componentWillFetch) {
+        if (sameContents(neu, old)) {
+          return;
+        }
+
+        this.$fetchType(this.resource);
       }
+    },
 
-      if (neu && !this.hasFetch) {
+    /**
+     * When a pagination is required and the user changes page / sort / filter, kick off a new set of API requests
+     *
+     * ResourceList has two modes
+     * 1) ResourceList component handles API request to fetch resources
+     * 2) Custom list component handles API request to fetch resources
+     *
+     * This covers case 1
+     */
+    pagination(neu, old) {
+      if (neu && !this.componentWillFetch && this.paginationEqual(neu, old)) {
         this.$fetchType(this.resource);
       }
-    }
+    },
+
+    /**
+     * Monitor the rows to ensure deleting the last entry in a server-side paginated page doesn't
+     * result in an empty page
+     */
+    rows(neu) {
+      if (!this.pagination) {
+        return;
+      }
+
+      if (this.pagination.page > 1 && neu.length === 0) {
+        this.setPagination({
+          ...this.pagination,
+          page: this.pagination.page - 1
+        });
+      }
+    },
   },
 
   created() {
@@ -184,6 +221,16 @@ export default {
       {{ t('resourceList.nsFiltering') }}
     </template>
   </IconMessage>
+  <IconMessage
+    v-else-if="paginationNsFilterRequired"
+    :vertical="true"
+    :subtle="false"
+    icon="icon-filter_alt"
+  >
+    <template #message>
+      {{ t('resourceList.nsFilteringGeneric') }}
+    </template>
+  </IconMessage>
   <div v-else>
     <Masthead
       v-if="showMasthead"
@@ -225,11 +272,14 @@ export default {
       :adv-filter-prevent-filtering-labels="advFilterPreventFilteringLabels"
       :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
       :force-update-live-and-delayed="forceUpdateLiveAndDelayed"
+      :external-pagination-enabled="canPaginate"
+      :external-pagination-result="paginationResult"
+      @pagination-changed="paginationChanged"
     />
   </div>
 </template>
 
-  <style lang="scss" scoped>
+<style lang="scss" scoped>
     .header {
       position: relative;
     }
@@ -245,4 +295,4 @@ export default {
       top: 10px;
       right: 10px;
     }
-  </style>
+</style>