@rancher/shell 0.5.3 → 2.0.0

package/components/SideNav.vue

@@ -13,7 +13,7 @@ import {
 import { sortBy } from '@shell/utils/sort';
 import { ucFirst } from '@shell/utils/string';
 
-import { HCI, CATALOG, UI, SCHEMA } 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 { TYPE_MODES } from '@shell/store/type-map';
@@ -74,13 +74,6 @@ export default {
       }
     },
 
-    productId(a, b) {
-      if ( 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
 
@@ -103,6 +96,13 @@ export default {
       }
     },
 
+    rootProduct(a, b) {
+      if (a?.name !== b?.name) {
+        // Immediately update because you'll see it come in later
+        this.getGroups();
+      }
+    },
+
     $route(a, b) {
       this.$nextTick(() => this.syncNav());
     },
@@ -111,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 } };
@@ -159,7 +153,7 @@ export default {
     },
 
     isVirtualProduct() {
-      return this.currentProduct.name === HARVESTER;
+      return this.rootProduct.name === HARVESTER;
     },
 
     allNavLinks() {
@@ -420,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'}"
@@ -492,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'}"

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: {
@@ -206,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"
@@ -237,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')"
@@ -258,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
@@ -394,6 +403,11 @@ export default {
       }
     }
 
+    .top-aligned th {
+      vertical-align: top;
+      padding-top: 10px;
+    }
+
     thead {
       tr {
         background-color: var(--sortable-table-header-bg);
@@ -413,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 [{

package/components/SortableTable/index.vue

@@ -29,30 +29,17 @@ import { getParent } from '@shell/utils/dom';
 // NOTE: This is populated by a plugin (formatters.js) to avoid issues with plugins
 export const FORMATTERS = {};
 
-export const COLUMN_BREAKPOINTS = {
-  /**
-   * Only show column if at tablet width or wider
-   */
-  TABLET:  'tablet',
-  /**
-   * Only show column if at laptop width or wider
-   */
-  LAPTOP:  'laptop',
-  /**
-   * Only show column if at desktop width or wider
-   */
-  DESKTOP: 'desktop'
-};
-
 // @TODO:
 // Fixed header/scrolling
 
 // Data Flow:
 // rows prop
-// -> arrangedRows (sorting.js)
-// -> filteredRows (filtering.js)
-// -> pagedRows    (paging.js)
-// -> groupedRows  (grouping.js)
+// --> sorting.js arrangedRows
+// --> filtering.js handleFiltering()
+// --> filtering.js filteredRows
+// --> paging.js pageRows
+// --> grouping.js groupedRows
+// --> index.vue displayedRows
 
 export default {
   name:       'SortableTable',
@@ -100,6 +87,16 @@ export default {
       required: false
     },
 
+    /**
+     * Alt Loading - True: Always show table rows and obscure them when `loading`. Intended for use with server-side pagination.
+     *
+     * Alt Loading - False: Hide the table rows when `loading`. Intended when all resources are provided up front.
+     */
+    altLoading: {
+      type:     Boolean,
+      required: false
+    },
+
     groupBy: {
       // Field to group rows by, row[groupBy] must be something that can be a map key
       type:    String,
@@ -164,6 +161,11 @@ export default {
       default: false,
     },
 
+    subRowsDescription: {
+      type:    Boolean,
+      default: true,
+    },
+
     subExpandable: {
       type:    Boolean,
       default: false,
@@ -266,7 +268,7 @@ export default {
      */
     noDataKey: {
       type:    String,
-      default: 'sortableTable.noData'
+      default: 'sortableTable.noData' // i18n-uses sortableTable.noData
     },
 
     /**
@@ -282,6 +284,14 @@ export default {
       default: null,
     },
 
+    /**
+     * The list will always be sorted by these regardless of what the user has selected
+     */
+    mandatorySort: {
+      type:    Array,
+      default: null,
+    },
+
     /**
      * Allows you to link to a custom detail page for data that
      * doesn't have a class model. For example, a receiver configuration
@@ -313,6 +323,22 @@ export default {
     forceUpdateLiveAndDelayed: {
       type:    Number,
       default: 0
+    },
+
+    /**
+     * True if pagination is executed outside of the component
+     */
+    externalPaginationEnabled: {
+      type:    Boolean,
+      default: false
+    },
+
+    /**
+     * If `externalPaginationEnabled` is true this will be used as the current page
+     */
+    externalPaginationResult: {
+      type:    Object,
+      default: null
     }
   },
 
@@ -327,12 +353,18 @@ export default {
     }
 
     return {
-      currentPhase:     ASYNC_BUTTON_STATES.WAITING,
-      expanded:         {},
+      refreshButtonPhase:         ASYNC_BUTTON_STATES.WAITING,
+      expanded:                   {},
       searchQuery,
       eventualSearchQuery,
-      actionOfInterest: null,
-      loadingDelay:     false,
+      subMatches:                 null,
+      actionOfInterest:           null,
+      loadingDelay:               false,
+      debouncedPaginationChanged: null,
+      /**
+       * The is the bool the DOM uses to show loading state. it's proxied from `loading` to avoid blipping the indicator (see usages)
+       */
+      isLoading:                  false,
     };
   },
 
@@ -346,12 +378,14 @@ export default {
 
     this._onScroll = this.onScroll.bind(this);
     $main?.addEventListener('scroll', this._onScroll);
+
+    this.debouncedPaginationChanged();
   },
 
   beforeDestroy() {
-    clearTimeout(this.loadingDelayTimer);
     clearTimeout(this._scrollTimer);
     clearTimeout(this._loadingDelayTimer);
+    clearTimeout(this._altLoadingDelayTimer);
     clearTimeout(this._liveColumnsTimer);
     clearTimeout(this._delayedColumnsTimer);
     clearTimeout(this.manualRefreshTimer);
@@ -383,21 +417,27 @@ export default {
     descending(neu, old) {
       this.watcherUpdateLiveAndDelayed(neu, old);
     },
+
     searchQuery(neu, old) {
       this.watcherUpdateLiveAndDelayed(neu, old);
     },
+
     sortFields(neu, old) {
       this.watcherUpdateLiveAndDelayed(neu, old);
     },
+
     groupBy(neu, old) {
       this.watcherUpdateLiveAndDelayed(neu, old);
     },
+
     namespaces(neu, old) {
       this.watcherUpdateLiveAndDelayed(neu, old);
     },
+
     page(neu, old) {
       this.watcherUpdateLiveAndDelayed(neu, old);
     },
+
     forceUpdateLiveAndDelayed(neu, old) {
       this.watcherUpdateLiveAndDelayed(neu, old);
     },
@@ -418,17 +458,40 @@ export default {
     manualRefreshLoadingFinished: {
       handler(neu, old) {
         // this is merely to update the manual refresh button status
-        this.currentPhase = !neu ? ASYNC_BUTTON_STATES.WAITING : ASYNC_BUTTON_STATES.ACTION;
+        this.refreshButtonPhase = !neu ? ASYNC_BUTTON_STATES.WAITING : ASYNC_BUTTON_STATES.ACTION;
         if (neu && neu !== old) {
           this.$nextTick(() => this.updateLiveAndDelayed());
         }
       },
       immediate: true
-    }
+    },
+
+    loading: {
+      handler(neu, old) {
+        // Always ensure the Refresh button phase aligns with loading state (to ensure external phase changes which can then reset the internal phase changed by click)
+        this.refreshButtonPhase = neu ? ASYNC_BUTTON_STATES.WAITING : ASYNC_BUTTON_STATES.ACTION;
+
+        if (this.altLoading) {
+          // Delay setting the actual loading indicator. This should avoid flashing up the indicator if the API responds quickly
+          if (neu) {
+            this._altLoadingDelayTimer = setTimeout(() => {
+              this.isLoading = true;
+            }, 200); // this should be higher than the targetted quick response
+          } else {
+            clearTimeout(this._altLoadingDelayTimer);
+            this.isLoading = false;
+          }
+        } else {
+          this.isLoading = neu;
+        }
+      },
+      immediate: true
+    },
   },
 
   created() {
     this.debouncedRefreshTableData = debounce(this.refreshTableData, 500);
+    this.debouncedPaginationChanged = debounce(this.paginationChanged, 50);
   },
 
   computed: {
@@ -439,11 +502,16 @@ export default {
     },
 
     initalLoad() {
-      return !!(!this.loading && !this._didinit && this.rows?.length);
+      return !!(!this.isLoading && !this._didinit && this.rows?.length);
     },
 
     manualRefreshLoadingFinished() {
-      return !!(!this.loading && this._didinit && this.rows?.length && !this.isManualRefreshLoading);
+      const res = !!(!this.isLoading && this._didinit && this.rows?.length && !this.isManualRefreshLoading);
+
+      // Always ensure the Refresh button phase aligns with loading state (regardless of if manualRefreshLoadingFinished has changed or not)
+      this.refreshButtonPhase = !res || this.loading ? ASYNC_BUTTON_STATES.WAITING : ASYNC_BUTTON_STATES.ACTION;
+
+      return res;
     },
 
     fullColspan() {
@@ -543,6 +611,7 @@ export default {
         'body-dividers': this.bodyDividers,
         'overflow-y':    this.overflowY,
         'overflow-x':    this.overflowX,
+        'alt-loading':   this.altLoading && this.isLoading
       };
     },
 
@@ -771,6 +840,12 @@ export default {
       // console.warn(`Performance: Table valueFor: ${ col.name } ${ col.value }`); // eslint-disable-line no-console
 
       const expr = col.value || col.name;
+
+      if (!expr) {
+        console.error('No path has been defined for this column, unable to get value of cell', col); // eslint-disable-line no-console
+
+        return '';
+      }
       const out = get(row, expr);
 
       if ( out === null || out === undefined ) {
@@ -879,7 +954,7 @@ export default {
 
     showSubRow(row, keyField) {
       const hasInjectedSubRows = this.subRows && (!this.subExpandable || this.expanded[get(row, keyField)]);
-      const hasStateDescription = row.stateDescription;
+      const hasStateDescription = this.subRowsDescription && row.stateDescription;
 
       return hasInjectedSubRows || hasStateDescription;
     },
@@ -898,6 +973,23 @@ export default {
         event,
         targetElement: this.$refs[`actionButton${ i }`][0],
       });
+    },
+
+    paginationChanged() {
+      if (!this.externalPaginationEnabled) {
+        return;
+      }
+
+      this.$emit('pagination-changed', {
+        page:    this.page,
+        perPage: this.perPage,
+        filter:  {
+          searchFields: this.searchFields,
+          searchQuery:  this.searchQuery
+        },
+        sort:       this.sortFields,
+        descending: this.descending
+      });
     }
   }
 };
@@ -1028,7 +1120,7 @@ export default {
             v-if="isTooManyItemsToAutoUpdate"
             class="manual-refresh"
             mode="manual-refresh"
-            :current-phase="currentPhase"
+            :current-phase="refreshButtonPhase"
             @click="debouncedRefreshTableData"
           />
           <div
@@ -1121,7 +1213,7 @@ export default {
         :default-sort-by="_defaultSortBy"
         :descending="descending"
         :no-rows="noRows"
-        :loading="loading && !loadingDelay"
+        :loading="isLoading && !loadingDelay"
         :no-results="noResults"
         @on-toggle-all="onToggleAll"
         @on-sort-change="changeSort"
@@ -1131,9 +1223,9 @@ export default {
       />
 
       <!-- Don't display anything if we're loading and the delay has yet to pass -->
-      <div v-if="loading && !loadingDelay" />
+      <div v-if="isLoading && !loadingDelay" />
 
-      <tbody v-else-if="loading">
+      <tbody v-else-if="isLoading && !altLoading">
         <slot name="loading">
           <tr>
             <td :colspan="fullColspan">
@@ -1378,7 +1470,8 @@ export default {
       <button
         type="button"
         class="btn btn-sm role-multi-action"
-        :disabled="page == 1"
+        data-testid="pagination-first"
+        :disabled="page == 1 || loading"
         @click="goToPage('first')"
       >
         <i class="icon icon-chevron-beginning" />
@@ -1386,7 +1479,8 @@ export default {
       <button
         type="button"
         class="btn btn-sm role-multi-action"
-        :disabled="page == 1"
+        data-testid="pagination-prev"
+        :disabled="page == 1 || loading"
         @click="goToPage('prev')"
       >
         <i class="icon icon-chevron-left" />
@@ -1397,7 +1491,8 @@ export default {
       <button
         type="button"
         class="btn btn-sm role-multi-action"
-        :disabled="page == totalPages"
+        data-testid="pagination-next"
+        :disabled="page == totalPages || loading"
         @click="goToPage('next')"
       >
         <i class="icon icon-chevron-right" />
@@ -1405,7 +1500,8 @@ export default {
       <button
         type="button"
         class="btn btn-sm role-multi-action"
-        :disabled="page == totalPages"
+        data-testid="pagination-last"
+        :disabled="page == totalPages || loading"
         @click="goToPage('last')"
       >
         <i class="icon icon-chevron-end" />
@@ -1443,7 +1539,11 @@ export default {
   </div>
 </template>
 
-  <style lang="scss" scoped>
+<style lang="scss" scoped>
+  .sortable-table.alt-loading {
+    opacity: 0.5;
+    pointer-events: none;
+  }
 
   .manual-refresh {
     height: 40px;
@@ -1607,9 +1707,9 @@ export default {
     margin-left: 10px;
     min-width: 180px;
   }
-  </style>
+</style>
 
-  <style lang="scss">
+<style lang="scss">
   //
   // Important: Almost all selectors in here need to be ">"-ed together so they
   // apply only to the current table, not one nested inside another table.
@@ -1941,4 +2041,4 @@ export default {
       min-width: 200px;
     }
   }
-  </style>
+</style>