Update Lists
Make use of server-side pagination and filtering in lists.
Update ResourceTable to PaginatedResourceTable
When showing a list of resources previously a ResourceTable component was used. This would receive a resource schema and some properties. With those it would handle the fetch of all resources and monitoring them for updates. The headers / columns for the list would come from the resource's product configuration.
Now though we recommend using the PaginatedResourceTable component. This does the exact same as ResourceTable, however if server-side pagination is enabled it will utilise it, thus avoiding fetching all resources.
Examples
- rancher/dashboard shell/list/networking.k8s.io.ingress.vue
- rancher/dashboard shell/pages/c/_cluster/explorer/EventsTable.vue
- rancher/dashboard shell/list/service.vue
PaginatedResourceTable Column configuration
Due to pagination happening server-side the UI can no-longer sort and filter on properties it manages locally. The column configuration that supports this new process is automatically created unless custom columns have been provided.
To override existing non-compatible headers
- if headers are supplied by product configuration, supply a second array containing compatible headers to
- 
headers(
 <resourcetype>,
 <non server-side pagination compatible headers>,
 <server-side pagination headers>
 )
- this is the recommended way to customize the columns in lists
 
- 
- if headers are supplied to the PaginatedResourceTablevia:headers=, supply a second attribute containing compatible headers via:pagination-headers="..."- supplying headers directly to the table can be used if there is a situation where the default, global columns cannot be used
 
A compatible column will contain value, sort and search properties that reference values that exist natively in the resource server-side. Properties that reference constructed properties from the resource's model cannot be used.
Examples
- rancher/dashboard shell/list/service.vue- see headers(SERVICE,inshell/config/product/explorer.js
 
- see 
- rancher/dashboard shell/list/node.vue- see headers(NODE,inshell/config/product/explorer.js
 
- see 
- rancher/ui-plugin-examples
- see headers(UI_PLUGIN,inpkg/extension-crd/product.js
 
- see 
- rancher/dashboard shell/pages/c/_cluster/explorer/EventsTable.vue- see :pagination-headers="paginationHeaders"
 
- see 
- rancher/dashboard shell/pages/home.vue- see :pagination-headers="paginationHeaders"
 
- see 
Support for addTableColumn
Extensions can insert additional columns to existing tables by using the addTableColumn method.
Just like the PaginatedResourceTable header configuration this has been updated to support server-side pagination.
If only one column is supplied it will be used when server-side pagination is disabled, but also sanitized and used when enabled. This will only be functional if the value is a path to a property in the resource itself and not one provided by the resource's model (as per PaginatedResourceTable header changes).
To support the column when server-side paginated is enabled an additional column configuration object can be passed to addTableColumn.
Examples
- rancher/ui-plugin-examples pkg/extensions-api-demo/index.ts- see both plugin.addTableColumnusages
 
- see both 
Secondary Resources
The 'primary' resource of a list will be fetched, per page, by the PaginatedResourceTable component. However sometimes other 'secondary' resources are needed by a column to display additional information.
These can either be fetched
- once upfront when the component is first loaded
- Supply a method :fetchSecondaryResources="..."to the component
- Be careful not to load to many, otherwise fetchPageSecondaryResourcesshould be used
 
- Supply a method 
- whenever a new page is shown
- Supply a method :fetchPageSecondaryResources="..."to the component
- This could be triggered a lot so should itself be performant
 
- Supply a method 
For more information on fetching resources see the Update Requests page
Examples
- fetchSecondaryResources- rancher/dashboard shell/list/service.vue- The servicelists requires kubenoderesources in order to show NodePort links
 
- The 
- rancher/dashboard shell/list/persistentvolume.vue- The persistentvolumelist requirespersistentvolumeclaims to show PVCs connected to the PV
- This is used when server-side pagination is DISABLED
 
- The 
 
- rancher/dashboard 
- fetchPageSecondaryResources- rancher/dashboard shell/pages/home.vue- The home page shows a list of clusters
- In order to populate columns in that list a number of other resources are needed
- Only the resources required by the current page are fetched- rancher/dashboard shell/list/persistentvolume.vue
 
- The persistentvolumelist requirespersistentvolumeclaims to show PVCs connected to the PV- Only the PVC's associated with the page of PVs are fetched
- This is used when server-side pagination is ENABLED
 
 
- rancher/dashboard 
Additional filtering
By default PaginatedResourceTable will fetch all of the resource type (given the namespace filter). Sometimes lists require additional filtering. This can be done in two ways
- To support enabled Server-Side Pagination
- Supply a method :api-filter="..."to the component
- this will apply additional filters to the http requests used to fetch resources
 
- Supply a method 
- To support disabled Server-Side Pagination
- Supply a method :local-filter="..."to the component
- this will run every time the collection changes
 
- Supply a method 
Examples
- rancher/dashboard shell/list/catalog.cattle.io.clusterrepo.vue- The list of Apps / Repos is filtered by a specific annotation
 
- rancher/dashboard shell/components/form/ResourceTabs/index.vue- When viewing a specific resource, the Eventstab shows a list of events filtered to show events related to that specific resource
 
- When viewing a specific resource, the 
Choosing fields to display, sort and filter on
For all server-side pagination header and column configuration the value supplied to display, sort or filter must be a path in the resource itself and not computed locally in the browser. This ensures that all can be accessed outside of the browser when pagination occurs.
Paths must also be indexed server-side. This happens by default or automatically for a number of values. These are the only values that can be supplied to sort or filter on.
- metadata.name
- metadata.namespace
- id
- metadata.state.name
- metadata.creationTimestamp
- all values in metadata.labels- These are referenced as metadata.labels.<label name>
 
- These are referenced as 
- all values defined as additionalPrinterColumnsin the resource's Custom Resource Definition- These are referenced as metadata.fields.<index>
 
- These are referenced as 
Checklist
- ResourceTablehas been replaced with- PaginatedResourceTable
- If headers have been provided by either product configuration, PaginatedResourceTableattribute oraddTableColumnmethod additional server-side pagination compatible ones have also been provided- Header value,sortandsearchall reference properties on the native object stored server-side
- value,- sort, and- searchare all indexed server-side
 
- Header 
- Components containing PaginatedResourceTableshould fetch secondary resources efficiently as possible- Primary resources will be fetched automatically via the PaginatedResourceTablecomponent (no extra changes required)
- Secondary resources are fetched via functions fetchSecondaryResourcesand/orfetchPageSecondaryResourcespassed intoPaginatedResourceTable
- fetchSecondaryResourcesand- fetchPageSecondaryResourcesshould can use- findAllwhen server-side pagination is disabled
- fetchSecondaryResourcesand- fetchPageSecondaryResourcesshould cannot use- findAlland should use- findPagewhen server-side pagination is disabled
 
- Primary resources will be fetched automatically via the 
- If lists do not show all of a resource and required additional filtering both api-filterandlocal-filterhave been passed intoPaginatedResourceTable
- Changes have been validated when Server-Side Pagination is enabled and disabled via the ui-sql-cacheFeature Flag