Iteration

Note - prov clusters is broken (only fetches local) due to blocking pr. breals - notPinned list
rancher · Dec 2, 2024 · 6d14429 · 6d14429
1 parent 419cc30
commit 6d14429
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 46 deletions.
diff --git a/shell/components/AsyncButton.vue b/shell/components/AsyncButton.vue
@@ -288,6 +288,7 @@ export default defineComponent({
       v-if="displayIcon"
       v-clean-tooltip="tooltip"
       :class="{icon: true, 'icon-lg': true, [displayIcon]: true}"
+      class="ml-5 mr-0"
     />
     <span
       v-if="labelAs === 'text' && displayLabel"

diff --git a/shell/components/PaginatedResourceTable.vue b/shell/components/PaginatedResourceTable.vue
@@ -4,7 +4,7 @@ import ResourceFetch from '@shell/mixins/resource-fetch';
 import ResourceTable from '@shell/components/ResourceTable.vue';
 import { StorePaginationResult } from 'types/store/pagination.types';
 
-export type FetchSecondaryResourcesOpts = { }
+export type FetchSecondaryResourcesOpts = { canPaginate: boolean }
 export type FetchSecondaryResources = (opts: FetchSecondaryResourcesOpts) => Promise<any>
 
 export type FetchPageSecondaryResourcesOpts = { canPaginate: boolean, force: boolean, page: any[], pagResult: StorePaginationResult }
@@ -61,7 +61,7 @@ export default defineComponent({
     /**
      * Information may be required from resources other than the primary one shown per row
      *
-     * This will fetch only those relevent to the current page using server-side pagination based filters
+     * This will fetch only those relevant to the current page using server-side pagination based filters
      *
      * called from shell/mixins/resource-fetch-api-pagination.js
      */
@@ -78,8 +78,8 @@ export default defineComponent({
   async fetch() {
     await this.$fetchType(this.resource, [], this.inStore);
 
-    if (this.canPaginate && this.fetchSecondaryResources) {
-      await this.fetchSecondaryResources({ });
+    if (this.fetchSecondaryResources) {
+      await this.fetchSecondaryResources({ canPaginate: this.canPaginate });
     }
   },
 

diff --git a/shell/components/SortableTable/index.vue b/shell/components/SortableTable/index.vue
@@ -577,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() {
@@ -1115,15 +1115,13 @@ export default {
             </template>
           </slot>
         </div>
-        <!-- v-if="!hasAdvancedFiltering && $slots['header-middle']" TODO: RC -->
         <div
           v-if="!hasAdvancedFiltering && $slots['header-middle']"
           class="middle"
         >
           <slot name="header-middle" />
         </div>
 
-        <!-- v-if="search || hasAdvancedFiltering || isTooManyItemsToAutoUpdate || $slots['header-right']" TODO: RC -->
         <div
           v-if="search || hasAdvancedFiltering || isTooManyItemsToAutoUpdate || $slots['header-right']"
           class="search row"
@@ -1676,7 +1674,7 @@ export default {
         margin-right: 10px;
         font-size: 11px;
       }
-     .cross {
+      .cross {
         font-size: 12px;
         font-weight: bold;
         cursor: pointer;

diff --git a/shell/components/nav/TopLevelMenu.helper.ts b/shell/components/nav/TopLevelMenu.helper.ts
@@ -2,7 +2,6 @@ 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';
@@ -35,14 +34,14 @@ type MgmtCluster = {
 type ProvCluster = {
   [key: string]: any
 }
+
 /**
  * Order
- * 1. Specific Local Cluster
- * 2. Ready
- * 3. Name
+ * 1. local cluster - https://github.com/rancher/dashboard/issues/10975
+ * 2. working clusters
+ * 3. name
  */
 const DEFAULT_SORT: Array<PaginationSort> = [
-  // 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
@@ -98,6 +97,8 @@ export abstract class BaseTopLevelMenuHelper {
   * 2. If local or not (filterHiddenLocalCluster)
   * 3. Is pinned
   *
+  * Why aren't we filtering these by search term? Because we don't show pinned when filtering on search term
+  *
   * Sort By
   * 1. is local cluster (appears at top)
   * 2. ready
@@ -143,6 +144,9 @@ export abstract class BaseTopLevelMenuHelper {
   }
 }
 
+/**
+ * Helper designed to supply paginated results for the top level menu cluster resources
+ */
 export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper implements TopLevelMenuHelper {
   private args?: UpdateArgs;
 
@@ -152,22 +156,18 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
 
   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)
+        // trigger on websocket update (only need 1 trigger for this cluster type)
+        // https://github.com/rancher/rancher/issues/40773 / https://github.com/rancher/dashboard/issues/12734
         if (this.args) {
           this.update(this.args);
         }
@@ -183,7 +183,8 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
     this.clustersOthersWrapper = new PaginationWrapper({
       $store,
       onUpdate: (res) => {
-        // TODO: RC trigger on websocket update (only need 1 trigger for this cluster type)
+        // trigger on websocket update (only need 1 trigger for this cluster type)
+        // https://github.com/rancher/rancher/issues/40773 / https://github.com/rancher/dashboard/issues/12734
         if (this.args) {
           this.update(this.args);
         }
@@ -199,7 +200,8 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
     this.provClusterWrapper = new PaginationWrapper({
       $store,
       onUpdate: (res) => {
-        // TODO: RC trigger on websocket update
+        // trigger on websocket update (only need 1 trigger for this cluster type)
+        // https://github.com/rancher/rancher/issues/40773 / https://github.com/rancher/dashboard/issues/12734
         if (this.args) {
           this.update(this.args);
         }
@@ -277,7 +279,7 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
       }
 
       if (excludePinned) {
-        // cluster id is NOT 1 AND NOT 2 OR 3 OR 4...
+        // cluster id is NOT 1 AND NOT 2 AND NOT 3 AND NOT 4...
         filters.push(...pinnedIds.map((id) => PaginationParamFilter.createSingleField({
           field: 'id', equals: false, value: id
         })));
@@ -302,6 +304,11 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
    * See `clustersPinned` description for details
    */
   private async updatePinned(args: UpdateArgs): Promise<MgmtCluster[]> {
+    if (args.pinnedIds?.length < 1) {
+      // Return early, otherwise we're fetching all clusters...
+      return Promise.resolve([]);
+    }
+
     return this.clustersPinnedWrapper.request({
       pagination: {
         filters: this.constructParams({
@@ -364,13 +371,15 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
   }
 }
 
+/**
+ * Helper designed to supply non-pagainted results for the top level menu cluster resources
+ */
 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);
@@ -381,13 +390,10 @@ export class TopLevelMenuHelperLegacy extends BaseTopLevelMenuHelper implements
   }
 
   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;
 
@@ -404,7 +410,6 @@ export class TopLevelMenuHelperLegacy extends BaseTopLevelMenuHelper implements
    * 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

diff --git a/shell/components/nav/TopLevelMenu.vue b/shell/components/nav/TopLevelMenu.vue
@@ -16,12 +16,9 @@ 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: {
@@ -46,8 +43,6 @@ export default {
     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,

diff --git a/shell/pages/home.vue b/shell/pages/home.vue
@@ -26,7 +26,6 @@ import { ActionFindPageArgs } from '@shell/types/store/dashboard-store.types';
 import { RESET_CARDS_ACTION, SET_LOGIN_ACTION } from '@shell/config/page-actions';
 import { STEVE_NAME_COL, STEVE_STATE_COL } from 'config/pagination-table-headers';
 import { PaginationParamFilter, FilterArgs, PaginationFilterField } from 'types/store/pagination.types';
-import devConsole from 'utils/dev-console';
 import ProvCluster from 'models/provisioning.cattle.io.cluster';
 
 export default defineComponent({
@@ -131,14 +130,12 @@ export default defineComponent({
           value: '',
           name:  'cpu',
           sort:  ['status.allocatable.cpu', 'status.available.cpu']
-
         },
         {
           label: this.t('tableHeaders.memory'),
           value: '',
           name:  'memory',
           sort:  ['status.allocatable.memory', 'status.available.memory']
-
         },
         {
           label:        this.t('tableHeaders.pods'),
@@ -159,8 +156,6 @@ export default defineComponent({
         {
           ...STEVE_NAME_COL,
           canBeVariable: true,
-          // TODO: RC ISSUE describe. search sort on prov meta namespace
-          // getValue:      (row: ProvCluster) => row.mgmt?.nameDisplay || row.metadata?.name
           getValue:      (row: ProvCluster) => row.metadata?.name
         },
         {
@@ -244,7 +239,14 @@ export default defineComponent({
   },
 
   methods: {
-    fetchSecondaryResources(opts: FetchSecondaryResourcesOpts) {
+    /**
+     * Of type FetchSecondaryResources
+     */
+    fetchSecondaryResources(opts: FetchSecondaryResourcesOpts): Promise<any> {
+      if (opts.canPaginate) {
+        return Promise.resolve({});
+      }
+
       // TODO: RC TEST with pagination off and on
       if ( this.canViewMgmtClusters ) {
         this.$store.dispatch('management/findAll', { type: MANAGEMENT.CLUSTER });
@@ -266,6 +268,8 @@ export default defineComponent({
       if ( this.canViewMgmtTemplates ) {
         this.$store.dispatch('management/findAll', { type: MANAGEMENT.NODE_TEMPLATE });
       }
+
+      return Promise.resolve({});
     },
 
     async fetchPageSecondaryResources({
@@ -305,17 +309,17 @@ export default defineComponent({
           })
         };
 
-        this.$store.dispatch(`management/findPage`, { type: CAPI.MACHINE, opt });
+        await this.$store.dispatch(`management/findPage`, { type: CAPI.MACHINE, opt });
       }
 
       if ( this.canViewMgmtNodes ) {
         const opt: ActionFindPageArgs = {
           force,
-          // TODO: RC Validate
           pagination: new FilterArgs({
             filters: PaginationParamFilter.createMultipleFields(page.map((r: any) => new PaginationFilterField({
               field: 'id',
-              value: r.mgmtClusterId
+              value: r.mgmtClusterId,
+              exact: false,
             }))),
           })
         };
@@ -340,7 +344,6 @@ export default defineComponent({
 
         const templateOpt: ActionFindPageArgs = {
           force,
-          // pagination: new FilterArgs({}),
           // TODO: RC Validate
           pagination: new FilterArgs({
             filters: PaginationParamFilter.createMultipleFields(page.map((r: any) => new PaginationFilterField({
@@ -496,7 +499,7 @@ export default defineComponent({
               v-if="mcm"
               class="col span-12"
             >
-              <!-- // TODO: RC check loading indicator when pagination off -->
+              <!-- // TODO: RC TEST with pagination off and on. check loading indicator when pagination off -->
               <PaginatedResourceTable
                 :schema="provClusterSchema"
                 :table-actions="false"

diff --git a/shell/utils/pagination-wrapper.ts b/shell/utils/pagination-wrapper.ts
@@ -7,10 +7,22 @@ interface Result<T> {
   pagination: StorePagination
 }
 
+/**
+ * This is a helper class that will assist in fetching a resource
+ * - Handle if the resource can be fetched by the new pagination api
+ * - Make a request to get a page (including classify)
+ * - Provide updates when the resource changes
+ *
+ * This is designed to work in places where we don't/can't store the resource in the store
+ * - There already exists a resource we don't want to overwrite
+ * - We're transient and want something nicer than just cluster/request
+ */
 class PaginationWrapper<T = any> {
     private $store: VuexStore;
     private enabledFor: PaginationResourceContext;
-    private onUpdate: (out: Result<T>) => void; // TODO: RC wire in to web socket (when new socket stuff is available)
+
+    // Blocked on https://github.com/rancher/rancher/issues/40773 / https://github.com/rancher/dashboard/issues/12734
+    private onUpdate: (out: Result<T>) => void;
 
     public isEnabled: boolean;