From 634996e6d473f2e9e947f14c064c3d9bab3cbcc6 Mon Sep 17 00:00:00 2001 From: Richard Cox Date: Thu, 14 Nov 2024 15:57:48 +0000 Subject: [PATCH] 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 ??? --- shell/components/PaginatedResourceTable.vue | 125 ++++ shell/components/SortableTable/index.vue | 20 +- .../components/form/ResourceLabeledSelect.vue | 4 +- shell/components/nav/TopLevelMenu.helper.ts | 539 ++++++++++++++++++ shell/components/nav/TopLevelMenu.vue | 257 ++++----- shell/config/pagination-table-headers.js | 8 +- shell/config/product/explorer.js | 2 + shell/config/settings.ts | 14 +- shell/list/node.vue | 13 +- shell/mixins/resource-fetch-api-pagination.js | 29 +- shell/mixins/resource-fetch.js | 29 +- shell/pages/home.vue | 366 ++++++++---- shell/plugins/dashboard-store/actions.js | 43 +- shell/plugins/dashboard-store/getters.js | 7 +- shell/plugins/steve/steve-pagination-utils.ts | 30 +- shell/types/resources/settings.d.ts | 2 +- shell/types/store/pagination.types.ts | 13 + shell/types/store/vuex.d.ts | 8 + shell/utils/cluster.js | 81 ++- shell/utils/pagination-utils.ts | 25 +- shell/utils/pagination-wrapper.ts | 57 ++ 21 files changed, 1338 insertions(+), 334 deletions(-) create mode 100644 shell/components/PaginatedResourceTable.vue create mode 100644 shell/components/nav/TopLevelMenu.helper.ts create mode 100644 shell/utils/pagination-wrapper.ts diff --git a/shell/components/PaginatedResourceTable.vue b/shell/components/PaginatedResourceTable.vue new file mode 100644 index 00000000000..b296cd7bcec --- /dev/null +++ b/shell/components/PaginatedResourceTable.vue @@ -0,0 +1,125 @@ + + + diff --git a/shell/components/SortableTable/index.vue b/shell/components/SortableTable/index.vue index 5bf3f6dfccd..5a06aa7676b 100644 --- a/shell/components/SortableTable/index.vue +++ b/shell/components/SortableTable/index.vue @@ -361,7 +361,13 @@ export default { externalPaginationResult: { type: Object, default: null + }, + + manualRefreshButtonSize: { + type: String, + default: '' } + }, data() { @@ -571,9 +577,9 @@ export default { showHeaderRow() { return this.search || this.tableActions || - this.$slots['header-left']?.() || - this.$slots['header-middle']?.() || - this.$slots['header-right']?.(); + this.$slots['header-left'] || + this.$slots['header-middle'] || + this.$slots['header-right']; }, columns() { @@ -1109,6 +1115,7 @@ export default { +
+
@@ -1568,10 +1576,6 @@ export default { opacity: 0.5; pointer-events: none; } - - .manual-refresh { - height: 40px; - } .advanced-filter-group { position: relative; margin-left: 10px; diff --git a/shell/components/form/ResourceLabeledSelect.vue b/shell/components/form/ResourceLabeledSelect.vue index a4cbc64fabe..dd9e0e16e42 100644 --- a/shell/components/form/ResourceLabeledSelect.vue +++ b/shell/components/form/ResourceLabeledSelect.vue @@ -52,14 +52,14 @@ export enum RESOURCE_LABEL_SELECT_MODE { } /** - * Convience wrapper around the LabelSelect component to support pagination + * Convenience wrapper around the LabelSelect component to support pagination * * Handles * * 1) Conditionally enabling the pagination feature given system settings * 2) Helper function to fetch the pagination result * - * A number of ways can be provided to override the convienences (see props) + * A number of ways can be provided to override the conveniences (see props) */ export default defineComponent({ name: 'ResourceLabeledSelect', diff --git a/shell/components/nav/TopLevelMenu.helper.ts b/shell/components/nav/TopLevelMenu.helper.ts new file mode 100644 index 00000000000..5eac716c160 --- /dev/null +++ b/shell/components/nav/TopLevelMenu.helper.ts @@ -0,0 +1,539 @@ +import { CAPI, MANAGEMENT } from 'config/types'; +import { PaginationParam, PaginationParamFilter, PaginationSort } from 'types/store/pagination.types'; +import { VuexStore } from 'types/store/vuex'; +import { filterHiddenLocalCluster, filterOnlyKubernetesClusters, paginationFilterClusters } from 'utils/cluster'; +import devConsole from 'utils/dev-console'; +import PaginationWrapper from 'utils/pagination-wrapper'; +import { allHash } from 'utils/promise'; +import { sortBy } from 'utils/sort'; +import { LocationAsRelativeRaw } from 'vue-router'; + +interface TopLevelMenuCluster { + id: string, + label: string, + ready: boolean + providerNavLogo: string, + badge: string, + isLocal: boolean, + pinned: boolean, + description: string, + pin: () => void, + unpin: () => void, + clusterRoute: LocationAsRelativeRaw, +} + +interface UpdateArgs { + searchTerm: string, + pinnedIds: string[], + unPinnedMax?: number, +} + +type MgmtCluster = { + [key: string]: any +} + +type ProvCluster = { + [key: string]: any +} +/** + * Order + * 1. Specific Local Cluster + * 2. Ready + * 3. Name + */ +const DEFAULT_SORT: Array = [ + // Put local cluster at top of list - https://github.com/rancher/dashboard/issues/10975 + // { + // asc: true, + // field: 'spec.internal', // Pending API support https://github.com/rancher/rancher/issues/48011 + // }, + // { + // asc: true, + // field: 'status.conditions[0].status' // Pending API changes https://github.com/rancher/rancher/issues/48092 + // }, + // { + // asc: true, + // field: 'spec.displayName' // Pending API support https://github.com/rancher/rancher/issues/48011 + // }, +]; + +export interface TopLevelMenuHelper { + /** + * Filter mgmt clusters by + * 1. If harvester or not (filterOnlyKubernetesClusters) + * 2. If local or not (filterHiddenLocalCluster) + * 3. Is pinned + * + * Sort By + * 1. is local cluster (appears at top) + * 2. ready + * 3. name + */ + clustersPinned: Array; + + /** + * Filter mgmt clusters by + * 1. If harvester or not (filterOnlyKubernetesClusters) + * 2. If local or not (filterHiddenLocalCluster) + * 3. + * a) if search term, filter on it + * b) if no search term, filter on pinned + * + * Sort By + * 1. is local cluster (appears at top) + * 2. ready + * 3. name + */ + clustersOthers: Array; + + update: (args: UpdateArgs) => Promise +} + +export abstract class BaseTopLevelMenuHelper { + protected $store: VuexStore; + + /** + * Filter mgmt clusters by + * 1. If harvester or not (filterOnlyKubernetesClusters) + * 2. If local or not (filterHiddenLocalCluster) + * 3. Is pinned + * + * Sort By + * 1. is local cluster (appears at top) + * 2. ready + * 3. name + */ + public clustersPinned: Array = []; + + /** + * Filter mgmt clusters by + * 1. If harvester or not (filterOnlyKubernetesClusters) + * 2. If local or not (filterHiddenLocalCluster) + * 3. + * a) if search term, filter on it + * b) if no search term, filter on pinned + * + * Sort By + * 1. is local cluster (appears at top) + * 2. ready + * 3. name + */ + public clustersOthers: Array = []; + + constructor({ $store }: { + $store: VuexStore, +}) { + this.$store = $store; + } + + protected convertToCluster(mgmtCluster: MgmtCluster, provCluster: ProvCluster): TopLevelMenuCluster { + return { + id: mgmtCluster.id, + label: mgmtCluster.nameDisplay, + ready: mgmtCluster.isReady, // && !provCluster?.hasError, + providerNavLogo: mgmtCluster.providerMenuLogo, + badge: mgmtCluster.badge, + isLocal: mgmtCluster.isLocal, + pinned: mgmtCluster.pinned, + description: provCluster?.description || mgmtCluster.description, + pin: () => mgmtCluster.pin(), + unpin: () => mgmtCluster.unpin(), + clusterRoute: { name: 'c-cluster-explorer', params: { cluster: mgmtCluster.id } } + }; + } +} + +export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper implements TopLevelMenuHelper { + private args?: UpdateArgs; + + private clustersPinnedWrapper: PaginationWrapper; + private clustersOthersWrapper: PaginationWrapper; + private provClusterWrapper: PaginationWrapper; + + private commonClusterFilters: PaginationParam[]; + + /** + * + */ + constructor({ $store }: { + $store: VuexStore, + }) { + devConsole.warn('TLM.helper', 'TopLevelMenuHelperPagination'); + + super({ $store }); + + this.commonClusterFilters = paginationFilterClusters({ getters: this.$store.getters }); + + this.clustersPinnedWrapper = new PaginationWrapper({ + $store, + onUpdate: () => { + // TODO: RC trigger on websocket update (only need 1 trigger for this cluster type) + if (this.args) { + this.update(this.args); + } + }, + enabledFor: { + store: 'management', + resource: { + id: MANAGEMENT.CLUSTER, + context: 'side-bar', + } + } + }); + this.clustersOthersWrapper = new PaginationWrapper({ + $store, + onUpdate: (res) => { + // TODO: RC trigger on websocket update (only need 1 trigger for this cluster type) + if (this.args) { + this.update(this.args); + } + }, + enabledFor: { + store: 'management', + resource: { + id: MANAGEMENT.CLUSTER, + context: 'side-bar', + } + } + }); + this.provClusterWrapper = new PaginationWrapper({ + $store, + onUpdate: (res) => { + // TODO: RC trigger on websocket update + if (this.args) { + this.update(this.args); + } + }, + enabledFor: { + store: 'management', + resource: { + id: CAPI.RANCHER_CLUSTER, + context: 'side-bar', + } + } + }); + } + + // ---------- requests ---------- + async update(args: UpdateArgs) { + this.args = args; + const promises = { + pinned: this.updatePinned(args), + notPinned: this.updateOthers(args) + }; + + const res: { + pinned: MgmtCluster[], + notPinned: MgmtCluster[] + } = await allHash(promises) as any; + const provClusters = await this.updateProvCluster(res.notPinned, res.pinned); + const provClustersByMgmtId = provClusters.reduce((res: { [mgmtId: string]: ProvCluster}, provCluster: ProvCluster) => { + if (provCluster.mgmtClusterId) { + res[provCluster.mgmtClusterId] = provCluster; + } + + return res; + }, {} as { [mgmtId: string]: ProvCluster}); + + const _clustersNotPinned = res.notPinned + .filter((mgmtCluster) => !!provClustersByMgmtId[mgmtCluster.id]) + .map((mgmtCluster) => this.convertToCluster(mgmtCluster, provClustersByMgmtId[mgmtCluster.id])); + const _clustersPinned = res.pinned + .filter((mgmtCluster) => !!provClustersByMgmtId[mgmtCluster.id]) + .map((mgmtCluster) => this.convertToCluster(mgmtCluster, provClustersByMgmtId[mgmtCluster.id])); + + this.clustersPinned.length = 0; + this.clustersOthers.length = 0; + + this.clustersPinned.push(..._clustersPinned); + this.clustersOthers.push(..._clustersNotPinned); + } + + private constructParams({ + pinnedIds, + searchTerm, + includeLocal, + includeSearchTerm, + includePinned, + excludePinned, + }: { + pinnedIds?: string[], + searchTerm?: string, + includeLocal?: boolean, + includeSearchTerm?: boolean, + includePinned?: boolean, + excludePinned?: boolean, + }): PaginationParam[] { + const filters: PaginationParam[] = [...this.commonClusterFilters]; + + if (pinnedIds) { + if (includePinned) { + // cluster id is 1 OR 2 OR 3 OR 4... + filters.push(PaginationParamFilter.createMultipleFields( + pinnedIds.map((id) => ({ + field: 'id', value: id, equals: true, exact: true + })) + )); + } + + if (excludePinned) { + // cluster id is NOT 1 AND NOT 2 OR 3 OR 4... + filters.push(...pinnedIds.map((id) => PaginationParamFilter.createSingleField({ + field: 'id', equals: false, value: id + }))); + } + } + + if (searchTerm && includeSearchTerm) { + // Pending API support https://github.com/rancher/rancher/issues/48011 + // filters.push(PaginationParamFilter.createSingleField({ + // field: 'spec.displayName', exact: false, value: searchTerm + // })); + } + + if (includeLocal) { + filters.push(PaginationParamFilter.createSingleField({ field: 'id', value: 'local' })); + } + + return filters; + } + + /** + * See `clustersPinned` description for details + */ + private async updatePinned(args: UpdateArgs): Promise { + return this.clustersPinnedWrapper.request({ + pagination: { + filters: this.constructParams({ + pinnedIds: args.pinnedIds, + includePinned: true, + }), + page: 1, + sort: DEFAULT_SORT, + projectsOrNamespaces: [] + }, + classify: true, + }).then((r) => r.data); + } + + /** + * See `clustersOthers` description for details + */ + private async updateOthers(args: UpdateArgs): Promise { + return this.clustersOthersWrapper.request({ + pagination: { + filters: this.constructParams({ + searchTerm: args.searchTerm, + includeSearchTerm: !!args.searchTerm, + pinnedIds: args.pinnedIds, + excludePinned: !args.searchTerm, + }), + page: 1, + pageSize: args.unPinnedMax, + sort: DEFAULT_SORT, + projectsOrNamespaces: [] + }, + classify: true, + }).then((r) => r.data); + } + + /** + * Find all provisioning clusters associated with the displayed mgmt clusters + */ + private async updateProvCluster(notPinned: MgmtCluster[], pinned: MgmtCluster[]): Promise { + return this.provClusterWrapper.request({ + pagination: { + + filters: [ + PaginationParamFilter.createMultipleFields( + [...notPinned, ...pinned] + .map((mgmtCluster) => ({ + // Pending API support https://github.com/rancher/rancher/issues/48011 + // field: 'status.clusterName', value: mgmtCluster.id, equals: true, exact: true + field: 'metadata.name', value: 'local', equals: true, exact: true + })) + ) + ], + + page: 1, + sort: [], + projectsOrNamespaces: [] + }, + classify: true, + }).then((r) => r.data); + } +} + +export class TopLevelMenuHelperLegacy extends BaseTopLevelMenuHelper implements TopLevelMenuHelper { + private hasProvCluster: boolean; + + constructor({ $store }: { + $store: VuexStore, + }) { + devConsole.warn('TLM.helper', 'TopLevelMenuHelperLegacy'); + super({ $store }); + + this.hasProvCluster = this.$store.getters[`management/schemaFor`](CAPI.RANCHER_CLUSTER); + + if (this.hasProvCluster) { + $store.dispatch('management/findAll', { type: CAPI.RANCHER_CLUSTER }); + } + } + + async update(args: UpdateArgs) { + devConsole.warn('TLM.helper', 'TopLevelMenuHelperLegacy', 'update'); + const clusters = this.updateClusters(); + const _clustersNotPinned = this.clustersFiltered(clusters, args); + const _clustersPinned = this.pinFiltered(clusters, args); + + devConsole.warn('TLM.helper', 'TopLevelMenuHelperLegacy', 'update', 'res', _clustersPinned, _clustersNotPinned); + + this.clustersPinned.length = 0; + this.clustersOthers.length = 0; + + this.clustersPinned.push(..._clustersPinned); + this.clustersOthers.push(..._clustersNotPinned); + } + + /** + * Filter mgmt clusters by + * 1. Harvester type 1 (filterOnlyKubernetesClusters) + * 2. Harvester type 2 (filterHiddenLocalCluster) + * 3. There's a matching prov cluster + * + * Convert remaining clusters to special format + */ + private updateClusters(): TopLevelMenuCluster[] { + devConsole.warn(''); + if (!this.hasProvCluster) { + // We're filtering out mgmt clusters without prov clusters, so if the user can't see any prov clusters at all + // exit early + return []; + } + + const all = this.$store.getters['management/all'](MANAGEMENT.CLUSTER); + const mgmtClusters = filterHiddenLocalCluster(filterOnlyKubernetesClusters(all, this.$store), this.$store); + const provClusters = this.$store.getters['management/all'](CAPI.RANCHER_CLUSTER); + const provClustersByMgmtId = provClusters.reduce((res: any, provCluster: ProvCluster) => { + if (provCluster.mgmt?.id) { + res[provCluster.mgmt.id] = provCluster; + } + + return res; + }, {}); + + return (mgmtClusters || []).reduce((res: any, mgmtCluster: MgmtCluster) => { + // Filter to only show mgmt clusters that exist for the available provisioning clusters + // Addresses issue where a mgmt cluster can take some time to get cleaned up after the corresponding + // provisioning cluster has been deleted + if (!provClustersByMgmtId[mgmtCluster.id]) { + return res; + } + + res.push(this.convertToCluster(mgmtCluster, provClustersByMgmtId[mgmtCluster.id])); + + return res; + }, []); + } + + /** + * Filter clusters by + * 1. Not pinned + * 2. Includes search term + * + * Sort remaining clusters + * + * Reduce number of clusters if too many too show + * + * Important! This is used to show unpinned clusters OR results of search + */ + private clustersFiltered(clusters: TopLevelMenuCluster[], args: UpdateArgs): TopLevelMenuCluster[] { + const clusterFilter = args.searchTerm; + const maxClustersToShow = args.unPinnedMax || 10; + + const search = (clusterFilter || '').toLowerCase(); + let localCluster: MgmtCluster | null = null; + + const filtered = clusters.filter((c) => { + // If we're searching we don't care if pinned or not + if (search) { + if (!c.label?.toLowerCase().includes(search)) { + return false; + } + } else if (c.pinned) { + // Not searching, not pinned, don't care + return false; + } + + if (!localCluster && c.id === 'local') { + // Local cluster is a special case, we're inserting it at top so don't include in the middle + localCluster = c; + + return false; + } + + return true; + }); + + const sorted = sortBy(filtered, ['ready:desc', 'label']); + + // put local cluster on top of list always - https://github.com/rancher/dashboard/issues/10975 + if (localCluster) { + sorted.unshift(localCluster); + } + + if (search) { + // this.showPinClusters = false; + // this.searchActive = !sorted.length > 0; + + return sorted; + } + // this.showPinClusters = true; + // this.searchActive = false; + + if (sorted.length >= maxClustersToShow) { + return sorted.slice(0, maxClustersToShow); + } + + return sorted; + } + + /** + * Filter clusters by + * 1. Not pinned + * 2. Includes search term + * + * Sort remaining clusters + * + * Reduce number of clusters if too many too show + * + * Important! This is hidden if there's a filter (user searching) + */ + private pinFiltered(clusters: TopLevelMenuCluster[], args: UpdateArgs): TopLevelMenuCluster[] { + let localCluster = null; + const filtered = clusters.filter((c) => { + if (!c.pinned) { + // We only care about pinned clusters + return false; + } + + if (c.id === 'local') { + // Special case, we're going to add this at the start so filter out + localCluster = c; + + return false; + } + + return true; + }); + + const sorted = sortBy(filtered, ['ready:desc', 'label']); + + // put local cluster on top of list always - https://github.com/rancher/dashboard/issues/10975 + if (localCluster) { + sorted.unshift(localCluster); + } + + return sorted; + } +} diff --git a/shell/components/nav/TopLevelMenu.vue b/shell/components/nav/TopLevelMenu.vue index 04d689f11f2..32fa407a6ec 100644 --- a/shell/components/nav/TopLevelMenu.vue +++ b/shell/components/nav/TopLevelMenu.vue @@ -4,18 +4,24 @@ import ClusterIconMenu from '@shell/components/ClusterIconMenu'; import IconOrSvg from '../IconOrSvg'; import { BLANK_CLUSTER } from '@shell/store/store-types.js'; import { mapGetters } from 'vuex'; -import { CAPI, MANAGEMENT } from '@shell/config/types'; -import { MENU_MAX_CLUSTERS } from '@shell/store/prefs'; +import { CAPI, COUNT, MANAGEMENT } from '@shell/config/types'; +import { MENU_MAX_CLUSTERS, PINNED_CLUSTERS } from '@shell/store/prefs'; import { sortBy } from '@shell/utils/sort'; import { ucFirst } from '@shell/utils/string'; import { KEY } from '@shell/utils/platform'; import { getVersionInfo } from '@shell/utils/version'; import { SETTING } from '@shell/config/settings'; -import { filterOnlyKubernetesClusters, filterHiddenLocalCluster } from '@shell/utils/cluster'; import { getProductFromRoute } from '@shell/utils/router'; import { isRancherPrime } from '@shell/config/version'; import Pinned from '@shell/components/nav/Pinned'; import { getGlobalBannerFontSizes } from '@shell/utils/banners'; +import { TopLevelMenuHelperPagination, TopLevelMenuHelperLegacy } from 'components/nav/TopLevelMenu.helper'; +import devConsole from 'utils/dev-console'; +import { debounce } from 'lodash'; + +// TODO: RC wire in socket updates to pagination wrapper +// TODO: RC test search properly +// TODO: RC loading indicators? export default { components: { @@ -29,6 +35,19 @@ export default { const { displayVersion, fullVersion } = getVersionInfo(this.$store); const hasProvCluster = this.$store.getters[`management/schemaFor`](CAPI.RANCHER_CLUSTER); + const canPagination = this.$store.getters[`management/paginationEnabled`]({ + id: MANAGEMENT.CLUSTER, + context: 'side-bar', + }) && this.$store.getters[`management/paginationEnabled`]({ + id: CAPI.RANCHER_CLUSTER, + context: 'side-bar', + }); + const helper = canPagination ? new TopLevelMenuHelperPagination({ $store: this.$store }) : new TopLevelMenuHelperLegacy({ $store: this.$store }); + const provClusters = !canPagination && hasProvCluster ? this.$store.getters[`management/all`](CAPI.RANCHER_CLUSTER) : []; + const mgmtClusters = !canPagination ? this.$store.getters[`management/all`](MANAGEMENT.CLUSTER) : []; + + devConsole.warn(provClusters, mgmtClusters); + return { shown: false, displayVersion, @@ -37,27 +56,25 @@ export default { hasProvCluster, maxClustersToShow: MENU_MAX_CLUSTERS, emptyCluster: BLANK_CLUSTER, - showPinClusters: false, - searchActive: false, routeCombo: false, - }; - }, - fetch() { - if (this.hasProvCluster) { - this.$store.dispatch('management/findAll', { type: CAPI.RANCHER_CLUSTER }); - } + canPagination, + helper, + debouncedHelperUpdate: debounce((...args) => this.helper.update(...args), 200), + provClusters, + mgmtClusters, + }; }, computed: { ...mapGetters(['clusterId']), ...mapGetters(['clusterReady', 'isRancher', 'currentCluster', 'currentProduct', 'isRancherInHarvester']), ...mapGetters({ features: 'features/get' }), - value: { - get() { - return this.$store.getters['productId']; - }, + + pinnedIds() { + return this.$store.getters['prefs/get'](PINNED_CLUSTERS); }, + sideMenuStyle() { const globalBannerSettings = getGlobalBannerFontSizes(this.$store); @@ -68,161 +85,47 @@ export default { }, showClusterSearch() { - return this.clusters.length > this.maxClustersToShow; + return this.allClustersCount > this.maxClustersToShow; }, - /** - * Filter mgmt clusters by - * 1. Harvester type 1 (filterOnlyKubernetesClusters) - * 2. Harvester type 2 (filterHiddenLocalCluster) - * 3. There's a matching prov cluster - * - * Convert remaining clusters to special format - */ - clusters() { - if (!this.hasProvCluster) { - // We're filtering out mgmt clusters without prov clusters, so if the user can't see any prov clusters at all - // exit early - return []; - } + allClustersCount() { + const counts = this.$store.getters[`management/all`](COUNT)?.[0]?.counts || {}; + const count = counts[MANAGEMENT.CLUSTER] || {}; - const all = this.$store.getters['management/all'](MANAGEMENT.CLUSTER); - const mgmtClusters = filterHiddenLocalCluster(filterOnlyKubernetesClusters(all, this.$store), this.$store); - const provClusters = this.$store.getters['management/all'](CAPI.RANCHER_CLUSTER); - const provClustersByMgmtId = provClusters.reduce((res, provCluster) => { - if (provCluster.mgmt?.id) { - res[provCluster.mgmt.id] = provCluster; - } - - return res; - }, {}); + return count?.summary.count; + }, - return (mgmtClusters || []).reduce((res, mgmtCluster) => { - // Filter to only show mgmt clusters that exist for the available provisioning clusters - // Addresses issue where a mgmt cluster can take some time to get cleaned up after the corresponding - // provisioning cluster has been deleted - if (!provClustersByMgmtId[mgmtCluster.id]) { - return res; - } + // New + search() { + return (this.clusterFilter || '').toLowerCase(); + }, - const pCluster = provClustersByMgmtId[mgmtCluster.id]; - - res.push({ - id: mgmtCluster.id, - label: mgmtCluster.nameDisplay, - ready: mgmtCluster.isReady && !pCluster?.hasError, - osLogo: mgmtCluster.providerOsLogo, - providerNavLogo: mgmtCluster.providerMenuLogo, - badge: mgmtCluster.badge, - isLocal: mgmtCluster.isLocal, - isHarvester: mgmtCluster.isHarvester, - pinned: mgmtCluster.pinned, - description: pCluster?.description || mgmtCluster.description, - pin: () => mgmtCluster.pin(), - unpin: () => mgmtCluster.unpin(), - clusterRoute: { name: 'c-cluster-explorer', params: { cluster: mgmtCluster.id } } - }); + // New + showPinClusters() { + return !this.search; + }, - return res; - }, []); + // New + searchActive() { + return !!this.search; }, /** - * Filter clusters by - * 1. Not pinned - * 2. Includes search term - * - * Sort remaining clusters + * Only Clusters that are pinned * - * Reduce number of clusters if too many too show - * - * Important! This is used to show unpinned clusters OR results of search + * (see description of helper.clustersPinned for more details) */ - clustersFiltered() { - const search = (this.clusterFilter || '').toLowerCase(); - let localCluster = null; - - const filtered = this.clusters.filter((c) => { - // If we're searching we don't care if pinned or not - if (search) { - if (!c.label?.toLowerCase().includes(search)) { - return false; - } - } else if (c.pinned) { - // Not searching, not pinned, don't care - return false; - } - - if (!localCluster && c.id === 'local') { - // Local cluster is a special case, we're inserting it at top so don't include in the middle - localCluster = c; - - return false; - } - - return true; - }); - - const sorted = sortBy(filtered, ['ready:desc', 'label']); - - // put local cluster on top of list always - https://github.com/rancher/dashboard/issues/10975 - if (localCluster) { - sorted.unshift(localCluster); - } - - if (search) { - this.showPinClusters = false; - this.searchActive = !sorted.length > 0; - - return sorted; - } - this.showPinClusters = true; - this.searchActive = false; - - if (sorted.length >= this.maxClustersToShow) { - return sorted.slice(0, this.maxClustersToShow); - } - - return sorted; + pinFiltered() { + return this.hasProvCluster ? this.helper.clustersPinned : []; }, /** - * Filter clusters by - * 1. Not pinned - * 2. Includes search term - * - * Sort remaining clusters + * Used to shown unpinned clusters OR results of text search * - * Reduce number of clusters if too many too show - * - * Important! This is hidden if there's a filter (user searching) + * (see description of helper.clustersOthers for more details) */ - pinFiltered() { - let localCluster = null; - const filtered = this.clusters.filter((c) => { - if (!c.pinned) { - // We only care about pinned clusters - return false; - } - - if (c.id === 'local') { - // Special case, we're going to add this at the start so filter out - localCluster = c; - - return false; - } - - return true; - }); - - const sorted = sortBy(filtered, ['ready:desc', 'label']); - - // put local cluster on top of list always - https://github.com/rancher/dashboard/issues/10975 - if (localCluster) { - sorted.unshift(localCluster); - } - - return sorted; + clustersFiltered() { + return this.hasProvCluster ? this.helper.clustersOthers : []; }, pinnedClustersHeight() { @@ -232,7 +135,7 @@ export default { return `min-height: ${ height }px`; }, clusterFilterCount() { - return this.clusterFilter ? this.clustersFiltered.length : this.clusters.length; + return this.clusterFilter ? this.clustersFiltered.length : this.allClustersCount; }, multiClusterApps() { @@ -363,7 +266,35 @@ export default { watch: { $route() { this.shown = false; - } + }, + + pinnedIds: { + immediate: true, + handler(ids) { + this.updateClusters(ids); + } + }, + + search() { + this.updateClusters(this.pinnedIds); + }, + + provClusters: { + handler() { + // Shouldn't get here if SSP + this.updateClusters(this.pinnedIds); + }, + deep: true + }, + + mgmtClusters: { + handler() { + // Shouldn't get here if SSP + this.updateClusters(this.pinnedIds); + }, + deep: true + }, + }, mounted() { @@ -490,9 +421,18 @@ export default { popperClass }; }, + + updateClusters(pinnedIds) { + this.debouncedHelperUpdate({ + pinnedIds, + searchTerm: this.search, + unPinnedMax: this.maxClustersToShow + }); + } } }; + -