@rancher/shell 1.2.3 → 2.0.1

package/components/SideNav.vue

@@ -7,16 +7,16 @@ import {
   FAVORITE_TYPES
 } from '@shell/store/prefs';
 import { getVersionInfo } from '@shell/utils/version';
-import { addObjects, replaceWith, clear, addObject } from '@shell/utils/array';
+import {
+  addObjects, replaceWith, clear, addObject, sameContents
+} from '@shell/utils/array';
 import { sortBy } from '@shell/utils/sort';
 import { ucFirst } from '@shell/utils/string';
 
-import {
-  HCI, CATALOG, UI, SCHEMA, COUNT
-} from '@shell/config/types';
+import { HCI, UI, SCHEMA } from '@shell/config/types';
 import { HARVESTER_NAME as HARVESTER } from '@shell/config/features';
 import { NAME as EXPLORER } from '@shell/config/product/explorer';
-import { BASIC, FAVORITE, USED } from '@shell/store/type-map';
+import { TYPE_MODES } from '@shell/store/type-map';
 import { NAME as NAVLINKS } from '@shell/config/product/navlinks';
 import Group from '@shell/components/nav/Group';
 
@@ -31,6 +31,7 @@ export default {
   },
 
   created() {
+    // Ensure that changes to resource that change often don't resort to spamming redraw of the side nav
     this.queueUpdate = debounce(this.getGroups, 500);
 
     this.getGroups();
@@ -42,24 +43,25 @@ export default {
   },
 
   watch: {
-    counts(a, b) {
-      if ( a !== b ) {
-        this.queueUpdate();
-      }
-    },
 
-    allSchemas(a, b) {
-      if ( a !== b ) {
+    /**
+     * Keep this simple, we're only interested in new / removed schemas
+     */
+    allSchemasIds(a, b) {
+      if ( !sameContents(a, b) ) {
         this.queueUpdate();
       }
     },
 
-    allNavLinks(a, b) {
-      if ( a !== b ) {
+    allNavLinksIds(a, b) {
+      if ( !sameContents(a, b) ) {
         this.queueUpdate();
       }
     },
 
+    /**
+     * Note - There's no watch on prefs, so this only catches in session changes
+     */
     favoriteTypes(a, b) {
       if ( !isEqual(a, b) ) {
         this.queueUpdate();
@@ -72,24 +74,18 @@ export default {
       }
     },
 
-    productId(a, b) {
-      if ( !isEqual(a, b) ) {
-        // Immediately update because you'll see it come in later
-        this.getGroups();
-      }
-    },
+    // Queue namespaceMode and namespaces
+    // Changes to namespaceMode can also change namespaces, so keep this simple and execute both in a shortened queue
 
     namespaceMode(a, b) {
-      if ( !isEqual(a, b) ) {
-        // Immediately update because you'll see it come in later
-        this.getGroups();
+      if ( a !== b ) {
+        this.queueUpdate();
       }
     },
 
     namespaces(a, b) {
       if ( !isEqual(a, b) ) {
-        // Immediately update because you'll see it come in later
-        this.getGroups();
+        this.queueUpdate();
       }
     },
 
@@ -100,8 +96,8 @@ export default {
       }
     },
 
-    product(a, b) {
-      if ( !isEqual(a, b) ) {
+    rootProduct(a, b) {
+      if (a?.name !== b?.name) {
         // Immediately update because you'll see it come in later
         this.getGroups();
       }
@@ -115,20 +111,14 @@ export default {
 
   computed: {
     ...mapState(['managementReady', 'clusterReady']),
-    ...mapGetters(['productId', 'clusterId', 'currentProduct', 'isSingleProduct', 'namespaceMode', 'isExplorer', 'isVirtualCluster']),
+    ...mapGetters(['productId', 'clusterId', 'currentProduct', 'rootProduct', 'isSingleProduct', 'namespaceMode', 'isExplorer', 'isVirtualCluster']),
     ...mapGetters({ locale: 'i18n/selectedLocaleLabel', availableLocales: 'i18n/availableLocales' }),
     ...mapGetters('type-map', ['activeProducts']),
 
     favoriteTypes: mapPref(FAVORITE_TYPES),
 
-    showClusterTools() {
-      return this.isExplorer &&
-             this.$store.getters['cluster/canList'](CATALOG.CLUSTER_REPO) &&
-             this.$store.getters['cluster/canList'](CATALOG.APP);
-    },
-
     supportLink() {
-      const product = this.currentProduct;
+      const product = this.rootProduct;
 
       if (product?.supportRoute) {
         return { ...product.supportRoute, params: { ...product.supportRoute.params, cluster: this.clusterId } };
@@ -163,7 +153,7 @@ export default {
     },
 
     isVirtualProduct() {
-      return this.currentProduct.name === HARVESTER;
+      return this.rootProduct.name === HARVESTER;
     },
 
     allNavLinks() {
@@ -174,7 +164,7 @@ export default {
       return this.$store.getters['cluster/all'](UI.NAV_LINK);
     },
 
-    allSchemas() {
+    allSchemasIds() {
       const managementReady = this.managementReady;
       const product = this.currentProduct;
 
@@ -182,33 +172,19 @@ export default {
         return [];
       }
 
-      return this.$store.getters[`${ product.inStore }/all`](SCHEMA);
-    },
-
-    counts() {
-      const managementReady = this.managementReady;
-      const product = this.currentProduct;
-
-      if ( !managementReady || !product ) {
-        return {};
-      }
-
-      const inStore = product.inStore;
-
-      // So that there's something to watch for updates
-      if ( this.$store.getters[`${ inStore }/haveAll`](COUNT) ) {
-        const counts = this.$store.getters[`${ inStore }/all`](COUNT)[0].counts;
-
-        return counts;
-      }
-
-      return {};
+      // This does take some up-front time, however avoids an even more costly getGroups call
+      return this.$store.getters[`${ product.inStore }/all`](SCHEMA).map((s) => s.id).sort();
     },
 
     namespaces() {
       return this.$store.getters['activeNamespaceCache'];
     },
+
+    allNavLinksIds() {
+      return this.allNavLinks.map((a) => a.id);
+    },
   },
+
   methods: {
     /**
      * Fetch navigation by creating groups from product schemas
@@ -227,13 +203,6 @@ export default {
       }
 
       const currentProduct = this.$store.getters['productId'];
-      let namespaces = null;
-
-      if ( !this.$store.getters['isAllNamespaces'] ) {
-        const namespacesObject = this.$store.getters['namespaces']();
-
-        namespaces = Object.keys(namespacesObject);
-      }
 
       // Always show cluster-level types, regardless of the namespace filter
       const namespaceMode = 'both';
@@ -255,7 +224,8 @@ export default {
       // This should already have come into the list from above, but in case it hasn't...
       addObject(loadProducts, currentProduct);
 
-      this.getProductsGroups(out, loadProducts, namespaceMode, namespaces, productMap);
+      this.getProductsGroups(out, loadProducts, namespaceMode, productMap);
+
       this.getExplorerGroups(out);
 
       replaceWith(this.groups, ...sortBy(out, ['weight:desc', 'label']));
@@ -263,12 +233,12 @@ export default {
       this.gettingGroups = false;
     },
 
-    getProductsGroups(out, loadProducts, namespaceMode, namespaces, productMap) {
+    getProductsGroups(out, loadProducts, namespaceMode, productMap) {
       const clusterId = this.$store.getters['clusterId'];
       const currentType = this.$route.params.resource || '';
 
       for ( const productId of loadProducts ) {
-        const modes = [BASIC];
+        const modes = [TYPE_MODES.BASIC];
 
         if ( productId === NAVLINKS ) {
           // Navlinks produce their own top-level nav items so don't need to show it as a product.
@@ -276,14 +246,16 @@ export default {
         }
 
         if ( productId === EXPLORER ) {
-          modes.push(FAVORITE);
-          modes.push(USED);
+          modes.push(TYPE_MODES.FAVORITE);
+          modes.push(TYPE_MODES.USED);
         }
 
-        for ( const mode of modes ) {
-          const types = this.$store.getters['type-map/allTypes'](productId, mode) || {};
+        // Get all types for all modes
+        const typesByMode = this.$store.getters['type-map/allTypes'](productId, modes);
 
-          const more = this.$store.getters['type-map/getTree'](productId, mode, types, clusterId, namespaceMode, namespaces, currentType);
+        for ( const mode of modes ) {
+          const types = typesByMode[mode] || {};
+          const more = this.$store.getters['type-map/getTree'](productId, mode, types, clusterId, namespaceMode, currentType);
 
           if ( productId === EXPLORER || !this.isExplorer ) {
             addObjects(out, more);
@@ -442,33 +414,18 @@ export default {
         />
       </template>
     </div>
-    <!-- Cluster tools -->
-    <n-link
-      v-if="showClusterTools"
-      tag="div"
-      class="tools"
-      :to="{name: 'c-cluster-explorer-tools', params: {cluster: clusterId}}"
-    >
-      <a
-        class="tools-button"
-        @click="collapseAll()"
-      >
-        <i class="icon icon-gear" />
-        <span>{{ t('nav.clusterTools') }}</span>
-      </a>
-    </n-link>
     <!-- SideNav footer area (seems to be tied to harvester) -->
     <div
       v-if="showProductFooter"
       class="footer"
     >
       <!-- support link -->
-      <nuxt-link
+      <router-link
         :to="supportLink"
         class="pull-right"
       >
         {{ t('nav.support', {hasSupport: true}) }}
-      </nuxt-link>
+      </router-link>
       <!-- version number -->
       <span
         v-clean-tooltip="{content: displayVersion, placement: 'top'}"
@@ -514,14 +471,13 @@ export default {
       v-else
       class="version text-muted flex"
     >
-      <nuxt-link
+      <router-link
         v-if="singleProductAbout"
         :to="singleProductAbout"
       >
         {{ displayVersion }}
-      </nuxt-link>
+      </router-link>
       <template v-else>
-        <span>{{ displayVersion }}</span>
         <span
           v-if="isVirtualCluster && isExplorer"
           v-tooltip="{content: harvesterVersion, placement: 'top'}"
@@ -583,7 +539,7 @@ export default {
         }
       }
 
-      &.nuxt-link-active:not(:hover) {
+      &.router-link-active:not(:hover) {
         A {
           background-color: var(--nav-active);
         }

package/components/SingleClusterInfo.vue

@@ -133,23 +133,23 @@ export default {
         {{ t('generic.links') }}
       </div>
       <div class="glance-item">
-        <nuxt-link
+        <router-link
           :to="exploreLink"
           class="cluster-link"
         >
           {{ t('nav.categories.explore') }}
-        </nuxt-link>
+        </router-link>
       </div>
       <div
         v-if="showClusterTools"
         class="glance-item"
       >
-        <nuxt-link
+        <router-link
           :to="clusterToolsLink"
           class="cluster-link"
         >
           {{ t('nav.clusterTools') }}
-        </nuxt-link>
+        </router-link>
       </div>
     </div>
   </div>

package/components/SortableTable/THead.vue

@@ -136,6 +136,9 @@ export default {
     isIndeterminate() {
       return this.howMuchSelected === SOME;
     },
+    hasColumnWithSubLabel() {
+      return this.columns.some((col) => col.subLabel);
+    }
   },
 
   methods: {
@@ -162,15 +165,13 @@ export default {
       const menu = document.querySelector('.table-options-container');
       const elem = document.querySelector('.table-options-btn');
 
-      if (!this.tableColsMenuPosition) {
-        this.tableColsMenuPosition = fitOnScreen(menu, ev || elem, {
-          overlapX:  true,
-          fudgeX:    26,
-          fudgeY:    -22,
-          positionX: CENTER,
-          positionY: AUTO,
-        });
-      }
+      this.tableColsMenuPosition = fitOnScreen(menu, ev || elem, {
+        overlapX:  true,
+        fudgeX:    326,
+        fudgeY:    -22,
+        positionX: CENTER,
+        positionY: AUTO,
+      });
 
       // toggle visibility
       this.tableColsOptionsVisibility = !this.tableColsOptionsVisibility;
@@ -208,11 +209,10 @@ export default {
 
 <template>
   <thead>
-    <tr :class="{'loading': loading}">
+    <tr :class="{'loading': loading, 'top-aligned': hasColumnWithSubLabel}">
       <th
         v-if="tableActions"
         :width="checkWidth"
-        align="middle"
       >
         <Checkbox
           v-model="isAll"
@@ -239,11 +239,22 @@ export default {
           class="table-header-container"
           :class="{ 'not-filterable': hasAdvancedFiltering && !col.isFilter }"
         >
-          <span
-            v-if="col.sort"
+          <div
             v-clean-tooltip="tooltip(col)"
+            class="content"
           >
             <span v-clean-html="labelFor(col)" />
+            <span
+              v-if="col.subLabel"
+              class="text-muted"
+            >
+              {{ col.subLabel }}
+            </span>
+          </div>
+          <div
+            v-if="col.sort"
+            class="sort"
+          >
             <i
               v-show="hasAdvancedFiltering && !col.isFilter"
               v-clean-tooltip="t('sortableTable.tableHeader.noFilter')"
@@ -260,11 +271,7 @@ export default {
                 class="icon icon-sort-up icon-stack-1x"
               />
             </span>
-          </span>
-          <span
-            v-else
-            v-clean-tooltip="tooltip(col)"
-          >{{ labelFor(col) }}</span>
+          </div>
         </div>
       </th>
       <th
@@ -396,6 +403,11 @@ export default {
       }
     }
 
+    .top-aligned th {
+      vertical-align: top;
+      padding-top: 10px;
+    }
+
     thead {
       tr {
         background-color: var(--sortable-table-header-bg);
@@ -415,11 +427,11 @@ export default {
       color: var(--body-text);
 
       .table-header-container {
-        display: inherit;
+        display: flex;
 
-        > span {
+        .content {
           display: flex;
-          align-items: center;
+          flex-direction: column;
         }
 
         &.not-filterable {

package/components/SortableTable/filtering.js

@@ -33,6 +33,10 @@ export default {
     }),
     */
     filteredRows() {
+      if (this.externalPaginationEnabled) {
+        return;
+      }
+
       // PROP hasAdvancedFiltering comes from Advanced Filtering mixin (careful changing data var there...)
       if (!this.hasAdvancedFiltering) {
         return this.handleFiltering();
@@ -162,7 +166,11 @@ export default {
     arrangedRows(q) {
       // The rows changed so the old filter result is no longer useful
       this.previousResult = null;
-    }
+    },
+
+    searchQuery() {
+      this.debouncedPaginationChanged();
+    },
   },
 };
 

package/components/SortableTable/grouping.js

@@ -2,9 +2,16 @@ import { get } from '@shell/utils/object';
 
 export default {
   computed: {
+    /**
+     * The group config associated with the selected group
+     */
+    selectedGroupOption() {
+      return this.groupOptions?.find((go) => go.value === this.group);
+    },
+
     groupedRows() {
       const groupKey = this.groupBy;
-      const refKey = this.groupRef || groupKey;
+      const refKey = this.groupRef || this.selectedGroupOption?.groupLabelKey || groupKey;
 
       if ( !groupKey) {
         return [{