From c77c1f3daf2dfce9e273b193902402218061e8f1 Mon Sep 17 00:00:00 2001 From: Richard Cox Date: Thu, 9 Nov 2023 11:52:41 +0000 Subject: [PATCH] Fix multiple issues with charts list - Fixed enabledCharts, filteredCharts and `getFeaturedCharts` - These should all behave differently given user filters - enabledCharts should not include any user based filters - filteredCharts should include allll the filters - featuredCharts should not include invalid charts - added descriptions of above as comments - Sorted Categories list alphabetically - Categories now show numbers given user filters, not including itself - Fixed css - Repos dropdown colour blobs were missaligned... and text on hover was unreadbale - Fixed misleading error message when there are no charts shown --- shell/assets/translations/en-us.yaml | 2 +- shell/pages/c/_cluster/apps/charts/index.vue | 107 +++++++++++-------- 2 files changed, 65 insertions(+), 44 deletions(-) diff --git a/shell/assets/translations/en-us.yaml b/shell/assets/translations/en-us.yaml index 6e5885d855c..1bb91b4b183 100644 --- a/shell/assets/translations/en-us.yaml +++ b/shell/assets/translations/en-us.yaml @@ -865,7 +865,7 @@ catalog: versionWindowsIncompatible: Linux only version header: Charts featuredCharts: Featured Charts - noCharts: 'There are no charts available, have you added any repos?' + noCharts: 'There are no charts available, have you added any repos or set filters?' noWindows: Your repos do not contain any charts capable of being deployed on a cluster with Windows nodes. noWindowsAndLinux: Your repos do not contain any charts capable of being deployed on a cluster with both Windows and Linux worker nodes. operatingSystems: diff --git a/shell/pages/c/_cluster/apps/charts/index.vue b/shell/pages/c/_cluster/apps/charts/index.vue index f30b1143972..a050cd2621e 100644 --- a/shell/pages/c/_cluster/apps/charts/index.vue +++ b/shell/pages/c/_cluster/apps/charts/index.vue @@ -138,6 +138,11 @@ export default { return reducedRepos; }, + /** + * Filter allll charts by invalid entries (deprecated, hidden and ui plugin). + * + * This does not include any user provided filters (like selected repos, categories and text query) + */ enabledCharts() { return (this.allCharts || []).filter((c) => { if ( c.deprecated && !this.showDeprecated ) { @@ -148,10 +153,6 @@ export default { return false; } - if ( this.hideRepos.includes(c.repoKey) ) { - return false; - } - if (isUIPlugin(c)) { return false; } @@ -160,26 +161,28 @@ export default { }); }, + /** + * Filter enabled charts allll filters. These are what the user will see in the list + */ filteredCharts() { - const enabledCharts = (this.enabledCharts || []); - const clusterProvider = this.currentCluster.status.provider || 'other'; - - return filterAndArrangeCharts(enabledCharts, { - clusterProvider, - category: this.category, - searchQuery: this.searchQuery, - showDeprecated: this.showDeprecated, - showHidden: this.showHidden, - hideRepos: this.hideRepos, - hideTypes: [CATALOG._CLUSTER_TPL], - showPrerelease: this.$store.getters['prefs/get'](SHOW_PRE_RELEASE), + return this.filterCharts({ + category: this.category, + searchQuery: this.searchQuery, + hideRepos: this.hideRepos }); }, - getFeaturedCharts() { - const allCharts = (this.filteredCharts || []); + /** + * Filter valid charts (alll filters minus user provided ones) by whether they are featured or not + * + * This will power the carousel + */ + featuredCharts() { + const filteredCharts = this.filterCharts({}); + + // debugger; - const featuredCharts = allCharts.filter((value) => value.featured).sort((a, b) => a.featured - b.featured); + const featuredCharts = filteredCharts.filter((value) => value.featured).sort((a, b) => a.featured - b.featured); return featuredCharts.slice(0, 5); }, @@ -187,7 +190,13 @@ export default { categories() { const map = {}; - for ( const chart of this.enabledCharts ) { + // Filter charts by everything except itself + const charts = this.filterCharts({ + searchQuery: this.searchQuery, + hideRepos: this.hideRepos + }); + + for ( const chart of charts ) { for ( const c of chart.categories ) { if ( !map[c] ) { const labelKey = `catalog.charts.categories.${ lcFirst(c) }`; @@ -208,14 +217,14 @@ export default { out.unshift({ label: this.t('catalog.charts.categories.all'), value: '', - count: this.enabledCharts.length + count: charts.length }); - return out; + return sortBy(out, ['label']); }, showCarousel() { - return this.chartMode === 'featured' && this.getFeaturedCharts.length; + return this.chartMode === 'featured' && this.featuredCharts.length; } }, @@ -334,6 +343,22 @@ export default { btnCb(false); } }, + + filterCharts({ category, searchQuery, hideRepos }) { + const enabledCharts = (this.enabledCharts || []); + const clusterProvider = this.currentCluster.status.provider || 'other'; + + return filterAndArrangeCharts(enabledCharts, { + clusterProvider, + category, + searchQuery, + showDeprecated: this.showDeprecated, + showHidden: this.showHidden, + hideRepos, + hideTypes: [CATALOG._CLUSTER_TPL], + showPrerelease: this.$store.getters['prefs/get'](SHOW_PRE_RELEASE), + }); + } }, }; @@ -351,7 +376,7 @@ export default {

{{ t('catalog.charts.featuredCharts') }}

@@ -514,22 +539,21 @@ export default { } } } - } +} .checkbox-select { - .vs__search { + .vs__search { position: absolute; right: 0 } - .vs__selected-options { + .vs__selected-options { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: inline-block; line-height: 2.4rem; } - } .checkbox-outer-container.in-select { @@ -537,7 +561,7 @@ export default { padding: 7px 0 6px 13px; width: calc(100% + 10px); - ::v-deep.checkbox-label { + ::v-deep .checkbox-label { display: flex; align-items: center; @@ -552,7 +576,7 @@ export default { } } - &:hover ::v-deep.checkbox-label { + &:hover ::v-deep .checkbox-label { color: var(--body-text); } @@ -560,7 +584,7 @@ export default { &:hover { background: var(--app-rancher-accent); } - &:hover ::v-deep.checkbox-label { + &:hover ::v-deep .checkbox-label { color: var(--app-rancher-accent-text); } & i { @@ -572,7 +596,7 @@ export default { &:hover { background: var(--app-partner-accent); } - &:hover ::v-deep.checkbox-label { + &:hover ::v-deep .checkbox-label { color: var(--app-partner-accent-text); } & i { @@ -584,7 +608,7 @@ export default { &:hover { background: var(--app-color1-accent); } - &:hover ::v-deep.checkbox-label { + &:hover ::v-deep .checkbox-label { color: var(--app-color1-accent-text); } & i { @@ -595,10 +619,10 @@ export default { &:hover { background: var(--app-color2-accent); } - &:hover ::v-deep.checkbox-label { + &:hover ::v-deep .checkbox-label { color: var(--app-color2-accent-text); } - & i { + & i { color: var(--app-color2-accent) } } @@ -606,7 +630,7 @@ export default { &:hover { background: var(--app-color3-accent); } - &:hover ::v-deep.checkbox-label { + &:hover ::v-deep .checkbox-label { color: var(--app-color3-accent-text); } & i { @@ -628,7 +652,7 @@ export default { &:hover { background: var(--app-color5-accent); } - &:hover ::v-deep.checkbox-label { + &:hover ::v-deep .checkbox-label { color: var(--app-color5-accent-text); } & i { @@ -639,7 +663,7 @@ export default { &:hover { background: var(--app-color6-accent); } - &:hover ::v-deep.checkbox-label { + &:hover ::v-deep .checkbox-label { color: var(--app-color6-accent-text); } & i { @@ -650,7 +674,7 @@ export default { &:hover { background: var(--app-color7-accent); } - &:hover ::v-deep.checkbox-label { + &:hover ::v-deep .checkbox-label { color: var(--app-color7-accent-text); } & i { @@ -661,9 +685,6 @@ export default { &:hover { background: var(--app-color8-accent); } - &:hover ::v-deep.checkbox-label { - color: var(--app-color8-accent-text); - } & i { color: var(--app-color8-accent) }