-
Notifications
You must be signed in to change notification settings - Fork 266
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Server-side pagination for home page clusters list and side bar clusters
- Functional Changes - SSP now works after vue3 bump - Home Page Clusters list now uses server-side pagination - Side Bar clusters list now uses server-side pagination - Wire in now supported sorting / filtering by id and name used for table columns - Allow pagination to be enabled given a specific context - Call findPage without persisting to store - New Pagination Tools - PaginatedResourceTable - Convenience Component, wraps ResourceTable with pagination specific props - PaginationWrapper - Convenience class to handle requests for resources and updates to them (avoiding store) - Regressions - Side Nav menu ready state was `mgmtCluster.isReady && !pCluster?.hasError`, now ???
- Loading branch information
1 parent
267a31e
commit 634996e
Showing
21 changed files
with
1,338 additions
and
334 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,125 @@ | ||
| <script lang="ts"> | ||
| import { defineComponent } from 'vue'; | ||
| import ResourceFetch from '@shell/mixins/resource-fetch'; | ||
| import ResourceTable from '@shell/components/ResourceTable.vue'; | ||
| import { StorePaginationResult } from 'types/store/pagination.types'; | ||
| export type FetchSecondaryResourcesOpts = { } | ||
| export type FetchSecondaryResources = (opts: FetchSecondaryResourcesOpts) => Promise<any> | ||
| export type FetchPageSecondaryResourcesOpts = { canPaginate: boolean, force: boolean, page: any[], pagResult: StorePaginationResult } | ||
| export type FetchPageSecondaryResources = (opts: FetchPageSecondaryResourcesOpts) => Promise<any> | ||
| /** | ||
| * This is meant to enable ResourceList like capabilities outside of List pages / components | ||
| * | ||
| * Specifically | ||
| * - Resource Fetch features, including server-side pagination | ||
| * - Some plumbing | ||
| * | ||
| * This avoids polluting the owning component with mixins | ||
| * | ||
| */ | ||
| export default defineComponent({ | ||
| name: 'PaginatedResourceTable', | ||
| components: { ResourceTable }, | ||
| mixins: [ResourceFetch], | ||
| props: { | ||
| schema: { | ||
| type: Object, | ||
| required: true, | ||
| }, | ||
| headers: { | ||
| type: Array, | ||
| default: null, | ||
| }, | ||
| paginationHeaders: { | ||
| type: Array, | ||
| default: null, | ||
| }, | ||
| namespaced: { | ||
| type: Boolean, | ||
| default: null, // Automatic from schema | ||
| }, | ||
| /** | ||
| * Information may be required from resources other than the primary one shown per row | ||
| * | ||
| * This will fetch them ALL and will be run in a non-server-side pagination world | ||
| */ | ||
| fetchSecondaryResources: { | ||
| type: Function, | ||
| default: null, | ||
| }, | ||
| /** | ||
| * Information may be required from resources other than the primary one shown per row | ||
| * | ||
| * This will fetch only those relevent to the current page using server-side pagination based filters | ||
| * | ||
| * called from shell/mixins/resource-fetch-api-pagination.js | ||
| */ | ||
| fetchPageSecondaryResources: { | ||
| type: Function, | ||
| default: null, | ||
| } | ||
| }, | ||
| data() { | ||
| return { resource: this.schema.id }; | ||
| }, | ||
| async fetch() { | ||
| await this.$fetchType(this.resource, [], this.inStore); | ||
| if (this.canPaginate && this.fetchSecondaryResources) { | ||
| await this.fetchSecondaryResources({ }); | ||
| } | ||
| }, | ||
| computed: { | ||
| safeHeaders() { | ||
| const customHeaders = this.canPaginate ? this.paginationHeaders : this.headers; | ||
| return customHeaders || this.$store.getters['type-map/headersFor'](this.schema, this.canPaginate); | ||
| } | ||
| } | ||
| }); | ||
| </script> | ||
|
|
||
| <template> | ||
| <div> | ||
| <ResourceTable | ||
| v-bind="$attrs" | ||
| :schema="schema" | ||
| :rows="rows" | ||
| :alt-loading="canPaginate" | ||
| :loading="loading" | ||
|
|
||
| :headers="safeHeaders" | ||
| :namespaced="namespaced" | ||
|
|
||
| :external-pagination-enabled="canPaginate" | ||
| :external-pagination-result="paginationResult" | ||
| @pagination-changed="paginationChanged" | ||
| > | ||
| <!-- Pass down templates provided by the caller --> | ||
| <template | ||
| v-for="(_, slot) of $slots" | ||
| v-slot:[slot]="scope" | ||
| > | ||
| <slot | ||
| :name="slot" | ||
| v-bind="scope" | ||
| /> | ||
| </template> | ||
| </ResourceTable> | ||
| </div> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.