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
momesgin · Nov 9, 2023 · c77c1f3 · c77c1f3
1 parent fdb061b
commit c77c1f3
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 44 deletions.
diff --git 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
@@ -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,34 +161,42 @@ 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);
     },
 
     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),
+      });
+    }
   },
 };
 </script>
@@ -351,7 +376,7 @@ export default {
         </h1>
       </div>
       <div
-        v-if="getFeaturedCharts.length > 0"
+        v-if="featuredCharts.length > 0"
         class="actions-container"
       >
         <ButtonGroup
@@ -363,7 +388,7 @@ export default {
     <div v-if="showCarousel">
       <h3>{{ t('catalog.charts.featuredCharts') }}</h3>
       <Carousel
-        :sliders="getFeaturedCharts"
+        :sliders="featuredCharts"
         @clicked="(row) => selectChart(row)"
       />
     </div>
@@ -514,30 +539,29 @@ 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 {
   transform: translateX(-5px);
   padding: 7px 0 6px 13px;
   width: calc(100% + 10px);
 
-  ::v-deep.checkbox-label {
+  ::v-deep .checkbox-label {
     display: flex;
     align-items: center;
 
@@ -552,15 +576,15 @@ export default {
     }
   }
 
-  &:hover ::v-deep.checkbox-label {
+  &:hover ::v-deep .checkbox-label {
       color: var(--body-text);
     }
 
   &.rancher {
       &: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,18 +619,18 @@ 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)
     }
   }
   &.color3 {
     &: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)
     }